/* =====================================================================
   Real War Online · Consola de administración
   Sistema de diseño: tokens (color, espacio, radio, sombra, tipografía),
   componentes y vistas. Tema oscuro por defecto; claro por preferencia
   del sistema o elección manual (html[data-theme]).
   ===================================================================== */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(../admin/fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url(../admin/fonts/jbmono-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  /* espacio (4/8) */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;--s10:40px;--s12:48px;
  /* radio */
  --r-xs:4px;--r-sm:6px;--r-md:8px;--r-lg:12px;--r-xl:16px;--r-full:999px;
  /* tipografía */
  --font:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --fs-2xs:11px;--fs-xs:12px;--fs-sm:13px;--fs-md:14px;--fs-lg:16px;--fs-xl:18px;--fs-2xl:22px;--fs-3xl:28px;
  --lh:1.5;
  /* movimiento */
  --ease:cubic-bezier(.2,.8,.2,1);--t-fast:120ms;--t:180ms;
  /* dimensiones */
  --side-w:248px;--side-min:64px;--top-h:56px;
  /* tema oscuro (por defecto) */
  --bg:#0c0e0d;--bg-side:#0f1211;--surface:#141816;--surface-2:#1a1f1c;--surface-3:#222824;--field:#101412;
  --border:#232a26;--border-2:#323b36;
  --text:#e9ece8;--text-2:#a9b1aa;--text-3:#808a82;
  --accent:#d6b04a;--accent-hi:#e4c062;--accent-ink:#1b1604;--accent-soft:rgba(214,176,74,.12);--accent-line:rgba(214,176,74,.38);--accent-text:#e2c15f;
  --olive:#7f9a4a;--olive-soft:rgba(127,154,74,.14);
  --ok:#3fb950;--ok-text:#62d273;--ok-soft:rgba(63,185,80,.13);
  --warn:#d29922;--warn-text:#e3b341;--warn-soft:rgba(210,153,34,.14);
  --bad:#f85149;--bad-text:#ff7b72;--bad-soft:rgba(248,81,73,.13);
  --info:#4c9aff;--info-text:#82b8ff;--info-soft:rgba(76,154,255,.13);
  --violet-text:#b9a6ff;--violet-soft:rgba(150,120,255,.15);
  --sh-1:0 1px 2px rgba(0,0,0,.35);
  --sh-2:0 4px 14px rgba(0,0,0,.35),0 1px 3px rgba(0,0,0,.3);
  --sh-3:0 24px 64px rgba(0,0,0,.6),0 2px 10px rgba(0,0,0,.4);
  --ring:0 0 0 3px rgba(214,176,74,.32);
  --scrim:rgba(4,6,5,.62);
  --grid-line:rgba(255,255,255,.035);
  --chk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b1604' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --caret:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23939b94' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E");
  color-scheme:dark;
}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){
  --bg:#f7f7f4;--bg-side:#f0f0ec;--surface:#ffffff;--surface-2:#f5f5f1;--surface-3:#ebebe6;--field:#ffffff;
  --border:#e4e4de;--border-2:#d2d2ca;
  --text:#191c1a;--text-2:#545b56;--text-3:#6b726c;
  --accent:#8f6c0e;--accent-hi:#7c5d0a;--accent-ink:#ffffff;--accent-soft:rgba(143,108,14,.09);--accent-line:rgba(143,108,14,.4);--accent-text:#7a5c0b;
  --olive:#5d7330;--olive-soft:rgba(93,115,48,.1);
  --ok:#1a7f37;--ok-text:#1a7f37;--ok-soft:rgba(26,127,55,.1);
  --warn:#9a6700;--warn-text:#875b00;--warn-soft:rgba(191,135,0,.13);
  --bad:#cf222e;--bad-text:#bf1f2a;--bad-soft:rgba(207,34,46,.09);
  --info:#0969da;--info-text:#0a5fc2;--info-soft:rgba(9,105,218,.09);
  --violet-text:#6639ba;--violet-soft:rgba(130,80,223,.1);
  --sh-1:0 1px 2px rgba(20,28,18,.06);
  --sh-2:0 4px 14px rgba(20,28,18,.08),0 1px 3px rgba(20,28,18,.06);
  --sh-3:0 24px 64px rgba(20,28,18,.2),0 2px 10px rgba(20,28,18,.08);
  --ring:0 0 0 3px rgba(143,108,14,.25);
  --scrim:rgba(24,28,22,.38);
  --grid-line:rgba(20,30,10,.045);
  --chk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --caret:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b726c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E");
  color-scheme:light;
}}
:root[data-theme="light"]{
  --bg:#f7f7f4;--bg-side:#f0f0ec;--surface:#ffffff;--surface-2:#f5f5f1;--surface-3:#ebebe6;--field:#ffffff;
  --border:#e4e4de;--border-2:#d2d2ca;
  --text:#191c1a;--text-2:#545b56;--text-3:#6b726c;
  --accent:#8f6c0e;--accent-hi:#7c5d0a;--accent-ink:#ffffff;--accent-soft:rgba(143,108,14,.09);--accent-line:rgba(143,108,14,.4);--accent-text:#7a5c0b;
  --olive:#5d7330;--olive-soft:rgba(93,115,48,.1);
  --ok:#1a7f37;--ok-text:#1a7f37;--ok-soft:rgba(26,127,55,.1);
  --warn:#9a6700;--warn-text:#875b00;--warn-soft:rgba(191,135,0,.13);
  --bad:#cf222e;--bad-text:#bf1f2a;--bad-soft:rgba(207,34,46,.09);
  --info:#0969da;--info-text:#0a5fc2;--info-soft:rgba(9,105,218,.09);
  --violet-text:#6639ba;--violet-soft:rgba(130,80,223,.1);
  --sh-1:0 1px 2px rgba(20,28,18,.06);
  --sh-2:0 4px 14px rgba(20,28,18,.08),0 1px 3px rgba(20,28,18,.06);
  --sh-3:0 24px 64px rgba(20,28,18,.2),0 2px 10px rgba(20,28,18,.08);
  --ring:0 0 0 3px rgba(143,108,14,.25);
  --scrim:rgba(24,28,22,.38);
  --grid-line:rgba(20,30,10,.045);
  --chk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --caret:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b726c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E");
  color-scheme:light;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:var(--fs-md);line-height:var(--lh);font-feature-settings:'cv11','ss01';-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{overflow-x:hidden;min-height:100vh}
::selection{background:var(--accent-soft);color:var(--text)}
.hidden{display:none!important}
.ic{width:16px;height:16px;flex:none;display:inline-block;vertical-align:-3px}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.01em;color:var(--text)}
h1{font-size:var(--fs-2xl)}h2{font-size:var(--fs-lg);margin:0 0 var(--s3)}
h3{font-size:var(--fs-sm);margin:var(--s5) 0 var(--s3);font-weight:600;color:var(--text)}
.card>h3:first-child,.card>.card-h:first-child h3{margin-top:0}
a{color:var(--accent-text);text-underline-offset:2px}
p{margin:0 0 var(--s3)}
.muted{color:var(--text-2)}.dim{color:var(--text-3)}.small{font-size:var(--fs-xs)}
.err{color:var(--bad-text);min-height:0;margin:0;font-size:var(--fs-sm)}.err:empty{display:none}
.okc{color:var(--ok-text)}
.num,.tnum,.kpi .v,.kv dd,td{font-variant-numeric:tabular-nums}
.num{text-align:right}
code,kbd,.mono{font-family:var(--mono);font-size:.86em}
code{background:var(--surface-2);border:1px solid var(--border);padding:1px 5px;border-radius:var(--r-xs);color:var(--text);overflow-wrap:anywhere}
kbd{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;border-radius:var(--r-xs);border:1px solid var(--border-2);border-bottom-width:2px;background:var(--surface);color:var(--text-2);font-size:10.5px;font-weight:500;line-height:1}
:focus{outline:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)}
.skip{position:fixed;left:8px;top:-60px;z-index:100;background:var(--accent);color:var(--accent-ink);padding:8px 12px;border-radius:var(--r-md);font-weight:600;text-decoration:none}.skip:focus{top:8px}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:10px;border:2px solid transparent;background-clip:padding-box}::-webkit-scrollbar-thumb:hover{background:var(--text-3);background-clip:padding-box;border:2px solid transparent}::-webkit-scrollbar-track{background:transparent}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ---------- botones ---------- */
button,.btn{font:inherit;font-size:var(--fs-sm);font-weight:500;line-height:20px;color:var(--text);background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r-md);padding:5px 12px;min-height:32px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;box-shadow:var(--sh-1);transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast),box-shadow var(--t-fast);position:relative;user-select:none;-webkit-tap-highlight-color:transparent}
button:hover,.btn:hover{background:var(--surface-2);border-color:var(--border-2)}
button:active{transform:translateY(.5px)}
button:focus-visible,.btn:focus-visible{outline:none;box-shadow:var(--ring);border-color:var(--accent)}
button:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none}
button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600;box-shadow:0 1px 0 rgba(255,255,255,.12) inset,var(--sh-1)}
button.primary:hover{background:var(--accent-hi);border-color:var(--accent-hi)}
button.danger{color:var(--bad-text);border-color:var(--border-2)}
button.danger:hover{background:var(--bad-soft);border-color:color-mix(in srgb,var(--bad) 45%,transparent)}
button.danger.solid,#mOk.danger{background:var(--bad);border-color:var(--bad);color:#fff;font-weight:600}
button.danger.solid:hover,#mOk.danger:hover{filter:brightness(1.08);background:var(--bad)}
button.ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--text-2)}
button.ghost:hover{background:var(--surface-2);color:var(--text)}
button.sm,.btn.sm,.sm{min-height:28px;padding:3px 9px;font-size:var(--fs-xs);border-radius:var(--r-sm);gap:5px}
button.sm .ic{width:14px;height:14px}
button.lg{min-height:40px;padding:8px 16px;font-size:var(--fs-md);border-radius:var(--r-md)}
button.block{width:100%}
button.icon{padding:0;width:32px;min-width:32px}button.icon.sm{width:28px;min-width:28px}
button.on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-text)}
button.loading{color:transparent!important;pointer-events:none}
button.loading>*{visibility:hidden}
button.loading::after{content:'';position:absolute;inset:0;margin:auto;width:14px;height:14px;border-radius:50%;border:2px solid var(--text-2);border-right-color:transparent;animation:spin .7s linear infinite;visibility:visible}
button.primary.loading::after{border-color:var(--accent-ink);border-right-color:transparent}
@keyframes spin{to{transform:rotate(360deg)}}
.btn-group{display:inline-flex}.btn-group>button{border-radius:0;margin-left:-1px}.btn-group>button:first-child{border-radius:var(--r-md) 0 0 var(--r-md);margin-left:0}.btn-group>button:last-child{border-radius:0 var(--r-md) var(--r-md) 0}

