/* styles.css — Cronos Contenidos · sistema de diseño corporate-tech
   Tres direcciones (Aurora / Eclipse / Acero) vía [data-dir], densidad vía [data-density]. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

*, *::before, *::after { box-sizing: border-box; }

:root {
  /* ── Marca Cronos ───────────────────────────────── */
  --ink:    #0a1929;
  --primary:#003e7e;
  --navy2:  #0f2a4f;
  --navy3:  #1a4f8f;
  --orange: #f47b20;
  --orange-l:#f89b5c;
  --steel:  #d8dde5;

  --accent:   var(--orange);
  --accent-l: var(--orange-l);
  --accent-ink:#ffffff;

  /* ── Estados ────────────────────────────────────── */
  --ok:   #1f9d57;
  --warn: #d4860f;
  --err:  #d8413f;
  --pend: #67768c;
  --proc: #2563c9;

  /* ── Radios / tipografía ───────────────────────── */
  --r-card: 20px;
  --r-pill: 999px;
  --r-btn:  12px;
  --r-field:11px;
  --r-chip: 10px;
  --font: 'Inter', system-ui, -apple-system, sans-serif;

  /* ── Densidad (equilibrada por defecto) ─────────── */
  --pad:      26px;
  --gap:      20px;
  --row-h:    52px;
  --card-pad: 26px;
  --content-max: 1180px;

  /* ── Sombras ────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(10,25,41,.06);
  --shadow:    0 2px 4px rgba(10,25,41,.05), 0 10px 28px rgba(10,25,41,.06);
  --shadow-lg: 0 8px 24px rgba(10,25,41,.10), 0 30px 60px rgba(10,25,41,.14);
  --glow:      0 6px 20px color-mix(in srgb, var(--accent) 38%, transparent);
}

/* ── Densidades ───────────────────────────────────── */
[data-density="comoda"]   { --pad:32px; --gap:24px; --row-h:60px; --card-pad:30px; }
[data-density="compacta"] { --pad:18px; --gap:14px; --row-h:44px; --card-pad:20px; --r-card:14px; }

/* ════════════════════════════════════════════════════
   DIRECCIÓN 1 · AURORA (premium SaaS, claro)  — default
   ════════════════════════════════════════════════════ */
