/* Estilo común de toda la aplicación. Vive en un solo archivo: cambiarlo aquí cambia las cinco páginas.
   Criterio: mucho aire, una sola tipografía fuerte, un acento vivo y nada de adornos que no digan algo. */

:root{
  color-scheme:light dark;

  /* superficies */
  --ground:#f4f5f7;
  --surface:#fff;
  --surface-2:#f7f8fa;
  --line:#e4e7ec;
  --line-2:#d3d8e0;

  /* texto */
  --ink:#16181d;
  --ink-2:#4a525e;
  --muted:#79828f;

  /* acento y semáforo: vivos, pero uno solo manda */
  --accent:#0a6cff;
  --accent-ink:#fff;
  --accent-soft:#e8f0ff;
  --accent-vivo:#2b85ff;
  --boton:#0071e3;--boton-hover:#0077ed;--boton-activo:#006edb;--boton-ink:#fff;
  --gris-boton:rgba(120,120,128,.12);--gris-boton-hover:rgba(120,120,128,.2);
  --seg-fondo:rgba(118,118,128,.12);--seg-sel:#fff;--seg-sombra:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04);
  --anillo:0 0 0 4px rgba(0,113,227,.3);
  --good:#0a8a4a;
  --good-vivo:#22c55e;
  --good-soft:#e3f8ec;
  --warn:#b26a00;
  --warn-vivo:#f59e0b;
  --warn-soft:#fdf2df;
  --bad:#c92a20;
  --bad-vivo:#ef4444;
  --bad-soft:#fdeceb;

  /* profundidad */
  --shadow:0 1px 2px rgba(16,24,40,.04), 0 10px 28px -16px rgba(16,24,40,.22);
  --shadow-alto:0 2px 6px rgba(16,24,40,.06), 0 24px 56px -28px rgba(16,24,40,.34);
  --radio:18px;
  --radio-chico:11px;

  /* vidrio: lo que se resalta no se pinta de color, se ilumina como un cristal */
  --vidrio:color-mix(in srgb,var(--surface) 68%,transparent);
  --vidrio-borde:color-mix(in srgb,var(--ink) 11%,transparent);
  --brillo:inset 0 1px 0 rgba(255,255,255,.75);
  --reflejo:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 58%);
  --halo:0 0 0 4px color-mix(in srgb,var(--ink) 7%,transparent);

  /* tipografía: en un Mac esto es San Francisco */
  --fuente:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI","IBM Plex Sans",sans-serif;
  --fuente-titulo:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI","IBM Plex Sans",sans-serif;
  --fuente-num:"IBM Plex Mono","SF Mono",ui-monospace,Menlo,monospace;

  /* el ancho de todas las páginas y de los avisos de arriba: crece con la pantalla hasta --ancho y deja márgenes que
     también crecen con ella (en el teléfono, 16 px). Cambiarlo aquí cambia todas las páginas. */
  --ancho:1600px;
  --margen:clamp(16px,3.4vw,56px);
  --espacio:24px;            /* entre una sección y la siguiente */
}
@media (min-width:1440px){:root{--espacio:28px}}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0a0b0d;
    --surface:#151719;
    --surface-2:#1b1e21;
    --line:#26292e;
    --line-2:#343840;
    --ink:#f2f4f7;
    --ink-2:#b6bec9;
    --muted:#828b97;
    --accent:#4d97ff;
    --boton:#0a84ff;--boton-hover:#3b9bff;--boton-activo:#0a7cf0;--boton-ink:#fff;
    --gris-boton:rgba(120,120,128,.24);--gris-boton-hover:rgba(120,120,128,.34);
    --seg-fondo:rgba(118,118,128,.24);--seg-sel:#636366;--seg-sombra:0 3px 8px rgba(0,0,0,.35);
    --anillo:0 0 0 4px rgba(10,132,255,.45);
    --accent-ink:#05122b;
    --accent-soft:#12233d;
    --accent-vivo:#6aa9ff;
    --good:#3ddc84;
    --good-vivo:#4ade80;
    --good-soft:#0e2a1c;
    --warn:#f0b429;
    --warn-vivo:#fbbf24;
    --warn-soft:#2e2411;
    --bad:#ff6b5e;
    --bad-vivo:#f87171;
    --bad-soft:#331815;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 32px -18px rgba(0,0,0,.8);
    --shadow-alto:0 2px 8px rgba(0,0,0,.55), 0 28px 64px -30px rgba(0,0,0,.9);
    --vidrio:color-mix(in srgb,var(--surface) 62%,transparent);
    --vidrio-borde:color-mix(in srgb,#fff 12%,transparent);
    --brillo:inset 0 1px 0 rgba(255,255,255,.10);
    --reflejo:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0) 58%);
    --halo:0 0 0 4px color-mix(in srgb,#fff 9%,transparent);
  }
}
:root[data-theme="dark"]{
  --ground:#0a0b0d;--surface:#151719;--surface-2:#1b1e21;--line:#26292e;--line-2:#343840;
  --ink:#f2f4f7;--ink-2:#b6bec9;--muted:#828b97;
  --accent:#4d97ff;--accent-ink:#05122b;--accent-soft:#12233d;--accent-vivo:#6aa9ff;
  --boton:#0a84ff;--boton-hover:#3b9bff;--boton-activo:#0a7cf0;--boton-ink:#fff;
  --gris-boton:rgba(120,120,128,.24);--gris-boton-hover:rgba(120,120,128,.34);
  --seg-fondo:rgba(118,118,128,.24);--seg-sel:#636366;--seg-sombra:0 3px 8px rgba(0,0,0,.35);
  --anillo:0 0 0 4px rgba(10,132,255,.45);
  --good:#3ddc84;--good-vivo:#4ade80;--good-soft:#0e2a1c;
  --warn:#f0b429;--warn-vivo:#fbbf24;--warn-soft:#2e2411;
  --bad:#ff6b5e;--bad-vivo:#f87171;--bad-soft:#331815;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 32px -18px rgba(0,0,0,.8);
  --shadow-alto:0 2px 8px rgba(0,0,0,.55), 0 28px 64px -30px rgba(0,0,0,.9);
  --vidrio:color-mix(in srgb,var(--surface) 62%,transparent);
  --vidrio-borde:color-mix(in srgb,#fff 12%,transparent);
  --brillo:inset 0 1px 0 rgba(255,255,255,.10);
  --reflejo:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0) 58%);
  --halo:0 0 0 4px color-mix(in srgb,#fff 9%,transparent);
}