/* ---------- campos ---------- */
input,select,textarea{font:inherit;font-size:var(--fs-sm);color:var(--text);background:var(--field);border:1px solid var(--border-2);border-radius:var(--r-md);padding:6px 10px;min-height:34px;max-width:100%;min-width:0;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
input::placeholder,textarea::placeholder{color:var(--text-3);opacity:1}
input:hover,select:hover,textarea:hover{border-color:color-mix(in srgb,var(--text-3) 60%,var(--border-2))}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
input[readonly]{background:var(--surface-2);color:var(--text-2)}
input:disabled,select:disabled,textarea:disabled{opacity:.6;cursor:not-allowed}
input[type=search]{-webkit-appearance:none;appearance:none;padding-left:32px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23858d86' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:10px center;background-size:15px}
input[type=search]::-webkit-search-cancel-button{filter:grayscale(1);opacity:.6}
select{-webkit-appearance:none;appearance:none;padding-right:30px;background-image:var(--caret);background-repeat:no-repeat;background-position:right 8px center;background-size:14px;cursor:pointer}
select.sm,input.sm{min-height:28px;padding-top:3px;padding-bottom:3px;font-size:var(--fs-xs);border-radius:var(--r-sm)}
select.sm{padding-right:26px;background-position:right 6px center}
textarea{width:100%;min-height:120px;font-family:var(--mono);font-size:12.5px;line-height:1.55;resize:vertical;padding:8px 10px}
textarea.prose{font-family:var(--font);font-size:var(--fs-sm)}
input[type=number]{font-variant-numeric:tabular-nums}
input[type=date],input[type=datetime-local]{color-scheme:inherit}
input[type=file]{padding:5px;font-size:var(--fs-xs)}
input[type=file]::file-selector-button{font:inherit;font-weight:500;border:1px solid var(--border-2);background:var(--surface-2);color:var(--text);border-radius:var(--r-sm);padding:4px 10px;margin-right:10px;cursor:pointer}
input[type=checkbox]{-webkit-appearance:none;appearance:none;width:16px;height:16px;min-height:0;padding:0;margin:0;border:1.5px solid var(--border-2);border-radius:var(--r-xs);background:var(--field);flex:none;cursor:pointer;display:inline-grid;place-content:center;vertical-align:-3px;transition:background var(--t-fast),border-color var(--t-fast)}
input[type=checkbox]:checked{background:var(--accent) var(--chk) center/12px no-repeat;border-color:var(--accent)}
input[type=checkbox]:focus-visible{box-shadow:var(--ring);border-color:var(--accent)}
input[type=checkbox].switch{width:32px;height:18px;border-radius:var(--r-full);background:var(--surface-3);border:1px solid var(--border-2);position:relative}
input[type=checkbox].switch::before{content:'';position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:var(--text-2);transition:transform var(--t) var(--ease),background var(--t)}
input[type=checkbox].switch:checked{background:var(--accent);border-color:var(--accent);background-image:none}
input[type=checkbox].switch:checked::before{transform:translateX(14px);background:var(--accent-ink)}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>label{font-size:var(--fs-sm);font-weight:500;color:var(--text)}
.hint{font-size:var(--fs-xs);color:var(--text-2);margin:0;display:flex;gap:6px;align-items:center}.hint .ic{width:14px;height:14px}
.hint.warn{color:var(--warn-text)}
.input-icon{position:relative;display:flex;align-items:center}.input-icon input{width:100%;padding-left:34px}
.input-icon .lead{position:absolute;left:10px;color:var(--text-3);display:flex;pointer-events:none}
.input-icon.trail input{padding-right:40px}
.input-icon .eye{position:absolute;right:4px;width:30px;height:28px;min-height:0;padding:0;border:0;background:transparent;box-shadow:none;color:var(--text-3)}.input-icon .eye:hover{color:var(--text);background:var(--surface-2)}
.form{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:var(--s4) var(--s4)}
.form.one{grid-template-columns:minmax(0,1fr)}
.form label{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-sm);font-weight:500;color:var(--text);min-width:0}
.form label>.muted.small{font-weight:400}
.form label input,.form label select,.form label textarea{font-weight:400}
.form .full{grid-column:1/-1}
.form label.chk,label.chk{flex-direction:row;align-items:center;gap:8px;color:var(--text);font-size:var(--fs-sm);font-weight:400;cursor:pointer}
.checks{display:flex;flex-wrap:wrap;gap:8px 20px}
.field-err,.form label .err{font-size:var(--fs-xs);font-weight:400}
input.invalid,input[aria-invalid="true"]{border-color:var(--bad)!important}
input.invalid:focus{box-shadow:0 0 0 3px var(--bad-soft)}

/* ---------- control segmentado y pestañas ---------- */
.seg{display:inline-flex;padding:2px;gap:2px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md)}
.seg>button{background:transparent;border:0;box-shadow:none;min-height:26px;padding:2px 10px;font-size:var(--fs-xs);color:var(--text-2);border-radius:var(--r-sm)}
.seg>button:hover{color:var(--text);background:transparent}
.seg>button.on,.seg>button[aria-checked="true"]{background:var(--surface);color:var(--text);box-shadow:var(--sh-1),0 0 0 1px var(--border)}
.seg.full{display:flex}.seg.full>button{flex:1}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:var(--s5);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{border:0;box-shadow:none;background:none;border-radius:0;padding:8px 12px 10px;min-height:0;color:var(--text-2);font-weight:500;position:relative}
.tabs button .ic{width:15px;height:15px}
.tabs button:hover{color:var(--text);background:none}
.tabs button::after{content:'';position:absolute;left:8px;right:8px;bottom:-1px;height:2px;border-radius:2px 2px 0 0;background:transparent;transition:background var(--t-fast)}
.tabs button.on{color:var(--text);background:none}
.tabs button.on::after{background:var(--accent)}
.tabs button.on .ic{color:var(--accent-text)}

/* ---------- distintivos ---------- */
.pill{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px;border-radius:var(--r-full);font-size:var(--fs-2xs);font-weight:500;line-height:1;background:var(--surface-3);color:var(--text-2);white-space:nowrap;vertical-align:middle;border:1px solid transparent}
.pill .ic{width:12px;height:12px}
.pill::before{content:none}
.pill.ok{background:var(--ok-soft);color:var(--ok-text)}
.pill.bad{background:var(--bad-soft);color:var(--bad-text)}
.pill.warn{background:var(--warn-soft);color:var(--warn-text)}
.pill.acc{background:var(--accent-soft);color:var(--accent-text)}
.pill.info{background:var(--info-soft);color:var(--info-text)}
.pill.dot::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.out{background:transparent;border-color:var(--border-2)}
.nb{margin-left:auto;background:var(--accent);color:var(--accent-ink);border-radius:var(--r-full);padding:0 6px;min-width:18px;height:18px;font-size:10.5px;font-weight:700;line-height:18px;text-align:center;font-variant-numeric:tabular-nums}
.nb.dim{background:var(--surface-3);color:var(--text-2)}
.sp-nueva{background:var(--info-soft);color:var(--info-text)}.sp-estudio{background:var(--accent-soft);color:var(--accent-text)}.sp-planificada{background:var(--warn-soft);color:var(--warn-text)}.sp-desarrollo{background:var(--violet-soft);color:var(--violet-text)}.sp-hecha{background:var(--ok-soft);color:var(--ok-text)}.sp-descartada{background:var(--surface-3);color:var(--text-2)}
.pill[class*="sp-"]::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}

