/* Portal Ejecutivo — Pepe Abad. Mismos tokens e identidad que el IT Help Desk y Servicio al Cliente. */
:root {
  color-scheme: light;
  --plane:#f9f9f7; --surface-1:#fcfcfb; --surface-2:#f2f2ee;
  --text-primary:#0b0b0b; --text-secondary:#52514e; --text-muted:#6f6d68;
  --grid:#e1e0d9; --axis:#c3c2b7; --border:rgba(11,11,11,.10); --border-strong:rgba(11,11,11,.18);
  --series-1:#2a78d6; --series-2:#eb6834; --series-3:#1baf7a; --series-4:#eda100;
  --good:#0ca30c; --good-text:#006300; --warning:#fab219; --serious:#ec835a; --critical:#b3252b;
  --marca:#eb1c24; --marca-btn:#d6151c;
  --seq-250:#86b6ef; --seq-450:#2a78d6; --seq-600:#184f95;
  --radius:10px; --shadow:0 1px 2px rgba(11,11,11,.05), 0 4px 14px rgba(11,11,11,.05);
  --sans:system-ui,-apple-system,"Segoe UI",sans-serif;
  --lateral:236px; --pad-x:clamp(1rem,.35rem + 1.9vw,2.25rem); --pad-y:clamp(1.1rem,.8rem + .9vw,1.75rem);
  --barra-inf:60px; --barra-sup:52px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --plane:#0d0d0d; --surface-1:#1a1a19; --surface-2:#232322; --text-primary:#fff; --text-secondary:#c3c2b7; --text-muted:#898781;
    --grid:#2c2c2a; --axis:#383835; --border:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.18);
    --series-1:#3987e5; --series-2:#d95926; --series-3:#199e70; --series-4:#c98500;
    --good-text:#0ca30c; --critical:#e05a5f; --marca:#f04046; --seq-250:#184f95; --seq-450:#3987e5; --seq-600:#86b6ef;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --plane:#0d0d0d; --surface-1:#1a1a19; --surface-2:#232322; --text-primary:#fff; --text-secondary:#c3c2b7; --text-muted:#898781;
  --grid:#2c2c2a; --axis:#383835; --border:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.18);
  --series-1:#3987e5; --series-2:#d95926; --series-3:#199e70; --series-4:#c98500;
  --good-text:#0ca30c; --critical:#e05a5f; --marca:#f04046; --seq-250:#184f95; --seq-450:#3987e5; --seq-600:#86b6ef;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin:0; font-family:var(--sans); background:var(--plane); color:var(--text-primary); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%; overflow-wrap:break-word; }
a { color: var(--marca-btn); }
h1,h2,h3 { margin:0 0 .5rem; line-height:1.25; font-weight:620; letter-spacing:-.01em; }
h1 { font-size:clamp(1.28rem,1.12rem + .5vw,1.5rem); } h2 { font-size:1.15rem; } h3 { font-size:1rem; }
p { margin:0 0 .75rem; }
:focus-visible { outline:2px solid var(--marca); outline-offset:2px; border-radius:4px; }
.oculto { display:none !important; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- armazón ---------- */
.app { display:grid; grid-template-columns:var(--lateral) minmax(0,1fr); min-height:100vh; }
.barra-lateral { background:var(--surface-1); border-right:1px solid var(--border); display:flex; flex-direction:column;
  padding:1rem .75rem; gap:.2rem; position:sticky; top:0; height:100vh; overflow-y:auto; }
.marca { display:flex; align-items:center; gap:.6rem; padding:.25rem .5rem 1rem; }
.marca-logo { height:26px; width:auto; }
.marca-icono { width:30px; height:30px; border-radius:8px; background:var(--marca); color:#fff; display:grid; place-items:center; font-weight:700; font-size:.8rem; flex:none; }
.marca-txt { font-weight:650; font-size:.95rem; letter-spacing:-.015em; }
.marca-sub { font-size:.72rem; color:var(--text-muted); }
.nav-item { display:flex; align-items:center; gap:.6rem; padding:.48rem .6rem; border-radius:8px; color:var(--text-secondary);
  text-decoration:none; font-size:.9rem; font-weight:500; border:0; background:none; width:100%; text-align:left; cursor:pointer; font-family:inherit; }
.nav-item:hover { background:var(--surface-2); color:var(--text-primary); }
.nav-item.activo { background:var(--surface-2); color:var(--text-primary); font-weight:600; box-shadow:inset 2px 0 0 var(--marca); }
.ico { width:1em; height:1em; flex:none; vertical-align:-.12em; }
.nav-item .ico { width:17px; height:17px; opacity:.85; }
.nav-item .cuenta { margin-left:auto; font-size:.72rem; color:var(--text-muted); font-variant-numeric:tabular-nums; }
.nav-grupo { font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); padding:1rem .6rem .3rem; font-weight:600; }
.pie-lateral { margin-top:auto; border-top:1px solid var(--border); padding-top:.6rem; }
.avatar { width:28px; height:28px; border-radius:50%; background:var(--surface-2); color:var(--text-secondary); display:grid; place-items:center;
  font-size:.72rem; font-weight:650; flex:none; border:1px solid var(--border); }
.pie-lateral .nom { font-size:.82rem; font-weight:600; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pie-lateral .rol { font-size:.7rem; color:var(--text-muted); }
.contenido { padding:var(--pad-y) var(--pad-x) 3rem; max-width:1320px; width:100%; margin-inline:auto; min-width:0; }
.encabezado { display:flex; align-items:flex-start; gap:1rem; margin-bottom:1.25rem; flex-wrap:wrap; }
.encabezado .crece { flex:1 1 320px; }
.sub { color:var(--text-secondary); font-size:.88rem; margin:0; }

/* ---------- componentes ---------- */
.tarjeta { background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); }
.pad { padding:1.1rem 1.2rem; }
.rejilla { display:grid; gap:1rem; }
.r4 { grid-template-columns:repeat(auto-fit,minmax(185px,1fr)); }
.r2 { grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); }
.mb { margin-bottom:1rem; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; padding:.5rem .9rem; border-radius:8px;
  border:1px solid var(--border-strong); background:var(--surface-1); color:var(--text-primary); font:inherit; font-size:.88rem;
  font-weight:550; cursor:pointer; text-decoration:none; white-space:nowrap; }
.btn:hover { background:var(--surface-2); }
.btn-primario { background:var(--marca-btn); border-color:var(--marca-btn); color:#fff; }
.btn-primario:hover { background:var(--marca-btn); filter:brightness(1.1); }
.btn-peligro { color:var(--critical); border-color:var(--critical); }
.btn-sm { padding:.3rem .6rem; font-size:.8rem; }
.btn:disabled { opacity:.5; cursor:not-allowed; }

label { display:block; font-size:.82rem; font-weight:600; color:var(--text-secondary); margin-bottom:.3rem; }
input, select, textarea { width:100%; padding:.5rem .65rem; border-radius:8px; border:1px solid var(--border-strong);
  background:var(--surface-1); color:var(--text-primary); font:inherit; font-size:.9rem; }
textarea { min-height:96px; resize:vertical; }
input[type=checkbox], input[type=radio] { width:auto; }
.campo { margin-bottom:.9rem; }
.fila { display:flex; gap:.75rem; flex-wrap:wrap; }
.fila > * { flex:1 1 180px; }
.ayuda { font-size:.76rem; color:var(--text-muted); margin-top:.25rem; }
.chk { display:flex; align-items:center; gap:.5rem; font-weight:500; color:var(--text-primary); }
.req::after { content:" *"; color:var(--marca-btn); }

.alerta { padding:.6rem .8rem; border-radius:8px; font-size:.86rem; margin-bottom:.9rem; border:1px solid; display:flex; gap:.5rem; }
.alerta-error { color:var(--critical); border-color:var(--critical); background:color-mix(in srgb,var(--critical) 8%,transparent); }
.alerta-ok { color:var(--good-text); border-color:var(--good); background:color-mix(in srgb,var(--good) 10%,transparent); }

.etq { display:inline-flex; align-items:center; gap:.32rem; padding:.12rem .5rem; border-radius:999px; font-size:.74rem; font-weight:600;
  border:1px solid var(--border-strong); color:var(--text-secondary); white-space:nowrap; background:var(--surface-1); }
.etq .punto { width:7px; height:7px; border-radius:50%; background:currentColor; }
.etq-abierto { color:var(--series-1); border-color:color-mix(in srgb,var(--series-1) 45%,transparent); }
.etq-en_proceso { color:var(--series-4); border-color:color-mix(in srgb,var(--series-4) 55%,transparent); }
.etq-en_espera, .etq-cerrado, .etq-baja { color:var(--text-muted); }
.etq-resuelto, .etq-sla-cumplido { color:var(--good-text); border-color:color-mix(in srgb,var(--good) 45%,transparent); }
.etq-critica, .etq-sla-vencido, .etq-sla-incumplido { color:var(--critical); border-color:color-mix(in srgb,var(--critical) 50%,transparent); }
.etq-alta, .etq-sla-por_vencer { color:var(--serious); border-color:color-mix(in srgb,var(--serious) 60%,transparent); }
.etq-sla-ok, .etq-sla-sin_sla { color:var(--text-muted); }

.tabla-env { overflow-x:auto; max-width:100%; }
table.tabla { width:100%; border-collapse:collapse; font-size:.87rem; }
table.tabla th { text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted);
  font-weight:650; padding:.55rem .7rem; border-bottom:1px solid var(--border); white-space:nowrap; }
table.tabla td { padding:.6rem .7rem; border-bottom:1px solid var(--grid); vertical-align:middle; }
table.tabla tr:last-child td { border-bottom:0; }
table.tabla tbody tr.clic { cursor:pointer; }
table.tabla tbody tr.clic:hover { background:var(--surface-2); }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
.cod { font-variant-numeric:tabular-nums; font-size:.8rem; color:var(--text-muted); font-weight:600; white-space:nowrap; }
.tit { font-weight:560; }
.meta { font-size:.76rem; color:var(--text-muted); }
.vacio { text-align:center; padding:2.2rem 1rem; color:var(--text-muted); font-size:.9rem; }

.filtros { display:flex; gap:.6rem; flex-wrap:wrap; align-items:flex-end; margin-bottom:1rem; }
.filtros .campo { margin:0; min-width:140px; flex:1 1 140px; }
.filtros .ancho { flex:2 1 240px; }

.tile { padding:1rem 1.1rem; }
.tile .k { font-size:.78rem; color:var(--text-secondary); font-weight:600; }
.tile .v { font-size:1.65rem; font-weight:660; letter-spacing:-.03em; margin-top:.3rem; line-height:1.1; }
.tile .n { font-size:.76rem; color:var(--text-muted); margin-top:.35rem; }
.v.malo { color:var(--critical); } .v.bueno { color:var(--good-text); }

/* barra dentro de una celda: volumen relativo */
.barra-celda { display:flex; align-items:center; gap:.5rem; min-width:150px; }
.barra-celda .pista { flex:1; height:10px; background:var(--surface-2); border-radius:999px; overflow:hidden; }
.barra-celda i { display:block; height:100%; border-radius:999px; background:var(--seq-450); }
.punto-color { display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:.4rem; vertical-align:0; }

/* gráficas */
.gr-tit { font-size:.95rem; font-weight:620; margin-bottom:.15rem; }
.gr-sub { font-size:.78rem; color:var(--text-muted); margin-bottom:.6rem; }
.leyenda { display:flex; gap:.9rem; flex-wrap:wrap; margin:.1rem 0 .5rem; font-size:.78rem; color:var(--text-secondary); }
.leyenda i { width:10px; height:10px; border-radius:3px; display:inline-block; margin-right:.35rem; vertical-align:-1px; }
svg.grafica { display:block; width:100%; height:auto; overflow:visible; }
.barras-v { display:flex; align-items:flex-end; gap:3px; height:130px; padding-top:.5rem; }
.barras-v div { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; min-width:0; }
.barras-v b { display:block; width:100%; background:var(--seq-450); border-radius:3px 3px 0 0; min-height:1px; }
.barras-v span { font-size:.66rem; color:var(--text-muted); margin-top:.25rem; white-space:nowrap; }
.tooltip { position:fixed; z-index:90; pointer-events:none; background:var(--surface-1); border:1px solid var(--border-strong);
  border-radius:8px; padding:.4rem .6rem; font-size:.78rem; box-shadow:var(--shadow); opacity:0; transition:opacity .1s; }

/* modal */
.modal-capa { position:fixed; inset:0; z-index:90; background:rgba(8,8,8,.55); display:grid; place-items:center; padding:1rem; }
.modal { background:var(--surface-1); border:1px solid var(--border-strong); border-radius:12px; padding:1.1rem 1.2rem; width:100%; max-width:30rem; }
.modal-botones { display:flex; gap:.5rem; justify-content:flex-end; margin-top:.9rem; flex-wrap:wrap; }

/* acceso */
.acceso { min-height:100vh; display:grid; place-items:center; padding:1.5rem; position:relative; overflow:hidden;
  background:radial-gradient(60vmax 60vmax at 10% -10%, color-mix(in srgb,var(--marca) 16%,transparent), transparent 60%),
             radial-gradient(50vmax 50vmax at 110% 110%, color-mix(in srgb,#ff8a5c 14%,transparent), transparent 62%), var(--plane); }
.acceso-caja { width:100%; max-width:400px; }
.btn-ms { width:100%; padding:.65rem .9rem; font-size:.92rem; font-weight:600; }
.separador { display:flex; align-items:center; gap:.7rem; margin:1.1rem 0 .9rem; color:var(--text-muted); font-size:.74rem; }
.separador::before, .separador::after { content:""; flex:1; height:1px; background:var(--grid); }
.auto { display:inline-flex; font-size:.72rem; color:var(--text-muted); border:1px solid var(--border); border-radius:999px; padding:0 .45rem; margin-left:.4rem; vertical-align:middle; }


/* celular: marca arriba, navegación abajo, tabla de casos como tarjetas */
@media (max-width:700px) {
  .app { display:block; padding-top:var(--barra-sup); padding-bottom:calc(var(--barra-inf) + env(safe-area-inset-bottom,0px)); }
  .barra-lateral { position:fixed; left:0; right:0; bottom:0; top:auto; height:auto; z-index:50; flex-direction:row; gap:0;
    padding:.3rem .4rem calc(.3rem + env(safe-area-inset-bottom,0px)); border:0; border-top:1px solid var(--border);
    overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
  .barra-lateral .marca { position:fixed; top:0; left:0; right:0; height:var(--barra-sup); padding:0 var(--pad-x); margin:0;
    background:var(--surface-1); border-bottom:1px solid var(--border); z-index:45; }
  .nav-grupo { display:none; }
  .nav-item { flex-direction:column; gap:.15rem; width:auto; flex:0 0 auto; min-width:62px; padding:.35rem .5rem; font-size:.64rem;
    font-weight:600; text-align:center; white-space:nowrap; }
  .nav-item .ico { width:21px; height:21px; }
  .nav-item .cuenta { display:none; }
  .nav-item.activo { background:none; box-shadow:none; color:var(--marca); }
  .pie-lateral { display:contents; }
  .pie-lateral .nav-item > span:not(.avatar) { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .contenido { padding:1rem var(--pad-x) 1.5rem; }
  .encabezado > .btn-primario { flex:1 1 100%; }
  .fila > * { flex:1 1 100%; }
  .filtros .campo { flex:1 1 45%; min-width:0; }
  .filtros .ancho { flex:1 1 100%; }
}
@media (max-width:980px), (pointer:coarse) {
  input, select, textarea { font-size:16px; }
  input:not([type=checkbox]):not([type=radio]), select, .btn { min-height:44px; }
  .nav-item { min-height:44px; }
}
@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } }
@media print { .barra-lateral, .filtros, .btn { display:none !important; } .app { display:block; } }

/* ================= Portal Ejecutivo ================= */
.saludo { font-size:.82rem; color:var(--text-muted); margin-bottom:.15rem; }
.buscador { display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; margin-bottom:1rem; }
.buscador input { flex:1 1 260px; }
.chips { display:flex; gap:.4rem; flex-wrap:wrap; }
.chip { border:1px solid var(--border-strong); background:var(--surface-1); color:var(--text-secondary); border-radius:999px;
  padding:.3rem .75rem; font:inherit; font-size:.8rem; font-weight:560; cursor:pointer; white-space:nowrap; }
.chip:hover { background:var(--surface-2); color:var(--text-primary); }
.chip.activo { background:var(--text-primary); border-color:var(--text-primary); color:var(--plane); }

.dashes { display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); }
.dash { display:flex; flex-direction:column; gap:.5rem; padding:1.05rem 1.1rem 1rem; text-decoration:none; color:inherit; position:relative;
  transition:border-color .12s, transform .12s; min-height:150px; }
.dash:hover { border-color:var(--border-strong); transform:translateY(-1px); }
.dash .area { display:flex; align-items:center; gap:.4rem; font-size:.7rem; font-weight:650; text-transform:uppercase; letter-spacing:.07em; color:var(--text-muted); }
.dash .area i { width:8px; height:8px; border-radius:2px; background:var(--a, var(--series-1)); }
.dash h3 { font-size:1.02rem; margin:0; }
.dash p { font-size:.84rem; color:var(--text-secondary); margin:0; flex:1; }
.dash .pie { display:flex; align-items:center; gap:.5rem; font-size:.74rem; color:var(--text-muted); flex-wrap:wrap; }
.dash .pie .ia { margin-left:auto; display:inline-flex; align-items:center; gap:.25rem; color:var(--text-secondary); font-weight:600; }
.etq-borrador { color:var(--series-4); border-color:color-mix(in srgb,var(--series-4) 55%,transparent); }
.etq-publicado { color:var(--good-text); border-color:color-mix(in srgb,var(--good) 45%,transparent); }
.area-grupo { margin:1.4rem 0 .7rem; display:flex; align-items:baseline; gap:.5rem; }
.area-grupo h2 { margin:0; font-size:1rem; }
.area-grupo span { font-size:.78rem; color:var(--text-muted); }

/* ---------- visor ---------- */
.visor { position:fixed; inset:0; display:grid; grid-template-rows:auto minmax(0,1fr); background:var(--plane); }
.visor-barra { display:flex; align-items:center; gap:.6rem; padding:.55rem var(--pad-x); padding-top:calc(.55rem + env(safe-area-inset-top,0px));
  background:var(--surface-1); border-bottom:1px solid var(--border); min-width:0; }
.visor-barra .tit { flex:1; min-width:0; }
.visor-barra .tit b { display:block; font-size:.98rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.visor-barra .tit span { display:block; font-size:.74rem; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.btn-ico { width:40px; height:40px; padding:0; flex:none; }
.btn-ico .ico { width:19px; height:19px; }
.visor-cuerpo { display:grid; grid-template-columns:minmax(0,1fr); min-height:0; }
.visor.con-chat .visor-cuerpo { grid-template-columns:minmax(0,1fr) min(420px,38vw); }
.marco { width:100%; height:100%; border:0; background:#fff; display:block; }
.marco-env { position:relative; min-height:0; }
.marco-carga { position:absolute; inset:0; display:grid; place-items:center; color:var(--text-muted); font-size:.9rem; pointer-events:none; }

.chat { display:none; flex-direction:column; min-height:0; background:var(--surface-1); border-left:1px solid var(--border); }
.visor.con-chat .chat { display:flex; }
.chat-cab { display:flex; align-items:center; gap:.5rem; padding:.7rem .9rem; border-bottom:1px solid var(--border); }
.chat-cab b { flex:1; font-size:.92rem; }
.chat-msgs { flex:1; overflow-y:auto; padding:1rem .9rem; display:flex; flex-direction:column; gap:.8rem; overscroll-behavior:contain; }
.msg { max-width:92%; font-size:.9rem; line-height:1.5; }
.msg.yo { align-self:flex-end; background:var(--text-primary); color:var(--plane); padding:.55rem .8rem; border-radius:14px 14px 4px 14px; white-space:pre-wrap; }
.msg.ia { align-self:flex-start; max-width:100%; }
.msg.ia p { margin:0 0 .55rem; } .msg.ia p:last-child { margin-bottom:0; }
.msg.ia ul, .msg.ia ol { margin:.2rem 0 .6rem; padding-left:1.2rem; } .msg.ia li { margin-bottom:.2rem; }
.msg.ia h4 { font-size:.9rem; margin:.7rem 0 .3rem; }
.msg.ia code { font-size:.82em; background:var(--surface-2); padding:.05rem .3rem; border-radius:4px; }
.msg.ia table { border-collapse:collapse; font-size:.8rem; margin:.3rem 0 .7rem; display:block; overflow-x:auto; max-width:100%; }
.msg.ia th, .msg.ia td { border:1px solid var(--grid); padding:.3rem .5rem; text-align:left; white-space:nowrap; }
.msg.ia th { background:var(--surface-2); font-weight:650; }
.msg.error { color:var(--critical); font-size:.84rem; }
.escribiendo::after { content:"▍"; animation:parpadeo 1s steps(1) infinite; color:var(--marca); }
@keyframes parpadeo { 50% { opacity:0; } }
.chat-intro { color:var(--text-secondary); font-size:.86rem; }
.chat-intro .chips { margin-top:.7rem; }
.chat-intro .chip { white-space:normal; text-align:left; }
.chat-form { display:flex; gap:.5rem; padding:.7rem .8rem; padding-bottom:calc(.7rem + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--border); align-items:flex-end; }
.chat-form textarea { min-height:44px; max-height:140px; resize:none; flex:1; padding:.6rem .7rem; }
.chat-nota { font-size:.7rem; color:var(--text-muted); padding:0 .9rem .5rem; }
.btn-ia { background:var(--text-primary); border-color:var(--text-primary); color:var(--plane); }
.btn-ia:hover { background:var(--text-primary); filter:brightness(1.25); }

@media (max-width:820px) {
  .visor.con-chat .visor-cuerpo { grid-template-columns:minmax(0,1fr); }
  .chat { position:fixed; inset:0; z-index:80; border:0; padding-top:env(safe-area-inset-top,0px); }
  .visor-barra .txt-btn { display:none; }
  .visor-barra .btn:not(.btn-ico) { padding:.5rem .7rem; }
}

@media (max-width:480px) { .visor-barra .solo-ancho { display:none; } }

/* ---------- editor ---------- */
.zona-archivo { border:1.5px dashed var(--border-strong); border-radius:var(--radius); padding:1rem; text-align:center; background:var(--surface-2); }
.zona-archivo.arrastre { border-color:var(--marca); background:color-mix(in srgb,var(--marca) 6%,var(--surface-2)); }
.zona-archivo input { margin-top:.5rem; }
.token-caja { font-family:ui-monospace,Menlo,monospace; font-size:.82rem; background:var(--surface-2); border:1px solid var(--border-strong);
  border-radius:8px; padding:.6rem .7rem; word-break:break-all; user-select:all; }
pre.cod-bloque { font-family:ui-monospace,Menlo,monospace; font-size:.76rem; background:var(--surface-2); border-radius:8px; padding:.7rem; overflow-x:auto; white-space:pre; margin:.4rem 0 0; }
.dos-col { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:1.25rem; align-items:start; }
@media (max-width:980px) { .dos-col { grid-template-columns:minmax(0,1fr); } }
.sin-acceso { max-width:460px; margin:12vh auto 0; text-align:center; }
@media (max-width:700px) {
  table.resp thead { display:none; }
  table.resp, table.resp tbody { display:block; }
  table.resp tbody tr { display:flex; flex-wrap:wrap; gap:.35rem .6rem; align-items:center; border:1px solid var(--border);
    border-radius:var(--radius); padding:.75rem .85rem; margin-bottom:.5rem; background:var(--surface-1); }
  table.resp td { display:block; border:0; padding:0; }
  table.resp td.ancho { flex:1 1 100%; }
  .tarjeta:has(table.resp) { background:none; border:0; box-shadow:none; }
}

/* =====================================================================
   Vidrio — estilo iOS. Superficies translúcidas con desenfoque sobre un
   fondo de color suave. Va al final: sobrescribe lo de arriba.
   ===================================================================== */
:root {
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",system-ui,"Segoe UI",sans-serif;
  --radius:18px;
  --vidrio:rgba(255,255,255,.58); --vidrio-fuerte:rgba(255,255,255,.78); --vidrio-borde:rgba(255,255,255,.7);
  --vidrio-linea:rgba(60,60,67,.12); --relleno:rgba(118,118,128,.12);
  --sombra-vidrio:0 1px 0 rgba(255,255,255,.6) inset, 0 8px 32px rgba(31,38,64,.08);
  --azul-ios:#0a84ff; --marca-btn:#e3141c;
  --desenfoque:blur(28px) saturate(180%);
  --fondo:
    radial-gradient(55vmax 45vmax at 0% 0%, rgba(235,28,36,.20), transparent 60%),
    radial-gradient(50vmax 50vmax at 100% 10%, rgba(10,132,255,.18), transparent 60%),
    radial-gradient(55vmax 50vmax at 80% 100%, rgba(255,159,10,.16), transparent 60%),
    radial-gradient(45vmax 45vmax at 10% 95%, rgba(48,209,88,.12), transparent 60%),
    #f2f2f7;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --vidrio:rgba(30,30,32,.55); --vidrio-fuerte:rgba(36,36,38,.78); --vidrio-borde:rgba(255,255,255,.10);
    --vidrio-linea:rgba(84,84,88,.45); --relleno:rgba(118,118,128,.24);
    --sombra-vidrio:0 1px 0 rgba(255,255,255,.06) inset, 0 8px 32px rgba(0,0,0,.35);
    --surface-1:#1c1c1e; --surface-2:rgba(118,118,128,.24);
    --fondo:
      radial-gradient(55vmax 45vmax at 0% 0%, rgba(235,28,36,.28), transparent 60%),
      radial-gradient(50vmax 50vmax at 100% 10%, rgba(10,132,255,.24), transparent 60%),
      radial-gradient(55vmax 50vmax at 80% 100%, rgba(191,90,242,.18), transparent 60%),
      #000;
  }
}
:root[data-theme="dark"] {
  --vidrio:rgba(30,30,32,.55); --vidrio-fuerte:rgba(36,36,38,.78); --vidrio-borde:rgba(255,255,255,.10);
  --vidrio-linea:rgba(84,84,88,.45); --relleno:rgba(118,118,128,.24);
  --sombra-vidrio:0 1px 0 rgba(255,255,255,.06) inset, 0 8px 32px rgba(0,0,0,.35);
  --surface-1:#1c1c1e; --surface-2:rgba(118,118,128,.24);
  --fondo:
    radial-gradient(55vmax 45vmax at 0% 0%, rgba(235,28,36,.28), transparent 60%),
    radial-gradient(50vmax 50vmax at 100% 10%, rgba(10,132,255,.24), transparent 60%),
    radial-gradient(55vmax 50vmax at 80% 100%, rgba(191,90,242,.18), transparent 60%),
    #000;
}

body { background:var(--fondo); background-attachment:fixed; letter-spacing:-.005em; }
.acceso { background:var(--fondo); }

/* superficies de vidrio */
.tarjeta, .barra-lateral, .visor-barra, .chat, .modal, .barra-lateral .marca {
  background:var(--vidrio); -webkit-backdrop-filter:var(--desenfoque); backdrop-filter:var(--desenfoque);
  border:1px solid var(--vidrio-borde); box-shadow:var(--sombra-vidrio);
}
.tarjeta { border-radius:var(--radius); }
.modal { border-radius:22px; background:var(--vidrio-fuerte); }
.modal-capa { background:rgba(0,0,0,.28); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }

/* barra lateral: panel flotante */
.barra-lateral { border-radius:22px; margin:12px; height:calc(100vh - 24px); top:12px; border-right:1px solid var(--vidrio-borde); }
.barra-lateral .marca { background:none; border:0; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
.app { grid-template-columns:calc(var(--lateral) + 12px) minmax(0,1fr); }
.nav-item { border-radius:12px; }
.nav-item:hover { background:var(--relleno); }
.nav-item.activo { background:var(--vidrio-fuerte); box-shadow:0 1px 3px rgba(0,0,0,.06); color:var(--marca-btn); }
.nav-item.activo .ico { opacity:1; }
.pie-lateral { border-top-color:var(--vidrio-linea); }

/* títulos grandes, como en iOS */
.contenido h1 { font-size:clamp(1.7rem,1.3rem + 1.2vw,2.1rem); font-weight:750; letter-spacing:-.025em; }
.saludo { font-weight:600; text-transform:uppercase; letter-spacing:.05em; font-size:.74rem; }

/* controles */
.btn { border-radius:12px; border-color:transparent; background:var(--relleno); font-weight:600; }
.btn:hover { background:var(--relleno); filter:brightness(.97); }
.btn-primario { background:var(--marca-btn); color:#fff; box-shadow:0 4px 14px rgba(227,20,28,.28); }
.btn-ia { background:var(--text-primary); color:var(--plane); border-color:transparent; }
.btn-peligro { background:rgba(255,59,48,.12); color:#ff3b30; border-color:transparent; }
.btn-ico { border-radius:50%; }
input, select, textarea { border-radius:12px; border:1px solid transparent; background:var(--relleno); }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--azul-ios); background:var(--vidrio-fuerte); box-shadow:0 0 0 4px rgba(10,132,255,.18); }
.zona-archivo { border-radius:16px; background:var(--relleno); border-color:var(--vidrio-linea); }
.token-caja, pre.cod-bloque { background:var(--relleno); border-color:transparent; border-radius:12px; }

/* filtros como control segmentado */
.chips { background:var(--relleno); padding:3px; border-radius:12px; width:fit-content; max-width:100%; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; }
.chips::-webkit-scrollbar { display:none; }
.chip { border:0; background:none; border-radius:9px; padding:.38rem .9rem; color:var(--text-primary); font-weight:560; }
.chip:hover { background:none; }
.chip.activo { background:var(--vidrio-fuerte); color:var(--text-primary); box-shadow:0 1px 4px rgba(0,0,0,.12); }
.chat-intro .chips { background:none; padding:0; flex-wrap:wrap; width:auto; }
.chat-intro .chip { background:var(--relleno); border-radius:14px; padding:.5rem .8rem; }

/* tarjetas de dashboard */
.dashes { gap:14px; }
.dash { border-radius:22px; padding:1.15rem 1.2rem 1.05rem; }
.dash:hover { transform:translateY(-2px) scale(1.005); box-shadow:var(--sombra-vidrio), 0 14px 40px rgba(31,38,64,.12); }
.dash .area i { width:22px; height:22px; border-radius:7px; background:var(--a); box-shadow:0 2px 6px color-mix(in srgb,var(--a) 40%,transparent); }
.dash h3 { font-size:1.08rem; font-weight:680; letter-spacing:-.015em; }
.etq { border-radius:999px; border:0; background:var(--relleno); }
.etq-borrador { background:rgba(255,159,10,.16); color:#c77700; }
.etq-publicado { background:rgba(48,209,88,.16); color:#248a3d; }

/* tablas */
table.tabla th { color:var(--text-muted); border-bottom-color:var(--vidrio-linea); }
table.tabla td { border-bottom-color:var(--vidrio-linea); }
table.tabla tbody tr.clic:hover { background:var(--relleno); }

/* visor */
.visor { background:var(--fondo); }
.visor-barra { border:0; border-bottom:1px solid var(--vidrio-linea); border-radius:0; }
.marco-env { margin:10px; border-radius:20px; overflow:hidden; box-shadow:0 8px 32px rgba(31,38,64,.10); background:#fff; }
.chat { margin:10px 10px 10px 0; border-radius:22px; border:1px solid var(--vidrio-borde); }
.chat-cab, .chat-form { border-color:var(--vidrio-linea); }
.msg.yo { background:var(--azul-ios); color:#fff; border-radius:20px 20px 6px 20px; }
.msg.ia { background:var(--vidrio-fuerte); padding:.65rem .85rem; border-radius:20px 20px 20px 6px; max-width:96%; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.chat-form textarea { border-radius:22px; padding:.65rem .95rem; }
.chat-form .btn-primario { border-radius:50%; width:44px; height:44px; box-shadow:none; }

/* acceso */
.acceso-caja .tarjeta { border-radius:26px; padding:1.5rem; }
.btn-ms { background:var(--vidrio-fuerte); border-radius:14px; min-height:50px; }

/* celular: barra de pestañas y encabezado de vidrio, como iOS */
@media (max-width:700px) {
  .app { padding-top:calc(var(--barra-sup) + env(safe-area-inset-top,0px)); }
  /* El desenfoque va en un ::before: un backdrop-filter en la barra misma haría que el
     encabezado fijo (.marca, que vive adentro) se ubique dentro de la barra y no arriba. */
  .barra-lateral { margin:0; border-radius:0; height:auto; top:auto; border:0; border-top:1px solid var(--vidrio-linea); box-shadow:none;
    background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; justify-content:space-around; }
  .barra-lateral::before { content:""; position:fixed; left:0; right:0; bottom:0; height:calc(var(--barra-inf) + env(safe-area-inset-bottom,0px));
    background:var(--vidrio-fuerte); -webkit-backdrop-filter:var(--desenfoque); backdrop-filter:var(--desenfoque); z-index:-1; pointer-events:none; }
  .barra-lateral .marca { background:var(--vidrio-fuerte); -webkit-backdrop-filter:var(--desenfoque); backdrop-filter:var(--desenfoque);
    border-bottom:1px solid var(--vidrio-linea); padding-top:env(safe-area-inset-top,0px); height:calc(var(--barra-sup) + env(safe-area-inset-top,0px)); }
  .nav-item, .nav-item:hover { background:none; box-shadow:none; color:#8e8e93; }
  .nav-item.activo { background:none; box-shadow:none; color:var(--marca-btn); }
  .dash { border-radius:20px; }
  .marco-env { margin:0; border-radius:0; box-shadow:none; }
  .chat { margin:0; border-radius:0; border:0; background:color-mix(in srgb,var(--surface-1) 94%,transparent); }
}
@media (max-width:820px) { .visor.con-chat .chat { margin:0; border-radius:0; } }

/* logos PA flotando en el fondo del catálogo */
.logos-fondo { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.app > .barra-lateral, .app > .contenido { position:relative; z-index:1; }
.app > .barra-lateral { position:sticky; }
.lf { position:absolute; width:var(--t); height:auto; opacity:var(--o); filter:saturate(1.1);
  animation:flotar var(--d) ease-in-out infinite alternate; animation-delay:var(--r); will-change:transform; }
.lf1 { --t:360px; --o:.10; --d:19s; --r:-3s;  left:58%; top:6%;  }
.lf2 { --t:220px; --o:.08; --d:23s; --r:-11s; left:84%; top:52%; }
.lf3 { --t:160px; --o:.09; --d:17s; --r:-7s;  left:30%; top:70%; }
.lf4 { --t:120px; --o:.07; --d:21s; --r:-15s; left:70%; top:82%; }
.lf5 { --t:260px; --o:.06; --d:27s; --r:-5s;  left:16%; top:-6%; }
.lf6 { --t:90px;  --o:.09; --d:15s; --r:-9s;  left:46%; top:40%; }
@keyframes flotar {
  0%   { transform:translate3d(0,0,0) rotate(-6deg); }
  50%  { transform:translate3d(18px,-26px,0) rotate(3deg); }
  100% { transform:translate3d(-14px,14px,0) rotate(8deg); }
}
:root[data-theme="dark"] .lf { --o:.16; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lf { opacity:calc(var(--o) * 1.6); } }
@media (max-width:700px) {
  .app > .barra-lateral { position:fixed; z-index:50; }
  .lf { opacity:calc(var(--o) * .75); }
  .lf1 { --t:220px; left:45%; top:12%; } .lf2 { --t:140px; left:70%; top:58%; } .lf5 { --t:160px; left:-8%; top:30%; }
  .lf3 { --t:110px; left:10%; top:78%; } .lf6 { display:none; }
}
@media (prefers-reduced-motion: reduce) { .lf { animation:none; } }

/* sin desenfoque disponible: superficies más sólidas para que se lea bien */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  :root { --vidrio:rgba(255,255,255,.92); }
  :root[data-theme="dark"] { --vidrio:rgba(28,28,30,.94); }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --vidrio:var(--surface-1); --vidrio-fuerte:var(--surface-1); }
}