*{box-sizing:border-box}
[hidden]{display:none!important}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--fuente);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4,h5{font-family:var(--fuente-titulo);font-weight:600;letter-spacing:-.022em;margin:0}
h1{font-size:clamp(28px,2.6vw,36px);line-height:1.1;letter-spacing:-.03em}
h2{font-size:21px;line-height:1.25}
a{color:var(--accent)}

/* ---------- el ancho común ----------
   Todas las páginas con sesión van en .wrap: hasta --ancho de contenido, centrado, con márgenes proporcionales.
   Cada página solo cambia el espacio de abajo si tiene una barra fija. */
.wrap{box-sizing:border-box;width:100%;max-width:calc(var(--ancho) + 2 * var(--margen));margin:0 auto;
  padding:30px var(--margen) 72px}
/* columnas: una sola en el teléfono y en pantallas angostas; dos desde 1100 px. .entera ocupa las dos */
.columnas{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--espacio);margin-top:var(--espacio)}
.columnas > *,.columnas > .panel{margin-top:0;min-width:0}
@media (min-width:1100px){
  .columnas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .columnas > .entera{grid-column:1/-1}
}

/* foco visible y parejo en toda la aplicación */
:focus-visible{outline:2px solid color-mix(in srgb,var(--ink) 45%,transparent);outline-offset:2px;border-radius:8px}

/* ---------- superficies ---------- */
.panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radio);
  box-shadow:var(--shadow);
  padding:24px 26px;
  margin-top:var(--espacio);
}
.eyebrow{
  font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);font-weight:600;margin:0 0 14px;
}

