/* Agenda Institucional · estilos base
Paleta institucional sobria: gris-azulado oscuro + neutros + acentos por scope. */
/* ── S 27v · Modal edición Personas: cabecera visual + chips de grupos + foto ── */
.ppl-mod-body { padding: 0 !important; }
.ppl-mod-head {
display: flex; gap: 18px; align-items: center;
padding: 22px 24px;
color: #fff;
transition: background .15s;
}
.ppl-mod-av-wrap { position: relative; flex-shrink: 0; }
.ppl-mod-av {
width: 86px; height: 86px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: #fff; font-weight: 800; font-size: 36px;
border: 3px solid rgba(255,255,255,0.75);
box-shadow: 0 4px 16px rgba(0,0,0,0.2);
overflow: hidden;
}
.ppl-mod-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ppl-mod-av-btn {
position: absolute; right: -2px; bottom: -2px;
width: 30px; height: 30px; border-radius: 50%;
background: #fff; color: #1a2433;
display: flex; align-items: center; justify-content: center;
cursor: pointer; font-size: 14px;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
border: 0;
}
.ppl-mod-av-btn:hover { transform: scale(1.08); }
.ppl-mod-av-del {
position: absolute; left: -2px; bottom: -2px;
width: 26px; height: 26px; border-radius: 50%;
background: #fff; color: #c63b3b;
display: flex; align-items: center; justify-content: center;
cursor: pointer; font-size: 12px; border: 0;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.ppl-mod-head-meta { flex: 1; min-width: 0; }
.ppl-mod-nombre { font-size: 22px; font-weight: 700; line-height: 1.1; }
.ppl-mod-cargo { font-size: 13px; color: rgba(255,255,255,0.85); margin-top: 4px; }
.ppl-mod-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.ppl-chip {
display: inline-block; padding: 3px 9px;
border-radius: 999px; font-size: 11px; font-weight: 600;
background: rgba(255,255,255,0.18); color: #fff;
}
.ppl-mod-section {
padding: 16px 24px;
border-top: 1px solid #f1f3f7;
}
.ppl-mod-section:first-of-type { border-top: 0; }
.ppl-mod-section h4 {
margin: 0 0 14px;
font-size: 12px; color: #506080;
text-transform: uppercase; letter-spacing: 0.06em;
font-weight: 700;
}
.ppl-mod-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ppl-mod-field { display: flex; flex-direction: column; gap: 4px; }
.ppl-mod-field span {
font-size: 11px; color: #506080;
text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
}
.ppl-mod-field em { color: #c63b3b; font-style: normal; }
.ppl-mod-chips {
display: flex; flex-wrap: wrap; gap: 6px;
}
.ppl-chip-toggle {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 11px;
border: 1px solid #e2e6ec;
background: #fff; color: #506080;
border-radius: 999px;
font-size: 12px; font-weight: 600;
cursor: pointer;
transition: transform .1s, background .1s, color .1s, border-color .1s;
}
.ppl-chip-toggle:hover { transform: translateY(-1px); border-color: #c0d0e8; }
.ppl-chip-toggle.is-sel { font-weight: 700; }
.ppl-chip-dot {
display: inline-block; width: 8px; height: 8px; border-radius: 50%;
background: #1a2433;
}
.ppl-chip-count {
background: #f1f3f7; color: #506080;
padding: 1px 7px; border-radius: 999px;
font-size: 10px; font-weight: 700;
margin-left: 2px;
}
.ppl-chip-toggle.is-sel .ppl-chip-count {
background: rgba(255,255,255,0.85);
}
@media (max-width: 640px) {
.ppl-mod-grid { grid-template-columns: 1fr; }
.ppl-mod-head { flex-direction: column; text-align: center; }
}
/* ── S 27w · Lista de miembros (Grupos · Audiencias preview) ── */
.grp-mem-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.grp-mem-item {
display: flex; align-items: center; gap: 12px;
padding: 8px 10px;
background: #fafbfd;
border: 1px solid #e2e6ec;
border-radius: 8px;
}
.grp-mem-av { flex-shrink: 0; }
.grp-mem-ini {
width: 34px; height: 34px; border-radius: 50%;
color: #fff; font-weight: 700; font-size: 13px;
display: inline-flex; align-items: center; justify-content: center;
}
.grp-mem-img {
width: 34px; height: 34px; border-radius: 50%;
object-fit: cover; display: block;
}
.grp-mem-body { flex: 1; min-width: 0; }
.grp-mem-name { font-size: 13px; font-weight: 600; color: #1a2433; }
.grp-mem-cargo { font-size: 11px; color: #506080; }
/* Versión compacta para preview dentro de Audiencias */
.aud-preview-members {
background: #fafbfd;
border: 1px solid #e2e6ec;
border-radius: 8px;
padding: 12px;
margin-top: 10px;
}
.aud-preview-members h5 {
margin: 0 0 8px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #506080;
}
.aud-preview-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 6px;
}
.aud-preview-item {
display: flex; align-items: center; gap: 8px;
background: #fff;
padding: 6px 10px;
border-radius: 6px;
border: 1px solid #f1f3f7;
}
.aud-preview-item .grp-mem-ini,
.aud-preview-item .grp-mem-img {
width: 26px; height: 26px; font-size: 11px;
}
.aud-preview-name { font-size: 12px; font-weight: 600; color: #1a2433; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ── S 27u · Swatch de color (sedes, grupos) ── */
.sed-swatch {
display: inline-block; width: 14px; height: 14px;
border-radius: 4px; border: 1px solid rgba(0,0,0,0.08);
flex-shrink: 0;
}
/* ── S 27t · Marca · color institucional configurable desde Configuración ── */
.cfg-marca-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; }
.cfg-marca-preview {
background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
color: #fff; border-radius: 14px; padding: 18px;
display: flex; flex-direction: column; gap: 14px;
box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}
.cfg-marca-hero { display: flex; align-items: center; gap: 12px; }
.cfg-marca-icon {
background: rgba(255,255,255,0.18); border-radius: 12px;
width: 48px; height: 48px;
display: flex; align-items: center; justify-content: center; font-size: 24px;
}
.cfg-marca-titulo { font-size: 17px; font-weight: 700; }
.cfg-marca-sub { font-size: 12px; color: rgba(255,255,255,0.85); }
.cfg-marca-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cfg-marca-kpi {
background: rgba(255,255,255,0.92); color: var(--brand);
border-radius: 8px; padding: 8px 10px; text-align: center;
}
.cfg-marca-n { font-size: 22px; font-weight: 800; }
.cfg-marca-l { font-size: 10px; text-transform: uppercase; color: #506080; }
.cfg-marca-btn {
background: #fff; color: var(--brand); border: 0;
align-self: flex-start;
padding: 8px 16px; border-radius: 8px; font-weight: 600; font-size: 13px;
cursor: pointer;
}
.cfg-marca-form { display: flex; flex-direction: column; gap: 10px; }
.cfg-preset {
width: 32px; height: 32px;
border: 2px solid #fff;
border-radius: 50%;
cursor: pointer;
padding: 0;
outline: 1px solid #e2e6ec;
box-shadow: 0 2px 6px rgba(0,0,0,0.12);
transition: transform .12s, outline-color .12s, outline-width .12s;
}
.cfg-preset:hover { transform: scale(1.15); outline-color: #1668e3; outline-width: 2px; }
@media (max-width: 720px) {
.cfg-marca-grid { grid-template-columns: 1fr; }
}
:root {
--bg: #eef0f4;
--panel: #ffffff;
--sidebar: #0f1828;
--sidebar-2: #1a2740;
--text: #0d1726;
--text-2: #3d4759;
--muted: #7b8aa3;
--border: #cdd4df;
--border-2: #b5bfcd;
--primary: #1668e3;
--primary-2: #0042b3;
/* S 27t · color institucional del tenant (sobrescrito por JS al login).
VOX verde, PP azul, PSOE rojo, Sumar magenta, etc. */
--brand: #1668e3;
--brand-dark: #0042b3;
--brand-soft: rgba(22, 104, 227, 0.08);
--brand-rgb: 22, 104, 227;
--danger: #d62929;
--ok: #11a347;
--warn: #e07a0f;
/* Scope colors · más vivos y saturados */
--scope-nacional: #d62929;
--scope-federacion: #e07a0f;
--scope-direccion: #1668e3;
--scope-personal: #3d4759;
--scope-publico: #11a347;
--scope-interno: #1668e3;
--scope-privado: #e07a0f;
--scope-confidencial:#d62929;
/* Backgrounds tintados de scope · más saturados para mejor contraste */
--scope-publico-bg: #d6f3e0;
--scope-publico-tx: #0a6b2c;
--scope-interno-bg: #d6e7fa;
--scope-interno-tx: #0042b3;
--scope-privado-bg: #ffe9cf;
--scope-privado-tx: #8a4a08;
--scope-confidencial-bg:#fbd5d5;
--scope-confidencial-tx:#8a1414;
--shadow-sm: 0 1px 3px rgba(13,23,38,.08);
--shadow-md: 0 6px 20px rgba(13,23,38,.12);
--shadow-lg: 0 22px 60px rgba(13,23,38,.22);
--radius: 10px;
--radius-sm: 6px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
font-size: 14px;
color: var(--text);
background: var(--bg);
-webkit-font-smoothing: antialiased;
}
button { font-family: inherit; }
.muted { color: var(--muted); font-size: 12px; }
.hidden { display: none !important; }
.error-msg { color: var(--danger); font-size: 13px; margin: 8px 0 0; }
/* ─────────── LOGIN ─────────── */
.login-body {
background: linear-gradient(135deg, #1a2433 0%, #25324a 100%);
display: flex; align-items: center; justify-content: center; min-height: 100vh;
}
.login-card {
background: var(--panel); border-radius: 14px; padding: 38px 36px 28px;
width: 380px; box-shadow: var(--shadow-lg);
}
.login-brand { text-align: center; margin-bottom: 22px; }
.login-brand h1 { font-size: 22px; margin: 8px 0 4px; }
.login-brand p { font-size: 13px; margin: 0; }
.logo-mark { font-size: 32px; display: inline-block; }
.login-card form label { display: block; margin: 12px 0; font-size: 12px; color: var(--text-2); }
.login-card form input {
display: block; width: 100%; margin-top: 4px;
padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
font-size: 14px; background: #fff;
}
.login-card form input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(44,93,181,.15); }
/* Botón del formulario de login (acotado · NO global · evita estirar otros .btn-primary). */
.login-card .btn-primary {
width: 100%; margin-top: 14px; padding: 11px 14px;
background: var(--primary); color: #fff; border: 0; border-radius: var(--radius-sm);
font-size: 14px; font-weight: 600; cursor: pointer;
}
.login-card .btn-primary:hover { background: var(--primary-2); }
/* Botón primario "suelto" (sin .btn) · para cards/listas/empty-states.
Hereda look del .btn pero sin width:100% global. */
.btn-primary:not(.btn) {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 14px; font-size: 13px; font-weight: 600;
background: var(--primary); color: #fff;
border: 1px solid var(--primary); border-radius: var(--radius-sm);
cursor: pointer; user-select: none;
box-shadow: 0 1px 3px rgba(29,112,230,.25);
transition: background .12s, box-shadow .12s, transform .08s;
}
.btn-primary:not(.btn):hover { background: var(--primary-2); border-color: var(--primary-2); box-shadow: 0 2px 6px rgba(29,112,230,.35); }
.btn-primary:not(.btn):active { transform: translateY(1px); }
.login-footer { text-align: center; margin-top: 18px; font-size: 11px; }
/* ─────────── SHELL ─────────── */
.shell {
display: flex;
height: 100vh;
overflow: hidden;
}
.sidebar {
background: var(--sidebar); color: #c5cfe1;
display: flex; flex-direction: column;
width: 240px;
flex-shrink: 0;
overflow: hidden;
transition: width .28s cubic-bezier(.4,0,.2,1);
}
.shell.sidebar-collapsed .sidebar { width: 0; }
.shell.sidebar-collapsed .sidebar > * { opacity: 0; transition: opacity .12s; }
/* ─── Botón hamburguesa (3 líneas) ─── */
.hamb-btn {
width: 38px; height: 38px;
background: transparent;
border: 1px solid var(--border);
border-radius: 8px;
cursor: pointer;
display: inline-flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 4px;
margin-right: 14px;
padding: 0;
transition: background .15s, border-color .15s;
flex-shrink: 0;
}
.hamb-btn span {
display: block; width: 18px; height: 2px;
background: var(--text);
border-radius: 2px;
transition: transform .25s, opacity .15s;
}
.hamb-btn:hover { background: #f0f2f5; border-color: #cbd2dd; }
.hamb-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
/* La hamburguesa NO está dentro de .shell sino en .topbar, así que el sibling
~ no aplica. Mantenemos el botón siempre con 3 rayas: simple y claro. */
.brand { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--sidebar-2); }
.brand .logo-mark { font-size: 26px; }
.brand-name { font-weight: 700; color: #fff; font-size: 15px; }
.brand-sub { font-size: 11px; color: #94a0b5; }
.menu { flex: 1; padding: 12px 8px; overflow-y: auto; }
.menu-item {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px; margin: 2px 0; border-radius: 6px;
cursor: pointer; color: #c5cfe1; font-size: 13px; user-select: none;
}
.menu-item:hover { background: rgba(255,255,255,.05); color: #fff; }
.menu-item.active { background: var(--sidebar-2); color: #fff; font-weight: 600; }
.menu-item .icon { width: 18px; text-align: center; }
.menu-group-title { font-size: 10px; color: #6c7a91; text-transform: uppercase; letter-spacing: .08em; padding: 12px 12px 4px; }
.sidebar-foot { padding: 12px; border-top: 1px solid var(--sidebar-2); }
.user-chip { display: flex; align-items: center; gap: 10px; }
.user-chip .avatar {
width: 32px; height: 32px; border-radius: 50%;
background: var(--primary); color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 13px;
}
.user-meta { flex: 1; min-width: 0; }
.user-name { color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-cargo { font-size: 11px; }
.icon-btn { background: transparent; border: 0; color: #94a0b5; font-size: 18px; cursor: pointer; padding: 4px 8px; border-radius: 4px; }
.icon-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
/* ─────────── MAIN ─────────── */
.main { display: flex; flex-direction: column; overflow: hidden; background: var(--bg); flex: 1; min-width: 0; }
.topbar {
display: flex; align-items: center;
padding: 14px 24px; background: var(--panel); border-bottom: 1px solid var(--border);
gap: 10px;
}
.topbar h1 { font-size: 22px; margin: 0; font-weight: 700; flex: 1; }
.topbar-actions { display: flex; gap: 8px; align-items: center; }
.content { flex: 1; overflow-y: auto; padding: 20px 24px; }
.page { max-width: 1320px; margin: 0 auto; }
/* ─────────── COMPONENTS ─────────── */
/* Botones · sistema unificado */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
padding: 8px 16px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: #fff;
color: var(--text);
cursor: pointer;
font-size: 13px;
font-weight: 500;
font-family: inherit;
line-height: 1.2;
white-space: nowrap;
transition: background .12s, border-color .12s, box-shadow .12s, color .12s, transform .08s;
user-select: none;
}
.btn:hover { background: #f7f8fa; border-color: #cbd2dd; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; pointer-events: none; }
/* Primario · azul corporativo */
.btn.btn-primary {
background: var(--primary);
color: #fff;
border-color: var(--primary);
box-shadow: 0 1px 3px rgba(29,112,230,.25);
}
.btn.btn-primary:hover { background: var(--primary-2); border-color: var(--primary-2); box-shadow: 0 2px 6px rgba(29,112,230,.35); }
/* Danger · rojo sólido */
.btn.btn-danger {
background: var(--danger);
color: #fff;
border-color: var(--danger);
box-shadow: 0 1px 3px rgba(198,59,59,.25);
}
.btn.btn-danger:hover { background: #a53131; border-color: #a53131; }
/* Outline danger · borde rojo, texto rojo (para acciones destructivas secundarias) */
.btn.btn-outline-danger {
background: #fff;
color: var(--danger);
border-color: #f3c5c5;
}
.btn.btn-outline-danger:hover { background: #fdf2f2; border-color: var(--danger); color: var(--danger); }
/* Outline · borde gris, texto oscuro (acción secundaria) */
.btn.btn-outline {
background: #fff;
color: var(--text);
border-color: var(--border);
}
.btn.btn-outline:hover { background: #f7f8fa; border-color: #cbd2dd; }
/* Ghost · sin borde, texto VISIBLE (gris oscuro, no muted) */
.btn.btn-ghost {
background: transparent;
border-color: transparent;
color: var(--text-2);
}
.btn.btn-ghost:hover { background: #f0f2f5; color: var(--text); }
/* Tamaños */
.btn.btn-sm { padding: 5px 11px; font-size: 12px; }
.btn.btn-lg { padding: 11px 22px; font-size: 14px; }
.input, select.input, textarea.input {
padding: 9px 12px; border: 1.5px solid var(--border-2); border-radius: var(--radius-sm);
font-size: 14px; background: #fff; font-family: inherit; color: var(--text);
transition: border-color .12s, box-shadow .12s;
}
.input:hover { border-color: #98a3b5; }
.input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(22,104,227,.18); }
textarea.input { min-height: 80px; resize: vertical; }
.card {
background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
box-shadow: var(--shadow-sm);
}
.card-pad { padding: 18px 20px; }
/* Toolbar de agenda */
.agenda-toolbar {
display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap;
background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
padding: 14px 16px; box-shadow: var(--shadow-sm);
}
.tab-group { display: flex; gap: 2px; background: #e7eaf0; padding: 3px; border-radius: 8px; border: 1px solid var(--border-2); }
.tab-group .tab {
padding: 7px 14px; font-size: 13px; border-radius: 6px; cursor: pointer;
color: var(--text-2); border: 0; background: transparent; font-weight: 600;
transition: background .12s, color .12s;
}
.tab-group .tab:hover { color: var(--text); }
.tab-group .tab.active { background: var(--primary); color: #fff; box-shadow: var(--shadow-sm); font-weight: 700; }
.scope-filter { display: flex; gap: 6px; flex-wrap: wrap; }
/* Chip de scope · usa --c local para no duplicar 8 reglas idle + 8 reglas active */
.scope-pill {
--c: var(--text-2);
padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; cursor: pointer;
background: #fff; color: var(--c); border: 1.5px solid var(--border-2); letter-spacing: .01em;
transition: background .12s, border-color .12s, color .12s;
}
.scope-pill:hover { background: #f7f8fa; border-color: var(--c); }
.scope-pill.active { background: var(--c); color: #fff; border-color: var(--c); }
.scope-pill[data-scope="nacional"] { --c: var(--scope-nacional); }
.scope-pill[data-scope="federacion"] { --c: var(--scope-federacion); }
.scope-pill[data-scope="direccion"] { --c: var(--scope-direccion); }
.scope-pill[data-scope="personal"] { --c: var(--scope-personal); }
.scope-pill[data-scope="publico"] { --c: var(--scope-publico); }
.scope-pill[data-scope="interno"] { --c: var(--scope-interno); }
.scope-pill[data-scope="privado"] { --c: var(--scope-privado); }
.scope-pill[data-scope="confidencial"]{ --c: var(--scope-confidencial); }
.search-box {
flex: 1; max-width: 280px; position: relative;
}
.search-box input {
width: 100%; padding: 7px 10px 7px 30px;
border: 1px solid var(--border); border-radius: var(--radius-sm);
background: #fff url("data:image/svg+xml;utf8,") no-repeat 9px 50%;
font-size: 13px;
}
.agenda-counter {
font-size: 12px;
padding: 5px 12px; background: #ffe2b6; color: #7a4a05;
border: 1.5px solid #f0bf6a;
border-radius: 999px; font-weight: 700;
}
.agenda-counter.muted { background: #e7eaf0; color: var(--text-2); border-color: var(--border-2); }
/* Selector de agendas visibles */
.agendas-visibles { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.agenda-chip {
display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 9px;
border-radius: 999px; font-size: 12px; font-weight: 700;
background: #fff; color: var(--text-2); cursor: pointer; border: 1.5px solid var(--border-2);
transition: background .12s, border-color .12s;
}
.agenda-chip:hover { background: #f7f8fa; }
.agenda-chip .dot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.agenda-chip.active { background: #fff; border-color: currentColor; color: var(--text); box-shadow: var(--shadow-sm); }
.agenda-chip.active .dot { box-shadow: 0 0 0 2px rgba(255,255,255,1), 0 0 0 3px currentColor; }
.agenda-chip .x { color: var(--muted); margin-left: 2px; font-weight: 700; font-size: 14px; }
.agenda-chip .x:hover { color: var(--danger); }
.agenda-chip.add { color: var(--primary); border: 1.5px dashed var(--primary); background: rgba(22,104,227,.08); }
.agenda-chip.add:hover { background: rgba(22,104,227,.14); }
/* ─────────── VISTA SEMANA (mockup) ─────────── */
.week-grid {
display: grid; grid-template-columns: 60px repeat(7, 1fr); gap: 1px;
background: var(--border-2); border: 1.5px solid var(--border-2);
border-radius: var(--radius); overflow: hidden;
}
.week-head, .week-cell, .week-hour {
background: var(--panel); padding: 8px 6px; font-size: 12px; min-height: 28px;
}
.week-head { font-weight: 700; text-align: center; color: var(--text-2); font-size: 13px; padding: 10px 4px; text-transform: uppercase; letter-spacing: .04em; }
.week-head .wh-day { display: block; font-size: 22px; color: var(--text); font-weight: 800; margin-top: 2px; letter-spacing: -.02em; }
.week-head.today { background: linear-gradient(180deg, #d6e7fa 0%, #eaf2fc 100%); }
.week-head.today .wh-day { color: var(--primary); }
.week-cell.today { background: #f7fbff; }
.week-hour { text-align: right; color: var(--muted); padding-right: 10px; padding-top: 2px; }
.week-cell { position: relative; min-height: 60px; padding: 2px; }
.week-cell:hover { background: #fafbfd; }
.evt {
border-radius: 6px; padding: 8px 10px; margin: 2px 0; font-size: 12.5px;
background: #eef3fc; color: var(--primary-2); cursor: pointer; border-left: 3px solid var(--primary);
line-height: 1.4; overflow: hidden; position: relative;
}
.evt:hover { filter: brightness(.97); transform: translateY(-1px); transition: .12s; box-shadow: var(--shadow-sm); }
.evt .evt-title { font-weight: 600; font-size: 13px; }
.evt .evt-time { font-size: 11px; opacity: .85; font-weight: 500; }
.evt .evt-meta { display: flex; gap: 4px; margin-top: 4px; }
.evt .lock { position: absolute; top: 5px; right: 5px; font-size: 11px; opacity: .7; }
/* Eventos · usa la variable local --c-* para evitar repetir tres props por scope */
.evt {
--c-bg: var(--scope-interno-bg);
--c-tx: var(--scope-interno-tx);
--c-bd: var(--scope-interno);
background: var(--c-bg);
color: var(--c-tx);
border-left: 4px solid var(--c-bd);
font-weight: 500;
}
.evt[data-scope="publico"] { --c-bg: var(--scope-publico-bg); --c-tx: var(--scope-publico-tx); --c-bd: var(--scope-publico); }
.evt[data-scope="interno"] { --c-bg: var(--scope-interno-bg); --c-tx: var(--scope-interno-tx); --c-bd: var(--scope-interno); }
.evt[data-scope="privado"] { --c-bg: var(--scope-privado-bg); --c-tx: var(--scope-privado-tx); --c-bd: var(--scope-privado); }
.evt[data-scope="confidencial"] { --c-bg: var(--scope-confidencial-bg); --c-tx: var(--scope-confidencial-tx); --c-bd: var(--scope-confidencial); }
.evt .evt-chip { background: rgba(0,0,0,.14); color: inherit; font-weight: 700; }
.evt.unread::after {
content: ''; position: absolute; top: 6px; left: 4px; width: 6px; height: 6px;
border-radius: 50%; background: var(--warn);
}
.evt-chip {
display: inline-block; padding: 2px 7px; border-radius: 4px;
font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
background: rgba(0,0,0,.15);
}
/* Vista Mes · grilla 7×5/6 */
.month-grid {
display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px;
background: var(--border); border: 1px solid var(--border);
border-radius: var(--radius); overflow: hidden;
}
.month-head {
background: var(--panel); padding: 8px 6px; text-align: center;
font-size: 11px; font-weight: 600; color: var(--text-2); letter-spacing: .04em;
}
.month-cell {
background: var(--panel); min-height: 96px; padding: 4px 6px;
display: flex; flex-direction: column; position: relative;
transition: background .1s;
}
.month-cell:hover { background: #fafbfd; }
.month-cell.other-month { background: #f7f8fa; color: var(--muted); }
.month-cell.other-month .num { color: var(--muted); }
.month-cell.today { background: #eef3fc; }
.month-cell.today .num {
background: var(--primary); color: #fff;
width: 22px; height: 22px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
font-weight: 700;
}
.month-cell-head {
display: flex; justify-content: space-between; align-items: center;
font-size: 12px; margin-bottom: 4px;
}
.month-cell-head .num { font-weight: 600; }
.add-btn {
background: transparent; border: 0; color: var(--muted); font-size: 14px; cursor: pointer;
width: 18px; height: 18px; border-radius: 4px; opacity: 0; padding: 0;
display: inline-flex; align-items: center; justify-content: center;
}
.month-cell:hover .add-btn { opacity: 1; }
.add-btn:hover { background: var(--primary); color: #fff; }
.month-cell-body { flex: 1; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.evt-mini {
background: #eef3fc; color: var(--primary-2); border-left: 3px solid var(--primary);
padding: 2px 6px; border-radius: 4px; font-size: 11px; cursor: pointer;
display: flex; gap: 4px; align-items: baseline;
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.evt-mini:hover { filter: brightness(.95); }
.evt-mini .t { font-weight: 600; flex-shrink: 0; }
.evt-mini .ttl { overflow: hidden; text-overflow: ellipsis; }
.evt-mini[data-scope="publico"] { background: #e6f5ec; border-left-color: var(--scope-publico); color: #145a35; }
.evt-mini[data-scope="interno"] { background: #eef3fc; border-left-color: var(--scope-interno); color: var(--primary-2); }
.evt-mini[data-scope="privado"] { background: #fdf2e3; border-left-color: var(--scope-privado); color: #7a4810; }
.evt-mini[data-scope="confidencial"]{ background: #fce8e7; border-left-color: var(--scope-confidencial);color: #7a1a1d; }
.more-link {
font-size: 10px; color: var(--primary); cursor: pointer;
padding: 2px 6px; font-weight: 600;
}
.more-link:hover { text-decoration: underline; }
/* Vista Lista */
.list-day { margin: 18px 0 8px; font-size: 13px; font-weight: 600; color: var(--text-2); display: flex; align-items: baseline; gap: 8px; }
.list-day .dow { font-weight: 700; color: var(--text); font-size: 14px; }
.list-evt {
--c-bd: var(--scope-interno);
display: flex; gap: 14px; padding: 14px 18px; background: var(--panel);
border: 1px solid var(--border);
border-left: 6px solid var(--c-bd);
border-radius: var(--radius); margin-bottom: 8px;
cursor: pointer; transition: background .12s, box-shadow .12s, transform .12s, border-left-width .12s;
}
.list-evt:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); border-left-width: 9px; }
.list-evt[data-scope="publico"] { --c-bd: var(--scope-publico); }
.list-evt[data-scope="interno"] { --c-bd: var(--scope-interno); }
.list-evt[data-scope="privado"] { --c-bd: var(--scope-privado); }
.list-evt[data-scope="confidencial"] { --c-bd: var(--scope-confidencial); }
.list-evt .time { font-weight: 700; color: var(--c-bd); width: 100px; flex-shrink: 0; font-size: 14px; }
.list-evt .body { flex: 1; min-width: 0; }
.list-evt .ttl { font-weight: 600; font-size: 15px; }
.list-evt .sub { font-size: 13px; color: var(--text-2); margin-top: 4px; }
.list-evt .badges { display: flex; gap: 6px; align-items: center; }
/* Footer resumen vista Mi Semana */
.ag-footer {
margin-top: 16px; padding: 14px 18px; background: var(--panel);
border: 1px solid var(--border); border-radius: 10px;
display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: 10px;
}
.ag-resumen { display: flex; gap: 12px; align-items: center; font-size: 14px; flex-wrap: wrap; }
.ag-resumen b { color: var(--primary); font-size: 16px; font-weight: 700; }
.ag-tip { font-size: 11px; }
/* ───────────────────── HoverCard (preview rico de evento) ───────────────────── */
.hover-card-root {
position: fixed;
z-index: 800;
width: 360px;
background: var(--panel);
border: 1px solid var(--border-2);
border-left: 6px solid var(--c-bd, var(--primary));
border-radius: 12px;
box-shadow: var(--shadow-lg);
padding: 16px 18px;
opacity: 0;
transform: translateY(4px) scale(.97);
transition: opacity .15s ease, transform .15s ease;
pointer-events: none;
}
.hover-card-root.show {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.hover-card-root[data-scope="publico"] { --c-bd: var(--scope-publico); --c-bg: var(--scope-publico-bg); --c-tx: var(--scope-publico-tx); }
.hover-card-root[data-scope="interno"] { --c-bd: var(--scope-interno); --c-bg: var(--scope-interno-bg); --c-tx: var(--scope-interno-tx); }
.hover-card-root[data-scope="privado"] { --c-bd: var(--scope-privado); --c-bg: var(--scope-privado-bg); --c-tx: var(--scope-privado-tx); }
.hover-card-root[data-scope="confidencial"]{ --c-bd: var(--scope-confidencial); --c-bg: var(--scope-confidencial-bg); --c-tx: var(--scope-confidencial-tx); }
.hover-card-root .hc-head { display: flex; gap: 14px; align-items: flex-start; }
.hover-card-root .hc-ticket {
background: var(--c-bg, #d6e7fa);
color: var(--c-tx, var(--primary-2));
border-radius: 8px;
text-align: center;
padding: 10px 12px;
min-width: 60px;
flex-shrink: 0;
border: 1px solid var(--c-bd);
}
.hover-card-root .hc-day { font-size: 24px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.hover-card-root .hc-mon { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; }
.hover-card-root .hc-meta { flex: 1; min-width: 0; }
.hover-card-root .hc-tipo {
display: flex; gap: 6px; align-items: center;
font-size: 11px; color: var(--text-2); font-weight: 600;
text-transform: uppercase; letter-spacing: .04em;
}
.hover-card-root .hc-scope {
background: var(--c-bd);
color: #fff;
padding: 2px 9px; border-radius: 999px;
font-size: 10px; font-weight: 800; letter-spacing: .05em;
}
.hover-card-root .hc-dot { color: var(--muted); }
.hover-card-root .hc-titulo {
font-size: 17px; font-weight: 700; color: var(--text);
margin-top: 6px; line-height: 1.25; word-break: break-word;
}
.hover-card-root .hc-when {
display: flex; gap: 6px; align-items: center;
font-size: 13px; color: var(--text-2); font-weight: 500; margin-top: 6px;
}
.hover-card-root .hc-ubic {
display: flex; gap: 8px; align-items: center;
margin-top: 14px; padding: 8px 12px;
background: #f7f8fa; border-radius: 6px;
font-size: 13px; color: var(--text);
}
.hover-card-root .hc-ico { font-size: 14px; }
.hover-card-root .hc-resumen {
margin-top: 14px; font-size: 13px; line-height: 1.55; color: var(--text);
padding: 10px 12px; background: #fafbfd; border-left: 3px solid var(--c-bd);
border-radius: 4px;
}
.hover-card-root .hc-foot {
display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border);
align-items: center;
}
.hover-card-root .hc-org { display: flex; gap: 8px; align-items: center; }
.hover-card-root .hc-org-label {
font-size: 9px; text-transform: uppercase; letter-spacing: .07em;
color: var(--muted); font-weight: 700;
}
.hover-card-root .hc-org-name { font-size: 12px; font-weight: 700; color: var(--text); margin-top: 2px; line-height: 1.2; }
.hover-card-root .hc-av {
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px; border-radius: 50%;
color: #fff; font-weight: 700; font-size: 11px; flex-shrink: 0;
border: 2px solid #fff;
}
.hover-card-root .hc-av.sm { width: 24px; height: 24px; font-size: 10px; }
.hover-card-root .hc-av.count { background: #cbd2dd; color: var(--text); font-size: 9px; font-weight: 800; border: 2px solid #fff; }
.hover-card-root .hc-asist { display: flex; flex-direction: column; gap: 6px; }
.hover-card-root .hc-asist-avatars { display: flex; margin-left: 0; }
.hover-card-root .hc-asist-avatars .hc-av + .hc-av { margin-left: -8px; }
.hover-card-root .hc-asist-prog { display: flex; gap: 8px; align-items: center; }
.hover-card-root .hc-bar { flex: 1; height: 5px; background: #e7eaf0; border-radius: 999px; overflow: hidden; }
.hover-card-root .hc-bar > i {
display: block; height: 100%;
background: var(--c-bd, var(--primary));
border-radius: 999px;
}
.hover-card-root .hc-bar-lbl { font-size: 10px; color: var(--text-2); font-weight: 700; white-space: nowrap; }
.hover-card-root .hc-badge-row {
display: flex; justify-content: space-between; align-items: center;
margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border);
}
.hover-card-root .hc-badge {
font-size: 11px; font-weight: 700;
padding: 4px 10px; border-radius: 999px;
}
.hover-card-root .hc-badge.ok { background: #d6f3e0; color: #0a6b2c; }
.hover-card-root .hc-badge.warn { background: #ffe2b6; color: #7a4a05; }
.hover-card-root .hc-badge.muted { background: #e7eaf0; color: var(--text-2); }
.hover-card-root .hc-hint { font-size: 10px; color: var(--muted); font-weight: 500; }
.empty-state {
text-align: center; padding: 60px 20px; color: var(--muted);
background: var(--panel); border: 1px dashed var(--border); border-radius: var(--radius);
}
.empty-state h3 { color: var(--text-2); font-weight: 600; margin: 8px 0; }
/* ─────────── MODAL ─────────── */
.modal-backdrop {
position: fixed; inset: 0; background: rgba(20,30,50,.5);
display: flex; align-items: center; justify-content: center;
z-index: 1000; padding: 30px;
}
.modal {
background: var(--panel); border-radius: 12px; width: 100%; max-width: 880px;
max-height: calc(100vh - 60px); overflow: hidden; display: flex; flex-direction: column;
box-shadow: var(--shadow-lg);
}
.modal-head {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 22px; border-bottom: 1px solid var(--border);
}
.modal-head h2 { font-size: 17px; margin: 0; }
/* Botón X de cierre del modal · área clicable 36×36 y target táctil accesible.
Los interiores son aria-hidden + pointer-events:none para que el
target del click sea SIEMPRE el button. */
.modal-head .modal-x {
width: 36px; height: 36px; min-width: 36px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 8px; padding: 0; margin: -4px -8px -4px 8px;
cursor: pointer; color: var(--text-2);
}
.modal-head .modal-x:hover { background: rgba(0,0,0,0.06); color: var(--text-1); }
.modal-head .modal-x > span { pointer-events: none; font-size: 18px; line-height: 1; }
.modal-body { padding: 18px 22px; overflow-y: auto; }
.modal-foot {
display: flex; gap: 8px; row-gap: 10px; justify-content: flex-end;
flex-wrap: wrap;
padding: 14px 22px; border-top: 1px solid var(--border); background: #fafbfd;
}
.modal-foot .left { margin-right: auto; }
/* Briefing modal específico */
.brief-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.brief-date {
background: #eef3fc; color: var(--primary); padding: 8px 12px; border-radius: 8px;
text-align: center; min-width: 70px; flex-shrink: 0;
}
.brief-date .day { font-size: 22px; font-weight: 700; line-height: 1; }
.brief-date .mon { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; margin-top: 2px; }
.brief-info { flex: 1; }
.brief-info h2 { font-size: 22px; margin: 0 0 6px; font-weight: 700; }
.brief-info .meta { color: var(--text-2); font-size: 14px; display: flex; flex-wrap: wrap; gap: 12px; }
.brief-info .meta b { color: var(--text); font-weight: 600; }
.brief-section { margin: 16px 0; }
.brief-section h3 {
font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
color: var(--text-2); margin: 0 0 8px; font-weight: 700;
}
.brief-summary {
background: #f7f8fa; border-left: 3px solid var(--primary);
padding: 14px 16px; border-radius: var(--radius-sm); font-size: 14.5px; line-height: 1.6;
}
.brief-asistentes { display: flex; flex-direction: column; gap: 4px; }
.brief-asistente {
display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 6px;
background: #fafbfd; font-size: 12px;
}
.brief-asistente .av {
width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: #fff;
display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; flex-shrink: 0;
}
.brief-asistente .nm { flex: 1; font-weight: 500; }
.brief-asistente .rl { font-size: 10px; color: var(--text-2); text-transform: uppercase; }
.brief-asistente .st { font-size: 10px; padding: 2px 8px; border-radius: 999px; font-weight: 600; }
.brief-asistente .st.pendiente { background: #f0f2f5; color: var(--text-2); }
.brief-asistente .st.aceptado { background: #d4eedd; color: #1a6a3a; }
.brief-asistente .st.rechazado { background: #fce8e7; color: #7a1a1d; }
.brief-asistente .st.tentativo { background: #fff4e0; color: #8a5e10; }
.brief-asistente .leido { font-size: 12px; }
.brief-progress { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.brief-progress .bar { flex: 1; height: 8px; background: #e2e6ec; border-radius: 999px; overflow: hidden; }
.brief-progress .bar > i { display: block; height: 100%; background: var(--primary); border-radius: 999px; }
.brief-progress .lbl { font-size: 12px; color: var(--text-2); font-weight: 600; }
.brief-audit { background: #f7f8fa; padding: 10px 12px; border-radius: 6px; font-size: 11px; color: var(--text-2); margin-top: 12px; }
.brief-audit b { color: var(--text); }
/* ─────────── Componentes compartidos por pantallas read-only ─────────── */
.card-title { font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); margin: 0 0 12px; font-weight: 700; }
.kvlist { display: grid; grid-template-columns: 180px 1fr; gap: 8px 14px; font-size: 14px; margin: 0; }
.kvlist dt { color: var(--text-2); font-weight: 500; }
.kvlist dd { margin: 0; color: var(--text); font-weight: 500; }
.kvlist dd.ok { color: var(--ok); }
.kvlist code { font-size: 13px; }
.av.av-sm { width: 22px; height: 22px; font-size: 9px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; background: var(--text-2); font-weight: 700; margin-right: -4px; border: 2px solid #fff; }
.av.av-sm.muted { background: #cbd2dd; color: var(--text-2); }
/* CRM Alta de afiliado */
.crm-breadcrumb { font-size: 12px; margin-bottom: 12px; }
.crm-header {
display: flex; align-items: center; gap: 16px; padding: 18px 22px;
background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
margin-bottom: 18px;
}
.crm-avatar {
width: 60px; height: 60px; border-radius: 50%; color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-size: 22px; font-weight: 700; flex-shrink: 0;
}
.crm-id { flex: 1; }
.crm-id h1 { font-size: 26px; margin: 0; font-weight: 700; }
.crm-meta-row { display: flex; gap: 10px; margin-top: 6px; align-items: center; }
.crm-sla { display: flex; flex-direction: column; gap: 4px; min-width: 200px; }
.sla-label { font-size: 12px; text-transform: uppercase; color: var(--text-2); font-weight: 600; }
.sla-time { font-size: 20px; font-weight: 700; color: var(--primary); }
.sla-bar { height: 6px; background: #e2e6ec; border-radius: 999px; overflow: hidden; display: block; }
.sla-fill { display: block; height: 100%; background: var(--primary); border-radius: 999px; }
.crm-tabs { display: flex; gap: 4px; padding: 0 4px; margin-bottom: 14px; border-bottom: 1px solid var(--border); }
.crm-tabs .tab {
background: transparent; border: 0; padding: 10px 14px; font-size: 12px; color: var(--text-2);
border-bottom: 2px solid transparent; cursor: pointer; font-weight: 600;
}
.crm-tabs .tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.crm-selector { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.crm-pill {
display: flex; gap: 10px; align-items: center; padding: 8px 12px;
background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
cursor: pointer; font-size: 12px; color: var(--text); transition: .15s;
}
.crm-pill:hover { background: #fafbfd; }
.crm-pill.active { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(29, 112, 230, .15); background: #eef3fc; }
.crm-pill-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.crm-pill-name { font-weight: 600; }
.crm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.crm-grid .crm-workflow, .crm-grid .crm-next { grid-column: 1 / -1; }
.crm-steps { display: flex; flex-direction: column; gap: 8px; }
.crm-step { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; }
.crm-step-bullet {
width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 700; background: #e2e6ec; color: var(--text-2);
}
.crm-step.completado .crm-step-bullet { background: var(--ok); color: #fff; }
.crm-step.en_curso .crm-step-bullet { background: var(--warn); color: #fff; }
.crm-step.pendiente .crm-step-bullet { background: #e2e6ec; }
.crm-step-meta { flex: 1; }
.crm-step-title { font-weight: 600; font-size: 14px; }
.crm-step-sub { font-size: 13px; margin-top: 4px; }
.crm-next .next-text { font-size: 14px; }
.crm-next .next-actions {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 14px;
gap: 12px;
flex-wrap: wrap;
}
.crm-next .next-actions > * { flex: 0 0 auto; width: auto; }
.crm-next .next-actions .left { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.crm-next .next-actions .left .btn { width: auto; }
.crm-next .next-actions .btn { width: auto; min-width: 0; }
/* SEPA stack bar */
.sepa-stack { display: flex; height: 14px; background: #e2e6ec; border-radius: 999px; overflow: hidden; margin-bottom: 12px; }
.sepa-seg { height: 100%; }
.sepa-leyenda { display: flex; gap: 18px; font-size: 12px; color: var(--text-2); }
.sepa-leyenda .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 6px; }
/* Expediente */
.exp-header {
display: flex; justify-content: space-between; align-items: flex-end;
padding: 18px 22px; background: var(--panel); border: 1px solid var(--border);
border-radius: 12px; margin-bottom: 18px;
}
.countdown {
display: flex; align-items: baseline; gap: 6px; padding: 12px 22px;
background: linear-gradient(135deg, #c1272d 0%, #8a1a1d 100%); color: #fff;
border-radius: 12px;
}
.cd-label { font-size: 14px; opacity: .85; }
.cd-value { font-size: 32px; font-weight: 700; }
.cd-unit { font-size: 12px; opacity: .85; }
/* Selector de expediente (multi-expediente) · reutiliza el patrón del CRM */
.exp-selector { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.exp-pill {
display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px;
background: var(--panel); border: 1.5px solid var(--border-2); border-radius: 10px;
cursor: pointer; font-size: 12px; color: var(--text); transition: .15s;
text-align: left; flex: 1; min-width: 280px; max-width: 480px;
}
.exp-pill:hover { background: #fafbfd; }
.exp-pill.active {
border-color: var(--primary);
box-shadow: 0 0 0 2px rgba(22,112,230,.15);
background: #eef3fc;
}
.exp-pill-id {
font-family: monospace; font-size: 10px; font-weight: 700;
background: var(--primary); color: #fff;
padding: 3px 7px; border-radius: 4px; flex-shrink: 0; margin-top: 1px;
letter-spacing: .02em;
}
.exp-pill-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.exp-pill-title { font-size: 13px; font-weight: 700; line-height: 1.25; }
.exp-pill .muted { font-size: 11px; }
.exp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.team-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
.team-row:last-child { border-bottom: 0; }
.team-area { font-weight: 600; font-size: 13px; }
.team-pct { font-size: 12px; color: var(--text-2); }
.team-avatars { text-align: right; }
.hitos-timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; position: relative; padding: 18px 0; }
.hitos-timeline::before {
content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px;
background: var(--border); transform: translateY(-50%);
}
.hito {
position: relative; background: var(--panel); border: 2px solid var(--border);
border-radius: 8px; padding: 14px 10px; text-align: center; z-index: 1;
}
.hito.destacado { border-color: var(--primary); background: #eef3fc; }
.hito.hoy { border-color: var(--warn); background: #fff4e0; }
.hito-label { font-size: 14px; font-weight: 700; color: var(--primary); }
.hito-titulo { font-size: 12px; margin-top: 4px; color: var(--text); }
/* Cumplimiento */
.cmp-steps { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.cmp-step { font-size: 12px; padding: 6px 12px; border-radius: 999px; background: #f0f2f5; color: var(--text-2); font-weight: 600; }
.cmp-step.ok { background: #d4eedd; color: #1a6a3a; }
.cmp-step.en_curso { background: #fff4e0; color: #8a5e10; }
.cmp-checks { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.cmp-checks li { font-size: 13px; padding: 4px 0; }
.cv-ok { color: var(--ok); font-weight: 700; margin-right: 8px; }
.cv-bad { color: var(--danger); font-weight: 700; margin-right: 8px; }
.cmp-aviso { font-size: 13px; padding: 8px 12px; background: #fff4e0; border-left: 3px solid var(--warn); border-radius: 4px; margin-bottom: 6px; }
.cmp-preview { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 14px 18px; }
.cmp-preview-h { padding-bottom: 8px; margin-bottom: 10px; border-bottom: 2px solid var(--text); }
/* Personas plantilla */
.ppl-toolbar { display: flex; gap: 10px; align-items: center; padding: 12px 14px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 14px; }
.ppl-tr { cursor: default; }
.ppl-tr:hover .ppl-edit, .ppl-tr:hover .ppl-toggle { color: var(--primary); }
/* Configuración */
.cfg-section { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 18px 22px; margin-bottom: 16px; }
.cfg-section h2 { font-size: 15px; margin: 0 0 12px; font-weight: 600; }
.cfg-row { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); align-items: center; }
.cfg-row:last-child { border-bottom: 0; }
.cfg-key { flex: 1; }
.cfg-key-name { font-weight: 600; font-size: 13px; }
.cfg-key-desc { font-size: 11px; color: var(--text-2); margin-top: 2px; }
.cfg-val { font-family: monospace; font-size: 13px; }
/* ─────────── KanbanHover · tarjeta flotante rica para tareas Kanban ─────────── */
.kanban-hover-root {
position: fixed;
z-index: 800;
width: 360px;
background: var(--panel);
border: 1px solid var(--border-2);
border-left: 6px solid var(--kh-c, var(--primary));
border-radius: 12px;
box-shadow: var(--shadow-lg);
padding: 16px 18px;
opacity: 0;
transform: translateY(4px) scale(.97);
transition: opacity .15s ease, transform .15s ease;
pointer-events: none;
}
.kanban-hover-root.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
/* Colores por prioridad */
.kanban-hover-root[data-prio="critica"] { --kh-c: var(--danger); --kh-c-bg: #fde2e2; }
.kanban-hover-root[data-prio="alta"] { --kh-c: var(--warn); --kh-c-bg: #fff0d6; }
.kanban-hover-root[data-prio="media"] { --kh-c: var(--primary);--kh-c-bg: #d8e8fc; }
.kanban-hover-root[data-prio="baja"] { --kh-c: var(--ok); --kh-c-bg: #d6f3e0; }
.kanban-hover-root .kh-head {
display: flex; gap: 10px; align-items: center; justify-content: space-between;
margin-bottom: 12px;
}
.kanban-hover-root .kh-prio-badge {
background: var(--kh-c);
color: #fff;
padding: 6px 12px;
border-radius: 8px;
display: flex; flex-direction: column; gap: 0;
}
.kanban-hover-root .kh-prio-lbl {
font-size: 9px; text-transform: uppercase; letter-spacing: .08em;
font-weight: 700; opacity: .85; line-height: 1;
}
.kanban-hover-root .kh-prio-val {
font-size: 14px; font-weight: 800; line-height: 1.1; margin-top: 2px;
}
.kanban-hover-root .kh-col {
font-size: 12px; font-weight: 700; color: var(--text-2);
background: #f0f2f5; padding: 6px 10px; border-radius: 6px;
}
.kanban-hover-root .kh-titulo {
font-size: 17px; font-weight: 700; color: var(--text);
line-height: 1.3; word-break: break-word; margin-bottom: 10px;
}
.kanban-hover-root .kh-tags {
display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px;
}
.kanban-hover-root .kh-tag {
font-size: 10px; font-weight: 700;
padding: 3px 8px; border-radius: 4px;
background: #eef3fc; color: var(--primary-2);
letter-spacing: .02em;
}
.kanban-hover-root .kh-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
margin-bottom: 12px;
}
.kanban-hover-root .kh-box {
background: #fafbfd; border-radius: 8px; padding: 10px 12px;
border: 1px solid var(--border);
}
.kanban-hover-root .kh-box-label {
font-size: 9px; text-transform: uppercase; letter-spacing: .07em;
color: var(--muted); font-weight: 700; margin-bottom: 6px;
}
.kanban-hover-root .kh-resp { display: flex; gap: 8px; align-items: center; }
.kanban-hover-root .kh-av {
width: 26px; height: 26px; border-radius: 50%; color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 10px; flex-shrink: 0;
}
.kanban-hover-root .kh-resp-name {
font-size: 12px; font-weight: 700; line-height: 1.25; color: var(--text);
}
.kanban-hover-root .kh-fecha {
font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 4px;
}
.kanban-hover-root .kh-badge {
display: inline-block; font-size: 10px; font-weight: 800;
padding: 3px 8px; border-radius: 999px; letter-spacing: .02em;
}
.kanban-hover-root .kh-badge.ok { background: #d6f3e0; color: #0a6b2c; }
.kanban-hover-root .kh-badge.warn { background: #ffe2b6; color: #7a4a05; }
.kanban-hover-root .kh-badge.danger { background: #fbd5d5; color: #8a1414; }
.kanban-hover-root .kh-badge.muted { background: #e7eaf0; color: var(--text-2); }
.kanban-hover-root .kh-bloqueo {
margin-top: 4px; padding: 8px 12px;
background: #fff4d6; color: #7a4a05;
border-left: 3px solid var(--warn); border-radius: 4px;
font-size: 12px; font-weight: 600;
}
.kanban-hover-root .kh-context {
margin-top: 14px; padding: 12px;
background: var(--kh-c-bg, #f7f8fa);
border-radius: 8px;
font-size: 12px;
}
.kanban-hover-root .kh-ctx-label {
font-size: 9px; text-transform: uppercase; letter-spacing: .07em;
color: var(--muted); font-weight: 700;
}
.kanban-hover-root .kh-ctx-id {
font-family: monospace; font-size: 12px; font-weight: 700;
color: var(--text); margin-top: 2px;
}
.kanban-hover-root .kh-ctx-meta {
margin-top: 8px; display: flex; flex-direction: column; gap: 4px;
color: var(--text); line-height: 1.45;
}
.kanban-hover-root .kh-ctx-meta b { font-weight: 700; }
.kanban-hover-root .kh-progress { margin-top: 6px; }
.kanban-hover-root .kh-progress-bar { height: 6px; background: #fff; border-radius: 999px; overflow: hidden; border: 1px solid var(--border); }
.kanban-hover-root .kh-progress-bar > i { display: block; height: 100%; background: var(--kh-c); border-radius: 999px; }
.kanban-hover-root .kh-progress-lbl { font-size: 10px; color: var(--text-2); margin-top: 4px; font-weight: 600; }
.kanban-hover-root .kh-hint {
margin-top: 12px; padding-top: 10px;
border-top: 1px dashed var(--border);
font-size: 10px; color: var(--muted); font-weight: 600; text-align: center;
}
/* Workflow Kanban */
.wf-toolbar { display: flex; gap: 12px; align-items: center; padding: 12px 14px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 14px; }
.kanban { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kanban-col { background: #f7f8fa; border: 1px solid var(--border); border-radius: 10px; padding: 10px 8px; min-height: 200px; }
.kanban-col-head { display: flex; justify-content: space-between; padding: 4px 8px 10px; }
.kanban-col-title { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; color: var(--text-2); }
.kanban-col-count { font-size: 11px; padding: 2px 8px; background: #fff; border-radius: 999px; color: var(--text-2); }
.kanban-card { background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; margin-bottom: 6px; border-left: 3px solid #cbd2dd; }
.kanban-card.prio-critica { border-left-color: var(--danger); }
.kanban-card.prio-alta { border-left-color: var(--warn); }
.kanban-card.prio-media { border-left-color: var(--primary); }
.kanban-card-h { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
.kanban-prio { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 3px; background: rgba(0,0,0,.06); color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; }
.kanban-tag { font-size: 10px; padding: 2px 6px; border-radius: 3px; background: #eef3fc; color: var(--primary-2); font-weight: 600; }
.kanban-card-title { font-size: 14px; font-weight: 600; line-height: 1.4; }
.kanban-card-f { display: flex; gap: 8px; align-items: center; margin-top: 8px; font-size: 11px; }
.kanban-block { font-size: 11px; padding: 4px 8px; background: #fff4e0; color: #8a5e10; border-radius: 4px; margin-top: 6px; font-weight: 600; }
.kanban-card { cursor: grab; transition: transform .12s, box-shadow .12s; }
.kanban-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.kanban-card.dragging { opacity: .4; cursor: grabbing; }
.kanban-col.over { background: #eef3fc; border-color: var(--primary); }
.wf-del { opacity: 0; transition: .15s; }
.kanban-card:hover .wf-del { opacity: 1; }
.wf-del:hover { color: var(--danger); background: rgba(198, 59, 59, .1); }
/* ─────────── CENTRO OPERATIVO NACIONAL ─────────── */
.ops-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 18px; }
.ops-header h1 { font-size: 20px; font-weight: 700; }
.ops-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 22px; }
.ops-card {
background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
padding: 16px 18px; box-shadow: var(--shadow-sm); position: relative;
}
.card-info-btn {
position: absolute; top: 10px; right: 10px;
width: 22px; height: 22px; border-radius: 50%;
background: transparent; border: 1px solid var(--border); color: var(--text-2);
font-size: 11px; font-weight: 700; cursor: pointer; padding: 0;
display: inline-flex; align-items: center; justify-content: center;
transition: .12s; line-height: 1;
}
.card-info-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); transform: scale(1.05); }
.info-tip { font-size: 13px; line-height: 1.55; }
.info-tip p { margin: 6px 0; }
.info-tip ul { padding-left: 22px; }
.info-tip code { font-size: 12px; background: #f0f2f5; padding: 1px 4px; border-radius: 3px; }
.info-fuente {
margin-top: 14px; padding: 10px 12px; background: #f7f8fa;
border-left: 3px solid var(--primary); border-radius: 4px;
font-size: 11px; color: var(--text-2);
}
.info-fuente b { color: var(--text); }
.ops-card-label { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); font-weight: 700; }
.ops-card-value { font-size: 34px; font-weight: 700; margin-top: 6px; color: var(--text); line-height: 1.1; }
.ops-card-sub { font-size: 13px; margin-top: 8px; }
.ops-card-sub.ok { color: var(--ok); }
.ops-card-sub.warn { color: var(--warn); }
.ops-section { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.ops-section-head {
display: flex; justify-content: space-between; align-items: center;
padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.ops-section-head h2 { font-size: 15px; margin: 0; font-weight: 600; }
.ops-table { width: 100%; }
.ops-trh, .ops-tr {
display: grid; grid-template-columns: 2.5fr 1fr 2fr 2fr 1.2fr;
gap: 12px; align-items: center; padding: 12px 18px;
font-size: 14px;
}
.ops-trh {
background: #f7f8fa; font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
font-weight: 700; color: var(--text-2); border-bottom: 1px solid var(--border);
}
.ops-tr { border-bottom: 1px solid var(--border); transition: background .12s; }
.ops-tr:hover { background: #fafbfd; }
.ops-tr:last-child { border-bottom: 0; }
.ops-fed-name { font-weight: 600; }
.ops-bar { width: 100%; max-width: 140px; height: 6px; background: #e2e6ec; border-radius: 999px; overflow: hidden; display: inline-block; vertical-align: middle; }
.ops-bar-fill { height: 100%; border-radius: 999px; }
.ops-pct { font-size: 11px; margin-left: 8px; color: var(--text-2); }
.ops-st {
display: inline-block; padding: 3px 10px; border-radius: 999px;
font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.ops-st.st-ok { background: #d4eedd; color: #1a6a3a; }
.ops-st.st-rev { background: #fff4e0; color: #8a5e10; }
.ops-st.st-alert { background: #fce8e7; color: #7a1a1d; }
.ops-foot { font-size: 11px; text-align: center; padding: 16px 0; }
/* Documentación adjunta (modal Brief) */
.docs-table { display: flex; flex-direction: column; gap: 4px; }
.docs-row {
display: flex; gap: 12px; align-items: center;
padding: 10px 12px; background: #fff; border: 1px solid var(--border);
border-radius: 8px; cursor: pointer; transition: .15s;
}
.docs-row:hover { background: #fafbfd; box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.docs-icon { font-size: 22px; flex-shrink: 0; }
.docs-meta { flex: 1; min-width: 0; }
.docs-titulo { font-weight: 600; font-size: 13px; line-height: 1.3; }
.docs-sub { font-size: 11px; margin-top: 2px; }
.docs-meta-r {
display: flex; gap: 10px; align-items: center; flex-shrink: 0; font-size: 11px;
}
.docs-meta-r > span { white-space: nowrap; }
.docs-open { color: var(--primary); font-weight: 600; }
/* Documento viewer */
.docv { display: flex; flex-direction: column; gap: 14px; }
.docv-head { display: flex; gap: 14px; align-items: flex-start; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.docv-icon { font-size: 32px; flex-shrink: 0; padding-top: 4px; }
.docv-meta { flex: 1; }
.docv-tipo {
font-size: 10px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
color: var(--primary); margin-bottom: 4px;
}
.docv-head h2 { font-size: 17px; margin: 0; line-height: 1.3; }
.docv-sub { font-size: 12px; margin-top: 4px; }
.docv-body {
background: #fcfcfd; border: 1px solid var(--border); border-radius: 8px;
padding: 22px 26px; font-size: 13px; line-height: 1.6; color: var(--text);
}
.docv-body h2 { font-size: 16px; margin-top: 0; }
.docv-body h3 { font-size: 14px; margin-top: 18px; color: var(--primary-2); }
.docv-body ol, .docv-body ul { padding-left: 22px; }
.docv-body p { margin: 8px 0; }
.docv-body b { color: var(--text); }
.docv-foot {
font-size: 11px; padding: 8px 12px; background: #f7f8fa; border-radius: 6px;
text-align: center;
}
/* Posición del grupo (caja destacada) */
.pos-box {
background: linear-gradient(135deg, #eef3fc 0%, #fafbfd 100%);
border: 1px solid var(--primary);
border-left: 4px solid var(--primary);
border-radius: 8px;
padding: 14px 16px;
}
.pos-vote {
display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px;
}
.pos-vote-label {
font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
color: var(--text-2); font-weight: 700;
}
.pos-vote-value {
font-size: 22px; font-weight: 700; color: var(--primary-2);
}
.pos-meta {
display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 6px 14px;
font-size: 12px; margin: 8px 0;
}
.pos-instr {
margin-top: 10px; padding: 10px 12px; background: #fff;
border-radius: 6px; font-size: 12px; line-height: 1.55;
border: 1px solid var(--border);
}
.pos-instr p { margin: 6px 0; }
/* Enlaces externos · vídeos, webs oficiales, normativa, prensa */
.brief-enlaces { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.brief-enl-card {
--c: var(--primary);
display: flex; gap: 12px; align-items: flex-start;
padding: 12px 14px;
background: #fff; border: 1px solid var(--border);
border-left: 4px solid var(--c);
border-radius: 8px;
text-decoration: none; color: inherit;
transition: box-shadow .12s, transform .12s, border-color .12s, background .12s;
}
.brief-enl-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); background: #fafbfd; }
.brief-enl-card[data-tipo="video"] { --c: #c81818; }
.brief-enl-card[data-tipo="web_oficial"] { --c: var(--primary); }
.brief-enl-card[data-tipo="prensa"] { --c: #6c4ee8; }
.brief-enl-card[data-tipo="normativa"] { --c: var(--scope-publico); }
.brief-enl-card[data-tipo="multimedia"] { --c: #d62929; }
.brief-enl-icon {
font-size: 22px;
width: 38px; height: 38px;
background: color-mix(in srgb, var(--c) 12%, transparent);
color: var(--c);
border-radius: 8px;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.brief-enl-meta { flex: 1; min-width: 0; }
.brief-enl-tipo {
font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
color: var(--c); font-weight: 800;
}
.brief-enl-titulo {
font-size: 13px; font-weight: 700; color: var(--text);
margin-top: 3px; line-height: 1.3; word-break: break-word;
}
.brief-enl-desc {
font-size: 12px; color: var(--text-2); margin-top: 4px; line-height: 1.45;
}
.brief-enl-url {
font-family: monospace; font-size: 11px; color: var(--muted);
margin-top: 6px;
}
.brief-enl-arrow { color: var(--c); font-weight: 700; }
/* Histórico relacionado · timeline */
.hist-timeline {
display: flex; flex-direction: column; gap: 6px;
position: relative; padding-left: 8px;
}
.hist-item {
display: flex; gap: 12px; padding: 10px 12px; background: #fafbfd;
border-radius: 6px; border-left: 3px solid var(--border);
}
.hist-date {
flex-shrink: 0; min-width: 48px; text-align: center;
background: var(--panel); padding: 4px 6px; border-radius: 4px;
}
.hist-day {
display: block; font-size: 16px; font-weight: 700; color: var(--primary);
}
.hist-mon {
display: block; font-size: 9px; text-transform: uppercase; letter-spacing: .06em;
font-weight: 600; color: var(--text-2);
}
.hist-meta { flex: 1; min-width: 0; }
.hist-titulo { font-size: 13px; font-weight: 600; }
.hist-desc { font-size: 12px; margin-top: 2px; line-height: 1.4; }
.hist-ref { font-size: 11px; margin-top: 3px; color: var(--text-2); }
/* Aclaraciones dentro del modal Brief */
.acl-item {
background: #fafbfd; border: 1px solid var(--border); border-radius: 8px;
padding: 12px 14px; margin: 8px 0;
}
.acl-head { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.acl-head .av {
width: 28px; height: 28px; border-radius: 50%; color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 11px; flex-shrink: 0;
}
.acl-meta { flex: 1; min-width: 0; }
.acl-asunto { font-weight: 600; font-size: 13px; }
.acl-estado {
font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
padding: 2px 8px; border-radius: 999px;
}
.acl-estado.abierta { background: #fff4e0; color: #8a5e10; }
.acl-estado.respondida { background: #d4eedd; color: #1a6a3a; }
.acl-estado.cerrada { background: #f0f2f5; color: var(--text-2); }
.acl-msg { font-size: 13px; line-height: 1.45; color: var(--text); margin: 4px 0 0; }
.acl-respuesta {
margin-top: 10px; padding: 10px 12px; background: #eef3fc; border-radius: 6px;
font-size: 13px; border-left: 3px solid var(--primary);
}
.acl-resp textarea { font-family: inherit; }
/* People picker (modal Nuevo/Editar evento) */
.picker { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #fff; }
.picker-tabs { width: 100%; border-radius: 0; padding: 6px 6px 0; background: #f7f8fa; border-bottom: 1px solid var(--border); }
.picker-tabs .tab { padding: 6px 12px; font-size: 12px; }
.picker-panes { padding: 12px; }
.picker-pane { display: none; }
.picker-pane.active { display: block; }
.picker-results {
margin-top: 8px; max-height: 220px; overflow-y: auto;
border: 1px solid var(--border); border-radius: 6px; background: #fff;
}
.picker-results:empty { display: none; }
.picker-row {
display: flex; gap: 10px; align-items: center; padding: 8px 10px;
border-bottom: 1px solid var(--border); cursor: pointer;
}
.picker-row:last-child { border-bottom: 0; }
.picker-row:hover { background: #fafbfd; }
.picker-row .av {
width: 28px; height: 28px; border-radius: 50%; color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 11px; flex-shrink: 0;
}
.picker-row-meta { flex: 1; min-width: 0; }
.picker-row-name { font-size: 13px; font-weight: 500; }
.grupo-row {
display: flex; gap: 10px; align-items: center; padding: 10px 12px;
cursor: pointer; border-bottom: 1px solid var(--border); background: #fff;
}
.grupo-row:last-child { border-bottom: 0; }
.grupo-row:hover { background: #fafbfd; }
.grupo-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.grupo-meta { flex: 1; }
.grupo-nombre { font-weight: 600; font-size: 13px; }
.asist-list { max-height: 220px; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; background: #fff; }
.asist-row {
display: flex; gap: 10px; align-items: center; padding: 8px 10px;
border-bottom: 1px solid var(--border);
}
.asist-row:last-child { border-bottom: 0; }
.asist-row .av {
width: 26px; height: 26px; border-radius: 50%; color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 11px; flex-shrink: 0;
}
.asist-meta { flex: 1; min-width: 0; font-size: 13px; }
/* ─────────── Visor de manuales (#docs) ─────────── */
.docs-shell {
display: grid;
grid-template-columns: 300px 1fr;
gap: 18px;
height: calc(100vh - 110px);
}
.docs-sidebar {
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 14px;
overflow-y: auto;
}
.docs-side-header { padding: 8px 8px 14px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.docs-side-title { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); }
.docs-group { margin-bottom: 14px; }
.docs-group-title {
font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
color: var(--muted); font-weight: 700;
padding: 4px 8px 8px;
}
.docs-item {
width: 100%; text-align: left;
background: transparent;
border: 1.5px solid transparent;
border-radius: 8px;
padding: 10px 12px;
margin-bottom: 4px;
cursor: pointer;
transition: background .12s, border-color .12s;
display: flex; flex-direction: column; gap: 2px;
}
.docs-item:hover { background: #f7f8fa; border-color: var(--border); }
.docs-item.active {
background: #eef3fc;
border-color: var(--primary);
}
.docs-item-title { font-size: 14px; font-weight: 700; color: var(--text); }
.docs-item-desc { font-size: 11px; color: var(--text-2); line-height: 1.35; }
.docs-item-meta { font-size: 10px; color: var(--muted); margin-top: 2px; }
.docs-main {
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow-y: auto;
padding: 30px 40px;
}
.docs-welcome {
display: flex; flex-direction: column; align-items: center;
justify-content: center; height: 100%; text-align: center;
}
.docs-welcome-icon { font-size: 56px; margin-bottom: 16px; }
.docs-welcome h2 { font-size: 20px; font-weight: 700; margin: 0 0 6px; }
.docs-article-head { padding-bottom: 16px; border-bottom: 2px solid var(--border); margin-bottom: 22px; }
.docs-article-pill {
display: inline-block;
font-family: monospace; font-size: 11px;
background: var(--primary); color: #fff;
padding: 3px 10px; border-radius: 4px;
margin-bottom: 10px; letter-spacing: .02em;
}
.docs-article-title { font-size: 26px; font-weight: 700; margin: 0; line-height: 1.2; }
/* Tipografía del cuerpo del documento renderizado */
.docs-article-body { font-size: 14.5px; line-height: 1.65; color: var(--text); max-width: 920px; }
.docs-article-body > *:first-child { margin-top: 0; }
.docs-article-body h1, .docs-article-body h2, .docs-article-body h3, .docs-article-body h4 {
color: var(--text); font-weight: 700; line-height: 1.3;
}
.docs-article-body h1 { font-size: 24px; margin: 32px 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.docs-article-body h2 { font-size: 20px; margin: 32px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--border); color: var(--primary-2); }
.docs-article-body h3 { font-size: 17px; margin: 26px 0 10px; color: var(--text); }
.docs-article-body h4 { font-size: 15px; margin: 22px 0 8px; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; }
.docs-article-body p { margin: 10px 0; }
.docs-article-body ul, .docs-article-body ol { padding-left: 28px; margin: 10px 0; }
.docs-article-body li { margin: 4px 0; }
.docs-article-body li > p { margin: 4px 0; }
.docs-article-body strong, .docs-article-body b { font-weight: 700; color: var(--text); }
.docs-article-body em, .docs-article-body i { color: var(--text-2); }
.docs-article-body code {
background: #f0f2f5; color: #c1272d;
padding: 2px 6px; border-radius: 4px;
font-family: 'Consolas', monospace; font-size: 13px;
}
.docs-article-body pre {
background: #1a2433; color: #e6e6e6;
padding: 16px 20px; border-radius: 8px;
overflow-x: auto; margin: 14px 0;
border: 1px solid #25324a;
}
.docs-article-body pre code {
background: transparent; color: inherit; padding: 0;
font-size: 12.5px; line-height: 1.55;
}
.docs-article-body blockquote {
margin: 14px 0;
padding: 10px 16px;
border-left: 4px solid var(--primary);
background: #eef3fc;
color: var(--text);
border-radius: 0 6px 6px 0;
}
.docs-article-body blockquote p { margin: 6px 0; }
.docs-article-body hr {
border: 0; border-top: 1px solid var(--border);
margin: 28px 0;
}
.docs-article-body a {
color: var(--primary); text-decoration: none;
border-bottom: 1px solid transparent;
}
.docs-article-body a:hover { border-bottom-color: var(--primary); }
.docs-article-body table {
border-collapse: collapse;
width: 100%; margin: 14px 0;
font-size: 13.5px;
}
.docs-article-body th, .docs-article-body td {
border: 1px solid var(--border);
padding: 8px 12px; text-align: left;
vertical-align: top;
}
.docs-article-body th {
background: #f7f8fa; font-weight: 700; font-size: 12px;
text-transform: uppercase; letter-spacing: .04em; color: var(--text-2);
}
.docs-article-body tr:nth-child(even) td { background: #fafbfd; }
.docs-article-body img { max-width: 100%; height: auto; border-radius: 6px; margin: 14px 0; }
.docs-article-body details {
background: #f7f8fa; border: 1px solid var(--border);
border-radius: 6px; padding: 8px 12px; margin: 10px 0;
}
.docs-article-body summary { cursor: pointer; font-weight: 600; }
/* Toast */
#toast-root { position: fixed; right: 18px; bottom: 18px; z-index: 2000; display: flex; flex-direction: column; gap: 8px; }
.toast {
background: #1a2433; color: #fff; padding: 11px 16px; border-radius: 8px; font-size: 13px;
box-shadow: var(--shadow-lg); animation: toastIn .2s ease-out;
}
.toast.error { background: var(--danger); }
.toast.ok { background: var(--ok); }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
/* Chip "→ EXP-…" en cards de evento: vivido, clickeable, accesible. */
.evt-chip.evt-chip-exp {
background: rgba(17, 163, 71, .14);
color: var(--ok, #11a347);
font-weight: 700;
cursor: pointer;
border: 1px solid rgba(17, 163, 71, .35);
transition: background .12s ease, transform .08s ease;
}
.evt-chip.evt-chip-exp:hover {
background: rgba(17, 163, 71, .22);
transform: translateY(-1px);
}
/* ──────────────────────────────────────────────────────────────────────
EventoForm enriquecido (S 16) · pills, secciones, bloque de fecha.
────────────────────────────────────────────────────────────────────── */
.ef-header {
display: flex;
align-items: stretch;
gap: 14px;
margin-bottom: 18px;
}
.ef-date-block {
flex: 0 0 76px;
border: 1px solid var(--border, #e2e6ec);
border-radius: 10px;
padding: 10px 8px;
text-align: center;
background: linear-gradient(180deg, #f8fafc 0%, #eef3fc 100%);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.ef-date-block .ef-date-day {
font-size: 30px;
font-weight: 800;
line-height: 1;
color: var(--primary, #1668e3);
font-variant-numeric: tabular-nums;
}
.ef-date-block .ef-date-mon {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--text-2, #3d4759);
margin-top: 2px;
}
/* colapsable: oculto la flecha nativa y añado caret rotador */
details.ef-section {
border-top: 1px solid var(--border, #e2e6ec);
padding: 0;
}
details.ef-section:first-of-type { border-top: 0; }
details.ef-section[open] { padding-bottom: 14px; }
details.ef-section > summary {
list-style: none;
cursor: pointer;
padding: 14px 0 12px;
display: flex;
align-items: center;
gap: 8px;
user-select: none;
}
details.ef-section > summary::-webkit-details-marker { display: none; }
details.ef-section > summary::before {
content: '▸';
display: inline-block;
font-size: 11px;
color: var(--text-2, #5e6b80);
transition: transform .15s ease;
width: 12px;
}
details.ef-section[open] > summary::before { transform: rotate(90deg); }
.ef-section-head {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--text-2, #3d4759);
margin: 0;
}
.ef-pills-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.ef-pill {
border: 1px solid var(--border, #e2e6ec);
background: #fff;
color: var(--text, #1a2433);
font-size: 12px;
font-weight: 600;
padding: 6px 12px;
border-radius: 999px;
cursor: pointer;
transition: all .12s ease;
font-family: inherit;
}
.ef-pill:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(10,22,40,.06); }
.ef-pill[data-pill-on="1"] {
background: var(--primary, #1668e3);
color: #fff;
border-color: var(--primary, #1668e3);
}
/* Pills de scope con sus colores específicos cuando están activas */
.ef-pill-scope[data-scope="publico"][data-pill-on="1"] { background: var(--ok, #11a347); border-color: var(--ok, #11a347); }
.ef-pill-scope[data-scope="interno"][data-pill-on="1"] { background: var(--primary, #1668e3); border-color: var(--primary, #1668e3); }
.ef-pill-scope[data-scope="privado"][data-pill-on="1"] { background: var(--warn, #e07a0f); border-color: var(--warn, #e07a0f); }
.ef-pill-scope[data-scope="confidencial"][data-pill-on="1"] { background: var(--bad, #d62929); border-color: var(--bad, #d62929); }
/* Responsive: pills wrap, secciones más compactas en móvil */
@media (max-width: 760px) {
.ef-header { flex-direction: column; }
.ef-date-block { flex: 0 0 auto; padding: 12px; }
.ef-section { padding: 12px 0; }
}
/* Color swatches del eventoForm */
.ef-color-row { display: flex; flex-wrap: wrap; gap: 6px; }
.ef-color-swatch {
width: 28px; height: 28px; border-radius: 50%;
border: 2px solid var(--border, #e2e6ec);
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
font-size: 12px; color: #fff; font-weight: 700;
transition: transform .12s ease, box-shadow .12s ease;
padding: 0;
}
.ef-color-swatch:hover { transform: scale(1.1); }
.ef-color-swatch[data-color-on="1"] { box-shadow: 0 0 0 3px rgba(22,104,227,.28); transform: scale(1.1); }
.ef-color-swatch.ef-color-def { background: #fff; color: var(--text-2, #5e6b80); }
.ef-color-swatch.ef-color-g { background: #11a347; }
.ef-color-swatch.ef-color-b { background: #1668e3; }
.ef-color-swatch.ef-color-o { background: #e07a0f; }
.ef-color-swatch.ef-color-r { background: #d62929; }
.ef-color-swatch.ef-color-p { background: #8b5cf6; }
.ef-color-swatch.ef-color-c { background: #0bb4c8; }
.ef-color-swatch.ef-color-l { background: #86c61e; }
.ef-color-swatch.ef-color-gr { background: #6b7785; }
/* ──────────────────────────────────────────────────────────────────────
RichText · editor WYSIWYG ligero (window.RichText).
Estructura: .rt-wrap > .rt-toolbar + .rt-editor
────────────────────────────────────────────────────────────────────── */
.rt-wrap {
display: flex;
flex-direction: column;
border: 1px solid var(--border, #e2e6ec);
border-radius: 8px;
background: #fff;
overflow: hidden;
}
.rt-wrap:focus-within { border-color: var(--primary, #1668e3); box-shadow: 0 0 0 3px rgba(22,104,227,.12); }
.rt-toolbar {
display: flex;
flex-wrap: wrap;
gap: 2px;
padding: 6px;
background: #fafbfd;
border-bottom: 1px solid var(--border, #e2e6ec);
align-items: center;
}
.rt-sep {
width: 1px; height: 18px; background: var(--border, #e2e6ec); margin: 0 4px;
}
.rt-btn {
display: inline-flex; align-items: center; justify-content: center;
min-width: 28px; height: 26px; padding: 0 6px;
background: transparent; color: var(--text, #1a2433);
border: 1px solid transparent; border-radius: 4px;
font-family: inherit; font-size: 12px; font-weight: 600;
cursor: pointer; transition: background .12s, border-color .12s;
}
.rt-btn:hover { background: #e8ebf0; }
.rt-btn:active { background: #d6dae3; }
.rt-btn-on {
background: rgba(22,104,227,.14);
color: var(--primary, #1668e3);
border-color: rgba(22,104,227,.35);
}
.rt-editor {
min-height: 140px;
padding: 12px 14px;
outline: none;
font-family: inherit;
font-size: 14px;
line-height: 1.55;
color: var(--text, #1a2433);
background: #fff;
overflow-y: auto;
max-height: 480px;
}
.rt-editor[contenteditable=true]:empty::before {
content: attr(data-placeholder);
color: var(--text-2, #94a0b5);
pointer-events: none;
}
.rt-editor p { margin: 0 0 8px; }
.rt-editor p:last-child { margin-bottom: 0; }
.rt-editor h3 { font-size: 15px; font-weight: 700; margin: 12px 0 6px; }
.rt-editor blockquote {
margin: 8px 0; padding: 6px 12px;
border-left: 3px solid var(--primary, #1668e3);
background: #f5f8fc; color: var(--text-2, #3d4759);
font-style: italic;
}
.rt-editor ul, .rt-editor ol { margin: 6px 0 8px; padding-left: 22px; }
.rt-editor li { margin: 2px 0; }
.rt-editor a { color: var(--primary, #1668e3); text-decoration: underline; }
/* Responsive: en móvil la toolbar puede envolver y los botones siguen táctiles */
@media (max-width: 760px) {
.rt-toolbar { padding: 4px; }
.rt-btn { min-width: 32px; height: 30px; }
.rt-editor { min-height: 120px; font-size: 15px; }
}
/* Selector de expedientes en Workflow Kanban (S 17) · pattern parecido a exp-selector */
.wf-selector {
display: flex; flex-wrap: wrap; gap: 8px;
margin-bottom: 16px;
padding-bottom: 14px;
border-bottom: 1px dashed var(--border, #e2e6ec);
}
.wf-pill {
display: flex; flex-direction: column; align-items: flex-start;
gap: 4px;
padding: 8px 12px;
background: #fff;
border: 1px solid var(--border, #e2e6ec);
border-radius: 10px;
cursor: pointer;
text-align: left;
font-family: inherit;
transition: border-color .12s, box-shadow .12s, transform .08s;
min-width: 160px;
max-width: 260px;
}
.wf-pill:hover { border-color: var(--primary, #1668e3); transform: translateY(-1px); }
.wf-pill.active {
border-color: var(--primary, #1668e3);
box-shadow: 0 0 0 3px rgba(22,104,227,.14);
background: #f5f8fc;
}
.wf-pill-code {
font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
font-size: 10px; font-weight: 700;
color: var(--primary, #1668e3);
background: rgba(22,104,227,.10);
padding: 2px 6px; border-radius: 4px;
}
.wf-pill-meta { display: flex; flex-direction: column; gap: 2px; }
.wf-pill-title { font-size: 13px; font-weight: 600; line-height: 1.25; color: var(--text, #1a2433); }
.wf-pill .muted { font-size: 11px; }
/* ─────────── Workflow · CRUD list por defecto ─────────── */
.wf-back-row { margin-bottom: 14px; }
.wf-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.wf-list-row {
display: flex;
align-items: center;
gap: 16px;
padding: 14px 18px;
background: #fff;
border: 1px solid var(--border, #e2e6ec);
border-left: 4px solid var(--primary, #1668e3);
border-radius: 10px;
cursor: pointer;
text-align: left;
font: inherit;
color: inherit;
transition: transform .08s ease, box-shadow .12s ease, border-left-width .12s;
}
.wf-list-row:hover {
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(10, 22, 40, 0.08);
border-left-width: 6px;
}
.wf-list-row-main { flex: 1; min-width: 0; }
.wf-list-bread {
font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
font-size: 11px;
font-weight: 600;
}
.wf-list-title {
font-size: 15px;
font-weight: 600;
margin-top: 4px;
color: var(--text, #1a2433);
line-height: 1.35;
}
.wf-list-meta { font-size: 12px; margin-top: 6px; display: flex; gap: 8px; }
.wf-list-right {
display: flex; align-items: center; gap: 12px;
flex-shrink: 0;
}
.wf-list-count {
font-size: 22px;
font-weight: 700;
color: var(--primary, #1668e3);
font-variant-numeric: tabular-nums;
}
.wf-list-arrow {
font-size: 18px;
color: var(--text-2, #5e6b80);
transition: transform .12s;
}
.wf-list-row:hover .wf-list-arrow { transform: translateX(3px); color: var(--primary, #1668e3); }
@media (max-width: 760px) {
.wf-list-row { flex-direction: column; align-items: stretch; gap: 8px; }
.wf-list-right { justify-content: flex-end; }
}
/* ─────────── CrudToolbar (filtro + export) ─────────── */
.crud-toolbar {
display: flex; align-items: center; gap: 12px;
margin-bottom: 14px;
padding: 8px 10px;
background: #fff;
border: 1px solid var(--border, #e2e6ec);
border-radius: 10px;
}
.crud-toolbar-search {
position: relative;
display: flex; align-items: center;
flex: 0 0 360px; max-width: 100%;
}
.crud-toolbar-icon {
position: absolute; left: 10px; pointer-events: none; font-size: 13px;
color: var(--text-2, #5e6b80);
}
.crud-toolbar-input {
width: 100%;
padding: 8px 32px 8px 32px;
border: 1px solid var(--border, #e2e6ec);
border-radius: 7px;
font: inherit; font-size: 13px;
background: #fafbfd;
}
.crud-toolbar-input:focus {
outline: none; border-color: var(--primary, #1668e3);
box-shadow: 0 0 0 3px rgba(22,104,227,.12); background: #fff;
}
.crud-toolbar-clear {
position: absolute; right: 6px;
background: transparent; border: 0; cursor: pointer;
color: var(--text-2, #5e6b80); font-size: 14px;
padding: 4px 6px; border-radius: 4px;
}
.crud-toolbar-clear:hover { background: #f0f2f5; }
.crud-toolbar-count { font-size: 12px; white-space: nowrap; }
.crud-toolbar-export {
display: inline-flex; align-items: center; gap: 4px;
font-size: 13px; padding: 7px 12px;
}
@media (max-width: 760px) {
.crud-toolbar { flex-wrap: wrap; }
.crud-toolbar-search { flex: 1 1 100%; }
}
/* ─────────── Tabla columnar genérica (CrudTable) ─────────── */
.crud-table-wrap {
background: #fff;
border: 1px solid var(--border, #e2e6ec);
border-radius: 10px;
overflow: auto;
position: relative;
}
.crud-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.crud-table thead th {
position: sticky; top: 0;
background: #fafbfd;
text-align: left;
font-weight: 700; font-size: 11px;
text-transform: uppercase; letter-spacing: .05em;
color: var(--text-2, #3d4759);
padding: 10px 12px;
border-bottom: 1px solid var(--border, #e2e6ec);
user-select: none;
white-space: nowrap;
position: relative;
}
.crud-table th .crud-resize {
position: absolute; right: 0; top: 0; bottom: 0; width: 6px;
cursor: col-resize; user-select: none;
}
.crud-table th .crud-resize:hover,
.crud-table th .crud-resize.active { background: rgba(22,104,227,.25); }
.crud-table th[data-sortable] { cursor: pointer; }
.crud-table th[data-sort-dir="asc"]::after { content: ' ▲'; color: var(--primary, #1668e3); }
.crud-table th[data-sort-dir="desc"]::after { content: ' ▼'; color: var(--primary, #1668e3); }
.crud-table tbody tr {
border-bottom: 1px solid var(--border, #e2e6ec);
cursor: pointer;
transition: background .12s;
}
.crud-table tbody tr:hover { background: #f5f8fc; }
.crud-table tbody tr:last-child { border-bottom: 0; }
.crud-table td { padding: 10px 12px; vertical-align: top; }
.crud-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.crud-table .mono { font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace); font-size: 12px; font-weight: 600; }
.crud-table .crud-empty { padding: 32px; text-align: center; color: var(--text-2, #5e6b80); }
/* ─────────── CrudToolbar acciones (S 18d): 👁 🖨 ⬇ ▾ ─────────── */
.crud-toolbar-actions {
display: flex; align-items: center; gap: 6px;
}
.crud-toolbar-actions .btn {
font-size: 12px; padding: 7px 11px;
}
.crud-toolbar-actions .btn > span {
font-size: 14px; line-height: 1;
}
/* Dropdown del botón Exportar */
.ct-act-export-wrap { position: relative; }
.ct-act-export-menu {
position: absolute; top: calc(100% + 4px); right: 0;
background: #fff;
border: 1px solid var(--border, #e2e6ec);
border-radius: 8px;
box-shadow: 0 6px 20px rgba(10, 22, 40, .14);
min-width: 180px;
padding: 6px;
z-index: 1000;
display: flex; flex-direction: column; gap: 2px;
}
.ct-act-export-menu button {
background: transparent; border: 0;
text-align: left;
padding: 8px 10px;
border-radius: 5px;
font-size: 13px; font-family: inherit;
cursor: pointer;
color: var(--text, #1a2433);
transition: background .12s;
}
.ct-act-export-menu button:hover { background: #f0f4f9; }
@media (max-width: 760px) {
.crud-toolbar-actions { flex-wrap: wrap; }
.crud-toolbar-actions .btn { padding: 8px 10px; }
}
/* ─────────── Modal "Vista previa" cuerpo más amplio ─────────── */
.modal-body .ct-table { margin-top: 8px; }
/* ─────────── Personas · filtros server-side ─────────── */
.ppl-server-filters {
display: flex; flex-wrap: wrap; gap: 16px;
margin-bottom: 12px;
padding: 8px 12px;
background: #fafbfd;
border: 1px solid var(--border, #e2e6ec);
border-radius: 8px;
}
/* ─────────── Búsqueda global · command palette (S 27h) ─────────── */
.sg-wrap { display: flex; flex-direction: column; max-height: 70vh; }
.sg-input-wrap {
display: flex; align-items: center; gap: 10px;
padding: 14px 16px;
border-bottom: 1px solid var(--border, #e2e6ec);
background: #fff;
border-radius: 14px 14px 0 0;
}
.sg-input-ico { font-size: 18px; opacity: 0.7; }
.sg-input {
flex: 1; border: 0; outline: 0; font-size: 16px; font-family: inherit;
background: transparent; color: var(--text, #0f172a);
}
.sg-input::placeholder { color: #94a3b8; }
.sg-hint {
font-size: 10px; color: #94a3b8; background: #f1f5f9;
padding: 2px 8px; border-radius: 4px; font-weight: 600;
letter-spacing: 0.5px; text-transform: uppercase;
}
.sg-results { flex: 1; overflow-y: auto; padding: 8px 0; max-height: 60vh; }
.sg-empty {
padding: 40px 20px; text-align: center; color: #64748b;
}
.sg-empty-ico { font-size: 38px; opacity: 0.5; margin-bottom: 10px; }
.sg-empty-title { font-weight: 600; color: #475569; font-size: 14px; }
.sg-empty-sub { font-size: 12px; color: #94a3b8; margin-top: 4px; }
.sg-tips { display: flex; gap: 14px; justify-content: center; margin-top: 16px; }
.sg-tip { font-size: 11px; color: #94a3b8; }
.sg-tip kbd, .sg-empty kbd {
background: #f1f5f9; padding: 1px 6px; border-radius: 3px;
border: 1px solid #cbd5e1; font-size: 10px;
font-family: monospace; box-shadow: 0 1px 0 #cbd5e1;
}
.sg-loading { padding: 30px; text-align: center; color: #64748b; font-size: 13px; }
.sg-spin {
width: 24px; height: 24px; border-radius: 50%; margin: 0 auto 8px;
border: 3px solid #e2e8f0; border-top-color: var(--primary, #1668e3);
animation: sg-spin 0.8s linear infinite;
}
@keyframes sg-spin { to { transform: rotate(360deg); } }
.sg-cat { padding: 0 8px; }
.sg-cat-head {
font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px;
color: #94a3b8; font-weight: 700; padding: 12px 12px 6px;
}
.sg-cat-count {
display: inline-block; background: #e2e8f0; color: #475569;
padding: 0 6px; border-radius: 10px; font-size: 10px;
font-weight: 700; margin-left: 4px;
}
.sg-item {
display: flex; align-items: center; gap: 12px;
padding: 10px 12px; margin: 0 4px; border-radius: 8px;
cursor: pointer; transition: background 100ms;
}
.sg-item.sg-active { background: var(--primary-light, #e8f0fc); }
.sg-item-ico {
width: 32px; height: 32px; border-radius: 8px;
background: #f1f5f9; display: flex; align-items: center; justify-content: center;
font-size: 16px; flex-shrink: 0;
}
.sg-item.sg-active .sg-item-ico { background: #fff; }
.sg-item-body { flex: 1; min-width: 0; }
.sg-item-title {
font-size: 13px; font-weight: 600; color: #0f172a;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sg-item-sub {
font-size: 11px; color: #64748b; margin-top: 1px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sg-item-meta {
font-size: 10px; color: #94a3b8; text-transform: lowercase;
flex-shrink: 0; max-width: 200px; text-align: right;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sg-item mark {
background: rgba(245, 158, 11, 0.25); color: inherit;
padding: 0; border-radius: 2px; font-weight: 600;
}
.sg-foot {
display: flex; justify-content: space-between; align-items: center;
padding: 8px 14px; border-top: 1px solid var(--border, #e2e6ec);
background: #fafbfd;
border-radius: 0 0 14px 14px;
font-size: 11px; color: #94a3b8;
}
.sg-foot-info { font-style: italic; }
/* ───────────────────────── Comments component (S 27j · #54) ────────── */
.cmts-wrap { display: flex; flex-direction: column; gap: 10px; }
.cmts-list { display: flex; flex-direction: column; gap: 10px; max-height: 380px; overflow-y: auto; padding-right: 4px; }
.cmt { display: flex; gap: 10px; padding: 8px; border-radius: 8px; background: #fafbfd; }
.cmt .av {
width: 32px; height: 32px; border-radius: 50%;
color: #fff; font-weight: 700; font-size: 12px;
display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cmt-body { flex: 1; min-width: 0; }
.cmt-head { font-size: 12px; line-height: 1.4; }
.cmt-head .cmt-acts { float: right; }
.cmt-head .lnk {
background: none; border: 0; cursor: pointer; padding: 0 4px;
color: var(--text-2); font-size: 13px;
}
.cmt-head .lnk:hover { color: var(--primary); }
.cmt-txt { margin-top: 4px; font-size: 14px; line-height: 1.45; word-wrap: break-word; }
.cmt-txt .mention {
background: rgba(34, 102, 204, 0.10);
color: #1e60c0;
padding: 1px 6px;
border-radius: 4px;
font-weight: 600;
}
.cmts-editor { position: relative; border: 1px solid var(--border); border-radius: 8px; padding: 8px; background: #fff; }
.cmts-input { width: 100%; border: 0; outline: 0; resize: vertical; font: inherit; line-height: 1.4; }
.cmts-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.cmts-hint { font-size: 11px; }
.cmts-mention-pop {
position: absolute; left: 8px; bottom: calc(100% + 4px);
background: #fff; border: 1px solid var(--border); border-radius: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,.10);
min-width: 220px; max-height: 260px; overflow-y: auto;
z-index: 100;
}
.cmt-men-item {
display: flex; gap: 8px; align-items: center;
padding: 6px 10px; cursor: pointer; font-size: 13px;
}
.cmt-men-item.sel,
.cmt-men-item:hover { background: #f0f5ff; }
.cmt-men-item .av {
width: 24px; height: 24px; border-radius: 50%;
color: #fff; font-weight: 700; font-size: 10px;
display: inline-flex; align-items: center; justify-content: center;
}
/* Badge global de menciones (topbar) */
.mention-badge {
display: inline-block; min-width: 18px; height: 18px;
padding: 0 5px; border-radius: 999px; line-height: 18px;
background: #d62929; color: #fff; font-weight: 700;
font-size: 11px; text-align: center; margin-left: 4px;
}
.mention-badge[hidden] { display: none; }
/* ───────────────────────── Versiones · timeline + diff (S 27k · #57) */
.ver-wrap { display: grid; grid-template-columns: 280px 1fr; gap: 16px; min-height: 380px; }
.ver-timeline { border-right: 1px solid var(--border); padding-right: 12px; }
.ver-timeline-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.ver-timeline-list { max-height: 520px; overflow-y: auto; padding-right: 4px; position: relative; }
.ver-timeline-list::before {
content: ''; position: absolute; left: 14px; top: 8px; bottom: 8px;
width: 2px; background: linear-gradient(180deg, #cbd5e1 0%, #e2e8f0 100%);
}
.ver-row { display: flex; gap: 10px; padding: 8px 6px; border-radius: 8px; cursor: pointer; position: relative; }
.ver-row:hover { background: #f1f5f9; }
.ver-row.sel { background: #e0e7ff; }
.ver-dot {
width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
background: #fff; border: 2px solid #cbd5e1;
display: inline-flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 11px; color: var(--text-2);
z-index: 1; position: relative;
}
.ver-dot.now { background: #1d4ed8; color: #fff; border-color: #1d4ed8; }
.ver-dot.restore { background: #f59e0b; color: #fff; border-color: #f59e0b; font-size: 14px; }
.ver-info { flex: 1; min-width: 0; font-size: 12px; line-height: 1.4; }
.ver-line-1 { display: flex; gap: 6px; align-items: center; }
.ver-num { font-weight: 700; font-size: 13px; }
.ver-tag { padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
.ver-tag.now { background: #dbeafe; color: #1d4ed8; }
.ver-tag.restore { background: #fef3c7; color: #92400e; }
.ver-line-4 { font-size: 11px; margin-top: 2px; }
.ver-pill-user {
display: inline-flex; width: 18px; height: 18px; border-radius: 50%;
color: #fff; font-weight: 700; font-size: 9px; align-items: center; justify-content: center; vertical-align: middle;
}
.ver-detalle { padding: 0 4px; max-height: 520px; overflow-y: auto; }
.ver-det-head { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--border); gap: 12px; }
.ver-diff h4 { margin: 0 0 12px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-2); }
.ver-diff-row { background: #f8fafc; border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.ver-diff-campo { font-weight: 600; font-size: 12px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 8px; }
.ver-diff-pair { display: grid; grid-template-columns: 1fr 22px 1fr; gap: 8px; align-items: center; }
.ver-diff-antes, .ver-diff-despues {
border-radius: 8px; padding: 8px 10px; min-height: 40px;
font-size: 13px; line-height: 1.45; word-wrap: break-word;
}
.ver-diff-antes { background: #fee2e2; border-left: 3px solid #ef4444; }
.ver-diff-despues{ background: #d1fae5; border-left: 3px solid #10b981; }
.ver-diff-antes .lbl, .ver-diff-despues .lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; opacity: 0.7; margin-bottom: 3px; }
.ver-diff-flecha { text-align: center; font-size: 18px; color: var(--text-2); }
@media (max-width: 768px) {
.ver-wrap { grid-template-columns: 1fr; }
.ver-timeline { border-right: 0; border-bottom: 1px solid var(--border); padding-right: 0; padding-bottom: 12px; }
.ver-diff-pair { grid-template-columns: 1fr; }
.ver-diff-flecha { display: none; }
}
/* ───────────────────────── Tuits IA · WOW H (#78) ────────────────────── */
.tuits-wrap { display: flex; flex-direction: column; gap: 10px; }
.tuits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.tuit-card { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.tuit-head { display: flex; gap: 6px; align-items: center; }
.tuit-variante, .tuit-estado { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.3px; display: inline-flex; gap: 4px; align-items: center; }
.tuit-body { font-size: 14px; line-height: 1.4; padding: 8px; background: #fafbfd; border-radius: 6px; min-height: 60px; outline: none; border: 1px solid transparent; }
.tuit-body[contenteditable="true"]:focus { border-color: var(--primary); background: #fff; }
.tuit-tags { font-size: 12px; color: var(--primary); font-weight: 600; }
.tuit-foot { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tuit-chars { font-size: 10px; color: var(--text-2); font-weight: 600; }
.tuit-chars.tuit-warn { color: var(--danger); }
/* ── PWA install banner (S 27z+) ─────────────────────────────── */
#pwa-install-banner {
position: fixed;
z-index: 9999;
left: 16px; right: 16px; bottom: 16px;
max-width: 480px; margin: 0 auto;
display: flex; align-items: center; gap: 12px;
padding: 12px 14px;
background: #fff;
border: 1px solid var(--border);
border-radius: 14px;
box-shadow: 0 8px 28px rgba(15, 23, 42, 0.18);
animation: pwa-ib-slide-in .35s cubic-bezier(.18,.89,.32,1.28);
}
@keyframes pwa-ib-slide-in {
from { transform: translateY(120%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.pwa-ib-icon { font-size: 24px; line-height: 1; flex-shrink: 0; }
.pwa-ib-text { flex: 1; min-width: 0; }
.pwa-ib-title { font-weight: 700; font-size: 13px; line-height: 1.3; color: var(--text); }
.pwa-ib-sub { font-size: 11px; color: var(--text-soft, #555); margin-top: 2px; line-height: 1.35; }
.pwa-ib-cta {
background: var(--primary, #1668e3); color: #fff;
border: 0; border-radius: 8px;
padding: 8px 14px; font-size: 13px; font-weight: 600;
cursor: pointer; flex-shrink: 0;
}
.pwa-ib-cta:hover { filter: brightness(1.08); }
.pwa-ib-x {
background: transparent; border: 0;
font-size: 20px; line-height: 1; padding: 4px 8px;
color: var(--text-soft, #777); cursor: pointer; flex-shrink: 0;
}
.pwa-ib-x:hover { color: var(--text); }
@media (max-width: 380px) {
#pwa-install-banner { left: 8px; right: 8px; bottom: 8px; padding: 10px; }
.pwa-ib-sub { display: none; }
}