/* ============================================================
   Capa visual común de los hubs (ECAE / T4B).
   Efectos portados de Magic UI (magicui.design) a CSS/JS plano:
   magic-card, border-beam, shimmer-button, animated-grid-pattern,
   dot-pattern, blur-fade, number-ticker. Solo usa --azul / --azul-osc,
   que cada página define con el color de su marca.
   Tipografía y controles con el lenguaje de Cirrus UI (cirrus-ui.com):
   Montserrat en títulos, Nunito Sans en el texto, controles de 38 px,
   foco con halo de la marca. Fuentes locales (OFL), sin CDN.
   ============================================================ */
@property --ui-ang { syntax:'<angle>'; inherits:false; initial-value:0deg; }

@font-face { font-family:"Montserrat"; font-style:normal; font-weight:100 900; font-display:swap; src:url("/assets/fonts/montserrat.woff2") format("woff2"); }
@font-face { font-family:"Nunito Sans"; font-style:normal; font-weight:200 1000; font-display:swap; src:url("/assets/fonts/nunitosans.woff2") format("woff2"); }
@font-face { font-family:"Nunito Sans"; font-style:italic; font-weight:200 1000; font-display:swap; src:url("/assets/fonts/nunitosans-italic.woff2") format("woff2"); }

:root {
  --ui-texto: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ui-titulo: "Montserrat", "Nunito Sans", system-ui, sans-serif;
  --ui-halo: color-mix(in srgb, var(--azul) 14%, transparent);
  --ui-soft: color-mix(in srgb, var(--azul) 7%, #fff);
  --ui-borde: #e3e7f0;
  --ui-borde-fuerte: #cdd3e1;
  --ui-tinta: #101528;
  --ui-gris: #5f6a85;
  --ui-fondo: #f5f7fc;
  --ui-control: 38px;
  --ui-radio: 10px;
}

html { -webkit-text-size-adjust:100%; }
body { background:var(--ui-fondo); color:var(--ui-tinta); -webkit-font-smoothing:antialiased; font-family:var(--ui-texto);
  font-feature-settings:"kern", "liga"; text-rendering:optimizeLegibility; }
::selection { background:var(--ui-halo); }

/* ---------- tipografía (Cirrus: títulos Montserrat, texto Nunito Sans) ---------- */
h1, h2, h3, h4, .ui-titulo, header h1, .ui-side-marca b, .stat b, .num, .kpi b {
  font-family:var(--ui-titulo); letter-spacing:-.015em; }
h1, h2 { font-weight:700; } h3, h4 { font-weight:650; }
p { line-height:1.55; }
small, .ayuda, .sub { line-height:1.45; }
b, strong { font-weight:700; }
/* las cifras se alinean entre filas y tarjetas */
table, .stat b, .num, .kpi b, time { font-variant-numeric:tabular-nums; }

/* ---------- controles de formulario (Cirrus) ---------- */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]), select, textarea {
  font-family:var(--ui-texto); color:var(--ui-tinta); background-color:#fff;
  border:1px solid var(--ui-borde); border-radius:var(--ui-radio);
  transition:border-color .15s, box-shadow .15s, background-color .15s; }
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):hover, select:hover, textarea:hover {
  border-color:var(--ui-borde-fuerte); }
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):focus, select:focus, textarea:focus {
  outline:none; border-color:var(--azul); box-shadow:0 0 0 3px var(--ui-halo); }
