:root {
    color-scheme: light;
    --plane:#f2f5f3; --surface:#fbfcfb; --sunken:#eef1ef;
    --ink:#0d1312; --ink-2:#59635f; --ink-3:#8a938f;
    --rule:#e3e7e4; --rule-2:#d3d9d5;
    /* Semáforo de meta. Sistema de color de República Maya
       gris = no alcanzó · azul = cumplió · verde = superó */
    --st-no:#9aa39f; --st-ok:#2a78d6; --st-plus:#0ca30c;
    --v1:#2a78d6; --v2:#eb6834; --v3:#1baf7a; --v4:#eda100; --v5:#e87ba4; --v6:#008300;
    --good:#0ca30c; --critical:#d03b3b;
    --wash:rgba(13,19,18,0.05);
    --aw:#401986; /* morado de marca Afterwave */
  }
  @media (prefers-color-scheme: dark) {
    :root:where(:not([data-theme="light"])) {
      color-scheme: dark;
      --plane:#0b0f0e; --surface:#171c1b; --sunken:#101514;
      --ink:#f1f4f3; --ink-2:#a5afab; --ink-3:#7d8783;
      --rule:#252c2a; --rule-2:#333b39;
      --st-no:#6f7975; --st-ok:#3987e5; --st-plus:#0ca30c;
      --v1:#3987e5; --v2:#d95926; --v3:#199e70; --v4:#c98500; --v5:#d55181; --v6:#008300;
      --wash:rgba(255,255,255,0.055);
    --aw:#a888ea; /* marca aclarada para contraste en oscuro */
    }
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
    --plane:#0b0f0e; --surface:#171c1b; --sunken:#101514;
    --ink:#f1f4f3; --ink-2:#a5afab; --ink-3:#7d8783;
    --rule:#252c2a; --rule-2:#333b39;
    --st-no:#6f7975; --st-ok:#3987e5; --st-plus:#0ca30c;
    --v1:#3987e5; --v2:#d95926; --v3:#199e70; --v4:#c98500; --v5:#d55181; --v6:#008300;
    --wash:rgba(255,255,255,0.055);
    --aw:#a888ea; /* marca aclarada para contraste en oscuro */
  }

  * { box-sizing:border-box; }
  body { margin:0; background:var(--plane); color:var(--ink);
         font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
         font-size:13px; line-height:1.5; -webkit-font-smoothing:antialiased; }
  .shell { max-width:1120px; margin:0 auto; padding:0 24px; }

  /* ── Header ── */
  .bar { border-bottom:1px solid var(--rule); background:var(--surface); }
  .bar-in { max-width:1120px; margin:0 auto; padding:9px 24px 11px; }
  .row1 { display:flex; align-items:center; gap:9px; }
  .row1 .nm { font-size:13px; font-weight:650; letter-spacing:-0.012em; }
  .row1 .by { font-size:11px; color:var(--ink-3); display:inline-flex; align-items:center; gap:4px; }

  /* Escudo de República Maya. Va como máscara y no como <img>: el original es
     monocromo, así hereda el color del texto y se ve en tema claro y oscuro sin
     mantener dos archivos ni invertirlo con filtros. */
  .rm-logo { width:var(--sz,24px); height:var(--sz,24px); flex:none; display:block;
             background:currentColor; color:var(--ink);
             -webkit-mask:url(logo-rm.png) center/contain no-repeat;
                     mask:url(logo-rm.png) center/contain no-repeat; }

  /* Marca Afterwave: los SVG heredan currentColor, así sirven en claro y oscuro */
  .aw-iso  { width:auto; color:var(--aw); }
  .aw-word { width:auto; color:var(--aw); }
  .aw-lockup { width:auto; color:var(--aw); }

  .row2 { display:flex; align-items:flex-end; justify-content:space-between;
          gap:16px 22px; flex-wrap:wrap; margin-top:9px; }
  .grp { display:flex; flex-direction:column; gap:3px; }
  .grp > label { font-size:9.5px; font-weight:650; letter-spacing:0.09em;
                 text-transform:uppercase; color:var(--ink-3); padding-left:2px; }

  .seg { display:flex; gap:2px; padding:2px; background:var(--sunken);
         border:1px solid var(--rule); border-radius:7px; }
  .seg button {
    appearance:none; border:1px solid transparent; background:transparent; cursor:pointer;
    font:inherit; font-size:12px; font-weight:500; color:var(--ink-2);
    padding:3px 11px; border-radius:5px; white-space:nowrap; transition:color .12s;
  }
  .seg button:hover:not(:disabled) { color:var(--ink); }
  .seg button[aria-pressed="true"] {
    background:var(--surface); color:var(--ink); font-weight:600;
    border-color:var(--rule); box-shadow:0 1px 2px rgba(0,0,0,.05);
  }
  .seg button:focus-visible { outline:2px solid var(--ink); outline-offset:1px; }

  .navgrp { display:flex; align-items:center; gap:3px; }
  .navgrp .lbl { min-width:188px; text-align:center; font-size:12.5px; font-weight:600;
                 font-variant-numeric:tabular-nums; }
  .arrow { appearance:none; border:1px solid var(--rule); background:var(--surface);
           color:var(--ink-2); cursor:pointer; width:25px; height:25px; border-radius:6px;
           font-size:14px; line-height:1; display:grid; place-items:center; }
  .arrow:hover:not(:disabled) { color:var(--ink); border-color:var(--rule-2); }
  .arrow:disabled { opacity:.3; cursor:not-allowed; }
  .arrow:focus-visible { outline:2px solid var(--ink); outline-offset:1px; }

  /* ── Estructura ── */
  .stack { display:flex; flex-direction:column; gap:22px; padding-top:18px; }
  .card { background:var(--surface); border:1px solid var(--rule); border-radius:11px; }

  .statusline { display:flex; align-items:center; gap:9px; flex-wrap:wrap;
                font-size:11.5px; color:var(--ink-3); }
  .badge { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:550;
           color:var(--ink-2); background:var(--wash); padding:3px 9px; border-radius:999px;
           font-variant-numeric:tabular-nums; }
  .badge i { width:6px; height:6px; border-radius:50%; background:var(--ink-3); }
  .badge.live i { background:var(--st-ok); }
  .hidden-note { color:var(--ink-3); font-variant-numeric:tabular-nums; }
  .hidden-note button { appearance:none; background:none; border:0; padding:0; cursor:pointer;
                        font:inherit; color:var(--ink-2); text-decoration:underline;
                        text-underline-offset:2px; }

  /* ── Tarjetas ──
     Cinco escalones desde el KPI de perfilamientos: leads · perfilamientos ·
     citas · apartados · facturación. `minmax(0,1fr)` y no `1fr` a secas porque
     una cifra larga ($2.19M) ensancharía su columna y desalinearía el resto. */
  .cards { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
  @media (max-width:1040px){ .cards{grid-template-columns:repeat(3,minmax(0,1fr));} }
  @media (max-width:760px){ .cards{grid-template-columns:repeat(2,minmax(0,1fr));} }
  @media (max-width:520px){ .cards{grid-template-columns:minmax(0,1fr);} }
  .kpi { padding:15px 17px 15px; display:flex; flex-direction:column; gap:9px; }
  .kpi-top { display:flex; align-items:baseline; gap:7px; }
  /* Conversión del escalón. Ocupa el hueco a la derecha del nombre para que la
     tarjeta siga siendo de una cifra y un renglón. El nombre cede primero si no
     cabe: la tasa es corta y perderla partiría la fila en dos alturas. */
  .kpi-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .kpi-conv { margin-left:auto; flex:none; display:inline-flex; align-items:baseline; gap:3px;
              font-variant-numeric:tabular-nums; white-space:nowrap; cursor:default; }
  .kpi-conv i { font-style:normal; font-size:11px; color:var(--ink-3); }
  .kpi-conv b { color:var(--ink-2); font-weight:700; font-size:12px; }
  .swatch { width:8px; height:8px; border-radius:2px; flex:none; }
  .kpi-name { font-size:12px; font-weight:600; color:var(--ink-2); }
  .kpi-val { font-size:30px; font-weight:650; letter-spacing:-0.028em; line-height:1;
             font-variant-numeric:tabular-nums; }
  /* Valor de lo apartado, al lado de la cifra de unidades. En cuerpo menor y tinta
     de apoyo: la tarjeta cuenta unidades y el dinero acompaña. */
  .kpi-alt { font-size:15px; font-weight:600; color:var(--ink-2); letter-spacing:-0.01em;
             margin-left:5px; }
  /* 🚫 Sin renglón bajo la cifra desde el 20-ago (Johan). Se fueron con él la
     regla que lo separaba (`.kpi-sub`), la proyección (`.proj`) y el delta como
     texto (`.delta`): el único dato que se conservó, la comparación contra el
     período anterior, subió al chip. La tarjeta es nombre, chip y cifra. */
  /* D91 · Desglose campaña/orgánico. Vive sólo en la cabecera de la gráfica de
     facturación: dentro de la tarjeta añadía un tercer renglón y rompía el ritmo
     de la fila de KPIs, que es de una cifra y una línea. */
  .ch-head .split { color:var(--ink-3); font-variant-numeric:tabular-nums; }

  /* ── Gráficas ── */
  .ch { padding:16px 18px 10px; }
  .ch-head { display:flex; align-items:baseline; gap:9px; margin-bottom:4px; flex-wrap:wrap; }
  .ch-head b { font-size:13.5px; font-weight:650; }
  .ch-head .tot { margin-left:auto; font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
  .ch-head .tot b { font-weight:700; font-size:13px; color:var(--ink); }
  .ch > svg, .tsblock > svg { display:block; width:100%; height:auto; }
  .row1 svg, .wordmark svg { flex:none; display:block; }
  .ax { font-size:12px; fill:var(--ink-2); font-weight:550; }
  .axs { font-size:9.5px; fill:var(--ink-3); }
  .tk { font-size:10px; fill:var(--ink-3); font-variant-numeric:tabular-nums; }
  .val { font-size:14px; font-weight:700; fill:var(--ink); font-variant-numeric:tabular-nums; }
  /* Cifra de apoyo de la barra (el valor en pesos de las unidades apartadas). Va
     un punto por debajo de `.val`: acompaña, no compite. */
  .valin { font-size:11px; font-weight:650; font-variant-numeric:tabular-nums; }
  .mlbl { font-size:10.5px; font-weight:650; font-variant-numeric:tabular-nums; }
  .empty-txt { font-size:12px; fill:var(--ink-3); }
  .barhit { cursor:pointer; }
  .barhit:hover rect.bar { opacity:.78; }

  /* ── Desplegable ── */
  details.fold { border:1px solid var(--rule); border-radius:11px; background:var(--surface); }
  details.fold > summary { list-style:none; cursor:pointer; padding:12px 18px; display:flex;
                           align-items:center; gap:9px; font-size:13px; font-weight:600; user-select:none; }
  details.fold > summary::-webkit-details-marker { display:none; }
  details.fold > summary .caret { color:var(--ink-3); transition:transform .15s; font-size:10px; }
  details.fold[open] > summary .caret { transform:rotate(90deg); }
  details.fold > summary .hint { margin-left:auto; font-size:11.5px; font-weight:450; color:var(--ink-3); }
  details.fold > summary:focus-visible { outline:2px solid var(--ink); outline-offset:-2px; border-radius:11px; }
  .foldbody { padding:0 18px 16px; display:flex; flex-direction:column; gap:15px; }
  .foldbar { display:flex; align-items:center; gap:11px; flex-wrap:wrap;
             border-top:1px solid var(--rule); padding-top:11px; }
  .foldbar .lg { margin-left:auto; }

  .eyebrow { font-size:9.5px; font-weight:650; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-3); }

  /* botón y panel de configuración */
  .gear { appearance:none; display:inline-flex; align-items:center; gap:6px; cursor:pointer;
          font:inherit; font-size:12px; font-weight:550; color:var(--ink-2);
          background:var(--surface); border:1px solid var(--rule); border-radius:7px;
          padding:4px 10px 4px 8px; }
  .gear:hover { color:var(--ink); border-color:var(--rule-2); }
  .gear:focus-visible { outline:2px solid var(--ink); outline-offset:1px; }

  dialog.cfg { border:1px solid var(--rule); border-radius:13px; background:var(--surface);
               color:var(--ink); padding:0; max-width:460px; width:calc(100% - 32px);
               box-shadow:0 18px 50px rgba(0,0,0,.22); }
  dialog.cfg::backdrop { background:rgba(8,12,11,.5); backdrop-filter:blur(2px); }
  .cfg-head { padding:17px 20px 13px; border-bottom:1px solid var(--rule); }
  .cfg-head h2 { margin:0 0 3px; font-size:15px; font-weight:650; letter-spacing:-0.01em; }
  .cfg-head p { margin:0; font-size:11.5px; color:var(--ink-3); }
  .cfg-body { padding:15px 20px 4px; display:flex; flex-direction:column; gap:14px; }
  .cfg-row { display:grid; grid-template-columns:1fr 116px; gap:12px; align-items:center; }
  .cfg-row label { font-size:12.5px; font-weight:550; }
  .cfg-row label small { display:block; font-size:11px; font-weight:400; color:var(--ink-3); }
  .cfg-row input { width:100%; font:inherit; font-size:13px; font-weight:650; text-align:right;
                   font-variant-numeric:tabular-nums; padding:6px 9px; border-radius:7px;
                   border:1px solid var(--rule-2); background:var(--plane); color:var(--ink); }
  .cfg-row input:focus-visible { outline:2px solid var(--st-ok); outline-offset:-1px; border-color:var(--st-ok); }
  .cfg-note { font-size:11.5px; color:var(--ink-3); line-height:1.5;
              border-left:2px solid var(--rule-2); padding-left:10px; }
  .cfg-hist { font-size:11.5px; }
  .cfg-hist div { display:flex; justify-content:space-between; gap:10px; padding:5px 0;
                  border-top:1px solid var(--rule); font-variant-numeric:tabular-nums; }
  .cfg-hist div:first-child { border-top:0; }
  .cfg-foot { padding:13px 20px 16px; display:flex; gap:8px; justify-content:flex-end;
              border-top:1px solid var(--rule); margin-top:12px; }
  .btn { appearance:none; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer;
         padding:6px 15px; border-radius:7px; border:1px solid var(--rule-2);
         background:var(--surface); color:var(--ink-2); }
  .btn:hover { color:var(--ink); }
  .btn.pri { background:var(--ink); color:var(--surface); border-color:var(--ink); }
  .btn:focus-visible { outline:2px solid var(--st-ok); outline-offset:1px; }

  /* filtro de vendedores: selección múltiple */
  .vfil { position:relative; padding:0; border:0; background:none; }
  #vendBtn { display:flex; align-items:center; gap:8px; min-width:170px; justify-content:space-between;
             font:inherit; font-size:12px; font-weight:550; color:var(--ink); cursor:pointer;
             background:var(--surface); border:1px solid var(--rule); border-radius:7px; padding:4px 9px; }
  #vendBtn:hover { border-color:var(--rule-2); }
  #vendBtn:focus-visible { outline:2px solid var(--ink); outline-offset:1px; }
  .vcar { color:var(--ink-3); font-size:10px; }
  .vpop { position:absolute; top:calc(100% + 4px); left:0; z-index:60; min-width:238px;
          background:var(--surface); border:1px solid var(--rule-2); border-radius:9px;
          box-shadow:0 10px 28px rgba(0,0,0,.16); padding:4px; }
  .vall { display:block; width:100%; text-align:left; font:inherit; font-size:12px; font-weight:600;
          cursor:pointer; background:none; border:0; padding:6px 8px; border-radius:6px; color:var(--ink); }
  .vall:hover { background:var(--wash); }
  .vopt { display:flex; align-items:center; gap:8px; padding:5px 8px; border-radius:6px; cursor:pointer; }
  .vopt:hover { background:var(--wash); }
  .vopt input { margin:0; accent-color:var(--st-ok); flex:none; }
  .vopt img { width:22px; height:22px; border-radius:50%; object-fit:cover; flex:none; }
  .vini { width:22px; height:22px; border-radius:50%; background:var(--sunken); border:1px solid var(--rule);
          display:grid; place-items:center; font-size:8.5px; font-weight:700; color:var(--ink-2); flex:none; }
  .vopt .vn { font-size:12.5px; }
  .vopt.off .vn { color:var(--ink-3); }
  .vbaja { margin-left:auto; font-size:10px; color:var(--ink-3); }
  .vdiv { height:1px; background:var(--rule); margin:4px 2px; }
  .vtog .vn { font-size:11.5px; color:var(--ink-2); }

  /* apartados abiertos: vive en el panel sin filtrar */
  .open { padding:13px 17px 12px; }
  .open-head { display:flex; align-items:baseline; gap:10px; margin-bottom:7px; }
  .open-sum { margin-left:auto; font-size:12px; color:var(--ink-2); font-variant-numeric:tabular-nums; }
  .open-sum b { font-weight:700; color:var(--ink); }
  .open-row { display:grid; grid-template-columns:1fr auto auto; gap:14px; align-items:baseline;
              padding:7px 0 6px; border-top:1px solid var(--rule); font-variant-numeric:tabular-nums; }
  .open-row .q { font-size:12.5px; }
  .open-row .d { font-size:11.5px; color:var(--ink-3); }
  .open-row .m { font-size:13px; font-weight:700; color:#ec835a; }
  .open-row.orph .d b { color:var(--critical); font-weight:700; }

  /* bitácora del vendedor enfocado */
  .log { display:flex; flex-direction:column; }
  .log-row { display:grid; grid-template-columns:74px 1fr auto; gap:12px; align-items:baseline;
             padding:8px 0; border-top:1px solid var(--rule); font-variant-numeric:tabular-nums; }
  .log-row:first-child { border-top:0; }
  .log-row .f { font-size:11.5px; color:var(--ink-3); }
  .log-row .q { font-size:12.5px; }
  .log-row .q b { font-weight:650; }
  .log-row .m { font-size:12.5px; font-weight:700; }
  .log-empty { font-size:12px; color:var(--ink-3); padding:6px 0; }

  .legend { display:flex; gap:12px; flex-wrap:wrap; font-size:11.5px; color:var(--ink-2); }
  .legend span { display:inline-flex; align-items:center; gap:5px; }
  .legend i { width:14px; height:2.5px; border-radius:2px; display:block; }

  .tsblock { border-top:1px solid var(--rule); padding-top:12px; }
  .tsblock:first-of-type { border-top:0; padding-top:0; }

  #tip { position:fixed; z-index:90; pointer-events:none; opacity:0; transition:opacity .1s;
         background:var(--ink); color:var(--surface); font-size:11.5px; padding:6px 9px;
         border-radius:6px; line-height:1.5; font-variant-numeric:tabular-nums; }
  #tip b { font-weight:650; }

  .foot { font-size:11.5px; color:var(--ink-3); line-height:1.55;
          border-left:2px solid var(--rule-2); padding-left:11px; }
  .empty { text-align:center; padding:56px 24px; }
  .empty h3 { margin:0 0 7px; font-size:15px; font-weight:650; }
  .empty p { margin:0 auto; font-size:12.5px; color:var(--ink-2); max-width:420px; }

  /* ── Pie de marca ── */
  .signoff { border-top:1px solid var(--rule); margin-top:30px;
             background:color-mix(in srgb, var(--sunken) 60%, transparent); }
  .signoff-in { max-width:1120px; margin:0 auto; padding:18px 24px 28px;
                display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
  .wordmark { display:flex; align-items:center; gap:8px; }
  .wordmark span { font-size:12px; font-weight:700; letter-spacing:0.17em; text-transform:uppercase; }
  .signoff p { margin:0; font-size:11.5px; color:var(--ink-3); line-height:1.5; }
  .signoff .rule { width:1px; align-self:stretch; background:var(--rule-2); }

  @media (prefers-reduced-motion:reduce){ *{transition:none!important;} }

  /* ══════════════════════════════════════════════════════════════════════
     Lo que la maqueta no tenía: sesión real, carga y errores
     ══════════════════════════════════════════════════════════════════════ */

  [hidden] { display:none !important; }

  /* ── Puerta de entrada ── */
  /* Todo centrado: la marca, el titulo y el boton. Es una sola columna estrecha
     y cualquier elemento alineado a la izquierda rompe el eje. */
  .gate { min-height:100dvh; display:grid; place-items:center; padding:24px; }
  .gate-box { width:100%; max-width:360px; }
  .gate-brand { display:flex; flex-direction:column; align-items:center; gap:11px;
                margin-bottom:24px; text-align:center; }
  .gate-brand .nm { font-size:16.5px; font-weight:650; letter-spacing:-0.016em; line-height:1.4; }
  .gate-brand .by2 { display:block; font-size:12.5px; font-weight:550; color:var(--ink-3);
                     letter-spacing:0.01em; margin-top:1px; }
  .gate form { background:var(--surface); border:1px solid var(--rule); border-radius:12px;
               padding:22px 22px 20px; display:flex; flex-direction:column; gap:14px; }
  .gate h1 { margin:0 0 2px; font-size:15px; font-weight:650; letter-spacing:-0.01em;
             text-align:center; }
  .field { display:flex; flex-direction:column; gap:5px; }
  .field label { font-size:9.5px; font-weight:650; letter-spacing:0.09em;
                 text-transform:uppercase; color:var(--ink-3); }
  .field input { font:inherit; font-size:13px; padding:8px 11px; border-radius:8px;
                 border:1px solid var(--rule-2); background:var(--plane); color:var(--ink); }
  .field input:focus-visible { outline:2px solid var(--st-ok); outline-offset:-1px;
                               border-color:var(--st-ok); }
  .gate .btn.pri { width:100%; padding:9px; font-size:13px; margin-top:2px; }
  .gate .btn:disabled { opacity:.55; cursor:progress; }

  .alert { font-size:12px; line-height:1.5; border-radius:8px; padding:8px 11px;
           background:color-mix(in srgb, var(--critical) 11%, transparent);
           color:var(--critical); border:1px solid color-mix(in srgb, var(--critical) 28%, transparent); }

  /* ── Cuenta en el header ──────────────────────────────────────────────
     Un solo control en vez de nombre + chip de rol + "Salir" sueltos. El rol y
     el correo bajan al desplegable, donde se consultan cuando hacen falta, y
     cerrar sesion deja de estar a un pixel del boton de Metas. */
  .hrule { width:1px; height:19px; background:var(--rule-2); margin:0 7px 0 5px; flex:none; }

  .avatar { width:23px; height:23px; border-radius:50%; flex:none; display:grid;
            place-items:center; overflow:hidden; background:var(--sunken);
            border:1px solid var(--rule); font-size:9px; font-weight:700;
            color:var(--ink-2); letter-spacing:0.02em; }
  .avatar img { width:100%; height:100%; object-fit:cover; object-position:center top; }
  .avatar.lg { width:34px; height:34px; font-size:12px; }

  .acct { position:relative; }
  #acctBtn { display:inline-flex; align-items:center; gap:7px; cursor:pointer; font:inherit;
             background:transparent; border:1px solid transparent; border-radius:8px;
             padding:3px 7px 3px 4px; color:var(--ink); transition:background .12s, border-color .12s; }
  #acctBtn:hover { background:var(--wash); border-color:var(--rule); }
  #acctBtn[aria-expanded="true"] { background:var(--wash); border-color:var(--rule-2); }
  #acctBtn:focus-visible { outline:2px solid var(--ink); outline-offset:1px; }
  .acct-nm { font-size:12px; font-weight:600; letter-spacing:-0.008em; max-width:150px;
             overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  .acctpop { position:absolute; top:calc(100% + 5px); right:0; z-index:70; min-width:236px;
             background:var(--surface); border:1px solid var(--rule-2); border-radius:10px;
             box-shadow:0 12px 30px rgba(0,0,0,.17); padding:5px; }
  .acct-head { display:flex; align-items:center; gap:10px; padding:9px 9px 10px; }
  .acct-head b { display:block; font-size:12.5px; font-weight:650; letter-spacing:-0.008em; }
  .acct-head span:not(.avatar) { display:block; font-size:11px; color:var(--ink-3);
                                 max-width:160px; overflow:hidden; text-overflow:ellipsis;
                                 white-space:nowrap; }
  .acct-rol { font-size:11px; color:var(--ink-2); padding:7px 9px; margin:0 0 4px;
              border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
              line-height:1.45; }
  .acct-rol b { font-weight:650; color:var(--ink); }
  .acct-out { display:block; width:100%; text-align:left; appearance:none; cursor:pointer;
              font:inherit; font-size:12.5px; font-weight:550; color:var(--ink-2);
              background:none; border:0; padding:7px 9px; border-radius:7px; }
  .acct-out:hover { background:var(--wash); color:var(--critical); }
  .acct-out:focus-visible { outline:2px solid var(--ink); outline-offset:-2px; }

  /* ── Pie ── */
  .footmeta { margin:0; display:flex; gap:11px 26px; flex-wrap:wrap; font-size:11px; }
  .footmeta > div { display:flex; flex-direction:column; gap:1px; }
  .footmeta dt { color:var(--ink-3); font-size:9.5px; font-weight:650; letter-spacing:0.08em;
                 text-transform:uppercase; }
  .footmeta dd { margin:0; color:var(--ink-2); font-size:11.5px;
                 font-variant-numeric:tabular-nums; }
  .footmeta a { color:var(--ink-2); text-decoration:underline; text-underline-offset:2px;
                text-decoration-color:var(--rule-2); }
  .footmeta a:hover { color:var(--ink); text-decoration-color:currentColor; }
  /* Aviso de datos rancios. El punteado invita a pasar el cursor: ahí está el
     desglose flujo por flujo, que es lo que dice cuál de los seis dejó de traer.
     El rojo aquí sí es rojo, a diferencia del semáforo de metas: no habla del
     desempeño de nadie, habla de una tubería rota. */
  .footmeta .fresh { border-bottom:1px dotted var(--rule-2); cursor:help; }
  .footmeta .fresh.stale { color:var(--critical); font-weight:650;
                           border-bottom-color:color-mix(in srgb, var(--critical) 45%, transparent); }
  @media (max-width:640px){ .signoff .rule { display:none; } }

  /* ── Carga ── */
  .loading { display:flex; align-items:center; justify-content:center; gap:10px;
             padding:64px 24px; font-size:12.5px; color:var(--ink-3); }
  .spin { width:15px; height:15px; border:2px solid var(--rule-2); border-top-color:var(--ink-3);
          border-radius:50%; animation:spin .7s linear infinite; }
  @keyframes spin { to { transform:rotate(360deg); } }
  @media (prefers-reduced-motion:reduce){ .spin{animation-duration:2.4s;} }

  .savingnote { font-size:11.5px; color:var(--ink-3); margin-right:auto; align-self:center; }

  /* ══════════════════════════════════════════════════════════════════════
     Pantalla de móvil (D84, D85)
     ══════════════════════════════════════════════════════════════════════

     En celular no hay panel ni login: hay una pantalla que pide abrirlo en
     computadora. El tablero son tres gráficas de 960 px, y comprimido a 390 px
     no queda "peor", queda ilegible. La plataforma es de sólo lectura, así que
     nadie deja de trabajar por no poder abrirla en el teléfono.

     ⚠️ El corte NO puede ser un `max-width` a secas: un celular grande en
     horizontal (852 px) es más ancho que una tablet en vertical (768 px), así
     que por ancho se bloquearía justo al revés. Lo que separa de verdad a un
     teléfono de una tablet es el LADO CORTO del viewport, y estas dos
     condiciones unidas por coma (un `or` en CSS) son exactamente eso:

       · en vertical el lado corto es el ancho. La frontera real va de 430 px
         (iPhone Pro Max, el teléfono más ancho) a 744 px (iPad mini, la tablet
         más angosta): 600 cae holgado en medio.
       · en horizontal el lado corto es la altura. Aquí 600 sería peligroso,
         porque una laptop con la ventana sin maximizar llega a 600 px de alto;
         500 sigue separando teléfono (≤430) de tablet (≥744) y no atrapa
         ninguna laptop realista.

     Se detecta por viewport y no por user-agent a propósito: el sniffing se
     rompe con cada navegador nuevo y falla en cuanto alguien pide "sitio de
     escritorio". Además esto es auto-corregible, que es lo que el sniffing no
     da: quien tenga la ventana muy angosta ve esta pantalla, y al agrandarla el
     panel vuelve solo.

     El panel no se oculta dejando el DOM debajo: `display:none` lo saca también
     del árbol de accesibilidad y del orden de tabulación, así que no queda nada
     alcanzable por lector de pantalla ni por tabulador. */

  .mgate { display:none; }

  @media (max-width:600px), (max-height:500px) {
    #gate, #shell, #dlgCfg, #tip { display:none !important; }

    .mgate { display:grid; place-items:center; min-height:100dvh; padding:32px 24px; }
    .mgate-box { max-width:340px; display:flex; flex-direction:column; align-items:center;
                 text-align:center; gap:14px; }
    .mgate h1 { margin:0; font-size:19px; font-weight:650; letter-spacing:-0.02em;
                line-height:1.3; }
    .mgate p { margin:0; font-size:14px; line-height:1.55; color:var(--ink-2); }
    .mgate-sop { border-top:1px solid var(--rule); padding-top:14px; width:100%;
                 font-size:13.5px; color:var(--ink-3) !important; }
    .mgate-sop a { color:var(--ink-2); font-weight:600; white-space:nowrap;
                   text-decoration:underline; text-underline-offset:3px;
                   text-decoration-color:var(--rule-2); }
    .mgate-by { font-size:10.5px; font-weight:600; letter-spacing:0.06em;
                text-transform:uppercase; color:var(--ink-3); }
  }