/* ---------- tarjetas y disposición ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s5);min-width:0;box-shadow:var(--sh-1)}
.card.flush{padding:0}
.card-h{display:flex;align-items:center;gap:var(--s3);margin:0 0 var(--s4);min-width:0;flex-wrap:wrap}
.card-h h3{margin:0;font-size:var(--fs-md)}
.card-h .sub{color:var(--text-2);font-size:var(--fs-xs)}
.card-h .sp{flex:1}
.card-f{border-top:1px solid var(--border);margin:var(--s5) calc(-1 * var(--s5)) calc(-1 * var(--s5));padding:var(--s3) var(--s5);background:var(--surface-2);border-radius:0 0 var(--r-lg) var(--r-lg);display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr));gap:var(--s3)}
.grid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));gap:var(--s4)}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
@media (max-width:1180px){.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.grid3{grid-template-columns:minmax(0,1fr)}}
.cols{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--s4);align-items:start}
@media (max-width:1100px){.cols{grid-template-columns:minmax(0,1fr)}}
.stack{display:flex;flex-direction:column;gap:var(--s4);min-width:0}
.section-t{display:flex;align-items:baseline;gap:var(--s2);margin:var(--s8) 0 var(--s3)}
.section-t h3{margin:0;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.07em;color:var(--text-2);font-weight:600}
.section-t .sub{font-size:var(--fs-xs);color:var(--text-3)}
.row,.row.wrap{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
.row.end{justify-content:flex-end}
.sp{flex:1}
.lhead{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap;margin-bottom:var(--s4);min-width:0}
.lhead h2{margin:0;font-size:var(--fs-xl);overflow-wrap:anywhere}
.lhead h3{margin:0}
.page-h{display:flex;gap:var(--s4);align-items:flex-end;flex-wrap:wrap;margin:0 0 var(--s5)}
.page-h h1{font-size:var(--fs-2xl);line-height:1.2}
.page-h p{margin:4px 0 0;color:var(--text-2);font-size:var(--fs-sm)}
.page-h .sp{flex:1}
.back{color:var(--text-2)}
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 20px;font-size:var(--fs-sm);margin:0}
.kv dt{color:var(--text-2)}
.kv dd{margin:0;overflow-wrap:anywhere;color:var(--text)}
.kv.small{font-size:var(--fs-xs)}
details.card>summary{cursor:pointer;font-weight:600;color:var(--text);list-style:none;display:flex;align-items:center;gap:8px;margin:calc(-1 * var(--s1)) 0}
details.card>summary::-webkit-details-marker{display:none}
details.card>summary .ic{color:var(--accent-text)}
details.card>summary::after{content:'';margin-left:auto;width:16px;height:16px;background:var(--chev) center/14px no-repeat;opacity:.8;transition:transform var(--t)}
details.card[open]>summary::after{transform:rotate(180deg)}
details.card[open]>summary{margin-bottom:var(--s4)}
details>summary.small{cursor:pointer;color:var(--text-2);margin:var(--s3) 0}

/* ---------- avisos ---------- */
.banner{display:flex;gap:10px;align-items:center;padding:10px var(--s6);font-size:var(--fs-sm);background:var(--warn-soft);color:var(--warn-text);border-bottom:1px solid color-mix(in srgb,var(--warn) 25%,transparent)}
.banner a{color:inherit;font-weight:600}
.banner.info{background:var(--info-soft);color:var(--info-text);border-bottom-color:color-mix(in srgb,var(--info) 25%,transparent)}
.banner.warn{}
.alert{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:var(--r-md);font-size:var(--fs-sm);border:1px solid var(--border);background:var(--surface-2);color:var(--text)}
.alert .ic{margin-top:2px}
.alert.bad{background:var(--bad-soft);border-color:color-mix(in srgb,var(--bad) 30%,transparent);color:var(--bad-text)}
.alert.ok{background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 30%,transparent);color:var(--ok-text)}
.alert.warn{background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 30%,transparent);color:var(--warn-text)}
.alert.info{background:var(--info-soft);border-color:color-mix(in srgb,var(--info) 30%,transparent);color:var(--info-text)}
.alert a{color:inherit;font-weight:600}
.mres{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:var(--r-md);margin-top:var(--s3);overflow-wrap:anywhere;font-size:var(--fs-sm);border:1px solid}
.mres .ic{margin-top:2px}
.mres.ok{background:var(--ok-soft);color:var(--ok-text);border-color:color-mix(in srgb,var(--ok) 30%,transparent)}
.mres.bad{background:var(--bad-soft);color:var(--bad-text);border-color:color-mix(in srgb,var(--bad) 30%,transparent)}
.mres code{background:transparent}

/* ---------- estados vacíos y esqueletos ---------- */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;padding:var(--s10) var(--s4);color:var(--text-2)}
.empty .em-ic{width:40px;height:40px;border-radius:var(--r-lg);display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--border);color:var(--text-3);margin-bottom:6px}
.empty .em-ic .ic{width:20px;height:20px}
.empty b{color:var(--text);font-weight:600;font-size:var(--fs-sm)}
.empty span{font-size:var(--fs-xs);max-width:360px}
.empty.sm{padding:var(--s6) var(--s3)}
td.empty-td{padding:0!important}
.skel{display:block;border-radius:var(--r-sm);background:linear-gradient(90deg,var(--surface-2) 0%,var(--surface-3) 40%,var(--surface-2) 80%);background-size:200% 100%;animation:shimmer 1.3s linear infinite}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
.skel-wrap{display:flex;flex-direction:column;gap:var(--s4)}
.skel-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:var(--s3)}
.skel-card{height:112px;border-radius:var(--r-lg)}
.skel-line{height:12px;margin:10px 0}
.skel-block{height:280px;border-radius:var(--r-lg)}

/* ---------- KPI ---------- */
.kpi{padding:var(--s4) var(--s5);display:flex;flex-direction:column;gap:2px;position:relative;overflow:hidden}
.kpi .l{order:-1;color:var(--text-2);font-size:var(--fs-xs);font-weight:500;display:flex;align-items:center;gap:6px;text-transform:none;letter-spacing:0}
.kpi .l .ic{width:14px;height:14px;color:var(--text-3)}
.kpi .v{font-size:var(--fs-3xl);font-weight:600;letter-spacing:-.02em;line-height:1.15;overflow-wrap:anywhere;margin-top:6px;color:var(--text)}
.kpi .v a{color:inherit;text-decoration:none}
.kpi .v small{font-size:var(--fs-md);font-weight:500;color:var(--text-2);margin-left:2px;letter-spacing:0}
.kpi .s{color:var(--text-2);font-size:var(--fs-xs);display:flex;gap:6px;align-items:center;flex-wrap:wrap;min-height:18px}
.kpi.sm .v{font-size:var(--fs-2xl)}
.kpi .spark{height:34px;margin-top:8px;margin-bottom:-4px}
.kpi .spark svg{display:block;width:100%;height:100%;overflow:visible}
.delta{display:inline-flex;align-items:center;gap:2px;font-weight:600;font-size:var(--fs-2xs);padding:1px 6px;border-radius:var(--r-full);background:var(--surface-3);color:var(--text-2)}
.delta .ic{width:11px;height:11px}
.delta.up{background:var(--ok-soft);color:var(--ok-text)}.delta.down{background:var(--bad-soft);color:var(--bad-text)}
.delta.up.inv{background:var(--bad-soft);color:var(--bad-text)}.delta.down.inv{background:var(--ok-soft);color:var(--ok-text)}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:var(--s3)}
.stat-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);overflow:hidden;box-shadow:var(--sh-1)}
.stat-strip>div{padding:var(--s4) var(--s5);border-left:1px solid var(--border);min-width:0}
.stat-strip>div:first-child{border-left:0}
.stat-strip .l{font-size:var(--fs-xs);color:var(--text-2);display:flex;gap:6px;align-items:center}
.stat-strip .l .ic{width:14px;height:14px;color:var(--text-3)}
.stat-strip .v{font-size:var(--fs-xl);font-weight:600;margin-top:4px;font-variant-numeric:tabular-nums}
.stat-strip .v a{color:inherit;text-decoration:none}.stat-strip .v a:hover{color:var(--accent-text)}
.stat-strip .s{font-size:var(--fs-xs);color:var(--text-3)}

