/* admin.css — alimentacion-salud
 *
 * LA PALETA ES LA DE `diseño/LEEME.md` Y NO SE INVENTA NINGÚN COLOR. Son ocho
 * con nombre propio, y la regla escrita ahí es que antes de agregar un noveno
 * hay que poder decir por qué no alcanzan. Los colores de familia no están acá:
 * salen de los datos, porque los edita el propio panel.
 *
 * Y LAS ESQUINAS REDONDEADAS SON TRES, A PROPÓSITO. El mockup tiene diez
 * medidas distintas decididas de a una, que es el error que `diseño/LEEME.md`
 * marca para corregir antes de construir. Esta es la primera pantalla que se
 * construye: si arranca con diez, la corrección no va a pasar nunca.
 *   chico 6px (campos y botones) · medio 12px (tarjetas) · grande 20px (paneles)
 */

:root {
  --bosque: #1F3524;
  --tinta: #1C2A18;
  --salvia: #EFF3E7;
  --salvia2: #E3EAD6;
  --miel: #D89A2B;
  --miel-osc: #B57E1B;
  --oliva: #6B7F3A;
  --blanco: #FDFDF9;

  --r-chico: 6px;
  --r-medio: 12px;
  --r-grande: 20px;

  --titulo: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --texto: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --numero: "Spline Sans Mono", ui-monospace, "Cascadia Mono", monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--texto);
  color: var(--tinta);
  background: var(--salvia);
  font-size: 15px;
  line-height: 1.5;
}

h1, h2, h3 { font-family: var(--titulo); margin: 0 0 .5rem; line-height: 1.2; }
h1 { font-size: 1.3rem; font-weight: 800; }
h2 { font-size: 1.05rem; font-weight: 600; }

/* LA FRANJA DE ENTORNO. Es la "señal visible de en qué entorno estás" que pide
   ESTADO-ACTUAL §3, y existe para no confundir pestañas: en producción no se
   muestra, así que verla significa siempre lo mismo. */
#franja {
  background: var(--miel); color: var(--bosque);
  font-weight: 600; text-align: center; padding: .35rem;
  font-size: .85rem; letter-spacing: .04em;
}

header {
  /* flex-wrap: con los enlaces de las cuentas, la cabecera ya no entra en una
     notebook y "Salir" quedaba afuera de la pantalla, con scroll horizontal. */
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  padding: .75rem 1rem; background: var(--bosque); color: var(--salvia);
}
header h1 { color: var(--blanco); margin: 0; }
header .quien { margin-left: auto; font-size: .85rem; opacity: .85; }
/* Los enlaces de la cabecera se ven como enlaces (subrayados), no como texto
   suelto: lo que se puede cliquear tiene que parecerlo (U6). */
header a { color: var(--salvia); font-size: .85rem; text-decoration: underline; }
header a:hover { color: var(--blanco); }

button {
  font: inherit; font-weight: 600; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--r-chico);
  padding: .45rem .9rem; background: var(--oliva); color: var(--blanco);
}
button:hover { background: var(--bosque); }
button.suave { background: transparent; color: var(--tinta); border-color: var(--salvia2); }
button.suave:hover { background: var(--salvia2); }

/* Sobre el verde del encabezado, el botón suave heredaba el color del texto
   normal y quedaba ilegible: tinta oscura sobre bosque oscuro. Se vio en una
   captura de la pantalla real, no leyendo el CSS. */
