/* Panel de FarmaEnCasa: los colores son los del logo (PALETA en diseno/armar_paginas.py). */
:root {
  color-scheme: light;
  --azul: #28587C; --azul-osc: #1A3D57; --azul-texto: #1A3D57; --enlace: #28587C; --azul-claro: #EAF1F7;
  --azul-hover: #D6E5F1; --borde-azul: #D2E2EF; --verde: #83AB53; --verde-osc: #5B8A2F; --verde-claro: #EEF5E6;
  --ok-texto: #2F4F1A; --rojo: #E4572E; --rojo-claro: #FDECE6; --error-texto: #8A2A10; --aviso-fondo: #FFF4E4;
  --aviso-texto: #7A4A00; --gris-claro: #EEF1F4; --texto: #1E2B36; --gris: #66747F; --borde: #E0E6EC;
  --fondo: #F5F8FB; --superficie: #fff; --fila-ok: #FAFDF7; --sombra: rgba(26, 61, 87, .08);
  --logo-fondo: transparent; --ver-luna: block; --ver-sol: none;
}
/* Modo oscuro: el que elige quien usa el panel (botón de la luna, data-theme en <html>, lo pone tema.js) o,
   si nunca lo tocó, el del sistema. Mismos nombres de variable: el resto del CSS no sabe en qué modo está. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark;
    --azul: #2F6D9C; --azul-osc: #3A80B5; --azul-texto: #DCEBF7; --enlace: #8EC1EA; --azul-claro: #1B3347;
    --azul-hover: #234360; --borde-azul: #2A4A66; --verde-osc: #A5CF78; --verde-claro: #1E3320;
    --ok-texto: #CFE8B5; --rojo: #FF7A55; --rojo-claro: #3D1F17; --error-texto: #FFB59E; --aviso-fondo: #3A2C12;
    --aviso-texto: #F5C97A; --gris-claro: #26323D; --texto: #E3E9EE; --gris: #9AA8B4; --borde: #2C3A46;
    --fondo: #0F1720; --superficie: #17212B; --fila-ok: #18241A; --sombra: rgba(0, 0, 0, .4);
    --logo-fondo: #fff; --ver-luna: none; --ver-sol: block; }
}
:root[data-theme="dark"] { color-scheme: dark;
    --azul: #2F6D9C; --azul-osc: #3A80B5; --azul-texto: #DCEBF7; --enlace: #8EC1EA; --azul-claro: #1B3347;
    --azul-hover: #234360; --borde-azul: #2A4A66; --verde-osc: #A5CF78; --verde-claro: #1E3320;
    --ok-texto: #CFE8B5; --rojo: #FF7A55; --rojo-claro: #3D1F17; --error-texto: #FFB59E; --aviso-fondo: #3A2C12;
    --aviso-texto: #F5C97A; --gris-claro: #26323D; --texto: #E3E9EE; --gris: #9AA8B4; --borde: #2C3A46;
    --fondo: #0F1720; --superficie: #17212B; --fila-ok: #18241A; --sombra: rgba(0, 0, 0, .4);
    --logo-fondo: #fff; --ver-luna: none; --ver-sol: block; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--enlace); }
h1 { margin: 8px 0 4px; font-size: 26px; letter-spacing: -.3px; }
h1 small, h2 small { color: var(--gris); font-weight: 500; font-size: .65em; }
h2 { margin: 0 0 12px; font-size: 18px; }

/* Fija arriba: en las páginas largas (Sin Kellerhoff, 6.000 filas paginadas) el menú quedaba lejos. */
.barra { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 24px; padding: 10px 24px; background: var(--superficie); border-bottom: 1px solid var(--borde); flex-wrap: wrap; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--azul-texto); font-weight: 700; }
/* El logo es un JPG sobre blanco: en modo oscuro va en una pastilla blanca en vez de un recuadro cortado. */
.marca img { height: 40px; width: auto; padding: 2px 6px; border-radius: 10px; background: var(--logo-fondo); box-sizing: content-box; }
.menu { display: flex; align-items: center; gap: 4px; flex: 1; flex-wrap: wrap; }
.menu a { padding: 8px 14px; line-height: 1.2; border-radius: 999px; text-decoration: none; color: var(--texto); font-weight: 500; }
.menu a:hover { background: var(--azul-claro); }
.menu a.activo { background: var(--azul); color: #fff; }
.salir { display: flex; align-items: center; gap: 10px; margin: 0; }
.quien { color: var(--gris); font-size: 14px; text-decoration: none; }
.quien:hover { color: var(--enlace); text-decoration: underline; }

.franja-corriendo { display: flex; align-items: center; gap: 10px; padding: 10px 24px; background: var(--azul-claro); color: var(--azul-texto); font-size: 14px; }
.punto { width: 10px; height: 10px; border-radius: 50%; background: var(--azul); animation: latido 1.2s infinite ease-in-out; }
@keyframes latido { 50% { opacity: .25; } }

.contenido { max-width: 1180px; margin: 0 auto; padding: 24px; }
.bajada { margin: 0 0 20px; color: var(--gris); max-width: 820px; }
.miga { margin: 0; font-size: 14px; color: var(--gris); }
.aviso { margin-bottom: 16px; padding: 12px 16px; border-radius: 12px; background: var(--verde-claro); color: var(--ok-texto); font-weight: 500; }
.error { margin-bottom: 12px; padding: 10px 14px; border-radius: 10px; background: var(--rojo-claro); color: var(--error-texto); }
.vacio { margin: 0; color: var(--gris); }
.ayuda { color: var(--gris); font-size: 14px; margin: 0 0 14px; }

.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: 16px; padding: 20px 22px; margin-bottom: 18px; }
.tarjeta p:last-child { margin-bottom: 0; }
.tarjeta-paso { display: flex; min-height: 0; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: var(--azul-claro); border-color: var(--borde-azul); }
.pasos { margin: 0 0 20px; padding-left: 20px; color: var(--gris); }