/* ---------- tablas ---------- */
.tbl{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface)}
.card>.tbl,.card .tbl{margin:0}
.tbl table{min-width:600px}
.tbl.narrow table{min-width:0}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-sm)}
th,td{padding:9px 12px;border-bottom:1px solid var(--border);text-align:left;vertical-align:middle}
tr:last-child>td{border-bottom:0}
th{position:sticky;top:0;z-index:1;background:var(--surface-2);color:var(--text-2);font-weight:500;font-size:var(--fs-xs);white-space:nowrap;letter-spacing:.01em;border-bottom:1px solid var(--border)}
th:first-child{border-top-left-radius:var(--r-md)}th:last-child{border-top-right-radius:var(--r-md)}
th.num{text-align:right}
th[data-s]{cursor:pointer;user-select:none}
th[data-s] .sorti{position:absolute;top:50%;transform:translateY(-50%);display:inline-flex;margin-left:3px;color:var(--text-3);opacity:0;transition:opacity var(--t-fast)}
th[data-s] .sorti .ic{width:12px;height:12px}
th[data-s]:hover{color:var(--text)}th[data-s]:hover .sorti{opacity:1}
th.sorted{color:var(--text)}th.sorted .sorti{opacity:1;color:var(--accent-text)}
tbody tr{transition:background var(--t-fast)}
tbody tr:hover>td{background:var(--surface-2)}
tr.click{cursor:pointer}
tr.sel>td{background:var(--accent-soft)!important}
tr.sel>td:first-child{box-shadow:inset 2px 0 var(--accent)}
td .row{display:flex;gap:6px;flex-wrap:wrap}
td.nw,th.nw{white-space:nowrap}
td a{color:var(--text);font-weight:500;text-decoration:none}
td a:hover{color:var(--accent-text);text-decoration:underline}
td .sub,.cell-sub{display:block;color:var(--text-2);font-size:var(--fs-xs);margin-top:1px}
td.muted{color:var(--text-2)}
td.act{width:1%;white-space:nowrap;text-align:right}
.who{display:flex;align-items:center;gap:10px;min-width:0}
.avatar{width:26px;height:26px;border-radius:50%;display:inline-grid;place-items:center;font-size:10.5px;font-weight:600;color:#fff;flex:none;letter-spacing:0;text-transform:uppercase}
.avatar.lg{width:44px;height:44px;font-size:15px}
.who .nm{font-weight:500;color:var(--text);overflow:hidden;text-overflow:ellipsis}
.tags{display:inline-flex;gap:4px;flex-wrap:wrap;vertical-align:middle}
tr.mod td:first-child{box-shadow:inset 2px 0 var(--accent)}
.rmenu{position:relative;display:inline-flex}

/* ---------- menús emergentes ---------- */
.menu.pop{position:fixed;z-index:60;min-width:200px;max-width:min(320px,calc(100vw - 16px));background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r-lg);box-shadow:var(--sh-3);padding:4px;display:flex;flex-direction:column;animation:pop var(--t) var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
.menu.pop>button,.menu.pop>a{justify-content:flex-start;width:100%;border:0;background:transparent;box-shadow:none;padding:6px 10px;min-height:32px;border-radius:var(--r-sm);color:var(--text);font-weight:400;text-decoration:none;font-size:var(--fs-sm)}
.menu.pop>button .ic,.menu.pop>a .ic{color:var(--text-3)}
.menu.pop>button:hover,.menu.pop>a:hover,.menu.pop>button:focus-visible,.menu.pop>a:focus-visible{background:var(--surface-2);box-shadow:none}
.menu.pop>button.danger,.menu.pop>button.danger-item{color:var(--bad-text)}
.menu.pop>button.danger .ic,.menu.pop>button.danger-item .ic{color:currentColor}
.menu.pop>button.danger:hover{background:var(--bad-soft)}
.menu-sep{height:1px;background:var(--border);margin:4px -4px}
.menu-lbl{font-size:var(--fs-2xs);color:var(--text-3);padding:6px 10px 4px;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.menu-head{padding:8px 10px;display:flex;flex-direction:column;gap:2px}
.menu-head b{font-weight:600}
.menu .seg{margin:0 6px 4px}

/* ---------- paginación ---------- */
.pager{display:flex;gap:var(--s2);align-items:center;justify-content:flex-end;margin-top:var(--s3);flex-wrap:wrap}
.pager .muted{margin-right:auto;font-size:var(--fs-xs)}
.pager .pg{font-size:var(--fs-xs);color:var(--text-2);font-variant-numeric:tabular-nums;padding:0 4px}

/* ---------- filtros ---------- */
.filters{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:flex-end;margin-bottom:var(--s4)}
.filters label{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-xs);color:var(--text-2);font-weight:500;min-width:0}
.filters input[type=search],.filters .grow{flex:1;min-width:160px}
.filters label.chk{flex-direction:row;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--text);padding-bottom:8px}
.toolbar{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}

/* ---------- gráficos ---------- */
.chart{position:relative;height:180px;touch-action:pan-y}
.chart.lg{height:260px}
.chart svg{display:block;width:100%;height:100%;overflow:visible}
.chart .ax{fill:var(--text-3);font-size:10.5px;font-family:var(--font);font-variant-numeric:tabular-nums}
.chart .gl{stroke:var(--border);stroke-width:1;stroke-dasharray:2 4}
.chart .gl.base{stroke:var(--border-2);stroke-dasharray:none}
.chart .ln{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart .bx{fill:var(--accent);opacity:.85;transition:opacity var(--t-fast)}
.chart .bx.hl{opacity:1}
.chart.hov .bx:not(.hl){opacity:.4}
.chart .ch{stroke:var(--text-3);stroke-width:1;stroke-dasharray:3 3}
.chart .dot{fill:var(--accent);stroke:var(--surface);stroke-width:2}
.chart .tip{position:absolute;top:0;pointer-events:none;background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r-md);padding:6px 10px;font-size:var(--fs-xs);white-space:nowrap;box-shadow:var(--sh-2);transform:translate(-50%,-100%);z-index:2;display:flex;flex-direction:column;gap:2px}
.chart .tip .t{color:var(--text-2)}
.chart .tip .val{display:flex;align-items:center;gap:6px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text)}
.chart .tip .val i{width:8px;height:8px;border-radius:2px;background:var(--accent)}
.chart-empty{height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;color:var(--text-3);font-size:var(--fs-xs);border:1px dashed var(--border);border-radius:var(--r-md)}
.ctitle{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s3);margin-bottom:var(--s4)}
.ctitle b{font-size:var(--fs-sm);font-weight:500;color:var(--text-2);display:flex;align-items:center;gap:6px}
.ctitle b .ic{width:14px;height:14px;color:var(--text-3)}
.ctitle span{font-size:var(--fs-xl);font-weight:600;font-variant-numeric:tabular-nums;color:var(--text);line-height:1.2}
.ctitle .big{display:flex;flex-direction:column;gap:2px}
.ctitle .big span{font-size:var(--fs-2xl)}
.ctitle .seg{flex:none}
.legend{display:flex;gap:var(--s4);flex-wrap:wrap;font-size:var(--fs-xs);color:var(--text-2)}
.sw{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px;box-shadow:0 0 0 1px rgba(0,0,0,.25) inset}

/* barra de progreso */
.bar{height:6px;background:var(--surface-3);border-radius:var(--r-full);overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);border-radius:var(--r-full);transition:width .4s var(--ease)}
.bar.warn i{background:var(--warn)}.bar.bad i{background:var(--bad)}.bar.ok i{background:var(--ok)}

/* salud */
.health{display:flex;flex-direction:column;gap:var(--s4)}
.hrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:baseline;font-size:var(--fs-sm)}
.hrow .k{color:var(--text-2);display:flex;align-items:center;gap:8px}
.hrow .k .ic{width:14px;height:14px;color:var(--text-3)}
.hrow .v{font-variant-numeric:tabular-nums;font-weight:500;text-align:right}
.hrow .bar{grid-column:1/-1}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);display:inline-block;box-shadow:0 0 0 3px var(--ok-soft);flex:none}
.status-dot.warn{background:var(--warn);box-shadow:0 0 0 3px var(--warn-soft)}.status-dot.bad{background:var(--bad);box-shadow:0 0 0 3px var(--bad-soft)}
.status-dot.live{animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 5px transparent}}

/* feed de actividad */
.feed{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.feed li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);align-items:start;font-size:var(--fs-sm)}
.feed li:last-child{border-bottom:0}
.feed .fi{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--border);color:var(--text-2)}
.feed .fi .ic{width:13px;height:13px}
.feed .fi.bad{color:var(--bad-text);background:var(--bad-soft);border-color:transparent}
.feed .ft{min-width:0;overflow-wrap:anywhere;line-height:1.4;padding-top:4px}
.feed .ft b{font-weight:600}
.feed .ft .sub{display:block;color:var(--text-2);font-size:var(--fs-xs);margin-top:1px}
.feed .fw{color:var(--text-3);font-size:var(--fs-xs);white-space:nowrap;padding-top:5px}

