/* ============================================================
   KALE LENCERÍAS — Panel de administración
   ------------------------------------------------------------
   Sirve a admin-login.html y a admin.html.

   Escrito desde cero sobre los tokens del sitio en lugar de
   adaptar admin.css de Pinpon, que son 9.984 líneas y arrastra un
   sistema de diseño entero. Acá alcanza con que el panel se sienta
   parte del mismo negocio: el oro, el rosa empolvado y las dos
   tipografías del catálogo.

   Decisión de fondo: el panel es una herramienta de trabajo, no un
   escaparate. Nada de animaciones de entrada ni sombras grandes;
   lo que importa es que una fila de tabla se lea de un vistazo y
   que los botones peligrosos no se parezcan a los inocentes.
   ============================================================ */

/* ============================================================
   El panel comparte el sistema del sitio: grafito, naranja de
   señal, monoespaciada para los datos y ángulos rectos.

   Los nombres de variable vienen del proyecto del que se adaptó
   esta hoja (--gold, --pink-soft). No se renombran acá porque
   los usan 2.400 líneas; lo que cambia es a qué resuelven.
   ============================================================ */
:root {
  color-scheme: dark;
  --bg: #0B0D10;
  --panel: #13171C;
  --text: #E7EAEE;
  --text-light: #98A1AC;
  --gold: #FF5A1F;          /* acento de señal */
  --gold-dark: #FF8A4C;
  --pink-soft: #181D23;     /* superficie elevada */
  --line: rgba(231, 234, 238, 0.13);
  --linea-fuerte: rgba(231, 234, 238, 0.22);
  --ok: #3DDC97;
  --ok-fondo: #11241C;
  --alerta: #FF6B6B;
  --alerta-fondo: #2A1618;
  --aviso: #FFC65A;
  --aviso-fondo: #2A2214;
  --radio: 3px;
  --barra-ancho: 220px;
  --grid-cell: 28px;
  --grid-module: 140px;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  /* Safari en iPhone agranda el texto solo al girar el teléfono a
     horizontal. Esto lo desactiva: el diseño ya es responsive y no
     necesita que el navegador lo "ayude". */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 0.875rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* En iPhone con notch, el contenido llegaría por debajo de la
     barra de gestos y del notch en horizontal. */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* ── Lo que se toca con el dedo ───────────────────────────────
   44px es el mínimo que recomienda Apple y 48 el de Android. Los
   controles del panel se dibujan más chicos por densidad, así que
   se les agranda el ÁREA sin agrandar el dibujo.

   Sólo en pantallas de dedo: con mouse, 44px de alto en cada botón
   de una tabla la volvería gigante. */
@media (pointer: coarse) {
  .btn, .barra-nav a, .pestanas button, .fila-clienta, .quitar-linea {
    min-height: 44px;
  }
  .btn-chico { min-height: 38px; padding: 8px 13px; }
  .barra-salir, .btn-acceso { min-height: 46px; }
  td.acciones .btn { margin-bottom: 3px; }
}

h1, h2, h3 { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600; letter-spacing: -0.022em; }

a { color: var(--gold-dark); text-decoration: none; }

input, select, textarea, button { font-family: inherit; font-size: inherit; color: inherit; }

/* ════════════════════════════════════════════════════════════
   ACCESO
   ════════════════════════════════════════════════════════════ */
.acceso-body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 20% 15%, var(--pink-soft), transparent 55%),
    radial-gradient(circle at 85% 80%, rgba(200, 167, 108, 0.14), transparent 50%),
    var(--bg);
  padding: 24px 16px;
}

.acceso { width: 100%; max-width: 380px; }

.acceso-caja {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 34px 28px 26px;
  box-shadow: 0 18px 50px rgba(74, 64, 60, 0.08);
  text-align: center;
}

.acceso-logo {
  width: 62px; height: 62px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 14px;
}

.acceso-caja h1 { font-size: 1.5rem; line-height: 1.2; }

.acceso-sub {
  color: var(--text-light);
  font-size: 0.8rem;
  margin: 6px 0 22px;
}

.acceso form { text-align: left; }

/* ── Un campo ─────────────────────────────────────────────────
   `justify-content: space-between` + el margin-top:auto del
   control es lo que ALINEA las filas de la rejilla.

   El problema que resuelve: varios campos llevan un texto de
   ayuda debajo de la etiqueta y otros no. Como la rejilla estira
   todas las celdas de una fila a la misma altura, un campo con
   dos líneas de ayuda empujaba su input hacia abajo mientras el
   de al lado quedaba arriba, y la fila se veía escalonada.

   Con esto, la etiqueta queda arriba y el control pegado al
   fondo de la celda: los inputs de una misma fila terminan
   alineados por abajo, sin importar cuánta ayuda tenga cada uno. */
.campo {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 15px;
  justify-content: space-between;
}

.campo > input,
.campo > select,
.campo > textarea,
.campo > .campo-password {
  margin-top: auto;
}

.campo label {
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-light);
  font-weight: 500;
}

.campo label small {
  display: block;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.72rem;
  color: var(--text-light);
  font-weight: 400;
  margin-top: 2px;
}

.campo input, .campo select, .campo textarea {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 10px 12px;
  background: var(--bg);
  transition: border-color 0.15s ease;
  width: 100%;
  /* Sin esto, un input con padding al 100% de ancho se desborda de
     su celda en la rejilla y aparece scroll horizontal. */
  min-width: 0;
  /* iOS redondea y sombrea los campos por su cuenta. */
  -webkit-appearance: none;
  appearance: none;
}

/* ── Las casillas conservan su dibujo ─────────────────────────
   `appearance: none` de arriba le quita a una casilla TODO su
   aspecto nativo, incluida la tilde: la casilla queda como un
   recuadro vacío que nunca se marca aunque esté marcada. Pasó con
   «Edición limitada» y con «Google puede listarla».

   Se les devuelve el dibujo del sistema y se los agranda: 18px es
   lo mínimo para acertarle con el dedo. `accent-color` los tiñe
   del dorado de la marca sin tener que dibujarlos a mano, que es
   justamente lo que trajo el problema. */
.campo input[type="checkbox"],
.campo input[type="radio"],
.dialogo input[type="checkbox"],
.fila-horario input[type="checkbox"] {
  -webkit-appearance: auto;
  appearance: auto;
  width: 18px;
  height: 18px;
  min-width: 18px;
  flex: 0 0 auto;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  accent-color: var(--gold-dark);
  cursor: pointer;
}

/* ── El detalle que arruina un panel en iPhone ────────────────
   Safari hace ZOOM automático al enfocar un campo cuyo texto mida
   menos de 16px, y después no vuelve: la pantalla queda corrida y
   hay que pellizcar para salir. Con 16px exactos no hace zoom.

   Se aplica sólo a pantallas chicas porque en escritorio 16px en
   cada campo se vería desproporcionado al lado del resto. */
@media (max-width: 860px) {
  .campo input, .campo select, .campo textarea,
  .buscador input, .barra-acciones select, .barra-acciones input,
  .fila-variante input, .fila-horario input,
  .mostrador-ticket select, .linea-venta input {
    font-size: 16px;
  }
}

.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--gold);
}

