/* ─── SYMT PoS — Panel de administración ──────────────────────────────────
   Papel y tinta: el lenguaje de un libro contable, no el de un tablero de
   control. Sale del diseño de Stitch («Commercial Ledger», en
   `Stitch/Web/commercial_ledger_design_system/DESIGN.md`), trasladado a CSS sin
   compilar: la CSP no deja cargar Tailwind ni fuentes de fuera.

   Las fuentes viven en `fuentes/` (IBM Plex, OFL) y los íconos en `iconos.svg`
   (Material Symbols, Apache 2.0). Las licencias van junto a los archivos.    */

@font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-display: swap;
  src: url(fuentes/ibm-plex-sans-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 500; font-display: swap;
  src: url(fuentes/ibm-plex-sans-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 600; font-display: swap;
  src: url(fuentes/ibm-plex-sans-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 700; font-display: swap;
  src: url(fuentes/ibm-plex-sans-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-display: swap;
  src: url(fuentes/ibm-plex-mono-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-display: swap;
  src: url(fuentes/ibm-plex-mono-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 600; font-display: swap;
  src: url(fuentes/ibm-plex-mono-latin-600-normal.woff2) format('woff2'); }

:root {
  /* Superficies */
  --fondo:        #F5F3EE;  /* papel de archivo, detrás de todo */
  --superficie:   #FFFFFF;  /* tablas, tarjetas, modales, campos */
  --hundida:      #ECE8DF;  /* encabezado de tabla, fila activa, franjas */
  --borde:        #DDD9CF;  /* reglas de 1 px */
  --borde-campo:  #8C8678;  /* campos y botones secundarios: pasa 3:1 */

  /* Tinta */
  --tinta:        #183B56;  /* lo que se toca */
  --tinta-hover:  #0F2A40;
  --texto:        #1C1B18;
  --suave:        #5E5B53;

  /* Significado. Cada color dice una sola cosa. */
  --precio:       #FFD43B;  /* UNA cifra por pantalla, como etiqueta de precio */
  --exito:        #16794A;  /* cuadra, liquidado, listo */
  --aviso:        #8A5100;  /* texto ámbar: atención, debe, por vencer */
  --aviso-relleno:#F2A93B;
  --peligro:      #B42318;  /* cancelada, vencido, falta dinero */

  --radio:        8px;
  --radio-modal:  12px;
  --font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Los nombres de antes. Los usan estilos en línea de las páginas y de los
     JS; se quedan como alias para no tocar cien sitios por un renombre. */
  --bg: var(--fondo);
  --surface: var(--superficie);
  --surface2: var(--hundida);
  --border: var(--borde);
  --accent: var(--tinta);
  --danger: var(--peligro);
  --success: var(--exito);
  --warning: var(--aviso);
  --text: var(--texto);
  --muted: var(--suave);
  --radius: var(--radio);
}

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

/* `hidden` oculta siempre, aunque la clase del elemento le ponga un `display`. */
[hidden] { display: none !important; }

body {
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--tinta); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--tinta-hover); }

/* Íconos del sprite: <svg class="icono"><use href="/panel/iconos.svg#x"/></svg> */
.icono { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; }

/* ─── Estructura ────────────────────────────────────────────────────────── */
.app { display: flex; min-height: 100vh; }

.sidebar {
  width: 248px;
  background: var(--superficie);
  border-right: 1px solid var(--borde);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  overflow-y: auto;
  z-index: 50;
}

/* El negocio va arriba: es su panel. SYMT PoS se queda en el pie. */
.negocio-bloque {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--borde);
}
.negocio-logo {
  width: 44px; height: 44px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: var(--tinta);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.5px;
}
.negocio-logo.con-imagen { background: var(--superficie); border: 1px solid var(--borde); }
.negocio-logo img { width: 100%; height: 100%; object-fit: contain; }
.negocio-nombre { font-size: 15px; font-weight: 600; line-height: 1.25; }
.negocio-giro { margin-top: 4px; }

.sidebar-section {
  padding: 18px 16px 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--suave);
}

.sidebar nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 13px;
  color: var(--texto);
  font-size: 14px;
  text-decoration: none;
  border-left: 3px solid transparent;
}
.sidebar nav a .icono { color: var(--suave); }
.sidebar nav a:hover { background: var(--hundida); }
.sidebar nav a.activo {
  background: var(--hundida);
  color: var(--tinta);
  font-weight: 600;
  border-left-color: var(--tinta);
}
.sidebar nav a.activo .icono { color: var(--tinta); }
.sidebar nav a .badge { margin-left: auto; }