[data-dir="aurora"] {
  --bg: #eef2f9;
  --bg-grad: radial-gradient(1200px 600px at 85% -10%, #e3ebf7 0%, transparent 60%), #eef2f9;
  --surface: #ffffff;
  --surface-2: #f5f8fc;
  --text: #0a1929;
  --text-muted: #5a6b84;
  --text-soft: #8593a8;
  --border: #e5eaf2;
  --border-strong: #d6deea;
  --sidebar-bg: linear-gradient(176deg, #0a1929 0%, #102c52 100%);
  --sidebar-text: #d4deec;
  --sidebar-muted: rgba(212,222,236,.52);
  --sidebar-active-bg: rgba(244,123,32,.14);
  --sidebar-hover: rgba(255,255,255,.06);
  --topbar-bg: rgba(255,255,255,.82);
  --topbar-border: #e5eaf2;
  --field-bg: #ffffff;
}

/* ════════════════════════════════════════════════════
   DIRECCIÓN 2 · ECLIPSE (dark premium)
   ════════════════════════════════════════════════════ */
[data-dir="eclipse"] {
  --bg: #07111d;
  --bg-grad: radial-gradient(1100px 560px at 82% -12%, #102744 0%, transparent 58%), #07111d;
  --surface: #0f2440;
  --surface-2: #0c1e38;
  --text: #eaf1fa;
  --text-muted: #9db2ce;
  --text-soft: #6f86a3;
  --border: rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.14);
  --sidebar-bg: linear-gradient(176deg, #060f1a 0%, #0a1d34 100%);
  --sidebar-text: #cfdcee;
  --sidebar-muted: rgba(207,220,238,.48);
  --sidebar-active-bg: rgba(244,123,32,.18);
  --sidebar-hover: rgba(255,255,255,.05);
  --topbar-bg: rgba(7,17,29,.78);
  --topbar-border: rgba(255,255,255,.08);
  --field-bg: #0b1d35;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow: 0 2px 4px rgba(0,0,0,.25), 0 12px 30px rgba(0,0,0,.4);
  --shadow-lg: 0 20px 60px rgba(0,0,0,.55);
  --glow: 0 6px 22px color-mix(in srgb, var(--accent) 45%, transparent);
}

/* ════════════════════════════════════════════════════
   DIRECCIÓN 3 · ACERO (steel, business tool, más sobrio)
   ════════════════════════════════════════════════════ */
[data-dir="acero"] {
  --bg: #e7ecf3;
  --bg-grad: #e7ecf3;
  --surface: #ffffff;
  --surface-2: #f1f5fa;
  --text: #102c52;
  --text-muted: #5a6a82;
  --text-soft: #8493a8;
  --border: #d9e1ec;
  --border-strong: #c6d1e0;
  --sidebar-bg: linear-gradient(180deg, #102c52 0%, #0f2a4f 100%);
  --sidebar-text: #d2dded;
  --sidebar-muted: rgba(210,221,237,.55);
  --sidebar-active-bg: rgba(244,123,32,.16);
  --sidebar-hover: rgba(255,255,255,.07);
  --topbar-bg: rgba(255,255,255,.9);
  --topbar-border: #d9e1ec;
  --field-bg: #ffffff;
  --r-card: 12px; --r-btn: 9px; --r-field: 8px; --r-chip: 7px;
  --shadow: 0 1px 2px rgba(16,44,82,.06), 0 4px 12px rgba(16,44,82,.05);
  --shadow-lg: 0 10px 30px rgba(16,44,82,.12);
}

/* ── Base ─────────────────────────────────────────── */
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
#root { height: 100%; }
button { font-family: inherit; }
::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); }

/* ════════════════════════ LOGIN ════════════════════════ */
.login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 500px at 78% 8%, rgba(244,123,32,.16) 0%, transparent 55%),
    radial-gradient(1000px 600px at 12% 92%, rgba(26,79,143,.40) 0%, transparent 55%),
    linear-gradient(165deg, #0a1929 0%, #0c213d 48%, #0a1c33 100%);
}
.login-grid-deco {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 75%);
  pointer-events: none;
}
.login-card {
  position: relative;
  width: 100%; max-width: 408px;
  background: rgba(255,255,255,.97);
  border-radius: 22px;
  padding: 40px 38px 34px;
  box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 2px 0 rgba(255,255,255,.5) inset;
  border: 1px solid rgba(255,255,255,.5);
}
.login-brand { display:flex; align-items:center; gap:11px; margin-bottom: 28px; }
.login-sub { color:#5a6b84; font-size:14.5px; margin: 4px 0 26px; line-height:1.5; }
.login-title { font-size: 23px; font-weight: 700; color:#0a1929; letter-spacing:-.02em; margin:0; }

/* ════════════════════════ SHELL ════════════════════════ */
.shell {
  display: grid;
  grid-template-columns: var(--sb-w, 268px) 1fr;
  min-height: 100vh;
  background: var(--bg-grad);
  transition: grid-template-columns .26s cubic-bezier(.4,0,.2,1);
}
[data-sidebar="compacta"] .shell { --sb-w: 76px; }

/* ── Sidebar ── */
.sidebar {
  position: sticky; top: 0; align-self: start;
  height: 100vh;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  display: flex; flex-direction: column;
  padding: 22px 16px 16px;
  overflow: hidden;
  z-index: 30;
}
.sb-logo { display:flex; align-items:center; gap:11px; padding: 4px 8px 4px; height: 40px; }
.sb-nav { margin-top: 26px; display:flex; flex-direction:column; gap: 3px; overflow-y:auto; flex:1; min-height:0; scrollbar-width:none; }
.sb-nav::-webkit-scrollbar{ display:none; }
.sb-group-label {
  font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--sidebar-muted); padding: 16px 12px 7px;
}
[data-sidebar="compacta"] .sb-group-label { font-size:0; height:1px; padding:0; margin:11px 14px; background: rgba(255,255,255,.1); border-radius:1px; }
.sb-item {
  display: flex; align-items: center; gap: 12px;
  padding: 0 12px; height: 42px;
  border-radius: 11px; color: var(--sidebar-text);
  text-decoration: none; font-size: 14px; font-weight: 500;
  cursor: pointer; border: 0; background: transparent; width: 100%; text-align: left;
  position: relative; transition: background .15s, color .15s;
}
.sb-item:hover { background: var(--sidebar-hover); }
.sb-item.active { background: var(--sidebar-active-bg); color: #fff; font-weight: 600; }
.sb-item.active::before {
  content:""; position:absolute; left:-16px; top:50%; transform:translateY(-50%);
  width: 4px; height: 22px; border-radius: 0 4px 4px 0; background: var(--accent);
}
.sb-item .ico { flex: 0 0 20px; display:grid; place-items:center; opacity:.92; }
.sb-item.active .ico { color: var(--accent-l); opacity: 1; }
[data-sidebar="compacta"] .sb-item { justify-content:center; padding:0; }
[data-sidebar="compacta"] .sb-item .lbl,
[data-sidebar="compacta"] .sb-logo .wm,
[data-sidebar="compacta"] .sb-foot-text { display:none; }
[data-sidebar="compacta"] .sb-item.active::before { left:-16px; }
.sb-foot {
  margin-top: 12px; padding: 14px 12px 4px;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: 11.5px; color: var(--sidebar-muted); line-height: 1.5;
}

/* ── Topbar ── */
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 16px;
  padding: 0 var(--pad); height: 70px;
  background: var(--topbar-bg);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid var(--topbar-border);
}
.tb-titles { display:flex; flex-direction:column; gap:2px; min-width:0; }
.tb-crumb { font-size: 12px; color: var(--text-soft); font-weight:500; }
.tb-title { font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height:1.1; }
.tb-spacer { flex: 1; }
.tb-icon-btn {
  width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-muted);
  display: grid; place-items: center; cursor: pointer; transition: .15s;
}
.tb-icon-btn:hover { color: var(--text); border-color: var(--border-strong); }
.sb-toggle { display:none; }