/* ---------- controles ---------- */
input,select,textarea{
  background:var(--surface-2);
  border:1px solid var(--line-2);
  color:var(--ink);
  border-radius:var(--radio-chico);
  padding:11px 13px;
  font-size:15px;
  font-family:inherit;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
input:where(:hover),select:where(:hover),textarea:where(:hover){border-color:var(--line-2);background:var(--surface);box-shadow:var(--brillo)}
input:focus,select:focus,textarea:focus{
  outline:none;
  background:var(--surface);
  border-color:color-mix(in srgb,var(--ink) 24%,transparent);
  box-shadow:var(--brillo), var(--halo), 0 8px 20px -12px rgba(16,24,40,.45);
}
input::placeholder,textarea::placeholder{color:var(--muted)}

/* ---------- botones: al estilo Apple ----------
   La acción principal va llena y azul; lo demás, en gris suave. Sin brillos ni sombras de color: el color dice qué hace
   el botón, no lo adorna. :where() no suma peso: así un botón con su propia clase (.tile, .pn, .chip…) conserva su estilo */
button{
  font-family:inherit;font-size:15px;font-weight:500;letter-spacing:-.01em;line-height:1.25;
  border-radius:980px;padding:9px 20px;cursor:pointer;border:none;
  background:var(--boton);color:var(--boton-ink);
  transition:background-color .2s ease, color .2s ease, box-shadow .2s ease, opacity .2s ease;
}
button:where(:hover){background-color:var(--boton-hover)}
button:where(:active){background-color:var(--boton-activo)}
button:where(:focus-visible){outline:none;box-shadow:var(--anillo)}
button:where(:disabled){opacity:.4;cursor:default}
button.sec{background:var(--gris-boton);color:var(--ink)}
button.sec:where(:hover),button.sec:where(:active){background:var(--gris-boton-hover)}
button.fino{background:var(--gris-boton);color:var(--ink);padding:6px 14px;font-size:13px}
button.fino:where(:hover){background:var(--gris-boton-hover);color:var(--bad)}
button.fino.ok{color:var(--good)}
button.fino.ok:where(:hover){color:var(--good)}
button.fino.neutro:where(:hover){color:var(--ink)}
button.peligro{background:var(--bad);color:#fff}
button.peligro:where(:hover){background:var(--bad-vivo)}

/* ---------- avisos ---------- */
.aviso{border-radius:var(--radio-chico);padding:13px 15px;font-size:14px;line-height:1.55;margin-top:16px}
.aviso.ok{background:var(--good-soft);color:var(--good)}
.aviso.mal{background:var(--bad-soft);color:var(--bad)}
.aviso.neutro{background:var(--vidrio);backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);border:1px solid var(--vidrio-borde);
  box-shadow:var(--brillo);color:var(--ink-2)}
.warn{background:var(--warn-soft);color:var(--warn);border-radius:var(--radio-chico);padding:12px 14px;font-size:14px;margin-top:16px}

/* ---------- números ---------- */
.mono,.num b,.kpi b{font-family:var(--fuente-num);font-variant-numeric:tabular-nums}

/* ---------- ventanas ---------- */
dialog{
  border:1px solid var(--line);border-radius:var(--radio);
  background:var(--surface);color:var(--ink);
  max-width:540px;width:calc(100% - 32px);padding:26px;
  box-shadow:var(--shadow-alto);
}
dialog::backdrop{background:rgba(8,10,14,.35);backdrop-filter:blur(14px) saturate(140%)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ---------- vidrio ----------
   Lo que se resalta no se tiñe de color: se ilumina. El fondo se desenfoca, el borde
   superior toma un brillo fino y la pieza se levanta, como un cristal sobre la página. */
.vidrio{
  background:var(--vidrio);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  border:1px solid var(--vidrio-borde);
  box-shadow:var(--brillo), var(--shadow);
}
.brilla{position:relative;isolation:isolate}
.brilla::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:var(--reflejo);opacity:0;transition:opacity .2s ease;
}
.brilla:hover::before{opacity:1}

/* ---------- cabecera y tablero, iguales en todas las páginas ---------- */
/* cabecera con el estado del sistema */
.tope{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap}
.marca{display:flex;align-items:center;gap:12px}
.marca .logo,.bc-marca .logo{width:42px;height:42px;border-radius:12px;flex:none;position:relative;
  background:linear-gradient(145deg,var(--accent-vivo),var(--accent) 60%,color-mix(in srgb,var(--accent) 55%,var(--good-vivo)));
  box-shadow:0 2px 6px -1px color-mix(in srgb,var(--accent) 45%,transparent),0 14px 30px -12px var(--accent)}
.marca .logo::after,.bc-marca .logo::after{content:"";position:absolute;inset:9px;border-radius:3px;border:2px solid var(--accent-ink);opacity:.9;
  border-right-color:transparent;border-bottom-color:transparent}
.acc{display:flex;gap:8px;flex-wrap:wrap}
a.conx{color:var(--ink-2);text-decoration:none;font-weight:560;font-size:13.5px;border:1px solid var(--line-2);
  border-radius:999px;padding:8px 16px;white-space:nowrap;background:var(--surface);
  transition:color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .12s ease}
a.conx:hover{color:var(--accent);border-color:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 13%,transparent);transform:translateY(-1px)}
.hero{margin-top:var(--espacio);border:1px solid var(--line);border-radius:var(--radio);background:var(--surface);
  box-shadow:var(--shadow-alto);overflow:hidden}