.sidebar-pie {
  margin-top: auto;
  padding: 16px;
  border-top: 1px solid var(--borde);
  font-size: 13px;
}
.sidebar-pie .usuario { font-weight: 600; margin-bottom: 4px; }
.sidebar-pie .renglon {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 12px;
}
.sidebar-pie .plataforma { font-family: var(--mono); font-size: 11px; color: var(--suave); display: inline-flex; align-items: center; gap: 5px; }
.sidebar-pie .plataforma img { width: 16px; height: 16px; object-fit: contain; }

.main { flex: 1; margin-left: 248px; display: flex; flex-direction: column; min-width: 0; }

.topbar {
  height: 64px;
  border-bottom: 1px solid var(--borde);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 32px;
  background: var(--superficie);
  position: sticky; top: 0; z-index: 10;
}
.topbar h1 { font-size: 22px; font-weight: 600; letter-spacing: -0.2px; }

.content { padding: 28px 32px 64px; max-width: 1600px; width: 100%; }

/* ─── Tarjetas ──────────────────────────────────────────────────────────── */
.card {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 20px;
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
}

.metrica { display: flex; flex-direction: column; gap: 6px; }
.metrica .etiqueta {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--suave);
}
.metrica .valor {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.5px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.metrica .pie { font-size: 13px; color: var(--suave); }

/* La etiqueta de precio: la firma de la marca, UNA cifra por pantalla. */
.precio-destacado {
  display: inline-block;
  background: var(--precio);
  color: var(--texto);
  padding: 1px 6px;
  border-radius: 4px;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 32px 0 12px;
}
.section-title { font-size: 15px; font-weight: 600; }

/* ─── Tablas: el libro ──────────────────────────────────────────────────── */
.tabla-caja {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: auto;
}
table { width: 100%; border-collapse: collapse; }
th {
  height: 40px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--suave);
  padding: 0 16px;
  background: var(--hundida);
  border-bottom: 1px solid var(--borde);
  white-space: nowrap;
}
td { height: 48px; padding: 8px 16px; border-bottom: 1px solid var(--borde); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--hundida); }

/* Las cifras van en mono y a la derecha, para que las columnas de dinero se
   sumen con los ojos como en un libro. */
.num {
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
th.num, .num a, .num .btn { font-family: var(--font); }
.mono { font-family: var(--mono); font-size: 13px; font-weight: 500; }

.vacio { padding: 40px; text-align: center; color: var(--suave); }

/* ─── Controles ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--borde-campo);
  border-radius: var(--radio);
  background: var(--superficie);
  color: var(--texto);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { background: var(--hundida); color: var(--texto); }
.btn-primario { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.btn-primario:hover { background: var(--tinta-hover); border-color: var(--tinta-hover); color: #fff; }
.btn-peligro { background: var(--superficie); border-color: var(--peligro); color: var(--peligro); }
.btn-peligro:hover { background: rgba(180, 35, 24, .08); color: var(--peligro); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
/* En una fila de tabla la acción es un enlace con forma de botón. */
.btn-fantasma { background: transparent; border-color: transparent; color: var(--tinta); }
.btn-fantasma:hover { background: transparent; text-decoration: underline; color: var(--tinta-hover); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:focus-visible, a:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }

input, select, textarea {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  background: var(--superficie);
  border: 1px solid var(--borde-campo);
  border-radius: var(--radio);
  color: var(--texto);
  font-family: var(--font);
  font-size: 14px;
}
input[type="checkbox"], input[type="radio"] {
  width: 16px !important; min-width: 0; min-height: 0; height: 16px;
  margin: 0;
  accent-color: var(--tinta);
  vertical-align: middle;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--tinta);
  outline-offset: -1px;
  border-color: var(--tinta);
}
input::placeholder, textarea::placeholder { color: var(--suave); }
input:disabled, select:disabled { background: var(--hundida); color: var(--suave); }
label { display: block; font-size: 13px; font-weight: 500; color: var(--texto); margin-bottom: 6px; }
.campo { margin-bottom: 16px; }
.campo .ayuda { font-size: 12px; color: var(--suave); margin-top: 6px; line-height: 1.45; }
.fila { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fila-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }

