/* ==================================================
   Doctorweb – UI Core v2
   Refactor basado en tus estilos "Glass v2"
   Objetivo: núcleo limpio, reutilizable y fácil de escalar
   --------------------------------------------------
   - Tokens (variables) con prefijo --dw-
   - Reset/opiniones mínimas
   - Utilidades (spacing/typography/layout)
   - Componentes (btn, card, input, textarea, table, badge, modal, nav, offcanvas)
   - Modificadores (.-ghost, .-soft, .-center, .-narrow, etc.)
   - Alias de compatibilidad para tus clases actuales
   ================================================== */

/* ================ Design Tokens =================== */
:root{
  /* Marca */
  --dw-accent:#00a5e5;
  --dw-accent-2:#7dd3fc;
  --dw-success:#10b981;
  --dw-warning:#f59e0b;
  --dw-danger:#ef4444;
  --dw-info:#0ea5e9;

  /* Superficies / texto */
  --dw-bg:#e6f3ff;     /* base más luminosa para degradé */
  --dw-bg-2:#f5faff;
  --dw-surface:rgba(255,255,255,.58);     /* panel (glass) */
  --dw-surface-strong:rgba(255,255,255,.72);
  --dw-surface-dark:rgba(255,255,255,.30);
  --dw-text:#0f172a;
  --dw-muted:#475569;

  /* Bordes / sombras */
  --dw-border:rgba(255,255,255,.35);
  --dw-ring:#cbd5e1;
  --dw-focus:#60a5fa;
  --dw-shadow-lg:0 10px 30px rgba(2,8,23,.10);
  --dw-shadow-md:0 6px 18px rgba(2,8,23,.08);
  --dw-shadow-sm:0 2px 6px rgba(2,8,23,.06);

  /* Otros */
  --dw-blur:12px;
  --dw-radius-lg:16px;
  --dw-radius-md:12px;
  --dw-radius-sm:8px;
}