header button.suave { color: var(--salvia); border-color: rgba(253, 253, 249, .4); }
header button.suave:hover { background: rgba(253, 253, 249, .15); color: var(--blanco); }
button.riesgo { background: transparent; color: #8C2F22; border-color: #D8B4AE; }
button.riesgo:hover { background: #8C2F22; color: var(--blanco); }
button:disabled { opacity: .5; cursor: not-allowed; }

input, select, textarea {
  font: inherit; width: 100%; padding: .45rem .6rem;
  border: 1px solid var(--salvia2); border-radius: var(--r-chico);
  background: var(--blanco); color: var(--tinta);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--oliva); outline-offset: 1px; }
label { display: block; font-size: .8rem; font-weight: 600; margin: .6rem 0 .15rem; }
label .nota { font-weight: 400; opacity: .7; }

/* -------------------------------------------------------------------- panel */
#panel { display: grid; grid-template-columns: 250px 1fr; gap: 1rem; padding: 1rem; align-items: start; }
@media (max-width: 940px) { #panel { grid-template-columns: 1fr; } }

.caja { background: var(--blanco); border-radius: var(--r-grande); padding: 1rem; }

/* familias */
#familias ul { list-style: none; margin: 0; padding: 0; }
#familias li { margin-bottom: .2rem; }
#familias .fam {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  background: transparent; color: var(--tinta); text-align: left;
  border-left: 4px solid var(--fam, var(--oliva)); border-radius: var(--r-chico);
}
#familias .fam:hover { background: var(--salvia2); }
#familias .fam[aria-current="true"] { background: var(--salvia2); }
#familias .fam .n { margin-left: auto; font-family: var(--numero); font-size: .8rem; opacity: .7; }
#familias .secciones { margin: .1rem 0 .4rem 1.4rem; font-size: .85rem; }
#familias .secciones button { background: transparent; color: var(--tinta); padding: .2rem .4rem; font-weight: 400; }
#familias .secciones button[aria-current="true"] { font-weight: 700; color: var(--bosque); }

/* productos */
.barra { display: flex; gap: .5rem; align-items: center; margin-bottom: .75rem; flex-wrap: wrap; }
.barra input[type="search"] { max-width: 260px; }
.barra .cuenta { font-family: var(--numero); font-size: .85rem; opacity: .7; margin-left: auto; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .4rem .5rem; border-bottom: 1px solid var(--salvia2); }
th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; opacity: .7; }
td.precio { font-family: var(--numero); text-align: right; white-space: nowrap; }

/* "FUERA DE LISTA": el producto que la última planilla de precios no nombraba.
   Va pegado al precio y no en una columna aparte porque es una advertencia
   SOBRE ese número —es viejo—, no un dato más de la fila. */
td.precio .fuera {
  display: block; font-family: var(--texto); font-size: .68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; color: #8C2F22; cursor: help;
}
.barra .chip { padding: .3rem .6rem; font-size: .8rem; }
.barra .chip[aria-pressed="true"] { background: #8C2F22; color: var(--blanco); border-color: #8C2F22; }
tr.inactivo td { opacity: .45; }
tr.fila:hover { background: var(--salvia); cursor: pointer; }
td .mini { width: 34px; height: 34px; object-fit: contain; border-radius: var(--r-chico); background: var(--salvia2); }

/* ------------------------------------------------------- ficha de edición */
dialog {
  border: none; border-radius: var(--r-grande); padding: 0;
  width: min(760px, 94vw); background: var(--blanco); color: var(--tinta);
}
dialog::backdrop { background: rgba(31, 53, 36, .45); }
.ficha { display: grid; grid-template-columns: 240px 1fr; gap: 1.25rem; padding: 1.25rem; }
@media (max-width: 760px) { .ficha { grid-template-columns: 1fr; } }
.ficha footer { grid-column: 1 / -1; display: flex; gap: .5rem; justify-content: flex-end; border-top: 1px solid var(--salvia2); padding-top: .75rem; }
.ficha footer .izq { margin-right: auto; }

/* LA PREVIA. Si el producto tiene plantilla de familia, se pinta de fondo y la
   imagen va encima; con las fotos de PRAMA, que ya traen su fondo, queda una
   sola capa. Las dos formas funcionan sin tocar nada. */
.previa {
  /* 4:5, la proporción de las fotos de PRAMA (1024×1280). Desde que se usan
     enteras —con su fondo, sus sellos y su título adentro— la previa ya no
     compone dos capas: muestra la foto tal cual llega. */
  position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-medio);
  overflow: hidden; background: var(--salvia2) center/cover no-repeat;
  display: grid; place-items: center;
}
/* El recorte viene en el MISMO lienzo que la plantilla y en su posición
   original, así que se superpone exacto y no se reescala. Antes se achicaba al
   62% y quedaba flotando chico en el medio, corrido respecto de la foto real. */