.barra-herramientas {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.barra-herramientas input:not([type="checkbox"]):not([type="radio"]),
.barra-herramientas select { width: auto; min-width: 200px; }
.barra-herramientas label { margin: 0; display: inline-flex; align-items: center; gap: 6px; }
/* Un grupo de filtros que va junto: marca, modelo y año de un vehículo. */
.grupo-filtro {
  align-items: center; gap: 8px;
  padding: 4px 4px 4px 12px;
  background: var(--hundida);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.grupo-filtro-titulo {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--suave); white-space: nowrap;
}
.en-negativo { color: var(--peligro); font-weight: 600; }

/* ─── Sellos de estado ──────────────────────────────────────────────────────
   Como un sello de goma: esquina de 4 px, borde del color y fondo tenue. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 7px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  background: var(--hundida);
  color: var(--suave);
  border: 1px solid var(--borde);
  white-space: nowrap;
  vertical-align: middle;
}
.badge-ok      { background: rgba(22, 121, 74, .10);  color: var(--exito);   border-color: rgba(22, 121, 74, .45); }
.badge-alerta  { background: rgba(242, 169, 59, .16); color: var(--aviso);   border-color: rgba(242, 169, 59, .75); }
.badge-peligro { background: rgba(180, 35, 24, .08);  color: var(--peligro); border-color: rgba(180, 35, 24, .45); }
.badge-info    { background: rgba(24, 59, 86, .08);   color: var(--tinta);   border-color: rgba(24, 59, 86, .35); }

/* ─── Avisos en recuadro ────────────────────────────────────────────────────
   El ícono se pinta con una máscara para no tocar cada sitio que arma un
   aviso. El SVG va embebido: la CSP admite `data:` en imágenes.            */
.aviso {
  position: relative;
  padding: 12px 16px 12px 46px;
  border-radius: var(--radio);
  border: 1px solid;
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--texto);
}
.aviso::before {
  content: '';
  position: absolute;
  left: 16px; top: 13px;
  width: 20px; height: 20px;
  background: currentColor;
  -webkit-mask: var(--icono-aviso) center / contain no-repeat;
          mask: var(--icono-aviso) center / contain no-repeat;
}
.aviso b, .aviso strong { font-weight: 600; }
.aviso a { font-weight: 600; }
.aviso-alerta  { background: #FFF8EE; border-color: rgba(242, 169, 59, .55); }
.aviso-alerta::before  { color: var(--aviso); --icono-aviso: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='m40-120 440-760 440 760H40Zm104-60h672L480-760 144-180Zm361.5-65.68q8.5-8.67 8.5-21.5 0-12.82-8.68-21.32-8.67-8.5-21.5-8.5-12.82 0-21.32 8.68-8.5 8.67-8.5 21.5 0 12.82 8.68 21.32 8.67 8.5 21.5 8.5 12.82 0 21.32-8.68ZM454-348h60v-224h-60v224Zm26-122Z'/%3E%3C/svg%3E"); }
.aviso-alerta b, .aviso-alerta strong { color: var(--aviso); }
.aviso-peligro { background: #FDF3F2; border-color: rgba(180, 35, 24, .40); }
.aviso-peligro::before { color: var(--peligro); --icono-aviso: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M503.5-289.48q9.5-9.48 9.5-23.5t-9.48-23.52q-9.48-9.5-23.5-9.5t-23.52 9.48q-9.5 9.48-9.5 23.5t9.48 23.52q9.48 9.5 23.5 9.5t23.52-9.48ZM453-433h60v-253h-60v253Zm27.27 353q-82.74 0-155.5-31.5Q252-143 197.5-197.5t-86-127.34Q80-397.68 80-480.5t31.5-155.66Q143-709 197.5-763t127.34-85.5Q397.68-880 480.5-880t155.66 31.5Q709-817 763-763t85.5 127Q880-563 880-480.27q0 82.74-31.5 155.5Q817-252 763-197.68q-54 54.31-127 86Q563-80 480.27-80Zm.23-60Q622-140 721-239.5t99-241Q820-622 721.19-721T480-820q-141 0-240.5 98.81T140-480q0 141 99.5 240.5t241 99.5Zm-.5-340Z'/%3E%3C/svg%3E"); }
.aviso-peligro b, .aviso-peligro strong { color: var(--peligro); }
.aviso-info    { background: #F0F4F8; border-color: rgba(24, 59, 86, .25); }
.aviso-info::before    { color: var(--tinta); --icono-aviso: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M453-280h60v-240h-60v240Zm50.5-323.2q9.5-9.2 9.5-22.8 0-14.45-9.48-24.22-9.48-9.78-23.5-9.78t-23.52 9.78Q447-640.45 447-626q0 13.6 9.48 22.8 9.48 9.2 23.5 9.2t23.52-9.2ZM480.27-80q-82.74 0-155.5-31.5Q252-143 197.5-197.5t-86-127.34Q80-397.68 80-480.5t31.5-155.66Q143-709 197.5-763t127.34-85.5Q397.68-880 480.5-880t155.66 31.5Q709-817 763-763t85.5 127Q880-563 880-480.27q0 82.74-31.5 155.5Q817-252 763-197.68q-54 54.31-127 86Q563-80 480.27-80Zm.23-60Q622-140 721-239.5t99-241Q820-622 721.19-721T480-820q-141 0-240.5 98.81T140-480q0 141 99.5 240.5t241 99.5Zm-.5-340Z'/%3E%3C/svg%3E"); }
.aviso-info b, .aviso-info strong { color: var(--tinta); }
.aviso-ok      { background: #EEF6F1; border-color: rgba(22, 121, 74, .35); }
.aviso-ok::before      { color: var(--exito); --icono-aviso: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M453-280h60v-240h-60v240Zm50.5-323.2q9.5-9.2 9.5-22.8 0-14.45-9.48-24.22-9.48-9.78-23.5-9.78t-23.52 9.78Q447-640.45 447-626q0 13.6 9.48 22.8 9.48 9.2 23.5 9.2t23.52-9.2ZM480.27-80q-82.74 0-155.5-31.5Q252-143 197.5-197.5t-86-127.34Q80-397.68 80-480.5t31.5-155.66Q143-709 197.5-763t127.34-85.5Q397.68-880 480.5-880t155.66 31.5Q709-817 763-763t85.5 127Q880-563 880-480.27q0 82.74-31.5 155.5Q817-252 763-197.68q-54 54.31-127 86Q563-80 480.27-80Zm.23-60Q622-140 721-239.5t99-241Q820-622 721.19-721T480-820q-141 0-240.5 98.81T140-480q0 141 99.5 240.5t241 99.5Zm-.5-340Z'/%3E%3C/svg%3E"); }

/* ─── Modales ───────────────────────────────────────────────────────────── */
.modal-fondo {
  position: fixed; inset: 0;
  background: rgba(28, 27, 24, 0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 100; padding: 24px;
}
.modal-fondo.oculto { display: none; }
.modal {
  background: var(--superficie);
  border: 1px solid var(--borde-campo);
  border-radius: var(--radio-modal);
  width: 100%; max-width: 560px;
  max-height: 90vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(28, 27, 24, .18);
}
.modal.ancho { max-width: 860px; }
.modal-cabecera {
  padding: 18px 24px;
  border-bottom: 1px solid var(--borde);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.modal-cabecera h2 { font-size: 18px; font-weight: 600; }
.modal-cuerpo { padding: 24px; overflow-y: auto; }
.modal-pie {
  padding: 14px 24px;
  border-top: 1px solid var(--borde);
  background: var(--hundida);
  display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap;
}
/* Lo destructivo va solo, a la izquierda, lejos del botón de cerrar. */
.modal-pie .a-la-izquierda { margin-right: auto; }
.cerrar {
  background: none; border: none; color: var(--suave);
  font-size: 24px; cursor: pointer; line-height: 1;
  width: 32px; height: 32px; border-radius: var(--radio);
}
.cerrar:hover { color: var(--texto); background: var(--hundida); }

/* ─── Logo del negocio en Configuración ─────────────────────────────────── */
.logo-campo {
  display: flex; align-items: center; gap: 20px;
  padding-bottom: 20px; margin-bottom: 20px;
  border-bottom: 1px solid var(--borde);
}
.negocio-logo.grande { width: 96px; height: 96px; font-size: 32px; border-radius: 16px; }
.acciones-logo { display: flex; gap: 8px; margin-top: 10px; }
label.btn { margin: 0; color: var(--texto); }

/* ─── Pagar la suscripción ─────────────────────────────────────────────── */
.pago {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 16px;
  align-items: start;
}
.pago .btn-primario { width: 100%; }
.datos-pago {
  margin: 0;
  padding: 14px 16px;
  background: var(--hundida);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  user-select: all;
}
.vista-comprobante {
  display: block;
  max-width: 100%;
  max-height: 320px;
  margin-top: 12px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.desglose .tabla-caja { margin: 8px 0 16px; }
.desglose td { height: 40px; }
.total-a-pagar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 12px;
}
.total-a-pagar .precio-destacado { font-family: var(--mono); font-size: 26px; font-weight: 600; }
@media (max-width: 860px) {
  .pago { grid-template-columns: 1fr; }
}

/* ─── Diálogos ──────────────────────────────────────────────────────────────
   Los que arma `dialogo()` en app.js. Van encima de cualquier modal. */
.dialogo-fondo {
  position: fixed; inset: 0;
  background: rgba(28, 27, 24, 0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 120; padding: 24px;
}
.modal.dialogo { max-width: 480px; }
.dialogo-texto { margin-bottom: 18px; line-height: 1.55; }
.dialogo-texto p + p { margin-top: 10px; }
.dialogo-error { color: var(--peligro); font-size: 13px; font-weight: 500; min-height: 0; }
.dialogo-error:empty { display: none; }
.etiqueta-campo { font-size: 13px; font-weight: 500; margin-bottom: 6px; }

.btn-peligro-lleno { background: var(--peligro); border-color: var(--peligro); color: #fff; }
.btn-peligro-lleno:hover { background: #8F1C13; border-color: #8F1C13; color: #fff; }

label.casilla { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 400; }

/* Control segmentado: radios que se ven como una fila de botones. */
.segmentado {
  display: flex;
  border: 1px solid var(--borde-campo);
  border-radius: var(--radio);
  overflow: hidden;
}
.segmentado label {
  flex: 1;
  margin: 0;
  position: relative;
  cursor: pointer;
  font-weight: 500;
}
.segmentado label + label { border-left: 1px solid var(--borde-campo); }
.segmentado input { position: absolute; opacity: 0; pointer-events: none; }
.segmentado span {
  display: flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 12px;
}
.segmentado input:checked + span { background: var(--tinta); color: #fff; }
.segmentado input:focus-visible + span { outline: 2px solid var(--tinta); outline-offset: -4px; }

/* Un importe que se teclea: grande, en mono y alineado a la derecha. */
.campo-dinero {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--borde-campo);
  border-radius: var(--radio);
  padding: 0 14px;
  background: var(--superficie);
}
.campo-dinero:focus-within { outline: 2px solid var(--tinta); outline-offset: -1px; border-color: var(--tinta); }
.campo-dinero span { font-family: var(--mono); font-size: 22px; color: var(--suave); }
.campo-dinero input {
  border: none; outline: none !important; padding: 0;
  height: 52px;
  font-family: var(--mono); font-size: 24px; font-weight: 600;
  text-align: right; font-variant-numeric: tabular-nums;
}

/* ─── Mensajes flotantes ────────────────────────────────────────────────── */
#avisos {
  position: fixed; bottom: 24px; right: 24px;
  display: flex; flex-direction: column; gap: 10px; z-index: 200;
}
.flotante {
  background: var(--superficie);
  border: 1px solid var(--borde-campo);
  border-left-width: 4px;
  border-radius: var(--radio);
  padding: 12px 16px;
  font-size: 14px;
  max-width: 400px;
  box-shadow: 0 6px 18px rgba(28, 27, 24, .14);
  animation: entrar .18s ease-out;
}
.flotante-ok      { border-left-color: var(--exito); }
.flotante-error   { border-left-color: var(--peligro); }
.flotante-info    { border-left-color: var(--tinta); }
@keyframes entrar { from { opacity: 0; transform: translateY(8px); } }

/* ─── Varios ────────────────────────────────────────────────────────────── */
.girador {
  display: inline-block; width: 16px; height: 16px;
  border: 2px solid var(--borde); border-top-color: var(--tinta);
  border-radius: 50%; animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.apagado { color: var(--suave); }
.pequeno { font-size: 13px; }
.derecha { text-align: right; }
.nowrap  { white-space: nowrap; }

/* ─── Acceso ────────────────────────────────────────────────────────────── */
.acceso {
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px;
  padding: 24px;
}
.acceso .card { width: 100%; max-width: 400px; padding: 32px; border-radius: var(--radio-modal); }
/* El logo de SYMT PoS todavía no existe: se reserva su sitio. */
.acceso .marca-plataforma {
  width: 240px; height: auto;
  margin-bottom: 20px;
}
.acceso .cabecera-acceso { display: flex; flex-direction: column; align-items: center; text-align: center; }
.acceso h1 { font-size: 22px; font-weight: 600; margin-bottom: 2px; }
.acceso .sub { color: var(--suave); font-size: 14px; margin-bottom: 24px; }
.acceso .nota { max-width: 400px; text-align: center; font-size: 12px; color: var(--suave); }
.acceso .btn { width: 100%; }
.acceso .enlace-secundario { display: block; margin-top: 16px; text-align: center; font-size: 14px; color: var(--tinta); }
.acceso .pasos-recuperar { color: var(--suave); font-size: 14px; margin: -8px 0 20px; text-align: center; }

/* ─── Pantallas estrechas ───────────────────────────────────────────────── */
@media (max-width: 860px) {
  .sidebar { transform: translateX(-100%); transition: transform .2s; z-index: 60; }
  .sidebar.abierta { transform: none; }
  /* El velo detrás del cajón; tocarlo lo cierra (app.js). */
  .sidebar.abierta + .main::before {
    content: ''; position: fixed; inset: 0; z-index: 55;
    background: rgba(28, 27, 24, .45);
  }
  .topbar #hoy { display: none; }
  .main { margin-left: 0; }
  .topbar { padding: 0 16px; }
  .topbar h1 { font-size: 18px; }
  .contenido, .content { padding: 16px; }
  .fila, .fila-3 { grid-template-columns: 1fr; }
  .alternar-menu { display: inline-flex !important; }
}
.alternar-menu { display: none; }

/* ─── Impresión ────────────────────────────────────────────────────────────
   Lo que sale de la impresora es un documento que alguien archiva o firma: se
   imprime en negro sobre blanco, sin la navegación ni los botones, y sin que
   una tabla se parta a media fila entre dos hojas.                          */

.solo-impresion { display: none; }

@media print {
  @page { margin: 14mm; }

  :root {
    --fondo: #fff; --superficie: #fff; --hundida: #fff;
    --borde: #bbb; --texto: #000; --suave: #555; --tinta: #000;
    --exito: #000; --aviso: #000; --peligro: #000; --precio: #fff;
  }

  body { background: #fff; color: #000; font-size: 11pt; }

  /* Fuera todo lo que es de la pantalla y no del documento. */
  .sidebar, .topbar, .barra-herramientas, .btn, #avisos,
  .modal-fondo, .aviso-info, .alternar-menu { display: none !important; }

  .main { margin-left: 0; }
  .content { padding: 0; max-width: none; }
  .solo-impresion { display: block; }

  .encabezado-impresion {
    border-bottom: 2px solid #000;
    padding-bottom: 8px;
    margin-bottom: 14px;
  }
  .encabezado-impresion h1 { font-size: 16pt; margin-bottom: 2px; }
  .encabezado-impresion .negocio { font-size: 12pt; font-weight: 600; }
  .encabezado-impresion .periodo { font-size: 10pt; color: #333; }

  .card, .tabla-caja {
    border: 1px solid #999;
    box-shadow: none;
    break-inside: avoid;
    overflow: visible;
  }
  .card-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .metrica .valor { font-size: 14pt; }
  .metrica .etiqueta { color: #333; }

  th {
    height: auto;
    padding: 6px 10px;
    background: #eee !important;
    color: #000;
    border-bottom: 1px solid #666;
  }
  td { height: auto; padding: 5px 10px; border-bottom: 1px solid #ddd; }
  /* Una fila partida entre dos hojas es ilegible; el encabezado se repite. */
  tr { break-inside: avoid; }
  thead { display: table-header-group; }

  .badge { border: 1px solid #999; color: #000; background: #fff !important; }
  .apagado { color: #444; }
  a { color: #000; text-decoration: none; }

  .pie-impresion {
    margin-top: 16px;
    padding-top: 8px;
    border-top: 1px solid #999;
    font-size: 9pt;
    color: #444;
    display: flex;
    justify-content: space-between;
  }
}

/* ─── Pliego de etiquetas ──────────────────────────────────────────────────
   Las etiquetas se imprimen en hojas adhesivas de rejilla. La medida de
   referencia es la más común en papelería: 50 × 25 mm, tres por fila en
   carta. El SVG del código se escala al ancho de la etiqueta.              */

.pliego {
  display: grid;
  grid-template-columns: repeat(auto-fill, 50mm);
  gap: 2mm;
  background: #fff;
  padding: 4mm;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

.pliego .etiqueta {
  width: 50mm;
  height: 25mm;
  padding: 1mm;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #000;
  font-family: var(--font);
  break-inside: avoid;
  outline: 1px dashed var(--borde);
}
.pliego .etiqueta .nombre {
  font-size: 6.5pt;
  line-height: 1.1;
  text-align: center;
  max-height: 2.4em;
  overflow: hidden;
  margin-bottom: 0.5mm;
}
.pliego .etiqueta .codigo { width: 100%; height: 11mm; display: block; object-fit: contain; }
.pliego .etiqueta .precio { font-size: 9pt; font-weight: 700; margin-top: 0.3mm; }

@media print {
  .no-imprimir, .section-header { display: none !important; }
  .pliego { padding: 0; gap: 0; border: none; }
  .pliego .etiqueta { border: none; outline: none; }
}

/* ─── Gráficas ─────────────────────────────────────────────────────────────
   Sobre papel claro. La primera serie es la tinta y la segunda el gris del
   borde de campo: el año en curso manda y el anterior se lee como referencia.
   Ninguna serie usa verde, ámbar ni rojo, que en este panel significan «bien»,
   «atención» y «mal». Los años son identidades distintas: el color se asigna
   en orden fijo y nunca se recicla al filtrar.                              */

.viz {
  --serie-1: #183B56;  /* tinta        */
  --serie-2: #8C8678;  /* gris cálido  */
  --serie-3: #3E7CB1;  /* azul medio   */
  --serie-4: #7A4E9B;  /* morado       */
  --serie-5: #9C6B3C;  /* siena        */
  --rejilla: #ECE8DF;
  --eje:     #5E5B53;
}

.viz svg { display: block; width: 100%; height: auto; overflow: visible; }

/* La rejilla es un pelo y va detrás: los datos son lo único que puede gritar. */
.viz .rejilla { stroke: var(--rejilla); stroke-width: 1; }
.viz .eje-texto { fill: var(--suave); font-size: 11px; font-family: var(--mono); }

/* Línea de 2px con uniones redondas; el punto final lleva anillo del color
   de la superficie para que se lea aunque cruce otra serie. */
.viz .linea { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.viz .punta { stroke: var(--superficie); stroke-width: 2; }

.viz .barra { rx: 4; }
.viz .valor-barra { fill: var(--texto); font-size: 11px; font-family: var(--mono); }
.viz .etiqueta-barra { fill: var(--suave); font-size: 12px; font-family: var(--font); }

/* Cruceta del hover: una guía, no un dato. */
.viz .cruceta { stroke: var(--suave); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; }
.viz .zona-hover { fill: transparent; cursor: crosshair; }

.leyenda { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; }
.leyenda-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--suave); }
.leyenda-marca { width: 14px; height: 3px; border-radius: 1px; }

.globo {
  position: absolute;
  pointer-events: none;
  background: var(--superficie);
  border: 1px solid var(--borde-campo);
  border-radius: var(--radio);
  padding: 8px 10px;
  font-size: 13px;
  z-index: 40;
  opacity: 0;
  transition: opacity .1s;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(28, 27, 24, .14);
}
.globo.visible { opacity: 1; }
.globo .titulo { color: var(--texto); font-weight: 600; margin-bottom: 5px; }
.globo .fila { display: flex; align-items: center; gap: 7px; color: var(--suave); }
.globo .fila b { color: var(--texto); margin-left: auto; padding-left: 14px; font-family: var(--mono); }
.globo .marca { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }

.caja-grafica { position: relative; }