.hero .linea{height:4px;background:linear-gradient(90deg,var(--accent-vivo),var(--good-vivo) 55%,var(--warn-vivo))}
.hero .cuerpo{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:2px;background:var(--line)}
.kpi{background:var(--surface);padding:20px 22px;transition:background .15s ease}
/* .kpi.warn no es el aviso .warn: sin su fondo, su margen ni sus esquinas (la cifra se veía corrida hacia abajo) */
.kpi.warn{background:var(--surface);margin:0;border-radius:0;padding:20px 22px;font-size:inherit;color:inherit}
.kpi:hover,.kpi.warn:hover{background:var(--surface-2)}
.kpi b{display:block;font-size:33px;line-height:1.05;letter-spacing:-.035em;font-weight:600}
.kpi span{display:block;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.kpi.ok b{color:var(--good)}
.kpi.warn b{color:var(--warn)}
.estados{display:flex;flex-wrap:wrap;gap:8px;padding:12px 17px;background:var(--surface-2);border-top:1px solid var(--line)}
.est{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-2);background:var(--surface);
  border:1px solid var(--line);border-radius:999px;padding:5px 12px}
.est i{width:7px;height:7px;border-radius:50%;background:var(--bad);flex:none}
.est.on i{background:var(--good);box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 22%,transparent)}
.est a{color:inherit;text-decoration:none}
.est a:hover{color:var(--accent)}

a.volver{color:var(--muted);text-decoration:none;font-weight:560;font-size:13.5px;display:inline-flex;align-items:center;gap:6px}
a.volver:hover{color:var(--accent)}
.sub{color:var(--ink-2);margin:10px 0 0;max-width:70ch;font-size:15.5px}
.info{display:flex;gap:12px;align-items:flex-start;border-radius:var(--radio-chico);padding:14px 16px;
  font-size:14px;line-height:1.6;margin-top:16px;color:var(--ink-2);
  background:var(--vidrio);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);
  border:1px solid var(--vidrio-borde);box-shadow:var(--brillo)}
.info b{color:var(--ink);font-weight:600}
.info .i{color:var(--accent);font-weight:700;flex:none}

/* ---------- el menú de la aplicación: una barra lateral con los módulos de la empresa (la dibuja cuenta.js) ----------
   Como un ERP (pedido del usuario, 08-10-2026): a la izquierda los módulos — Ventas, Productos, Operación, Documentos,
   Finanzas, Administración —, el que usas abierto con sus páginas y la actual marcada; abajo quién eres, el ojo y
   Salir. La página usa el resto del ancho y arriba dice dónde estás (.miga). Bajo 1024 px el menú se esconde: una
   franja arriba con el botón que lo abre por encima de la página. */
:root{--lateral:252px}
.barra-cuenta{font-family:var(--fuente);font-size:14px;line-height:1.3;color:var(--ink-2)}
.lt-movil,.lt-velo,.lt-cerrar{display:none}
.lt-panel{position:fixed;top:0;left:0;bottom:0;z-index:60;width:var(--lateral);box-sizing:border-box;display:flex;
  flex-direction:column;background:var(--surface);border-right:1px solid var(--line)}
html.con-lateral body{padding-left:var(--lateral)}
.lt-cabeza{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:18px 14px 12px 20px}
.bc-marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);white-space:nowrap;
  font-family:var(--fuente-titulo);font-weight:650;font-size:16px;letter-spacing:-.015em;border-radius:10px}
.bc-marca .logo{width:30px;height:30px;border-radius:9px;
  box-shadow:0 2px 6px -2px color-mix(in srgb,var(--accent) 55%,transparent)}
