/*
 * El CSS del panel nuevo: el de las maquetas (docs/panel-nuevo/maquetas), tal cual, y debajo lo que
 * sólo existe con datos vivos (cargando, avisos, paginación, confirmaciones). La gramática es cerrada:
 * subrayado lleva · botón con borde cambia (verbo) · rojo quita · monoespaciado es un dato · ⓘ explica.
 */
:root{--ground:#f3f4f6;--raise:#fff;--sunk:#e9ecf0;--hover:#f7f8fa;--ink:#1a1e26;--muted:#5a6473;--faint:#98a1ad;--line:#d5dae1;--line-soft:#e6e9ee;
--accent:#2b5c8a;--accent-soft:#e1eaf4;--mal:#b3261e;--mal-soft:#fbe4e2;--mal-ink:#8f1d17;
--d1:#dfe4ea;--d2:#c3cbd5;--d3:#9ea9b8;--d4:#6f7e91;--d5:#3f4d5f;--m1:#f2b8b3;--m2:#df6f66;--m3:#b3261e;
--shadow:0 1px 1px rgba(26,30,38,.04),0 8px 20px -18px rgba(26,30,38,.3);
--sans:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,Menlo,monospace}
*{box-sizing:border-box}html{color-scheme:light}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
h1,h2,h3,p{margin:0}a{color:inherit}button{font:inherit;color:inherit;cursor:pointer}
.num,.t,.mono,.tag,.tl,.n,.tl-n,.foot,.cell .v,.frac{font-variant-numeric:tabular-nums}
.shell{display:grid;grid-template-columns:11rem minmax(0,1fr);min-height:100vh}
.side{background:var(--sunk);border-right:1px solid var(--line);padding:1.1rem .7rem;min-width:0}
.brand{padding:0 .5rem .9rem}.brand .b{font-weight:600;font-size:1.15rem;letter-spacing:-.01em}.brand .h{font-family:var(--mono);font-size:.66rem;color:var(--muted);overflow-wrap:anywhere}
nav{display:flex;flex-direction:column;gap:2px}
nav a{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.45rem .55rem;border-radius:6px;text-decoration:none;color:var(--muted)}
nav a.on{background:var(--raise);color:var(--ink);box-shadow:var(--shadow);font-weight:600}
nav a .n{font-family:var(--mono);font-size:.66rem;color:var(--faint);white-space:nowrap}
nav a .badge{font-family:var(--mono);font-size:.64rem;padding:.1em .45em;border-radius:4px;background:var(--mal-soft);color:var(--mal)}
.side .nota{margin-top:1.2rem;padding:.6rem .5rem;font-size:.7rem;color:var(--muted);border-top:1px solid var(--line);line-height:1.4}
.side .gram{margin-top:.6rem;padding:.5rem .5rem 0;font-size:.7rem;color:var(--muted);line-height:1.6}
main{padding:1.1rem 1.4rem 3rem;min-width:0}
.cab{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:.8rem}
.cab h1{font-size:1.35rem;font-weight:600;letter-spacing:-.01em}
.cab .meta{color:var(--muted);font-size:.8rem;display:flex;gap:.7rem;align-items:center;flex-wrap:wrap}
.k{font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500}
.sec{margin-top:1.25rem}.sec>.sh{display:flex;align-items:center;gap:.7rem;margin-bottom:.45rem;flex-wrap:wrap}.sec>.sh .k{font-size:.7rem}.sec>.sh .sp{flex:1}
.card{background:var(--raise);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow)}
.mono{font-family:var(--mono)}.mut{color:var(--muted)}.fnt{color:var(--faint)}.sm{font-size:.8rem}.xs{font-size:.74rem}.red{color:var(--mal)}
/* lleva */
a.l{color:var(--ink);text-decoration:underline;text-decoration-color:var(--faint);text-underline-offset:3px;text-decoration-thickness:1px}
a.l:hover{color:var(--accent);text-decoration-color:var(--accent)}a.l.go::after{content:" →";color:var(--faint)}
a.l.k{color:var(--muted)}
/* cambia · quita */
.btn{background:var(--raise);border:1px solid #aeb6c1;border-radius:5px;padding:.28rem .65rem;font-size:.8rem;font-weight:500;white-space:nowrap;line-height:1.3;color:var(--ink)}
.btn:hover{border-color:var(--ink)}.btn.d{color:var(--mal);border-color:var(--mal)}.btn.d:hover{background:var(--mal-soft)}
.btn.menu::after{content:" ▾";color:var(--faint)}.btn.s{padding:.15rem .45rem;font-size:.74rem}
.acts{display:flex;gap:.35rem;align-items:center;justify-content:flex-end;flex-wrap:wrap}
/* dato */
.tag{display:inline-block;font-family:var(--mono);font-size:.68rem;padding:.06em .4em;border-radius:3px;background:var(--sunk);color:var(--muted);white-space:nowrap}
.frac{font-family:var(--mono);font-size:.84rem;font-weight:500}
/* estado */
.chip{display:inline-flex;align-items:center;gap:.33rem;font-size:.72rem;font-weight:500;padding:.06em .45em .06em .4em;border-radius:4px;white-space:nowrap;background:var(--sunk);color:var(--muted)}
.chip::before{content:"";width:.4rem;height:.4rem;border-radius:50%;border:1.5px solid currentColor;flex:none}
.chip.mal{background:var(--mal-soft);color:var(--mal-ink)}.chip.mal::before{background:var(--mal);border-color:var(--mal)}
.chip.off{color:var(--faint)}.chip.off::before{background:var(--faint);border-color:var(--faint)}
.chip.p::before{display:none}
.dot{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;border:1.5px solid var(--faint);background:transparent;vertical-align:middle;flex:none}
.dot.mal{background:var(--mal);border-color:var(--mal)}.dot.off{background:var(--faint)}
/* filtro · pestaña · plegable · explica */
.pills{display:inline-flex;gap:2px;background:var(--sunk);border-radius:6px;padding:2px;flex-wrap:wrap}
.pill{border-radius:5px;padding:.18rem .6rem;font-size:.78rem;color:var(--muted);cursor:pointer}
.pill.on{background:var(--raise);color:var(--ink);box-shadow:var(--shadow);font-weight:600}.pill .n{font-family:var(--mono);font-size:.66rem;color:var(--faint);margin-left:.3rem}
.selc{display:inline-flex;align-items:center;gap:.3rem;border:1px solid var(--line);background:var(--raise);border-radius:5px;padding:.2rem .55rem;font-size:.78rem;cursor:pointer}
.chk{display:inline-flex;gap:.4rem;align-items:center;font-size:.8rem}.chk input{margin:0}
.filtros{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin:.6rem 0 .3rem}
details>summary{list-style:none;cursor:pointer;color:var(--muted);font-size:.8rem}details>summary::-webkit-details-marker{display:none}
details>summary::before{content:"▸ ";font-family:var(--mono);color:var(--faint)}details[open]>summary::before{content:"▾ "}
.i{display:inline-flex;align-items:center;justify-content:center;width:.95rem;height:.95rem;border-radius:50%;border:1px solid var(--faint);color:var(--faint);font-family:var(--mono);font-size:.6rem;vertical-align:middle;margin-left:.3rem;cursor:help;flex:none}
.ev{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;font-size:.78rem;color:var(--muted)}
.ev i{font-style:normal;font-family:var(--mono);display:inline-flex;align-items:center;justify-content:center;width:1.2rem;height:1.2rem;border-radius:4px;background:var(--sunk);color:var(--ink);font-size:.7rem;flex:none}
.ev.falta i{background:transparent;border:1px dashed var(--mal);color:var(--mal)}
/* cifras */
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem}
.tile{padding:.7rem .9rem .65rem;display:flex;flex-direction:column;gap:.2rem;min-width:0}
.tile .num{font-size:1.9rem;font-weight:600;letter-spacing:-.02em;line-height:1.1}.tile .num small{font-size:.76rem;font-weight:400;color:var(--muted);letter-spacing:0;margin-left:.35rem}
.tile .ln{font-size:.76rem;color:var(--muted);line-height:1.4}.tile .ln b{color:var(--ink);font-weight:600}.tile .ln b.red{color:var(--mal)}.tile.mal .num{color:var(--mal)}
/* tablas */
.tbl{width:100%;border-collapse:collapse;font-size:.84rem}
.tbl th{text-align:left;font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500;padding:.45rem .65rem;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl th.r{text-align:right}
.tbl td{padding:.42rem .65rem;border-top:1px solid var(--line-soft);vertical-align:top}.tbl tr:first-child td{border-top:0}
.tbl td.c{width:1%;white-space:nowrap}.tbl td.r{text-align:right;white-space:nowrap}.tbl td.t{font-family:var(--mono);font-size:.74rem;color:var(--muted);white-space:nowrap}
.tbl td .sub{display:block;color:var(--muted);font-size:.76rem;margin-top:.05rem}.tbl td .sub.red{color:var(--mal)}
.tbl tr.grp td{background:var(--hover)}.tbl tr.sub td{padding-top:.3rem;padding-bottom:.3rem;font-size:.8rem}.tbl tr.sub td:first-child{padding-left:2.2rem}
.tbl tr.falta td{color:var(--muted)}
.wrap{overflow-x:auto}
.foot{display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding:.45rem .65rem;border-top:1px solid var(--line);font-size:.76rem;color:var(--muted);flex-wrap:wrap}
.grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.6rem .9rem;background:var(--sunk);border-radius:8px;padding:.75rem .9rem;margin:.8rem 0}
.cell .v{font-weight:600;margin-top:.1rem;overflow-wrap:anywhere;font-size:.9rem}.cell .s{font-size:.76rem;color:var(--muted);line-height:1.35;overflow-wrap:anywhere}
.search{display:flex;align-items:center;gap:.6rem;background:var(--raise);border:1px solid var(--line);border-radius:8px;padding:.55rem .9rem;box-shadow:var(--shadow)}
.search input{flex:1;border:0;outline:0;font:inherit;font-size:.95rem;min-width:0;background:transparent}
.search .hint{font-size:.72rem;color:var(--faint);white-space:nowrap}.search kbd{font-family:var(--mono);font-size:.64rem;border:1px solid var(--line);border-radius:3px;padding:0 .3em;background:var(--sunk)}
.idx{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:0 1.5rem}
.idx .g{display:flex;align-items:baseline;gap:.5rem;padding:.26rem 0;border-top:1px solid var(--line-soft);font-size:.82rem}
.idx .g .nm{flex:1;min-width:0}.idx .g .n{font-family:var(--mono);font-size:.7rem;color:var(--muted);white-space:nowrap}
.crumbs{font-size:.8rem;color:var(--muted);display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}.crumbs .sp{flex:1}.crumbs b{color:var(--ink);font-weight:500}
.head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:.5rem}
.head h1{font-size:1.45rem;font-weight:600;letter-spacing:-.01em;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.head .acts{display:flex;gap:.45rem;flex-wrap:wrap}.tags{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.3rem}
.nota{font-size:.76rem;color:var(--muted);margin-top:.6rem;line-height:1.45}
.legend{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;font-size:.72rem;color:var(--muted);padding:.4rem .2rem 0}
.legend i{display:inline-block;width:.75rem;height:.75rem;border-radius:2px;vertical-align:-2px;margin-right:.25rem}
/* ── la línea de tiempo ── */
.tl{padding:.6rem .8rem .5rem;overflow:hidden}
.tl-r{display:grid;grid-template-columns:15.5rem minmax(0,1fr);gap:.6rem;align-items:center;min-height:17px}
.tl-r+.tl-r{margin-top:2px}
.tl-l{display:flex;justify-content:space-between;gap:.5rem;align-items:baseline;min-width:0;font-size:.8rem;white-space:nowrap;overflow:hidden}
.tl-l .nm{overflow:hidden;text-overflow:ellipsis}.tl-l .nm.mut{color:var(--muted)}
.tl-n{font-family:var(--mono);font-size:.66rem;color:var(--faint);white-space:nowrap}.tl-n b{color:var(--mal);font-weight:500}
.tl-c{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:1px;height:14px}
.tl-c i{display:block;background:var(--hover);border-radius:1px;min-width:0}
.tl-c i.d1{background:var(--d1)}.tl-c i.d2{background:var(--d2)}.tl-c i.d3{background:var(--d3)}.tl-c i.d4{background:var(--d4)}.tl-c i.d5{background:var(--d5)}
.tl-c i.m1{background:var(--m1)}.tl-c i.m2{background:var(--m2)}.tl-c i.m3{background:var(--m3)}
.tl-c i.e{background:transparent;border:1px dashed var(--mal)}
.tl-c i.f{background:repeating-linear-gradient(135deg,transparent 0 2px,var(--line-soft) 2px 3px)}
.tl-c i.on{outline:2px solid var(--accent);outline-offset:-1px;z-index:1}
.tl-ax .tl-c{height:auto;align-items:end}.tl-ax .tl-c span{font-family:var(--mono);font-size:.62rem;color:var(--faint);white-space:nowrap;line-height:1;padding-bottom:3px;border-left:1px solid var(--line);padding-left:3px}
.tl-ax .tl-c span.on{color:var(--accent);font-weight:600;border-left-color:var(--accent)}
.tl-sep{height:1px;background:var(--line);margin:.45rem 0}
.tl-r.sum .tl-l{font-weight:600}
.tl-more{font-size:.76rem;color:var(--muted);padding:.4rem 0 0 .2rem}
.tl-win{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-bottom:.6rem}
.rango{display:inline-flex;gap:.3rem;align-items:center;font-size:.76rem;color:var(--muted)}.rango input{font:inherit;font-family:var(--mono);font-size:.72rem;min-width:12.5rem;border:1px solid var(--line);border-radius:4px;padding:.15rem .35rem;width:6.2rem;background:var(--raise);color:var(--muted)}

/* ── lo que sólo existe con datos vivos ─────────────────────────────────────── */
a.pill{text-decoration:none;display:inline-block}
.cargando,.vacio{padding:1.2rem 1rem;color:var(--muted);font-size:.86rem}
.vacio{font-style:italic;color:var(--faint)}
.otro{margin-top:1.2rem;padding:.6rem .5rem 0;border-top:1px solid var(--line);font-size:.78rem;line-height:1.8}
.sec>.sh .k a.l{color:inherit}
.tl-c i{cursor:pointer}.tl-c i.f{cursor:default}
.tl-ax .tl-c span{pointer-events:none}
.btn:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
select{font:inherit;font-size:.78rem;border:0;background:transparent;color:var(--ink);max-width:14rem}
.selc select{padding:0}
.chk{cursor:pointer}
.search input::placeholder{color:var(--faint)}
details.tipo{margin-top:.2rem}details.tipo summary{font-size:.74rem}details.tipo ul{margin:.3rem 0 0;padding-left:1.1rem;font-size:.78rem;color:var(--muted)}
details.tipo li{margin:.12rem 0}
.espacios{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:.7rem;margin-top:1rem}
.espacios a.tarjeta{display:block;padding:.8rem 1rem;text-decoration:none;color:inherit}
.espacios a.tarjeta:hover{border-color:var(--accent)}
.espacios .n{font-weight:600;font-size:1.05rem}.espacios .h{font-family:var(--mono);font-size:.7rem;color:var(--muted);overflow-wrap:anywhere}
.entrada{max-width:60rem;margin:0 auto;padding:2rem 1.4rem}
.entrada h1{font-size:1.5rem;font-weight:600;margin:0 0 .3rem}
.aviso{position:fixed;right:1rem;bottom:1rem;max-width:26rem;background:var(--ink);color:#fff;border-radius:6px;padding:.55rem .8rem;font-size:.82rem;box-shadow:0 8px 24px -10px rgba(0,0,0,.5);z-index:10}
.aviso.mal{background:var(--mal)}
.btn.armado{background:var(--mal);color:#fff;border-color:var(--mal)}
.btn[disabled]{opacity:.5;cursor:default}
.fallo{background:var(--mal-soft);color:var(--mal-ink);border:1px solid var(--mal);border-radius:8px;padding:.7rem .9rem;margin:1rem 0;font-size:.86rem}
.tbl tr.falta td{color:var(--muted)}
@media (max-width:900px){.shell{grid-template-columns:1fr}.side{border-right:0;border-bottom:1px solid var(--line)}nav{flex-direction:row;flex-wrap:wrap}.tiles{grid-template-columns:repeat(2,minmax(0,1fr))!important}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tl-r{grid-template-columns:9rem minmax(0,1fr)}}
.tbl td.q{white-space:nowrap}

/* el inicio de sesión: la entrada con passkey es la del panel de siempre (src/puerta.js); aquí sólo su aspecto */
.portada{max-width:34rem;margin:0 auto;padding:3rem 1.5rem}.portada h1{font-size:1.5rem;font-weight:600;margin:0 0 .3rem}
.portada .sub{color:var(--muted);margin-bottom:1.2rem}
.btn.primario{background:var(--accent);color:var(--raise);border-color:var(--accent);font-weight:600;font-size:1rem;padding:.65rem 1.2rem;border-radius:8px}
.btn.primario:hover{border-color:var(--ink)}.btn.primario:disabled{opacity:.6;cursor:wait}
.nota.aviso{border-left:3px solid var(--accent);background:var(--accent-soft);color:var(--ink);padding:.7rem .9rem;border-radius:0 6px 6px 0;margin:0 0 1rem}
.otro .quien{color:var(--muted);overflow-wrap:anywhere}

/* el desplegable «Más» de la cabecera de una ficha (comun.js, menuMas): botón con borde = cambia; rojo = quita; el enlace, subrayado = lleva */
.mas{position:relative;display:inline-block}
.mas-lista{position:absolute;right:0;top:calc(100% + .25rem);z-index:8;min-width:15rem;max-width:22rem;background:var(--raise);border:1px solid var(--line);border-radius:6px;box-shadow:0 8px 24px -12px rgba(26,30,38,.35);padding:.25rem;display:flex;flex-direction:column;gap:1px}
.mas-lista[hidden]{display:none}
.mas-i{display:block;width:100%;text-align:left;background:none;border:0;border-radius:4px;padding:.4rem .6rem;font-size:.8rem;line-height:1.3;color:var(--ink);text-decoration:none;white-space:normal;cursor:pointer}
.mas-i:hover{background:var(--hover)}.mas-i:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;background:var(--hover)}
.mas-i.d{color:var(--mal)}.mas-i.d:hover{background:var(--mal-soft)}
.mas-i.armado{background:var(--mal);color:#fff}
.mas-i.l{text-decoration:underline;text-underline-offset:2px}
.mas-sep{height:1px;background:var(--line-soft);margin:.25rem 0}

/* las fechas libres de Actividad: dos campos de fecha y hora (la maqueta, .rango) */
.rango{display:inline-flex;gap:.5rem;align-items:center;flex-wrap:wrap;font-size:.76rem;color:var(--muted)}
.rango label{display:inline-flex;gap:.3rem;align-items:center}
.rango input{font:inherit;font-family:var(--mono);font-size:.72rem;min-width:12.5rem;border:1px solid var(--line);border-radius:4px;padding:.15rem .35rem;background:var(--raise);color:var(--ink)}
.rango input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* Vincular un agente a un runtime: el desplegable junto a su botón, con borde para que se vea que se elige. */
.acts select{border:1px solid #aeb6c1;border-radius:5px;background:var(--raise);padding:.2rem .35rem;font-size:.78rem}
.nota.amplia{border-left:3px solid var(--mal);background:var(--mal-soft);color:var(--ink);padding:.7rem .9rem;border-radius:0 6px 6px 0;margin:0 0 .8rem;font-size:.82rem}
/* Formularios de Ajustes (invitar, dar de alta, fechas de la exportación): campos de texto en una fila, con su botón */
.formu{display:flex;gap:.8rem;flex-wrap:wrap;align-items:flex-end;padding:.75rem .9rem;margin:.5rem 0}
.campo{display:flex;flex-direction:column;gap:.2rem;font-size:.74rem;color:var(--muted)}
.campo input{font:inherit;font-size:.85rem;color:var(--ink);background:var(--raise);border:1px solid #aeb6c1;border-radius:5px;padding:.3rem .5rem;min-width:11rem}
.campo input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.formu .btn.primario{font-size:.85rem;padding:.38rem .9rem;border-radius:5px}
.nota.nueva{margin:.5rem 0}
.enlace{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-top:.5rem}
.enlace input{flex:1 1 24rem;min-width:0;font-size:.78rem;color:var(--ink);background:var(--raise);border:1px solid #aeb6c1;border-radius:5px;padding:.3rem .5rem}
.sub-t{margin:.9rem 0 .3rem;font-size:.85rem}
.cnt{display:flex;gap:.4rem;flex-wrap:wrap;margin:.3rem 0 .6rem}