/* =====================================================================
   Refinamiento visual (modernización estética). Se carga DESPUÉS de tema.css.
   Solo cambia lo visual: colores, bordes, sombras, radios, transiciones y estados de foco.
   No toca ids, clases usadas por JS, ni las dimensiones del dashboard principal (zero-scroll).
   Para revertir todo el rediseño basta con quitar el <link> de este archivo.
   ===================================================================== */

/* ---------- 1. Tokens: color, elevación y campos ---------- */
:root {
  /* Semánticos: esmeralda / rubí / ámbar corporativos (sin saturación estridente) */
  --emerald: #0b7a5a; --emerald-h: #096a4e;
  --ruby: #b3263f;    --ruby-h: #99203a;
  --amber: #b45f0a;   --amber-h: #9a5008;
  --ok: #0b7a5a;  --ok-bg: #dcf3e9;  --ok-tx: #075c43;
  --warn: #b45f0a; --warn-bg: #fbeed6; --warn-tx: #8a4a07;
  --err: #b3263f;  --err-bg: #fbe4e8;  --err-tx: #912036;
  --off-bg: rgba(100, 116, 139, .12);  --off-tx: #475569;
  --indigo-bg: rgba(79, 70, 229, .10); --indigo-tx: #3f3a9e;

  /* Elevación: sombras suaves y multicapa */
  --sh-1: 0 1px 2px rgba(15, 23, 42, .05), 0 2px 6px -2px rgba(15, 23, 42, .07);
  --sh-2: 0 1px 2px rgba(15, 23, 42, .05), 0 6px 14px -6px rgba(15, 23, 42, .12), 0 16px 30px -18px rgba(15, 23, 42, .12);
  --sh-3: 0 2px 4px rgba(15, 23, 42, .06), 0 14px 26px -10px rgba(15, 23, 42, .18), 0 36px 64px -28px rgba(15, 23, 42, .34);
  --sombra-soft: var(--sh-2);
  --sombra-hover: 0 2px 4px rgba(15, 23, 42, .06), 0 14px 26px -12px rgba(15, 23, 42, .2), 0 28px 48px -26px rgba(15, 23, 42, .22);
  --borde-suave: rgba(15, 23, 42, .06);

  /* Campos de formulario */
  --f-bg: #fff; --f-bd: #d5dce8; --f-bd-h: #b4c0d3; --f-off: #f3f5f9;
  --f-ring: color-mix(in srgb, var(--navy-2) 22%, transparent);
  --row-hover: color-mix(in srgb, var(--navy) 5%, transparent);
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --r-btn: 8px; --r-campo: 10px;
}

:root[data-tema="oscuro"] {
  /* Slate profundo y neutro; bordes de 1px casi transparentes */
  --bg-color: #0b1017; --card: #131a25; --texto: #e3e8f0; --suave: #93a0b5; --text-strong: #f3f6fa;
  --borde: rgba(255, 255, 255, .09); --borde-suave: rgba(255, 255, 255, .06);
  --cristal: rgba(19, 26, 37, .78); --glass: rgba(13, 19, 29, .8);
  --w: 19, 26, 37;
  --sf-ffffff: #161d2a; --bd-ffffff: #232c3b;
  --ok: #5fd3a4;  --ok-bg: rgba(52, 211, 153, .13);  --ok-tx: #7be0b6;
  --warn: #f0b865; --warn-bg: rgba(245, 180, 70, .13); --warn-tx: #f3c581;
  --err: #f58a9d;  --err-bg: rgba(251, 113, 133, .13);  --err-tx: #f8a3b1;
  --off-bg: rgba(148, 163, 184, .14); --off-tx: #b0bacb;
  --indigo-bg: rgba(129, 140, 248, .16); --indigo-tx: #b4bcfb;
  --sh-1: 0 1px 2px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .04);
  --sh-2: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 18px -8px rgba(0, 0, 0, .5), 0 20px 36px -22px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .04);
  --sh-3: 0 2px 4px rgba(0, 0, 0, .4), 0 18px 32px -12px rgba(0, 0, 0, .6), 0 44px 80px -30px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .05);
  --sombra-hover: 0 2px 4px rgba(0, 0, 0, .4), 0 16px 30px -12px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .05);
  --f-bg: rgba(255, 255, 255, .035); --f-bd: rgba(255, 255, 255, .13); --f-bd-h: rgba(255, 255, 255, .24); --f-off: rgba(255, 255, 255, .02);
  --f-ring: color-mix(in srgb, var(--navy-3) 32%, transparent);
  --row-hover: rgba(255, 255, 255, .04);
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* Fondo: degradado pizarra con un halo tenue del color de acento (en vez de un plano) */
body { background: radial-gradient(900px 420px at 86% -90px, color-mix(in srgb, var(--primary-color) 7%, transparent), transparent 70%), linear-gradient(180deg, var(--sf-eceff4) 0, var(--sf-f3f5f9) 340px) no-repeat, var(--sf-f3f5f9); }
:root[data-tema="oscuro"] body { background: radial-gradient(1000px 460px at 86% -120px, color-mix(in srgb, var(--primary-color) 20%, transparent), transparent 70%), var(--bg-color); }

/* Accesibilidad base: foco visible, tacto, movimiento reducido */
:where(a, button, [role="tab"], summary, [tabindex]):focus-visible { outline: 2px solid color-mix(in srgb, var(--navy-3) 85%, transparent); outline-offset: 2px; }
button, .btn, a, label, select { touch-action: manipulation; }
h1, h2, h3 { text-wrap: balance; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--navy-2); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }

:root[data-tema="oscuro"] .bz-logo { color: var(--text-strong); }

/* ---------- 2. Superficies: tarjetas, modales y paneles flotantes ---------- */
.w, .vista-card, .stat { border-color: var(--borde-suave); }
:root[data-tema="oscuro"] .w, :root[data-tema="oscuro"] .vista-card, :root[data-tema="oscuro"] .stat, :root[data-tema="oscuro"] .t-card-mini, :root[data-tema="oscuro"] .adm-stat, :root[data-tema="oscuro"] .adm-card, :root[data-tema="oscuro"] .inf-card { border-color: var(--borde); }
:root[data-tema="oscuro"] .hero { box-shadow: var(--sh-2); }

.modal-fondo { background: rgba(15, 23, 42, .42); -webkit-backdrop-filter: blur(8px) saturate(1.1); backdrop-filter: blur(8px) saturate(1.1); animation: rf-fade var(--t-med) ease-out; }
:root[data-tema="oscuro"] .modal-fondo { background: rgba(3, 7, 14, .6); }
.modal { border: 1px solid var(--borde-suave); box-shadow: var(--sh-3); overscroll-behavior: contain; scrollbar-width: thin; }
:root[data-tema="oscuro"] .modal { border-color: var(--borde); }
.modal h3 { letter-spacing: -.015em; }
.modal fieldset { border-color: var(--borde); background: color-mix(in srgb, var(--navy) 2.5%, transparent); }
.modal legend { text-transform: none; letter-spacing: 0; font-size: .82rem; font-weight: 700; color: var(--navy-2-tx); }
@keyframes rf-fade { from { opacity: 0; } to { opacity: 1; } }

.usuario-dropdown, .notif-panel, .gear-menu, .fe-menu { border-color: var(--borde-suave); box-shadow: var(--sh-3); -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15); overscroll-behavior: contain; }
:root[data-tema="oscuro"] .usuario-dropdown, :root[data-tema="oscuro"] .notif-panel, :root[data-tema="oscuro"] .gear-menu, :root[data-tema="oscuro"] .fe-menu { background: color-mix(in srgb, var(--card) 94%, transparent); border-color: var(--borde); }
.sa-fondo { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.sa-modal { box-shadow: var(--sh-3); }
.sa-stat, .sa-emp { box-shadow: var(--sh-2); }

/* ---------- 3. Formularios: campos, selectores y zonas de carga ---------- */
.campo label { font-weight: 600; font-size: .84rem; color: var(--tx-334155); letter-spacing: .005em; }
.campo input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]),
.campo select, .campo textarea, .herramientas input, .herramientas select, .t-filtros input, .t-filtros select, .doc-nueva input, .doc-personas input,
.ms-selector > input, .inf-campos input, .inf-campos select, .aus-decidir textarea, .aj-item select {
  background-color: var(--f-bg); color: var(--texto); border: 1.5px solid var(--f-bd); border-radius: var(--r-campo);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast);
}
.campo input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]), .campo select, .campo textarea { padding: 11px 14px; line-height: 1.4; }
.campo input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]):hover, .campo select:hover, .campo textarea:hover,
.herramientas input:hover, .herramientas select:hover, .t-filtros input:hover, .t-filtros select:hover, .aus-decidir textarea:hover { border-color: var(--f-bd-h); }
.campo input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]):focus, .campo select:focus, .campo textarea:focus,
.herramientas input:focus, .herramientas select:focus, .t-filtros input:focus, .t-filtros select:focus, .doc-nueva input:focus, .doc-personas input:focus,
.ms-selector > input:focus, .inf-campos input:focus, .inf-campos select:focus, .aus-decidir textarea:focus, .aj-item select:focus {
  outline: none; border-color: var(--navy-2); box-shadow: 0 0 0 4px var(--f-ring); background-color: var(--f-bg);
}
:root[data-tema="oscuro"] .campo input:focus, :root[data-tema="oscuro"] .campo select:focus, :root[data-tema="oscuro"] .campo textarea:focus { border-color: var(--navy-3); }
.campo input:disabled, .campo select:disabled, .campo textarea:disabled, .campo input[readonly] { background-color: var(--f-off); color: var(--suave); cursor: not-allowed; }
.campo input:user-invalid, .campo select:user-invalid, .campo textarea:user-invalid { border-color: var(--ruby); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ruby) 16%, transparent); }
.campo textarea { resize: vertical; min-height: 84px; }
::placeholder { color: color-mix(in srgb, var(--suave) 75%, transparent); opacity: 1; }

/* Selectores nativos con la misma identidad (flecha propia, sin el aspecto del sistema) */
.campo select, .herramientas select, .t-filtros select, .inf-campos select, .aj-item select {
  -webkit-appearance: none; appearance: none; cursor: pointer; text-overflow: ellipsis;
  background-image: var(--chev); background-repeat: no-repeat; background-position: right 12px center; background-size: 14px; padding-right: 36px;
}
.herramientas select.filtro-area { background-color: var(--f-bg); border: 1.5px solid var(--f-bd); border-radius: var(--r-campo); padding-right: 36px; }
.herramientas select.filtro-area:hover { border-color: var(--f-bd-h); }
.herramientas select.filtro-area:focus { border-color: var(--navy-2); box-shadow: 0 0 0 4px var(--f-ring); }
.campo select[multiple], .campo select[size] { background-image: none; padding-right: 14px; }
/* tema.css fija su propio fondo a los campos en modo oscuro con más especificidad: se iguala aquí para conservar la flecha y el tono */
:root[data-tema="oscuro"] .campo select, :root[data-tema="oscuro"] .herramientas select, :root[data-tema="oscuro"] .t-filtros select,
:root[data-tema="oscuro"] .inf-campos select, :root[data-tema="oscuro"] .aj-item select {
  background-color: var(--f-bg); background-image: var(--chev); background-repeat: no-repeat; background-position: right 12px center; background-size: 14px;
}
:root[data-tema="oscuro"] .campo select[multiple], :root[data-tema="oscuro"] .campo select[size] { background-image: none; }
:root[data-tema="oscuro"] .campo textarea, :root[data-tema="oscuro"] .aus-decidir textarea, :root[data-tema="oscuro"] .herramientas input, :root[data-tema="oscuro"] .t-filtros input,
:root[data-tema="oscuro"] .doc-nueva input, :root[data-tema="oscuro"] .doc-personas input, :root[data-tema="oscuro"] .ms-selector > input, :root[data-tema="oscuro"] .inf-campos input { background-color: var(--f-bg); }
:root[data-tema="oscuro"] .campo input:disabled, :root[data-tema="oscuro"] .campo select:disabled, :root[data-tema="oscuro"] .campo textarea:disabled, :root[data-tema="oscuro"] .campo input[readonly] { background-color: var(--f-off); }
select option { background: var(--sf-ffffff); color: var(--texto); }

/* Carga de archivos: contenedor limpio con botón integrado y estado de hover */
input[type="file"] { max-width: 100%; cursor: pointer; }
.campo input[type="file"] {
  padding: 10px 12px; font-size: .86rem; color: var(--suave); border: 1.5px dashed color-mix(in srgb, var(--navy-2) 32%, var(--f-bd)); border-radius: 12px;
  background-color: color-mix(in srgb, var(--navy) 3%, var(--f-bg)); transition: border-color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast);
}
.campo input[type="file"]:hover { border-color: var(--navy-2); background-color: var(--navy-claro); box-shadow: 0 0 0 4px color-mix(in srgb, var(--navy-2) 8%, transparent); }
.campo input[type="file"]:focus-visible { outline: none; border-color: var(--navy-2); box-shadow: 0 0 0 4px var(--f-ring); }
input[type="file"]::file-selector-button {
  margin-right: 12px; padding: 7px 14px; border: 1px solid color-mix(in srgb, var(--navy-2) 28%, transparent); border-radius: var(--r-btn); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
  background: var(--navy-claro); color: var(--navy-tx); transition: background-color var(--t-fast), border-color var(--t-fast);
}
input[type="file"]:hover::file-selector-button { background: var(--navy-soft); border-color: color-mix(in srgb, var(--navy-2) 45%, transparent); }

.dropzone, .adj-zona, .doc-drop {
  border: 1.5px dashed color-mix(in srgb, var(--navy-2) 32%, var(--borde)); border-radius: 14px; background: color-mix(in srgb, var(--navy) 3%, var(--sf-ffffff));
  transition: border-color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.dropzone:hover, .dropzone:focus-visible, .dropzone.arrastrando, .adj-zona:hover, .adj-zona:focus-visible, .adj-zona.arrastrando, .doc-drop.sobre {
  border-color: var(--navy-2); background: var(--navy-claro); box-shadow: 0 0 0 4px color-mix(in srgb, var(--navy-2) 9%, transparent);
}
.dropzone:focus-visible, .adj-zona:focus-visible { box-shadow: 0 0 0 4px var(--f-ring); }
.archivo-elegido { border-radius: 12px; border-color: var(--borde); background: var(--navy-claro); }

/* ---------- 4. Botones y badges ---------- */
.btn {
  border-radius: var(--r-btn); background: var(--navy); background-image: linear-gradient(180deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, 0));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(15, 23, 42, .22), 0 5px 12px -6px color-mix(in srgb, var(--navy) 60%, transparent);
  letter-spacing: .005em; transition: transform var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast), filter var(--t-fast), border-color var(--t-fast), opacity var(--t-fast);
}
.btn:hover:not(:disabled) { background: var(--navy); background-image: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .02)); filter: none; transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(15, 23, 42, .22), 0 8px 16px -6px color-mix(in srgb, var(--navy) 65%, transparent); }
.btn:active:not(:disabled) { transform: translateY(1px) scale(.985); filter: brightness(.95); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .22); }
.btn:focus-visible { outline: 2px solid color-mix(in srgb, var(--navy-3) 85%, transparent); outline-offset: 2px; }
.btn:disabled { background-image: none; transform: none; box-shadow: none; }
.btn-sm { border-radius: 7px; }

.btn-sec { background: var(--sf-ffffff); background-image: none; color: var(--tx-334155); border: 1px solid var(--f-bd); box-shadow: var(--sh-1); }
.btn-sec:hover:not(:disabled) { background: var(--navy-claro); background-image: none; border-color: color-mix(in srgb, var(--navy-2) 35%, var(--f-bd)); color: var(--navy-tx); transform: translateY(-1px); box-shadow: var(--sh-2); }
.btn-sec:active:not(:disabled) { box-shadow: inset 0 1px 3px rgba(15, 23, 42, .12); }
.btn-danger { background: var(--ruby); background-image: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(15, 23, 42, .22), 0 5px 12px -6px rgba(179, 38, 63, .6); }
.btn-danger:hover:not(:disabled) { background: var(--ruby-h); background-image: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0)); }

/* Aceptar / Rechazar / Aplazar: sólidos en el modal de decisión, tintados antes de confirmar */
.btn.aus-dec-ok:not(.btn-sec) { background-color: var(--emerald); }
.btn.aus-dec-err:not(.btn-sec) { background-color: var(--ruby); }
.btn.aus-dec-warn:not(.btn-sec) { background-color: var(--amber); }
.btn.aus-dec-ok:not(.btn-sec):hover:not(:disabled) { background-color: var(--emerald-h); }
.btn.aus-dec-err:not(.btn-sec):hover:not(:disabled) { background-color: var(--ruby-h); }
.btn.aus-dec-warn:not(.btn-sec):hover:not(:disabled) { background-color: var(--amber-h); }
.aus-dec.aus-dec-ok { color: var(--ok-tx); border-color: color-mix(in srgb, var(--emerald) 35%, transparent); background: color-mix(in srgb, var(--emerald) 8%, var(--sf-ffffff)); }
.aus-dec.aus-dec-err { color: var(--err-tx); border-color: color-mix(in srgb, var(--ruby) 35%, transparent); background: color-mix(in srgb, var(--ruby) 7%, var(--sf-ffffff)); }
.aus-dec.aus-dec-warn { color: var(--warn-tx); border-color: color-mix(in srgb, var(--amber) 38%, transparent); background: color-mix(in srgb, var(--amber) 8%, var(--sf-ffffff)); }
.aus-dec.aus-dec-ok:hover:not(:disabled) { background: color-mix(in srgb, var(--emerald) 16%, var(--sf-ffffff)); border-color: color-mix(in srgb, var(--emerald) 55%, transparent); color: var(--ok-tx); }
.aus-dec.aus-dec-err:hover:not(:disabled) { background: color-mix(in srgb, var(--ruby) 14%, var(--sf-ffffff)); border-color: color-mix(in srgb, var(--ruby) 55%, transparent); color: var(--err-tx); }
.aus-dec.aus-dec-warn:hover:not(:disabled) { background: color-mix(in srgb, var(--amber) 16%, var(--sf-ffffff)); border-color: color-mix(in srgb, var(--amber) 55%, transparent); color: var(--warn-tx); }
.dc-botones .btn { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(15, 23, 42, .2); }