.campo textarea { resize: vertical; line-height: 1.5; }
#campoOtp[hidden], .seguridad-mfa [hidden] { display: none; }
.qr-mfa { display: block; max-width: 100%; height: auto; margin: 16px 0; background: #fff; image-rendering: pixelated; }
.qr-mfa[hidden] { display: none; }
#secretoMfa { overflow-wrap: anywhere; user-select: all; }
.seguridad-mfa { max-width: 640px; }
.seguridad-mfa > .ayuda { margin: 8px 0 18px; }
.seguridad-mfa #estadoMfa { color: var(--text-light); }
.seguridad-mfa .formulario { background: transparent; border: 0; padding: 20px 0 0; }
.seguridad-mfa .formulario h3 { margin-bottom: 16px; }
.seguridad-mfa #preparacionMfa { margin-bottom: 20px; }
.seguridad-mfa #mensajeMfa:empty, .seguridad-mfa #avisoQrMfa:empty { display: none; }
.seguridad-mfa #mensajeMfa { margin-top: 16px; }
.mfa-alternativa { margin-top: 16px; }
.mfa-alternativa summary { cursor: pointer; color: var(--gold-dark); font-weight: 500; }
.mfa-alternativa p { margin: 12px 0; }

.campo-password { position: relative; }

.campo-password input { padding-right: 42px; }

/* ── Un solo ojo ──────────────────────────────────────────────
   Edge y Chrome agregan su PROPIO botón para revelar la
   contraseña dentro del campo. Sumado al nuestro, quedaban dos
   ojos pegados haciendo lo mismo.

   Se oculta el del navegador y se conserva el nuestro, que es el
   que además anuncia su estado a los lectores de pantalla con
   aria-pressed. */
.campo-password input::-ms-reveal,
.campo-password input::-ms-clear {
  display: none;
}

/* Safari muestra su propio botón de autocompletado de contraseñas
   en la misma esquina. */
.campo-password input::-webkit-credentials-auto-fill-button,
.campo-password input::-webkit-strong-password-auto-fill-button {
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  right: 0;
}

.ver-clave {
  position: absolute;
  right: 4px; top: 50%;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 0; background: none;
  color: var(--text-light);
  cursor: pointer;
  border-radius: 8px;
}

.ver-clave svg { width: 17px; height: 17px; }
.ver-clave:hover, .ver-clave.activo { color: var(--gold-dark); }

.btn-acceso {
  width: 100%;
  border: 0;
  border-radius: 999px;
  background: var(--gold);
  color: var(--bg);
  padding: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  cursor: pointer;
  margin-top: 6px;
  transition: background-color 0.15s ease;
}

.btn-acceso:hover:not(:disabled) { background: var(--gold-dark); }
.btn-acceso:disabled { opacity: 0.6; cursor: progress; }

.acceso-error {
  margin-top: 13px;
  padding: 9px 12px;
  border-radius: 9px;
  background: var(--alerta-fondo);
  color: var(--alerta);
  font-size: 0.78rem;
  border-left: 2px solid var(--alerta);
}

.acceso-pie {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
  font-size: 0.72rem;
  color: var(--text-light);
  line-height: 1.45;
}

.acceso-volver {
  display: block;
  text-align: center;
  margin-top: 18px;
  font-size: 0.78rem;
  color: var(--text-light);
}

.acceso-volver:hover { color: var(--gold-dark); }

/* ════════════════════════════════════════════════════════════
   PANEL — armazón
   ════════════════════════════════════════════════════════════ */
.cargando-todo {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: var(--bg);
}

.cargando-caja { text-align: center; }
.cargando-caja p { margin-top: 14px; font-size: 0.9rem; }
.cargando-caja span { font-size: 0.76rem; color: var(--text-light); }

.spinner {
  width: 30px; height: 30px;
  margin: 0 auto;
  border: 2px solid var(--line);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: girar 0.8s linear infinite;
}

@keyframes girar { to { transform: rotate(360deg); } }

.cargando-error { max-width: 340px; }
.cargando-error h2 { font-size: 1.2rem; margin-bottom: 8px; }
.cargando-error p { color: var(--text-light); font-size: 0.82rem; }

.admin-layout {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ── Barra lateral ── */
.barra {
  width: var(--barra-ancho);
  flex: 0 0 var(--barra-ancho);
  background: var(--panel);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
}

.barra-marca {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 18px 16px;
  border-bottom: 1px solid var(--line);
}

.barra-marca img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.barra-marca strong { display: block; font-family: var(--font-mono); font-size: 0.98rem; letter-spacing: 0.04em; }
.barra-marca span {
  font-size: 0.64rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--text-light);
}

.barra-nav { flex: 1; padding: 12px 8px; overflow-y: auto; }

.barra-nav a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border-radius: 9px;
  color: var(--text);
  font-size: 0.82rem;
  margin-bottom: 1px;
  transition: background-color 0.13s ease, color 0.13s ease;
}

.barra-nav svg {
  width: 16px; height: 16px;
  flex: 0 0 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.barra-nav a:hover { background: var(--bg); }

.barra-nav a.activo {
  background: var(--pink-soft);
  color: var(--gold-dark);
  font-weight: 500;
}

.barra-pie { padding: 12px; border-top: 1px solid var(--line); }

.barra-link { display: block; font-size: 0.76rem; margin-bottom: 9px; }

.barra-salir {
  width: 100%;
  border: 1px solid var(--line);
  background: none;
  border-radius: 9px;
  padding: 8px;
  font-size: 0.78rem;
  cursor: pointer;
  color: var(--text-light);
  transition: border-color 0.15s ease, color 0.15s ease;
}

.barra-salir:hover { border-color: var(--alerta); color: var(--alerta); }

/* ── Contenido ── */
.contenido { flex: 1; min-width: 0; padding: 0 24px 40px; }

.cabecera {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 0 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 10;
}

.cabecera h1 { font-size: 1.5rem; flex: 1; }

.cabecera-usuario {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  color: var(--text-light);
}

.punto-sesion {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ok);
}

.punto-sesion.vencida { background: var(--alerta); }

.menu-movil {
  display: none;
  width: 34px; height: 34px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
  cursor: pointer;
  place-items: center;
}

.menu-movil svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round;
}

/* ── Secciones ── */
.seccion { display: none; }
.seccion.activa { display: block; }

.vista[hidden] { display: none; }

/* ── Avisos ── */
.avisos { position: sticky; top: 62px; z-index: 9; }

.aviso {
  padding: 10px 14px;
  border-radius: 9px;
  margin-bottom: 10px;
  font-size: 0.82rem;
  border-left: 3px solid;
  animation: aparecer 0.18s ease;
}

@keyframes aparecer { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; } }

.aviso.ok { background: var(--ok-fondo); border-color: var(--ok); color: var(--ok); }
.aviso.error { background: var(--alerta-fondo); border-color: var(--alerta); color: var(--alerta); }
.aviso.atencion { background: var(--aviso-fondo); border-color: var(--aviso); color: var(--aviso); }

/* ── Tarjetas de resumen ── */
.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.tarjetas-chicas { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }

/* La rejilla ya estira las tarjetas a la misma altura. Lo que hay
   que alinear es lo de ADENTRO: el pie de cada una tiene un largo
   distinto («2 ventas» vs. «3 nuevas en 30 días · +12% vs. mes
   anterior»), y sin esto los números grandes quedaban a distinta
   altura entre tarjetas vecinas. */
.tarjeta {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radio);
  padding: 15px 16px;
  display: flex;
  flex-direction: column;
}

/* El pie de la tarjeta se define más abajo; ahí se le pone el
   margin-top:auto que lo empuja al fondo. */

.tarjeta-etiqueta {
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-light);
}

.tarjeta-valor {
  font-family: var(--font-mono);
  font-size: 1.65rem;
  font-weight: 600;
  line-height: 1.15;
  margin-top: 3px;
}

/* `margin-top: auto` lo empuja al fondo de la tarjeta, que es lo
   que alinea los números grandes entre tarjetas vecinas cuando los
   pies tienen distinto largo. El padding-top hace de separación
   mínima para cuando no sobra espacio. */
.tarjeta-pie {
  font-size: 0.73rem;
  color: var(--text-light);
  margin-top: auto;
  padding-top: 2px;
}
.tarjeta-pie.sube { color: var(--ok); }
.tarjeta-pie.baja { color: var(--alerta); }

/* ── Cajas y columnas ── */
.dos-columnas {
  display: grid;
  /* `min(300px, 100%)` en lugar de 300px pelado: en una pantalla
     más angosta que 300px la columna se encoge en lugar de
     desbordar. Sin esto, el ancho mínimo gana y aparece scroll
     horizontal en toda la página — y el que la media query de 900px
     lo arregle no ayuda a un aparato de 280px. */
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.caja {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radio);
  padding: 16px 18px;
  margin-bottom: 16px;
}