input::placeholder, textarea::placeholder { color:#9aa3b8; opacity:1; }
input[readonly], textarea[readonly] { background-color:#f7f8fc; }
input:disabled, select:disabled, textarea:disabled { background-color:#f1f3f8; color:#8a93aa; cursor:not-allowed; }
select:not([multiple]):not([size]) {
  -webkit-appearance:none; appearance:none; padding-right:2.1rem !important; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235f6a85' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .75rem center; background-size:12px; }
select { max-width:100%; text-overflow:ellipsis; }
input[type=checkbox], input[type=radio] { accent-color:var(--azul); width:16px; height:16px; cursor:pointer; vertical-align:-3px; }
input[type=date], input[type=time] { font-variant-numeric:tabular-nums; }
textarea { line-height:1.5; resize:vertical; }
label { color:#2c3550; }

/* ---------- botones: altura y foco comunes ---------- */
button, .btn, a.btn { font-family:var(--ui-texto); letter-spacing:.01em; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline:2px solid var(--azul); outline-offset:2px; }
button:disabled { cursor:not-allowed; }

/* ---------- tablas (Cirrus: filas aireadas, cabecera discreta) ---------- */
table th { font-family:var(--ui-texto); font-weight:800; letter-spacing:.06em; }
table tbody tr { transition:background .12s; }
table tbody tr:hover { background:color-mix(in srgb, var(--azul) 3%, #fff); }

/* ---------- barras de desplazamiento finas ---------- */
* { scrollbar-width:thin; scrollbar-color:#cdd3e1 transparent; }
*::-webkit-scrollbar { width:10px; height:10px; }
*::-webkit-scrollbar-thumb { background:#cdd3e1; border-radius:99px; border:3px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover { background-color:#aab3c8; }

/* ---------- header: migas (Cirrus breadcrumb) ---------- */
header .ui-migas { display:flex; flex-direction:column; justify-content:center; min-width:0; line-height:1.15; }
header .ui-migas small { font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.7); }
header .ui-migas h1 { margin:0; font-size:1.02rem !important; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
html.ui-con-side header > img, html.ui-con-side header .marca { display:none !important; }
@media (max-width:900px) { html.ui-con-side header > img { display:block !important; height:20px; } }

/* ---------- header: degradado de marca + dot-pattern ---------- */
header {
  position:sticky; top:0; z-index:20;
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.16) 1px, transparent 0) 0 0/16px 16px,
    linear-gradient(110deg, var(--azul-osc), var(--azul) 55%, color-mix(in srgb, var(--azul) 75%, #fff));
  box-shadow:0 6px 24px color-mix(in srgb, var(--azul) 22%, transparent);
}
header nav.ui-nav { margin-left:auto; display:flex; gap:.25rem; }
header nav.ui-nav a { color:#fff; opacity:.78; text-decoration:none; font-size:.84rem; font-weight:600;
  padding:.38rem .75rem; border-radius:8px; transition:opacity .15s, background .15s; }
header nav.ui-nav a:hover { opacity:1; background:rgba(255,255,255,.14); }
header nav.ui-nav a.act { opacity:1; background:rgba(255,255,255,.2); }
@media (max-width:760px) { header nav.ui-nav { display:none; } }

/* ---------- blur-fade (entrada) ---------- */
.bf { opacity:0; filter:blur(6px); transform:translateY(10px); }
.bf.in { opacity:1; filter:none; transform:none;
  transition:opacity .5s ease, filter .5s ease, transform .5s cubic-bezier(.2,.7,.2,1); transition-delay:var(--bf-d, 0s); }

/* ---------- paneles y magic-card (spotlight que sigue al cursor) ---------- */
.panel { border-color:var(--ui-borde); border-radius:16px; box-shadow:0 1px 2px rgba(16,21,40,.04), 0 8px 28px rgba(16,21,40,.05); }
.mc { position:relative; isolation:isolate; }
.mc::before {
  content:''; position:absolute; inset:-1px; border-radius:inherit; padding:1px; pointer-events:none; z-index:1;
  background:radial-gradient(260px circle at var(--mx, -999px) var(--my, -999px), var(--mc-c, var(--azul)), transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .25s;
}
.mc::after {
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:-1;
  background:radial-gradient(320px circle at var(--mx, -999px) var(--my, -999px), color-mix(in srgb, var(--mc-c, var(--azul)) 9%, transparent), transparent 70%);
  opacity:0; transition:opacity .25s;
}
.mc:hover::before, .mc:hover::after { opacity:1; }

/* ---------- border-beam ---------- */
.beam { position:relative; }
.beam::before {
  content:''; position:absolute; inset:-1px; border-radius:inherit; padding:1.5px; pointer-events:none;
  background:conic-gradient(from var(--ui-ang), transparent 0 72%, color-mix(in srgb, var(--azul) 40%, #fff) 82%, var(--azul) 90%, transparent 96%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:ui-giro 6s linear infinite;
}
@keyframes ui-giro { to { --ui-ang:360deg; } }

/* ---------- shimmer-button ---------- */
.shimmer { position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(180deg, color-mix(in srgb, var(--azul) 88%, #fff), var(--azul)) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 6px 18px color-mix(in srgb, var(--azul) 30%, transparent);
  transition:transform .12s, box-shadow .2s, filter .2s !important; }
.shimmer::before { content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.38) 50%, transparent 70%);
  transform:translateX(-120%); animation:ui-brillo 3.2s ease-in-out infinite; }
.shimmer:hover { filter:brightness(1.06); box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 10px 26px color-mix(in srgb, var(--azul) 38%, transparent); }
.shimmer:active { transform:scale(.97); }
.shimmer:disabled { filter:grayscale(.6) opacity(.7); }
.shimmer:disabled::before { animation:none; }
@keyframes ui-brillo { 0%, 55% { transform:translateX(-120%); } 100% { transform:translateX(120%); } }

/* spinner dentro de botones ocupados */
.ui-spin { width:15px; height:15px; border-radius:50%; border:2px solid rgba(255,255,255,.4); border-top-color:#fff;
  animation:ui-rota .7s linear infinite; display:inline-block; }
@keyframes ui-rota { to { transform:rotate(360deg); } }

/* ---------- animated-grid-pattern (fondo) ---------- */
.ui-grid { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  -webkit-mask:radial-gradient(ellipse 70% 60% at 50% 45%, #000 30%, transparent 75%);
  mask:radial-gradient(ellipse 70% 60% at 50% 45%, #000 30%, transparent 75%); }
.ui-grid svg { width:100%; height:100%; }
.ui-grid rect.sq { fill:var(--azul); opacity:0; transition:opacity 1.6s ease; }
.ui-grid rect.sq.on { opacity:.13; }

/* ---------- toasts ---------- */
#ui-toasts { position:fixed; right:1.2rem; bottom:1.2rem; z-index:100; display:flex; flex-direction:column; gap:.5rem; align-items:flex-end; }
.ui-toast { background:#101528; color:#fff; padding:.7rem 1rem; border-radius:12px; font-size:.88rem; max-width:min(92vw, 380px);
  box-shadow:0 12px 32px rgba(16,21,40,.25); display:flex; gap:.6rem; align-items:center;
  animation:ui-toast-in .35s cubic-bezier(.2,.7,.2,1); }
.ui-toast i { width:8px; height:8px; border-radius:50%; flex:none; background:#2ecc71; }
.ui-toast.err i { background:#ff6b5b; }
.ui-toast.out { opacity:0; transform:translateY(8px); transition:all .25s; }
@keyframes ui-toast-in { from { opacity:0; transform:translateY(12px) scale(.97); } }

/* ---------- modal de confirmación (reemplaza confirm()) ---------- */
.ui-modal { position:fixed; inset:0; z-index:110; display:grid; place-items:center; background:rgba(16,21,40,.35);
  backdrop-filter:blur(3px); animation:ui-fade .2s; }
.ui-modal > div { background:#fff; border-radius:16px; padding:1.4rem; width:min(92vw, 360px); box-shadow:0 24px 60px rgba(16,21,40,.25);
  animation:ui-toast-in .25s; }
.ui-modal p { color:var(--ui-tinta); font-size:.95rem; margin-bottom:1.1rem; line-height:1.5; }
.ui-modal .b { display:flex; gap:.5rem; justify-content:flex-end; }
.ui-modal button { margin:0; padding:.55rem 1rem; border:0; border-radius:9px; font-weight:600; cursor:pointer; font-size:.86rem; }
.ui-modal .no { background:#eef1f7; color:#333; }
.ui-modal .si { background:#d6453a; color:#fff; }
@keyframes ui-fade { from { opacity:0; } }

/* ---------- skeleton ---------- */
.sk { display:block; height:12px; border-radius:6px; background:linear-gradient(90deg, #eef1f7 25%, #f7f9fc 50%, #eef1f7 75%) 0 0/200% 100%;
  animation:ui-sk 1.3s linear infinite; }
@keyframes ui-sk { to { background-position:-200% 0; } }

/* ---------- estado vacío ---------- */
.ui-vacio { text-align:center; color:#8892b0; padding:2rem 1rem !important; font-size:.9rem; }
.ui-vacio svg { width:30px; height:30px; display:block; margin:0 auto .5rem; color:#c5ccdd; }

/* ---------- menú lateral del ecosistema (ui.shell) ---------- */
:root { --ui-side:236px; }
html.ui-con-side body { padding-left:var(--ui-side); }
html.ui-con-side header a.back { display:none; }
.ui-side { position:fixed; inset:0 auto 0 0; width:var(--ui-side); z-index:40; background:#fff; border-right:1px solid var(--ui-borde);
  display:flex; flex-direction:column; }
.ui-side-marca { display:flex; align-items:center; gap:.65rem; padding:1rem 1.1rem; text-decoration:none; color:var(--ui-tinta);
  border-bottom:1px solid var(--ui-borde); min-height:54px; }
.ui-side-marca img { width:30px; height:30px; border-radius:9px; object-fit:cover; }
.ui-side-marca b { font-size:.98rem; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ui-side nav { flex:1; overflow-y:auto; padding:.6rem .6rem 1rem; }
.ui-side .g { margin-bottom:.5rem; }
.ui-side small { display:block; font-size:.68rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#9aa3bb;
  padding:.8rem .65rem .35rem; }
.ui-side nav a { display:flex; align-items:center; gap:.65rem; padding:.52rem .65rem; border-radius:9px; color:#44506e; text-decoration:none;
  font-size:.88rem; font-weight:600; transition:background .15s, color .15s; }
.ui-side nav a svg { width:18px; height:18px; flex:none; opacity:.85; }
.ui-side nav a:hover { background:var(--ui-soft); color:var(--azul); }
.ui-side nav a.act { background:var(--ui-halo); color:var(--azul); }
.ui-side nav a.pronto { color:#9aa3bb; }
.ui-side nav a.pronto:hover { background:#f5f6fa; color:#7d87a3; }
.ui-side nav a em { margin-left:auto; font-style:normal; font-size:.64rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  background:#eef1f7; color:#8590ab; padding:.12rem .45rem; border-radius:99px; }
.ui-side-yo { display:flex; align-items:center; gap:.6rem; padding:.8rem .9rem; border-top:1px solid var(--ui-borde); }
.ui-side-yo .av { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; flex:none; color:#fff; font-size:.8rem; font-weight:700;
  background:linear-gradient(135deg, var(--azul-osc), var(--azul)); }
.ui-side-yo .q { min-width:0; flex:1; line-height:1.2; }
.ui-side-yo .q b { display:block; font-size:.84rem; color:var(--ui-tinta); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ui-side-yo .q small { padding:0; text-transform:none; letter-spacing:0; font-weight:500; font-size:.74rem; color:var(--ui-gris); }
.ui-side-yo button { border:0; background:transparent; color:#8590ab; width:32px; height:32px; border-radius:8px; display:grid; place-items:center; cursor:pointer; }
.ui-side-yo button:hover { background:#fdecea; color:#d6453a; }
.ui-side-yo button svg { width:17px; height:17px; }
.ui-burger { display:none; border:0; background:rgba(255,255,255,.14); color:#fff; width:34px; height:34px; border-radius:9px;
  place-items:center; cursor:pointer; flex:none; }
.ui-burger svg { width:19px; height:19px; }
.ui-side-velo { display:none; }
@media (max-width:900px) {
  html.ui-con-side body { padding-left:0; }
  .ui-side { transform:translateX(-100%); box-shadow:0 0 40px rgba(16,21,40,.18); transition:transform .25s cubic-bezier(.2,.7,.2,1); }
  html.ui-side-abierto .ui-side { transform:none; }
  html.ui-side-abierto .ui-side-velo { display:block; position:fixed; inset:0; z-index:39; background:rgba(16,21,40,.35); }
  .ui-burger { display:grid; }
}

@media (prefers-reduced-motion: reduce) {
  .bf { opacity:1; filter:none; transform:none; }
  .beam::before, .shimmer::before, .sk { animation:none; }
  .ui-grid { display:none; }
}