/* «Mi cuenta Synaptic». Sobre shared/synaptic.css: papel, tinta, Geist y el teal de Synaptic ID; cada producto trae
   su color (bloques .themed con --product-*, ya con contraste AA desde brand.py). Una columna de lectura; filas tipo
   lista (etiqueta, valor, acción) dentro de grupos. Lo único que llama la atención a propósito es el anillo de
   seguridad alrededor del avatar en Inicio. Toda superficie táctil mide al menos 44 px. */
:root{--r-group:var(--r-l);--r-ctl:var(--r-m);--gap:var(--s-6)}
.ico{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.contenido:focus{outline:none}

/* --- marco: cabecera, navegación, contenido ------------------------------------------------------------------ */
.frame{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto 1fr;grid-template-areas:"top" "nav" "main";min-height:100vh}
.top{grid-area:top;display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:var(--s-3) var(--s-4);
  background:var(--paper)}
.top .brandmark{min-height:var(--tap)}
.who{display:flex;align-items:center;gap:var(--s-1);min-width:0}
.who-name{font-size:var(--t-14);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw}
.btn-quiet{font:inherit;font-size:var(--t-14);display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:none;border:0;color:var(--ink);padding:0 12px;min-height:var(--tap);min-width:var(--tap);
  border-radius:var(--r-pill);cursor:pointer}
.btn-quiet:hover{background:var(--stone)}
.btn-quiet .ico{width:18px;height:18px}
.secciones{grid-area:nav;position:sticky;top:0;z-index:2;background:var(--paper);border-bottom:1px solid var(--line);
  display:flex;gap:var(--s-1);overflow-x:auto;padding:var(--s-1) var(--s-3) var(--s-2);scrollbar-width:none}
.secciones::-webkit-scrollbar{display:none}
.secciones a{display:flex;align-items:center;gap:var(--s-2);min-height:var(--tap);padding:0 14px;border-radius:var(--r-pill);
  color:var(--ink-2);text-decoration:none;white-space:nowrap;font-size:var(--t-14);font-weight:540}
.secciones a .ico{color:var(--muted)}
.secciones a:hover{background:var(--stone);color:var(--ink)}
.secciones a[aria-current="page"]{background:var(--accent-tint);color:var(--ink);font-weight:620}
.secciones a[aria-current="page"] .ico{color:var(--accent-text)}
.secciones a.fuera{color:var(--accent-text)}
.secciones a.fuera .ico{color:var(--accent-text)}
.contenido{grid-area:main;width:100%;max-width:800px;margin:0 auto;padding:var(--s-6) var(--s-4) var(--s-16)}
.cargando{color:var(--muted)}
@media (min-width:920px){
  .frame{grid-template-columns:272px 1fr;grid-template-rows:auto 1fr;grid-template-areas:"top top" "nav main"}
  .top{padding:var(--s-4) var(--s-8);border-bottom:1px solid var(--line)}
  .secciones{flex-direction:column;border:0;padding:var(--s-4) var(--s-3) var(--s-6) var(--s-5);top:0;align-self:start;
    overflow:visible;gap:2px}
  .secciones a{border-radius:0 var(--r-pill) var(--r-pill) 0;margin-left:calc(-1 * var(--s-5));padding:0 16px 0 28px;
    font-size:var(--t-15)}
  .secciones a.fuera{margin-top:var(--s-4);border-top:1px solid var(--line);border-radius:0;padding-top:var(--s-2);
    min-height:calc(var(--tap) + var(--s-2))}
  .contenido{padding:var(--s-8) var(--s-10) var(--s-20);margin:0}
}

/* --- encabezado de sección ------------------------------------------------------------------------------------- */
.encabezado{margin:var(--s-2) 0 var(--gap)}
.encabezado h1{font-size:var(--t-30);line-height:1.15;font-weight:640;letter-spacing:-.025em}
.encabezado p{margin:var(--s-2) 0 0;color:var(--ink-2);max-width:62ch}

/* --- grupos de filas (la unidad de toda la página) ----------------------------------------------------------- */
.grupo{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-group);margin:0 0 var(--gap);overflow:hidden;
  box-shadow:var(--sh-1)}
.grupo > header{padding:var(--s-5) var(--s-5) var(--s-1)}
.grupo > header h2{font-size:var(--t-18);font-weight:620}
.grupo > header p{margin:var(--s-1) 0 0;color:var(--muted);font-size:var(--t-14);max-width:62ch}
.grupo > .cuerpo{padding:var(--s-3) var(--s-5) var(--s-5)}
.grupo > .pie-grupo{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-3);border-top:1px solid var(--line);
  padding-top:var(--s-4)}
.filas{list-style:none;margin:0;padding:var(--s-1) 0}
.fila{display:flex;align-items:center;gap:14px;padding:14px var(--s-5);min-height:60px;color:inherit;text-decoration:none;
  border-top:1px solid var(--line);width:100%;background:none;border-left:0;border-right:0;border-bottom:0;font:inherit;
  text-align:left}