.caja h2 { font-size: 1.1rem; margin-bottom: 11px; }
.caja h3 { font-size: 0.95rem; margin-bottom: 9px; }

/* ── Pestañas ── */
.pestanas {
  display: flex;
  gap: 3px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
  overflow-x: auto;
}

.pestanas button {
  border: 0;
  background: none;
  padding: 9px 14px;
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--text-light);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  margin-bottom: -1px;
}

.pestanas button.activa { color: var(--gold-dark); border-bottom-color: var(--gold); font-weight: 500; }

.tab-panel { display: none; }
.tab-panel.activa { display: block; }

/* ── Barra de acciones ── */
.barra-acciones {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.barra-acciones > strong { font-family: var(--font-mono); font-size: 1rem; letter-spacing: 0.03em; }

.buscador { flex: 1 1 200px; min-width: 160px; }

.buscador input,
.barra-acciones select,
.barra-acciones input[type="date"] {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 8px 12px;
  background: var(--panel);
}

.barra-acciones select, .barra-acciones input[type="date"] { width: auto; }

.buscador input:focus { outline: none; border-color: var(--gold); }

/* ── Botones ── */
.btn {
  border: 1px solid var(--linea-fuerte);
  background: var(--panel);
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 0.8rem;
  transition: border-color 0.14s ease, background-color 0.14s ease, color 0.14s ease;
  white-space: nowrap;
}

.btn:hover { border-color: var(--text); }

.btn-principal { background: var(--text); color: #fff; border-color: var(--text); }
.btn-principal:hover { background: var(--gold-dark); border-color: var(--gold-dark); }

/* Los botones destructivos NO se parecen a los demás: el contorno
   rojo es el único aviso antes de un clic que no se deshace. */
.btn-peligro { color: var(--alerta); border-color: rgba(163, 61, 79, 0.35); }
.btn-peligro:hover { background: var(--alerta); color: #fff; border-color: var(--alerta); }

.btn-chico { padding: 5px 11px; font-size: 0.74rem; }

/* Reactivar es la acción constructiva de una fila dada de baja:
   se distingue en verde para que se encuentre de un vistazo entre
   los botones neutros. */
.btn-reactivar { color: var(--ok); border-color: rgba(47, 125, 91, 0.4); }
.btn-reactivar:hover { background: var(--ok); color: #fff; border-color: var(--ok); }

/* La fila entera de una prenda despublicada se atenúa: no está
   rota, pero tampoco se está vendiendo. */
tbody tr:has(.btn-reactivar) { background: rgba(74, 64, 60, 0.035); }
tbody tr:has(.btn-reactivar) .celda-principal { color: var(--text-light); }
.btn-ancho { width: 100%; margin-top: 10px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Tablas ── */
.tabla-envoltura {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radio);
  overflow-x: auto;
}

table { width: 100%; border-collapse: collapse; }

th {
  text-align: left;
  padding: 10px 14px;
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-light);
  font-weight: 500;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: rgba(246, 234, 238, 0.4); }

td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.acciones { text-align: right; white-space: nowrap; }
td.acciones .btn { margin-left: 4px; }

.celda-principal { font-weight: 500; }
.celda-sub { display: block; font-size: 0.73rem; color: var(--text-light); }

/* ── Etiquetas de estado ── */
.etiqueta {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid;
}

.etiqueta.ok { color: var(--ok); border-color: rgba(47, 125, 91, 0.35); background: var(--ok-fondo); }
.etiqueta.mal { color: var(--alerta); border-color: rgba(163, 61, 79, 0.3); background: var(--alerta-fondo); }
.etiqueta.tibia { color: var(--aviso); border-color: rgba(138, 109, 31, 0.3); background: var(--aviso-fondo); }
.etiqueta.gris { color: var(--text-light); border-color: var(--line); }

/* ── Vacíos y ayuda ── */
.vacio, .ayuda {
  color: var(--text-light);
  font-size: 0.82rem;
  line-height: 1.5;
}

.vacio { padding: 22px 14px; text-align: center; }

.ayuda {
  background: var(--pink-soft);
  border-radius: 9px;
  padding: 11px 14px;
  margin-bottom: 16px;
}

/* ── Formularios ── */
.formulario {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radio);
  padding: 20px;
}

.formulario h3 {
  font-size: 1rem;
  margin: 22px 0 10px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.formulario h3 small {
  display: block;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 0.73rem;
  font-weight: 400;
  color: var(--text-light);
  margin-top: 3px;
}

/* `align-items: end` alinea los controles de cada fila por abajo,
   que es el borde que el ojo usa para leer un formulario en
   columnas. Sin esto, dos campos de la misma fila con ayudas de
   distinto largo quedan a distinta altura. */
.campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: 14px;
  align-items: end;
}

.campo-ancho { grid-column: 1 / -1; }

/* Un textarea no puede alinearse por abajo con un input de una
   línea sin quedar raro: se estira a toda la celda. */
.campo-ancho > textarea { margin-top: 0; }

.campo-check { justify-content: flex-end; }
.campo-check label {
  display: flex;
  align-items: center;
  gap: 7px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.82rem;
  color: var(--text);
  cursor: pointer;
}
/* El tamaño lo fija la regla de las casillas, más arriba. Acá sólo
   se asegura que la etiqueta no la estire. */
.campo-check input[type="checkbox"] { width: 18px; }

.form-pie {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.form-nota { font-size: 0.76rem; color: var(--text-light); }
.total-grande { font-family: var(--font-mono); font-size: 1.22rem; font-variant-numeric: tabular-nums; flex: 1; }

/* Fichas de compras y ventas: datos completos y productos a ancho de pantalla. */
.operacion-datos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 24px;
}
.operacion-datos dt { font-size: 0.74rem; color: var(--text-light); margin-bottom: 3px; }
.operacion-datos dd { margin: 0; overflow-wrap: anywhere; }
.operacion-nota { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 16px; font-size: 0.85rem; }
#anulacionCompraDetalle, #anulacionVentaDetalle { margin-top: 16px; }
.detalle-operacion .operacion-producto { display: block; font-weight: 600; overflow-wrap: anywhere; }
.detalle-operacion td:first-child { min-width: 180px; }

@media (max-width: 768px) {
  .operacion-datos { grid-template-columns: 1fr; }
  .detalle-operacion .tabla-envoltura { border: 0; background: transparent; overflow: visible; }
  .detalle-operacion table, .detalle-operacion tbody { display: block; }
  .detalle-operacion thead { display: none; }
  .detalle-operacion tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 14px;
    gap: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radio);
    margin-bottom: 10px;
    background: var(--panel);
  }
  .detalle-operacion td { display: block; padding: 0; border: 0; white-space: normal; overflow-wrap: anywhere; }
  .detalle-operacion td:first-child { min-width: 0; }
  .detalle-operacion td:nth-child(-n+2), .detalle-operacion td:last-child { grid-column: 1 / -1; }
  .detalle-operacion td::before {
    content: attr(data-etiqueta);
    display: block;
    margin-bottom: 3px;
    color: var(--text-light);
    font-size: 0.7rem;
    font-weight: 400;
  }
}

.venta-detalle-importes { margin-top: 18px; max-width: 560px; }
.venta-detalle-importes .totales div { gap: 16px; }
.venta-detalle-importes .totales span:last-child { white-space: nowrap; }

/* ── Editor de variantes y de ítems de compra ── */
.fila-variante {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 90px auto;
  gap: 8px;
  align-items: end;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
}

.fila-variante .campo { margin-bottom: 0; }

.fila-variante .solo-lectura {
  background: var(--bg);
  color: var(--text-light);
}