.bc-marca .logo::after{inset:7px}
/* los campos propios de un pedido, una cotización, un cliente o un caso (web/cuenta.js, motor/campos.py) */
.cp-caja{margin-top:12px;padding:12px 14px;border:1px dashed var(--line-2);border-radius:12px;background:var(--surface)}
.cp-tit{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.cp-campos{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px 12px}
.cp-campo label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:3px}
.cp-campo input,.cp-campo select{width:100%;box-sizing:border-box}
.cp-acc{display:flex;gap:8px;align-items:center;margin-top:10px}
.cp-msj{font-size:13px;color:var(--ink-2)}.cp-msj.mal{color:var(--bad);font-weight:600}
/* el enlace para el cliente (web/cuenta.js) */
.enl-caja .cp-acc{flex-wrap:wrap}.enl-url{width:100%;box-sizing:border-box;font-size:13px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.enl-exp{margin:6px 0 0;font-size:13px;color:var(--ink-2);line-height:1.45}.enl-ojo{color:var(--warn,#9a6700)}
/* las tareas y los mensajes listos de cada cosa (web/cuenta.js) */
.tar-f{display:flex;justify-content:space-between;gap:10px;align-items:baseline;padding:4px 0;font-size:13.5px}
.tar-f label{display:flex;gap:8px;align-items:baseline;cursor:pointer}.tar-f.hecha span{text-decoration:line-through;color:var(--muted)}
.tar-f small{color:var(--muted);white-space:nowrap}.tar-f small.tar-atrasada{color:var(--bad);font-weight:600}
.tar-f small.tar-hoy{color:var(--accent);font-weight:600}
.tar-nueva{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.tar-nueva .tar-tit{flex:1 1 100%;min-width:0}
.tar-nueva select,.tar-nueva input[type=date]{flex:1 1 130px;min-width:0}
.res-sel{width:100%;max-width:360px}.res-txt{width:100%;box-sizing:border-box;margin-top:8px;font:inherit;font-size:14px;line-height:1.45}
a.fino-a{display:inline-flex;align-items:center;background:var(--gris-boton);color:var(--ink);padding:6px 14px;font-size:13px;border-radius:999px;text-decoration:none;font-weight:500}a.fino-a:hover{background:var(--gris-boton-hover)}
/* buscar en todo (⌘K): el campo bajo la marca y los resultados al lado del menú */
.lt-buscar{position:relative;padding:0 12px 8px 12px}
.lt-buscar .bc-q{width:100%;box-sizing:border-box;padding:8px 52px 8px 12px;font-size:13.5px;border-radius:10px}
.bc-kbd{position:absolute;right:20px;top:50%;transform:translateY(-62%);font:600 11px var(--fuente);color:var(--muted);
  border:1px solid var(--line);border-radius:6px;padding:1px 6px;background:var(--surface-2);pointer-events:none}
.bc-res{position:fixed;top:64px;left:calc(var(--lateral) + 16px);z-index:70;width:min(620px,calc(100vw - var(--lateral) - 32px));
  max-height:70vh;overflow-y:auto;box-sizing:border-box;padding:8px;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.18);font-family:var(--fuente)}
.bc-grupo+.bc-grupo{margin-top:6px;padding-top:6px;border-top:1px solid var(--line)}
.bc-gt{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:6px 10px 4px}
.bc-gt span{font-weight:600;letter-spacing:0;text-transform:none}
.bc-item{display:block;padding:7px 10px;border-radius:9px;text-decoration:none;color:var(--ink)}
.bc-item b{display:block;font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bc-item small{display:block;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bc-item:hover,.bc-item.sel{background:var(--accent-soft)}
.bc-nada{padding:12px;font-size:13.5px;color:var(--muted)}
.lt-nav{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 12px 16px;display:flex;flex-direction:column;gap:2px}
.barra-cuenta .lt-mod{display:flex;align-items:center;gap:12px;width:100%;box-sizing:border-box;margin:0;padding:9px 10px;
  border:0;border-radius:10px;background:transparent;box-shadow:none;color:var(--ink-2);font:inherit;font-size:14.5px;
  font-weight:560;letter-spacing:0;text-align:left;text-decoration:none;cursor:pointer;min-height:0}
.barra-cuenta .lt-mod:hover{background:var(--gris-boton);color:var(--ink)}
.barra-cuenta .lt-mod:focus-visible{outline:none;box-shadow:var(--anillo)}
.lt-mod span{flex:1;min-width:0}
.lt-ic{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lt-flecha{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;
  stroke-linejoin:round;color:var(--muted);transition:transform .15s ease}
.lt-bloque.abierto .lt-flecha{transform:rotate(90deg)}
.barra-cuenta .lt-bloque.activo>.lt-mod,.barra-cuenta .lt-mod.activo{color:var(--accent)}
.barra-cuenta .lt-solo.activo{background:var(--accent-soft);font-weight:620}
.lt-paginas{display:none;flex-direction:column;gap:1px;padding:2px 0 10px 41px}
.lt-bloque.abierto .lt-paginas{display:flex}
.lt-paginas a{color:var(--ink-2);text-decoration:none;font-size:13.5px;font-weight:520;padding:6px 10px;margin-left:-10px;
  border-radius:8px}
.lt-paginas a:hover{color:var(--ink);background:var(--gris-boton)}
.lt-paginas a[aria-current]{color:var(--accent);background:var(--accent-soft);font-weight:620}
.lt-grupo{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding:11px 0 3px}
.lt-pie{display:flex;align-items:center;gap:8px;padding:12px 14px 16px 20px;border-top:1px solid var(--line)}
.barra-cuenta .quien{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.25}
.barra-cuenta .quien b,.barra-cuenta .quien span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.barra-cuenta .quien b{color:var(--ink);font-weight:600;font-size:13.5px}
.barra-cuenta .quien span{color:var(--muted);font-size:12px}
.barra-cuenta .bc-ojo,.barra-cuenta .bc-ojo-movil{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:36px;height:36px;padding:0;border-radius:999px}
.barra-cuenta .bc-ojo svg,.barra-cuenta .bc-ojo-movil svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.barra-cuenta .bc-ojo[aria-pressed="true"],.barra-cuenta .bc-ojo-movil[aria-pressed="true"]{color:var(--accent);background:var(--accent-soft)}
.barra-cuenta .bc-salir{flex:none}
/* instalar la aplicación (web/cuenta.js, motor/instalable.py): en el menú, una fila arriba de quién eres; en el
   teléfono, un aviso abajo hasta que la instales o digas «Ahora no» */
.lt-pie{flex-wrap:wrap}
.barra-cuenta .bc-instalar{order:-1;flex:1 0 100%;display:flex;align-items:center;justify-content:center;gap:8px}
.barra-cuenta .bc-instalar::before{content:"";width:18px;height:18px;border-radius:5px;flex:none;
  background:url(/iconos/icono-192.png) center/cover}
.app-aviso{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:60;display:flex;flex-wrap:wrap;
  align-items:center;gap:10px 12px;padding:12px 14px;border-radius:16px;background:var(--surface);border:1px solid var(--line-2);
  box-shadow:0 18px 50px -12px rgba(0,0,0,.35);font-size:14px;color:var(--ink);max-width:560px;margin:0 auto}
.app-aviso img{width:40px;height:40px;border-radius:10px;flex:none}
.app-aviso p{flex:1;min-width:190px;margin:0;line-height:1.4}
.app-aviso p small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.app-aviso .fila{display:flex;gap:8px;margin-left:auto}
html.con-aviso-app body{padding-bottom:150px}
@media print{.app-aviso{display:none}}
/* dónde estás, arriba de la página */
.miga{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12.5px;font-weight:560;color:var(--muted);margin:0 0 8px}
.miga i{font-style:normal;color:var(--line-2)}
.miga span{color:var(--ink-2)}
/* «¿Cómo se usa?» (motor/ayuda.py): junto a dónde estás, y su ventana con los pasos */
.miga .bc-ayuda{margin-left:auto;padding:3px 10px;font-size:12px}
/* el ojo de los montos junto a dónde estás: solo en las páginas que muestran plata */
.miga .bc-ojo-miga{display:inline-flex;align-items:center;gap:5px;margin-left:auto;padding:3px 10px 3px 8px;font-size:12px}
.miga .bc-ojo-miga[hidden],.miga[hidden]{display:none}
.miga .bc-ojo-miga:not([hidden]) + .bc-ayuda{margin-left:0}
.miga .bc-ojo-miga svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.miga .bc-ojo-miga .bc-ojo-txt{font-weight:600;color:inherit}
.miga .bc-ojo-miga[aria-pressed="true"]{color:var(--accent);background:var(--accent-soft)}
.bc-ayuda-dlg{max-width:620px}
.bc-ayuda-dlg h2{font-size:19px;margin:0 0 6px}
.bc-ayuda-dlg .para{color:var(--ink-2);margin:0 0 12px;line-height:1.5}
.bc-ayuda-dlg ol{margin:0;padding-left:22px;display:grid;gap:8px;line-height:1.5}
.bc-ayuda-dlg .consejos{margin:14px 0 0;padding:10px 12px;border-radius:12px;background:var(--surface-2);font-size:13.5px;line-height:1.5}
.bc-ayuda-dlg .consejos p{margin:0}.bc-ayuda-dlg .consejos p + p{margin-top:6px}
.bc-ayuda-dlg .pie{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin-top:16px}
/* «¿Necesitas ayuda?» (web/cuenta.js, motor/soporte.py) */
.barra-cuenta .bc-soporte{order:-2;flex:1 0 100%}
.bc-soporte-dlg .sp-l{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin:4px 0 4px}
.bc-soporte-dlg textarea{width:100%;box-sizing:border-box;resize:vertical}
.bc-soporte-dlg .sp-fila{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:8px;font-size:13.5px;color:var(--ink-2)}
.bc-soporte-dlg .sp-lista h3{font-size:14px;margin:18px 0 6px}
.bc-soporte-dlg .sp-msj{padding:8px 0;border-top:1px solid var(--line);font-size:13.5px}
.bc-soporte-dlg .sp-msj p{margin:2px 0 0;white-space:pre-wrap;line-height:1.45}
.bc-soporte-dlg .sp-msj small{color:var(--muted);font-size:12px}
.bc-soporte-dlg .sp-resp{margin-top:6px;padding:8px 10px;border-radius:10px;background:var(--accent-soft)}
.bc-soporte-dlg .sp-resp b{font-size:12.5px;color:var(--accent)}
.bc-avisos-dlg .sp-fila{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:8px;font-size:13.5px;color:var(--ink-2)}
.bc-avisos-dlg .av-estado{margin:8px 0 0;font-weight:600;font-size:14px}
.bc-avisos-dlg .av-estado.ok{color:var(--good)}
.bc-avisos-dlg .av-estado.mal{color:var(--bad);font-weight:500}
.bc-avisos-dlg .av-lista h3{font-size:14px;margin:18px 0 6px}
.bc-avisos-dlg .av-eq{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:13.5px}
.bc-avisos-dlg .av-eq small{color:var(--muted);font-size:12px}
/* los avisos de arriba de la página: un evento de venta que viene o dura hoy, y los plazos de hoy */
.bc-evento{background:var(--warn-soft);border-bottom:1px solid var(--line)}
.bc-ev-in{box-sizing:border-box;max-width:calc(var(--ancho) + 2 * var(--margen));margin:0 auto;padding:8px var(--margen);
  display:flex;align-items:center;gap:8px 16px;font-size:13.5px;color:var(--ink-2)}
.bc-ev-txt{flex:1;min-width:0}
.bc-ev-txt b{color:var(--warn);font-weight:650}
.bc-ev-in .bc-ev-ok{flex:none}
.bc-ev-ir{flex:none;font-weight:600;text-decoration:none;color:var(--accent)}
.bc-plazos{background:var(--surface-2)}
/* lo que flota sobre la página (la barra de lo elegido y los avisos de Tus productos, «Guardar» de Configuración) se
   centra en la página, no en la pantalla: el menú ocupa la izquierda */
@media (min-width:1024px){
  html.con-lateral .franja,html.con-lateral .nuevos,html.con-lateral .gbar,html.con-lateral .par-aviso{left:calc(50% + var(--lateral) / 2)}
  html.con-lateral .gbar{width:min(var(--ancho),calc(100% - var(--lateral) - 2 * var(--margen)))}
  html.con-lateral .guardar{left:var(--lateral)}
}
/* menos de 1024 px: el menú se esconde detrás de un botón y la página usa todo el ancho */
@media (max-width:1023px){
  html.con-lateral body{padding-left:0}
  .lt-movil{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:50;padding:10px var(--margen);
    background:var(--surface);border-bottom:1px solid var(--line)}
  .lt-movil .bc-marca{flex:1}
  .barra-cuenta .lt-abrir,.barra-cuenta .lt-cerrar{display:inline-flex;align-items:center;justify-content:center;width:40px;
    height:40px;padding:0;border-radius:11px}
  .lt-panel{width:min(86vw,330px);transform:translateX(-104%);transition:transform .2s ease;box-shadow:0 18px 50px rgba(0,0,0,.22)}
  html.menu-abierto .lt-panel{transform:none}
  .bc-res{left:12px;right:12px;width:auto;top:60px}
  html.menu-abierto .lt-velo{display:block;position:fixed;inset:0;z-index:55;background:rgba(10,12,16,.4)}
  html.menu-abierto body{overflow:hidden}
  .barra-cuenta .lt-mod{padding:12px 10px}
  .lt-paginas a{padding:10px 10px}
}
@media (max-width:760px){
  .bc-ev-in{flex-direction:column;align-items:flex-start;padding:8px var(--margen) 10px}
  .bc-plazos .bc-ev-in{flex-direction:row;flex-wrap:wrap;align-items:center}
  .bc-plazos .bc-ev-txt{flex:1 1 100%}
  .barra-cuenta .bc-salir{min-height:40px}
}
/* lo que solo hace el dueño no se le muestra al ayudante (igual el servidor se lo rechaza) */
.es-ayudante .solo-dueno{display:none!important}
:root:not(.es-ayudante) .solo-ayudante{display:none!important}

.caja-cuenta{max-width:440px;margin:0 auto;padding:56px 18px 70px}
/* Mi cuenta, Usuarios y Plataforma: el ancho común de todas las páginas (Entrar y la primera vez siguen angostas) */
.caja-cuenta.ancha{max-width:calc(var(--ancho) + 2 * var(--margen));padding:30px var(--margen) 72px}
.caja-cuenta .marca{margin-bottom:6px}
.caja-cuenta h1{font-size:clamp(26px,3vw,32px)}
.caja-cuenta.ancha h1{font-size:clamp(28px,2.6vw,36px)}
.caja-cuenta .panel{padding:24px 24px 26px}
.caja-cuenta form{display:grid;gap:4px}
.caja-cuenta label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin:12px 0 5px}
.caja-cuenta input,.caja-cuenta select{width:100%}
.caja-cuenta button[type=submit]{margin-top:18px;justify-self:start}
.caja-cuenta .pista{font-size:12.5px;color:var(--muted);margin:6px 0 0}
.enlace-copiar{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.enlace-copiar input{flex:1 1 260px;font-family:var(--fuente-num);font-size:12.5px}
table.gente{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:12px}
table.gente th{text-align:left;font-size:12px;color:var(--muted);font-weight:600;padding:6px 8px;border-bottom:1px solid var(--line)}
table.gente td{padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
table.gente tr:last-child td{border-bottom:0}
table.gente td small{display:block;color:var(--muted);font-size:12px}
table.gente .apagado{color:var(--muted)}
.tabla-gente{overflow-x:auto}
@media (max-width:640px){.caja-cuenta{padding:32px 16px 60px}.caja-cuenta .panel{padding:18px 16px 20px}}
.caja-cuenta code{font-family:var(--fuente-num);font-size:12.5px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:5px;padding:1px 5px;color:var(--ink);overflow-wrap:anywhere}
#llave{overflow-wrap:anywhere}          /* la ruta de la llave: sin espacios, en un teléfono se corta si no parte en cualquier letra */

/* ---------- pantallas grandes: la letra sube un punto ----------
   Desde 1440 px de ancho la base pasa de 15 a 16 px y los textos chicos de siempre suben parejo con ella; nada cambia de
   lugar. Cada página sube además los suyos (sus tablas y sus tarjetas) en su propio @media (min-width:1440px). */
@media (min-width:1440px){
  body{font-size:16px}
  .sub{font-size:16.5px}
  .panel{padding:28px 30px}
  .eyebrow{font-size:11.5px}
  .aviso,.warn,.info{font-size:15px}
  .kpi,.kpi.warn{padding:22px 26px}
  .kpi b{font-size:38px}
  .kpi span{font-size:11.5px}
  .est{font-size:13.5px}
  a.conx{font-size:14px}
  input,select,textarea{font-size:16px}
  button{font-size:15.5px}
  button.fino{font-size:13.5px}
  table.gente{font-size:14.5px}
  table.gente th{font-size:12.5px}
  table.gente td{padding:11px 10px}
  table.gente td small{font-size:12.5px}
  .caja-cuenta label{font-size:13px}
  .caja-cuenta .pista{font-size:13px}
  .barra-cuenta{font-size:14.5px}
  .barra-cuenta .quien b{font-size:14px}
  .barra-cuenta .quien span{font-size:12.5px}
  .barra-cuenta .lt-mod{font-size:15px}
  .lt-paginas a{font-size:14px}
}

/* ---------- pantallas muy grandes (2200 px o más: un monitor de 27" sin escalar) ----------
   La barra y la página se ven un 20% más grandes, como con el zoom del navegador: la página ocupa la pantalla y la letra
   no queda chica. Las ventanas y las barras fijas de abajo quedan como están (cada página ajusta las suyas). */
@media (min-width:2200px){
  .barra-cuenta,.wrap,.caja-cuenta.ancha{zoom:1.2}
  html.con-lateral body{padding-left:calc(var(--lateral) * 1.2)}   /* el menú también crece un 20% */
  html.con-lateral .franja,html.con-lateral .nuevos,html.con-lateral .gbar,html.con-lateral .par-aviso{left:calc(50% + var(--lateral) * .6)}
  html.con-lateral .gbar{width:min(calc(1.2 * var(--ancho)),calc(100% - 1.2 * var(--lateral) - 2 * var(--margen)))}
  html.con-lateral .guardar{left:var(--lateral)}            /* «Guardar» va con zoom: su left también crece */
}