.btn-pdf { border-radius: var(--r-btn); background: var(--navy); box-shadow: var(--sh-1); transition: background-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast); }
.btn-pdf:hover { box-shadow: var(--sh-2); }
.btn-pdf.sec { background: var(--sf-ffffff); border: 1px solid var(--f-bd); }
.btn-pdf.sec:hover { border-color: color-mix(in srgb, var(--navy-2) 40%, var(--f-bd)); }
.btn-pdf.firmar { background: var(--amber); }
.btn-descargar, .inf-excel { border-radius: 10px; background: linear-gradient(180deg, #12906a, var(--emerald)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(15, 23, 42, .2), 0 8px 16px -8px rgba(11, 122, 90, .6); }
.btn-descargar:hover:not(:disabled) { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(15, 23, 42, .2), 0 12px 20px -8px rgba(11, 122, 90, .65); }
.btn-ico { transition: background-color var(--t-fast); }
.btn-ico:hover { background: var(--row-hover); }
.gear-btn { border-radius: 9px; box-shadow: var(--sh-1); }
.chip-btn { transition: border-color var(--t-fast), background-color var(--t-fast), color var(--t-fast); }
.chip-btn:hover { border-color: color-mix(in srgb, var(--navy-2) 45%, var(--borde)); background: var(--row-hover); }
.chip-btn.activo { border-color: var(--navy-2); }

/* Badges: píldora, tono suave y texto en contraste nítido */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border: 1px solid transparent; border-radius: 99px; font-size: .74rem; font-weight: 600; line-height: 1.45; letter-spacing: .005em; }
.badge.ok { background: var(--ok-bg); color: var(--ok-tx); border-color: color-mix(in srgb, var(--emerald) 22%, transparent); }
.badge.warn { background: var(--warn-bg); color: var(--warn-tx); border-color: color-mix(in srgb, var(--amber) 26%, transparent); }
.badge.err { background: var(--err-bg); color: var(--err-tx); border-color: color-mix(in srgb, var(--ruby) 24%, transparent); }
.badge.info { background: var(--navy-claro); color: var(--navy-2-tx); border-color: color-mix(in srgb, var(--navy-2) 18%, transparent); }
.badge.off { background: var(--off-bg); color: var(--off-tx); border-color: color-mix(in srgb, var(--off-tx) 16%, transparent); }
.badge.morado { background: var(--indigo-bg); color: var(--indigo-tx); border-color: color-mix(in srgb, var(--indigo-tx) 20%, transparent); }
.badge.ok::before, .badge.warn::before, .badge.err::before, .badge.off::before { content: ''; width: 6px; height: 6px; flex: none; border-radius: 50%; background: currentColor; }
.badge.area { border-radius: 99px; }
.badge-firma { border-width: 1px; }
.badge-firma.ok { background: var(--ok-bg); color: var(--ok-tx); border-color: color-mix(in srgb, var(--emerald) 24%, transparent); }
.badge-firma.pend { background: var(--warn-bg); color: var(--warn-tx); border-color: color-mix(in srgb, var(--amber) 28%, transparent); }
.badge-firma.can { background: var(--off-bg); color: var(--off-tx); border-color: color-mix(in srgb, var(--off-tx) 18%, transparent); }
.sa-badge.activa { background: var(--ok-bg); color: var(--ok-tx); } .sa-badge.suspendida { background: var(--err-bg); color: var(--err-tx); }
.alerta { border-radius: 10px; border-left-width: 3px; }
.alerta.error { background: var(--err-bg); color: var(--err-tx); border-color: var(--ruby); }
.alerta.ok { background: var(--ok-bg); color: var(--ok-tx); border-color: var(--emerald); }

/* ---------- 5. Pestañas, tarjetas de estadísticas (Centro de mando) y bandejas ---------- */
.tabs, .adm-tabs { background: color-mix(in srgb, var(--navy) 4%, var(--sf-ffffff)); border: 1px solid var(--borde-suave); box-shadow: inset 0 1px 2px rgba(15, 23, 42, .04); }
:root[data-tema="oscuro"] .tabs, :root[data-tema="oscuro"] .adm-tabs { background: rgba(255, 255, 255, .03); border-color: var(--borde); box-shadow: none; }
.tab, .adm-tab { transition: background-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast); }
.tab:hover:not(.activo), .adm-tab:hover:not(.activo) { background: var(--row-hover); }
.tab.activo, .adm-tab.activo { background: var(--navy); box-shadow: 0 1px 2px rgba(15, 23, 42, .25), 0 6px 14px -6px color-mix(in srgb, var(--navy) 60%, transparent); }
.adm-tit { letter-spacing: -.02em; }

.adm-stat { position: relative; padding: 14px 18px 15px; border-color: var(--borde-suave); box-shadow: var(--sh-2); gap: 0; transition: box-shadow var(--t-med), border-color var(--t-med); }
.adm-stat[tabindex="0"]:hover, button.adm-stat:hover { box-shadow: var(--sombra-hover); border-color: color-mix(in srgb, var(--navy-2) 25%, var(--borde)); }
.adm-stat span { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 8px; border-radius: 11px; font-size: 1.05rem; line-height: 1;
  background: var(--navy-claro); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--navy-2) 14%, transparent); }
.adm-stat b { font-size: 1.85rem; font-weight: 700; letter-spacing: -.035em; line-height: 1.05; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.adm-stat small { margin-top: 3px; font-size: .78rem; font-weight: 500; color: var(--suave); letter-spacing: .005em; }
.adm-card { border-color: var(--borde-suave); transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med); }
.adm-card:hover { border-color: color-mix(in srgb, var(--navy-2) 28%, var(--borde)); }
.adm-ico { border-radius: 14px; background: var(--navy-claro); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--navy-2) 14%, transparent); }
.t-card-mini b, .kpi b { font-variant-numeric: tabular-nums; }
.inf-card { border-color: var(--borde-suave); }
.inf-card:hover { border-color: color-mix(in srgb, var(--navy-2) 25%, var(--borde)); }
.inf-ico { border-radius: 14px; }

/* Bandejas (Por aprobar, Mis solicitudes): filas con borde, relieve y respuesta al pasar el cursor */
.aus-item { margin-bottom: 8px; padding: 14px 16px; border: 1px solid var(--borde-suave); border-radius: 14px; background: var(--sf-ffffff); transition: background-color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast); }
.aus-item:last-child { margin-bottom: 0; padding: 14px 16px; border-bottom: 1px solid var(--borde-suave); }
.aus-item:hover { border-color: color-mix(in srgb, var(--navy-2) 24%, var(--borde)); box-shadow: var(--sh-2); background: color-mix(in srgb, var(--navy) 2%, var(--sf-ffffff)); }
:root[data-tema="oscuro"] .aus-item { border-color: var(--borde); }
.aus-item.aus-eq.abierta, .aus-item.aus-eq.abierta:last-child { padding: 14px 16px; background: color-mix(in srgb, var(--amber) 6%, var(--sf-ffffff)); border-color: color-mix(in srgb, var(--amber) 32%, var(--borde)); box-shadow: inset 3px 0 0 var(--amber); }
.aus-ico { border-radius: 13px; background: var(--navy-claro); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--navy-2) 14%, transparent); }
.aus-fechas { font-weight: 500; }
.aus-resumen { border: 1px solid var(--borde-suave); border-radius: 12px; }
.aus-resumen.medio { border-color: color-mix(in srgb, var(--amber) 28%, transparent); background: var(--warn-bg); color: var(--warn-tx); }
.aus-resumen.listo { border-color: color-mix(in srgb, var(--emerald) 26%, transparent); background: var(--ok-bg); color: var(--ok-tx); }
.aus-ruta { border: 1px solid var(--borde-suave); border-radius: 10px; }
.aus-decidir { border-color: var(--borde); border-radius: 12px; box-shadow: var(--sh-1); }
.aus-soporte { gap: 8px; }
.dc-datos { border-color: var(--borde); border-radius: 12px; }
.dc-datos dt, .ficha-item dt { text-transform: none; letter-spacing: 0; font-size: .76rem; font-weight: 600; }
.dc-decidida { border: 1px solid var(--borde-suave); }

/* Tablas y listas (colaboradores, documentos, notificaciones) */
th { text-transform: none; letter-spacing: .01em; font-size: .76rem; font-weight: 600; border-bottom: 1px solid var(--borde); }
.tabla-mod th, .tabla-tiempo th { font-size: .76rem; }
.tabla-mod th { background: color-mix(in srgb, var(--navy) 3.5%, var(--sf-ffffff)); }
.tabla-mod th:last-child { background: color-mix(in srgb, var(--navy) 3.5%, var(--sf-ffffff)); }
:root[data-tema="oscuro"] th, :root[data-tema="oscuro"] .tabla-mod th:last-child { background: rgba(255, 255, 255, .035); }
td { border-bottom: 1px solid var(--borde-suave); }
:root[data-tema="oscuro"] td { border-bottom-color: var(--borde); }
tbody td, .tabla-mod td { transition: background-color var(--t-fast); }
tr:hover td, .tabla-mod tr:hover td:last-child { background: var(--row-hover); }
.doc-fila, .notif-item, .ms-item, .doc-persona { transition: background-color var(--t-fast), box-shadow var(--t-fast); }
.doc-fila:hover, .notif-item:hover, .ms-item:hover, .doc-persona:hover { background: var(--row-hover); }
.doc-persona.activo { background: var(--navy-claro); }
.imp-lista { border-radius: 12px; border-color: var(--borde); scrollbar-width: thin; }
.kpi { border: 1px solid var(--borde-suave); }
.kpi.ok { background: var(--ok-bg); color: var(--ok-tx); } .kpi.warn { background: var(--warn-bg); color: var(--warn-tx); }
.ficha-grid, #notif-lista, .ms-lista { scrollbar-width: thin; }

/* ---------- 6. Organigrama: nodos y conectores ---------- */
.org-marco { border-color: var(--borde-suave); border-radius: 18px; box-shadow: var(--sh-1);
  background: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--suave) 22%, transparent) 1px, transparent 1.5px) 0 0 / 22px 22px, color-mix(in srgb, var(--navy) 2%, var(--sf-fafbfd)); }