/* ================ Reset & Base ===================== */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:"Nunito Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Cantarell,"Noto Sans",Arial,sans-serif;
  color:var(--dw-text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  background:
    radial-gradient(1200px 800px at 10% -10%, #cfefff 0%, transparent 60%),
    radial-gradient(900px 600px at 110% 0%, #e8d9ff 0%, transparent 55%),
    linear-gradient(180deg, var(--dw-bg), var(--dw-bg-2));
}
:focus-visible{ outline:3px solid var(--dw-focus); outline-offset:2px; border-radius:10px; }

/* Links */
A{ color:inherit; }

/* ================ Utilidades ======================= */
/* Tipografía */
.u-small{ font-size:.875rem; color:var(--dw-muted); }
.u-muted{ color:var(--dw-muted); }
.u-mono{ font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
.u-bold{ font-weight:800; }

/* Layout */
.u-wrap{ max-width:1000px; margin:40px auto; padding:0 20px; }
.u-wrap.-narrow{ max-width:460px; margin:64px auto; }
.u-right{ text-align:right; }
.u-flex{ display:flex; gap:10px; align-items:center; }
.u-grid{ display:grid; gap:16px; }
.u-grid-1{ grid-template-columns:1fr; }
.u-grid-2{ grid-template-columns:repeat(2,1fr); }
.u-grid-3{ grid-template-columns:repeat(3,1fr); }
.u-grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .u-grid-2{ grid-template-columns:1fr; } }
@media (min-width:760px){ .u-grid-3{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:720px){ .u-grid-4{ grid-template-columns:repeat(2,1fr); } }

/* Helpers varios */
.nowrap{ white-space:nowrap; }
.click{ cursor:pointer; }
.w-100{ width:100%; }

/* ================ Efecto Glass ===================== */
.dw-glass{
  background:var(--dw-surface);
  border:1px solid var(--dw-border);
  border-radius:var(--dw-radius-lg);
  box-shadow:var(--dw-shadow-lg);
  backdrop-filter:blur(var(--dw-blur));
  -webkit-backdrop-filter:blur(var(--dw-blur));
}
.dw-glass.-strong{ background:var(--dw-surface-strong); }
.dw-glass.-dark{ background:var(--dw-surface-dark); }

/* ================ Tipografía de página ============= */
H1{
  margin:0 0 10px;
  font-size:26px; letter-spacing:.2px;
  color:var(--dw-accent);
  display:flex; align-items:center; gap:10px;
}
H1.-center{ justify-content:center; text-align:center; flex-direction:column; }
P.desc{ margin:0 0 16px; font-size:14px; color:var(--dw-muted); }
P.desc.-center{ text-align:center; }

/* ================ Card ============================= */
.card{
  padding:20px; margin-bottom:20px; border-radius:var(--dw-radius-lg);
  border:1px solid var(--dw-border);
  background:var(--dw-surface);
  box-shadow:var(--dw-shadow-lg);
  backdrop-filter:blur(var(--dw-blur));
  -webkit-backdrop-filter:blur(var(--dw-blur));
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px rgba(2,8,23,.12); }
.card.-soft{ border-style:dashed; }
.card H3{ margin:0 0 8px; color:var(--dw-accent); font-size:18px; display:flex; align-items:center; gap:8px; }
.card H3 .icon{ width:50px; height:auto; }
.card P{ margin:0 0 12px; color:var(--dw-muted); font-size:14px; }
.card .actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* ================ Formularios ====================== */
LABEL{ display:inline-flex; gap:6px; align-items:center; font-size:13px; color:var(--dw-muted); }
.controls{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:12px; }
.field{ display:flex; flex-direction:column; gap:6px; margin:12px 0; }
.field LABEL{ font-size:13px; color:var(--dw-muted); }
.input{
  display:flex; align-items:center; gap:10px;
  background:linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.55));
  border:1px solid var(--dw-border);
  border-radius:var(--dw-radius-md);
  padding:12px 14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 8px 18px rgba(2,8,23,.06);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.input:focus-within{ border-color:rgba(96,165,250,.7); box-shadow:0 0 0 4px rgba(96,165,250,.18), var(--dw-shadow-lg); }
.input INPUT, .input SELECT, .input TEXTAREA{ width:100%; border:0; outline:0; background:transparent; font-size:14px; color:var(--dw-text); }

/* Textareas protagonistas (RTE/Extractor) */
TEXTAREA{
  width:100%; min-height:220px; resize:vertical;
  background:linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.52));
  color:var(--dw-text);
  border:1px solid var(--dw-border);
  border-radius:var(--dw-radius-md);
  padding:12px 14px; line-height:1.5; font-size:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 8px 18px rgba(2,8,23,.06);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.output{ min-height:220px; white-space:pre-wrap; }

/* RTE Toolbar */
.rte-toolbar{
  display:flex; align-items:center; gap:6px; padding:6px; border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.35));
  border:1px solid var(--dw-border);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.rte-toolbar BUTTON{
  appearance:none; border:1px solid var(--dw-border);
  background:linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.45));
  color:var(--dw-text); font-weight:600; font-size:13px; letter-spacing:.1px;
  padding:8px 10px; border-radius:10px; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  transition:background .15s ease, border-color .15s ease, transform .04s ease;
}
.rte-toolbar BUTTON:hover{ background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.55)); border-color: rgba(0,0,0,.06); }
.rte-toolbar BUTTON:active{ transform:translateY(1px); }
.rte-toolbar BUTTON[aria-pressed="true"], .rte-toolbar BUTTON.is-on{ color:var(--dw-accent); border-color: rgba(0,165,229,.35); background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.6)); }
.rte-toolbar BUTTON:disabled{ opacity:.55; cursor:not-allowed; }
.rte-toolbar BUTTON:focus-visible{ outline:3px solid var(--dw-focus); outline-offset:2px; border-radius:10px; }
.rte-toolbar BUTTON.icon-only{ padding:8px; min-width:36px; justify-content:center; }