.filas > li:first-child > .fila{border-top:0}
button.fila,a.fila{cursor:pointer;transition:background var(--d-1)}
button.fila:hover,a.fila:hover{background:color-mix(in srgb,var(--stone) 60%,transparent)}
.fila:focus-visible{outline-offset:-2px}
.fila > .ico{color:var(--muted);margin:0 6px}
.fila .texto{flex:1;min-width:0;display:grid;gap:2px}
@media (min-width:600px){.fila .texto.dos{grid-template-columns:minmax(140px,200px) 1fr;align-items:baseline;gap:var(--s-4)}}
.fila .etiqueta{font-size:var(--t-13);color:var(--muted)}
.fila .valor{overflow-wrap:anywhere;font-weight:540}
.fila .nota{font-size:var(--t-13);color:var(--muted)}
.fila .texto.dos .nota{display:block;margin-top:2px}
.fila .chev{width:18px;height:18px;color:var(--muted)}
.fila .acciones{display:flex;gap:var(--s-2);flex-wrap:wrap;justify-content:flex-end;align-items:center}
@media (max-width:599px){
  .fila:has(.acciones){flex-wrap:wrap}
  .fila .acciones{flex-basis:100%;justify-content:flex-start;padding-left:58px}
}
.vacio{padding:18px var(--s-5);color:var(--muted);margin:0}
.pie-seccion{margin:calc(-1 * var(--s-2)) 0 var(--gap)}

/* --- controles ------------------------------------------------------------------------------------------------- */
.b{font:inherit;font-size:var(--t-14);font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  min-height:var(--tap);padding:0 18px;border-radius:var(--r-pill);border:1px solid var(--line-strong);background:var(--panel);
  color:var(--accent-text);cursor:pointer;text-decoration:none;white-space:nowrap;transition:background var(--d-1),border-color var(--d-1)}
.b:hover{background:var(--accent-tint);border-color:var(--accent)}
.b.primario{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.b.primario:hover{background:color-mix(in srgb,var(--accent) 86%,var(--ink))}
.b.peligro{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,var(--line))}
.b.peligro:hover{background:var(--bad-tint);border-color:var(--bad)}
.b.peligro.primario{background:var(--bad);color:#fff;border-color:var(--bad)}
.b[disabled]{opacity:.55;cursor:default}
.b .ico{width:18px;height:18px}
.campo{display:grid;gap:6px;font-size:var(--t-14);font-weight:560}
.campo small{font-weight:400;color:var(--muted);font-size:var(--t-13)}
.campo input,.campo select{font:inherit;font-size:16px;font-weight:400;min-height:var(--tap);padding:10px 12px;
  border:1px solid var(--line-strong);border-radius:var(--r-ctl);background:var(--panel);color:var(--ink);width:100%}
.campo input[aria-invalid="true"]{border-color:var(--bad)}
.campo.selector{max-width:360px;margin:0 0 var(--s-4)}
.marca{display:flex;gap:10px;align-items:flex-start;font-size:var(--t-14);cursor:pointer;min-height:var(--tap)}
.marca input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--accent)}
.interruptor{appearance:none;width:48px;height:28px;border-radius:var(--r-pill);background:var(--line-strong);position:relative;
  cursor:pointer;flex:none;margin:0;transition:background var(--d-2)}
.interruptor::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform var(--d-2) var(--ease)}
.interruptor:checked{background:var(--accent)}
.interruptor:checked::after{transform:translateX(20px)}
.formulario{display:grid;gap:var(--s-4)}
.formulario .pie{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:var(--s-1)}
.msg{border-radius:var(--r-m);padding:12px 14px;font-size:var(--t-14);margin:0;color:var(--ink)}
.msg:empty{display:none}
.msg.mal{background:var(--bad-tint);border-left:3px solid var(--bad)}
.msg.bien{background:var(--ok-tint);border-left:3px solid var(--ok)}
.msg.info{background:var(--accent-tint);border-left:3px solid var(--accent)}

/* --- estado (insignias) ------------------------------------------------------------------------------------------ */
.estado{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-13);font-weight:600;padding:3px 10px;
  border-radius:var(--r-pill);background:var(--stone);color:var(--ink);white-space:nowrap}
.estado.bien{background:var(--ok-tint);color:var(--ok)}
.estado.ojo{background:var(--warn-tint);color:var(--warn)}
.estado .ico{width:16px;height:16px}

