/* ============================================================
mariellangsaez · Content House — hoja de estilo de la casa
Sistema de diseño (2026-09): fondo claro cálido, tarjetas blancas
con radio 14–16 y sombra suave, Inter, tiles de icono en pastel,
chips redondeados, mucho aire. En oscuro, lo mismo sobre azul noche.
Sin frameworks. Todo lo que ves aquí es lo que hay.
Índice
1. Tokens (dos temas) 5. Componentes: kpi, tile, sección, vacío
2. Base y tipografía 6. Cascarón: barra, cabecera, franja, cinta
3. Botones, chips, badges 7. Páginas: entrar, expediente, cola, calendario…
4. Formularios, tablas, tarjetas 8. Planta (oficina antigua) y pizarra
============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
/* ------------------------------------------------------------
1. Tokens. "claro" es el tema de referencia (mockups Content & Sales
House); "oscuro" es azul noche con tarjetas #131a2b. El atributo
data-tema lo pone base.html en antes de pintar.
------------------------------------------------------------ */
:root, :root[data-tema="claro"] {
color-scheme: light;
--bg: #f6f4ef;
--bg-2: #fbfaf7;
--panel: #ffffff;
--panel-2: #f3f1ea;
--linea: #e9e5dc;
--linea-2: #d8d3c8;
--texto: #1c1c28;
--texto-2: #4a4a5e;
--apagado: #737386;
/* acento de la casa (violeta) */
--acento: #6d4ff2;
--acento-2: #5b3fd9;
--acento-texto: #ffffff;
--acento-suave: rgba(109, 79, 242, .11);
--acento-borde: rgba(109, 79, 242, .40);
/* paleta pastel para tiles, chips y badges (color + versión suave) */
--violeta: #6d4ff2; --violeta-suave: rgba(109, 79, 242, .11);
--verde: #178a56; --verde-suave: rgba(31, 157, 99, .13);
--naranja: #d4740a; --naranja-suave: rgba(242, 140, 20, .15);
--azul: #2f6fe0; --azul-suave: rgba(47, 111, 224, .11);
--rojo: #d9363e; --rojo-suave: rgba(217, 54, 62, .11);
--rosa: #d1367a; --rosa-suave: rgba(209, 54, 122, .11);
--negro: #1c1c28; --negro-suave: rgba(28, 28, 40, .08);
/* semánticos (mismos colores de siempre, nombres que ya usa el JS) */
--ok: var(--verde);
--mal: var(--rojo);
--aviso: var(--naranja);
--info: var(--azul);
--ok-suave: var(--verde-suave);
--mal-suave: var(--rojo-suave);
--aviso-suave: var(--naranja-suave);
--info-suave: var(--azul-suave);
--ok-borde: rgba(31, 157, 99, .45);
--mal-borde: rgba(217, 54, 62, .45);
--aviso-borde: rgba(242, 140, 20, .5);
--info-borde: rgba(47, 111, 224, .45);
/* redes */
--red-x: #1c1c28;
--red-ig: #d1367a;
--red-li: #0a66c2;
--red-yt: #d9363e;
--red-wa: #178a56;
--red-x-suave: var(--negro-suave);
--red-ig-suave: var(--rosa-suave);
--red-li-suave: var(--azul-suave);
--red-yt-suave: var(--rojo-suave);
--red-wa-suave: var(--verde-suave);
--red-x-borde: rgba(28, 28, 40, .35);
--red-ig-borde: rgba(209, 54, 122, .45);
--red-li-borde: rgba(10, 102, 194, .45);
--red-yt-borde: rgba(217, 54, 62, .45);
--red-wa-borde: rgba(31, 157, 99, .45);
/* salas */
--sala-direccion: #d4740a;
--sala-asistencia: #6d4ff2;
--sala-sala_x: #2f6fe0;
--sala-sala_ig: #d1367a;
--sala-sala_li: #0a4f8f;
--sala-sala_yt: #d9363e;
--sala-sala_wa: #178a56;
--sala-ventas: #e0891b;
--sala-monitor: #1f9e9e;
--sala-auditoria: #6b6b7b;
--sala-comite: #5e6ccf;
/* series extra de los gráficos */
--serie-1: #3a9d6a; --serie-2: #a24bd9; --serie-3: #1f8fb8; --serie-4: #d9901c; --serie-5: #5e6ccf; --serie-6: #d94040;
--serie-contraste: #e0891b;
/* capas, fondos y sombras */
--cabecera-fondo: rgba(246, 244, 239, .88);
--capa: rgba(28, 28, 40, .03);
--capa-2: rgba(28, 28, 40, .055);
--puntos: transparent;
--radial-1: transparent;
--radial-2: transparent;
--grano: 0;
--escenario-arriba: rgba(255, 255, 255, .6);
--escenario-abajo: rgba(28, 28, 40, .03);
--telon: rgba(28, 28, 40, .32);
--brillo-borde: rgba(255, 255, 255, .8);
--fila-hover: rgba(28, 28, 40, .03);
--sombra-1: 0 1px 2px rgba(28, 28, 40, .04), 0 4px 14px rgba(28, 28, 40, .05);
--sombra-2: 0 8px 24px rgba(28, 28, 40, .10), 0 2px 6px rgba(28, 28, 40, .06);
--sombra: var(--sombra-2);
--sombra-tarjeta: var(--sombra-1);
--sombra-flotante: 0 18px 48px rgba(28, 28, 40, .18);
/* planta isométrica y avatares */
--planta-suelo: rgba(28, 28, 40, .03);
--planta-suelo-borde: rgba(28, 28, 40, .08);
--sala-pared-1: .30;
--sala-pared-2: .18;
--sala-suelo-op: .12;
--sombra-avatar: rgba(28, 28, 40, .22);
--avatar-texto: #ffffff;
--avatar-brillo: rgba(255, 255, 255, .45);
--avatar-anillo: rgba(255, 255, 255, .9);
--avatar-inactivo: #b9b9c4;
--avatar-inactivo-borde: #8b8b98;
--avatar-inactivo-texto: #ffffff;
--avatar-inactivo-brillo: rgba(255, 255, 255, .5);
--halo: rgba(109, 79, 242, .8);
/* estados con significado */
--estado-bloqueado: var(--rojo);
--estado-revision: var(--naranja);
--estado-trabajando: var(--verde);
--estado-completado: var(--azul);
--estado-libre: var(--apagado);
--estado-inactivo: #9a9aa8;
/* tipografía */
--sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Times New Roman", serif;
--mono: "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
/* escala de espaciado, radios */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
--radio-s: 10px; --radio: 14px; --radio-l: 18px;
--gutter: clamp(16px, 3vw, 40px);
--transicion: 150ms ease;
}
:root[data-tema="oscuro"] {
color-scheme: dark;
--bg: #0c1220;
--bg-2: #101728;
--panel: #131a2b;
--panel-2: #1a2336;
--linea: #222c42;
--linea-2: #2f3b56;
--texto: #e8edf7;
--texto-2: #b6c1d8;
--apagado: #8a97b1;
--acento: #a78bfa;
--acento-2: #bfa8ff;
--acento-texto: #17102e;
--acento-suave: rgba(167, 139, 250, .16);
--acento-borde: rgba(167, 139, 250, .5);
--violeta: #a78bfa; --violeta-suave: rgba(167, 139, 250, .16);
--verde: #5ccb8f; --verde-suave: rgba(92, 203, 143, .16);
--naranja: #f5a95c; --naranja-suave: rgba(245, 169, 92, .16);
--azul: #7fb2ff; --azul-suave: rgba(127, 178, 255, .16);
--rojo: #f2727a; --rojo-suave: rgba(242, 114, 122, .16);
--rosa: #ff86b7; --rosa-suave: rgba(255, 134, 183, .16);
--negro: #e8edf7; --negro-suave: rgba(232, 237, 247, .10);
--ok-borde: rgba(92, 203, 143, .5);
--mal-borde: rgba(242, 114, 122, .5);
--aviso-borde: rgba(245, 169, 92, .5);
--info-borde: rgba(127, 178, 255, .5);
--red-x: #e8edf7;
--red-ig: #ff86b7;
--red-li: #7fb2ff;
--red-yt: #ff7676;
--red-wa: #66d493;
--red-x-borde: rgba(232, 237, 247, .35);
--red-ig-borde: rgba(255, 134, 183, .5);
--red-li-borde: rgba(127, 178, 255, .5);
--red-yt-borde: rgba(255, 118, 118, .5);
--red-wa-borde: rgba(102, 212, 147, .5);
--sala-direccion: #f5a95c;
--sala-asistencia: #c9a8ff;
--sala-sala_x: #8fb5ff;
--sala-sala_ig: #ff86b7;
--sala-sala_li: #7fb2ff;
--sala-sala_yt: #ff7676;
--sala-sala_wa: #66d493;
--sala-ventas: #ffb36a;
--sala-monitor: #63d6d6;
--sala-auditoria: #d7dded;
--sala-comite: #b3bfff;
--serie-1: #9ad1a5; --serie-2: #e9a0ff; --serie-3: #8fe3ff; --serie-4: #ffd27f; --serie-5: #c0c8ff; --serie-6: #ff9f9f;
--serie-contraste: #f5a95c;
--cabecera-fondo: rgba(12, 18, 32, .86);
--capa: rgba(255, 255, 255, .025);
--capa-2: rgba(255, 255, 255, .05);
--escenario-arriba: rgba(255, 255, 255, .02);
--escenario-abajo: rgba(0, 0, 0, .12);
--telon: rgba(0, 0, 0, .45);
--brillo-borde: rgba(255, 255, 255, .04);
--fila-hover: rgba(255, 255, 255, .03);
--sombra-1: 0 1px 2px rgba(0, 0, 0, .25), 0 4px 14px rgba(0, 0, 0, .18);
--sombra-2: 0 10px 30px rgba(0, 0, 0, .35);
--sombra-flotante: 0 18px 48px rgba(0, 0, 0, .5);
--planta-suelo: rgba(255, 255, 255, .025);
--planta-suelo-borde: rgba(255, 255, 255, .06);
--sala-pared-1: .38;
--sala-pared-2: .22;
--sala-suelo-op: .14;
--sombra-avatar: rgba(0, 0, 0, .35);
--avatar-texto: #0b1220;
--avatar-brillo: rgba(255, 255, 255, .35);
--avatar-anillo: rgba(255, 255, 255, .18);
--avatar-inactivo: #6b7690;
--avatar-inactivo-borde: #3f4860;
--avatar-inactivo-texto: #1a2236;
--avatar-inactivo-brillo: rgba(255, 255, 255, .12);
--halo: rgba(167, 139, 250, .9);
--estado-inactivo: #6b7690;
}
/* ------------------------------------------------------------
2. Base y tipografía
------------------------------------------------------------ */
* { box-sizing: border-box; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; }
html[data-tema="oscuro"] { color-scheme: dark; }
body {
margin: 0;
min-height: 100vh;
color: var(--texto);
background-color: var(--bg);
font-family: var(--sans);
font-size: 14px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
a { color: var(--acento); text-decoration: none; transition: color var(--transicion); }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--sans); font-weight: 650; letter-spacing: -.02em; margin: 0; line-height: 1.2; color: var(--texto); }
h1 { font-size: clamp(24px, 3vw, 32px); letter-spacing: -.03em; }
h2 { font-size: clamp(18px, 2.2vw, 22px); }
h3 { font-size: 15px; letter-spacing: -.01em; }
p { margin: 0 0 .6em; }
b, strong { font-weight: 600; }
small { font-size: 12px; }
/* .mono: etiqueta pequeña de metadatos. Ya no es monoespaciada ni mayúscula:
sans 11.5px gris. Para cifras tabulares está .num y .cifra. */
.mono { font-family: var(--sans); font-size: 11.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--apagado); }
.sobretitulo { font-family: var(--sans); font-size: 10.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--apagado); }
.num, .cifra, .tabular { font-variant-numeric: tabular-nums; }
code, kbd, .codigo { font-family: var(--mono); }
.apagado { color: var(--apagado); }
.cursiva { font-style: italic; }
.oculto { display: none !important; }
[hidden] { display: none !important; }
hr { border: 0; border-top: 1px solid var(--linea); margin: 16px 0; }
::selection { background: var(--acento-suave); }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 6px; }
button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; }
/* ------------------------------------------------------------
3. Botones, chips, badges
------------------------------------------------------------ */
.boton {
display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer;
background: var(--panel); border: 1px solid var(--linea-2); border-radius: var(--radio-s);
padding: 8px 14px; font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none;
color: var(--texto); line-height: 1.25; white-space: nowrap; text-decoration: none;
transition: background var(--transicion), border-color var(--transicion), color var(--transicion), box-shadow var(--transicion), transform var(--transicion);
}
.boton:hover { background: var(--panel-2); border-color: var(--linea-2); color: var(--texto); text-decoration: none; }
.boton:active { transform: translateY(1px); }
.boton:disabled { opacity: .5; cursor: default; transform: none; }
.boton svg { width: 16px; height: 16px; flex: 0 0 auto; }
.boton.primario { background: var(--acento); color: var(--acento-texto); border-color: var(--acento); box-shadow: 0 1px 2px rgba(28, 28, 40, .08); }
.boton.primario:hover { background: var(--acento-2); border-color: var(--acento-2); color: var(--acento-texto); }
.boton.secundario { background: var(--acento-suave); color: var(--acento); border-color: transparent; }
.boton.secundario:hover { background: var(--acento-suave); border-color: var(--acento-borde); }
.boton.fantasma { background: transparent; border-color: transparent; color: var(--texto-2); }
.boton.fantasma:hover { background: var(--capa-2); color: var(--texto); }
.boton.ok { background: var(--verde-suave); border-color: transparent; color: var(--verde); }
.boton.ok:hover { border-color: var(--ok-borde); }
.boton.mal, .boton.peligro { background: var(--rojo-suave); border-color: transparent; color: var(--rojo); }
.boton.mal:hover, .boton.peligro:hover { border-color: var(--mal-borde); }
.boton.pequeno { padding: 5px 10px; font-size: 12px; border-radius: 8px; }
.boton.pequeno svg { width: 14px; height: 14px; }
.boton.activo { color: var(--acento); border-color: var(--acento-borde); background: var(--acento-suave); }
.boton .girando { display: inline-block; animation: girar 1s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.grupo-botones { display: inline-flex; background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio-s); padding: 3px; gap: 2px; }
.grupo-botones .boton { border: 0; border-radius: 7px; background: transparent; box-shadow: none; }
.grupo-botones .boton + .boton { border-left: 0; }
.grupo-botones .boton:hover { background: var(--capa-2); }
.grupo-botones .boton.activo { background: var(--acento-suave); color: var(--acento); }
.chip {
display: inline-flex; align-items: center; gap: 5px; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none;
padding: 3px 9px; border-radius: 999px; border: 1px solid transparent; color: var(--texto-2); background: var(--capa-2);
white-space: nowrap; line-height: 1.4; vertical-align: middle;
}
.chip-admin { color: var(--acento); background: var(--acento-suave); }
.chip-ok { color: var(--verde); background: var(--verde-suave); }
.chip-mal { color: var(--rojo); background: var(--rojo-suave); }
.chip-aviso { color: var(--naranja); background: var(--naranja-suave); }
.chip-info { color: var(--azul); background: var(--azul-suave); }
.chip-violeta { color: var(--violeta); background: var(--violeta-suave); }
.chip-red-x { color: var(--red-x); background: var(--red-x-suave); }
.chip-red-ig { color: var(--red-ig); background: var(--red-ig-suave); }
.chip-red-li { color: var(--red-li); background: var(--red-li-suave); }
.chip-red-yt { color: var(--red-yt); background: var(--red-yt-suave); }
.chip-red-wa { color: var(--red-wa); background: var(--red-wa-suave); }
.chip.contorno { background: transparent; border-color: var(--linea-2); }
.chip svg { width: 12px; height: 12px; flex: 0 0 auto; }
/* badges de estado (los seis): mismos colores, chip suave con punto */
.estado {
display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0;
padding: 3px 9px 3px 8px; border-radius: 999px; border: 1px solid transparent;
color: var(--texto-2); background: var(--capa-2); line-height: 1.4; vertical-align: middle;
}
.estado .estado-icono { font-style: normal; font-size: 10px; line-height: 1; flex: 0 0 auto; }
.estado .estado-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.estado.estado-bloqueado { color: var(--estado-bloqueado); background: var(--rojo-suave); }
.estado.estado-esperando_revision { color: var(--estado-revision); background: var(--naranja-suave); }
.estado.estado-trabajando { color: var(--estado-trabajando); background: var(--verde-suave); }
.estado.estado-completado { color: var(--estado-completado); background: var(--azul-suave); }
.estado.estado-libre { color: var(--estado-libre); background: var(--capa-2); }
.estado.estado-inactivo { color: var(--estado-inactivo); background: transparent; border-color: var(--linea-2); border-style: dashed; }
.estado.estado-trabajando .estado-icono { animation: latir 1.4s ease-in-out infinite; }
@keyframes latir { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
.estado.grande { font-size: 12.5px; padding: 5px 12px 5px 10px; }
.estado.grande .estado-texto { white-space: normal; }
/* en el svg de la planta */
.estado-svg-fondo { stroke-width: .6; }
.estado-svg-texto { font-family: var(--sans); font-size: 6.5px; font-weight: 600; text-anchor: middle; pointer-events: none; }
.estado-svg-punto { animation: latir 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.score { font-variant-numeric: tabular-nums; font-weight: 700; }
.score.alto { color: var(--verde); }
.score.medio { color: var(--naranja); }
.score.bajo { color: var(--apagado); }
.punto-verde { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 3px var(--verde-suave); animation: latir 2.2s ease-in-out infinite; }
kbd { font-family: var(--sans); font-size: 10.5px; font-weight: 600; padding: 1px 6px; border: 1px solid var(--linea-2); border-bottom-width: 2px; border-radius: 6px; background: var(--panel); color: var(--texto-2); }
/* ------------------------------------------------------------
4. Formularios, tablas, tarjetas, listas
------------------------------------------------------------ */
input, select, textarea, button { font: inherit; color: var(--texto); }
input[type=text], input[type=password], input[type=url], input[type=date], input[type=number], input[type=search], input[type=email], input[type=datetime-local], select, textarea {
width: 100%; background: var(--panel); border: 1px solid var(--linea-2); border-radius: var(--radio-s);
padding: 9px 12px; outline: none; font-size: 13.5px; color: var(--texto);
transition: border-color var(--transicion), box-shadow var(--transicion);
}
:root[data-tema="oscuro"] input[type=text], :root[data-tema="oscuro"] input[type=password], :root[data-tema="oscuro"] input[type=url], :root[data-tema="oscuro"] input[type=date],
:root[data-tema="oscuro"] input[type=number], :root[data-tema="oscuro"] input[type=search], :root[data-tema="oscuro"] input[type=datetime-local], :root[data-tema="oscuro"] select, :root[data-tema="oscuro"] textarea { background: var(--bg-2); }
input::placeholder, textarea::placeholder { color: var(--apagado); opacity: .8; }
input:focus, select:focus, textarea:focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); outline: none; }
select { appearance: none; -webkit-appearance: none; padding-right: 30px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 10px center; }
textarea { min-height: 90px; resize: vertical; line-height: 1.5; }
input[type=file] { font-size: 12.5px; color: var(--texto-2); }
input[type=file]::file-selector-button { font: inherit; font-weight: 600; font-size: 12px; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--linea-2); background: var(--panel); color: var(--texto); margin-right: 10px; cursor: pointer; }
input[type=checkbox], input[type=radio] { accent-color: var(--acento); width: 15px; height: 15px; }
input[type=range] { accent-color: var(--acento); }
label.campo { display: block; margin-bottom: 12px; }
label.campo > span { display: block; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--texto-2); margin-bottom: 5px; }
.filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.filtros select, .filtros input { width: auto; min-width: 130px; max-width: 280px; padding: 7px 10px; font-size: 13px; }
.filtros select { padding-right: 28px; }
.filtros .mono { margin-right: 0; margin-left: 4px; font-weight: 600; color: var(--apagado); }
.filtros .mono:first-child { margin-left: 0; }
.lista { display: flex; flex-direction: column; gap: 12px; }
.panel, .tarjeta {
background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio);
box-shadow: var(--sombra-1);
}
.panel { padding: 18px 20px; }
.panel + .panel { margin-top: 14px; }
.panel h3 { margin-bottom: 8px; }
.panel .mono.cabecera-panel, .cabecera-panel { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 14px; font-weight: 650; color: var(--texto); letter-spacing: -.01em; }
.cabecera-panel .apagado { font-weight: 500; font-size: 12px; color: var(--apagado); }
.tarjeta { padding: 14px 16px; transition: border-color var(--transicion), box-shadow var(--transicion), transform var(--transicion); }
.tarjeta:hover { border-color: var(--linea-2); }
.tarjeta.clicable, .tarjeta[tabindex], a.tarjeta { cursor: pointer; }
.tarjeta.clicable:hover, .tarjeta[tabindex]:hover, a.tarjeta:hover { box-shadow: var(--sombra-2); transform: translateY(-1px); text-decoration: none; }
.tarjeta .fila { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tarjeta .fila .mono { margin-left: auto; }
.tarjeta .texto { margin: 8px 0; white-space: pre-wrap; word-break: break-word; line-height: 1.5; }
.tarjeta .acciones { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.tarjeta .nota { color: var(--texto-2); font-size: 13px; border-left: 2px solid var(--linea-2); padding-left: 10px; margin-top: 8px; }
.error { color: var(--rojo); font-size: 12.5px; font-weight: 500; }
.rejilla-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.rejilla-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 860px) { .rejilla-2, .rejilla-3 { grid-template-columns: minmax(0, 1fr); } }
/* tablas */
.tabla-envoltorio { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--panel); box-shadow: var(--sombra-1); }
table.tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabla th, .tabla td { padding: 10px 14px; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: top; }
.tabla th { font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: .02em; text-transform: none; color: var(--apagado); background: var(--panel-2); white-space: nowrap; }
.tabla th.ordenable { cursor: pointer; user-select: none; }
.tabla th.ordenable:hover { color: var(--texto); }
.tabla th.ordenado { color: var(--acento); }
.tabla tbody tr { transition: background var(--transicion); }
.tabla tbody tr:hover td { background: var(--fila-hover); }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla td.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
/* pestañas (tabs): píldoras en un contenedor */
.pestanas { display: inline-flex; gap: 3px; background: var(--panel); border: 1px solid var(--linea); border-radius: 12px; padding: 4px; margin-bottom: 18px; max-width: 100%; overflow-x: auto; }
.pestana {
background: transparent; border: 0; cursor: pointer; border-radius: 9px;
font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none;
color: var(--texto-2); padding: 7px 16px; white-space: nowrap; transition: background var(--transicion), color var(--transicion);
}
.pestana:hover { color: var(--texto); background: var(--capa-2); }
.pestana.activo { color: var(--acento); background: var(--acento-suave); }
/* avisos flotantes */
.aviso {
position: fixed; left: 50%; bottom: 62px; transform: translateX(-50%);
background: var(--panel); border: 1px solid var(--linea-2); border-radius: var(--radio);
padding: 10px 16px; box-shadow: var(--sombra-flotante); z-index: 100; max-width: min(92vw, 520px);
font-size: 13px; font-weight: 500;
}
.aviso.ok { border-color: var(--ok-borde); }
.aviso.mal { border-color: var(--mal-borde); }
/* ------------------------------------------------------------
5. Componentes: tile, kpi, sección, estado vacío, avatar
------------------------------------------------------------ */
/* tile de icono en pastel */
.tile {
display: inline-grid; place-items: center; flex: 0 0 auto;
width: 40px; height: 40px; border-radius: 12px;
background: var(--violeta-suave); color: var(--violeta);
}
.tile svg { width: 19px; height: 19px; display: block; }
.tile.s { width: 30px; height: 30px; border-radius: 9px; }
.tile.s svg { width: 15px; height: 15px; }
.tile.l { width: 52px; height: 52px; border-radius: 15px; }
.tile.l svg { width: 24px; height: 24px; }
.tile.violeta { background: var(--violeta-suave); color: var(--violeta); }
.tile.verde { background: var(--verde-suave); color: var(--verde); }
.tile.naranja { background: var(--naranja-suave); color: var(--naranja); }
.tile.azul { background: var(--azul-suave); color: var(--azul); }
.tile.rojo { background: var(--rojo-suave); color: var(--rojo); }
.tile.rosa { background: var(--rosa-suave); color: var(--rosa); }
.tile.negro { background: var(--negro-suave); color: var(--negro); }
.tile.gris { background: var(--capa-2); color: var(--apagado); }
/* KPI: tile · etiqueta / valor / delta · sparkline. Funciona con el marcado
antiguo (.mono + .cifra + .delta) y con el nuevo (Casa.kpi). */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi {
display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto auto;
grid-template-areas: "tile etiqueta chispa" "tile cifra chispa" "tile delta chispa";
align-items: center; align-content: center; gap: 2px 0;
background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 14px 16px;
box-shadow: var(--sombra-1); min-width: 0;
}
.kpi > .mono, .kpi .kpi-etiqueta { grid-area: etiqueta; font-size: 12px; font-weight: 500; color: var(--texto-2); line-height: 1.3; }
.kpi .cifra { grid-area: cifra; font-family: var(--sans); font-size: 26px; font-weight: 650; letter-spacing: -.03em; line-height: 1.15; color: var(--texto); font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }
.kpi .cifra.acento { color: var(--acento); }
.kpi .delta { grid-area: delta; font-family: var(--sans); font-size: 11.5px; font-weight: 500; color: var(--apagado); display: inline-flex; align-items: center; gap: 3px; }
.kpi .tile { grid-area: tile; margin-right: 14px; align-self: center; }
.kpi .kpi-chispa { grid-area: chispa; margin-left: 12px; align-self: end; }
.kpi .kpi-chispa svg { display: block; width: 84px; height: 30px; overflow: visible; }
.kpi.compacto { padding: 10px 12px; }
.kpi.compacto .cifra { font-size: 20px; }
.delta.sube { color: var(--verde); }
.delta.baja { color: var(--rojo); }
.delta.igual { color: var(--apagado); }
.flecha-delta { font-variant-numeric: tabular-nums; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.flecha-delta.sube { color: var(--verde); }
.flecha-delta.baja { color: var(--rojo); }
.flecha-delta.igual { color: var(--apagado); }
/* contadores antiguos = kpi */
.contadores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
.contador { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 14px 16px; box-shadow: var(--sombra-1); }
.contador .mono { display: block; margin-bottom: 4px; }
.contador .cifra { font-size: clamp(22px, 3vw, 30px); font-weight: 650; letter-spacing: -.03em; line-height: 1.1; color: var(--texto); }
.contador .cifra.acento { color: var(--acento); }
.contador .detalle { color: var(--apagado); font-size: 12px; margin-top: 2px; }
/* cabecera de sección: tile + título + subtítulo + acción a la derecha */
.seccion-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.seccion-cab .seccion-titulos { min-width: 0; flex: 1 1 200px; }
.seccion-cab h3 { font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.seccion-cab h2 { font-size: 17px; font-weight: 650; letter-spacing: -.02em; }
.seccion-cab .sub { color: var(--apagado); font-size: 12.5px; margin-top: 1px; }
.seccion-cab .seccion-accion { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.seccion-cab .seccion-accion .mono { font-weight: 500; }
.panel > .seccion-cab:first-child { margin-top: -2px; }
/* título de página */
.titulo-seccion { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.titulo-seccion .mono { margin-left: auto; padding-bottom: 6px; }
.titulo-seccion .tile { align-self: center; }
.ayuda { color: var(--texto-2); max-width: 72ch; margin-bottom: 22px; font-size: 13.5px; line-height: 1.55; }
.pagina-cab { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.pagina-cab .pagina-titulos { flex: 1 1 260px; min-width: 0; }
.pagina-cab .pagina-titulos .ayuda { margin: 4px 0 0; }
.pagina-cab .pagina-accion { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* estado vacío: icono suave + frase + botón cuando aplique */
.vacio {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
padding: 26px 18px; color: var(--apagado); font-size: 13px; font-style: normal; line-height: 1.5;
border: 1px dashed var(--linea-2); border-radius: var(--radio); background: var(--panel);
}
.panel .vacio, .tarjeta .vacio, .pizarra-seccion .vacio, .ik-col .vacio { background: var(--capa); border-color: transparent; }
.vacio::before {
content: ""; width: 38px; height: 38px; border-radius: 11px; margin-bottom: 4px;
background: var(--acento-suave); color: var(--acento);
-webkit-mask: url("data:image/svg+xml;utf8,") center / 18px no-repeat;
mask: url("data:image/svg+xml;utf8,") center / 18px no-repeat;
background: var(--acento);
opacity: .55;
}
.vacio .tile { margin-bottom: 4px; }
.vacio.con-tile::before { display: none; }
.vacio b, .vacio strong { color: var(--texto-2); font-weight: 600; }
.vacio .boton { margin-top: 6px; }
.vacio.compacto { padding: 14px 12px; flex-direction: row; text-align: left; gap: 10px; }
.vacio.compacto::before { width: 28px; height: 28px; border-radius: 8px; margin: 0; -webkit-mask-size: 14px; mask-size: 14px; flex: 0 0 auto; }
.vacio.linea { border: 0; background: none; padding: 8px 0; align-items: flex-start; text-align: left; font-style: italic; }
.vacio.linea::before { display: none; }
.nada { color: var(--apagado); font-style: italic; }
/* avatar limpio: tile redondeado con degradado, iniciales, anillo y punto de estado */
.avatar-mini { display: inline-block; vertical-align: middle; line-height: 0; }
.avatar-mini svg { display: block; overflow: visible; }
.avatar-pixel { shape-rendering: auto; }
.avatar-iniciales { font-family: var(--sans); font-weight: 650; letter-spacing: .01em; fill: var(--avatar-texto); text-anchor: middle; pointer-events: none; dominant-baseline: central; }
.agente-grupo.inactivo .avatar-iniciales, .avatar-mini.inactivo .avatar-iniciales { fill: var(--avatar-inactivo-texto); }
.avatar-anillo { fill: none; stroke: var(--avatar-anillo); }
.avatar-estado { stroke: var(--panel); }
/* ------------------------------------------------------------
6. Cascarón: barra lateral, cabecera, franja misión, cinta
------------------------------------------------------------ */
:root { --barra-ancho: 232px; --barra-ancho-mini: 68px; --cinta-alto: 46px; --cabecera-alto: 58px; }
.contenido { padding: 24px var(--gutter) 40px; max-width: 1480px; margin: 0 auto; }
.pie { padding: 18px var(--gutter); border-top: 1px solid var(--linea); color: var(--apagado); font-size: 12px; }
body.con-barra { padding-bottom: var(--cinta-alto); }
.cascaron { min-height: 100vh; display: flex; flex-direction: column; }
body.con-barra .cascaron { margin-left: var(--barra-ancho); }
.cascaron .contenido { flex: 1 1 auto; width: 100%; }
/* barra lateral */
.barra-lateral {
position: fixed; top: 0; left: 0; bottom: 0; width: var(--barra-ancho); z-index: 30;
display: flex; flex-direction: column; gap: 6px;
background: var(--panel); border-right: 1px solid var(--linea); padding: 16px 12px 12px;
transition: transform .2s ease, width .2s ease;
}
.barra-lateral .marca { display: flex; align-items: center; gap: 10px; color: var(--texto); padding: 2px 6px 14px; margin-bottom: 8px; border-bottom: 1px solid var(--linea); line-height: 1.15; min-width: 0; }
.barra-lateral .marca:hover { text-decoration: none; }
.marca-logo { flex: 0 0 auto; display: inline-flex; }
.marca-logo svg { display: block; width: 34px; height: 34px; }
.marca-textos { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.marca-nombre { font-family: var(--sans); font-size: 14px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.marca-lema { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--apagado); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-lateral .nav { display: flex; flex-direction: column; gap: 2px; margin: 0; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
/* grupo Funcionamiento (2026-09-21): incidencias, propuestas y libro son "la casa por dentro" */
.nav-grupo { display: flex; flex-direction: column; gap: 2px; }
.nav-grupo > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 11px; padding: 7px 8px; border-radius: 10px; font-family: var(--sans); font-size: 13.5px; font-weight: 500; color: var(--texto-2); white-space: nowrap; user-select: none; }
.nav-grupo > summary::-webkit-details-marker { display: none; }
.nav-grupo > summary:hover { color: var(--texto); background: var(--capa); }
.nav-grupo > summary .nav-icono { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto; color: var(--apagado); }
.nav-grupo > summary svg { width: 18px; height: 18px; flex: 0 0 auto; }
.nav-grupo .nav-flecha { margin-left: auto; font-size: 11px; color: var(--apagado); transition: transform .15s ease; }
.nav-grupo[open] .nav-flecha { transform: rotate(180deg); }
.nav-grupo[open] > summary { color: var(--texto); }
.nav-grupo > a { padding-left: 22px; }
.nav-grupo > a .nav-icono { width: 26px; height: 26px; }
.barra-lateral .nav a {
display: flex; align-items: center; gap: 11px; padding: 7px 8px; border-radius: 10px;
font-family: var(--sans); font-size: 13.5px; font-weight: 500; letter-spacing: 0; text-transform: none;
color: var(--texto-2); white-space: nowrap; transition: background var(--transicion), color var(--transicion);
}
.barra-lateral .nav a .nav-icono { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto; color: var(--apagado); transition: background var(--transicion), color var(--transicion); }
.barra-lateral .nav a svg { width: 18px; height: 18px; flex: 0 0 auto; }
.barra-lateral .nav a:hover { color: var(--texto); background: var(--capa); text-decoration: none; }
.barra-lateral .nav a:hover .nav-icono { color: var(--texto); }
.barra-lateral .nav a.activo { color: var(--acento); background: var(--acento-suave); font-weight: 600; }
.barra-lateral .nav a.activo .nav-icono { background: var(--panel); color: var(--acento); box-shadow: var(--sombra-1); }
.barra-pie { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding-top: 10px; border-top: 1px solid var(--linea); }
.tema-boton {
display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
width: 34px; height: 30px; padding: 0; border-radius: 9px;
background: var(--panel); border: 1px solid var(--linea-2); color: var(--texto-2);
transition: background var(--transicion), color var(--transicion), border-color var(--transicion);
}
.tema-boton:hover { color: var(--acento); border-color: var(--acento-borde); background: var(--acento-suave); }
.tema-boton svg { width: 16px; height: 16px; display: block; }
.tema-boton .sol { display: none; }
:root[data-tema="claro"] .tema-boton .sol { display: block; }
:root[data-tema="claro"] .tema-boton .luna { display: none; }
.barra-pie .tema-boton, .barra-pie .salir {
width: 100%; height: auto; justify-content: flex-start; gap: 11px; padding: 7px 8px; border-radius: 10px;
background: none; border: 0; color: var(--texto-2); font-family: var(--sans); font-size: 13.5px; font-weight: 500;
}
.barra-pie .tema-boton:hover, .barra-pie .salir:hover { background: var(--capa); color: var(--texto); text-decoration: none; }
.barra-pie .salir:hover { color: var(--rojo); }
.barra-pie .tema-boton svg, .barra-pie .salir svg { width: 18px; height: 18px; margin: 0 6px; }
.barra-telon { position: fixed; inset: 0; background: var(--telon); z-index: 29; }
.barra-boton {
display: none; align-items: center; justify-content: center; width: 36px; height: 36px; flex: 0 0 auto;
background: var(--panel); border: 1px solid var(--linea-2); border-radius: 10px; color: var(--texto); cursor: pointer; padding: 0;
}
.barra-boton svg { width: 18px; height: 18px; }
/* cabecera */
.cabecera {
display: flex; align-items: center; gap: 14px; min-height: var(--cabecera-alto);
padding: 8px var(--gutter);
border-bottom: 1px solid var(--linea);
background: var(--cabecera-fondo);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
position: sticky; top: 0; z-index: 20;
}
.cabecera-titulo { font-family: var(--sans); font-size: 16px; font-weight: 650; letter-spacing: -.02em; color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cabecera-estado { display: flex; align-items: center; gap: 8px; margin-left: auto; font-family: var(--sans); font-size: 12.5px; color: var(--texto-2); flex-wrap: wrap; justify-content: flex-end; }
.cabecera-estado .chip-usuario { padding: 5px 11px; font-size: 11.5px; }
.cab-dato { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--linea); background: var(--panel); font-size: 12.5px; box-shadow: var(--sombra-1); }
.cab-dato b { color: var(--texto); font-weight: 650; font-variant-numeric: tabular-nums; }
.cab-etiqueta { color: var(--apagado); text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500; }
.reloj small { color: var(--apagado); text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500; }
.agentes-activos.sin-datos .punto-verde { background: var(--apagado); box-shadow: none; animation: none; }
.badge-decision {
display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 5px; border-radius: 999px;
border: 1px solid var(--acento); background: var(--acento); color: var(--acento-texto); white-space: nowrap;
font-family: var(--sans); font-size: 12.5px; font-weight: 600; box-shadow: 0 2px 8px rgba(109, 79, 242, .25);
transition: background var(--transicion), border-color var(--transicion), transform var(--transicion);
}
.badge-decision:hover { text-decoration: none; background: var(--acento-2); border-color: var(--acento-2); transform: translateY(-1px); }
.badge-decision .badge-n {
min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
background: rgba(255, 255, 255, .22); color: inherit; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.badge-decision.cero { border-color: var(--linea); background: var(--panel); color: var(--texto-2); box-shadow: var(--sombra-1); }
.badge-decision.cero:hover { background: var(--panel-2); border-color: var(--linea-2); }
.badge-decision.cero .badge-n { background: var(--capa-2); color: var(--apagado); }
/* franja misión / límite: dos columnas con etiqueta pequeña y texto serif itálica */
.franja-mision {
display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 6px 36px; align-items: baseline;
padding: 9px var(--gutter); border-bottom: 1px solid var(--linea); background: var(--panel);
font-size: 13px; color: var(--texto-2);
}
.franja-item { display: inline-flex; gap: 10px; align-items: baseline; min-width: 0; }
.franja-item .mono { color: var(--acento); flex: 0 0 auto; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.franja-limite .mono { color: var(--rojo); }
.franja-texto { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 13.5px; color: var(--texto); }
.franja-limite .franja-texto { color: var(--texto-2); }
/* cinta de actividad */
.cinta-actividad {
position: fixed; left: var(--barra-ancho); right: 0; bottom: 0; height: var(--cinta-alto); z-index: 25;
display: flex; align-items: center; gap: 14px; padding: 0 var(--gutter);
background: var(--cabecera-fondo); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--linea);
color: var(--texto-2); font-size: 12.5px; text-decoration: none; overflow: hidden; transition: background var(--transicion);
}
.cinta-actividad:hover { text-decoration: none; background: var(--panel); }
.cinta-titulo { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 650; color: var(--texto); flex: 0 0 auto; }
.cinta-eventos { display: flex; align-items: center; gap: 18px; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.cinta-evento { display: inline-flex; align-items: center; gap: 7px; min-width: 0; flex: 1 1 0; max-width: 280px; }
.cinta-evento .cuando { font-size: 11px; color: var(--apagado); flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.cinta-evento .avatar-mini { flex: 0 0 auto; }
.cinta-evento .avatar-sistema { width: 20px; height: 20px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; background: var(--capa-2); font-size: 10px; font-weight: 700; color: var(--texto-2); flex: 0 0 auto; }
.cinta-evento .que { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto); }
.cinta-evento .tipo { font-size: 10.5px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--acento-suave); color: var(--acento); flex: 0 0 auto; }
.cinta-evento.nuevo { animation: aparecer .5s ease-out; }
@keyframes aparecer { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cinta-vacia { color: var(--apagado); font-style: italic; }
.cinta-ir { font-size: 12px; font-weight: 600; color: var(--acento); flex: 0 0 auto; }
/* ------------------------------------------------------------
7. Páginas
------------------------------------------------------------ */
/* ---------- gráficos SVG propios ---------- */
.grafico { position: relative; width: 100%; }
.grafico svg { display: block; width: 100%; height: auto; overflow: visible; }
.grafico .eje { stroke: var(--linea-2); stroke-width: 1; }
.grafico .rejilla { stroke: var(--linea); stroke-width: 1; stroke-dasharray: 2 4; }
.grafico .etiqueta { fill: var(--apagado); font-family: var(--sans); font-size: 10.5px; font-weight: 500; }
.grafico .linea { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.grafico .area { opacity: .12; }
.grafico .punto { stroke: var(--panel); stroke-width: 1.5; }
.grafico .cursor { stroke: var(--texto-2); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; }
.grafico .barra { opacity: .85; }
.grafico .barra:hover { opacity: 1; }
.grafico-tip {
position: absolute; pointer-events: none; background: var(--panel); border: 1px solid var(--linea-2);
border-radius: 10px; padding: 7px 10px; font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums;
transform: translate(-50%, -110%); opacity: 0; transition: opacity .1s; z-index: 5; box-shadow: var(--sombra-2);
}
.grafico-tip b { color: var(--texto); }
.leyenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; font-weight: 500; color: var(--apagado); margin-bottom: 8px; }
.leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; margin-right: 6px; }
.grafico .etiqueta.derecha { fill: var(--texto-2); }
/* banda "flujo": seguidores y facturación */
.banda-flujo { margin-top: 22px; }
.banda-flujo.arriba { margin-top: 0; margin-bottom: 18px; }
.banda-flujo .banda-cabecera { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.banda-flujo .banda-cabecera > .mono { font-size: 14px; font-weight: 650; color: var(--texto); }
.banda-flujo .banda-cabecera .leyenda { margin: 0 0 0 auto; }
.banda-flujo .banda-cabecera .grupo-botones { margin-left: auto; }
.banda-kpis { display: flex; gap: 22px; flex-wrap: wrap; font-size: 12.5px; color: var(--apagado); margin-bottom: 10px; }
.banda-kpis b { color: var(--texto); font-weight: 650; font-size: 17px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin: 0 4px; }
/* ---------- entrar ---------- */
body.sin-barra .cascaron { margin-left: 0; }
.pagina-entrar .contenido { padding-top: 6vh; }
.entrar-mision { max-width: 760px; margin: 0 auto 28px; text-align: center; }
.entrar-mision .marca-logo { display: inline-flex; margin-bottom: 14px; }
.entrar-mision .marca-logo svg { width: 52px; height: 52px; }
.entrar-mision h1 { font-size: clamp(24px, 3vw, 32px); margin-bottom: 4px; }
.entrar-mision .lema { font-size: 13px; font-weight: 500; color: var(--apagado); margin-bottom: 28px; }
.entrar-mision .grande { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; text-align: left; }
.entrar-mision .grande > div { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra-1); }
.entrar-mision .grande .mono { display: block; margin-bottom: 4px; color: var(--acento); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.entrar-mision .grande .limite .mono { color: var(--rojo); }
.entrar-mision .grande p { margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(15px, 1.8vw, 18px); line-height: 1.4; color: var(--texto); }
.entrar { max-width: 460px; margin: 0 auto 40px; }
.entrar .panel { padding: 26px 26px 24px; border-radius: var(--radio-l); box-shadow: var(--sombra-2); }
.entrar .panel-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.entrar .panel-cabecera h2 { font-size: 19px; }
.entrar .campo-doble { display: grid; grid-template-columns: 1fr; gap: 10px; }
.entrar-email label.campo { display: block; margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--linea); border-radius: var(--radio-s); background: var(--bg-2); }
:root[data-tema="oscuro"] .entrar-email label.campo { background: var(--capa); }
.entrar-email label.campo > span { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13.5px; margin-bottom: 8px; }
.entrar-email input { width: 100%; }
.entrar-email small { display: block; margin-top: 6px; color: var(--apagado); font-size: 12px; }
.aviso-entrar { color: var(--verde); font-size: 13px; font-weight: 500; }
.entrar-claves { margin-top: 18px; border-top: 1px dashed var(--linea); padding-top: 10px; }
.entrar-claves summary { cursor: pointer; font-size: 12.5px; }
.eq-tabla td, .eq-tabla th { vertical-align: middle; }
.eq-tabla .baja { opacity: .5; }
.eq-alta { display: grid; grid-template-columns: 1.4fr 1fr .8fr 1fr auto; gap: 8px; align-items: end; }
@media (max-width: 800px) { .eq-alta { grid-template-columns: 1fr 1fr; } }
.entrar .campo-doble label.campo { margin: 0; padding: 12px 14px; border: 1px solid var(--linea); border-radius: var(--radio-s); background: var(--bg-2); transition: border-color var(--transicion), box-shadow var(--transicion); }
:root[data-tema="oscuro"] .entrar .campo-doble label.campo { background: var(--capa); }
.entrar .campo-doble label.campo > span { color: var(--texto-2); display: flex; align-items: center; gap: 8px; }
.entrar .campo-doble label.campo.admin > span { color: var(--acento); }
.entrar .campo-doble label.campo small { display: block; font-size: 12px; color: var(--apagado); margin-top: 6px; }
.entrar .campo-doble label.campo:focus-within { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.entrar .campo-doble label.campo input { margin-top: 6px; }
.entrar .o { text-align: center; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--apagado); }
.entrar .tema-boton { width: 36px; height: 32px; }
.entrar .boton { width: 100%; justify-content: center; margin-top: 14px; padding: 11px 16px; font-size: 14px; }
.entrar .pie-entrar { text-align: center; color: var(--apagado); font-size: 12px; margin-top: 14px; }
/* ---------- expediente (agente.html = pizarra completa) ---------- */
.expediente-completo .pizarra-cuerpo.completa { gap: 16px; }
.expediente-completo .pizarra-identidad { margin-bottom: 4px; }
.expediente-completo .pizarra-identidad h2 { font-size: clamp(22px, 3vw, 30px); }
.expediente-completo .pizarra-identidad .avatar-mini svg { width: 84px; height: 84px; }
.expediente-completo .pizarra-seccion { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 16px 18px; box-shadow: var(--sombra-1); }
.expediente-completo .pizarra-seccion.ficha-datos { background: none; border: 0; box-shadow: none; padding: 0; }
.expediente-completo .pizarra-seccion > .mono { margin-bottom: 12px; }
.pz-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px 22px; align-items: start; }
.pz-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (max-width: 960px) { .pz-cols { grid-template-columns: minmax(0, 1fr); } }
.volver { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--apagado); margin-bottom: 14px; }
.volver:hover { color: var(--acento); text-decoration: none; }
.volver svg { width: 14px; height: 14px; }
.ficha { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px; align-items: center; margin-bottom: 18px; }
.ficha .avatar-grande svg { width: 96px; height: 96px; }
.ficha h1 { margin-bottom: 2px; }
.ficha .datos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.ficha .datos .chip { white-space: normal; max-width: 100%; }
.ficha .descripcion { color: var(--texto-2); max-width: 70ch; margin-top: 8px; }
.asiento-linea { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--linea); }
.asiento-linea:last-child { border-bottom: 0; }
.asiento-linea .cuando { font-size: 11.5px; color: var(--apagado); line-height: 1.5; font-variant-numeric: tabular-nums; padding-top: 2px; }
.asiento-linea .que { white-space: pre-wrap; word-break: break-word; line-height: 1.55; }
.asiento-linea .que .chip { margin-right: 6px; }
.asiento-linea .que .avatar-mini { margin-right: 4px; }
.asiento-linea.alerta .que { border-left: 2px solid var(--rojo); padding-left: 10px; }
.asiento-linea.comite .que { border-left: 2px solid var(--acento); padding-left: 10px; }
/* ---------- pizarra (panel lateral y expediente) ---------- */
.pizarra-panel {
position: fixed; top: 0; right: 0; bottom: 0; width: min(500px, 100vw); z-index: 40;
background: var(--bg); border-left: 1px solid var(--linea); box-shadow: var(--sombra-flotante);
padding: 22px 22px 32px; overflow-y: auto; transform: translateX(105%); transition: transform .22s ease;
}
:root[data-tema="claro"] .pizarra-panel { background: var(--bg); }
.pizarra-panel.abierto { transform: translateX(0); }
.pizarra-panel .cerrar { position: absolute; top: 14px; right: 14px; z-index: 2; width: 32px; height: 32px; padding: 0; border-radius: 50%; }
.telon { position: fixed; inset: 0; background: var(--telon); z-index: 39; opacity: 0; pointer-events: none; transition: opacity .2s; }
.telon.abierto { opacity: 1; pointer-events: auto; }
.pizarra-cuerpo { display: flex; flex-direction: column; gap: 14px; }
.pizarra-cuerpo.completa { gap: 16px; }
.pizarra-identidad { display: flex; gap: 14px; align-items: center; padding-right: 40px; }
.pizarra-identidad h2 { text-transform: none; letter-spacing: -.02em; font-size: 21px; font-weight: 700; }
.pizarra-identidad .cargo { font-size: 12.5px; font-weight: 500; color: var(--apagado); margin: 1px 0 6px; }
.pizarra-identidad .avatar-mini.inactivo { opacity: .85; }
.pizarra-seccion { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 14px 16px; box-shadow: var(--sombra-1); }
.pizarra-seccion > .mono { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; color: var(--texto); font-size: 13.5px; font-weight: 650; letter-spacing: -.01em; }
.pizarra-seccion > .mono .tile { margin-right: 2px; }
.pizarra-seccion > .mono a, .pizarra-seccion > .mono .contar { margin-left: auto; color: var(--apagado); font-size: 12px; font-weight: 500; }
.pizarra-seccion > .mono a { color: var(--acento); font-weight: 600; }
.pizarra-seccion .nada { color: var(--apagado); font-style: italic; }
.pizarra-seccion .lista { gap: 8px; }
.pizarra-seccion .tarjeta { padding: 10px 12px; box-shadow: none; background: var(--bg-2); }
:root[data-tema="oscuro"] .pizarra-seccion .tarjeta { background: var(--capa); }
.pizarra-seccion .tarjeta .texto { margin: 4px 0; font-size: 13px; }
.pizarra-seccion .asiento-linea { padding: 6px 0; grid-template-columns: 60px minmax(0, 1fr); font-size: 13px; }
.pizarra-lineas { display: grid; grid-template-columns: 1fr; gap: 2px; }
.pizarra-lineas .linea { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; font-size: 13.5px; padding: 6px 0; border-bottom: 1px solid var(--linea); }
.pizarra-lineas .linea:last-child { border-bottom: 0; }
.pizarra-lineas .linea .k { font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--apagado); padding-top: 3px; }
.pizarra-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-bottom: 10px; }
.pizarra-kpis .kpi { padding: 10px 12px; box-shadow: none; background: var(--bg-2); }
:root[data-tema="oscuro"] .pizarra-kpis .kpi { background: var(--capa); }
.pizarra-kpis .kpi .cifra { font-size: 20px; }
.pizarra-acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.pizarra-acciones .resultado { font-size: 12px; font-weight: 500; color: var(--apagado); }
.pizarra-acciones .resultado.ok { color: var(--verde); }
.pizarra-acciones .resultado.mal { color: var(--rojo); }
.pizarra-texto textarea { margin-bottom: 10px; min-height: 84px; }
.pizarra-texto .fila { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pizarra-pie { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pizarra-pie .expediente { font-size: 12.5px; font-weight: 600; }
.pizarra-mini-grafico { margin-top: 4px; }
.pizarra-panel .estado.grande { margin-top: 2px; }
.pizarra-cargando { color: var(--apagado); font-style: italic; padding: 24px 0; }
.pizarra-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
/* ---------- cola: previsualización y edición ---------- */
.cola-cabecera { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cola-cabecera .atajos { display: inline-flex; gap: 12px; flex-wrap: wrap; font-size: 11.5px; color: var(--apagado); margin-left: auto; align-items: center; }
.cola-cabecera .atajos span { display: inline-flex; align-items: center; gap: 4px; }
.cola-contador { font-size: 18px; font-weight: 650; letter-spacing: -.02em; color: var(--texto); font-variant-numeric: tabular-nums; display: inline-flex; align-items: baseline; gap: 6px; }
.cola-contador small { font-size: 12.5px; font-weight: 500; color: var(--apagado); text-transform: none; letter-spacing: 0; margin-left: 2px; }
.post-tarjeta { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 16px 24px; padding: 16px 18px; transition: box-shadow var(--transicion), border-color var(--transicion); }
.post-tarjeta.activa { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.post-tarjeta .fila-cabecera { grid-column: 1 / -1; }
.post-tarjeta .fila-cabecera .marca-activa { font-size: 11px; font-weight: 600; color: var(--acento); display: none; }
.post-tarjeta.activa .fila-cabecera .marca-activa { display: inline; }
.post-editor { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.post-editor textarea { min-height: 130px; font-size: 13.5px; line-height: 1.5; }
.post-editor .contar-chars { font-size: 11.5px; font-weight: 500; color: var(--apagado); font-variant-numeric: tabular-nums; }
.post-editor .contar-chars.pasado { color: var(--rojo); }
.post-editor .fila-fecha { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.post-editor .fila-fecha input[type=datetime-local] { width: auto; min-width: 210px; padding: 7px 10px; font-size: 13px; }
.post-editor .cambios { font-size: 11.5px; font-weight: 600; color: var(--naranja); }
.nota-vera { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 11px 14px; border-radius: var(--radio-s); border: 1px solid var(--linea); background: var(--capa); font-size: 13px; color: var(--texto); }
.nota-vera .veredicto { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.nota-vera.pasa { border-color: transparent; background: var(--verde-suave); }
.nota-vera.pasa .veredicto { background: var(--verde); color: #fff; }
.nota-vera.devuelto { border-color: transparent; background: var(--rojo-suave); }
.nota-vera.devuelto .veredicto { background: var(--rojo); color: #fff; }
.nota-vera.sin-nota { color: var(--apagado); font-style: italic; }
.nota-vera.sin-nota .veredicto { background: var(--capa-2); color: var(--texto-2); }
.nota-vera .quien { display: block; font-size: 11px; font-weight: 600; color: var(--apagado); margin-bottom: 2px; font-style: normal; }
.post-acciones { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 2px; }
.post-acciones .resultado { font-size: 12px; font-weight: 500; }
.post-acciones .resultado.ok { color: var(--verde); }
.post-acciones .resultado.mal { color: var(--rojo); }
.post-acciones .confirmar { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 6px 10px; border-radius: 10px; border: 1px dashed var(--linea-2); background: var(--capa); }
.post-acciones .confirmar input { width: auto; min-width: 180px; padding: 5px 10px; font-size: 12.5px; }
.post-acciones .confirmar .mono { color: var(--texto-2); font-weight: 500; }
/* previsualización estilo X */
.previa { min-width: 0; }
.previa .previa-titulo { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--apagado); margin-bottom: 8px; }
.previa-x { background: var(--bg-2); border: 1px solid var(--linea); border-radius: 16px; padding: 14px 16px; font-family: var(--sans); color: var(--texto); }
:root[data-tema="oscuro"] .previa-x { background: var(--capa); }
.previa-x .px-cabecera { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: center; }
.previa-x .px-avatar, .previa-ig .pi-avatar { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--sans); font-weight: 700; font-size: 14px; color: #fff; background: linear-gradient(135deg, var(--acento), var(--rosa)); }
.previa-x .px-nombre { font-weight: 700; font-size: 14px; line-height: 1.2; display: flex; align-items: center; gap: 4px; }
.previa-x .px-nombre svg { width: 15px; height: 15px; color: var(--azul); }
.previa-x .px-usuario { color: var(--apagado); font-size: 13px; }
.previa-x .px-texto { margin: 10px 0 8px; font-size: 14.5px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.previa-x .px-medios img { width: 100%; border-radius: 12px; border: 1px solid var(--linea); display: block; margin-top: 6px; }
.previa-x .px-hora { color: var(--apagado); font-size: 12.5px; padding: 6px 0 8px; border-bottom: 1px solid var(--linea); }
.previa-x .px-pie { display: flex; justify-content: space-between; padding-top: 8px; color: var(--apagado); max-width: 280px; }
.previa-x .px-pie svg { width: 17px; height: 17px; }
/* previsualización estilo Instagram */
.previa-ig { background: var(--bg-2); border: 1px solid var(--linea); border-radius: 12px; font-family: var(--sans); color: var(--texto); overflow: hidden; }
:root[data-tema="oscuro"] .previa-ig { background: var(--capa); }
.previa-ig .pi-cabecera { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
.previa-ig .pi-avatar { width: 32px; height: 32px; font-size: 12px; box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--rosa); }
.previa-ig .pi-usuario { font-weight: 700; font-size: 13px; }
.previa-ig .pi-usuario small { display: block; font-weight: 400; font-size: 11px; color: var(--apagado); }
.previa-ig .pi-marco { aspect-ratio: 1 / 1; width: 100%; max-width: 100%; background: linear-gradient(160deg, var(--panel-2), var(--bg)); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.previa-ig .pi-marco img { width: 100%; height: 100%; object-fit: cover; display: block; }
.previa-ig .pi-gancho { padding: 22px; font-family: var(--sans); font-weight: 700; letter-spacing: -.02em; font-size: clamp(16px, 2vw, 22px); line-height: 1.3; text-align: center; color: var(--texto); }
.previa-ig .pi-gancho small { display: block; margin-top: 12px; font-size: 10.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--apagado); }
.previa-ig .pi-iconos { display: flex; gap: 14px; padding: 8px 10px 4px; color: var(--texto); }
.previa-ig .pi-iconos svg { width: 22px; height: 22px; }
.previa-ig .pi-caption { padding: 2px 10px 10px; font-size: 13px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
.previa-ig .pi-caption b { margin-right: 4px; }
.previa-ig .pi-hora { padding: 0 10px 10px; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--apagado); }
/* previsualización genérica (yt / wa) */
.previa-generica { background: var(--bg-2); border: 1px solid var(--linea); border-radius: 12px; padding: 12px 14px; white-space: pre-wrap; word-break: break-word; font-size: 13.5px; }
:root[data-tema="oscuro"] .previa-generica { background: var(--capa); }
/* ---------- calendario ---------- */
.cal-barra { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.cal-barra h2 { min-width: 200px; text-transform: capitalize; font-size: 18px; }
.cal-barra .cal-nav { display: inline-flex; gap: 4px; }
.cal-barra .cal-nav .boton { width: 32px; padding: 5px 0; }
.cal-envoltorio { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra-1); padding: 12px; }
.cal-rejilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-cabecera { font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--apagado); text-align: center; padding: 4px 0 6px; }
.cal-dia {
min-height: 84px; background: var(--bg-2); border: 1px solid var(--linea); border-radius: var(--radio-s); padding: 8px; cursor: pointer;
display: flex; flex-direction: column; gap: 4px; position: relative; transition: border-color var(--transicion), background var(--transicion), box-shadow var(--transicion);
}
:root[data-tema="oscuro"] .cal-dia { background: var(--capa); }
.cal-dia:hover { border-color: var(--linea-2); background: var(--panel); box-shadow: var(--sombra-1); }
.cal-dia.otro-mes { opacity: .4; }
.cal-dia.hoy { border-color: var(--acento-borde); background: var(--acento-suave); }
.cal-dia.seleccionado { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.cal-dia .num { font-size: 12.5px; font-weight: 600; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.cal-dia.hoy .num { color: var(--acento); font-weight: 700; }
.cal-dia .puntos { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; }
.cal-dia .punto { width: 9px; height: 9px; border-radius: 50%; }
.cal-dia .punto.publicado { box-shadow: 0 0 0 1.5px var(--panel), 0 0 0 2.5px var(--texto-2); }
.cal-dia .comite-marca { position: absolute; top: 7px; right: 7px; font-size: 9.5px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--acento); background: var(--acento-suave); border-radius: 6px; padding: 1px 5px; }
.cal-dia .comite-marca.hecho { background: var(--acento); color: var(--acento-texto); }
.cal-detalle { margin-top: 16px; }
@media (max-width: 640px) {
.cal-envoltorio { padding: 6px; }
.cal-rejilla { gap: 3px; }
.cal-dia { min-height: 54px; padding: 4px; border-radius: 7px; }
.cal-dia .comite-marca { font-size: 8px; padding: 0 3px; top: 3px; right: 3px; }
.cal-dia .num { font-size: 11px; }
}
/* ---------- libro ---------- */
.libro-dia { margin-top: 18px; }
.libro-dia .fecha { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 650; letter-spacing: -.01em; margin-bottom: 6px; padding-bottom: 8px; border-bottom: 1px solid var(--linea); text-transform: capitalize; }
/* ---------- monitor ---------- */
.red-titulo { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.red-titulo i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.red-titulo h2 { font-size: 18px; }
/* ------------------------------------------------------------
8. Planta (oficina isométrica y plano 2D; planta.js) y bocadillos
------------------------------------------------------------ */
.planta-disposicion { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.planta-escenario {
background: linear-gradient(180deg, var(--escenario-arriba), var(--escenario-abajo));
border: 1px solid var(--linea); border-radius: var(--radio); position: relative; overflow: hidden;
min-height: 320px;
}
.planta-escenario svg { display: block; width: 100%; height: auto; }
.planta-barra { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.planta-barra .mono { margin-right: auto; }
.planta-leyenda { display: flex; gap: 12px; flex-wrap: wrap; padding: 8px 12px; font-size: 11px; font-weight: 500; color: var(--apagado); border-top: 1px solid var(--linea); }
.planta-leyenda i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.sala-suelo { transition: filter .15s; }
.sala-grupo:hover .sala-suelo { filter: brightness(1.15); }
.sala-nombre { font-family: var(--sans); font-size: 9px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; fill: var(--texto-2); pointer-events: none; }
.sala-nombre.vacia { fill: var(--apagado); }
.agente-grupo { cursor: pointer; }
.agente-grupo:hover .avatar-pixel { filter: brightness(1.08); }
.agente-grupo.seleccionado .avatar-pixel { filter: drop-shadow(0 0 4px var(--halo)); }
.agente-nombre { font-family: var(--sans); font-size: 8px; font-weight: 600; fill: var(--texto-2); text-anchor: middle; pointer-events: none; }
.agente-grupo.inactivo .agente-nombre { fill: var(--apagado); }
.sombra-agente { fill: var(--sombra-avatar); }
.punto-actividad { fill: var(--verde); }
.planta-tip {
position: absolute; pointer-events: none; z-index: 6;
background: var(--panel); border: 1px solid var(--linea-2); border-radius: 10px;
padding: 7px 10px; font-size: 12px; max-width: 280px; box-shadow: var(--sombra-2);
opacity: 0; transition: opacity .1s;
}
.planta-tip b { color: var(--texto); }
.planta-tip .mono { display: block; margin-top: 2px; font-size: 11px; color: var(--texto-2); }
.plano { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; padding: 12px; }
.plano-sala { border: 1px solid var(--linea); border-radius: var(--radio-s); padding: 10px; min-height: 92px; background: var(--capa); border-top-width: 3px; }
.plano-sala .mono { display: block; margin-bottom: 8px; color: var(--texto-2); font-weight: 600; }
.plano-agentes { display: flex; flex-wrap: wrap; gap: 6px; }
.plano-agentes.con-bocadillos { flex-direction: column; gap: 4px; }
.ficha-agente-mini { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; background: var(--panel); border: 1px solid var(--linea); border-radius: 999px; padding: 3px 10px 3px 3px; font-size: 12px; }
.ficha-agente-mini:hover { border-color: var(--acento); }
.ficha-agente-mini.inactivo { opacity: .55; }
.ficha-agente-mini.seleccionado { border-color: var(--acento); }
.agentes-columna { display: flex; flex-direction: column; gap: 8px; max-height: 720px; overflow-y: auto; padding-right: 2px; }
.agente-tarjeta { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; cursor: pointer; padding: 10px 12px; }
.agente-tarjeta .nombre { font-size: 14px; font-weight: 650; }
.agente-tarjeta .cargo { font-size: 11.5px; color: var(--apagado); }
.agente-tarjeta .asiento { font-size: 12.5px; color: var(--texto-2); margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.agente-tarjeta .asiento.nada { color: var(--apagado); font-style: italic; }
.agente-tarjeta.inactivo { opacity: .55; }
.agente-tarjeta.seleccionado { border-color: var(--acento); }
.planta-capa-html { position: absolute; inset: 0; pointer-events: none; z-index: 4; overflow: hidden; }
.puesto-bocadillo {
position: absolute; transform: translate(-50%, -100%); pointer-events: auto; cursor: pointer;
width: 158px; padding: 6px 9px 7px; border-radius: 10px;
background: var(--panel); border: 1px solid var(--linea); box-shadow: var(--sombra-2);
font-size: 11px; line-height: 1.3; color: var(--texto);
}
.puesto-bocadillo .estado { font-size: 9.5px; padding: 1px 7px 1px 5px; max-width: 100%; }
.puesto-bocadillo .linea { margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.puesto-bocadillo .linea.nada { color: var(--apagado); font-style: italic; }
.puesto-bocadillo.compacto { width: auto; padding: 3px 5px; }
.puesto-bocadillo.compacto .linea { display: none; }
.puesto-bocadillo::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; margin-left: -5px; background: var(--panel); border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea); transform: rotate(45deg); }
.puesto-bocadillo.tier-1::before { content: ""; position: absolute; left: 50%; top: 100%; width: 0; height: var(--hilo, 44px); border-left: 1px dashed var(--linea-2); }
.puesto-bocadillo:hover, .puesto-bocadillo.seleccionado { border-color: var(--acento); z-index: 2; }
.puesto-bocadillo:hover::after, .puesto-bocadillo.seleccionado::after { border-color: var(--acento); }
.puesto-bocadillo.inactivo { opacity: .7; }
.puesto-etiqueta { position: absolute; transform: translate(-50%, 0); pointer-events: auto; cursor: pointer; text-align: center; white-space: nowrap; font-size: 10.5px; line-height: 1.15; color: var(--texto); padding: 2px 7px; border-radius: 7px; background: var(--panel); border: 1px solid transparent; }
.puesto-etiqueta b { font-weight: 650; }
.puesto-etiqueta small { display: block; font-size: 9px; font-weight: 500; color: var(--apagado); }
.puesto-etiqueta.corta small { display: none; }
.puesto-etiqueta:hover, .puesto-etiqueta.seleccionado { border-color: var(--acento); }
.flujo-chip { position: absolute; transform: translate(-50%, -50%); pointer-events: none; font-size: 9.5px; font-weight: 650; padding: 1px 7px; border-radius: 999px; background: var(--panel); border: 1px solid currentColor; white-space: nowrap; }
.sala-etiqueta-fondo { stroke-width: .6; }
.pagina-planta .planta-disposicion { grid-template-columns: minmax(0, 1fr); }
.flujo-capa { pointer-events: none; }
.flujo-linea { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 5 4; animation: avanzar 1.1s linear infinite; opacity: .95; }
@keyframes avanzar { to { stroke-dashoffset: -18; } }
.flujo-punto { opacity: .95; }
.flujo-leyenda { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; padding: 6px 12px; border-top: 1px solid var(--linea); font-size: 11px; font-weight: 500; color: var(--apagado); }
.flujo-leyenda i { display: inline-block; width: 14px; height: 0; border-top: 2px dashed currentColor; vertical-align: 3px; margin-right: 5px; }
.plano-puesto { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; align-items: start; width: 100%; text-align: left; background: none; border: 0; padding: 4px 0; cursor: pointer; color: var(--texto); font: inherit; }
.plano-puesto .avatar-mini { margin-top: 2px; }
.plano-puesto .quien { font-size: 12.5px; font-weight: 600; line-height: 1.2; }
.plano-puesto .quien small { font-size: 10.5px; color: var(--apagado); font-weight: 400; }
.plano-puesto .bocadillo-html { position: relative; margin-top: 5px; background: var(--panel); border: 1px solid var(--linea); border-radius: 10px; padding: 6px 9px; font-size: 12px; color: var(--texto); box-shadow: var(--sombra-1); }
.plano-puesto .bocadillo-html::before { content: ""; position: absolute; left: -6px; top: 8px; width: 10px; height: 10px; background: var(--panel); border-left: 1px solid var(--linea); border-bottom: 1px solid var(--linea); transform: rotate(45deg); }
.plano-puesto .bocadillo-html .estado { margin-bottom: 3px; }
.plano-puesto .bocadillo-html .linea { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.plano-puesto .bocadillo-html .linea.nada { color: var(--apagado); font-style: italic; }
.plano-puesto:hover .bocadillo-html, .plano-puesto.seleccionado .bocadillo-html { border-color: var(--acento); }
.plano-puesto.inactivo { opacity: .6; }
/* panel lateral antiguo (planta.js) */
.panel-lateral {
position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); z-index: 40;
background: var(--bg); border-left: 1px solid var(--linea); box-shadow: var(--sombra-flotante);
padding: 22px 22px 32px; overflow-y: auto; transform: translateX(105%); transition: transform .2s ease;
}
.panel-lateral.abierto { transform: translateX(0); }
.panel-lateral .cerrar { position: absolute; top: 12px; right: 12px; }
.panel-lateral .cabecera-agente { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.panel-lateral dl { margin: 0; }
.panel-lateral dt { font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--acento); margin-top: 14px; }
.panel-lateral dd { margin: 4px 0 0; color: var(--texto); }
.panel-lateral dd.nada { color: var(--apagado); font-style: italic; }
.panel-lateral .expediente { display: inline-block; margin-top: 20px; font-size: 12.5px; font-weight: 600; }
.pizarra textarea { margin-bottom: 8px; }
.pizarra .fila { display: flex; gap: 8px; align-items: center; }
/* ------------------------------------------------------------
Responsive
------------------------------------------------------------ */
@media (max-width: 1100px) {
body.con-barra { --barra-ancho: var(--barra-ancho-mini); }
.barra-lateral { padding: 12px 8px; align-items: stretch; }
.barra-lateral .marca { justify-content: center; padding: 4px 0 12px; }
.marca-textos { display: none; }
.barra-lateral .nav a { justify-content: center; padding: 6px 0; }
.barra-lateral .nav a span:not(.nav-icono) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.barra-lateral .nav a .nav-icono { width: 36px; height: 36px; }
.nav-grupo > summary { justify-content: center; padding: 6px 0; }
.nav-grupo > summary span:not(.nav-icono) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.nav-grupo > summary .nav-icono { width: 36px; height: 36px; }
.nav-grupo > a { padding-left: 0; }
.barra-pie .tema-boton, .barra-pie .salir { justify-content: center; padding: 8px 0; }
.barra-pie .tema-texto, .barra-pie .salir span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cinta-evento { max-width: 220px; }
.planta-disposicion { grid-template-columns: minmax(0, 1fr); }
.agentes-columna { max-height: none; }
}
@media (max-width: 760px) {
body.con-barra { --barra-ancho: 0px; }
.barra-lateral { width: 250px; transform: translateX(-102%); padding: 16px 12px 12px; box-shadow: var(--sombra-flotante); }
.barra-lateral .marca { justify-content: flex-start; padding: 2px 6px 14px; }
.marca-textos { display: flex; }
.barra-lateral .nav a { justify-content: flex-start; padding: 7px 8px; }
.nav-grupo > summary { justify-content: flex-start; padding: 7px 8px; }
.nav-grupo > summary span:not(.nav-icono) { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
.nav-grupo > a { padding-left: 22px; }
.barra-lateral .nav a span:not(.nav-icono), .barra-pie .tema-texto, .barra-pie .salir span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
.barra-lateral .nav a .nav-icono { width: 30px; height: 30px; }
.barra-pie .tema-boton, .barra-pie .salir { justify-content: flex-start; padding: 7px 8px; }
body.barra-abierta .barra-lateral { transform: none; }
.barra-boton { display: inline-flex; }
.cabecera { gap: 8px; padding: 8px 16px; flex-wrap: wrap; }
.cabecera-titulo { font-size: 15px; flex: 1 1 auto; }
.cabecera-estado { width: 100%; gap: 6px; justify-content: flex-start; font-size: 12px; }
.cab-dato { padding: 3px 9px; font-size: 12px; }
.comite-mini .cab-etiqueta, .agentes-activos .cab-etiqueta { display: none; }
.agentes-activos b::after { content: " ag."; color: var(--apagado); font-weight: 400; }
.reloj small { display: none; }
.badge-decision { margin-left: auto; }
.franja-mision { grid-template-columns: minmax(0, 1fr); padding: 8px 16px; gap: 4px; font-size: 12.5px; }
.franja-item { display: grid; grid-template-columns: 56px minmax(0, 1fr); width: 100%; }
.cinta-actividad { left: 0; padding: 0 12px; gap: 8px; }
.cinta-titulo { font-size: 0; gap: 0; }
.cinta-titulo .punto-verde { margin-right: 2px; }
.cinta-eventos { overflow-x: auto; gap: 12px; scrollbar-width: none; }
.cinta-eventos::-webkit-scrollbar { display: none; }
.cinta-evento { flex: 0 0 auto; max-width: 200px; }
.cinta-ir { display: none; }
.post-tarjeta { grid-template-columns: minmax(0, 1fr); }
.cola-cabecera .atajos { display: none; }
.contadores { grid-template-columns: 1fr; gap: 8px; }
.ficha { grid-template-columns: 64px minmax(0, 1fr); }
.ficha .avatar-grande svg { width: 64px; height: 64px; }
.asiento-linea { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.panel-lateral, .pizarra-panel { padding: 18px 16px 28px; }
.entrar-mision .grande { grid-template-columns: 1fr; }
.pizarra-identidad { padding-right: 36px; }
.expediente-completo .pizarra-identidad .avatar-mini svg { width: 64px; height: 64px; }
.kpis { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.kpi { padding: 12px 14px; }
.kpi .cifra { font-size: 22px; }
.kpi .kpi-chispa { display: none; }
.panel { padding: 14px 16px; }
.pagina-cab .pagina-accion { margin-left: 0; width: 100%; }
}
@media (max-width: 400px) {
.filtros select, .filtros input { min-width: 0; flex: 1 1 45%; }
}
@media (prefers-reduced-motion: reduce) {
.punto-verde, .flujo-linea, .cinta-evento.nuevo, .estado .estado-icono { animation: none !important; }
* { transition-duration: 0s !important; }
}
/* ============================================================
Markdown (v5): Casa.md() envuelve en .md (bloque) o .md-inline (una línea). Todo por tokens: sirve en ambos temas.
============================================================ */
.md { line-height: 1.55; word-break: break-word; min-width: 0; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p { margin: 0 0 .6em; }
.md h1, .md h2, .md h3, .md h4, .md h5, .md h6 { margin: .9em 0 .35em; line-height: 1.25; letter-spacing: -.01em; font-weight: 700; }
.md h1 { font-size: 1.25em; } .md h2 { font-size: 1.15em; } .md h3 { font-size: 1.05em; } .md h4, .md h5, .md h6 { font-size: 1em; }
.md ul, .md ol { margin: .2em 0 .7em; padding-left: 1.4em; }
.md li { margin: .15em 0; }
.md li > p { margin: 0; }
.md li input[type="checkbox"] { width: auto; margin: 0 6px 0 -1.2em; vertical-align: middle; accent-color: var(--acento); }
.md blockquote { margin: .5em 0; padding: 4px 12px; border-left: 3px solid var(--acento-borde); background: var(--capa); border-radius: 0 8px 8px 0; color: var(--texto-2); }
.md blockquote p { margin: .3em 0; }
.md code { font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: .9em; background: var(--capa-2); padding: 1px 6px; border-radius: 6px; }
.md pre { margin: .5em 0 .8em; padding: 10px 12px; border-radius: 10px; background: var(--capa-2); border: 1px solid var(--linea); overflow-x: auto; font-size: 12.5px; line-height: 1.5; white-space: pre; }
.md pre code { background: transparent; padding: 0; font-size: inherit; }
.md hr { border: 0; border-top: 1px solid var(--linea); margin: .9em 0; }
.md a { color: var(--acento); text-decoration: underline; text-underline-offset: 2px; }
.md strong { font-weight: 700; }
.md-tabla { overflow-x: auto; margin: .5em 0 .8em; border: 1px solid var(--linea); border-radius: 10px; background: var(--panel); }
.md table { border-collapse: collapse; width: 100%; font-size: .95em; }
.md th, .md td { padding: 6px 10px; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: top; }
.md th { font-size: 11.5px; font-weight: 650; color: var(--apagado); background: var(--panel-2); white-space: nowrap; }
.md tr:last-child td { border-bottom: 0; }
.md td[align="right"], .md th[align="right"] { text-align: right; font-variant-numeric: tabular-nums; }
.md td[align="center"], .md th[align="center"] { text-align: center; }
.md-inline { display: inline; }
.md-inline p { display: inline; margin: 0; }
/* dentro de la burbuja propia del chat (fondo acento) */
.exp-burbuja.yo .md a { color: inherit; }
.exp-burbuja.yo .md code, .exp-burbuja.yo .md pre { background: rgba(255, 255, 255, .18); border-color: transparent; color: inherit; }
.exp-burbuja.yo .md blockquote { border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .12); color: inherit; }
.exp-burbuja.yo .md-tabla, .exp-burbuja.yo .md th { background: rgba(255, 255, 255, .12); color: inherit; border-color: rgba(255, 255, 255, .25); }
/* burbujas y asientos: el texto ya no es pre-wrap cuando lleva markdown */
.exp-burbuja .md, .sala-burbuja .md, .asiento-linea .que .md { white-space: normal; }
.exp-burbuja.agente .md, .sala-burbuja .md { font-size: 13.5px; }
/* adjuntos del chat y la sala (v5) */
.adjuntos-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.adjuntos-chips:empty { display: none; }
.adjunto-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 260px; padding: 4px 6px 4px 9px; border-radius: 999px; background: var(--capa-2); border: 1px solid var(--linea); font-size: 12px; color: var(--texto-2); }
.adjunto-chip .nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adjunto-chip small { color: var(--apagado); white-space: nowrap; }
.adjunto-chip.subiendo { opacity: .7; }
.adjunto-chip.mal { color: var(--rojo); border-color: var(--mal-borde); }
.adjunto-chip button { border: 0; background: transparent; color: inherit; cursor: pointer; width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; padding: 0; }
.adjunto-chip button:hover { background: var(--capa-2); color: var(--rojo); }
.adjunto-chip button svg { width: 11px; height: 11px; }
.adjunto-chip svg.icono { width: 12px; height: 12px; flex: 0 0 auto; }
.adjuntos-en-mensaje { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.adjuntos-en-mensaje .adjunto-chip { background: rgba(127, 127, 127, .12); border-color: transparent; color: inherit; font-size: 11.5px; }
.boton-clip { padding: 7px 9px; }
.boton-clip svg { width: 16px; height: 16px; }
.zona-soltar { position: relative; }
.zona-soltar.arrastrando { outline: 2px dashed var(--acento); outline-offset: 4px; border-radius: var(--radio); background: var(--acento-suave); }
.zona-soltar.arrastrando::after { content: 'Suelta aquí para adjuntar'; position: absolute; inset: 0; display: grid; place-items: center; font-weight: 650; color: var(--acento); pointer-events: none; background: color-mix(in srgb, var(--panel) 70%, transparent); border-radius: var(--radio); }
/* Oficina: selector de periodo de las 4 cifras (2026-09-29) */
.house-periodo { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; }
.house-periodo .house-eyebrow { margin-right: 6px; }
.house-periodo button { font: inherit; font-size: 12.5px; padding: 4px 10px; border: 1px solid var(--linea); border-radius: 999px; background: var(--panel); color: var(--texto-2); cursor: pointer; }
.house-periodo button.activo { background: var(--acento-suave); color: var(--acento); border-color: transparent; font-weight: 600; }
.house-periodo label { font-size: 12.5px; color: var(--apagado); margin-left: 8px; display: inline-flex; align-items: center; gap: 6px; }
.house-periodo input[type=date] { font: inherit; font-size: 12.5px; padding: 3px 8px; border: 1px solid var(--linea); border-radius: 8px; background: var(--panel); color: var(--texto); }
/* Calendario: fases, hitos y tareas del lanzamiento fusionados con los posts (2026-09-29) */
.cal-dia { position: relative; }
.cal-fase { display: block; max-width: calc(100% - 50px); font-size: 10px; font-weight: 600; color: #fff; padding: 1px 6px; border-radius: 4px; margin: 0 0 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-off { display: inline-block; font-size: 9.5px; color: var(--apagado); border: 1px dashed var(--apagado); border-radius: 4px; padding: 0 4px; margin: 0 0 3px; }
.cal-hito { display: block; font-size: 10.5px; color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-hito.hecho { color: var(--verde); }
.cal-tareas { display: block; font-size: 10px; color: var(--apagado); }