/* RTE Área */
.rte-area{
  width:100%; min-height:100px; padding:16px 18px; font-size:14px; line-height:1.55; color:var(--dw-text);
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.85));
  border:1px solid rgba(148,163,184,.4);
  border-radius:var(--dw-radius-lg);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.05), 0 6px 16px rgba(2,8,23,.06);
  resize:vertical; transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.rte-area::placeholder{ color:var(--dw-muted); font-style:italic; opacity:.8; }
.rte-area:focus{ outline:none; border-color:var(--dw-accent); box-shadow:0 0 0 3px rgba(0,165,229,.25), 0 6px 16px rgba(2,8,23,.08); background:linear-gradient(180deg, #fff, rgba(255,255,255,.9)); }

/* ================ Botones ========================== */
.btn{
  appearance:none; border:1px solid transparent; cursor:pointer;
  color:#fff; font-weight:800; letter-spacing:.2px;
  padding:11px 16px; border-radius:12px;
  background-image:linear-gradient(135deg, var(--dw-accent) 0%, var(--dw-accent-2) 100%);
  box-shadow:0 10px 22px rgba(0,165,229,.22), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .06s ease, filter .18s ease, box-shadow .18s ease, opacity .18s ease, background .18s ease;
}
.btn:hover{ filter:saturate(1.05) brightness(1.02); box-shadow:0 14px 30px rgba(0,165,229,.28); }
.btn:active{ transform:translateY(1px) scale(.99); }
.btn[disabled]{ opacity:.65; cursor:not-allowed; }
.btn.-ghost{
  background:linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.3));
  color:var(--dw-accent);
  border:1px solid rgba(0,165,229,.35);
  box-shadow:0 8px 18px rgba(2,8,23,.06);
}
.btn.-danger{ background-image:none; background:#ef4444; }

/* ================ Tabla & Badges =================== */
.table{ width:100%; border-collapse:collapse; }
.table TH, .table TD{ padding:10px; border-bottom:1px solid var(--dw-ring,#e5e7eb); text-align:left; vertical-align:middle; }
.table TH{ font-weight:800; color:#111827; }
.badge{ display:inline-block; padding:4px 8px; border-radius:10px; font-size:.85rem; border:1px solid transparent; }
.badge.-ok{ background:#ecfdf5; color:#065f46; border-color:#a7f3d0; }
.badge.-off{ background:#fef2f2; color:#991b1b; border-color:#fecaca; }

/* ================ Top Nav (glass) ================== */
.topnav{ position:sticky; top:0; z-index:40; border-bottom:1px solid var(--dw-border); background:linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.45)); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.topnav .inner{ max-width:1100px; margin:0 auto; padding:10px 20px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.brand{ display:flex; align-items:center; gap:10px; color:var(--dw-accent); font-weight:900; text-decoration:none; letter-spacing:.2px; }
.brand IMG{ height:50px; filter:drop-shadow(0 2px 4px rgba(2,8,23,.08)); }
.hello{ color:var(--dw-muted); font-size:14px; }
.menu{ display:flex; align-items:center; gap:10px; }
.menu A{ text-decoration:none; color:var(--dw-text); padding:8px 10px; border-radius:10px; border:1px solid transparent; font-weight:700; font-size:14px; background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.25)); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transition:box-shadow .18s ease, border-color .18s ease, transform .06s ease; }
.menu A:hover{ border-color:var(--dw-border); box-shadow:0 6px 14px rgba(2,8,23,.08); }
.menu A.active{ color:var(--dw-accent); border-color:rgba(0,165,229,.45); background:linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.4)); }
.user-badge{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid var(--dw-border); border-radius:999px; color:#334155; background:linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.3)); font-size:13px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.burger{ display:none; border:1px solid var(--dw-border); background:linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.35)); border-radius:10px; padding:8px 10px; cursor:pointer; font-weight:800; color:var(--dw-accent); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
@media (max-width:760px){ .topnav .menu, .topnav .nav-actions{ display:none !important; } .burger{ display:inline-block; } }

/* ================ Off-canvas ======================= */
.offcanvas-backdrop{ position:fixed; inset:0; background:rgba(2,8,23,.45); opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:60; }
.offcanvas{ position:fixed; top:0; left:0; height:100vh; width:min(84vw, 360px); background:linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.4)); border-right:1px solid var(--dw-border); transform:translateX(-100%); transition:transform .25s ease; z-index:61; display:flex; flex-direction:column; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.offcanvas .oc-header{ padding:14px 16px; border-bottom:1px solid var(--dw-border); display:flex; align-items:center; justify-content:space-between; gap:10px; }
.offcanvas .oc-header .brand{ gap:10px; font-weight:900; color:var(--dw-accent); text-decoration:none; }
.offcanvas .oc-header IMG{ height:36px; filter:drop-shadow(0 2px 3px rgba(2,8,23,.08)); }
.offcanvas .oc-close{ border:1px solid var(--dw-border); background:linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.4)); color:var(--dw-accent); border-radius:10px; padding:8px 10px; cursor:pointer; font-weight:800; }
.offcanvas nav{ padding:12px 10px; display:flex; flex-direction:column; gap:8px; overflow:auto; max-height:calc(100vh - 130px); }
.offcanvas nav A{ text-decoration:none; color:var(--dw-text); font-weight:700; font-size:15px; padding:10px 12px; border-radius:12px; border:1px solid transparent; background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.25)); }
.offcanvas nav A:hover{ border-color:var(--dw-border); box-shadow:0 6px 14px rgba(2,8,23,.08); }
.offcanvas nav A.active{ color:var(--dw-accent); border-color:rgba(0,165,229,.45); background:linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.4)); }
.offcanvas.open{ transform:translateX(0); }
.offcanvas-backdrop.open{ opacity:1; pointer-events:auto; }