/* ── La fila de una compra ────────────────────────────────────
   Reparto distinto al de las variantes: la prenda se lleva el
   espacio (es el dato largo), la cantidad y el costo se achican
   porque son números cortos, y el subtotal se agranda — es el que
   se mira para controlar la compra y quedaba apretado contra el
   borde, en gris, como si fuera un detalle. */
.fila-compra {
  grid-template-columns: minmax(0, 2.4fr) 78px 118px minmax(120px, 1fr) auto;
}

.fila-compra .subtotal-compra {
  background: var(--pink-soft);
  border-color: rgba(200, 167, 108, 0.45);
  color: var(--text);
  font-weight: 600;
  font-size: 1rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding-right: 11px;
}

/* ── El botón que abre el buscador de prendas ────────────────
   Parece un campo, no un botón: ocupa el lugar donde antes estaba
   el desplegable y por eso tiene que leerse como parte del
   formulario. La lupa a la izquierda dice qué hace. */
.elegir-prenda {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg);
  padding: 10px 12px;
  text-align: left;
  color: var(--text-light);
  font-size: 0.85rem;
  min-height: 41px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.elegir-prenda:hover { border-color: var(--gold); }

.elegir-prenda .ico-lupa { color: var(--gold-dark); }

.elegir-prenda-texto {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Con una prenda elegida deja de parecer un campo vacío: fondo
   rosado, texto firme y una tilde. Sin esto no se distinguía de
   una fila sin completar. */
.elegir-prenda.elegida {
  background: var(--pink-soft);
  border-color: var(--gold);
  color: var(--text);
  font-weight: 500;
}

.elegir-prenda.elegida .ico-lupa { display: none; }

.elegir-prenda.elegida::before {
  content: "✓";
  color: var(--ok);
  font-weight: 700;
  flex: 0 0 auto;
}

/* ── Mostrador (venta en tienda) ── */
.mostrador {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 16px;
  align-items: start;
}

.mostrador-catalogo {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radio);
  padding: 14px;
}

.mostrador-catalogo .buscador { margin-bottom: 12px; }

.pos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
  gap: 9px;
  max-height: 60vh;
  overflow-y: auto;
}

.pos-prenda {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px;
  cursor: pointer;
  background: var(--panel);
  text-align: left;
  transition: border-color 0.14s ease;
}

.pos-prenda:hover:not(:disabled) { border-color: var(--gold); }
.pos-prenda:disabled { opacity: 0.45; cursor: not-allowed; }

.pos-prenda strong { display: block; font-size: 0.78rem; font-weight: 500; }
.pos-prenda span { display: block; font-size: 0.7rem; color: var(--text-light); }
.pos-prenda .sin-precio { color: var(--alerta); }

.mostrador-ticket .caja { margin-bottom: 12px; }
.mostrador-ticket select { width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; background: var(--bg); }

.linea-venta {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.8rem;
}

.linea-venta:last-child { border-bottom: 0; }
.linea-venta strong { font-weight: 500; }
.linea-venta small { display: block; color: var(--text-light); font-size: 0.72rem; }
.linea-venta input { width: 52px; text-align: center; border: 1px solid var(--line); border-radius: 7px; padding: 4px; }

.quitar-linea {
  border: 0; background: none; cursor: pointer;
  color: var(--text-light); font-size: 1.1rem; line-height: 1;
  padding: 0 4px;
}
.quitar-linea:hover { color: var(--alerta); }

.totales { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 11px; }

.totales div {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  padding: 2px 0;
}

.totales div.final {
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 600;
  border-top: 1px solid var(--line);
  margin-top: 7px;
  padding-top: 8px;
}

/* ── Barras del informe ── */
.barra-dato { margin-bottom: 9px; }

.barra-dato-fila {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  margin-bottom: 3px;
}

.barra-dato-pista { height: 5px; background: var(--bg); border-radius: 999px; overflow: hidden; }
.barra-dato-relleno { height: 100%; background: var(--gold); border-radius: 999px; }

/* ════════════════════════════════════════════════════════════
   SELECTOR DE IMÁGENES
   ------------------------------------------------------------
   Antes acá había un campo de texto donde escribir
   «Imagenes/conjunto-rosa1.jpg». Ahora se ve la foto.
   ════════════════════════════════════════════════════════════ */

.selector-imagen {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-top: auto;
}

.imagen-previa {
  flex: 0 0 auto;
  width: 76px;
  height: 95px;
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: hidden;
  background: var(--bg);
  display: grid;
  place-items: center;
}

.imagen-previa img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Sin imagen y «no se encontró» son estados distintos: el primero
   es normal, el segundo es una ruta que quedó apuntando a un
   archivo borrado y hay que arreglarla. */
.imagen-previa.vacia,
.imagen-previa.rota {
  border-style: dashed;
}

.imagen-previa span {
  font-size: 0.66rem;
  text-align: center;
  color: var(--text-light);
  padding: 0 6px;
  line-height: 1.3;
}

.imagen-previa.rota {
  border-color: rgba(163, 61, 79, 0.4);
  background: var(--alerta-fondo);
}

.imagen-previa.rota span { color: var(--alerta); }

.imagen-acciones {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── La ventana ───────────────────────────────────────────── */
.dialogo-imagenes { max-width: 640px; }

/* ── Zona de carga ────────────────────────────────────────────
   Grande a propósito: es un objetivo de toque mucho más cómodo
   que un botón, y además es donde se suelta un archivo
   arrastrado. */
.zona-carga {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 22px 16px;
  border: 2px dashed var(--line);
  border-radius: 12px;
  background: var(--bg);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.16s ease, background-color 0.16s ease;
}

.zona-carga:hover,
.zona-carga:focus-visible {
  border-color: var(--gold);
  background: var(--pink-soft);
  outline: none;
}

/* Con un archivo encima, el recuadro tiene que decir «soltalo
   acá»: sin esta señal no se sabe si el navegador lo va a aceptar
   o a abrirlo en otra pestaña. */
.zona-carga.encima {
  border-color: var(--gold-dark);
  background: var(--pink-soft);
  border-style: solid;
}

.zona-carga svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--gold-dark);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.zona-carga strong { font-size: 0.9rem; font-weight: 500; }
.zona-carga span { font-size: 0.8rem; color: var(--text-light); }
.zona-carga small { font-size: 0.7rem; color: var(--text-light); }

.carga-estado {
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 0.8rem;
  background: var(--bg);
  border-left: 3px solid var(--line);
}

.carga-estado.ok { background: var(--ok-fondo); border-color: var(--ok); color: var(--ok); }
.carga-estado.error { background: var(--alerta-fondo); border-color: var(--alerta); color: var(--alerta); }

/* ── Galería ──────────────────────────────────────────────────
   Las imágenes ya cargadas, para reutilizarlas en lugar de subir
   la misma foto dos veces. */
.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(96px, 100%), 1fr));
  gap: 8px;
  max-height: 42vh;
  max-height: 42dvh;
  overflow-y: auto;
  margin-top: 12px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  -webkit-overflow-scrolling: touch;
}

.galeria .vacio { grid-column: 1 / -1; }

/* La celda contiene la miniatura y el botón de borrar, hermanos.
   No anidados: un <button> dentro de otro es HTML inválido y el
   navegador lo saca de la tarjeta al corregirlo. */
.galeria-celda {
  position: relative;
  display: block;
}

.galeria-item {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  padding: 0;
  background: var(--bg);
  cursor: pointer;
  transition: border-color 0.14s ease;
}

.galeria-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.galeria-item:hover { border-color: var(--gold); }

/* La que ya está puesta se marca: evita volver a elegir la misma
   creyendo que se cambió algo. */
.galeria-item.elegida { border-color: var(--gold-dark); }

/* El tilde va a la IZQUIERDA: arriba a la derecha está el botón de
   borrar, y encimarlos haría que el clic cayera en el que no se
   quería. */
.galeria-item.elegida::after {
  content: "✓";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gold-dark);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
}

.galeria-item-pie {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 3px 5px;
  background: rgba(74, 64, 60, 0.72);
  color: #fff;
  font-size: 0.6rem;
  text-align: center;
}