/* user menu */
.usr { display:flex; align-items:center; gap:10px; cursor:pointer; padding:5px 8px 5px 5px; border-radius:var(--r-pill); border:1px solid var(--border); background:var(--surface); position:relative; }
.usr:hover { border-color: var(--border-strong); }
.avatar { width:32px; height:32px; border-radius:50%; background: linear-gradient(135deg, var(--navy3), var(--primary)); color:#fff; display:grid; place-items:center; font-weight:600; font-size:13px; flex:0 0 auto; }
.usr-name { font-size:13px; font-weight:600; line-height:1.1; }
.usr-role { font-size:11px; color:var(--text-soft); }
.menu {
  position:absolute; top:calc(100% + 8px); right:0; min-width:200px;
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  box-shadow: var(--shadow-lg); padding:7px; z-index:50;
}
.menu-item { display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:9px; font-size:13.5px; color:var(--text); cursor:pointer; border:0; background:transparent; width:100%; text-align:left; }
.menu-item:hover { background: var(--surface-2); }
.menu-item.danger { color: var(--err); }
.menu-sep { height:1px; background:var(--border); margin:6px 4px; }

/* ── Content ── */
.content { padding: var(--pad); flex: 1; }
.content-inner { max-width: var(--content-max); margin: 0 auto; width: 100%; }
.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom: var(--gap); flex-wrap:wrap; }
.page-desc { color: var(--text-muted); font-size: 14px; margin: 4px 0 0; max-width: 64ch; line-height:1.55; }