/* ---------- consola de registro ---------- */
.logs{font-family:var(--mono);font-size:12px;line-height:1.7;max-height:calc(100vh - 230px);min-height:300px;overflow:auto;background:var(--field);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s3) var(--s4);white-space:pre-wrap;overflow-wrap:anywhere;color:var(--text)}
.logs .muted{color:var(--text-3)}
.logs .ll{display:block;padding:0 4px;border-radius:3px}.logs .ll:hover{background:var(--surface-2)}

/* =====================================================================
   Estructura: barra lateral + barra superior + contenido
   ===================================================================== */
#app{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);min-height:100vh;transition:grid-template-columns var(--t) var(--ease)}
.side-min #app{grid-template-columns:var(--side-min) minmax(0,1fr)}
#side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;border-right:1px solid var(--border);background:var(--bg-side);z-index:20;min-width:0}
.brand{display:flex;align-items:center;gap:10px;height:var(--top-h);padding:0 var(--s4);border-bottom:1px solid var(--border);flex:none;min-width:0;overflow:hidden}
.brand .logo{width:26px;height:26px;flex:none}
.wordmark{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.wordmark b{font-size:13px;font-weight:700;letter-spacing:.14em;color:var(--text);white-space:nowrap}
.wordmark span{font-size:10px;font-weight:600;letter-spacing:.16em;color:var(--accent-text);text-transform:uppercase;white-space:nowrap}
#nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--s2) var(--s3) var(--s4);display:flex;flex-direction:column;gap:1px;scrollbar-width:thin}
#nav .grp{font-size:var(--fs-2xs);color:var(--text-3);text-transform:uppercase;letter-spacing:.08em;font-weight:600;padding:var(--s4) 10px 6px;white-space:nowrap}
#nav button,.navlink{position:relative;border:0;box-shadow:none;background:transparent;justify-content:flex-start;width:100%;padding:0 10px;min-height:32px;border-radius:var(--r-sm);color:var(--text-2);font-weight:500;font-size:var(--fs-sm);gap:10px;text-decoration:none;display:flex;align-items:center}
#nav button .ic,.navlink .ic{width:16px;height:16px;color:var(--text-3);transition:color var(--t-fast)}
#nav button:hover,.navlink:hover{background:var(--surface-2);color:var(--text)}
#nav button:hover .ic,.navlink:hover .ic{color:var(--text-2)}
#nav button.on{background:var(--surface-3);color:var(--text)}
#nav button.on .ic{color:var(--accent-text)}
#nav button.on::before{content:'';position:absolute;left:-12px;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
#nav .lbl,.navlink .lbl{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-foot{border-top:1px solid var(--border);padding:var(--s2) var(--s3);display:flex;flex-direction:column;gap:1px;flex:none}
/* barra contraída */
.side-min #side .wordmark,.side-min #nav .lbl,.side-min .navlink .lbl,.side-min #nav .grp{display:none}
.side-min .brand{justify-content:center;padding:0}
.side-min #nav{padding:var(--s2) 10px}
.side-min #nav .grp+button{margin-top:13px}
.side-min #nav .grp:first-child+button{margin-top:0}
.side-min #nav button,.side-min .navlink{justify-content:center;padding:0}
.side-min #nav button.on::before{left:-10px}
.side-min #nav .nb{position:absolute;top:2px;right:2px;min-width:16px;height:16px;line-height:16px;font-size:9.5px;padding:0 4px}
.side-min #sideMin .ic{transform:scaleX(-1)}
#body{min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:var(--s3);padding:0 var(--s6);height:var(--top-h);border-bottom:1px solid var(--border);position:sticky;top:0;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);z-index:15}
#menu{display:none}
#crumb{display:flex;align-items:center;gap:6px;min-width:0;flex:1;font-size:var(--fs-sm);white-space:nowrap;overflow:hidden}
#crumb .c-grp{color:var(--text-2)}
#crumb .c-sep{color:var(--text-3);display:flex}#crumb .c-sep .ic{width:14px;height:14px}
#crumb a{color:var(--text-2);text-decoration:none}#crumb a:hover{color:var(--text)}
#crumb .c-cur{color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis}
.search-btn{justify-content:flex-start;width:min(300px,30vw);gap:8px;color:var(--text-3);background:var(--surface);font-weight:400;border-color:var(--border);box-shadow:none}
.search-btn:hover{color:var(--text-2);background:var(--surface);border-color:var(--border-2)}
.search-btn .lbl{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis}
.search-btn kbd{margin-left:auto}
.top-r{display:flex;gap:var(--s2);align-items:center}
.env{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 10px;border-radius:var(--r-full);border:1px solid var(--border);font-size:var(--fs-xs);color:var(--text-2);white-space:nowrap;font-variant-numeric:tabular-nums;background:var(--surface)}
.env b{color:var(--text);font-weight:500;font-family:var(--mono);font-size:11px}
.env .sep{width:1px;height:12px;background:var(--border-2)}
.umenu{position:relative}
.user-btn{gap:8px;padding:2px 8px 2px 2px;border-radius:var(--r-full);background:transparent;border-color:transparent;box-shadow:none;min-height:32px}
.user-btn:hover{background:var(--surface-2);border-color:var(--border)}
.user-btn .nm{font-weight:500;max-width:140px;overflow:hidden;text-overflow:ellipsis}
.user-btn .ic{width:14px;height:14px;color:var(--text-3)}
main{padding:var(--s6) var(--s6) var(--s12);width:100%;max-width:1480px;margin:0 auto;outline:none}
#shade{display:none}
@media (max-width:1023px){
  #app,.side-min #app{grid-template-columns:minmax(0,1fr)}
  #side{position:fixed;left:0;top:0;bottom:0;width:min(280px,86vw);transform:translateX(-100%);transition:transform var(--t) var(--ease),visibility var(--t);box-shadow:var(--sh-3);visibility:hidden}
  #app.nav #side{transform:none;visibility:visible}
  #app.nav #shade{display:block;position:fixed;inset:0;background:var(--scrim);z-index:18;animation:fade var(--t) var(--ease)}
  #menu{display:inline-flex}
  #sideMin{display:none}
  .side-min #side .wordmark,.side-min #nav .lbl,.side-min .navlink .lbl,.side-min #nav .grp{display:revert}
  .side-min #nav button,.side-min .navlink{justify-content:flex-start;padding:0 10px}
  .side-min .brand{justify-content:flex-start;padding:0 var(--s4)}
  .side-min #nav .nb{position:static}
  .topbar{padding:0 var(--s4)}
  main{padding:var(--s5) var(--s4) var(--s10)}
  .env{display:none}
}
@media (max-width:760px){
  .search-btn{width:32px;min-width:32px;padding:0;justify-content:center}
  .search-btn .lbl,.search-btn kbd{display:none}
  .user-btn .nm,.user-btn>.ic{display:none}
  .user-btn{padding:2px}
  .banner{padding:10px var(--s4)}
}
@media (max-width:520px){main{padding:var(--s4) var(--s3) var(--s10)}.card{padding:var(--s4)}.card-f{margin:var(--s4) calc(-1 * var(--s4)) calc(-1 * var(--s4));padding:var(--s3) var(--s4)}.topbar{gap:var(--s2)}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ---------- capas: modal, paleta, cajón ---------- */
.overlay{position:fixed;inset:0;background:var(--scrim);display:flex;align-items:center;justify-content:center;padding:var(--s4);z-index:50;animation:fade var(--t) var(--ease);backdrop-filter:blur(2px)}
.overlay.top{align-items:flex-start;padding-top:12vh}
.dialog{width:min(480px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r-xl);box-shadow:var(--sh-3);padding:var(--s6);animation:rise var(--t) var(--ease)}
@keyframes rise{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
.dialog-head{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4)}
.dialog-head h2{margin:0;font-size:var(--fs-lg);flex:1;min-width:0;overflow-wrap:anywhere}
.dialog-ic{width:36px;height:36px;border-radius:var(--r-full);display:grid;place-items:center;flex:none;background:var(--accent-soft);color:var(--accent-text)}
.dialog-ic:empty{display:none}
.dialog-ic.bad{background:var(--bad-soft);color:var(--bad-text)}
.dialog-ic .ic{width:18px;height:18px}
.dialog .err{margin-top:var(--s3)}
.dialog-foot{display:flex;gap:var(--s2);justify-content:flex-end;margin-top:var(--s6);flex-wrap:wrap}
#mBody .note{margin:0;color:var(--text-2);font-size:var(--fs-sm);line-height:1.55}
#mBody .note b{color:var(--text)}
.palette{width:min(640px,100%);background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r-xl);box-shadow:var(--sh-3);overflow:hidden;animation:rise var(--t) var(--ease);display:flex;flex-direction:column;max-height:min(560px,76vh)}
.pal-in{display:flex;align-items:center;gap:10px;padding:0 var(--s4);border-bottom:1px solid var(--border);color:var(--text-3)}
.pal-in .ic{width:18px;height:18px}
.pal-in input{flex:1;border:0;background:transparent;box-shadow:none!important;font-size:var(--fs-lg);padding:16px 0;min-height:56px;color:var(--text)}
.pal-list{overflow-y:auto;padding:var(--s2);flex:1}
.pal-grp{font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.07em;color:var(--text-3);font-weight:600;padding:10px 10px 6px}
.pal-it{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:var(--r-md);cursor:pointer;color:var(--text);font-size:var(--fs-sm)}
.pal-it .ic{width:16px;height:16px;color:var(--text-3)}
.pal-it .pi{width:28px;height:28px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--border);flex:none}
.pal-it .pt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pal-it .pt small{color:var(--text-2);margin-left:6px}
.pal-it .pk{color:var(--text-3);font-size:var(--fs-xs)}
.pal-it[aria-selected="true"]{background:var(--surface-2)}
.pal-it[aria-selected="true"] .pi{border-color:var(--accent-line);color:var(--accent-text)}
.pal-it[aria-selected="true"] .pi .ic{color:var(--accent-text)}
.pal-foot{display:flex;gap:var(--s4);padding:8px var(--s4);border-top:1px solid var(--border);font-size:var(--fs-xs);color:var(--text-3);background:var(--surface-2)}
.pal-foot kbd{margin-right:3px}
.pal-none{padding:var(--s8);text-align:center;color:var(--text-2);font-size:var(--fs-sm)}
.pal-in kbd{flex:none}
@media (max-width:520px){.overlay.top{padding-top:var(--s4)}.pal-foot{display:none}}