.galeria-item-pie em { font-style: normal; }

/* ── Estado de uso de cada imagen ──────────────────────────── */

/* «En uso» no es un adorno: es lo que distingue una foto que se
   puede borrar de una que está en pantalla del sitio. */
.galeria-uso,
.galeria-roto {
  display: inline-block;
  margin-left: 4px;
  padding: 0 4px;
  border-radius: 6px;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.galeria-uso { background: var(--gold-dark); color: #fff; }
.galeria-roto { background: #b3261e; color: #fff; }

/* La fila está en la base pero el archivo no está en la carpeta.
   Se atenúa para que se note sin tener que leer el pie. */
.galeria-item.sin-archivo { border-color: #b3261e; }
.galeria-item.sin-archivo img { opacity: 0.25; }

/* ── Borrar una imagen desde la galería ────────────────────── */

.galeria-borrar {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 2;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(74, 64, 60, 0.82);
  color: #fff;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  /* Oculto hasta que el puntero pase por encima: con 135 fotos,
     135 cruces a la vista convierten la galería en un tablero de
     botones de borrado. */
  opacity: 0;
  transition: opacity 0.14s ease, background 0.14s ease;
}

.galeria-celda:hover .galeria-borrar,
.galeria-borrar:focus-visible { opacity: 1; }

.galeria-borrar:hover { background: #b3261e; }

/* En pantalla táctil no hay «pasar por encima»: ahí se muestra
   siempre, y más grande, porque el dedo no apunta tan fino. */
@media (pointer: coarse) {
  .galeria-borrar {
    opacity: 1;
    width: 28px;
    height: 28px;
    font-size: 1.05rem;
  }
}

/* ── Filtros de la galería ─────────────────────────────────── */

.filtros-galeria {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}

.chip-filtro {
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text-light);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}

.chip-filtro:hover { border-color: var(--gold); }

.chip-filtro.activo {
  background: var(--gold-dark);
  border-color: var(--gold-dark);
  color: #fff;
}

.galeria-resumen {
  margin-left: auto;
  color: var(--text-light);
  font-size: 0.74rem;
}

.galeria-nota {
  margin: 8px 0 0;
  color: var(--text-light);
  font-size: 0.74rem;
  line-height: 1.5;
}

@media (max-width: 560px) {
  .galeria { grid-template-columns: repeat(auto-fill, minmax(min(78px, 100%), 1fr)); }
  .zona-carga { padding: 16px 12px; }
  .imagen-previa { width: 64px; height: 80px; }
  /* El resumen debajo de los filtros, no apretado a la derecha. */
  .galeria-resumen { margin-left: 0; width: 100%; }
}

/* ════════════════════════════════════════════════════════════
   CONFIGURACIÓN POR GRUPOS
   ------------------------------------------------------------
   Los campos se agrupan por tema en lugar de salir todos juntos
   en orden alfabético. El separador entre grupos es lo que
   permite recorrer la pantalla sin leerla entera.
   ════════════════════════════════════════════════════════════ */

.grupo-config {
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.grupo-config:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}

.grupo-config h3 {
  font-size: 1.05rem;
  margin: 0 0 4px;
  padding: 0;
  border-top: 0;
}

.grupo-config-ayuda {
  font-size: 0.78rem;
  color: var(--text-light);
  line-height: 1.5;
  margin-bottom: 14px;
  max-width: 54ch;
}

.campos-objetivos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.campos-objetivos input[readonly] { background: var(--bg); color: var(--text-light); }

@media (max-width: 768px) {
  .campos-objetivos { grid-template-columns: 1fr; }
}

/* ── El logo ──────────────────────────────────────────────────
   Es el único campo visual de la pantalla y estaba perdido entre
   ocho campos de texto idénticos. Acá se le da su propia fila,
   fondo y una vista previa grande: lo que uno quiere ver al
   entrar a «Identidad» es si el logo está bien puesto. */
.campo-logo {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radio);
  padding: 15px 16px;
}

.campo-logo .selector-imagen {
  align-items: center;
  gap: 16px;
}

/* Cuadrado y más grande que la vista previa de una prenda: un
   logo suele serlo, y recortado a 76×95 se ve mal. */
.campo-logo .imagen-previa {
  width: 104px;
  height: 104px;
  border-radius: 12px;
  background: var(--panel);
}

.campo-logo .imagen-previa img {
  object-fit: contain;
  padding: 7px;
}

.campo-logo .imagen-acciones {
  flex-direction: row;
  flex-wrap: wrap;
}

@media (max-width: 560px) {
  .campo-logo .selector-imagen { align-items: flex-start; }
  .campo-logo .imagen-previa { width: 84px; height: 84px; }
}

/* ── Ficha del producto ───────────────────────────────────────
   Se pinta como ficha y no como formulario deshabilitado. Un
   campo gris con el cursor prohibido invita a intentar editarlo y
   deja la sensación de que algo está roto; una ficha se lee y se
   entiende que es información, no un control. */
.caja-producto { max-width: 560px; }

.ficha { display: flex; flex-direction: column; }

.ficha-fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}

.ficha-fila:last-child { border-bottom: 0; }

.ficha dt {
  flex: 1 1 auto;
  min-width: 0;
}

.ficha dt span {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-light);
  font-weight: 500;
}

.ficha dt small {
  display: block;
  font-size: 0.74rem;
  color: var(--text-light);
  margin-top: 3px;
  line-height: 1.45;
}

.ficha dd {
  flex: 0 1 auto;
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text);
  text-align: right;
  word-break: break-word;
}

/* La versión como número, no como nombre propio. */
.ficha dd.ficha-version {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--gold-dark);
}

@media (max-width: 480px) {
  .ficha-fila { flex-direction: column; gap: 5px; }
  .ficha dd { text-align: left; }
}

/* ── Horarios ── */
.fila-horario {
  display: grid;
  grid-template-columns: 110px 72px 1fr 1fr 1.4fr;
  gap: 9px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.fila-horario:last-child { border-bottom: 0; }
.fila-horario > span { font-size: 0.82rem; }
.fila-horario input[type="time"], .fila-horario input[type="text"] {
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; width: 100%; background: var(--bg);
}
.fila-horario label { display: flex; align-items: center; gap: 6px; font-size: 0.76rem; color: var(--text-light); }

/* ── Diálogo ── */
.dialogo {
  border: 0;
  border-radius: 16px;
  padding: 0;
  max-width: 460px;
  width: calc(100% - 32px);
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 22px 60px rgba(74, 64, 60, 0.22);

  /* El navegador centra un <dialog> modal con `margin: auto`, pero
     el reset `* { margin: 0 }` de arriba lo pisaba y el diálogo
     quedaba pegado al borde superior. Hay que reponerlo.

     `max-height` + el scroll interno son para los formularios
     largos —el de clienta tiene siete campos—: sin eso, en un
     celular acostado el botón de guardar queda fuera de la pantalla
     y no hay forma de alcanzarlo. */
  margin: auto;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
}

.dialogo::backdrop { background: rgba(74, 64, 60, 0.42); }

.dialogo form { padding: 22px; }
.dialogo h2 { font-size: 1.25rem; margin-bottom: 14px; }
.dialogo .campos { grid-template-columns: 1fr; }

.dialogo-pie {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
}

.dialogo-texto { font-size: 0.85rem; line-height: 1.55; }
.dialogo-texto strong { font-weight: 600; }

/* ── Buscador de clientas ──────────────────────────────────── */
.dialogo-ancho { max-width: 560px; }
.dialogo-contenido { padding: 22px; }

.buscador-con-icono { position: relative; }

.buscador-con-icono input { padding-left: 34px; }

.ico-lupa {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  flex: 0 0 auto;
}

.buscador-con-icono .ico-lupa {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-light);
  pointer-events: none;
}