/* ================ Modal ============================ */
.modal{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.35); z-index:50; padding:20px; overflow-y:auto; }
.modal__card{ margin:auto; width:min(720px, 95vw); max-height:90vh; overflow-y:auto; border-radius:14px; background:#fff; box-shadow:0 24px 80px rgba(0,0,0,.2); border:1px solid #e5e7eb; padding:18px; }
.modal__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.modal .two, .modal .u-grid-3, .modal .u-grid-4{ display:grid !important; grid-template-columns:1fr !important; gap:14px; }
.modal .input{ flex-direction:column; align-items:stretch; gap:6px; padding:10px 12px; }
.modal .input INPUT, .modal .input SELECT, .modal .input TEXTAREA{ width:100%; font-size:15px; line-height:1.4; min-height:42px; padding:8px 10px; }
.modal INPUT[type="url"], .modal INPUT[type="text"], .modal TEXTAREA{ font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size:14px; }
@media (max-width:640px){ .modal__card{ width:95vw; padding:16px; } }

.x{ border:none; background:#f3f4f6; border-radius:10px; padding:6px 10px; cursor:pointer; }

/* ================ Preloader ======================== */
.preloader{ position:fixed; inset:0; z-index:9999; display:grid; place-items:center; background: radial-gradient(1200px 800px at 10% -10%, rgba(207,239,255,.6) 0%, transparent 60%), radial-gradient(900px 600px at 110% 0%, rgba(232,217,255,.5) 0%, transparent 55%), linear-gradient(180deg, var(--dw-bg), var(--dw-bg-2)); transition:opacity .35s ease, visibility .35s ease; }
.preloader.is-hidden{ opacity:0; visibility:hidden; }
.preloader__panel{ display:flex; flex-direction:column; align-items:center; gap:16px; padding:28px 26px; border-radius:16px; min-width:min(86vw, 360px); text-align:center; }
.preloader__logo{ height:56px; width:auto; filter:drop-shadow(0 4px 10px rgba(2,8,23,.12)); }
.preloader__text{ margin:0; font-size:13px; color:var(--dw-muted); letter-spacing:.2px; }
.preloader__spinner{ width:44px; height:44px; border-radius:999px; position:relative; --ring-c: rgba(0,165,229,.18); --dot-c: var(--dw-accent); box-shadow:inset 0 0 0 2px var(--dw-border); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.preloader__spinner::before, .preloader__spinner::after{ content:""; position:absolute; inset:0; border-radius:inherit; }
.preloader__spinner::before{ border:3px solid transparent; border-top-color:var(--dot-c); border-right-color:var(--dot-c); filter:drop-shadow(0 6px 14px rgba(0,165,229,.35)); animation:dw-spin 1s linear infinite; }
.preloader__spinner::after{ inset:5px; border:2px dashed var(--dw-ring); opacity:.45; animation:dw-spin 3s linear infinite reverse; }
@keyframes dw-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .preloader, .preloader__spinner::before, .preloader__spinner::after{ animation:none !important; transition:none !important; } }

/* ================ Accesibilidad / Fallback ======== */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .dw-glass, .card, .input, .topnav, .offcanvas{ background:#fff; } }

/* ================ Compatibilidad (alias) =========== */
/* Mantener tus clases existentes funcionando sin tocar HTML */
:root{ /* mapear nombres antiguos a nuevos por compatibilidad */
  --bg:var(--dw-bg); --bg-2:var(--dw-bg-2);
  --panel:var(--dw-surface); --panel-strong:var(--dw-surface-strong); --panel-dark:var(--dw-surface-dark);
  --accent:var(--dw-accent); --accent-2:var(--dw-accent-2);
  --text:var(--dw-text); --muted:var(--dw-muted);
  --glass-border:var(--dw-border); --glass-shadow:var(--dw-shadow-lg);
  --blur:var(--dw-blur); --radius-lg:var(--dw-radius-lg); --radius-md:var(--dw-radius-md); --radius-sm:var(--dw-radius-sm);
  --focus:var(--dw-focus); --ring:var(--dw-ring);
}
.glass{ composes: dw-glass; } /* si usas un bundler con CSS Modules, en CSS plano repetimos reglas: */
.glass{ background:var(--dw-surface); border:1px solid var(--dw-border); border-radius:var(--dw-radius-lg); box-shadow:var(--dw-shadow-lg); backdrop-filter:blur(var(--dw-blur)); -webkit-backdrop-filter:blur(var(--dw-blur)); }
.glass-strong{ background:var(--dw-surface-strong); }
.glass-dark{ background:var(--dw-surface-dark); }
.wrap{ composes: u-wrap; }
.wrap{ max-width:1000px; margin:40px auto; padding:0 20px; }
.wrap.narrow{ max-width:460px; margin:64px auto; }
.grid{ display:grid; grid-template-columns:1fr; gap:16px; margin-top:16px; }
@media (min-width:760px){ .grid{ grid-template-columns:repeat(3,1fr); } }
.row{ display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:900px){ .row{ grid-template-columns:1fr 1fr; } }
/* tablas utilidades heredadas */
.row.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.row.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media (max-width:720px){ .row.grid-4{ grid-template-columns:1fr 1fr; } .row.grid-3{ grid-template-columns:1fr; } }
/* login selectors antiguos */
body.login-page{ background: linear-gradient(180deg, var(--dw-bg), var(--dw-bg-2)); }
.login-page .card{ padding:24px 20px; background:var(--dw-surface-strong); }
.login-page H1.center{ margin:0 0 8px; font-size:24px; color:var(--dw-accent); display:flex; align-items:center; gap:10px; justify-content:center; flex-direction:column; text-align:center; }
.login-page H1.center IMG{ height:34px; }
.login-page .desc.center{ margin:0 0 16px; color:var(--dw-muted); text-align:center; }
.login-page .field{ display:flex; flex-direction:column; gap:6px; margin:12px 0; }
.login-page .input{ display:flex; align-items:center; gap:10px; background:linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.55)); border:1px solid var(--dw-border); border-radius:var(--dw-radius-md); padding:12px 14px; box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 8px 18px rgba(2,8,23,.06); }
.login-page .input INPUT{ width:100%; border:0; outline:0; background:transparent; font-size:14px; color:var(--dw-text); }
/* botones históricos */
button,.btn{ /* conservamos comportamiento */ }

/* Oculta mensajes de error por defecto */
.error { display:none; margin-top:10px; font-size:13px; color:#b91c1c; }

/* Botón Mostrar/Ocultar dentro del campo de password */
.input-password { position:relative; }
.input-password .toggle{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  appearance:none; border:1px solid var(--glass-border);
  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.6));
  padding:6px 10px; border-radius:8px; cursor:pointer; font-size:12px; color:var(--muted); font-weight:800;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}