.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.cifra { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 16px; color: var(--texto); text-decoration: none; }
.cifra b { font-size: 26px; line-height: 1.15; letter-spacing: -.5px; color: var(--azul-texto); white-space: nowrap; }
/* Fechas y textos ("25/10 06:00", "A mano"): con el tamaño de los números partían en dos renglones. */
.cifra b.cifra-texto { font-size: 20px; padding: 3px 0 2px; }
.cifra span { font-size: 13px; line-height: 1.4; color: var(--gris); }
.cifras-4 { grid-template-columns: repeat(4, 1fr); }
.cifra-oferta b { color: var(--rojo); }
.cifra-link:hover { border-color: var(--azul); }

.botones { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.form-accion { margin: 0; }
.boton { display: inline-block; padding: 10px 18px; line-height: 1.3; text-align: center; text-decoration: none; border-radius: 999px; border: 1px solid var(--azul); background: var(--azul); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.boton:hover { background: var(--azul-osc); border-color: var(--azul-texto); }
.boton:disabled { opacity: .45; cursor: not-allowed; }
.boton-borde { background: var(--superficie); color: var(--enlace); border-color: var(--enlace); }
.boton-borde:hover { background: var(--azul-claro); }
.boton-chico { padding: 6px 14px; font-size: 13px; }

.tabla-scroll { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th { vertical-align: bottom; white-space: nowrap; text-align: left; color: var(--gris); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; padding: 8px 10px; border-bottom: 1px solid var(--borde); }
.tabla td { padding: 10px; border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla tr:last-child td { border-bottom: 0; }
.num { text-align: right; white-space: nowrap; }
.centro { text-align: center; }
.tabla th.col-check { width: 72px; text-align: center; }
.tabla th.col-foto { width: 72px; }
.tabla .col-ver { width: 1%; text-align: right; white-space: nowrap; }
.tabla-productos td { vertical-align: middle; }
.miniatura { width: 56px; height: 56px; object-fit: contain; border-radius: 8px; background: var(--superficie); border: 1px solid var(--borde); }
.titulo { width: 100%; min-width: 280px; padding: 7px 10px; border: 1px solid var(--borde); border-radius: 8px; font: inherit; text-transform: uppercase; }
.titulo:focus, select:focus, input:focus { outline: 2px solid var(--azul-claro); border-color: var(--azul); }
.detalle { margin-top: 4px; font-size: 12.5px; color: var(--gris); }
.detalle a { margin-left: 2px; white-space: nowrap; }
.fila-aprobada { background: var(--fila-ok); }
.antes { display: block; color: var(--gris); font-size: 13px; }
.marca-chica { display: inline-block; white-space: nowrap; padding: 1px 8px; border-radius: 999px; background: var(--aviso-fondo); color: var(--aviso-texto); font-size: 11.5px; }
.marca-gris { background: var(--gris-claro); color: var(--gris); }
.marca-ok { background: var(--verde-claro); color: var(--verde-osc); }
.off { display: inline-block; margin-top: 2px; padding: 1px 6px; border-radius: 6px; background: var(--rojo); color: #fff; font-size: 11px; font-weight: 700; }
input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--azul); }

.estado { display: inline-block; white-space: nowrap; line-height: 1.6; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: var(--gris-claro); color: var(--gris); }
.estado-corriendo { background: var(--azul-claro); color: var(--enlace); }
.estado-ok { background: var(--verde-claro); color: var(--verde-osc); }
.estado-error, .estado-interrumpido { background: var(--rojo-claro); color: var(--error-texto); }

.registro { margin: 0 0 10px; max-height: 60vh; overflow: auto; padding: 14px; border-radius: 10px; background: #0F2233; color: #DDE7F0; font: 12.5px/1.5 ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-word; }
.paginas { flex-wrap: wrap; display: flex; gap: 16px; align-items: center; justify-content: center; margin-top: 14px; font-size: 14px; color: var(--gris); }

/* Centrado en la pantalla: sin la barra del menú, arriba quedaba pegado y abajo vacío. */
.ingreso { max-width: 380px; min-height: calc(100vh - 48px); margin: 0 auto; display: flex; flex-direction: column; justify-content: center; }
.ingreso .tarjeta { padding: 28px 26px; box-shadow: 0 8px 30px var(--sombra); }
.ingreso img { display: block; height: 72px; width: auto; margin: 0 auto 4px; padding: 4px 10px; border-radius: 12px; background: var(--logo-fondo); }
.ingreso h1 { margin: 0 0 6px; font-size: 18px; color: var(--azul-texto); text-align: center; }
.ingreso form { text-align: left; display: flex; flex-direction: column; gap: 14px; }
.ingreso label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 14px; }
.ingreso input { padding: 11px 14px; border: 1px solid var(--borde); border-radius: 10px; font: inherit; font-weight: 400; }
.ingreso .boton { margin-top: 4px; padding: 12px 18px; }

/* Formularios de Programación y Kellerhoff y Avanter */
h3 { margin: 18px 0 8px; font-size: 15px; }
.formulario { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.formulario label { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.formulario .fila-check { font-weight: 500; cursor: pointer; }
/* Las opciones del precio van una debajo de la otra: en una fila se leían como un solo texto. */
.opciones { display: flex; flex-direction: column; gap: 8px; flex-basis: 100%; }
.formulario .botones { margin: 0; }
/* Mismo alto para todos los campos: el select, la hora y el número quedaban desparejos. */
select, input[type="number"], input[type="time"] { height: 40px; padding: 0 10px; border: 1px solid var(--borde); border-radius: 10px; font: inherit; background: var(--superficie); }
input[type="number"] { width: 90px; }
input[type="radio"] { width: 16px; height: 16px; accent-color: var(--azul); }
input[type="file"] { max-width: 100%; padding: 5px; border: 1px dashed var(--borde-azul); border-radius: 999px; font: inherit; font-size: 14px; color: var(--gris); background: var(--fondo); }
input[type="file"]::file-selector-button { margin-right: 12px; padding: 7px 14px; border: 0; border-radius: 999px; background: var(--azul-claro); color: var(--enlace); font: inherit; font-weight: 600; cursor: pointer; }
input[type="file"]::file-selector-button:hover { background: var(--azul-hover); }




/* Campos: sin esto, en modo oscuro el texto escrito salía negro sobre fondo oscuro. */
input, select, textarea { color: var(--texto); }
.ingreso input, .form-usuario input:not([type="checkbox"]) { background: var(--superficie); }

/* Botón de modo claro / oscuro (tema.js y panel.js). */
.boton-tema { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--borde); border-radius: 50%; background: var(--superficie); color: var(--texto); cursor: pointer; }
.boton-tema:hover { border-color: var(--enlace); color: var(--enlace); }
.boton-tema svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icono-luna { display: var(--ver-luna); }
.icono-sol { display: var(--ver-sol); }

.boton-peligro { background: var(--superficie); color: var(--rojo); border-color: var(--rojo); }
.boton-peligro:hover { background: var(--rojo-claro); border-color: var(--rojo); }
.sin-permiso { margin: 14px 0 0; padding: 10px 14px; border-radius: 10px; background: var(--gris-claro); color: var(--gris); font-size: 14px; }
.como { white-space: nowrap; font-size: 14px; font-weight: 600; }
.tarjeta-error { max-width: 560px; margin: 6vh auto; }

/* Usuarios y Mi cuenta */
.form-usuario { display: flex; flex-direction: column; gap: 14px; }
.form-usuario .botones { margin: 0; }
.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.campos label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 14px; }
.campos input { height: 42px; padding: 0 12px; border: 1px solid var(--borde); border-radius: 10px; font: inherit; font-weight: 400; }
.permisos { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 14px 16px; border: 1px solid var(--borde); border-radius: 12px; }
.permisos legend { padding: 0 6px; font-weight: 600; font-size: 14px; }
.permisos .fila-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; cursor: pointer; }
.permisos input[type="checkbox"] { flex: none; margin-top: 1px; }
.usuario-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.usuario-cabeza h2 { margin: 0; }
.usuario .detalle { margin: 6px 0 10px; }
details { border-top: 1px solid var(--borde); padding: 10px 0; }
details:last-of-type { border-bottom: 1px solid var(--borde); margin-bottom: 4px; }
summary { cursor: pointer; font-weight: 600; color: var(--enlace); }
details[open] summary { margin-bottom: 12px; }
.lista-permisos { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }

/* Ayuda */
.ayuda-grilla { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 18px; align-items: start; }
.ayuda-indice { position: sticky; top: 78px; font-size: 14px; }
.ayuda-indice ol { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.ayuda-indice a { text-decoration: none; }
.ayuda-indice a:hover { text-decoration: underline; }
.ayuda-texto .tarjeta { scroll-margin-top: 78px; }
.ayuda-texto p, .ayuda-texto li, .ayuda-texto dd { line-height: 1.6; }
.ayuda-texto ul, .ayuda-texto ol { padding-left: 22px; }
.ayuda-texto li + li { margin-top: 6px; }
.pasos-ayuda li::marker { font-weight: 700; color: var(--enlace); }
.glosario { margin: 0; }
.glosario dt { font-weight: 700; margin-top: 12px; }
.glosario dt:first-child { margin-top: 0; }
.glosario dd { margin: 2px 0 0; color: var(--texto); }
.formula { display: block; margin: 8px 0; padding: 10px 14px; border-radius: 10px; background: var(--azul-claro); color: var(--azul-texto); font-weight: 700; }


@media (max-width: 900px) {
  .cifras-4 { grid-template-columns: repeat(2, 1fr); }
  .ayuda-grilla { grid-template-columns: 1fr; }
  .ayuda-indice { position: static; }
}

@media (max-width: 700px) {
  /* Logo y "Salir" arriba; el menú abajo en varias filas: deslizándose de costado no se veía que había más. */
  .barra { position: static; display: grid; grid-template-columns: 1fr auto; padding: 10px 14px; gap: 10px; }
  .salir { grid-row: 1; grid-column: 2; }
  .menu { grid-row: 2; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .menu a { display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 6px; font-size: 13.5px; text-align: center; background: var(--fondo); border-radius: 10px; }
  /* El nombre lleva a Mi cuenta: en celular se queda, más chico; el rótulo «Panel» es el que se va. */
  .quien { font-size: 13px; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .marca span { display: none; }
  .salir { gap: 8px; }
  .contenido { padding: 16px 14px; }
  h1 { font-size: 23px; }
  .titulo { min-width: 0; }
  .tarjeta { padding: 16px; }
  .cifras { gap: 10px; }
  .cifra { padding: 14px; }
  .cifra b { font-size: 23px; }
  .cifra b.cifra-texto { font-size: 18px; }
  .botones > .form-accion, .botones > .boton { flex: 1 1 100%; }
  .botones > .form-accion .boton { width: 100%; }
  .tarjeta-paso > .boton, .tarjeta-paso > .form-accion, .tarjeta-paso .form-accion .boton { width: 100%; }
  input[type="file"] { width: 100%; }
  .formulario { gap: 14px; }

  /* Historial y últimas acciones como tarjetas: en columnas el nombre de la acción quedaba en 5 renglones. */
  .tabla-acciones thead { display: none; }
  .tabla-acciones tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--borde); }
  .tabla-acciones tr:last-child { border-bottom: 0; }
  .tabla-acciones td { padding: 0; border: 0; }
  .tabla-acciones .t-accion { grid-column: 1; font-weight: 600; }
  .tabla-acciones .t-estado { grid-column: 2; grid-row: 1; text-align: right; }
  .tabla-acciones .t-meta { grid-column: 1; font-size: 13px; color: var(--gris); }
  .tabla-acciones .t-ocultar { display: none; }
  .tabla-acciones .col-ver { grid-column: 2; grid-row: 2; width: auto; text-align: right; }

  /* Tablas de productos como tarjetas: en una fila no entraban precio, promo y descartar. */
  /* En bloque y con minmax(0, …): si no, el título largo ensanchaba la fila y se cortaba a la derecha. */
  .tabla-productos, .tabla-productos tbody { display: block; }
  .tabla-productos thead { display: none; }
  .tabla-productos tr { display: grid; column-gap: 12px; row-gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--borde); }
  .tabla-productos tr:last-child { border-bottom: 0; }
  .tabla-productos td { min-width: 0; padding: 0; border: 0; text-align: left; overflow-wrap: anywhere; }
  .tabla-productos td[data-titulo] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .tabla-productos .antes { display: inline; }
  .tabla-productos td[data-titulo]::before { content: attr(data-titulo); min-width: 72px; font-size: 12px; color: var(--gris); }
  .tabla-lote tr { grid-template-columns: 56px minmax(0, 1fr); }
  .tabla-lote td:nth-child(1) { grid-row: span 4; }
  .tabla-precios tr { grid-template-columns: 24px 56px minmax(0, 1fr); }
  .tabla-precios td:nth-child(1), .tabla-precios td:nth-child(2) { grid-row: span 3; }
  .tabla-precios td:nth-child(n+3) { grid-column: 3; }
}