.lista-clientas {
  max-height: 46vh;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.fila-clienta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  padding: 11px 14px;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.fila-clienta:last-child { border-bottom: 0; }
.fila-clienta:hover { background: var(--pink-soft); }

.fila-clienta strong { display: block; font-weight: 500; font-size: 0.85rem; }
.fila-clienta span { display: block; font-size: 0.75rem; color: var(--text-light); }
.fila-clienta em { font-style: normal; font-size: 0.72rem; color: var(--gold-dark); white-space: nowrap; }

/* ── El buscador, más visible ─────────────────────────────────
   El campo era un input común con la lupa encima. Con el fondo
   rosado y el borde dorado se lee como lo que es: el lugar donde
   hay que escribir apenas se abre la ventana. */
.buscador-con-icono input {
  background: var(--panel);
  border-width: 1.5px;
  padding-top: 12px;
  padding-bottom: 12px;
  font-size: 0.9rem;
}

.buscador-con-icono input:focus {
  border-color: var(--gold);
  background: var(--pink-soft);
}

.buscador-con-icono:focus-within .ico-lupa { color: var(--gold-dark); }

/* Encabezado de la ventana de búsqueda, con la lupa al lado del
   título para que se entienda de un vistazo qué es. */
.dialogo-contenido h2 {
  display: flex;
  align-items: center;
  gap: 9px;
}

/* La fila de una prenda muestra tres cosas: qué es, de qué
   categoría y cuánto hay. El stock a la derecha, en columna, para
   poder recorrerlo con la vista. */
.fila-prenda-stock {
  font-style: normal;
  font-size: 0.72rem;
  text-align: right;
  white-space: nowrap;
  color: var(--text-light);
}

.fila-prenda-stock strong {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
}

.fila-prenda-stock.cero strong { color: var(--alerta); }

/* ── La clienta elegida, en el mostrador ──────────────────── */
.clienta-elegida {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 10px 12px;
  background: var(--bg);
  margin-bottom: 9px;
  font-size: 0.82rem;
}

.clienta-elegida.con-clienta { border-color: var(--gold); background: var(--pink-soft); }
.clienta-elegida strong { display: block; font-weight: 500; }
.clienta-elegida span { font-size: 0.75rem; color: var(--text-light); }

.clienta-acciones { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; }

.clienta-acciones .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  font-size: 0.76rem;
}

/* ── Promoción ─────────────────────────────────────────────── */
.etiqueta.promo {
  color: #fff;
  background: var(--alerta);
  border-color: var(--alerta);
  font-weight: 500;
}

/* El precio tachado al lado del promocional. Es la comparación que
   hace que el descuento se perciba. */
.precio-tachado {
  text-decoration: line-through;
  color: var(--text-light);
  font-size: 0.76rem;
  margin-right: 5px;
}

/* ════════════════════════════════════════════════════════════
   PANTALLAS CHICAS
   ------------------------------------------------------------
   El panel se usa desde el celular: registrar una venta en el
   mostrador con el teléfono en la mano es el caso más probable.
   ════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════
   PANTALLAS
   ------------------------------------------------------------
   Cuatro tamaños, elegidos por lo que se rompe en cada uno y no
   por los nombres de los aparatos:

     ≤1180px  tablet horizontal: el mostrador no da para dos
              columnas cómodas.
     ≤900px   tablet vertical: las rejillas de formulario bajan
              a dos columnas.
     ≤760px   celular grande y tablet chica: la barra lateral
              pasa a cajón, y empieza el modo de una columna.
     ≤420px   celular angosto.
   ════════════════════════════════════════════════════════════ */

/* ── Tablet horizontal ─────────────────────────────────────── */
@media (max-width: 1180px) {
  :root { --barra-ancho: 190px; }
  .mostrador { grid-template-columns: minmax(0, 1fr) 290px; }
  .contenido { padding: 0 18px 36px; }
}