#drawer{position:fixed;top:0;right:0;bottom:0;width:min(520px,100%);background:var(--surface);border-left:1px solid var(--border-2);box-shadow:var(--sh-3);z-index:30;transform:translateX(105%);transition:transform .24s var(--ease),visibility .24s;display:flex;flex-direction:column;visibility:hidden}
#drawer.open{transform:none;visibility:visible}
.dhead{display:flex;align-items:center;gap:var(--s2);padding:0 var(--s4) 0 var(--s5);height:var(--top-h);border-bottom:1px solid var(--border);flex:none}
.dhead b{font-family:var(--mono);font-size:var(--fs-sm);color:var(--text-2);font-weight:500}
.dbody{padding:var(--s5);overflow-y:auto;flex:1;min-height:0}
.dbody h2{margin:0 0 var(--s3);overflow-wrap:anywhere;font-size:var(--fs-xl);line-height:1.3}
.dbody h3{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.07em;color:var(--text-2);margin:var(--s6) 0 var(--s3)}
.dbody .banner{border-radius:var(--r-md);margin:var(--s3) 0 0;border:0}
#drawer a{color:var(--accent-text)}
.dtext{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s3) var(--s4);margin:var(--s4) 0;font-size:var(--fs-sm);line-height:1.6}
.hist{display:flex;flex-direction:column;gap:0;font-size:var(--fs-xs);border-left:1px solid var(--border-2);margin-left:5px}
.hist div{overflow-wrap:anywhere;position:relative;padding:4px 0 8px 16px}
.hist div::before{content:'';position:absolute;left:-4px;top:9px;width:7px;height:7px;border-radius:50%;background:var(--surface);border:1.5px solid var(--text-3)}
.hist div:first-child::before{border-color:var(--accent);background:var(--accent)}

/* ---------- avisos emergentes (toasts) ---------- */
#toasts{position:fixed;top:calc(var(--top-h) + 12px);right:16px;z-index:70;display:flex;flex-direction:column;gap:8px;width:min(380px,calc(100vw - 32px));pointer-events:none}
.toast{pointer-events:auto;display:flex;gap:10px;align-items:flex-start;background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r-lg);box-shadow:var(--sh-3);padding:12px 12px 12px 14px;font-size:var(--fs-sm);animation:tin .22s var(--ease);position:relative;overflow:hidden}
.toast.out{animation:tout .18s var(--ease) forwards}
@keyframes tin{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes tout{to{opacity:0;transform:translateX(16px)}}
.toast .ti{color:var(--ok-text);display:flex;margin-top:1px}
.toast.bad .ti{color:var(--bad-text)}
.toast.warn .ti{color:var(--warn-text)}
.toast .tt{flex:1;min-width:0;overflow-wrap:anywhere;line-height:1.45;padding-top:1px}
.toast .tx{width:24px;height:24px;min-height:0;padding:0;border:0;background:transparent;box-shadow:none;color:var(--text-3);margin:-2px -2px 0 0}
.toast .tx:hover{color:var(--text);background:var(--surface-2)}
.toast .tbar{position:absolute;left:0;bottom:0;height:2px;background:var(--ok);opacity:.6;animation:tbar linear forwards}
.toast.bad .tbar{background:var(--bad)}.toast.warn .tbar{background:var(--warn)}
@keyframes tbar{from{width:100%}to{width:0}}
@media (max-width:520px){#toasts{top:auto;bottom:16px;right:16px;left:16px;width:auto}}

/* tooltips */
[data-tip]{position:relative}
.tip-pop{position:fixed;z-index:90;background:var(--text);color:var(--bg);padding:4px 8px;border-radius:var(--r-sm);font-size:var(--fs-xs);font-weight:500;white-space:nowrap;pointer-events:none;box-shadow:var(--sh-2);animation:fade .12s}

/* =====================================================================
   Acceso
   ===================================================================== */
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--s6) var(--s4);position:relative;overflow:hidden;isolation:isolate}
.auth::before{content:'';position:absolute;inset:0;z-index:-2;background:radial-gradient(900px 520px at 50% -10%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 70%),radial-gradient(700px 500px at 100% 100%,var(--olive-soft),transparent 70%),var(--bg)}
.auth::after{content:'';position:absolute;inset:0;z-index:-1;background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 30%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 30%,transparent 80%)}
.auth-wrap{width:min(400px,100%);display:flex;flex-direction:column;align-items:center;gap:var(--s6)}
.auth-brand{display:flex;align-items:center;gap:12px}
.auth-brand .logo{width:40px;height:40px;filter:drop-shadow(0 4px 14px rgba(214,176,74,.25))}
.auth-brand .wordmark b{font-size:17px;letter-spacing:.2em}
.auth-brand .wordmark span{font-size:10.5px}
.auth-card{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--sh-3);padding:var(--s8);display:flex;flex-direction:column;gap:var(--s5)}
.auth-head h1{font-size:var(--fs-2xl);margin-bottom:4px}
.auth-head p{margin:0;font-size:var(--fs-sm)}
.auth-card input{min-height:40px;font-size:var(--fs-md)}
.auth-note{margin:0;font-size:var(--fs-xs);color:var(--text-2);line-height:1.6;padding-top:var(--s4);border-top:1px solid var(--border)}
.auth-foot{font-size:var(--fs-xs);color:var(--text-3);margin:0}
.auth-card .alert{margin:0}
@media (max-width:520px){.auth-card{padding:var(--s6) var(--s5)}}

/* =====================================================================
   Vistas
   ===================================================================== */
/* permisos por rol: .w = moderador o más, .ws = sólo superadmin */
body[data-role="observador"] .w,body[data-role="observador"] .ws,body[data-role="moderador"] .ws{display:none!important}

/* resumen */
.ov-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--s4);align-items:stretch}
@media (max-width:1180px){.ov-grid{grid-template-columns:minmax(0,1fr)}}
.ov-side{display:flex;flex-direction:column;gap:var(--s4)}
.mini-charts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
@media (max-width:1180px){.mini-charts{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}}
.mini-charts .chart{height:120px}
.ann{display:flex;gap:var(--s2);align-items:center}
.ann input{flex:1}