.previa img.envase { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.previa .vacia { font-size: .8rem; opacity: .6; text-align: center; padding: 1rem; }
.previa .emoji { font-size: 3rem; }

/* La previa se puede ampliar: a 240px de ancho no se juzga si el envase quedó
   bien ubicado respecto de los sellos. La lupa está para que se note que es
   clicable — una función invisible es una función que no existe. */
.previa { cursor: zoom-in; }
.previa:focus-visible { outline: 2px solid var(--oliva); outline-offset: 2px; }
.previa .lupa {
  position: absolute; right: .4rem; bottom: .4rem; z-index: 2;
  background: rgba(31, 53, 36, .62); color: var(--blanco);
  border-radius: var(--r-chico); padding: .1rem .4rem; font-size: .9rem; line-height: 1.4;
}
.previa:hover .lupa { background: var(--bosque); }

/* ------------------------------------------------------- visor con zoom --- */
/* EL `display` VA EN `[open]` Y NO ACÁ. Un `display: flex` suelto le gana al
   `display: none` que el navegador le pone a un <dialog> cerrado, así que el
   visor se dibujaba ABAJO del panel, siempre, con su barra de botones. No se
   veía mientras la lista de productos era larga —quedaba fuera de la pantalla—
   y apareció el día que el filtro "fuera de lista" dejó tres filas. */
#visor {
  width: min(96vw, 1100px); height: min(94vh, 900px);
  padding: 0; flex-direction: column;
}
#visor[open] { display: flex; }

.visor-barra {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .6rem .8rem; border-bottom: 1px solid var(--salvia2);
}
.visor-barra .visor-capas { font-size: .8rem; opacity: .7; margin-right: auto; }
.visor-barra button { padding: .3rem .6rem; }
.visor-nivel { font-family: var(--numero); font-size: .8rem; min-width: 3.6em; text-align: center; }
#verGuias[aria-pressed="true"] { background: var(--oliva); color: var(--blanco); border-color: var(--oliva); }

.visor-lienzo {
  flex: 1; min-height: 0; overflow: hidden; display: grid; place-items: center;
  background: var(--salvia); cursor: grab; touch-action: none;
}
.visor-lienzo.arrastrando { cursor: grabbing; }

/* Las dos capas ocupan el mismo lienzo y se superponen exacto, igual que en la
   tienda: si acá se ve corrido, está corrido de verdad. */
.visor-imagen {
  position: relative; aspect-ratio: 4 / 5; height: 100%;
  transform-origin: center center; will-change: transform;
}
.visor-imagen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.visor-emoji { position: absolute; inset: 0; display: grid; place-items: center; font-size: 6rem; }

/* Las guías: tercios, ejes y el rectángulo donde vive el envase dentro de la
   plantilla. Sirven para ver la distribución, que es distinto de ver la foto. */
.visor-guias { position: absolute; inset: 0; pointer-events: none; }
.visor-guias::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to right, transparent 33.33%, rgba(31,53,36,.28) 33.33%, rgba(31,53,36,.28) calc(33.33% + 1px), transparent calc(33.33% + 1px)),
    linear-gradient(to right, transparent 66.66%, rgba(31,53,36,.28) 66.66%, rgba(31,53,36,.28) calc(66.66% + 1px), transparent calc(66.66% + 1px)),
    linear-gradient(to bottom, transparent 33.33%, rgba(31,53,36,.28) 33.33%, rgba(31,53,36,.28) calc(33.33% + 1px), transparent calc(33.33% + 1px)),
    linear-gradient(to bottom, transparent 66.66%, rgba(31,53,36,.28) 66.66%, rgba(31,53,36,.28) calc(66.66% + 1px), transparent calc(66.66% + 1px));
}
/* Quedan sólo los tercios. El rectángulo del "área del producto" tenía sentido
   cuando el envase se componía sobre una plantilla; con la foto entera no hay
   nada que encuadrar, y una guía que no guía nada es ruido. */

.visor-ayuda {
  margin: 0; padding: .5rem .8rem; font-size: .78rem; opacity: .7;
  border-top: 1px solid var(--salvia2);
}
.visor-ayuda kbd {
  font-family: var(--numero); font-size: .9em;
  border: 1px solid var(--salvia2); border-radius: 4px; padding: 0 .3em;
}

/* ------------------------------------------------------ lista de precios -- */
/*
 * ES UNA PANTALLA DE REVISIÓN, ASÍ QUE ES ANCHA Y SCROLLEA SOLA EN EL MEDIO.
 * El resumen de arriba y los botones de abajo quedan fijos: lo que se revisa
 * son 125 renglones, y el botón de aplicar no puede estar a un scroll de
 * distancia del número de cuántos cambian.
 */
#fichaPrecios {
  width: min(96vw, 1040px); height: min(92vh, 900px);
  padding: 0; display: none; flex-direction: column;
}
#fichaPrecios[open] { display: flex; }