/* Tamaño/centrado del contenedor de login (por si no está aplicado) */
.wrap.login{ max-width:460px; margin:64px auto; padding:0 20px; }
/* Scroll horizontal suave si la tabla se desborda */
.tableWrap { overflow:auto; }

/* Toast básico (no tienes clase en tu CSS actual) */
.toast{
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  padding: 10px 14px; border-radius: 12px; border: 1px solid var(--glass-border);
  background: var(--panel); color: var(--text); box-shadow: var(--glass-shadow);
  backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
  display: none; z-index: 70;
}
/* --- Botones pequeños usados en la tabla --- */
.btn.sm{ padding:8px 12px; border-radius:10px; font-size:13px; line-height:1 }

/* Alias para variantes que ya existen en tu core */
.btn.ghost{ 
  background:linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.3));
  color:var(--accent);
  border:1px solid rgba(0,165,229,.35);
  box-shadow:0 8px 18px rgba(2,8,23,.06);
}
.btn.danger{ background:#ef4444; color:#fff }

/* Acciones en la celda: en fila y compactas */
td.actions{ display:flex; gap:.5rem; flex-wrap:wrap; }

/* Pill para estado y usuario (que tu JS crea como .chip) */
.chip{
  display:inline-block; padding:6px 10px; border-radius:999px;
  font-size:.85rem; border:1px solid var(--ring,#e5e7eb);
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.55));
  color:#111827;
}
.chip.on{ background:#ecfdf5; color:#065f46; border-color:#a7f3d0; }   /* Activo */
.chip.off{ background:#fef2f2; color:#991b1b; border-color:#fecaca; }  /* Inactivo */

/* Contenedor de tabla con scroll horizontal suave si se desborda */
.tableWrap{ overflow:auto; }

/* Toast básico que usa tu helper `toast()` */
.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  padding:10px 14px; border-radius:12px; border:1px solid var(--glass-border);
  background:var(--panel); color:#fff; box-shadow:var(--glass-shadow);
  backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur));
  display:none; z-index:70;
}
.toast.show{ display:block; }
.table td.controls { display:flex; gap:.5rem; flex-wrap:wrap; }
.wrap > .grid{
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* Botones compactos usados en tabla y modales */
.btn.small, .btn.sm { padding:8px 12px; border-radius:10px; font-size:13px; line-height:1; }

/* Variante destructiva (alias para btn-danger) */
.btn-danger, .btn.danger { background:#ef4444; color:#fff; }

/* Celdas de acciones en fila compacta */
td.actions, td.right.nowrap .actions { display:flex; gap:.5rem; flex-wrap:wrap; }

/* Asegura que los modales estén ocultos hasta que el JS los muestre */
#modalLink, #modalBiz { display:none; }
/* Espaciado entre inputs en filtros (fila superior) */
.srch {
  display: flex;
  flex-wrap: wrap;
  gap: 16px; /* separa inputs y botones */
  align-items: flex-end;
}

/* Badge de estado */
.badge.ok {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}
.badge.off {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

/* ================ Fin Core v2 ====================== */