/* ════════════════════════ CARD ════════════════════════ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
}
.card-pad { padding: var(--card-pad); }
.card-head { padding: 20px var(--card-pad); border-bottom: 1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.card-title { font-size: 15.5px; font-weight: 650; font-weight:600; }
.card-sub { font-size: 12.5px; color: var(--text-soft); margin-top:2px; }

/* ════════════════════════ STAT ════════════════════════ */
.stat-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.stat {
  background: var(--surface); border:1px solid var(--border);
  border-radius: var(--r-card); padding: 22px 22px 20px;
  box-shadow: var(--shadow); position:relative; overflow:hidden;
}
.stat-ico {
  width: 42px; height: 42px; border-radius: 12px; display:grid; place-items:center;
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent);
  margin-bottom: 16px;
}
.stat-ico.navy { background: color-mix(in srgb, var(--navy3) 16%, transparent); color: var(--navy3); }
[data-dir="eclipse"] .stat-ico.navy { color: #6fa3e6; }
.stat-num { font-size: 34px; font-weight: 700; letter-spacing: -.03em; line-height:1; font-variant-numeric: tabular-nums; }
.stat-label { font-size: 12.5px; color: var(--text-muted); margin-top: 7px; font-weight:500; }
.stat-delta { font-size:11.5px; font-weight:600; margin-top:9px; display:inline-flex; align-items:center; gap:4px; }
.stat-delta.up { color: var(--ok); }
.stat-delta.flat { color: var(--text-soft); }

/* ════════════════════════ BADGE ════════════════════════ */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px 4px 9px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 600; white-space: nowrap;
  line-height: 1.4;
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.ok   { color: var(--ok);   background: color-mix(in srgb, var(--ok) 13%, transparent); }
.badge.warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 15%, transparent); }
.badge.err  { color: var(--err);  background: color-mix(in srgb, var(--err) 13%, transparent); }
.badge.pend { color: var(--pend); background: color-mix(in srgb, var(--pend) 15%, transparent); }
.badge.proc { color: var(--proc); background: color-mix(in srgb, var(--proc) 13%, transparent); }
[data-dir="eclipse"] .badge.ok   { color:#4fd187; }
[data-dir="eclipse"] .badge.warn { color:#f0ad4e; }
[data-dir="eclipse"] .badge.err  { color:#f06a68; }
[data-dir="eclipse"] .badge.pend { color:#a4b6cc; }
[data-dir="eclipse"] .badge.proc { color:#6aa3ee; }

.tag { display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:7px; font-size:11.5px; font-weight:500; background:var(--surface-2); color:var(--text-muted); border:1px solid var(--border); }

/* ════════════════════════ BUTTON ════════════════════════ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height: 42px; padding: 0 18px; border-radius: var(--r-btn);
  font-size: 14px; font-weight: 600; cursor: pointer; border: 1px solid transparent;
  transition: transform .12s, box-shadow .2s, background .15s, border-color .15s, color .15s;
  white-space: nowrap; text-decoration:none;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 90%, #000); box-shadow: var(--glow); }
.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--border-strong); background: var(--surface-2); }
.btn-subtle { background: var(--surface-2); color: var(--text-muted); }
.btn-subtle:hover { color: var(--text); }
.btn-danger { background: color-mix(in srgb, var(--err) 12%, transparent); color: var(--err); }
.btn-danger:hover { background: color-mix(in srgb, var(--err) 18%, transparent); }
.btn-sm { height: 34px; padding: 0 13px; font-size: 13px; border-radius: calc(var(--r-btn) - 2px); }
.btn-lg { height: 48px; padding: 0 24px; font-size: 15px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn-icon { width: 34px; height: 34px; padding: 0; border-radius: 9px; }

/* ════════════════════════ TABLE ════════════════════════ */
.tbl-wrap { width:100%; overflow-x:auto; }
.tbl { width:100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th {
  text-align:left; font-size: 11.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color: var(--text-soft); padding: 13px var(--card-pad); border-bottom:1px solid var(--border);
  white-space:nowrap; background: var(--surface);
}
.tbl td { padding: 0 var(--card-pad); height: var(--row-h); border-bottom:1px solid var(--border); vertical-align:middle; color: var(--text); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr { transition: background .12s; }
.tbl tbody tr.clickable { cursor:pointer; }
.tbl tbody tr.clickable:hover { background: var(--surface-2); }
.tbl .num { font-variant-numeric: tabular-nums; }
.cell-strong { font-weight:600; }
.cell-mono { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size:12.5px; letter-spacing:-.02em; }
.cell-muted { color: var(--text-muted); }
.row-actions { display:flex; gap:6px; justify-content:flex-end; }

/* ════════════════════════ FIELDS ════════════════════════ */
.field { display:flex; flex-direction:column; gap:7px; }
.field-label { font-size: 13px; font-weight: 600; color: var(--text); }
.field-hint { font-size: 12px; color: var(--text-soft); }
.input, .textarea, .select {
  width:100%; background: var(--field-bg); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--r-field);
  padding: 0 13px; height: 44px; font-size: 14px; font-family: inherit;
  transition: border-color .15s, box-shadow .15s; outline: none;
}
.textarea { height:auto; padding: 12px 13px; line-height: 1.55; resize: vertical; min-height: 92px; }
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.input.invalid { border-color: var(--err); box-shadow: 0 0 0 3px color-mix(in srgb, var(--err) 16%, transparent); }
.field-err { font-size:12px; color: var(--err); font-weight:500; display:flex; align-items:center; gap:5px; }
.select { appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%238593a8' d='M1 1l5 5 5-5'/></svg>"); background-repeat:no-repeat; background-position:right 13px center; padding-right:34px; cursor:pointer; }
.input-wrap { position:relative; display:flex; align-items:center; }
.input-wrap .lead { position:absolute; left:13px; color:var(--text-soft); display:flex; pointer-events:none; }
.input-wrap .input { padding-left: 40px; }

/* search */
.search { position:relative; min-width: 220px; }
.search .input { padding-left: 38px; height: 42px; }
.search .ico { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--text-soft); }

/* segmented radio (modo prefijo etc) */
.seg { display:inline-flex; padding:3px; gap:3px; background:var(--surface-2); border:1px solid var(--border); border-radius: var(--r-btn); }
.seg button { border:0; background:transparent; color:var(--text-muted); font-weight:600; font-size:13px; padding:8px 16px; border-radius: calc(var(--r-btn) - 3px); cursor:pointer; transition:.15s; }
.seg button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
[data-dir="eclipse"] .seg button.on { background: var(--navy3); color:#fff; }

/* prefix chips */
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip {
  display:inline-flex; align-items:center; gap:7px; padding:6px 9px 6px 12px;
  background: var(--surface-2); border:1px solid var(--border); border-radius: var(--r-chip);
  font-size: 13px; font-weight:500;
}
.chip .idx { font-size:11px; color:var(--text-soft); font-variant-numeric:tabular-nums; }
.chip button { border:0; background:transparent; color:var(--text-soft); cursor:pointer; display:grid; place-items:center; width:18px; height:18px; border-radius:5px; }
.chip button:hover { background: color-mix(in srgb, var(--err) 14%, transparent); color: var(--err); }

/* ════════════════════════ MODAL ════════════════════════ */
.overlay {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(8,17,29,.55);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display:grid; place-items:center; padding: 24px;
  animation: fadein .18s ease;
}
.modal {
  width:100%; max-width: 560px; background: var(--surface);
  border:1px solid var(--border); border-radius: var(--r-card);
  box-shadow: var(--shadow-lg); max-height: calc(100vh - 48px); display:flex; flex-direction:column;
  animation: pop .22s cubic-bezier(.3,.7,.4,1);
}
.modal-head { padding: 22px var(--card-pad) 16px; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.modal-title { font-size:18px; font-weight:700; letter-spacing:-.01em; }
.modal-body { padding: 4px var(--card-pad) 8px; overflow-y:auto; display:flex; flex-direction:column; gap:18px; }
.modal-foot { padding: 18px var(--card-pad) 22px; display:flex; gap:10px; justify-content:flex-end; }

/* ════════════════════════ EMPTY ════════════════════════ */
.empty { text-align:center; padding: 56px 24px; display:flex; flex-direction:column; align-items:center; gap:6px; }
.empty-ico { width:62px; height:62px; border-radius:18px; background: var(--surface-2); border:1px solid var(--border); display:grid; place-items:center; color: var(--text-soft); margin-bottom: 8px; }
.empty-title { font-size:16px; font-weight:650; font-weight:600; }
.empty-text { font-size:13.5px; color: var(--text-muted); max-width: 42ch; line-height:1.55; }

/* ════════════════════════ MISC ════════════════════════ */
.divider { height:1px; background:var(--border); margin: var(--gap) 0; }
.grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.grid-3 { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--gap); }
.split { display:grid; grid-template-columns: minmax(0,1.85fr) minmax(0,1fr); gap: var(--gap); align-items: start; }
.split.even { grid-template-columns: minmax(0,1.55fr) minmax(0,1fr); }
@media (max-width: 920px) { .split, .split.even { grid-template-columns: 1fr; } }
.row { display:flex; align-items:center; gap: 12px; }
.col { display:flex; flex-direction:column; }
.gap-sm { gap: 8px; } .gap-lg { gap: 20px; }
.muted { color: var(--text-muted); }
.soft { color: var(--text-soft); }
.spacer { flex:1; }
.mono { font-family: ui-monospace,'SF Mono',Menlo,monospace; }
.stack { display:flex; flex-direction:column; gap: var(--gap); }

/* progress */
.progress { height: 10px; border-radius: var(--r-pill); background: var(--surface-2); overflow:hidden; border:1px solid var(--border); }
.progress > i { display:block; height:100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--accent), var(--accent-l)); transition: width .4s cubic-bezier(.4,0,.2,1); }
.ring { transform: rotate(-90deg); }

/* sms preview bubble */
.sms {
  background: var(--surface-2); border:1px solid var(--border); border-radius: 14px 14px 14px 4px;
  padding: 12px 14px; font-size: 13.5px; line-height: 1.5; max-width: 420px; position:relative;
}
.sms .meta { font-size: 11px; color: var(--text-soft); margin-top:7px; display:flex; gap:10px; }
.sms.invalid { border-color: color-mix(in srgb, var(--err) 45%, var(--border)); background: color-mix(in srgb, var(--err) 7%, var(--surface)); }

/* spinner */
.spinner { width: 18px; height: 18px; border-radius:50%; border: 2.5px solid color-mix(in srgb, currentColor 25%, transparent); border-top-color: currentColor; animation: spin .7s linear infinite; }
.spinner.lg { width: 34px; height: 34px; border-width: 3.5px; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadein { from { opacity:0; } }
@keyframes pop { from { opacity:0; transform: translateY(10px) scale(.98); } }
@keyframes slideup { from { transform: translateY(10px); } to { transform: none; } }
.anim-in { animation: slideup .4s cubic-bezier(.2,.7,.3,1); }
@media (prefers-reduced-motion: reduce) { .anim-in { animation: none; } }

/* toast */
.toast-wrap { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 120; display:flex; flex-direction:column; gap:10px; align-items:center; }
.toast { display:flex; align-items:center; gap:11px; background: var(--ink); color:#fff; padding: 12px 16px 12px 14px; border-radius: 13px; box-shadow: var(--shadow-lg); font-size: 13.5px; font-weight:500; animation: pop .25s cubic-bezier(.3,.7,.4,1); border:1px solid rgba(255,255,255,.08); }
.toast .ico-ok { color: #4fd187; }

/* responsive */
@media (max-width: 920px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; top: 0; width: 280px; transform: translateX(-100%); transition: transform .26s cubic-bezier(.4,0,.2,1); box-shadow: var(--shadow-lg); }
  [data-mobileopen="1"] .sidebar { transform: none; }
  [data-mobileopen="1"]::after { content:""; position:fixed; inset:0; background:rgba(8,17,29,.5); z-index:25; }
  .sb-toggle { display:grid; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .usr-name, .usr-role { display:none; }
}
@media (max-width: 560px) {
  .stat-grid { grid-template-columns: 1fr; }
  .tb-title { font-size: 17px; }
}

/* Cronos overrides */
.btn.is-off{opacity:.5;pointer-events:none}

/* combobox con buscador (select grande) */
.combo { position: relative; }
.combo-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-field);
  box-shadow: var(--shadow-lg); max-height: 300px; overflow-y: auto; padding: 6px;
}
.combo-item { padding: 9px 11px; border-radius: 8px; font-size: 13.5px; cursor: pointer; color: var(--text); }
.combo-item:hover, .combo-item.active { background: var(--surface-2); }
.combo-empty { padding: 14px; font-size: 13px; color: var(--text-soft); text-align: center; }