.precios-barra {
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem .9rem; border-bottom: 1px solid var(--salvia2);
}
.precios-barra strong { font-family: var(--titulo); font-size: 1.05rem; }
.precios-paso { font-family: var(--numero); font-size: .8rem; opacity: .7; margin-right: auto; }

.precios-cuerpo { flex: 1; min-height: 0; overflow: auto; padding: 1rem; }
.precios-pie {
  display: flex; gap: .5rem; justify-content: flex-end;
  border-top: 1px solid var(--salvia2); padding: .75rem .9rem;
}
.precios-pie .izq { margin-right: auto; }
.precios-pie:empty { display: none; }

.precios-elegir { max-width: 560px; margin: 1rem auto; }
.precios-elegir code { font-family: var(--numero); font-size: .9em; }
.precios-nota { font-size: .78rem; opacity: .7; margin: .5rem 0 0; }
.precios-cierre { font-size: .875rem; padding-left: 1.1rem; }
.precios-cierre li { margin-bottom: .3rem; }
.precios-vacio { text-align: center; opacity: .7; padding: 2rem 1rem; }

/* los cuatro números de arriba */
.precios-resumen { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: .9rem; }
.precios-dato {
  flex: 1 1 130px; background: var(--salvia); border-radius: var(--r-medio);
  padding: .6rem .8rem; display: flex; flex-direction: column;
}
.precios-dato b { font-family: var(--numero); font-size: 1.5rem; line-height: 1.1; }
.precios-dato span { font-size: .78rem; opacity: .75; }
.precios-dato.destaca { background: var(--salvia2); box-shadow: inset 3px 0 0 var(--oliva); }
.precios-dato.alerta { background: #F6E3E0; color: #8C2F22; box-shadow: inset 3px 0 0 #8C2F22; }

.precios-filtro { display: flex; align-items: center; gap: .6rem; margin: .9rem 0 .4rem; }
.precios-filtro .linea { display: flex; align-items: center; gap: .4rem; margin: 0; font-size: .85rem; }
.precios-filtro input[type="checkbox"] { width: auto; }
.precios-cuenta { font-family: var(--numero); font-size: .8rem; opacity: .7; margin-left: auto; }

/* los desplegables: avisos arriba, familias en el medio, pendientes al final */
.precios-detalle, .grupo {
  background: var(--blanco); border: 1px solid var(--salvia2);
  border-radius: var(--r-medio); padding: .5rem .8rem; margin-bottom: .6rem;
}
.precios-detalle.alerta { border-color: #D8B4AE; background: #FCF4F2; }
.precios-detalle > summary, .grupo > summary {
  cursor: pointer; font-size: .9rem; padding: .2rem 0;
  display: flex; align-items: baseline; gap: .5rem;
}
.precios-detalle ul { margin: .4rem 0; padding-left: 1.1rem; font-size: .85rem; }
.grupo > summary .grupo-nombre { font-family: var(--titulo); font-weight: 600; font-size: 1rem; }
.grupo > summary .grupo-cuenta { font-size: .8rem; opacity: .7; margin-left: auto; }
.grupo-seccion { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; opacity: .7; margin: .7rem 0 .1rem; }

.precios-tabla { width: 100%; border-collapse: collapse; font-size: .875rem; }
.precios-tabla th, .precios-tabla td { padding: .3rem .45rem; border-bottom: 1px solid var(--salvia2); text-align: left; }
.precios-tabla th { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; opacity: .7; }
.precios-tabla .num { font-family: var(--numero); text-align: right; white-space: nowrap; }
.precios-tabla .tenue { opacity: .6; }
.precios-tabla .fuerte { font-weight: 700; }
.precios-tabla tr.igual td { opacity: .75; }
/* Sube y baja con color Y con signo: el signo lo lee cualquiera, el color no. */
.precios-tabla .sube { color: #8C2F22; }
.precios-tabla .baja { color: #3C6B2F; }
.precios-tabla .marca {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .04em;
  background: var(--salvia2); border-radius: var(--r-chico);
  padding: 0 .35em; margin-left: .35em; white-space: nowrap; cursor: help;
}
.precios-tabla .marca.tenue { opacity: .45; }

.aviso { border-radius: var(--r-chico); padding: .5rem .7rem; margin: .5rem 0; font-size: .875rem; }
.aviso.mal { background: #F6E3E0; color: #8C2F22; }
.aviso.bien { background: var(--salvia2); color: var(--bosque); }
.oculto { display: none !important; }