/* salas */
.roomc{margin-bottom:var(--s4);padding:0;overflow:hidden}
.roomh{display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;padding:var(--s4) var(--s5);align-items:flex-start}
.roomh .rt{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:var(--fs-md)}
.roomh .rt b{font-weight:600}
.roomh .rt .ic{color:var(--accent-text)}
.rmeta{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px;font-size:var(--fs-xs);color:var(--text-2)}
.rmeta span{display:inline-flex;gap:5px;align-items:center}
.rmeta .ic{width:13px;height:13px;color:var(--text-3)}
.roomc .tbl{border:0;border-top:1px solid var(--border);border-radius:0}
.roomc th{border-radius:0!important}
.room-add{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap;padding:var(--s3) var(--s5);border-top:1px solid var(--border);background:var(--surface-2)}
.slot-free{color:var(--text-3);font-style:italic}
/* control en vivo */
.live{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s4);align-items:start}
@media (max-width:1180px){.live{grid-template-columns:minmax(0,1fr)}}
.mapc{padding:0;overflow:hidden}
.map-h{display:flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--s4);border-bottom:1px solid var(--border);font-size:var(--fs-sm)}
.map-h b{font-weight:600}
.map-frame{padding:var(--s4);background:repeating-linear-gradient(45deg,transparent 0 8px,var(--grid-line) 8px 9px),var(--surface-2)}
.mapc canvas{display:block;width:100%;max-width:640px;height:auto;margin:0 auto;border-radius:var(--r-sm);image-rendering:pixelated;box-shadow:0 0 0 1px var(--border-2),var(--sh-2)}
#lLeg{padding:var(--s3) var(--s4);border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:6px 16px;font-size:var(--fs-xs);color:var(--text-2)}
.live-bar{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;padding:var(--s2);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-1);margin-bottom:var(--s4)}
.live-bar .vsep{width:1px;height:20px;background:var(--border);margin:0 4px}
.live-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;margin-bottom:var(--s4)}
.live-stats>div{background:var(--surface);padding:10px 14px}
.live-stats .l{font-size:var(--fs-2xs);color:var(--text-2);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.live-stats .v{font-size:var(--fs-lg);font-weight:600;font-variant-numeric:tabular-nums;margin-top:2px}
.pr td{border-bottom:0;padding-bottom:4px}
.acts td{padding-top:0}
.acts .row{gap:4px}
.acts td{border-bottom:1px solid var(--border)}
.pwr.err{color:var(--bad-text)}

/* chat */
.chatl{display:flex;flex-direction:column}
.chatl .ln{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:10px;padding:8px 6px;border-bottom:1px solid var(--border);align-items:start;font-size:var(--fs-sm);border-radius:var(--r-sm)}
.chatl .ln:last-child{border-bottom:0}
.chatl .ln:hover{background:var(--surface-2)}
.chatl .tm{font-family:var(--mono);font-size:11px;color:var(--text-3);padding-top:2px}
.chatl .tx{overflow-wrap:anywhere;line-height:1.5}
.chatl .rm{display:inline-block;font-size:var(--fs-2xs);color:var(--text-2);background:var(--surface-3);border-radius:var(--r-xs);padding:0 5px;margin-right:6px;vertical-align:1px}
.chatl .au{font-weight:600;color:var(--accent-text);cursor:pointer}
.chatl .au:hover{text-decoration:underline}
.chatl .ln.blk .tx{color:var(--text-3);text-decoration:line-through}
.chatl .ln .row{opacity:.85}
@media (max-width:520px){.chatl .ln{grid-template-columns:minmax(0,1fr) auto}.chatl .tm{grid-column:1/-1}}
#cList{max-height:calc(100vh - 260px);min-height:240px;overflow:auto;margin:0 calc(-1 * var(--s2))}

/* equilibrio */
.wpn{display:flex;flex-direction:column;gap:6px;min-width:230px}
.wpn .wl{font-size:var(--fs-2xs);color:var(--text-2);font-weight:500}
.wpn .wi{display:flex;gap:4px}
.wpn input,.bal input{width:76px;min-height:28px;padding:3px 8px;font-size:var(--fs-xs);border-radius:var(--r-sm)}
.bal td{vertical-align:top}

/* ejércitos */
.armies{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:var(--s3)}
.army{padding:var(--s4);display:flex;flex-direction:column;gap:4px;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.army .ah{display:flex;align-items:center;gap:8px;justify-content:space-between}
.army .ah b{font-size:var(--fs-md)}
.army[data-ed]{cursor:pointer}
.army[data-ed]:hover{border-color:var(--border-2);box-shadow:var(--sh-2)}
.army.sel{border-color:var(--accent);box-shadow:var(--ring)}
.army.add{align-items:center;justify-content:center;color:var(--text-2);font-weight:500;min-height:110px;border-style:dashed;background:transparent;box-shadow:none;flex-direction:row;gap:8px}
.army.add:hover{color:var(--accent-text);border-color:var(--accent-line)}

/* sugerencias */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--s4)}
.chip{padding:3px 4px 3px 4px;border-radius:var(--r-full);gap:8px;min-height:30px;box-shadow:none;background:var(--surface)}
.chip b{font-variant-numeric:tabular-nums;font-weight:600;font-size:var(--fs-xs);padding-right:6px;color:var(--text)}
.chip .pill{height:22px}
.chip.on{border-color:var(--accent);background:var(--accent-soft)}
.chip>.ic{margin-left:6px;color:var(--text-2)}
.road{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:var(--s4);align-items:start}
.rcol{padding:var(--s4);background:var(--surface-2)}
.rcol h3{margin:0 0 var(--s3);display:flex;gap:8px;align-items:center}
.rver{margin-bottom:var(--s3)}
.rver>b{font-size:var(--fs-xs);color:var(--text-2);font-weight:600;display:inline-block;margin-bottom:6px}
.ritem{padding:8px 10px;border-radius:var(--r-md);cursor:pointer;font-size:var(--fs-sm);overflow-wrap:anywhere;background:var(--surface);border:1px solid var(--border);margin-bottom:6px;box-shadow:var(--sh-1);display:flex;gap:6px;align-items:baseline;transition:border-color var(--t-fast)}
.ritem:hover{border-color:var(--accent-line)}
.ritem .rn{font-family:var(--mono);font-size:11px;color:var(--text-3)}
.ritem .rv{margin-left:auto;color:var(--text-2);font-size:var(--fs-xs);white-space:nowrap;display:inline-flex;gap:2px;align-items:center}
.ritem .rv .ic{width:12px;height:12px}
a.kl{color:inherit;text-decoration:none}a.kl:hover{color:var(--accent-text)}
.votes{display:inline-flex;align-items:center;gap:3px;font-weight:600}.votes .ic{width:12px;height:12px;color:var(--text-3)}