:root[data-tema="oscuro"] .org-marco { border-color: var(--borde); background: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .07) 1px, transparent 1.5px) 0 0 / 22px 22px, rgba(255, 255, 255, .015); }
.org-herramientas { border-color: var(--borde-suave); border-radius: 12px; box-shadow: var(--sh-2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.org-herramientas button { transition: background-color var(--t-fast); }
.org-ley { border: 1px solid color-mix(in srgb, currentColor 22%, transparent); }

.org-nodo { border: 1px solid var(--borde-suave); border-radius: 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--nc, #94a3b8) 6%, var(--sf-ffffff)), var(--sf-ffffff) 62%);
  box-shadow: inset 0 3px 0 var(--nc, #94a3b8), var(--sh-1), 0 10px 20px -14px rgba(15, 23, 42, .35);
  transition: transform var(--t-fast), box-shadow var(--t-fast), outline-color var(--t-fast), border-color var(--t-fast); }
:root[data-tema="oscuro"] .org-nodo { border-color: var(--borde); background: linear-gradient(180deg, color-mix(in srgb, var(--nc, #94a3b8) 10%, var(--sf-ffffff)), var(--sf-ffffff) 62%); box-shadow: inset 0 3px 0 var(--nc, #94a3b8), 0 1px 2px rgba(0, 0, 0, .4), 0 12px 22px -14px rgba(0, 0, 0, .7); }
.org-nodo:hover, .org-nodo:focus-visible { border-color: color-mix(in srgb, var(--nc, #94a3b8) 40%, var(--borde)); box-shadow: inset 0 3px 0 var(--nc, #94a3b8), 0 1px 2px rgba(15, 23, 42, .06), 0 16px 28px -14px rgba(15, 23, 42, .4); }
.org-nodo.org-destino { background: color-mix(in srgb, var(--nc, #3b82f6) 10%, var(--sf-ffffff)); }
.org-foto .avatar { box-shadow: 0 0 0 2px var(--sf-ffffff), 0 0 0 4px var(--nc, #94a3b8), 0 6px 12px -4px rgba(15, 23, 42, .3); }
.org-txt b { font-weight: 650; letter-spacing: -.005em; color: var(--text-strong); }
.org-area { padding: 2px 9px; border-radius: 99px; font-weight: 600; background: color-mix(in srgb, var(--navy) 6%, var(--sf-ffffff)); border-color: color-mix(in srgb, var(--navy-2) 16%, var(--borde)); color: var(--navy-2-tx); }
.org-nivel { padding: 2px 9px; font-weight: 650; border: 1px solid color-mix(in srgb, var(--nc, #94a3b8) 22%, transparent); }
.org-editar { border-radius: 8px; transition: opacity var(--t-fast), background-color var(--t-fast); }
.org-chip { border-radius: 99px; box-shadow: var(--sh-1); transition: background-color var(--t-fast), border-color var(--t-fast); }
.org-tag { border: 1px solid color-mix(in srgb, var(--navy-2) 18%, transparent); }
.org-tag.principal { border-color: transparent; }

/* Conectores: trazos más finos en tono pizarra, esquinas suaves; los vínculos matriciales (SVG) punteados y discretos */
.org-arbol { --lc: color-mix(in srgb, var(--navy-3) 38%, #b8c4d6); }
:root[data-tema="oscuro"] .org-arbol { --lc: rgba(255, 255, 255, .2); }
.org-arbol li:last-child::before { border-radius: 0 12px 0 0; }
.org-arbol li:first-child::after { border-radius: 12px 0 0 0; }
.org-lineas path { stroke: color-mix(in srgb, var(--navy-3) 70%, var(--suave)); stroke-width: 1.6; stroke-dasharray: 5 5; stroke-linecap: round; opacity: .7; }
.org-lineas circle { fill: color-mix(in srgb, var(--navy-3) 70%, var(--suave)); opacity: .85; }

/* ---------- 7. Ritmo tipográfico: títulos, subtítulos y textos descriptivos ---------- */
/* Regresión: .imp-sub traía margin-top negativo (-8px) pensado para el h3 de los modales (que tiene 18px de margen);
   en tarjetas .vista-card el h3 no tiene margen y el subtítulo se montaba sobre el título. Se elimina el margen negativo
   y cada título reserva su propio espacio inferior. */
.imp-sub { margin: 0 0 1rem; line-height: 1.5; }
.imp-sub[style*="margin-top"] { margin-top: 0 !important; } /* varios modales traen margin-top:-6px en línea: se neutraliza sin tocar el HTML */
.aus-ruta { margin: 0 0 .75rem; line-height: 1.45; }
.aus-resumen, .alerta, .fm-acepto, .doc-drop, td.vacio, .vacio { line-height: 1.45; }
.vista-card small, .modal small, .adj-zona small { line-height: 1.4; }
.vista-card > h3, .vista-card > form > h3, .modal h3, .aus-form h3, .aus-lista-card h3, .anuncios-admin h3, .org-cab h3, #aus-equipo h3, #form-ext h3 { display: block; line-height: 1.25; overflow-wrap: anywhere; }
.vista-card > h3, .aus-form h3, .aus-lista-card h3, .anuncios-admin h3 { margin-bottom: .5rem; }
:is(.vista-card, .modal, .aus-form) h3:has(+ .imp-sub), .org-cab h3, #aus-equipo h3, #form-ext h3 { margin-bottom: .5rem; }
.modal h3:not(:has(+ .imp-sub)) { margin-bottom: 1.1rem; }
.col-hero h2, .adm-tit { line-height: 1.25; }
.col-hero p { line-height: 1.5; }
.adm-card b { line-height: 1.3; }
.adm-stat small, .t-card-mini small, .aus-motivo, .aus-cuando, .vacio-w small, .vacio-w b, .cele-txt small, .doc-nota, .foto-ayuda, .perfil-ayuda, .horario-nota, .inf-nota, .sem-nota { line-height: 1.4; }
.aus-fechas, .aus-linea, .w-titulo, .anuncio-fila, .anuncio-fila small { line-height: 1.4; }
.vista-card p:not([class]), .modal p:not([class]), .cuenta-bloque p { line-height: 1.5; }
.campo label { display: block; line-height: 1.4; margin-bottom: .4rem; }
.campo label small { margin-left: .25rem; line-height: 1.4; }
.sem-leyenda, .org-tip, .dropzone span, .t-filtros label, .foto-ayuda, .pw-reglas li { line-height: 1.4; }
.campo small { display: inline-block; line-height: 1.4; }
.campo > small { display: block; margin-top: .35rem; }

/* ---------- 8. Login / panel SaaS: coherencia con el resto ---------- */
.login-saas .campo input:focus { box-shadow: 0 0 0 4px var(--f-ring); }
.login-saas .btn { border-radius: 10px; }
.sa-barra input { border-radius: var(--r-campo); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.sa-barra input:focus { outline: none; border-color: var(--navy-2); box-shadow: 0 0 0 4px var(--f-ring); }

/* ---------- 9. Firmas externas: formulario, pestañas y tabla de datos ---------- */
.fe-layout { grid-template-columns: minmax(280px, 310px) minmax(0, 1fr); gap: 18px; }
.fe-form .campo { margin-bottom: 14px; }
.fe-generar { margin-top: 6px; padding: 15px 20px; font-size: 1.02rem; font-weight: 700; letter-spacing: .01em; gap: 8px; border-radius: 10px; }
.fe-generar:disabled { cursor: progress; }
.fe-garantia { margin: 12px 4px 0; text-align: center; font-size: .78rem; line-height: 1.45; color: var(--suave); }
.fe-enlace { margin-top: 16px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--navy-2) 22%, var(--borde)); border-radius: 14px; background: var(--navy-claro); }
.fe-enlace > b { display: block; margin-top: 4px; font-size: .84rem; line-height: 1.4; color: var(--text-strong); }
.fe-enlace > b small { font-weight: 500; color: var(--suave); }
.fe-enlace > b + div + b { margin-top: 12px; }
.fe-enlace > small { display: block; margin-top: 8px; line-height: 1.45; }
.fe-cod-grande { display: block; flex: 1; min-width: 0; padding: 10px 14px; text-align: center; font: 700 1.6rem/1.2 'Courier New', ui-monospace, monospace; letter-spacing: .3em; text-indent: .3em; color: var(--text-strong); user-select: all;
  background: var(--sf-ffffff); border: 1.5px dashed color-mix(in srgb, var(--navy-2) 45%, var(--borde)); border-radius: 10px; }

.fe-enlace > div:has(> .fe-cod-grande) { flex-direction: column; align-items: stretch; }
.fe-enlace > div:has(> .fe-cod-grande) .btn { width: 100%; }
.fe-form input[type="file"] { padding: 9px 10px; font-size: .8rem; }
.fe-form input[type="file"]::file-selector-button { margin-right: 8px; padding: 6px 10px; font-size: .78rem; }
.fe-panel { min-width: 0; }
.fe-panel .fe-resumen { margin-bottom: 8px; }
.fe-tabs { display: flex; gap: 2px; margin: 4px 0 14px; border-bottom: 1px solid var(--borde); overflow-x: auto; scrollbar-width: none; }
.fe-tab { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px 11px; border: 0; border-radius: 8px 8px 0 0; background: none; font: inherit; font-size: .9rem; font-weight: 600; line-height: 1.3; white-space: nowrap; color: var(--suave); cursor: pointer;
  transition: color var(--t-fast), background-color var(--t-fast); }
.fe-tab::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: transparent; transition: background-color var(--t-fast); }
.fe-tab:hover { color: var(--navy-tx); background: var(--row-hover); }
.fe-tab.activo { color: var(--navy-tx); }
.fe-tab.activo::after { background: var(--navy-2); }
.fe-tab-n { min-width: 22px; padding: 1px 7px; border-radius: 99px; font-size: .74rem; font-weight: 700; line-height: 1.5; text-align: center; background: var(--off-bg); color: var(--off-tx); font-variant-numeric: tabular-nums; }
.fe-tab.activo .fe-tab-n { background: var(--navy-soft); color: var(--navy-tx); }
.fe-tab:focus-visible { outline: 2px solid color-mix(in srgb, var(--navy-3) 85%, transparent); outline-offset: -2px; }

.fe-wrap { border: 1px solid var(--borde-suave); border-radius: 14px; background: var(--sf-ffffff); box-shadow: var(--sh-1); scrollbar-width: thin; }
:root[data-tema="oscuro"] .fe-wrap { border-color: var(--borde); }
.fe-grid { width: 100%; min-width: 736px; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.fe-grid th { padding: 10px 12px; text-align: left; vertical-align: bottom; font-size: .78rem; font-weight: 600; line-height: 1.3; letter-spacing: .01em; text-transform: none; color: var(--suave); background: color-mix(in srgb, var(--navy) 3.5%, var(--sf-ffffff)); border-bottom: 1px solid var(--borde); }
:root[data-tema="oscuro"] .fe-grid th { background: rgba(255, 255, 255, .035); }
.fe-grid th:first-child { border-top-left-radius: 13px; } .fe-grid th:last-child { border-top-right-radius: 13px; }
.fe-grid td { padding: 11px 12px; vertical-align: middle; font-size: .88rem; line-height: 1.4; border-bottom: 1px solid var(--borde-suave); }
.fe-grid tbody tr:last-child td { border-bottom: 0; }
.fe-grid th:nth-child(1) { width: 26%; } .fe-grid th:nth-child(2) { width: 19%; } .fe-grid th:nth-child(3) { width: 13%; } .fe-grid th:nth-child(4) { width: 15%; } .fe-grid th:nth-child(5) { width: 14%; } .fe-grid th:nth-child(6) { width: 146px; text-align: right; }
.fe-grid td > * { min-width: 0; }
.fe-grid .fe-doc, .fe-grid .fe-quien, .fe-grid .fe-cuando { display: flex; }
.fe-grid .fe-doc { align-items: center; gap: 10px; }
.fe-grid .fe-doc > div, .fe-grid .fe-quien, .fe-grid .fe-cuando { flex-direction: column; gap: 2px; min-width: 0; }
.fe-grid b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--text-strong); }
.fe-grid small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .75rem; line-height: 1.4; color: var(--suave); }
.fe-grid time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fe-grid .badge-firma + small { margin-top: 4px; }

.fe-cod { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border: 1px solid color-mix(in srgb, var(--navy-2) 24%, var(--borde)); border-radius: 8px; background: color-mix(in srgb, var(--navy) 4%, var(--sf-ffffff)); color: var(--text-strong); font: inherit; cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast); }
.fe-cod code { font: 700 .9rem/1.2 'Courier New', ui-monospace, monospace; letter-spacing: .1em; }
.fe-cod span { font-size: .85rem; color: var(--suave); }
.fe-cod:hover { background: var(--navy-claro); border-color: var(--navy-2); box-shadow: var(--sh-1); }
.fe-cod:active { transform: scale(.98); }
.fe-cod:focus-visible { outline: 2px solid color-mix(in srgb, var(--navy-3) 85%, transparent); outline-offset: 2px; }
.fe-cod-nulo { color: var(--suave); }
.fe-bloq { margin-top: 4px; color: var(--err-tx) !important; font-weight: 600; }

.fe-ops { display: flex; justify-content: flex-end; align-items: center; gap: 4px; } .fe-grid .fe-gear { width: 31px; height: 31px; font-size: .95rem; }
.fe-ico { display: inline-grid; place-items: center; width: 31px; height: 31px; padding: 0; border: 1px solid var(--borde); border-radius: 9px; background: var(--sf-ffffff); box-shadow: var(--sh-1); font-size: .95rem; line-height: 1; color: var(--tx-334155); cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); }
.fe-ico:hover { background: var(--navy-claro); border-color: color-mix(in srgb, var(--navy-2) 35%, var(--borde)); box-shadow: var(--sh-2); }
.fe-ico:active { transform: scale(.94); }
.fe-ico:focus-visible { outline: 2px solid color-mix(in srgb, var(--navy-3) 85%, transparent); outline-offset: 2px; }
.fe-ico-peligro:hover { background: var(--err-bg); border-color: color-mix(in srgb, var(--ruby) 40%, var(--borde)); }
.fe-gear { flex: none; }

.fe-modal { background: rgba(15, 23, 42, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.fe-modal-caja { border: 1px solid var(--borde-suave); box-shadow: var(--sh-3); }
.fe-modal-cuerpo.fe-act { align-items: stretch; justify-content: flex-start; background: var(--card); }
.fe-modal-cuerpo.fe-act .fe-grid { min-width: 720px; }
.fe-grid-act th:nth-child(1) { width: 19%; } .fe-grid-act th:nth-child(2) { width: 23%; } .fe-grid-act th:nth-child(3) { width: 14%; } .fe-grid-act th:nth-child(4) { width: 26%; } .fe-grid-act th:nth-child(5) { width: 18%; text-align: left; }
.fe-grid-act td { white-space: normal; overflow-wrap: anywhere; }
.fe-grid-act small { white-space: normal; overflow: visible; }
@media (max-width: 1100px) { .fe-layout { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 10. Control de Firmas: tarjetas de métricas, barra de herramientas y modal de emisión (internas y externas comparten estilo) ---------- */
.firma-resumen { gap: 16px; margin-bottom: 20px; }
.fr-card { position: relative; gap: 4px; padding: 16px 20px 17px; border: 1px solid var(--borde-suave); border-radius: 18px; box-shadow: var(--sh-2); }
:root[data-tema="oscuro"] .fr-card { border-color: var(--borde); }
.fr-card small { font-size: .8rem; font-weight: 600; line-height: 1.35; letter-spacing: .005em; color: var(--suave); }
.fr-card b { font-size: 2rem; font-weight: 700; line-height: 1.1; letter-spacing: -.035em; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.fr-card.ok { border-color: color-mix(in srgb, var(--emerald) 28%, var(--borde-suave)); } .fr-card.ok b { color: var(--ok-tx); }
.fr-card.pend { border-color: color-mix(in srgb, var(--amber) 30%, var(--borde-suave)); } .fr-card.pend b { color: var(--warn-tx); }
.fr-card i { height: 8px; margin-top: 8px; background: var(--off-bg); }
.fr-card u { background: linear-gradient(90deg, var(--emerald), #16a77f); }

.firma-filtros { gap: 12px; margin-bottom: 16px; }
.firma-filtros input[type="search"] { flex: 1; min-width: 220px; padding: 10px 14px; line-height: 1.4; color: var(--texto); background-color: var(--f-bg); border: 1.5px solid var(--f-bd); border-radius: var(--r-campo);
  transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.firma-filtros input[type="search"]:hover { border-color: var(--f-bd-h); }
.firma-filtros input[type="search"]:focus { outline: none; border-color: var(--navy-2); box-shadow: 0 0 0 4px var(--f-ring); }
.firma-vivo { font-size: .78rem; color: var(--ok-tx); }
.firma-nueva { margin-left: auto; padding: 9px 16px; font-size: .88rem; }
.firma-instr { display: block; margin-top: 2px; color: var(--suave); font-size: .78rem; line-height: 1.4; }

.fi-grid th:nth-child(1) { width: 31%; } .fi-grid th:nth-child(2) { width: 25%; } .fi-grid th:nth-child(3) { width: 17%; } .fi-grid th:nth-child(4) { width: 17%; } .fi-grid th:nth-child(5) { width: 90px; text-align: right; }
.fi-grid { min-width: 700px; }
.fe-grid .fe-doc .avatar { width: 32px; height: 32px; flex: none; font-size: .82rem; }
.fe-grid .ft-cuando { margin-top: 4px; }

/* Modal de emisión (firma interna): colaborador a la izquierda, datos del documento a la derecha */
.modal.modal-emitir { width: min(860px, 96vw); max-width: none; }
.fn-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 22px; align-items: start; margin-bottom: 4px; }
.fn-col { min-width: 0; }
.modal fieldset.fn-quien { margin: 0; padding: 0; border: 0; background: none; }
.fn-quien legend { padding: 0; margin-bottom: 6px; font-size: .84rem; font-weight: 600; line-height: 1.35; color: var(--tx-334155); }
.fn-quien > input { width: 100%; padding: 10px 14px; margin-bottom: 8px; color: var(--texto); background-color: var(--f-bg); border: 1.5px solid var(--f-bd); border-radius: var(--r-campo); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.fn-quien > input:hover { border-color: var(--f-bd-h); }
.fn-quien > input:focus { outline: none; border-color: var(--navy-2); box-shadow: 0 0 0 4px var(--f-ring); }
.fn-lista { display: flex; flex-direction: column; gap: 2px; max-height: 230px; overflow-y: auto; padding: 6px; border: 1.5px solid var(--f-bd); border-radius: 12px; background: var(--f-bg); scrollbar-width: thin; overscroll-behavior: contain; }
.fn-item { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; border: 1px solid transparent; cursor: pointer; transition: background-color var(--t-fast), border-color var(--t-fast); }
.fn-item input { position: absolute; opacity: 0; pointer-events: none; }
.fn-item .avatar { width: 34px; height: 34px; flex: none; font-size: .85rem; }
.fn-item span:not(.avatar) { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fn-item b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; font-weight: 600; line-height: 1.3; color: var(--text-strong); }
.fn-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .76rem; line-height: 1.4; color: var(--suave); }
.fn-item:hover { background: var(--row-hover); }
.fn-item:has(input:checked) { background: var(--navy-claro); border-color: color-mix(in srgb, var(--navy-2) 40%, transparent); }
.fn-item:has(input:checked)::after { content: ''; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--navy-2) var(--ic-check-b) center / 12px no-repeat; }
.fn-item:has(input:focus-visible) { outline: 2px solid color-mix(in srgb, var(--navy-3) 85%, transparent); outline-offset: 1px; }
/* Selección múltiple: chips de lo elegido + «Seleccionar todos» */
.fn-sel { display: flex; align-items: flex-start; min-height: 54px; max-height: 118px; overflow-y: auto; padding: 8px; margin-bottom: 10px; border: 1.5px dashed color-mix(in srgb, var(--navy-2) 30%, var(--f-bd)); border-radius: 12px; background: color-mix(in srgb, var(--navy) 3%, var(--f-bg)); scrollbar-width: thin; overscroll-behavior: contain; transition: border-color var(--t-fast), background-color var(--t-fast); }
.fn-sel.con-chips { border-style: solid; border-color: color-mix(in srgb, var(--navy-2) 38%, var(--f-bd)); background: var(--f-bg); }
.fn-chips { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.fn-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 4px 3px 4px; border: 1px solid color-mix(in srgb, var(--navy-2) 25%, transparent); border-radius: 99px; background: var(--navy-claro); color: var(--navy-tx); font-size: .82rem; font-weight: 600; line-height: 1.3; }
.fn-chip .avatar { width: 22px; height: 22px; flex: none; font-size: .68rem; }
.fn-chip-nom { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fn-chip-x { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--navy-2) 14%, transparent); color: inherit; font-size: .62rem; line-height: 1; cursor: pointer; transition: background-color var(--t-fast), color var(--t-fast); }
.fn-chip-x:hover:not(:disabled) { background: var(--ruby); color: #fff; }
.fn-chip-x:focus-visible { outline: 2px solid color-mix(in srgb, var(--navy-3) 85%, transparent); outline-offset: 1px; }
.fn-chip-x:disabled { opacity: .5; cursor: not-allowed; }
.fn-chips-vacio { align-self: center; padding: 0 4px; font-size: .82rem; line-height: 1.45; color: var(--suave); }
.fn-barra { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 2px 8px; }
.fn-todos { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: .86rem; line-height: 1.35; color: var(--text-strong); cursor: pointer; }
.fn-todos input { width: 17px; height: 17px; margin: 0; cursor: pointer; }
#fn-cuenta { margin-left: auto; font-size: .78rem; line-height: 1.4; color: var(--suave); font-variant-numeric: tabular-nums; }
.fn-barra .link-btn { font-size: .8rem; color: var(--navy-tx); }
.modal-emitir.enviando { cursor: progress; }
.modal-emitir.enviando .btn { cursor: progress; }
.fn-vacio { margin: 18px 8px; text-align: center; font-size: .86rem; line-height: 1.45; color: var(--suave); }
.modal-emitir .campo textarea { min-height: 96px; }
.modal-emitir .pie { margin-top: 14px; }
@media (max-width: 720px) { .fn-grid { grid-template-columns: minmax(0, 1fr); } .fn-lista { max-height: 220px; } .firma-nueva { width: 100%; margin-left: 0; } }

/* ---------- 11. Firmas externas: lista dinámica de firmantes y resultado del envío masivo ---------- */
.fe-form fieldset.fe-firmantes { margin: 0 0 14px; padding: 0; border: 0; background: none; min-width: 0; }
.fe-firmantes legend { display: flex; align-items: center; gap: 8px; padding: 0; margin-bottom: 8px; font-size: .84rem; font-weight: 600; line-height: 1.35; color: var(--tx-334155); }
.fe-firm-n { min-width: 22px; padding: 1px 7px; border-radius: 99px; font-size: .74rem; font-weight: 700; line-height: 1.5; text-align: center; background: var(--navy-soft); color: var(--navy-tx); font-variant-numeric: tabular-nums; }
.fe-dests { display: flex; flex-direction: column; gap: 8px; max-height: 330px; overflow-y: auto; padding: 2px; margin: -2px; scrollbar-width: thin; overscroll-behavior: contain; }
.fe-dest { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--borde-suave); border-radius: 12px; background: color-mix(in srgb, var(--navy) 2.5%, var(--sf-ffffff)); transition: border-color var(--t-fast); }
:root[data-tema="oscuro"] .fe-dest { border-color: var(--borde); background: rgba(255, 255, 255, .02); }
.fe-dest:focus-within { border-color: color-mix(in srgb, var(--navy-2) 40%, var(--borde)); }
.fe-dest-top { display: flex; gap: 6px; align-items: center; }
.fe-dest-nom { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fe-dests:not(.varios) .fe-dest { padding: 0; border: 0; background: none; gap: 8px; }
.fe-dest input { width: 100%; min-width: 0; padding: 9px 12px; font-size: .88rem; line-height: 1.4; color: var(--texto); background-color: var(--f-bg); border: 1.5px solid var(--f-bd); border-radius: var(--r-campo); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.fe-dest input:hover { border-color: var(--f-bd-h); }
.fe-dest input:focus { outline: none; border-color: var(--navy-2); box-shadow: 0 0 0 4px var(--f-ring); }
.fe-dest input.mal { border-color: var(--ruby); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ruby) 16%, transparent); }
.fe-dest input:disabled { background-color: var(--f-off); color: var(--suave); cursor: not-allowed; }
.fe-dests:not(.varios) .fe-dest input { padding: 11px 14px; font-size: .95rem; }
.fe-d-del { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--borde); border-radius: 9px; background: var(--sf-ffffff); box-shadow: var(--sh-1); font-size: .95rem; line-height: 1; cursor: pointer; transition: background-color var(--t-fast), border-color var(--t-fast), transform var(--t-fast); }
.fe-d-del:hover:not(:disabled) { background: var(--err-bg); border-color: color-mix(in srgb, var(--ruby) 40%, var(--borde)); }
.fe-d-del:active:not(:disabled) { transform: scale(.94); }
.fe-d-del:focus-visible { outline: 2px solid color-mix(in srgb, var(--navy-3) 85%, transparent); outline-offset: 2px; }
.fe-d-del:disabled { opacity: .5; cursor: not-allowed; }
.fe-dests-pie { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 10px; }
.fe-dests-pie small { font-size: .76rem; line-height: 1.45; color: var(--suave); }
.fe-dests-pie .link-btn { padding: 0; font-size: inherit; line-height: inherit; color: var(--navy-tx); }
.fe-dests-acc { display: flex; flex-wrap: wrap; gap: 8px; }
.fe-dests-acc .btn { flex: 1 1 auto; justify-content: center; white-space: nowrap; }
.fe-import-estado { width: 100%; padding: 10px 12px; border: 1px solid var(--borde-suave); border-radius: 12px; font-size: .84rem; line-height: 1.5; color: var(--texto); }
.fe-import-estado.ok { background: var(--ok-bg); color: var(--ok-tx); border-color: color-mix(in srgb, var(--emerald) 28%, transparent); }
.fe-import-estado.aviso { background: var(--warn-bg); color: var(--warn-tx); border-color: color-mix(in srgb, var(--amber) 30%, transparent); }
.fe-import-estado.error { background: var(--err-bg); color: var(--err-tx); border-color: color-mix(in srgb, var(--ruby) 28%, transparent); }
.fe-import-estado.leyendo { background: var(--off-bg); color: var(--off-tx); }
.fe-import-estado ul { margin: 4px 0 0; padding-left: 18px; font-size: .8rem; line-height: 1.5; }
.fe-import-estado li { margin: 0; }
.fe-import-estado .btn { margin-top: 8px; }
.fe-import-estado .link-btn { color: inherit; text-decoration: underline; }
.fe-form.enviando { cursor: progress; }
.fe-form.enviando .btn { cursor: progress; }

.fe-lote { margin-top: 16px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--navy-2) 22%, var(--borde)); border-radius: 14px; background: var(--navy-claro); }
.fe-lote > b { display: block; margin-bottom: 8px; font-size: .9rem; line-height: 1.4; color: var(--text-strong); }
.fe-lote-lista { display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow-y: auto; padding-right: 2px; scrollbar-width: thin; overscroll-behavior: contain; }
.fe-lote-fila { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; background: var(--sf-ffffff); border: 1px solid var(--borde-suave); }
.fe-lote-quien { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.fe-lote-quien b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .84rem; font-weight: 600; line-height: 1.3; color: var(--text-strong); }
.fe-lote-quien small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .74rem; line-height: 1.4; color: var(--suave); }
.fe-lote-fila code { flex: none; padding: 3px 8px; border-radius: 7px; font: 700 .88rem/1.2 'Courier New', ui-monospace, monospace; letter-spacing: .12em; color: var(--text-strong); background: color-mix(in srgb, var(--navy) 6%, var(--sf-ffffff)); border: 1px solid color-mix(in srgb, var(--navy-2) 24%, var(--borde)); }
.fe-lote-fila .fe-ico { width: 30px; height: 30px; flex: none; }
.fe-lote-pie { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 10px; }
.fe-lote-pie small { font-size: .76rem; line-height: 1.45; color: var(--suave); }


/* 12. Panel de visualización (Admin): una sola vista con dos secciones separadas, Identidad visual y Gestión de módulos */
.pv-seccion { margin-top: 18px; }
.pv-cab { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.pv-cab h3 { margin: 0; font-size: 1.08rem; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--text-strong); }
.pv-cab .imp-sub { margin: 4px 0 0; line-height: 1.5; max-width: 70ch; }
.pv-ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; font-size: 1.15rem; line-height: 1; background: var(--navy-claro); border: 1px solid color-mix(in srgb, var(--navy-2) 18%, var(--borde)); }
.pv-div { height: 1px; margin: 28px 0 8px; border: 0; background: linear-gradient(90deg, transparent, var(--borde) 12%, var(--borde) 88%, transparent); }
#adm-visual .vista-card h4 { margin: 0 0 6px; font-size: .98rem; line-height: 1.3; color: var(--text-strong); }
#adm-visual .aus-layout { margin-top: 0; }
#adm-visual #mod-lista { min-width: 0; }
/* 13. Mis documentos (colaborador, solo lectura) y Gestor de documentos (Admin) */
.md-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 16px; }
.md-cab h2 { margin: 0; font-size: 1.35rem; line-height: 1.25; letter-spacing: -.02em; color: var(--text-strong); }
.md-cab .imp-sub { margin: 6px 0 0; line-height: 1.5; max-width: 62ch; }
.md-sello { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 6px 12px; border-radius: 99px; font-size: .78rem; font-weight: 700; line-height: 1.2; color: var(--navy-2); background: var(--navy-claro); border: 1px solid color-mix(in srgb, var(--navy-2) 22%, var(--borde)); }
.md-main { padding: 18px 20px; }
.md-barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.md-total { font-size: .82rem; line-height: 1.4; color: var(--suave); }
#vista-documentos .firma-pend { margin-bottom: 16px; }
.gd-sub { margin: 4px 0 16px; line-height: 1.5; max-width: 72ch; }
/* 14. Íconos vectoriales (Lucide, sprite img/iconos.svg) en lugar de emojis: heredan el color del texto (currentColor) y escalan con la fuente (em) */
:root {
  --ic-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --ic-check-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --ic-circulo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E");
}
.ic { display: inline-block; flex: none; width: 1.15em; height: 1.15em; vertical-align: -.2em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.ic-fill { fill: currentColor; }
/* Texto + ícono: se alinean en el centro vertical con un espacio de .5rem (sustituye al espacio suelto que dejaba el emoji) */
:is(button, a, .btn, .tab, .chip-btn):has(> .ic) { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
:is(h2, h3, h4, legend, .imp-sub, .fx-meta, .fx-seguro):has(> .ic) { display: flex; align-items: center; gap: .5rem; }
:is(.chip-hero, .badge-firma, .fe-tab, .adm-tab, .btn-pdf, .dd-ico + *):has(> .ic) { gap: .4rem; }
li > .ic:first-child, p > .ic:first-child, small > .ic:first-child, dd > .ic:first-child { margin-right: .35em; }
:is(button, a, .btn, h2, h3, h4, legend):has(> .ic) > .ic { margin-right: 0; }
/* Cajas de ícono (tarjetas, estados vacíos, KPIs, notificaciones): el ícono llena la caja y toma el color de la marca */
:is(.adm-ico, .pv-ico, .doc-ico, .inf-ico, .vacio-ico, .aus-ico, .t-ico, .av-ico, .notif-ico, .cele-ico, .cele-badge, .fx-msg-ico, .fx-gate-ico, .dd-ico) { display: inline-grid; place-items: center; line-height: 1; }
:is(.adm-ico, .pv-ico, .doc-ico, .inf-ico, .vacio-ico, .aus-ico, .t-ico, .notif-ico, .fx-msg-ico, .fx-gate-ico, .dd-ico) > .ic { width: 1em; height: 1em; vertical-align: 0; stroke-width: 1.8; }
:is(.adm-ico, .pv-ico, .doc-ico, .inf-ico, .aus-ico, .t-ico, .notif-ico, .dd-ico) { color: var(--navy-2); }
.vacio-ico { color: var(--suave); }
.vacio-ico > .ic { stroke-width: 1.5; }
:is(.btn-ico, .fe-ico, .fe-gear, .ojo, .ficha-x, .adj-quitar, .fn-chip-x, .fe-d-del, .fe-vp-x, .org-editar, .libro-nav, .vm-nav, .vm-x, .reac-abrir) > .ic { width: 1.1em; height: 1.1em; vertical-align: 0; }
.doc-general .ic { color: var(--navy-2); }
.mano .ic { width: .95em; height: .95em; vertical-align: -.12em; }
/* Filas de documentos: si faltan píxeles, las acciones bajan de línea en vez de aplastar el nombre del archivo */
.doc-ops { flex-wrap: wrap; min-width: 0; }
@media (min-width: 901px) { .doc-fila { grid-template-columns: minmax(150px, 1fr) auto minmax(0, max-content); } }
/* Opciones de menú, enlaces y botones de texto: el ícono va a la izquierda con el texto (no centrados) */
:is([role="menuitem"], .fe-mi, .link-btn, .doc-nombre):has(> .ic), .fe-mi { justify-content: flex-start; text-align: left; }
.fe-mi > span[aria-hidden="true"] { display: inline-grid; place-items: center; }
.bz-nav { white-space: nowrap; }
/* Avisos globales (aviso()): icono de estado + mensaje */
#msg:has(> .ic) { display: flex; align-items: center; gap: .6rem; }

/* 15. Cronómetro y Admin › Horarios (horarios individuales y asistencia global) */
.anillo.cerrada .anillo-prog { stroke: var(--navy-2); opacity: .5; }
.hz-intro { margin: 4px 0 16px; max-width: 72ch; line-height: 1.5; }
.hz-layout { display: grid; grid-template-columns: minmax(230px, 300px) minmax(0, 1fr); gap: 20px; align-items: start; }
.hz-personas h3 { margin: 0 0 10px; font-size: 1rem; line-height: 1.3; color: var(--text-strong); }
.hz-personas input[type="search"] { width: 100%; margin-bottom: 10px; }
#hz-lista { display: flex; flex-direction: column; gap: 2px; max-height: 62vh; overflow-y: auto; }
.hz-persona { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 12px; background: none; font: inherit; text-align: left; cursor: pointer; color: inherit; }
.hz-persona:hover { background: var(--row-hover); }
.hz-persona.activo { background: var(--navy-claro); box-shadow: inset 3px 0 0 var(--navy-2); }
.hz-persona.inactivo { opacity: .6; }
.hz-persona > span:not(.avatar):not(.hz-flag) { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.hz-persona b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; font-weight: 600; line-height: 1.3; color: var(--text-strong); }
.hz-persona small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .76rem; line-height: 1.4; color: var(--suave); }
.hz-flag { display: inline-flex; flex: none; color: #b4630f; }
.hz-editor { min-width: 0; }
.hz-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hz-cab h3 { margin: 0; font-size: 1.1rem; line-height: 1.3; color: var(--text-strong); }
.hz-cab .imp-sub { margin: 2px 0 0; }
.hz-presets { display: flex; gap: 6px; flex-wrap: wrap; }
.hz-nota { display: flex; align-items: flex-start; gap: .5rem; margin: 12px 0 0; font-size: .84rem; line-height: 1.5; color: var(--suave); }
.hz-semanas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 16px 0 12px; }
.hz-tabla-wrap { overflow-x: auto; }
.hz-turnos, .hz-grid { width: 100%; border-collapse: separate; border-spacing: 0; }
.hz-turnos th, .hz-turnos td, .hz-grid th, .hz-grid td { padding: 9px 10px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--borde-suave); font-size: .88rem; line-height: 1.4; }
.hz-turnos thead th, .hz-grid thead th { font-size: .78rem; font-weight: 600; color: var(--suave); background: color-mix(in srgb, var(--navy) 4%, var(--sf-ffffff)); }
.hz-turnos tbody th { font-weight: 600; white-space: nowrap; }
.hz-turnos tbody th label { display: inline-flex; align-items: center; gap: .5rem; margin: 0; cursor: pointer; }
.hz-turnos input[type="time"], .hz-turnos input[type="number"] { width: 132px; padding: 7px 9px; }
.hz-turnos tr.libre td:not(.hz-obs) { opacity: .45; }
.hz-turnos .num, .hz-grid .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hz-total { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 16px; }
.hz-total > div { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--borde-suave); border-radius: 14px; }
.hz-total small { font-size: .78rem; font-weight: 600; line-height: 1.3; color: var(--suave); }
.hz-total b { font-size: 1.5rem; line-height: 1.15; letter-spacing: -.02em; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.hz-total i { display: block; height: 6px; border-radius: 99px; background: var(--borde-suave); overflow: hidden; }
.hz-total u { display: block; height: 100%; border-radius: 99px; background: var(--navy-2); }
.hz-total.alerta-limite u { background: #c98a2b; }
.hz-limite span { font-size: .76rem; line-height: 1.4; color: var(--suave); }
.hz-alerta { display: flex; align-items: flex-start; gap: .6rem; margin-top: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, #c98a2b 45%, var(--borde)); background: var(--sf-f6edd8); color: var(--tx-8a5a1b); font-size: .88rem; line-height: 1.5; }
.hz-alerta .ic { margin-top: .15em; }
.hz-acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.hz-filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 16px; }
.hz-filtros .campo { margin: 0; min-width: 160px; }
.hz-botones { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.hz-grid { min-width: 900px; }
.hz-grid td b { display: block; font-weight: 600; color: var(--text-strong); }
.hz-grid td small { display: block; font-size: .76rem; color: var(--suave); }
.hz-grid .rojo { color: var(--err-tx); font-weight: 600; }
.hz-vacio { padding: 28px 10px; text-align: center; color: var(--suave); }
.hz-pie { margin: 12px 2px 0; font-size: .8rem; line-height: 1.5; color: var(--suave); }
@media (max-width: 1280px) { .hz-layout { grid-template-columns: minmax(0, 1fr); } #hz-lista { max-height: 220px; } }
@media (max-width: 900px) { .hz-botones { margin-left: 0; } }
/* Grid de horarios: columnas de ancho fijo (sin huecos) y columna «Observaciones» al final */
.hz-turnos { table-layout: fixed; min-width: 800px; }
.hz-turnos th:nth-child(1) { width: 92px; }
.hz-turnos th:nth-child(2), .hz-turnos th:nth-child(3) { width: 154px; }
.hz-turnos th:nth-child(4) { width: 88px; }
.hz-turnos th:nth-child(5) { width: 92px; }
.hz-turnos input[type="time"], .hz-turnos input[type="number"] { width: 100%; padding-inline: 7px; }
.hz-obs { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.hz-obs select, .hz-obs input[type="text"] { width: 100%; padding: 7px 9px; }
.hz-obs input[hidden] { display: none; }
/* Cronómetro: horario de hoy y aviso de día libre; aviso global de advertencia; novedades en la tabla de asistencia */
.crono-hoy { margin: 0; text-align: center; font-size: .82rem; line-height: 1.4; color: var(--suave); }
.crono-hoy.libre { color: var(--tx-8a5a1b); font-weight: 600; }
.alerta.aviso { background: var(--sf-f6edd8); color: var(--tx-8a5a1b); border-color: #c98a2b; }
.hz-grid td small.hz-nov { color: var(--tx-8a5a1b); }
.hz-grid { min-width: 1080px; }
/* Campana: estado de los avisos del dispositivo */
.notif-disp { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--borde-suave); }
.notif-disp small { font-size: .78rem; line-height: 1.45; color: var(--suave); }
/* Mensajes y notificaciones (Admin): bandeja de salida, historial de lectura y bitácora de correos */
.cm-tit { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: 1.05rem; line-height: 1.3; color: var(--text-strong); }
.cm-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cm-mes { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--suave); }
.cm-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-bottom: 14px; }
.cm-datos > div { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--borde-suave); border-radius: 14px; }
.cm-datos small, .cm-lista small, .cm-tabla td small { font-size: .76rem; line-height: 1.4; color: var(--suave); }
.cm-datos b { font-size: .98rem; line-height: 1.35; color: var(--text-strong); }
.cm-datos span:not(.badge) { font-size: .82rem; color: var(--suave); }
.cm-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-top: 8px; }
.cm-cols h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: .9rem; line-height: 1.3; color: var(--text-strong); }
.cm-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; }
.cm-lista li { font-size: .86rem; line-height: 1.4; overflow-wrap: anywhere; }
.cm-lista li b { display: inline-block; min-width: 1.6em; color: var(--navy-2); font-variant-numeric: tabular-nums; }
.cm-vacio { margin: 0; font-size: .84rem; color: var(--suave); }
.cm-acciones { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.cm-vista { margin-top: 14px; border: 1px solid var(--borde-suave); border-radius: 14px; overflow: hidden; background: #eef1f6; }
.cm-iframe { display: block; width: 100%; height: 760px; border: 0; }
.cm-tabla td small { display: block; }
.cm-estado { display: inline-flex; align-items: center; gap: .45rem; font-size: .84rem; font-weight: 600; white-space: nowrap; }
.cm-estado.leido { color: var(--ok-tx); } .cm-estado.sin-leer { color: var(--err-tx); }
.cm-punto { width: 10px; height: 10px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent); }
.cm-disp { display: inline-flex; align-items: center; gap: .4rem; font-size: .84rem; color: var(--navy-2); }
.cm-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.cm-pie small { color: var(--suave); font-size: .8rem; }
.cm-pag { display: inline-flex; gap: 8px; }
.cm-nota { margin: 0 0 16px; }
.cm-reprog { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 16px; padding: 14px 16px; border: 1px dashed var(--borde-suave); border-radius: 14px; }
.cm-reprog h4 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .9rem; line-height: 1.3; color: var(--text-strong); }
.cm-reprog-fila { display: flex; align-items: flex-end; gap: 12px 16px; flex-wrap: wrap; }
.cm-reprog .campo, .cm-reprog .hz-botones { margin: 0; }
.cm-reprog input[type="datetime-local"] { min-width: 220px; }
.cm-reprog small { font-size: .78rem; line-height: 1.4; color: var(--suave); }
.cm-reprog .alerta { margin: 0; }

/* ---------- 17. Traje visual TI (D:\TI): botón con degradado + halo, tarjetas con elevación, tablas, modales, gráficos ----------
   Solo capa visual y aditiva (no toca el DOM ni clases usadas por JS). Todo deriva de --primary-color, así que el color
   elegido en «Identidad visual» y el modo oscuro siguen mandando; TI aportó la forma (degradado 135°, halo, elevación al hover).
   Para revertir esta sección basta con borrar desde este comentario hasta el final del archivo. */
:root {
  --ti-ease: cubic-bezier(.4, 0, .2, 1);
  --ti-grad: linear-gradient(135deg, var(--navy-2) 0%, var(--navy) 100%);                       /* TI: --accent → --accent-2 */
  --ti-btn-sh: 0 6px 16px -10px color-mix(in srgb, var(--navy) 90%, transparent);               /* TI: sombra del botón primario */
  --ti-btn-sh-h: 0 10px 22px -10px color-mix(in srgb, var(--navy) 95%, transparent);
  --ti-glow: 0 0 0 3px color-mix(in srgb, var(--navy-2) 18%, transparent), 0 0 18px -2px color-mix(in srgb, var(--navy-2) 35%, transparent);
  --ti-chip-bg: color-mix(in srgb, var(--navy-2) 10%, var(--sf-ffffff));
}

/* Botones: primario con degradado de marca (los de decisión, peligro y secundarios conservan su color semántico) */
.btn:where(:not(.btn-sec):not(.btn-danger):not(.aus-dec-ok):not(.aus-dec-err):not(.aus-dec-warn)) {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0)), var(--ti-grad);
  transition: transform .25s var(--ti-ease), box-shadow .25s var(--ti-ease), filter var(--t-fast), opacity var(--t-fast);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), var(--ti-btn-sh);
}
.btn:where(:not(.btn-sec):not(.btn-danger):not(.aus-dec-ok):not(.aus-dec-err):not(.aus-dec-warn)):hover:not(:disabled) {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .02)), var(--ti-grad);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), var(--ti-btn-sh-h);
}
.btn:where(:not(.btn-sec):not(.btn-danger)):disabled { background-image: none; box-shadow: none; }
.btn-sec:hover:not(:disabled), .chip-btn:hover { box-shadow: 0 6px 14px -10px color-mix(in srgb, var(--navy-2) 60%, transparent); }

/* Tarjetas y paneles: elevación suave y acento al pasar el cursor (Centro de mando, Panel de visualización, Informes) */
.adm-stat, .adm-card, .inf-card, .vista-card, .w, .sa-stat, .t-card-mini { transition: transform .25s var(--ti-ease), box-shadow .25s var(--ti-ease), border-color .25s var(--ti-ease); }
.adm-stat[tabindex="0"]:hover, button.adm-stat:hover, .adm-card:hover, .inf-card:hover { transform: translateY(-2px); box-shadow: var(--sombra-hover); }
.adm-stat span, .adm-ico, .inf-ico, .aus-ico { background: var(--ti-chip-bg); color: var(--navy-2-tx); }
.vista-card { box-shadow: var(--sh-1); }
.vista-card:hover { box-shadow: var(--sh-2); border-color: color-mix(in srgb, var(--navy-2) 22%, var(--borde)); }
:root[data-tema="oscuro"] .adm-stat span, :root[data-tema="oscuro"] .adm-ico, :root[data-tema="oscuro"] .inf-ico, :root[data-tema="oscuro"] .aus-ico { background: color-mix(in srgb, var(--navy-3) 16%, transparent); }

/* Data-grids: cabecera sobria, fila activa con barra de acento y cifras tabulares */
.tabla-wrap { scrollbar-width: thin; }
.tabla-wrap th, .tabla-mod th, .tabla-tiempo th { color: var(--suave); font-weight: 600; letter-spacing: .02em; }
tbody tr { transition: background-color .2s ease; }
.tabla-mod tbody tr:hover td:first-child, .tabla-tiempo tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--navy-2); }
.tabla-mod td, .tabla-tiempo td { font-variant-numeric: tabular-nums; }

/* Modales: la animación de entrada vive en la sección 18 (Motion Design) */

/* Gráficos de Evaluaciones: barras con degradado y brillo, columnas de evolución con volumen, anillo con halo del tono */
.ev-reporte .ev-pista-lin { height: 11px; box-shadow: inset 0 1px 2px rgba(15, 23, 42, .08); }
.ev-reporte .ev-pista-lin i { background-image: linear-gradient(90deg, color-mix(in srgb, var(--t, var(--navy-2)) 78%, white), var(--t, var(--navy-2))); box-shadow: 0 0 10px -2px color-mix(in srgb, var(--t, var(--navy-2)) 55%, transparent); }
.ev-reporte .ev-col span { background-image: linear-gradient(180deg, color-mix(in srgb, var(--t) 20%, transparent), color-mix(in srgb, var(--t) 46%, transparent)); transition: background-color .25s var(--ti-ease), transform .25s var(--ti-ease); }
.ev-reporte .ev-col.actual span { background-image: linear-gradient(180deg, color-mix(in srgb, var(--t) 78%, white), var(--t)); box-shadow: 0 8px 16px -10px var(--t); }
.ev-reporte .ev-col:hover span { transform: translateY(-2px); }
.ev-reporte .ev-anillo .ev-valor { stroke-linecap: round; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--t) 45%, transparent)); }
.ev-reporte { transition: box-shadow .25s var(--ti-ease); }