/* --- Inicio: el anillo de seguridad ----------------------------------------------------------------------------- */
.saludo{display:grid;justify-items:center;text-align:center;gap:14px;margin:var(--s-3) 0 var(--s-8)}
.anillo{position:relative;width:132px;height:132px}
.anillo svg.arco{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.anillo .pista{fill:none;stroke:var(--line);stroke-width:5}
.anillo .lleno{fill:none;stroke:var(--warn);stroke-width:5;stroke-linecap:round;transition:stroke-dashoffset .9s var(--ease)}
.anillo.completo .lleno{stroke:var(--accent)}
.avatar{position:absolute;inset:12px;border-radius:50%;display:grid;place-items:center;overflow:hidden;
  background:var(--accent-tint);color:var(--accent-text);font-size:38px;font-weight:620;letter-spacing:-.02em}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar.chico{position:static;width:32px;height:32px;font-size:var(--t-13);flex:none;margin:0 -6px}
.saludo h1{font-size:var(--t-30);line-height:1.15;font-weight:640;letter-spacing:-.025em}
.saludo p{margin:0;color:var(--ink-2);max-width:52ch}
.revision{display:grid;gap:0}
.revision .fila{align-items:flex-start}
.revision .fila .ico{margin-top:2px}
.revision .ojo .ico{color:var(--warn)}
.revision .bien .ico{color:var(--ok)}
.atajos{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-3);margin:0 0 var(--gap);padding:0;list-style:none}
@media (min-width:600px){.atajos{grid-template-columns:repeat(3,1fr)}}
.atajos a{display:grid;gap:10px;padding:var(--s-4);min-height:88px;border:1px solid var(--line);border-radius:var(--r-l);
  background:var(--panel);color:var(--ink);text-decoration:none;font-weight:560;font-size:var(--t-14);
  transition:border-color var(--d-1)}
.atajos a:hover{border-color:var(--accent)}
.atajos .ico{color:var(--accent-text);width:22px;height:22px}

/* --- apps: tarjetas con la marca de cada producto ----------------------------------------------------------------- */
.app-ico{width:40px;height:40px;border-radius:var(--r-m);display:grid;place-items:center;flex:none;font-weight:700;
  font-size:var(--t-16);color:var(--accent-ink);background:var(--accent)}
.fila > .pmark{--m:40px}
.app-cards{list-style:none;margin:0 0 var(--gap);padding:0;display:grid;gap:var(--s-4);
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.app-card{position:relative;display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-5);background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-1);overflow:hidden}
.app-card::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--accent)}
.app-card-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);margin-bottom:var(--s-2)}
.app-card h3{font-size:var(--t-18);font-weight:640}
.app-tag{color:var(--ink-2);font-size:var(--t-14)}
.app-note{color:var(--muted);font-size:var(--t-13)}
.app-card .b{margin-top:auto;align-self:flex-start}
.app-card > .b:first-of-type{margin-top:var(--s-3)}
.app-cards.compactas{margin:0;padding:var(--s-1) var(--s-5) var(--s-5);grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.app-card.otra{box-shadow:none;background:var(--paper)}
.app-card.otra::before{height:3px}

/* --- facturas: desglose con IVA --------------------------------------------------------------------------------- */
.desglose{width:100%;border-collapse:collapse;font-size:var(--t-14)}
.desglose th{text-align:left;font-weight:560;color:var(--muted);font-size:var(--t-13);padding:0 0 var(--s-2);
  border-bottom:1px solid var(--line)}
.desglose td{padding:10px 0;border-bottom:1px solid var(--line);vertical-align:top}
.desglose td small{display:block;color:var(--muted);font-size:var(--t-13)}
.desglose .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;padding-left:var(--s-4)}
.totales{display:grid;grid-template-columns:1fr auto;gap:6px var(--s-4);margin:0;font-size:var(--t-14)}
.totales dt{color:var(--muted)}
.totales dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.totales .total{color:var(--ink);font-weight:640;font-size:var(--t-16);padding-top:var(--s-2);border-top:1px solid var(--line)}

/* --- MFA: QR y códigos -------------------------------------------------------------------------------------------- */
.qr{width:200px;height:200px;background:#fff;padding:12px;border-radius:var(--r-m);border:1px solid var(--line);justify-self:center}
.qr svg{width:100%;height:100%;display:block}
.secreto{font-family:var(--mono);font-size:15px;letter-spacing:.06em;background:var(--stone);padding:10px 12px;
  border-radius:var(--r-s);overflow-wrap:anywhere;user-select:all}
.codigos{list-style:none;margin:0;padding:12px;display:grid;grid-template-columns:repeat(2,1fr);gap:8px 16px;
  background:var(--stone);border-radius:var(--r-m);font-family:var(--mono);font-size:15px}

/* --- diálogo ----------------------------------------------------------------------------------------------------- */
dialog{border:0;border-radius:var(--r-xl);padding:0;width:min(500px,calc(100vw - 32px));max-height:calc(100vh - 32px);
  background:var(--panel);color:var(--ink);box-shadow:var(--sh-3)}
dialog::backdrop{background:rgba(6,13,24,.5)}
dialog .marco{padding:var(--s-6) var(--s-6) var(--s-5);display:grid;gap:var(--s-4)}
@media (max-width:420px){dialog .marco{padding:var(--s-5) var(--s-4)}}
dialog h2{font-size:var(--t-20);font-weight:640;padding-right:40px}
dialog .x{position:absolute;top:10px;right:10px}
dialog p{margin:0;color:var(--ink-2)}

/* --- aviso flotante ----------------------------------------------------------------------------------------------- */
.aviso{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--ink);color:var(--paper);
  padding:12px 18px;border-radius:var(--r-m);font-size:var(--t-14);max-width:calc(100vw - 32px);z-index:20;box-shadow:var(--sh-3)}

/* --- página sin sesión (enlaces del correo) --------------------------------------------------------------------- */
.suelta{max-width:480px;margin:6vh auto 0}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.contenido > .msg{margin-bottom:var(--gap)}