/* ── Tablet vertical ───────────────────────────────────────── */
@media (max-width: 900px) {
  /* El mostrador en una columna: el catálogo arriba, el ticket
     abajo. En dos columnas de 300px cada una, ni el catálogo ni el
     ticket son usables. */
  .mostrador { grid-template-columns: 1fr; }
  .pos-grid { max-height: 44vh; }

  .fila-variante { grid-template-columns: 1fr 1fr; }
  .fila-horario { grid-template-columns: 1fr 1fr; }
  .dos-columnas { grid-template-columns: 1fr; }
  .campos { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}

/* ── Celular y tablet chica ────────────────────────────────── */
@media (max-width: 760px) {
  /* La barra lateral pasa a ser un cajón que se desliza.
     `100dvh` y no `100vh`: en el celular, 100vh incluye la barra
     de direcciones del navegador, así que el pie del menú —donde
     está «Cerrar sesión»— quedaba fuera de la pantalla. */
  .barra {
    position: fixed;
    inset: 0 auto 0 0;
    height: 100dvh;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    z-index: 100;
    box-shadow: 0 0 40px rgba(74, 64, 60, 0.18);
    padding-left: env(safe-area-inset-left);
  }
  .barra.abierta { transform: translateX(0); }

  /* Fondo que se oscurece con el cajón abierto: sin esto, no queda
     claro que hay que cerrarlo para volver. */
  .barra.abierta::after {
    content: "";
    position: fixed;
    inset: 0 0 0 var(--barra-ancho);
    background: rgba(74, 64, 60, 0.4);
  }

  .menu-movil { display: grid; }
  .contenido { padding: 0 14px calc(32px + env(safe-area-inset-bottom)); }
  .cabecera { padding: 14px 0 12px; }
  .cabecera h1 { font-size: 1.25rem; }
  /* El nombre de quien entró es lo primero que se puede sacrificar:
     el punto verde ya dice que la sesión está viva. */
  .cabecera-usuario span:first-child { display: none; }

  /* Las tablas se desplazan en lugar de encogerse hasta volverse
     ilegibles. El momentum de iOS hace que se sienta nativo. */
  .tabla-envoltura {
    border-radius: 10px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  th, td { padding: 10px 11px; }

  .avisos { top: 56px; }
  .tarjetas { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
  .formulario { padding: 16px 14px; }

  /* El pie del formulario se apila: dos botones al lado del total
     no entran, y el de guardar es el que tiene que verse entero. */
  .form-pie { flex-wrap: wrap; }
  .form-pie .btn { flex: 1 1 100%; }
  .total-grande { flex: 1 1 100%; }

  /* La barra de acciones en columna: un buscador, un filtro y un
     botón no entran en una línea de 360px sin quedar apretados. */
  .barra-acciones { gap: 8px; }
  .barra-acciones .btn-principal { flex: 1 1 100%; }
  .buscador { flex: 1 1 100%; }

  /* El diálogo ocupa casi toda la pantalla y respeta la barra de
     gestos. 100dvh otra vez, por lo mismo que la barra lateral. */
  .dialogo {
    width: calc(100% - 20px);
    max-height: calc(100dvh - 24px - env(safe-area-inset-bottom));
    margin-bottom: calc(12px + env(safe-area-inset-bottom));
  }
  .dialogo form, .dialogo-contenido { padding: 18px 16px; }
  .dialogo-pie { flex-wrap: wrap; }
  .dialogo-pie .btn { flex: 1 1 calc(50% - 5px); }
  .lista-clientas { max-height: 50dvh; }

  /* En el mostrador, el botón de finalizar siempre a la vista:
     quedaba al final de una columna larga y había que buscarlo. */
  .mostrador-ticket .caja:last-child { position: sticky; bottom: 0; }
}

/* ── Celular angosto ──────────────────────────────────────── */
@media (max-width: 420px) {
  :root { --barra-ancho: 82vw; }
  .contenido { padding: 0 11px calc(28px + env(safe-area-inset-bottom)); }
  .cabecera h1 { font-size: 1.1rem; }
  .campos, .fila-variante, .fila-horario { grid-template-columns: 1fr; }
  .tarjetas { grid-template-columns: 1fr 1fr; }
  .tarjeta-valor { font-size: 1.4rem; }
  .pos-grid { grid-template-columns: 1fr 1fr; }
  .pestanas button { padding: 9px 11px; font-size: 0.78rem; }
  /* Una fila de variante en una columna necesita separarse de la
     siguiente, o se confunden entre sí. */
  .fila-variante { padding: 14px 0; }
}

/* ── Horizontal y bajito ──────────────────────────────────────
   Un celular acostado deja unos 380px de alto: los diálogos con
   max-height en vh quedan sin aire y el contenido no se alcanza. */
@media (max-height: 460px) and (orientation: landscape) {
  .dialogo { max-height: calc(100dvh - 16px); }
  .lista-clientas { max-height: 40dvh; }
  .pos-grid { max-height: 38dvh; }
  .cabecera { position: static; }
}

/* ── Impresión ────────────────────────────────────────────────
   Sirve para imprimir un informe o el detalle de una venta. */
@media print {
  .barra, .cabecera, .avisos, .barra-acciones, .pestanas, .dialogo { display: none !important; }
  .contenido { padding: 0; }
  .caja, .tabla-envoltura, .tarjeta { border-color: #ccc; box-shadow: none; }
  body { background: #fff; }
}

/* ════════════════════════════════════════════════════════════
   LAS FOTOS DE UNA PRENDA
   ------------------------------------------------------------
   Hasta tres miniaturas más el hueco para agregar. Se usa grilla
   y no flex para que las cuatro celdas midan lo mismo: con flex,
   la celda vacía —que tiene menos contenido— quedaba más angosta
   y la fila se veía desparejada.
   ════════════════════════════════════════════════════════════ */

.galeria-prenda {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(120px, 100%), 1fr));
  gap: 10px;
  margin-top: 6px;
}

.foto-prenda {
  position: relative;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg);
}

.foto-prenda img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* La principal se distingue por el borde, no sólo por la etiqueta:
   el borde se ve de un vistazo y la etiqueta hay que leerla. */
.foto-prenda.es-principal {
  border-color: var(--gold-dark);
  box-shadow: 0 0 0 2px rgba(176, 141, 87, 0.25);
}

.foto-prenda-marca {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--gold-dark);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Las acciones aparecen sobre la foto, abajo. Siempre visibles en
   pantalla táctil: ahí no hay «pasar por encima». */
.foto-prenda-acciones {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px;
  background: linear-gradient(transparent, rgba(74, 64, 60, 0.82) 45%);
  opacity: 0;
  transition: opacity 0.14s ease;
}

.foto-prenda:hover .foto-prenda-acciones,
.foto-prenda-acciones:focus-within { opacity: 1; }

@media (pointer: coarse) {
  .foto-prenda-acciones { opacity: 1; }
}

.foto-prenda-acciones .btn {
  flex: 1 1 auto;
  min-width: 0;
  padding: 4px 6px;
  font-size: 0.66rem;
  line-height: 1.2;
}

/* El hueco para agregar. Es un botón del tamaño de una miniatura:
   un objetivo grande se toca sin apuntar. */
.foto-prenda.vacia {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px;
  border-style: dashed;
  color: var(--text-light);
  font: inherit;
  font-size: 0.72rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.14s ease, color 0.14s ease;
}

.foto-prenda.vacia:hover {
  border-color: var(--gold);
  color: var(--gold-dark);
}

.foto-prenda-mas {
  font-size: 1.6rem;
  line-height: 1;
  font-weight: 300;
}

.foto-prenda.rota {
  display: grid;
  place-items: center;
  border-color: #b3261e;
}

.foto-prenda-rota {
  padding: 8px;
  color: #b3261e;
  font-size: 0.68rem;
  text-align: center;
}

.galeria-prenda-nota {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--text-light);
  font-size: 0.74rem;
}

/* ════════════════════════════════════════════════════════════
   LA FICHA DE UNA CLIENTA
   ════════════════════════════════════════════════════════════ */

/* Los tres números de arriba: compras, gastado y última. Son lo
   primero que se mira al abrir el historial, así que van grandes
   y antes de la lista. */
.resumen-clienta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.resumen-clienta-dato {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
}

.resumen-clienta-dato span {
  display: block;
  color: var(--text-light);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.resumen-clienta-dato strong {
  font-size: 1.25rem;
  font-weight: 600;
}

/* Cada venta es una tarjeta y no una fila de tabla: lleva dentro
   su propia lista de prendas, y una tabla con listas adentro se
   vuelve ilegible en el celular. */
.venta-historial {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--panel);
}

/* Una venta anulada se muestra, no se esconde: es la única forma
   de resolver «pero yo compré esto» mirando la pantalla. Atenuada
   para que no se confunda con una vigente. */
.venta-historial.anulada {
  opacity: 0.72;
  border-style: dashed;
}

.venta-historial-cab {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
  justify-content: space-between;
}

.venta-historial-cab span {
  display: block;
  color: var(--text-light);
  font-size: 0.76rem;
}

.venta-historial-total {
  text-align: right;
}

.venta-historial-total strong { font-size: 1.05rem; }

.chip-anulada {
  display: inline-block;
  margin-top: 2px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #b3261e;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
}

.venta-historial-motivo,
.venta-historial-envio {
  margin: 8px 0 0;
  color: var(--text-light);
  font-size: 0.76rem;
}

.venta-historial-lineas {
  list-style: none;
  margin: 10px 0 0;
  padding: 10px 0 0;
  border-top: 1px solid var(--line);
}

.venta-historial-lineas li {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding: 3px 0;
  font-size: 0.86rem;
}

.venta-historial-lineas em {
  font-style: normal;
  color: var(--text-light);
  white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════
   LOS LOOKS DE UNA MODELO
   ------------------------------------------------------------
   Cada fila es una foto, la prenda que lleva puesta y las
   acciones. En el celular se apila: tres columnas de 10 cm no
   entran, y la foto es lo que identifica la fila.
   ════════════════════════════════════════════════════════════ */

.looks-modelo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.look-modelo {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
}

.look-foto {
  width: 76px;
  height: 95px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--panel);
  display: grid;
  place-items: center;
}

.look-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.look-foto span {
  padding: 4px;
  color: #b3261e;
  font-size: 0.64rem;
  text-align: center;
}

/* El tema vive en el body del panel. Login y páginas públicas conservan su estilo.
   Limitarlo a pantalla también mantiene los informes impresos en fondo claro. */
.form-apariencia { max-width: 560px; }
#mensajeApariencia:empty { display: none; }

@media screen {
  /* Oscuro es el default del sistema; este bloque sólo lo
     reafirma para la cuenta que lo eligió explícitamente. */
  body.admin-body[data-tema-panel="oscuro"] {
    color-scheme: dark;
    --bg: #0B0D10;
    --panel: #13171C;
    --text: #E7EAEE;
    --text-light: #98A1AC;
    --gold: #FF5A1F;
    --gold-dark: #FF8A4C;
    --pink-soft: #181D23;
    --line: rgba(231, 234, 238, 0.13);
    --linea-fuerte: rgba(231, 234, 238, 0.22);
    --ok: #3DDC97;
    --ok-fondo: #11241C;
    --alerta: #FF6B6B;
    --alerta-fondo: #2A1618;
    --aviso: #FFC65A;
    --aviso-fondo: #2A2214;
  }

  /* Claro: la misma identidad invertida. Antes no hacía falta
     declararlo porque claro era el valor por omisión; ahora que
     el default es grafito, sin esto la preferencia no haría
     nada para quien la elige. */
  body.admin-body[data-tema-panel="claro"] {
    color-scheme: light;
    --bg: #F3F5F7;
    --panel: #FFFFFF;
    --text: #11151A;
    --text-light: #5A646F;
    --gold: #D4440E;
    --gold-dark: #B03709;
    --pink-soft: #EDF0F3;
    --line: rgba(17, 21, 26, 0.12);
    --linea-fuerte: rgba(17, 21, 26, 0.24);
    --ok: #0F7A4F;
    --ok-fondo: #E6F4EC;
    --alerta: #B3261E;
    --alerta-fondo: #FBEBEA;
    --aviso: #8A6516;
    --aviso-fondo: #FCF4E3;
  }

  body.admin-body[data-tema-panel="claro"] .btn-principal { color: #FFFFFF; }

  body.admin-body[data-tema-panel="oscuro"] .btn-principal {
    background: var(--gold);
    border-color: var(--gold);
    color: #0B0D10;
  }
  body.admin-body[data-tema-panel="oscuro"] .btn-principal:hover {
    background: var(--gold-dark);
    border-color: var(--gold-dark);
  }
  body.admin-body[data-tema-panel="oscuro"] .btn-peligro:hover,
  body.admin-body[data-tema-panel="oscuro"] .btn-reactivar:hover,
  body.admin-body[data-tema-panel="oscuro"] .etiqueta.promo,
  body.admin-body[data-tema-panel="oscuro"] .chip-filtro.activo,
  body.admin-body[data-tema-panel="oscuro"] .galeria-orden,
  body.admin-body[data-tema-panel="oscuro"] .galeria-uso,
  body.admin-body[data-tema-panel="oscuro"] .foto-principal { color: #0B0D10; }
  body.admin-body[data-tema-panel="oscuro"] .etiqueta.ok { border-color: var(--ok); }
  body.admin-body[data-tema-panel="oscuro"] .etiqueta.mal { border-color: var(--alerta); }
  body.admin-body[data-tema-panel="oscuro"] .etiqueta.tibia { border-color: var(--aviso); }
  body.admin-body[data-tema-panel="oscuro"] tbody tr:has(.btn-reactivar) { background: #15191F; }
  body.admin-body[data-tema-panel="oscuro"] tbody tr:hover { background: #1C222A; }
  body.admin-body[data-tema-panel="oscuro"] .dialogo::backdrop { background: rgba(0, 0, 0, 0.65); }
  body.admin-body[data-tema-panel="oscuro"] .foto-prenda-rota,
  body.admin-body[data-tema-panel="oscuro"] .look-foto span { color: var(--alerta); }
}

.look-datos label {
  display: block;
  margin-bottom: 4px;
  color: var(--text-light);
  font-size: 0.74rem;
}

.look-datos select { width: 100%; }

.look-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: flex-end;
}

@media (max-width: 680px) {
  .look-modelo {
    grid-template-columns: 76px minmax(0, 1fr);
  }
  /* Las acciones pasan a la fila de abajo, a lo ancho. */
  .look-acciones {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

/* ════════════════════════════════════════════════════════════
   LAS MARCAS DE UNA PRENDA
   ------------------------------------------------------------
   «Edición limitada» y «Lookbook» deciden en qué apartado del
   sitio aparece la prenda. Van juntas y en una grilla propia: cada
   una por su lado caía en una columna distinta del formulario, y
   como sus textos de ayuda tienen largos distintos las casillas
   quedaban a distinta altura.

   La grilla las reparte en dos columnas iguales y `align-items:
   start` las alinea por arriba, que es donde está la casilla. Así
   las dos casillas quedan a la misma altura aunque una ayuda ocupe
   dos líneas y la otra una.
   ════════════════════════════════════════════════════════════ */

.campo-marcas {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
}

.campo-marcas-titulo {
  display: block;
  margin-bottom: 10px;
  color: var(--text-light);
  font-size: 0.78rem;
  font-weight: 600;
}

.marcas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 10px 18px;
  align-items: start;
}

/* La casilla arriba y el texto al lado, no debajo: con el texto
   debajo hay que leer para saber qué casilla es cuál. */
.marca {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  margin: 0;
  cursor: pointer;
  font-size: 0.88rem;
}

/* Sin esto la casilla se estira al alto del texto y queda
   centrada, desalineada respecto de la otra columna. */
.marca input[type="checkbox"] {
  margin: 2px 0 0;
  flex: none;
}

.marca span {
  display: block;
  line-height: 1.35;
}

.marca small {
  display: block;
  margin-top: 2px;
  color: var(--text-light);
  font-size: 0.74rem;
  line-height: 1.4;
}

/* ── La prenda elegida en un look de modelo ────────────────── */

.look-prenda {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  font-size: 0.85rem;
}

.look-prenda span {
  display: block;
  color: var(--text-light);
  font-size: 0.74rem;
}

.look-prenda-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

/* El aviso de que se llegó al tope de fotos. */
.nota-tope {
  margin: 0;
  padding: 10px 12px;
  border: 1px dashed var(--line);
  border-radius: 9px;
  color: var(--text-light);
  font-size: 0.8rem;
}

/* ============================================================
   OBJETIVOS Y MARGEN (Informes)
   ------------------------------------------------------------
   La barra del objetivo lleva una MARCA de dónde tendría que ir
   a esta altura del período. Sin ella, media barra se ve igual
   el día 5 que el día 25 del mes, que es justo la diferencia
   entre ir bien e ir mal.
   ============================================================ */

.objetivo-fila {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.objetivo-fila:last-child { border-bottom: none; }

.objetivo-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.objetivo-cifras {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.86rem;
  color: var(--text-light);
  margin-bottom: 6px;
}

.objetivo-cifras strong {
  color: var(--text);
  font-size: 0.95rem;
}

/* `position: relative` es lo que ancla la marca del ritmo. */
.objetivo-pista {
  position: relative;
  height: 9px;
  background: var(--pink-soft);
  border-radius: 999px;
  overflow: visible;
}

.objetivo-relleno {
  height: 100%;
  min-width: 3px;
  background: var(--gold);
  border-radius: 999px;
  transition: width 0.4s ease;
}

.objetivo-alcanzado .objetivo-relleno { background: var(--ok); }
.objetivo-atrasado .objetivo-relleno { background: var(--aviso); }

/* La marca del ritmo: dónde tendría que estar el relleno hoy. */
.objetivo-marca {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 15px;
  background: var(--text);
  opacity: 0.45;
  border-radius: 2px;
}

.objetivo-mensaje {
  margin: 8px 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-light);
}

.margen-bloque + .margen-bloque {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.margen-bloque h3 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-light);
  margin: 0 0 12px;
}

/* La advertencia de cobertura. Va en tono de aviso y no de ayuda
   corriente: dice que el porcentaje de arriba es sobre parte de
   lo vendido, y eso cambia cómo se lee. */
.ayuda.ayuda-atencion {
  background: var(--aviso-fondo);
  color: var(--aviso);
  margin-top: 14px;
  margin-bottom: 0;
}

/* ============================================================
   LENGUAJE TÉCNICO — igual que el sitio público
   ------------------------------------------------------------
   Todo lo que es dato va en monoespaciada con cifras de ancho
   fijo. En un panel de gestión esto no es sólo estético: los
   montos y las fechas se alinean en columna y se comparan de
   un vistazo, y dejan de bailar cuando cambia un dígito.
   ============================================================ */
.tarjeta-valor,
.monto,
td.num,
input[type="number"],
input[type="date"],
.etiqueta,
.chip-filtro,
.pestanas button {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'zero' 1;
}

.pestanas button,
.etiqueta,
.chip-filtro {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* La cabecera del panel lleva la misma línea con ticks al paso
   del módulo que separa las secciones del sitio. */
.cabecera {
  border-bottom: 1px solid var(--line);
  position: relative;
}

.cabecera::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 5px;
  background-image: linear-gradient(90deg, var(--linea-fuerte) 1px, transparent 1px);
  background-size: var(--grid-module) 100%;
  pointer-events: none;
}

/* Foco visible en el color de señal, como en el sitio. */
.admin-body a:focus-visible,
.admin-body button:focus-visible,
.admin-body input:focus-visible,
.admin-body select:focus-visible,
.admin-body textarea:focus-visible,
.acceso-body a:focus-visible,
.acceso-body button:focus-visible,
.acceso-body input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}