/* ---------- 18. Motion Design & Transiciones ----------
   Escala de tiempos: 150 ms = cambios de color/borde (hover) · 220 ms = elevación, pulsación y modales · 320 ms = anchos de layout (menú lateral).
   Curvas: --m-std (Material estándar) para estados; --m-out (desaceleración fuerte) para lo que entra, así se siente rápido al inicio y asienta suave.
   Nunca `transition: all` (animar solo transform/opacity/color/sombra no provoca reflujos extra); prefers-reduced-motion ya lo neutraliza la sección 1.
   Solo CSS: no cambia HTML ni JS. Para revertir, borrar desde este comentario hasta el final. */
/* Física global: UNA curva de estado (--ease-smooth) y una de entrada (--m-out) para toda la plataforma. --transition-smooth es el atajo «0,3 s suave» para lo que cambia de tamaño o de lugar. */
:root { --m-fast: .15s; --m-base: .22s; --m-slow: .3s; --ease-smooth: cubic-bezier(.25, .1, .25, 1); --m-std: var(--ease-smooth); --m-out: cubic-bezier(.22, 1, .36, 1); --transition-smooth: .3s var(--ease-smooth); }

/* 18.1 Botones, pestañas y chips: hover fluido y contracción táctil al pulsar */
:is(.btn, .btn-pdf, .btn-descargar, .btn-crono, .btn-ico, .chip-btn, .gear-btn, .tab, .adm-tab) {
  transition: transform var(--m-base) var(--m-out), box-shadow var(--m-base) var(--m-std), background-color var(--m-fast) var(--m-std),
    border-color var(--m-fast) var(--m-std), color var(--m-fast) var(--m-std), filter var(--m-fast) var(--m-std), opacity var(--m-fast) var(--m-std);
}
:is(.btn, .btn-pdf, .btn-descargar, .btn-crono, .btn-ico, .chip-btn, .gear-btn, .tab, .adm-tab):active:not(:disabled) { transform: scale(.96); transition-duration: 80ms; }
.btn.btn-block:active:not(:disabled) { transform: scale(.985); }   /* el botón ancho (login) se contrae menos: 4 % se notaría torpe */