/* correo: cliente de tres paneles */
.wm{display:grid;grid-template-columns:220px minmax(300px,380px) minmax(0,1fr);height:calc(100vh - var(--top-h) - 150px);min-height:520px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);overflow:hidden;box-shadow:var(--sh-1)}
.wm>.card{padding:0;min-width:0;border:0;border-radius:0;box-shadow:none;display:flex;flex-direction:column;min-height:0}
.wmf{background:var(--bg-side);border-right:1px solid var(--border)!important;padding:var(--s3)!important;gap:2px;overflow-y:auto}
.wmf #wmAcc{padding:4px 8px 10px;display:flex;flex-direction:column;gap:4px;border-bottom:1px solid var(--border);margin-bottom:8px;overflow-wrap:anywhere}
.wmf #wmAcc b{color:var(--text);font-weight:600;font-size:var(--fs-sm)}
.wmf .compose{margin-bottom:10px}
.wmfb{border:0;box-shadow:none;background:none;width:100%;justify-content:space-between;padding:0 8px;min-height:32px;color:var(--text-2);font-weight:500;border-radius:var(--r-sm)}
.wmfb>span:first-child{display:flex;align-items:center;gap:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wmfb .ic{color:var(--text-3)}
.wmfb:hover{background:var(--surface-2);color:var(--text)}
.wmfb.on{background:var(--surface-3);color:var(--text)}
.wmfb.on .ic{color:var(--accent-text)}
.wmfb .cnt{color:var(--text-3);font-size:var(--fs-xs);font-variant-numeric:tabular-nums}
.wml{border-right:1px solid var(--border)!important}
.wmt{display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding:var(--s3);border-bottom:1px solid var(--border);flex:none}
.wmt input[type=search]{flex:1;min-width:120px}
.wmt select{max-width:100%}
.wmt .chk{font-size:var(--fs-xs);gap:6px;color:var(--text-2)}
.wmfs{display:none}
#wmList{overflow-y:auto;flex:1;min-height:0}
#wmList .pager{padding:var(--s2) var(--s3);margin:0;border-top:1px solid var(--border)}
.mrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:10px 14px 10px 16px;border-bottom:1px solid var(--border);cursor:pointer;position:relative;transition:background var(--t-fast)}
.mrow:hover{background:var(--surface-2)}
.mrow:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--accent)}
.mrow.sel{background:var(--accent-soft)}
.mrow .mfrom{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-sm);color:var(--text-2)}
.mrow .mdate{color:var(--text-3);font-size:var(--fs-xs);white-space:nowrap;font-variant-numeric:tabular-nums}
.mrow .msubj{grid-column:1/-1;color:var(--text-2);font-size:var(--fs-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;gap:6px;align-items:center}
.mrow .msubj .ic{width:12px;height:12px;flex:none}
.mrow .msubj .st{color:var(--warn-text)}
.mrow.unr .mfrom{font-weight:600;color:var(--text)}
.mrow.unr .msubj{color:var(--text)}
.mrow.unr::before{content:'';position:absolute;left:6px;top:16px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.wmr{overflow-y:auto;padding:var(--s5) var(--s6)!important}
.wmr>.empty{height:100%}
.mhd{display:flex;gap:var(--s2);align-items:flex-start}
.mhd h2{margin:0 0 var(--s3);font-size:var(--fs-xl);line-height:1.3;overflow-wrap:anywhere}
.msender{display:flex;align-items:center;gap:12px;margin-bottom:var(--s3)}
.msender .avatar{width:36px;height:36px;font-size:13px}
.msender .mi{flex:1;min-width:0;font-size:var(--fs-sm)}
.msender .mi b{font-weight:600}
.msender .mi .muted{font-size:var(--fs-xs)}
.wmback{display:none}
.mact{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:var(--s3) 0 var(--s4);padding-bottom:var(--s4);border-bottom:1px solid var(--border)}
.mimg{border-radius:var(--r-md);margin:0 0 var(--s3);display:flex;gap:8px;align-items:center;flex-wrap:wrap;border:0}
.matt{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--s3)}
.mframe{display:block;width:100%;height:300px;border:1px solid var(--border);border-radius:var(--r-md);background:#fff}
.mtext{margin:0;font-family:var(--font);font-size:var(--fs-sm)}
.wm details summary{font-size:var(--fs-xs)}
@media (max-width:1180px){
  .wm{grid-template-columns:minmax(0,1fr);height:auto;min-height:0;overflow:visible}
  .wmf{display:none!important}
  .wmfs{display:inline-block}
  .wm.read .wml{display:none!important}
  .wm:not(.read) .wmr{display:none!important}
  .wmback{display:inline-flex}
  .wml{border-right:0!important}
  .wmt{position:sticky;top:var(--top-h);background:var(--surface);z-index:2}
  #wmList{overflow:visible}
  .wmr{padding:var(--s4)!important}
}
#mcomp{position:fixed;inset:0;background:var(--scrim);display:flex;align-items:center;justify-content:center;padding:var(--s4);z-index:45;animation:fade var(--t)}
#mcomp form{width:min(720px,100%);max-height:calc(100vh - 32px);overflow:auto;box-shadow:var(--sh-3);border-radius:var(--r-xl);padding:0;animation:rise var(--t) var(--ease)}
#mcomp .lhead{margin:0;padding:var(--s3) var(--s4) var(--s3) var(--s5);border-bottom:1px solid var(--border)}
#mcomp .lhead h2{font-size:var(--fs-md)}
#mcomp .form{padding:var(--s5);gap:var(--s3)}
#mcomp .err{padding:0 var(--s5)}
#mcomp .row.end{padding:var(--s3) var(--s5);border-top:1px solid var(--border);background:var(--surface-2)}
#mcomp textarea{min-height:220px}
@media (max-width:520px){#mcomp{padding:0}#mcomp form{max-height:100vh;height:100%;border-radius:0}}
.mlist{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;color:var(--text-2)}
.mlist b{color:var(--text)}
/* entregabilidad */
.dck{display:flex;flex-direction:column}
.dci{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;padding:12px 2px;border-bottom:1px solid var(--border)}
.dci:last-child{border-bottom:0}
.dci .dot{width:20px;height:20px;border-radius:50%;margin-top:0;display:grid;place-items:center;background:var(--surface-3);color:var(--text-2)}
.dci .dot .ic{width:12px;height:12px;stroke-width:3}
.dci.ok .dot{background:var(--ok-soft);color:var(--ok-text)}.dci.warn .dot{background:var(--warn-soft);color:var(--warn-text)}.dci.bad .dot{background:var(--bad-soft);color:var(--bad-text)}
.dcb{min-width:0;font-size:var(--fs-sm);display:flex;flex-direction:column;gap:4px}
.dcb>b{font-weight:600}
.dcb code{overflow-wrap:anywhere;white-space:normal}
.dfix{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.score{display:flex;gap:6px;flex-wrap:wrap}

/* tablas → tarjetas en móvil */
@media (max-width:640px){
  .tbl:not(.keep){border:0;background:transparent;overflow:visible}
  .tbl:not(.keep) table{min-width:0!important}
  .tbl:not(.keep) table,.tbl:not(.keep) tbody,.tbl:not(.keep) tr,.tbl:not(.keep) td{display:block;width:100%}
  .tbl:not(.keep) tr:first-child:has(th),.tbl:not(.keep) thead{display:none}
  .tbl:not(.keep) tr{border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);margin-bottom:var(--s2);padding:6px 0;box-shadow:var(--sh-1)}
  .tbl:not(.keep) td{border:0;padding:5px 14px;display:grid;grid-template-columns:minmax(90px,38%) minmax(0,1fr);gap:10px;text-align:left!important;align-items:center}
  .tbl:not(.keep) td::before{content:attr(data-label);color:var(--text-2);font-size:var(--fs-xs);font-weight:500}
  .tbl:not(.keep) td:not([data-label]),.tbl:not(.keep) td[data-label=""]{grid-template-columns:minmax(0,1fr)}
  .tbl:not(.keep) td:not([data-label])::before,.tbl:not(.keep) td[data-label=""]::before{display:none}
  .tbl:not(.keep) td:first-child{font-weight:500}
  .tbl:not(.keep) tbody tr:hover>td{background:transparent}
  .tbl:not(.keep) td.act{width:auto}
  .tbl:not(.keep) tr.pr{border-bottom-left-radius:0;border-bottom-right-radius:0;margin-bottom:0;border-bottom:0}
  .tbl:not(.keep) tr.acts{border-top-left-radius:0;border-top-right-radius:0;border-top:0;padding-top:0}
  .roomc .tbl:not(.keep){padding:var(--s3)}
  .tbl:not(.keep) tr.sel>td:first-child{box-shadow:none}
  .tbl:not(.keep) .empty-td{display:block}
}

/* ---------- añadidos de disposición ---------- */
.kpis.six{grid-template-columns:repeat(6,minmax(0,1fr))}
@media (max-width:1359px){.kpis.six{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.kpis.six{grid-template-columns:repeat(2,minmax(0,1fr))}.kpi .v{font-size:var(--fs-2xl)}}
.livechip{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 10px;border-radius:var(--r-full);border:1px solid var(--border);font-size:var(--fs-xs);color:var(--text-2);white-space:nowrap;font-variant-numeric:tabular-nums;background:var(--surface)}
.savebar{position:sticky;bottom:var(--s4);z-index:5;display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap;padding:var(--s3) var(--s4);background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--border-2);border-radius:var(--r-lg);box-shadow:var(--sh-3);margin-top:var(--s4)}
.ph-t{min-width:0}
#ph{min-height:0}
.page-h h1{margin:0}

:root{--chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23939b94' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
code:empty{display:none}
.kpis{grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr))}
.kpi .l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hrow .hs{grid-column:1/-1;font-size:var(--fs-xs);color:var(--text-3);margin-top:-2px}
.wmt input[type=search]{flex:1 1 100%;order:-1}
.wmt select:not(.wmfs){flex:1;min-width:0}
.live-stats{grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}
@media (min-width:1181px){.live{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}}
#lPl table{min-width:0}
#lPl th,#lPl td{padding-left:8px;padding-right:8px}
#lPl .acts .row{flex-wrap:wrap}
@media (max-width:640px){
  .tbl:not(.keep) td{padding:3px 14px;font-size:var(--fs-xs)}
  .tbl:not(.keep) td:first-child{grid-template-columns:minmax(0,1fr);padding:6px 14px 8px;margin-bottom:4px;border-bottom:1px solid var(--border);font-size:var(--fs-sm)}
  .tbl:not(.keep) td:first-child::before{display:none}
  .tbl:not(.keep) td>*{justify-self:start;max-width:100%}
  .live-bar .vsep{display:none}
  .stat-strip>div{border-left:0;border-top:1px solid var(--border)}
  .stat-strip>div:first-child{border-top:0}
}
@media (max-width:1279px){.env{display:none}.search-btn{width:min(260px,26vw)}}
.menu.pop{z-index:75}
td.act .row{flex-wrap:nowrap}
@media (max-width:640px){#crumb .c-grp,#crumb .c-grp+.c-sep{display:none}}
@media (max-width:1180px){.wmt #wmBox{flex:1 1 100%}}

/* ---------- publicidad: vista previa de los huecos a tamaño real ---------- */
.adprev{display:flex;flex-direction:column;gap:var(--s4);overflow-x:auto}
.adprev figure{margin:0;display:flex;flex-direction:column;gap:var(--s2)}
.adprev figcaption{font-size:var(--fs-xs);color:var(--text-2)}.adprev figcaption b{color:var(--text)}
.adp-box{display:flex;flex-direction:column;gap:4px;width:max-content}
.adp-box small{font-size:var(--fs-2xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.adp-slot{flex:none;display:flex;align-items:center;justify-content:center;border:1px dashed var(--border-2);border-radius:var(--r-xs);background:repeating-linear-gradient(135deg,var(--surface-2) 0 10px,var(--surface-3) 10px 20px);color:var(--text-3);font:500 var(--fs-xs)/1.2 var(--mono);text-align:center;padding:0 8px}
.adp-slot.on{border-style:solid;border-color:var(--accent-line);color:var(--accent-text)}