/* Tarjetas clicables: elevan al pasar el cursor y se hunden un poco al pulsar */
:is(button.adm-stat, .adm-stat[tabindex="0"], .adm-card, .inf-card, .doc-persona, .notif-item):active { transform: scale(.985); transition-duration: 80ms; }
.bz-nav:active { transform: scale(.97); transition-duration: 80ms; }

/* 18.2 Menú lateral: el ancho se anima y el contenido acompaña (texto, íconos, logo y relleno) en lugar de saltar */
.bz-nav { white-space: nowrap; transition: background-color var(--m-fast) var(--m-std), color var(--m-fast) var(--m-std), transform var(--m-base) var(--m-out), box-shadow var(--m-base) var(--m-std),
  font-size var(--m-slow) var(--m-std), gap var(--m-slow) var(--m-std), padding var(--m-slow) var(--m-std); }
.bz-nav svg { transition: width var(--m-slow) var(--m-std), height var(--m-slow) var(--m-std), transform var(--m-base) var(--m-out); }
.bz-nav:hover svg { transform: scale(1.08); }
.bz-side, .bz-logo { transition: padding var(--m-slow) var(--m-std); }
@media (min-width: 1025px) {
  .bz { transition: grid-template-columns var(--m-slow) var(--m-std); }
  .bz-logo .logo-full, .bz-logo .logo-mini { animation: m-fade var(--m-slow) var(--m-out) both; }
}
@media (max-width: 1024px) {
  .bz-side { transition: transform var(--m-slow) var(--m-out), box-shadow var(--m-slow) var(--m-std); }
  .bz.menu-abierto::after { animation: m-fade var(--m-base) var(--m-std) both; }
}
@keyframes m-fade { from { opacity: 0; } to { opacity: 1; } }

/* 18.3 Modales: fundido + ascenso suave (10 px) con ligera escala; el fondo se desenfoca con fundido */
.modal-fondo { animation: m-fade var(--m-base) var(--m-std) both; }
.modal { animation: m-modal var(--m-base) var(--m-out) both; }
@keyframes m-modal { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

/* 18.4 Data-grids: las filas entran con fundido y ascenso mínimo, escalonadas en las primeras 8 (≈ 200 ms en total).
   Se excluyen las tablas de Firmas, que se refrescan solas cada 10–15 s y parpadearían. */
.tabla-mod:not(:is(#adm-firmas, #fx-ext) *) tbody tr { animation: m-fila var(--m-base) var(--m-out) both; }
.tabla-mod:not(:is(#adm-firmas, #fx-ext) *) tbody tr:nth-child(2) { animation-delay: 25ms; }
.tabla-mod:not(:is(#adm-firmas, #fx-ext) *) tbody tr:nth-child(3) { animation-delay: 50ms; }
.tabla-mod:not(:is(#adm-firmas, #fx-ext) *) tbody tr:nth-child(4) { animation-delay: 75ms; }
.tabla-mod:not(:is(#adm-firmas, #fx-ext) *) tbody tr:nth-child(5) { animation-delay: 100ms; }
.tabla-mod:not(:is(#adm-firmas, #fx-ext) *) tbody tr:nth-child(6) { animation-delay: 125ms; }
.tabla-mod:not(:is(#adm-firmas, #fx-ext) *) tbody tr:nth-child(7) { animation-delay: 150ms; }
.tabla-mod:not(:is(#adm-firmas, #fx-ext) *) tbody tr:nth-child(n+8) { animation-delay: 175ms; }
@keyframes m-fila { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* 18.5 Ventanas (modales): al abrir, fundido + escala 0,95 → 1; al cerrar, el mismo camino de vuelta en lugar de desaparecer de golpe.
   Cerrar con transición exige animar `display` (`transition-behavior: allow-discrete`) y partir de un estado inicial (`@starting-style`): lo soportan Chrome/Edge 117+, Safari 17.5+ y Firefox 129+.
   En navegadores más viejos queda la animación de entrada de 18.3 y el cierre es instantáneo (nada se rompe). Los modales se abren y cierran con la clase `.oculto`; el JS no cambia. */
@supports (transition-behavior: allow-discrete) {
  .modal-fondo, .sa-fondo { animation: none; transition: opacity var(--m-base) var(--ease-smooth), display var(--m-base) allow-discrete; }
  .modal-fondo.oculto, .sa-fondo.oculto { opacity: 0; pointer-events: none; }
  .modal, .sa-modal { animation: none; transition: transform var(--m-base) var(--m-out), opacity var(--m-base) var(--ease-smooth); }
  .modal-fondo.oculto .modal, .sa-fondo.oculto .sa-modal { opacity: 0; transform: translateY(8px) scale(.95); }
  @starting-style {
    .modal-fondo:not(.oculto), .sa-fondo:not(.oculto) { opacity: 0; }
    .modal-fondo:not(.oculto) .modal, .sa-fondo:not(.oculto) .sa-modal { opacity: 0; transform: translateY(8px) scale(.95); }
  }
}

/* 18.6 Menús desplegables y paneles flotantes (usuario, campana, emojis, engranaje de acciones, menú de firmas externas): bajan unos píxeles con fundido; al cerrarse suben y se desvanecen */
.usuario-dropdown, .notif-panel, .emoji-panel, .gear-menu { transform-origin: top right; }
@supports (transition-behavior: allow-discrete) {
  .usuario-dropdown, .notif-panel, .emoji-panel, .gear-menu { transition: opacity var(--m-base) var(--ease-smooth), transform var(--m-base) var(--m-out), display var(--m-base) allow-discrete; }
  .usuario-dropdown.oculto, .notif-panel.oculto, .emoji-panel.oculto, .gear-menu.oculto { opacity: 0; transform: translateY(-6px) scale(.98); pointer-events: none; }
  @starting-style { .usuario-dropdown:not(.oculto), .notif-panel:not(.oculto), .emoji-panel:not(.oculto), .gear-menu:not(.oculto) { opacity: 0; transform: translateY(-6px) scale(.98); } }
}
.fe-menu { transform-origin: top right; animation: fe-pop var(--m-base) var(--m-out) both; }   /* creado y destruido por JS: solo entrada */
.usuario-dropdown button, .gear-menu button, .fe-mi { transition: background-color var(--m-fast) var(--ease-smooth), color var(--m-fast) var(--ease-smooth), transform var(--m-fast) var(--ease-smooth); }
.usuario-dropdown button:hover, .gear-menu button:hover:not(:disabled), .fe-mi:hover { transform: translateX(2px); }

/* 18.7 Paneles de pestañas y vistas: cada vez que se muestra una, entra con un leve ascenso (fill backwards: no deja `transform` puesto al terminar, así no afecta a nada con position: fixed dentro) */
.adm-sub:not(.oculto), [role="tabpanel"]:not(.oculto), .bz-main > section:not(.oculto) { animation: m-panel var(--transition-smooth) backwards; }
@keyframes m-panel { from { opacity: 0; transform: translateY(8px); } }

/* 18.8 Documentos y listas: al abrir una carpeta (la lista se vuelve a dibujar) las filas aparecen escalonadas; el formulario de «Nueva carpeta» se despliega.
   Nota: Documentos navega por carpetas (miga de pan), no tiene un árbol plegable; el truco `grid-template-rows: 0fr → 1fr` necesita un contenedor envolvente que hoy no existe en el HTML. */
.doc-fila, .doc-persona { animation: m-fila var(--m-base) var(--m-out) backwards; }
.doc-fila:nth-child(2), .doc-persona:nth-child(2) { animation-delay: 30ms; }
.doc-fila:nth-child(3), .doc-persona:nth-child(3) { animation-delay: 60ms; }
.doc-fila:nth-child(4), .doc-persona:nth-child(4) { animation-delay: 90ms; }
.doc-fila:nth-child(n+5), .doc-persona:nth-child(n+5) { animation-delay: 120ms; }
#doc-nueva:not(.oculto) { animation: m-panel var(--transition-smooth) backwards; }

/* 18.9 Cualquier otro elemento clicable que aún no tenga transición propia hereda la física global (sin `all`: solo color, borde, sombra y transform) */
:where(a, summary, [role="tab"], [role="menuitem"], label.chip-btn, .menu-link) {
  transition: color var(--m-fast) var(--ease-smooth), background-color var(--m-fast) var(--ease-smooth), border-color var(--m-fast) var(--ease-smooth), box-shadow var(--m-base) var(--ease-smooth), transform var(--m-base) var(--m-out);
}

/* ---------- 19. Buscadores sueltos (fuera de .campo): mismo campo que el resto del sistema ---------- */
#hz-buscar { padding: 10px 14px; border: 1.5px solid var(--f-bd); border-radius: var(--r-campo); background-color: var(--f-bg); color: var(--texto); font: inherit; font-size: .92rem; line-height: 1.4; box-shadow: var(--sh-1);
  transition: border-color var(--m-fast) var(--m-std), box-shadow var(--m-base) var(--m-std), background-color var(--m-fast) var(--m-std); }
#hz-buscar:hover { border-color: var(--f-bd-h); }
#hz-buscar:focus { outline: none; border-color: var(--navy-2); box-shadow: 0 0 0 4px var(--f-ring); background-color: var(--f-bg); }
:root[data-tema="oscuro"] #hz-buscar:focus { border-color: var(--navy-3); }

/* ---------- 20. Mensajes y notificaciones: envío fallido y lectura en bloque ---------- */
.cm-fallo { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin: 0 0 14px; }
.cm-fallo > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cm-fallo small { color: inherit; opacity: .8; overflow-wrap: anywhere; }
.cm-tabla td .cm-estado + small { display: block; margin-top: 2px; color: var(--suave); }

/* ---------- 21. Informes: planilla diaria · Horarios: días híbridos ---------- */
.inf-planilla { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.inf-planilla label { flex: 1 0 100%; font-size: .78rem; font-weight: 600; color: var(--suave); }
.inf-planilla input[type="date"] { flex: 1 1 130px; min-width: 0; padding: 9px 12px; border: 1.5px solid var(--f-bd); border-radius: var(--r-campo); background: var(--f-bg); color: var(--texto); font: inherit; font-size: .9rem; box-shadow: var(--sh-1); }
.inf-planilla input[type="date"]:focus { outline: none; border-color: var(--navy-2); box-shadow: 0 0 0 4px var(--f-ring); }
.inf-planilla .btn { flex: 1 0 100%; }
.hz-hibrido { margin: 14px 0 0; padding: 12px 16px 14px; border: 1px solid var(--borde); border-radius: 12px; }
.hz-hibrido legend { display: flex; align-items: center; gap: 6px; padding: 0 8px; font-size: .82rem; font-weight: 700; color: var(--navy-2-tx); }
.hz-hib-dias { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.hz-hib { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1.5px solid var(--f-bd); border-radius: 99px; background: var(--f-bg); font-size: .86rem; cursor: pointer; transition: border-color var(--m-fast) var(--ease-smooth), background-color var(--m-fast) var(--ease-smooth); }
.hz-hib:hover { border-color: var(--f-bd-h); }
.hz-hib:has(input:checked) { border-color: var(--navy-2); background: var(--navy-claro); color: var(--navy-tx); font-weight: 600; }
.hz-hibrido small { color: var(--suave); font-size: .78rem; }

/* ---------- 22. Recordatorio de ingreso (aviso persistente dentro de la página) ---------- */
.recordatorio { position: fixed; top: 12px; left: 50%; z-index: 90; display: flex; align-items: center; gap: 12px; width: min(560px, calc(100vw - 24px)); padding: 12px 16px; transform: translateX(-50%);
  border: 1px solid color-mix(in srgb, var(--amber) 45%, var(--borde)); border-left-width: 5px; border-radius: 14px; background: var(--warn-bg); color: var(--warn-tx); box-shadow: var(--sh-3); animation: m-recordatorio 2s ease-in-out infinite; }
.recordatorio .ic { flex: none; width: 22px; height: 22px; }
.recordatorio > div { flex: 1; min-width: 0; font-size: .92rem; line-height: 1.4; }
.recordatorio .btn { flex: none; background: var(--amber); }
@keyframes m-recordatorio { 0%, 100% { box-shadow: var(--sh-3); } 50% { box-shadow: var(--sh-3), 0 0 0 5px color-mix(in srgb, var(--amber) 28%, transparent); } }
@media (max-width: 520px) { .recordatorio { flex-wrap: wrap; } .recordatorio .btn { width: 100%; } }

/* ---------- 23. Banner «Activar alertas de escritorio» ---------- */
.alertas-banner { position: fixed; left: 50%; bottom: 14px; z-index: 89; display: flex; align-items: center; gap: 12px 14px; flex-wrap: wrap; width: min(820px, calc(100vw - 24px)); padding: 12px 16px; transform: translateX(-50%);
  border: 1px solid color-mix(in srgb, var(--navy-2) 30%, var(--borde)); border-radius: 16px; background: var(--sf-ffffff); color: var(--texto); box-shadow: var(--sh-3); }
.alertas-banner .ic { flex: none; width: 22px; height: 22px; color: var(--navy-2); }
.alertas-txt { flex: 1 1 280px; min-width: 0; font-size: .9rem; line-height: 1.4; }
.alertas-acciones { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.alertas-acciones .btn { text-decoration: none; }
.alertas-estado { display: block; margin-top: 4px; font-size: .84rem; color: var(--suave); }
.alertas-estado:empty { display: none; }

/* ---------- 24. Fase 4: Centro de Mando con menú lateral agrupado y Resumen en cuadrícula ----------
   Solo presentación: los botones del menú siguen siendo .adm-tab con data-sub (admin-centro.js decide qué se abre) y los paneles siguen siendo hijos directos de #vista-admin,
   así que el menú se coloca con la cuadrícula de #vista-admin y no hubo que mover ningún panel. Para revertir: borrar esta sección y restaurar el HTML anterior. */
#vista-admin:not(.oculto) { display: grid; grid-template-columns: 252px minmax(0, 1fr); column-gap: 20px; align-items: start; }
#vista-admin > .adm-sub { grid-column: 2; min-width: 0; }
.adm-hamb { display: none; }

.adm-nav { grid-column: 1; grid-row: 1 / span 40; position: sticky; top: 14px; max-height: calc(100vh - 28px); overflow-y: auto; scrollbar-width: thin; padding: 12px; border: 1px solid var(--borde-suave); border-radius: 20px; background: var(--sf-ffffff); box-shadow: var(--sh-2); }
:root[data-tema="oscuro"] .adm-nav { border-color: var(--borde); }
.adm-nav-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px 8px 10px; }
.adm-nav-cab b { font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--suave); }
.adm-colapsar { display: grid; place-items: center; flex: none; width: 30px; height: 30px; padding: 0; border: 1px solid var(--borde-suave); border-radius: 9px; background: transparent; color: var(--suave); cursor: pointer; transition: background-color var(--m-fast) var(--ease-smooth), color var(--m-fast) var(--ease-smooth), transform var(--m-base) var(--m-out); }
.adm-colapsar:hover { background: var(--row-hover); color: var(--navy-tx); }
.adm-colapsar .ic { width: 16px; height: 16px; transition: transform var(--m-slow) var(--m-out); }

.adm-grupo { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--borde-suave); }
.adm-grupo:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.adm-grupo-tit { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 10px 5px; font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--suave); }
.adm-grupo-tit .ic { width: 14px; height: 14px; }
.adm-grupo:not(:has(.adm-tab:not(.oculto))) { display: none; } /* si un módulo apagado deja vacía una categoría, desaparece entera */
.adm-grupo:has(.adm-tab.activo) .adm-grupo-tit { color: var(--navy-2-tx); }

#adm-tabs .adm-tab { position: relative; display: flex; align-items: center; justify-content: flex-start; gap: 11px; width: 100%; padding: 9px 12px; border-radius: 12px; font-size: .9rem; font-weight: 600; line-height: 1.25; text-align: left; white-space: normal; color: var(--texto); background: transparent; }
#adm-tabs .adm-tab .ic { flex: none; width: 18px; height: 18px; color: var(--suave); transition: color var(--m-fast) var(--ease-smooth); }
#adm-tabs .adm-tab:hover:not(.activo) { background: var(--row-hover); color: var(--navy-tx); }
#adm-tabs .adm-tab:hover:not(.activo) .ic { color: var(--navy-2-tx); }
#adm-tabs .adm-tab.activo { background: var(--grad); color: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .25), 0 8px 18px -10px color-mix(in srgb, var(--navy) 70%, transparent); }
#adm-tabs .adm-tab.activo .ic { color: #fff; }
#adm-tabs .adm-tab .dt-cuenta { margin-left: auto; }
#adm-tabs .adm-tab:focus-visible, .adm-colapsar:focus-visible { outline: 2px solid color-mix(in srgb, var(--navy-3) 85%, transparent); outline-offset: 2px; }

/* Escritorio: el menú se contrae a solo íconos (se recuerda la preferencia) */
@media (min-width: 1025px) {
  #vista-admin.adm-colapsado:not(.oculto) { grid-template-columns: 72px minmax(0, 1fr); }
  .adm-colapsado .adm-nav { padding: 10px 8px; }
  .adm-colapsado .adm-nav-cab { justify-content: center; padding: 2px 0 8px; }
  .adm-colapsado .adm-nav-cab b, .adm-colapsado .adm-grupo-tit { display: none; }
  .adm-colapsado .adm-colapsar .ic { transform: rotate(180deg); }
  .adm-colapsado .adm-grupo { margin-top: 8px; padding-top: 8px; }
  .adm-colapsado #adm-tabs .adm-tab { justify-content: center; padding: 11px 0; font-size: 0; gap: 0; }
  .adm-colapsado #adm-tabs .adm-tab .ic { width: 21px; height: 21px; }
  .adm-colapsado #adm-tabs .adm-tab .dt-cuenta { position: absolute; top: 2px; right: 4px; margin: 0; padding: 1px 5px; font-size: .62rem; }
}

/* Teléfono y tableta: el menú pasa a un cajón lateral que se abre con la hamburguesa */
@media (max-width: 1024px) {
  #vista-admin:not(.oculto) { display: block; }
  .adm-hamb { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0 0 14px; justify-content: flex-start; padding: 11px 14px; font-weight: 600; }
  .adm-hamb span { color: var(--suave); font-weight: 500; }
  .adm-hamb b { margin-left: auto; padding: 2px 10px; border-radius: 99px; background: var(--navy-claro); color: var(--navy-2-tx); font-size: .82rem; }
  .adm-nav { position: fixed; z-index: 80; inset: 0 auto 0 0; width: min(312px, 86vw); max-height: none; padding: 16px 12px; border-radius: 0 22px 22px 0; transform: translateX(-105%); visibility: hidden; transition: transform var(--m-slow) var(--m-out), visibility 0s linear var(--m-slow); }
  .adm-menu-abierto .adm-nav { transform: none; visibility: visible; transition: transform var(--m-slow) var(--m-out), visibility 0s; box-shadow: 14px 0 44px -10px rgba(15, 23, 42, .45); }
  .adm-menu-abierto:not(.oculto)::before { content: ''; position: fixed; inset: 0; z-index: 79; background: rgba(15, 23, 42, .42); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: m-fade var(--m-base) var(--ease-smooth) both; }
}

/* ----- Resumen: indicadores, atención requerida y accesos por categoría ----- */
.res-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.res-cab .adm-tit { margin: 0 0 2px; }
.res-cab .imp-sub { margin: 0; }
#adm-stats { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.adm-stat strong { margin-top: 1px; font-size: .84rem; font-weight: 700; letter-spacing: -.005em; color: var(--text-strong); }
.adm-stat small { margin-top: 1px; }
.adm-stat.adm-warn span { background: var(--warn-bg); color: var(--warn-tx); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 26%, transparent); }
.adm-stat.adm-warn b { color: var(--warn-tx); }
.adm-stat.adm-err span { background: var(--err-bg); color: var(--err-tx); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ruby) 26%, transparent); }
.adm-stat.adm-err b { color: var(--err-tx); }

.res-atencion { margin-bottom: 8px; padding: 16px 18px; }
.res-aten-tit { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 1rem; }
.res-aten-tit .ic { width: 20px; height: 20px; color: var(--amber); }
.res-aten-tit.ok { margin: 0 0 4px; color: var(--ok-tx); } .res-aten-tit.ok .ic { color: var(--emerald); }
.res-atencion .imp-sub { margin: 0; }
.res-aten-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.res-aten-lista li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--amber) 28%, transparent); border-radius: 12px; background: var(--warn-bg); color: var(--warn-tx); font-size: .9rem; }
.res-aten-lista li.err { border-color: color-mix(in srgb, var(--ruby) 28%, transparent); background: var(--err-bg); color: var(--err-tx); }
.res-aten-lista li > span:nth-child(2) { flex: 1; min-width: 0; }
.res-aten-ico .ic { width: 18px; height: 18px; }

.res-grupos { display: block; }
.res-grupo { margin-top: 24px; }
.res-grupo-tit { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: .74rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--suave); }
.res-grupo-tit .ic { width: 15px; height: 15px; }
.res-grupo .adm-grid { grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 14px; }
.res-grupo .adm-card { padding: 18px; border-radius: 18px; }
@media (max-width: 640px) {
  .res-aten-lista { grid-template-columns: 1fr; } .res-cab { flex-wrap: wrap; }
  #adm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .adm-stat { padding: 12px 14px; } #adm-stats .adm-stat b { font-size: 1.5rem; } #adm-stats .adm-stat span { width: 30px; height: 30px; margin-bottom: 6px; }
}

/* ---------- 25. Inicio «Comunidad»: mi día a la izquierda, muro al centro, equipo y fechas a la derecha ----------
   Solo presentación: los ids y las clases que usa el JS (hero-*, anillo, cal, horario, celes, anuncios-lista) no cambian.
   Para revertir: borrar esta sección y volver al bloque «.cols» del dashboard.html. */
.comunidad { display: grid; grid-template-columns: minmax(270px, 296px) minmax(0, 1fr) minmax(270px, 296px); gap: 24px; align-items: start; }
.comunidad > * { min-width: 0; }
.comunidad .rail { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

/* El muro: carrusel horizontal con flechas (estilos del tablón en social.css); la columna central se estira hasta el final de las laterales */
.comunidad > .bi-tablon { align-self: stretch; display: flex; flex-direction: column; }
.comunidad #anuncios-lista.tablon-track { flex: 1 1 auto; height: 0; min-height: 520px; }

/* Tableta: la columna derecha pasa debajo y sus tarjetas se reparten en fila */
@media (max-width: 1100px) {
  .comunidad { grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); }
  .comunidad .rail-der { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
}
/* Móvil: una columna; jornada, muro, horario, celebraciones y calendario */
@media (max-width: 760px) {
  .comunidad { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .comunidad .rail { display: contents; }
  .comunidad #anuncios-lista.tablon-track { flex: none; height: 460px; min-height: 0; }
  .comunidad .bi-jornada { order: 1; } .comunidad .bi-tablon { order: 2; } .comunidad .bi-horario { order: 3; } .comunidad .bi-celes { order: 4; } .comunidad .bi-calendario { order: 5; }
}

/* ---------- 26. Portada en una fila: foto con anillo de jornada, saludo, estado del día, fecha y clima ----------
   Solo presentación: conserva los ids hero-* que usa el JS (el aviso del banner sigue en #hero-aviso). Para revertir: borrar esta sección y restaurar el bloque «hero» del dashboard.html. */
/* en Inicio no hay barra superior: la campana, el usuario y el menú viven dentro de la portada (js/admin.js › acomodarCabecera) */
.bz-main.en-inicio .bz-head { display: none; }
.hero.hero-anillo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 14px 24px; border-radius: 22px; margin-bottom: 24px; }
.ha-avatar { position: relative; width: 76px; height: 76px; flex: none; display: grid; place-items: center; }
.ha-anillo { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ha-fondo, .ha-prog { fill: none; stroke-width: 5; }
.ha-fondo { stroke: var(--navy-claro); }
.ha-prog { stroke: var(--navy-2); stroke-linecap: round; transition: stroke-dashoffset .8s cubic-bezier(.4, 0, .2, 1); }
:root[data-tema="oscuro"] .ha-prog { stroke: var(--navy-3); }
.bz-main.en-inicio .hero-anillo .hero-avatar .avatar { width: 54px; height: 54px; font-size: 1.2rem; border: 0; box-shadow: none; }
.hero-anillo .hero-txt { flex: 1 1 260px; min-width: 0; margin: 0; padding: 0; }
.ha-linea { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; }
.hero-anillo .hero-txt h2 { margin: 0; font-size: 1.3rem; line-height: 1.2; }
.hero-anillo .hero-chips { gap: 6px; }
.hero-anillo .hero-txt p { margin: 3px 0 0; max-width: none; font-size: .9rem; line-height: 1.4; }
.ha-lado { align-self: stretch; display: grid; align-content: space-between; justify-items: end; gap: 10px; }
.ha-acciones { display: flex; align-items: center; gap: 10px; }
.ha-fecha-clima { display: grid; justify-items: end; gap: 2px; text-align: right; }
/* controles de la portada con los colores de la tarjeta (no los de la barra oscura) */
.bz-main.en-inicio .hero-anillo .notif-btn, .bz-main.en-inicio .hero-anillo button.quien, .hero-anillo .bz-menu { color: var(--texto); background: var(--navy-claro); border: 1px solid var(--borde); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.bz-main.en-inicio .hero-anillo .notif-btn { width: 40px; height: 40px; }
.bz-main.en-inicio .hero-anillo .notif-btn:hover, .bz-main.en-inicio .hero-anillo button.quien:hover, .hero-anillo .bz-menu:hover { background: var(--row-hover); border-color: color-mix(in srgb, var(--navy-2) 35%, var(--borde)); box-shadow: none; transform: none; }
.bz-main.en-inicio .hero-anillo .notif-btn:focus-visible, .bz-main.en-inicio .hero-anillo button.quien:focus-visible { outline: 2px solid color-mix(in srgb, var(--navy-3) 85%, transparent); outline-offset: 2px; }
.hero-anillo .quien .avatar { width: 32px; height: 32px; }
/* en teléfono se oculta solo el nombre del rol; la regla antigua «.quien span:first-child» también atrapaba la foto (primer hijo de #avatar-yo) y dejaba el botón vacío */
.quien #avatar-yo > .avatar { display: inline-grid; }
.bz-main.en-inicio .hero-anillo .hero-fecha { position: static; padding: 0; border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; color: var(--texto); font-size: .95rem; font-weight: 600; }
.ha-clima { font-size: .85rem; color: var(--suave); }
/* aviso del banner: una tira bajo la fila, con los colores de la plataforma (no de la portada oscura) */
.hero-anillo .hero-aviso { position: static; flex: 1 1 100%; max-width: none; margin-top: 4px; color: var(--navy-2-tx); background: var(--navy-claro); border: 1px solid var(--borde-suave); }
.hero-anillo .hero-aviso.e-celebracion { color: var(--warn-tx); background: var(--warn-bg); border-color: color-mix(in srgb, var(--amber) 35%, transparent); }
.hero-anillo .hero-aviso.e-importante { color: var(--err-tx); background: var(--err-bg); border-color: color-mix(in srgb, var(--ruby) 35%, transparent); }
@media (max-width: 760px) {
  .hero.hero-anillo { padding: 12px 14px; gap: 6px 12px; }
  .ha-avatar { width: 64px; height: 64px; } .bz-main.en-inicio .hero-anillo .hero-avatar .avatar { width: 46px; height: 46px; font-size: 1rem; }
  .hero-anillo .hero-txt { flex: 1 1 0; }
  .hero-anillo .hero-txt h2 { font-size: 1.1rem; }
  /* en teléfono: primero la fila de controles (hamburguesa a la izquierda; campana y usuario a la derecha), luego la foto con el saludo y al final fecha y clima */
  .ha-lado { display: contents; }
  .ha-acciones { order: -1; flex: 1 1 100%; justify-content: flex-end; } .ha-acciones .bz-menu { margin-right: auto; }
  .ha-fecha-clima { order: 3; flex: 1 1 100%; display: flex; justify-content: space-between; text-align: left; }
}

/* ---------- 27. Tablón vivo: entrada fluida, emojis con movimiento, zoom lento en imágenes y brillo del título ----------
   Todo con transform y opacity (CSS puro). La clase «activo» la pone js/api.js (vigilarTablon) a la tarjeta que ocupa el carrusel; quitarla y volver a ponerla repite la entrada.
   Se respeta la preferencia «sin animaciones» de la plataforma (tema.css) y prefers-reduced-motion del sistema. Para revertir: borrar esta sección. */
@keyframes an-sube { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes an-aparece { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
@keyframes an-kenburns { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.09) translate3d(-1.2%, -1%, 0); } }
@keyframes an-brillo { 0% { transform: translateX(-130%); opacity: 1; } 55% { transform: translateX(130%); opacity: 1; } 56%, 100% { transform: translateX(130%); opacity: 0; } }
@keyframes emoji-wave { 0%, 60%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(16deg); } 20%, 40% { transform: rotate(-10deg); } 50% { transform: rotate(8deg); } }
@keyframes emoji-bounce { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-24%); } 60% { transform: translateY(0); } 75% { transform: translateY(-8%); } }
@keyframes emoji-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } }
@keyframes emoji-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

.emoji { display: inline-block; transform-origin: 70% 75%; will-change: transform; }
/* los emojis solo se mueven en la tarjeta activa (las demás quedan quietas) y en el banner de la portada */
.post.activo .emoji-wave, .hero-aviso .emoji-wave { animation: emoji-wave 2.6s ease-in-out infinite; }
.post.activo .emoji-bounce, .hero-aviso .emoji-bounce { animation: emoji-bounce 1.5s ease-in-out infinite; }
.post.activo .emoji-pulse, .hero-aviso .emoji-pulse { animation: emoji-pulse 1.9s ease-in-out infinite; }
.post.activo .emoji-spin, .hero-aviso .emoji-spin { transform-origin: 50% 55%; animation: emoji-spin 6s linear infinite; }

/* entrada escalonada cada vez que una tarjeta llega al centro del carrusel */
#anuncios-lista .post.vivo.activo { animation: an-aparece .45s cubic-bezier(.22, 1, .36, 1) both; }
.post.vivo.activo .post-titulo { animation: an-sube .6s cubic-bezier(.22, 1, .36, 1) .05s both; }
.post.vivo.activo .post-html, .post.vivo.activo .post-texto { animation: an-sube .6s cubic-bezier(.22, 1, .36, 1) .18s both; }
.post.vivo.activo .post-media { animation: an-sube .7s cubic-bezier(.22, 1, .36, 1) .3s both; }
/* imagen viva: zoom y paneo muy lentos (el recuadro recorta, la imagen no se sale) */
.post.vivo.activo .media-img img { animation: an-kenburns 26s ease-in-out infinite alternate; will-change: transform; }
/* destacado: una franja de luz cruza el título cada pocos segundos (solo transform: una capa que se desliza, sin recortar el texto ni los emojis) */
.post.anim-destacado .post-titulo, .anim-previa.anim-destacado .post-titulo { position: relative; overflow: hidden; border-radius: 6px; }
.post.anim-destacado .post-titulo::after, .anim-previa.anim-destacado .post-titulo::after { content: ''; position: absolute; inset: 0; pointer-events: none; transform: translateX(-130%); opacity: 0;
  background: linear-gradient(100deg, transparent 38%, color-mix(in srgb, var(--navy-3) 30%, transparent) 50%, transparent 62%); }
.post.anim-destacado.activo .post-titulo::after, .anim-previa.anim-destacado .post-titulo::after { animation: an-brillo 4.2s ease-in-out .9s infinite; }

/* formulario del admin: selectores de movimiento y vista previa */
.anim-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 16px; }
.anim-campos select { width: 100%; }
.anim-previa { grid-column: 1 / -1; display: flex; align-items: center; min-height: 52px; padding: 12px 16px; border-radius: 12px; border: 1px dashed var(--borde); background: var(--navy-claro); box-shadow: none; }
.anim-previa .anim-previa-t { margin: 0; }
.anim-previa .emoji-wave { animation: emoji-wave 2.6s ease-in-out infinite; } .anim-previa .emoji-bounce { animation: emoji-bounce 1.5s ease-in-out infinite; }
.anim-previa .emoji-pulse { animation: emoji-pulse 1.9s ease-in-out infinite; } .anim-previa .emoji-spin { animation: emoji-spin 6s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .emoji, .post.vivo, .post.vivo *, .anim-previa, .anim-previa * { animation: none !important; }
  .post.anim-destacado .post-titulo::after, .anim-previa.anim-destacado .post-titulo::after { display: none; }
}

/* ---------- 28. Banner: selector de emojis animados y emojis en imagen ----------
   Los emojis del catálogo se muestran como imagen animada (WebP del CDN de Noto Emoji); el selector enseña el carácter y solo anima al pasar el cursor. Para revertir: borrar esta sección. */
.emoji-anim { display: inline-block; width: 1.5em; height: 1.5em; margin: -.25em .08em; vertical-align: middle; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.hero-aviso .emoji-anim { width: 1.45em; height: 1.45em; }
.bn-caja { position: relative; }
.bn-caja textarea { padding-right: 52px; }
.bn-emoji-btn { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--borde); border-radius: 10px; background: var(--navy-claro); color: var(--navy-2-tx); cursor: pointer;
  transition: background-color var(--m-fast, .15s) ease, border-color var(--m-fast, .15s) ease, transform var(--m-fast, .15s) ease; }
.bn-emoji-btn:hover, .bn-emoji-btn[aria-expanded="true"] { background: var(--row-hover); border-color: color-mix(in srgb, var(--navy-2) 40%, var(--borde)); }
.bn-emoji-btn:active { transform: scale(.94); }
.bn-emoji-btn:focus-visible, .emj-tab:focus-visible, .emj-item:focus-visible { outline: 2px solid color-mix(in srgb, var(--navy-3) 85%, transparent); outline-offset: 2px; }
.bn-emoji-btn .ic { width: 20px; height: 20px; }
.emj-panel { position: absolute; z-index: 30; top: calc(100% + 8px); right: 0; width: min(380px, 100%); padding: 10px; border: 1px solid var(--borde-suave); border-radius: 16px; background: var(--sf-ffffff); box-shadow: var(--sh-3); transform-origin: top right; }
:root[data-tema="oscuro"] .emj-panel { background: var(--card); border-color: var(--borde); }
.emj-tabs { display: flex; gap: 4px; padding: 0 0 8px; margin-bottom: 8px; border-bottom: 1px solid var(--borde-suave); overflow-x: auto; scrollbar-width: none; }
.emj-tabs::-webkit-scrollbar { display: none; }
.emj-tab { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 6px 10px; border: 0; border-radius: 99px; background: transparent; color: var(--suave); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.emj-tab b { font-weight: 600; }
.emj-tab:not(.activo) b { display: none; } /* solo la categoría activa muestra su nombre; las demás, el ícono (el nombre sale como ayuda) */
.emj-tab:hover { background: var(--row-hover); color: var(--navy-tx); }
.emj-tab.activo { background: var(--grad); color: #fff; }
.emj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 4px; max-height: 232px; overflow-y: auto; padding: 2px; overscroll-behavior: contain; }
.emj-item { display: grid; place-items: center; height: 44px; padding: 0; border: 0; border-radius: 12px; background: transparent; font-size: 1.55rem; line-height: 1; cursor: pointer; transition: background-color .15s ease, transform .15s ease; }
.emj-item:hover { background: var(--navy-claro); transform: scale(1.08); }
.emj-item:active { transform: scale(.94); }
.emj-item .emoji-anim { width: 32px; height: 32px; margin: 0; }
.emj-nota { min-height: 1.2em; margin: 6px 2px 0; font-size: .8rem; color: var(--err-tx); }
@media (max-width: 480px) { .emj-panel { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .emj-item:hover, .bn-emoji-btn:active, .emj-item:active { transform: none; } }

/* ---------- 29. Tarjetas de celebración PREMIUM (cumpleaños y aniversario) + panel «Celebraciones del tablón» ----------
   Póster con 4 diseños de fondo (globos · confeti · estrellas · trofeo), aro de luz giratorio en el avatar, brillo que cruza la tarjeta, emojis animados y partículas.
   Estructura: js/celebraciones-tarjeta.js. TODO el movimiento es transform/opacity, solo corre en la tarjeta «.activo» (la que ocupa el carrusel o la vista previa del panel) y respeta
   «sin animaciones» (tema.css) y prefers-reduced-motion. Para revertir: borrar esta sección y js/celebraciones-tarjeta.js. */
.post-cumple { container-type: inline-size; padding: 0 !important; overflow: hidden !important; border: 1px solid var(--borde-suave); }
.cumple-lienzo { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 18px 22px 76px; flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; color: #0f2b46;
  background: linear-gradient(180deg, color-mix(in srgb, var(--navy-3) 14%, #ffffff) 0%, #f4f8fd 62%, #ffffff 100%); }
.cel-fondo, .cel-brillo, .cel-emojis { position: absolute; inset: 0; pointer-events: none; }
.cel-fondo { z-index: -2; overflow: hidden; }
.cel-svg { position: absolute; inset: auto 0 0 0; width: 100%; height: 56%; }
.cel-emojis { z-index: 0; }
.cumple-lienzo > :not(.cel-fondo):not(.cel-brillo):not(.cel-emojis) { position: relative; z-index: 1; }

/* --- texto --- */
.cumple-logo { height: 30px; max-width: 150px; width: auto; object-fit: contain; margin: 0 0 6px; }
.cumple-feliz { display: flex; flex-direction: column; align-items: center; margin: 0; line-height: .9; }
.cumple-script { font-family: 'Dancing Script', 'Segoe Script', cursive; font-size: 2.1rem; font-weight: 700; line-height: 1.15; color: var(--navy-2); margin-bottom: -.1rem; transform: rotate(-4deg); }
.cumple-grande { font-family: 'Inter', system-ui, sans-serif; font-weight: 900; font-size: clamp(1.7rem, 7.2cqi, 2.6rem); letter-spacing: -.03em; text-transform: uppercase; color: var(--navy-2); }
.cumple-nombre { margin: 4px 0 0; font-family: 'Dancing Script', 'Segoe Script', cursive; font-weight: 700; font-size: clamp(2.4rem, 10cqi, 3.6rem); line-height: 1.05; color: var(--navy-2); overflow-wrap: anywhere; }
.cumple-fecha, .aniv-texto { margin: 2px 0 0; font-size: .95rem; font-weight: 700; color: var(--navy-2); }
.aniv-texto { font-size: 1rem; font-weight: 500; } .aniv-texto b { font-weight: 800; }
.cumple-msg { margin: 10px auto 0; max-width: 34ch; font-size: .78rem; font-weight: 500; letter-spacing: .12em; line-height: 1.7; text-transform: uppercase; color: #1e3a52; }
.cumple-cierre { margin: 10px 0 0; font-size: .8rem; font-weight: 800; font-style: italic; letter-spacing: .1em; text-transform: uppercase; color: #0f2b46; }
.post-cumple .post-acciones { margin: 0 !important; padding: 10px 16px 12px; border-top: 1px solid var(--borde-suave); background: var(--sf-ffffff); }
:root[data-tema="oscuro"] .post-cumple .post-acciones { background: var(--card); }

/* --- avatar con aro de luz --- */
.cumple-avatar { position: relative; margin: 14px 0 6px; width: 148px; height: 148px; flex: none; border-radius: 50%; padding: 6px; background: #ffffff; box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--navy-2) 60%, transparent); }
.cel-aro { position: absolute; inset: -5px; border-radius: 50%; z-index: -1; background: conic-gradient(from 0deg, var(--navy-3), #ffffff 18%, #d9a636 36%, var(--navy-3) 54%, #ffffff 72%, #d9a636 90%, var(--navy-3));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); }
.cumple-foto { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #e6eef7; }
.cumple-iniciales { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: var(--grad); color: #ffffff; font-family: 'Inter', system-ui, sans-serif; font-weight: 800; font-size: 3.2rem; letter-spacing: .02em; }
.aniv-sello { position: absolute; right: -12px; bottom: -4px; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; line-height: 1; text-align: center; color: #3b2a05;
  background: radial-gradient(circle at 35% 30%, #fbe28a, #d9a636); border: 3px solid #ffffff; box-shadow: 0 8px 16px -6px rgba(120, 80, 0, .55); }
.aniv-sello b { font-size: 1.4rem; font-weight: 900; } .aniv-sello small { margin-top: -10px; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }

/* --- emojis animados (imágenes del CDN o, sin internet, el carácter) --- */
.cel-emoji { position: absolute; display: block; width: 46px; height: 46px; line-height: 1; font-size: 2.4rem; }
.cel-emoji .emoji-anim { width: 46px; height: 46px; margin: 0; }
.post-cumpleanos .cel-emoji.e1 { left: 12px; top: 96px; } .post-cumpleanos .cel-emoji.e2 { right: 12px; top: 178px; }
.post-aniversario .cel-emoji.e1 { left: 12px; top: 170px; } .post-aniversario .cel-emoji.e2 { right: 12px; top: 96px; }

/* --- brillo que cruza la tarjeta --- */
.cel-brillo { z-index: 2; overflow: hidden; }
.cel-brillo::before { content: ''; position: absolute; top: -20%; bottom: -20%; left: 0; width: 38%; transform: translateX(-130%) skewX(-18deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); }

/* ===== Diseño: GLOBOS (cumpleaños por defecto) ===== */
.fondo-globos .cumple-lienzo { background:
  linear-gradient(115deg, transparent 0 18%, color-mix(in srgb, var(--navy-3) 9%, transparent) 18% 34%, transparent 34% 52%, color-mix(in srgb, var(--navy-2) 7%, transparent) 52% 70%, transparent 70%),
  linear-gradient(245deg, color-mix(in srgb, var(--navy-3) 10%, transparent) 0 22%, transparent 22% 58%, color-mix(in srgb, var(--navy-2) 8%, transparent) 58% 80%, transparent 80%),
  linear-gradient(180deg, color-mix(in srgb, var(--navy-3) 16%, #ffffff) 0%, #f4f8fd 62%, #ffffff 100%); }
.cel-svg .gb { stroke: color-mix(in srgb, var(--navy-2) 35%, #ffffff); stroke-width: 1; }
.cel-svg .gb1 { fill: color-mix(in srgb, var(--navy-3) 78%, #ffffff); } .cel-svg .gb2 { fill: color-mix(in srgb, #e85d9a 60%, #ffffff); } .cel-svg .gb3 { fill: color-mix(in srgb, #f2b630 70%, #ffffff); }
.cel-svg .gl { fill: rgba(255, 255, 255, .62); } .cel-svg .gn { fill: color-mix(in srgb, var(--navy-2) 55%, #ffffff); }
.cel-svg .gc { fill: none; stroke: color-mix(in srgb, var(--navy-2) 40%, #ffffff); stroke-width: 1.3; stroke-linecap: round; }
.cel-svg .es { fill: #d9a636; }

/* ===== Diseño: CONFETI ===== */
.fondo-confeti .cumple-lienzo { background: linear-gradient(180deg, #fff6fb 0%, #fdf1ff 40%, #eef4ff 100%); }
.fondo-confeti .cumple-script { color: #d6336c; } .fondo-confeti .cumple-grande { color: var(--navy-2); }
.cel-confeti { position: absolute; inset: 0; }
.cel-confeti i { position: absolute; top: -14px; width: 9px; height: 15px; border-radius: 2px; opacity: .95; }
.cel-confeti .cf0 { background: #f45b69; } .cel-confeti .cf1 { background: #ffb703; } .cel-confeti .cf2 { background: #3a86ff; } .cel-confeti .cf3 { background: #06d6a0; } .cel-confeti .cf4 { background: #8338ec; } .cel-confeti .cf5 { background: #ff7bb0; border-radius: 50%; width: 10px; height: 10px; }

/* ===== Diseño: ESTRELLAS (noche dorada) ===== */
.fondo-estrellas .cumple-lienzo { color: #eaf2ff; background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--navy-3) 55%, #0b1630) 0%, #0b1630 70%); }
.fondo-estrellas .cumple-script { color: #f6d778; } .fondo-estrellas .cumple-grande, .fondo-estrellas .cumple-nombre, .fondo-estrellas .cumple-fecha, .fondo-estrellas .aniv-texto { color: #ffffff; }
.fondo-estrellas .cumple-msg { color: #d3e0f5; } .fondo-estrellas .cumple-cierre { color: #f6d778; }
.fondo-estrellas .cumple-avatar { background: #0b1630; }
.cel-rayos { position: absolute; left: 50%; top: 190px; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; opacity: .5;
  background: repeating-conic-gradient(from 0deg, rgba(246, 215, 120, .38) 0 5deg, transparent 5deg 15deg); -webkit-mask: radial-gradient(circle, #000 0, transparent 66%); mask: radial-gradient(circle, #000 0, transparent 66%); }
.cel-estrellas { position: absolute; inset: 0; }
.cel-st { position: absolute; width: 14px; height: 14px; background: #f6d778; clip-path: polygon(50% 0, 61% 35%, 98% 38%, 68% 59%, 79% 95%, 50% 73%, 21% 95%, 32% 59%, 2% 38%, 39% 35%); transform: scale(var(--s, 1)); }

/* ===== Diseño: TROFEO (aniversario por defecto) ===== */
.fondo-trofeo .cumple-lienzo { background:
  linear-gradient(115deg, transparent 0 20%, color-mix(in srgb, #d9a636 11%, transparent) 20% 36%, transparent 36% 54%, color-mix(in srgb, var(--navy-3) 8%, transparent) 54% 72%, transparent 72%),
  linear-gradient(180deg, color-mix(in srgb, #d9a636 22%, #ffffff) 0%, #fffaf0 58%, #ffffff 100%); }
.fondo-trofeo .cumple-script { color: #b07d12; }
.fondo-trofeo .cumple-avatar { box-shadow: 0 0 0 3px color-mix(in srgb, #d9a636 60%, #ffffff), 0 14px 30px -12px color-mix(in srgb, #b07d12 60%, transparent); }
.cel-trofeo-marca { inset: auto 0 0 0; height: 46%; opacity: .8; }
.cel-trofeo-marca .tr { fill: color-mix(in srgb, #d9a636 38%, transparent); stroke: color-mix(in srgb, #b07d12 45%, transparent); stroke-width: 2; }
.cel-trofeo-marca .hojas path { stroke: color-mix(in srgb, #b07d12 55%, transparent); } .cel-trofeo-marca .hojas ellipse { fill: color-mix(in srgb, #d9a636 55%, transparent); }
.cel-trofeo-marca .es { fill: #d9a636; }

/* ===== MOVIMIENTO (solo la tarjeta activa; sin «sin animaciones» ni movimiento reducido) ===== */
@keyframes cel-flota { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(calc(var(--a, 10px) * -1)) rotate(1.5deg); } }
@keyframes cel-cae { 0% { transform: translate3d(0, -20px, 0) rotate(0); opacity: 0; } 8% { opacity: 1; } 100% { transform: translate3d(var(--x, 0), 760px, 0) rotate(var(--r, 360deg)); opacity: .9; } }
@keyframes cel-titila { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes cel-gira { to { transform: rotate(360deg); } }
@keyframes cel-barre { 0% { transform: translateX(-130%) skewX(-18deg); } 55%, 100% { transform: translateX(380%) skewX(-18deg); } }
@keyframes cel-late { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@keyframes cel-sube { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-9px) rotate(4deg); } }
@keyframes cel-mece { 0%, 100% { transform: rotate(-2.2deg); } 50% { transform: rotate(2.2deg); } }
@keyframes cel-brilla-svg { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .post-cumple.activo .cel-flota { transform-box: fill-box; transform-origin: 50% 100%; animation: cel-flota 5.5s ease-in-out infinite; animation-delay: calc(var(--d, 0s) * -1); }
  .post-cumple.activo .cel-cae { animation: cel-cae var(--t, 6s) linear infinite; animation-delay: calc(var(--d, 0s) * -1); will-change: transform; }
  .post-cumple.activo .cel-titila { transform-box: fill-box; transform-origin: 50% 50%; animation: cel-titila 2.8s ease-in-out infinite; animation-delay: calc(var(--d, 0s) * -1); }
  .post-cumple.activo .cel-gira { animation: cel-gira 80s linear infinite; }
  .post-cumple.activo .cel-aro { animation: cel-gira 7s linear infinite; }
  .post-cumple.activo .cel-brillo::before { animation: cel-barre 6.5s ease-in-out 1.2s infinite; }
  .post-cumple.activo .cel-late { animation: cel-late 2.4s ease-in-out infinite; }
  .post-cumple.activo .cel-emoji { animation: cel-sube 3.6s ease-in-out infinite; } .post-cumple.activo .cel-emoji.e2 { animation-delay: -1.8s; }
  .post-cumple.activo .cel-mece { transform-box: fill-box; transform-origin: 50% 100%; animation: cel-mece 4.5s ease-in-out infinite; } .post-cumple.activo .hojas-d { animation-delay: -2.2s; }
  .post-cumple.activo .cel-brilla-svg { animation: cel-brilla-svg 3.5s ease-in-out infinite; }
  .post-cumple.activo .cumple-avatar { animation: an-aparece .6s cubic-bezier(.22, 1, .36, 1) .1s both; }
  .post-cumple.activo .cumple-nombre, .post-cumple.activo .cumple-feliz { animation: an-sube .6s cubic-bezier(.22, 1, .36, 1) both; }
}
@media (max-width: 760px) {
  .comunidad #anuncios-lista.tablon-track:has(.post-cumple) { height: 700px; }
  .cumple-avatar { width: 124px; height: 124px; } .cumple-iniciales { font-size: 2.6rem; }
  .cel-emoji, .cel-emoji .emoji-anim { width: 38px; height: 38px; }
}

/* ===== Panel: Celebraciones del tablón (Admin › Mensajes y notificaciones) ===== */
.cm-ce-fila { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.cm-ce-fila .cm-tit { margin-bottom: 4px; } .cm-ce-fila .imp-sub { margin: 0; }
.cm-ce-acciones { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 14px 0 8px; }
.cm-ce-acciones small { color: var(--suave); }
.cm-ce-acc { min-width: 150px; text-align: right; } .cm-ce-acc .btn { margin: 2px 0 2px 6px; white-space: nowrap; }
.cm-ce-fecha small { display: block; color: var(--suave); }
.cm-ce-editor { scroll-margin-top: 16px; }
.cm-ce-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: 24px; align-items: start; }
.cm-ce-campos { display: grid; gap: 14px; min-width: 0; }
.cm-ce-campos .campo { margin: 0; } .cm-ce-campos textarea { width: 100%; resize: vertical; }
.cm-ce-fondos { border: 0; padding: 0; min-width: 0; } .cm-ce-fondos legend { padding: 0; margin-bottom: 6px; font-weight: 600; font-size: .9rem; }
.cm-ce-sw-fila { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cm-ce-sw { position: relative; display: grid; gap: 6px; justify-items: center; padding: 8px 6px; border: 1px solid var(--borde); border-radius: 12px; cursor: pointer; font-size: .8rem; font-weight: 600; text-align: center; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.cm-ce-sw input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.cm-ce-sw i { display: block; width: 100%; height: 34px; border-radius: 8px; border: 1px solid var(--borde-suave); }
.cm-ce-sw .m-globos { background: linear-gradient(160deg, #dcecfb, #ffffff 60%, color-mix(in srgb, var(--navy-3) 45%, #ffffff)); }
.cm-ce-sw .m-confeti { background: linear-gradient(160deg, #fff0f8, #eef4ff); background-image: radial-gradient(#f45b69 2px, transparent 3px), radial-gradient(#3a86ff 2px, transparent 3px), radial-gradient(#ffb703 2px, transparent 3px); background-size: 18px 18px, 22px 22px, 26px 26px; background-position: 2px 4px, 10px 14px, 6px 20px; }
.cm-ce-sw .m-estrellas { background: radial-gradient(circle at 30% 30%, #1e3a6e, #0b1630); } .cm-ce-sw .m-trofeo { background: linear-gradient(160deg, #f6dd9a, #fffaf0 70%); }
.cm-ce-sw:hover { transform: translateY(-1px); } .cm-ce-sw:has(input:checked) { border-color: var(--navy-2); box-shadow: 0 0 0 2px color-mix(in srgb, var(--navy-3) 60%, transparent); }
.cm-ce-sw:has(input:focus-visible) { outline: 2px solid color-mix(in srgb, var(--navy-3) 85%, transparent); outline-offset: 2px; }
.cm-ce-previa { position: sticky; top: 16px; }
.cm-ce-previa .post-cumple { display: flex; flex-direction: column; max-width: 380px; margin: 0 auto; border-radius: 16px; box-shadow: var(--sh-3); }
.cm-ce-previa .cumple-lienzo { padding-bottom: 28px; overflow: hidden; }
.cm-ce-estado { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 900px) { .cm-ce-form { grid-template-columns: 1fr; } .cm-ce-previa { position: static; } }
@media (max-width: 640px) { .cm-ce-fila { flex-direction: column; } .cm-ce-acc { white-space: normal; } .cm-ce-acc .btn { margin: 2px 0; } .cm-ce-sw-fila { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .cm-ce-sw:hover { transform: none; } }

/* ---------- 30. Historial tablón (Admin › Anuncios) y modal de borrado definitivo ----------
   Tabla de auditoría con estado por fila y un botón rojo de borrado físico que pide confirmación en un modal. Para revertir: borrar esta sección. */
.hn-tabla td { vertical-align: top; }
.hn-titulo { min-width: 240px; max-width: 420px; }
.hn-titulo b { display: block; overflow-wrap: anywhere; }
.hn-cont { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; color: var(--suave); }
.hn-eliminada .hn-titulo b { color: var(--suave); text-decoration: line-through; text-decoration-thickness: 1px; }
.hn-eliminada { background: color-mix(in srgb, var(--ruby) 4%, transparent); }
.hn-acc { white-space: nowrap; text-align: right; }
.hn-acc .btn-danger .ic { width: 15px; height: 15px; margin-right: 4px; vertical-align: -3px; }
.modal-hn { width: min(480px, calc(100vw - 32px)); }
.hn-m-aviso { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 12px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--ruby) 30%, transparent); border-radius: 12px; background: var(--err-bg); color: var(--err-tx); }
.hn-m-aviso .ic { flex: none; width: 22px; height: 22px; margin-top: 2px; } .hn-m-aviso p { margin: 0; line-height: 1.5; font-size: .92rem; }
.hn-m-pub { margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; background: var(--navy-claro); overflow-wrap: anywhere; } .hn-m-pub small { display: block; margin-top: 2px; color: var(--suave); }
@media (max-width: 640px) { .hn-acc { white-space: normal; } .hn-titulo { min-width: 180px; } }

#hn-resumen { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* ---------- 31. Vacaciones (Admin) y decisión con saldo ----------
   Tabla de saldos, detalle por persona, calendario mensual y bloque de decisión de vacaciones (saldo, días hábiles, solapamiento). Para revertir: borrar esta sección. */
.vac-tabla td small, .vac-tabla th small { display: block; margin-top: 2px; color: var(--suave); }
.vac-quien { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.vac-quien > span:last-child { min-width: 0; } .vac-quien b { display: block; overflow-wrap: anywhere; } .vac-quien small { display: block; color: var(--suave); }
.vac-quien-g { margin-top: 12px; } .vac-quien-g .avatar, .vac-quien-g img { flex: none; }
.vac-ord { all: unset; cursor: pointer; font: inherit; color: inherit; display: inline-flex; align-items: center; gap: 4px; border-radius: 6px; padding: 0 2px; }
.vac-ord:hover { color: var(--navy-2-tx); } .vac-ord:focus-visible { outline: 2px solid color-mix(in srgb, var(--navy-3) 85%, transparent); outline-offset: 2px; }
.vac-tabla th[aria-sort="ascending"] .vac-ord::after { content: '\25B2'; font-size: .6rem; } .vac-tabla th[aria-sort="descending"] .vac-ord::after { content: '\25BC'; font-size: .6rem; }
.vac-pend b { font-size: 1.05rem; } .vac-bajo b { color: var(--warn-tx); } .vac-alto b { color: var(--err-tx); }
.vac-prog { white-space: nowrap; } .vac-nunca { color: var(--suave); }
.vac-sin { background: color-mix(in srgb, var(--ruby) 4%, transparent); } .vac-rojo { color: var(--err-tx); }
.vac-cab { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-bottom: 16px; }
.vac-saldo { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.vac-saldo .fr-card b { overflow-wrap: anywhere; } .vac-saldo .fr-card.ok b { color: var(--ok-tx); } .vac-saldo .fr-card.warn b { color: var(--warn-tx); }
.vac-forms { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-bottom: 16px; }
.vac-forms .vista-card { margin: 0; } .vac-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.modal-vac { width: min(480px, calc(100vw - 32px)); }
/* calendario mensual */
.vac-cal-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .vac-cal-cab b { font-size: 1.05rem; }
.vac-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.vac-cal-dia-n { text-align: center; font-size: .75rem; font-weight: 600; color: var(--suave); padding: 2px 0; }
.vac-cal-dia { min-height: 64px; padding: 6px 8px; border: 1px solid var(--borde-suave); border-radius: 10px; display: flex; flex-direction: column; gap: 4px; background: var(--card); }
.vac-cal-dia b { font-size: .82rem; font-variant-numeric: tabular-nums; } .vac-cal-dia.fin { background: color-mix(in srgb, var(--navy) 4%, var(--card)); color: var(--suave); }
.vac-cal-dia.fest { background: color-mix(in srgb, var(--ruby) 7%, var(--card)); border-color: color-mix(in srgb, var(--ruby) 25%, transparent); } .vac-cal-dia.hay { border-color: color-mix(in srgb, var(--emerald) 40%, transparent); }
.vac-pill { align-self: flex-start; padding: 1px 8px; border-radius: 99px; font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.vac-pill.ok { background: var(--ok-bg); color: var(--ok-tx); } .vac-pill.warn { background: var(--warn-bg); color: var(--warn-tx); }
.vac-cal-nota { margin: 12px 0 0; }
/* decisión de vacaciones (modal y «Mi equipo») */
.vac-dec { display: grid; gap: 12px; margin: 12px 0; padding: 14px; border: 1px solid var(--borde-suave); border-radius: 14px; background: var(--navy-claro); }
.vac-dec h4 { margin: 0; font-size: .95rem; }
.vac-dec-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.vac-dec-cifras div { padding: 8px 10px; border-radius: 10px; background: var(--card); border: 1px solid var(--borde-suave); } .vac-dec-cifras small { display: block; color: var(--suave); font-size: .72rem; } .vac-dec-cifras b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.vac-dec-cifras .ok b { color: var(--ok-tx); } .vac-dec-cifras .err b { color: var(--err-tx); }
.vac-dec-fechas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; } .vac-dec-fechas .campo { margin: 0; }
.vac-dec-dias { display: flex; flex-wrap: wrap; gap: 4px; } .vac-dec-dias span { padding: 2px 7px; border-radius: 7px; font-size: .72rem; font-variant-numeric: tabular-nums; background: var(--ok-bg); color: var(--ok-tx); }
.vac-dec-dias .no { background: var(--off-bg); color: var(--off-tx); text-decoration: line-through; } .vac-dec-dias .fest { background: var(--err-bg); color: var(--err-tx); text-decoration: none; }
.vac-mini { display: grid; gap: 4px; } .vac-mini-f { display: grid; grid-template-columns: 74px 1fr; gap: 8px; align-items: baseline; font-size: .82rem; }
.vac-mini-f b { font-variant-numeric: tabular-nums; } .vac-mini-f.hay { color: var(--warn-tx); } .vac-mini-f.hay span { font-weight: 600; }
.vac-aviso-cruce { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; background: var(--warn-bg); color: var(--warn-tx); font-size: .88rem; } .vac-aviso-cruce .ic { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.vac-aviso-ok { color: var(--ok-tx); font-size: .88rem; }
@media (max-width: 640px) { .vac-cal { gap: 3px; } .vac-cal-dia { min-height: 52px; padding: 4px; } .vac-forms { grid-template-columns: 1fr; } .vac-mini-f { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .vac-ord { transition: none; } }
.aus-resumen-vac { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 2px; padding: 9px 12px; border-radius: 10px; font-size: .88rem; line-height: 1.45; }
.aus-resumen-vac .ic { flex: none; width: 18px; height: 18px; margin-top: 1px; } .aus-resumen-vac.ok { background: var(--ok-bg); color: var(--ok-tx); } .aus-resumen-vac.warn { background: var(--warn-bg); color: var(--warn-tx); }
/* ajustes de ancho: KPIs en una fila, tablas compactas y acciones que no se cortan */
#vac-kpis { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
#vac-kpis .fr-card { padding: 14px 16px; } #vac-kpis .fr-card small { overflow-wrap: anywhere; }
.vac-tabla th, .vac-tabla td, #vac-detalle .hz-grid th, #vac-detalle .hz-grid td, #vac-cal-filas td { padding: 9px 8px; }
.vac-tabla .btn, #vac-detalle .hn-acc .btn { padding: 5px 10px; font-size: .8rem; }
#vac-detalle .hn-acc { white-space: normal; min-width: 96px; text-align: right; } #vac-detalle .hn-acc .btn { margin: 2px 0; }
.vac-saldo { grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); }
.vac-saldo .fr-card.txt b { font-size: 1.1rem; white-space: nowrap; }
.vac-al { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 16px; } .vac-al .ic { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.vac-tabla td:last-child { text-align: right; }
/* ajustes de ancho: KPIs en una fila, tablas compactas y acciones que no se cortan */
#vac-kpis { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
#vac-kpis .fr-card { padding: 14px 16px; } #vac-kpis .fr-card small { overflow-wrap: anywhere; }
.vac-tabla th, .vac-tabla td, #vac-detalle .hz-grid th, #vac-detalle .hz-grid td, #vac-cal-filas td { padding: 9px 8px; }
.vac-tabla .btn, #vac-detalle .hn-acc .btn { padding: 5px 10px; font-size: .8rem; }
#vac-detalle .hn-acc { white-space: normal; min-width: 96px; text-align: right; } #vac-detalle .hn-acc .btn { margin: 2px 0; }
.vac-saldo { grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); }
.vac-saldo .fr-card.txt b { font-size: 1.1rem; white-space: nowrap; }
.vac-al { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 16px; } .vac-al .ic { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.vac-tabla td:last-child { text-align: right; }
.vac-dec-periodos { display: flex; flex-wrap: wrap; gap: 6px; } .vac-dec-periodos span { padding: 3px 9px; border-radius: 8px; background: var(--card); border: 1px solid var(--borde-suave); font-size: .82rem; }
.vac-tabla, #adm-vacaciones .hz-grid { min-width: 0; }

/* ---------- 32. Panel de notificaciones premium (campana) ----------
   Tarjeta flotante con sombra profunda y desenfoque, estado «nueva / leída» muy claro, iconos por categoría (éxito, acción requerida, atención, rutina), hover con desplazamiento
   y un enlace «Marcar como leídas» interactivo. Responsivo: en móviles el panel se ancla a los bordes de la pantalla. Para revertir: borrar esta sección y restaurar el marcado anterior. */
.notif-panel { --n-ok: #0d9488; --n-accion: #2563eb; --n-alerta: #b7791f; --n-sistema: #64748b;
  width: min(392px, calc(100vw - 24px)); max-width: none; border-radius: 22px; border: 1px solid color-mix(in srgb, var(--borde) 70%, transparent);
  background: color-mix(in srgb, var(--card) 92%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.25); backdrop-filter: blur(18px) saturate(1.25);
  box-shadow: 0 2px 4px rgba(15, 32, 60, .06), 0 18px 36px -12px rgba(15, 32, 60, .28), 0 44px 80px -28px rgba(15, 32, 60, .42); display: flex; flex-direction: column; max-height: min(78vh, 600px); }
.notif-panel:not(.oculto) { display: flex; }

:root[data-tema="oscuro"] .notif-panel { --n-ok: #2dd4bf; --n-accion: #7aa2ff; --n-alerta: #f0b24a; --n-sistema: #94a3b8; box-shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 24px 48px -14px rgba(0, 0, 0, .7); }
/* cabecera */
.notif-cab { flex-wrap: wrap; row-gap: 4px; padding: 16px 18px 12px; gap: 12px; border-bottom: 1px solid var(--borde-suave); background: linear-gradient(180deg, color-mix(in srgb, var(--navy) 5%, transparent), transparent); }
.notif-tit { display: flex; align-items: center; gap: 10px; min-width: 0; } .notif-tit b { font-size: 1.02rem; font-weight: 800; letter-spacing: -.01em; color: var(--text-strong, var(--texto)); }
.notif-cuenta { padding: 2px 9px; border-radius: 99px; font-size: .7rem; font-weight: 700; color: var(--navy-2-tx); background: var(--navy-soft); white-space: nowrap; }
.notif-cab .notif-leer { position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 4px 2px; border: 0; background: none; font: inherit; font-size: .8rem; font-weight: 700; color: var(--navy-2-tx); cursor: pointer; white-space: nowrap; }
.notif-leer .ic { width: 14px; height: 14px; transition: transform var(--t-med) ease; }
.notif-leer::after { content: ''; position: absolute; left: 2px; right: 2px; bottom: 1px; height: 1.5px; border-radius: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--t-med) ease; }
.notif-leer:hover:not(:disabled)::after, .notif-leer:focus-visible::after { transform: scaleX(1); } .notif-leer:hover:not(:disabled) .ic { transform: scale(1.18); }
.notif-leer:focus-visible { outline: 2px solid color-mix(in srgb, var(--navy-3) 85%, transparent); outline-offset: 3px; border-radius: 6px; }
.notif-leer:disabled { opacity: .45; cursor: default; }
/* lista */
.notif-lista, #notif-lista { flex: 1; min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain; padding: 4px 0 8px; scrollbar-width: thin; }
.notif-grupo { margin: 0; padding: 12px 18px 6px; font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--suave); }
.notif-item { position: relative; display: flex; align-items: flex-start; gap: 14px; width: calc(100% - 16px); margin: 2px 8px; padding: 13px 14px 13px 16px; border: 0; border-radius: 14px; background: transparent; text-align: left; cursor: pointer;
  transition: background-color var(--t-med) ease, transform var(--t-med) cubic-bezier(.2, .8, .2, 1), box-shadow var(--t-med) ease; }
.notif-item:hover { background: color-mix(in srgb, var(--navy) 6%, transparent); transform: translateX(4px); }
.notif-item:focus-visible { outline: 2px solid color-mix(in srgb, var(--navy-3) 85%, transparent); outline-offset: -2px; transform: translateX(4px); }
.notif-item:active { transform: translateX(2px) scale(.99); }
.notif-item.nueva { background: color-mix(in srgb, var(--primary-color) 8%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--navy-2) 14%, transparent); }
.notif-item.nueva::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--tono); }
.notif-item.nueva:hover { background: color-mix(in srgb, var(--primary-color) 13%, var(--card)); }
.notif-item.leida { opacity: .82; } .notif-item.leida:hover { opacity: 1; }
.notif-item span { flex-direction: initial; }
/* iconos semánticos */
.notif-item { --tono: var(--n-sistema); }
.notif-item.tono-exito { --tono: var(--n-ok); } .notif-item.tono-accion { --tono: var(--n-accion); } .notif-item.tono-info { --tono: var(--navy-2); } .notif-item.tono-alerta { --tono: var(--n-alerta); } .notif-item.tono-sistema { --tono: var(--n-sistema); }
.notif-item .notif-ico { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; font-size: 1.15rem; border-radius: 12px; color: var(--tono);
  background: color-mix(in srgb, var(--tono) 14%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tono) 22%, transparent); transition: transform var(--t-med) cubic-bezier(.2, .8, .2, 1); }
.notif-item .notif-ico .ic { width: 1em; height: 1em; } .notif-item:hover .notif-ico { transform: scale(1.08) rotate(-4deg); }
.notif-item.tono-accion.nueva .notif-ico { animation: notif-latido 2.6s ease-in-out infinite; }
@keyframes notif-latido { 0%, 100% { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tono) 22%, transparent), 0 0 0 0 color-mix(in srgb, var(--tono) 35%, transparent); } 50% { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tono) 22%, transparent), 0 0 0 6px color-mix(in srgb, var(--tono) 0%, transparent); } }
/* texto: título audaz, detalle y fecha tenues */
.notif-item .notif-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.notif-item .notif-txt b { font-size: .92rem; line-height: 1.3; font-weight: 700; color: var(--text-strong, var(--texto)); overflow-wrap: anywhere; }
.notif-item.leida .notif-txt b { font-weight: 600; color: var(--texto); }
.notif-item .notif-det { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; font-size: .8rem; line-height: 1.45; color: var(--suave); overflow-wrap: anywhere; }
.notif-item .notif-cuando { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 3px; font-size: .72rem; color: color-mix(in srgb, var(--suave) 85%, transparent); }
.notif-tag { font-style: normal; padding: 1px 8px; border-radius: 99px; font-size: .66rem; font-weight: 700; letter-spacing: .01em; color: var(--tono); background: color-mix(in srgb, var(--tono) 12%, transparent); }
/* punto luminoso de «sin leer» */
.notif-punto { flex: none; align-self: center; width: 9px; height: 9px; border-radius: 50%; background: var(--tono); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tono) 20%, transparent), 0 0 10px 1px color-mix(in srgb, var(--tono) 55%, transparent); animation: notif-punto 2.4s ease-in-out infinite; }
@keyframes notif-punto { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.78); opacity: .7; } }
/* vacío */
.notif-vacio { display: grid; justify-items: center; gap: 4px; padding: 36px 24px 40px; text-align: center; color: var(--suave); }
.notif-vacio span { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 6px; border-radius: 50%; font-size: 1.5rem; color: var(--n-ok); background: color-mix(in srgb, var(--n-ok) 12%, var(--card)); } .notif-vacio .ic { width: 1em; height: 1em; }
.notif-vacio b { font-size: 1rem; color: var(--texto); } .notif-vacio small { font-size: .84rem; }
.notif-disp { padding: 10px 18px; }
/* móviles: el panel se ancla a los bordes de la pantalla y nunca se desborda */
@media (max-width: 520px) {
  .notif-panel { position: fixed; left: 12px; right: 12px; top: 72px; width: auto; max-height: calc(100dvh - 92px); border-radius: 20px; }
  .notif-cab { padding: 14px 14px 10px; } .notif-item { padding: 12px 12px 12px 14px; gap: 12px; } .notif-item .notif-ico { width: 38px; height: 38px; }

}
@media (prefers-reduced-motion: reduce) { .notif-item, .notif-item .notif-ico, .notif-leer::after, .notif-leer .ic { transition: none; } .notif-item:hover, .notif-item:focus-visible { transform: none; } .notif-punto, .notif-item.tono-accion.nueva .notif-ico { animation: none; } }
.notif-acc { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.notif-limpiar { color: var(--suave); } .notif-limpiar:hover:not(:disabled) { color: var(--err-tx); }
.notif-limpiar.confirmar { color: var(--err-tx); } .notif-limpiar.confirmar::after { transform: scaleX(1); }

/* ---------- 33. Reiniciar cuenta (Wipe): modal de confirmación crítica ---------- */
.rs-lista { display: grid; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; font-size: .88rem; line-height: 1.5; }
.rs-lista li { padding: 9px 12px; border-radius: 10px; border: 1px solid var(--borde-suave); }
.rs-borra { background: var(--err-bg); color: var(--err-tx); border-color: color-mix(in srgb, var(--ruby) 24%, transparent); } .rs-queda { background: var(--ok-bg); color: var(--ok-tx); border-color: color-mix(in srgb, var(--emerald) 24%, transparent); }
.gear-menu button.peligro[data-acc="reset"] { color: var(--warn-tx); } .gear-menu button.peligro[data-acc="reset"]:hover:not(:disabled), .gear-menu button.peligro[data-acc="reset"]:focus-visible { background: var(--warn-bg); }