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

/* Alpine: ocultar elementos x-cloak hasta que el componente inicialice (evita flash de dropdowns) */
[x-cloak] { display: none !important; }

/* ── Tokens ── */
:root {
  --bg-app:          hsl(220, 20%, 8%);
  --bg-panel:        hsl(220, 18%, 13%);
  --bg-panel-hover:  hsl(220, 18%, 18%);
  --border-color:    hsl(220, 12%, 20%);
  --text-main:       hsl(220, 10%, 93%);
  --text-muted:      hsl(220, 8%, 55%);
  --text-highlight:  hsl(220, 100%, 98%);
  --accent:          hsl(168, 82%, 35%);
  --accent-hover:    hsl(168, 75%, 43%);
  --accent-glow:     hsla(168, 82%, 35%, 0.16);
  --success:         hsl(150, 60%, 45%);
  --success-bg:      hsla(150, 60%, 45%, 0.12);
  --warning:         hsl(35, 85%, 55%);
  --warning-bg:      hsla(35, 85%, 55%, 0.12);
  --danger:          hsl(355, 75%, 58%);
  --danger-bg:       hsla(355, 75%, 58%, 0.12);
  --ic-amber:        hsl(35, 85%, 58%);
  --ic-blue:         hsl(212, 70%, 60%);
  --ic-purple:       hsl(248, 65%, 70%);
  --ic-coral:        hsl(14, 72%, 60%);
  --glass-bg:        rgba(26, 29, 36, 0.75);
  --glass-border:    rgba(255, 255, 255, 0.06);
  --glass-shadow:    0 8px 32px rgba(0, 0, 0, 0.3);
  --sidebar-w:           240px;
  --sidebar-w-collapsed: 62px;
  --topbar-h:        64px;
}

/* ── Tema Claro (opción 2 — el oscuro es el default) ── */
[data-theme="light"] {
  --bg-app:          hsl(220, 30%, 97%);
  --bg-panel:        hsl(0, 0%, 100%);
  --bg-panel-hover:  hsl(220, 24%, 95%);
  --border-color:    hsl(220, 18%, 89%);
  --text-main:       hsl(220, 25%, 22%);
  --text-muted:      hsl(220, 10%, 46%);
  --text-highlight:  hsl(220, 45%, 14%);
  --accent:          hsl(170, 80%, 30%);
  --accent-hover:    hsl(170, 84%, 24%);
  --accent-glow:     hsla(170, 70%, 38%, 0.12);
  --success:         hsl(150, 58%, 38%);
  --success-bg:      hsla(150, 58%, 42%, 0.12);
  --warning:         hsl(35, 82%, 45%);
  --warning-bg:      hsla(35, 85%, 55%, 0.14);
  --danger:          hsl(355, 72%, 52%);
  --danger-bg:       hsla(355, 75%, 58%, 0.10);
  --ic-amber:        hsl(35, 82%, 42%);
  --ic-blue:         hsl(212, 68%, 46%);
  --ic-purple:       hsl(248, 55%, 56%);
  --ic-coral:        hsl(14, 68%, 46%);
  --glass-bg:        rgba(255, 255, 255, 0.78);
  --glass-border:    rgba(20, 24, 40, 0.08);
  --glass-shadow:    0 8px 32px rgba(20, 24, 40, 0.12);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Móvil (Android): evitar que el navegador auto-infle el texto y que un
   desborde horizontal ensanche el "layout viewport" y escale toda la página
   hacia afuera (~50%). Reforzar el clip en html además de en body. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
  max-width: 100%;
}

body {
  background: var(--bg-app);
  color: var(--text-main);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  overflow-x: hidden;
  max-width: 100%;
}

h1,h2,h3,h4,h5,h6 { font-family: 'Outfit', sans-serif; color: var(--text-highlight); }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }

/* ── Layout ── */
.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  background: var(--bg-panel);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;
  transition: width 0.3s ease, transform 0.3s ease;
  overflow: hidden;
}

.main {
  margin-left: var(--sidebar-w);
  flex: 1;
  min-width: 0;   /* flexbox: permite que el item se encoja al viewport; sin esto min-width:auto lo expande al ancho del contenido (tabla 760px) y rompe el scroll interno en movil */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transition: margin-left 0.3s ease;
}

.topbar {
  height: var(--topbar-h);
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 50;
}

.content { padding: 28px 28px; flex: 1; }

/* ── Sidebar ── */
.sidebar-logo {
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar-logo-icon {
  width: 36px; height: 36px;
  background: var(--accent-glow);
  border: 1px solid var(--accent);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}

.sidebar-logo-text { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 15px; color: var(--text-highlight); }
.sidebar-logo-sub  { font-size: 11px; color: var(--text-muted); }

.sidebar-nav { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; }
/* Scrollbar discreto para el nav cuando los ítems superan el alto de pantalla */
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 13.5px;
  font-weight: 500;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  text-decoration: none;
}

.nav-item:hover { background: var(--bg-panel-hover); color: var(--text-main); }

.nav-item.active {
  background: var(--accent-glow);
  color: var(--accent);
  border-color: hsla(168, 82%, 45%, 0.25);
}

.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ── Acordeón de grupo en sidebar (ej: "Rendidor") ── */
.nav-group-header {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: 8px 12px 6px;
  margin-top: 2px;
  background: transparent; border: none; cursor: pointer;
  color: var(--text-muted);
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  border-radius: 8px;
  transition: color 0.2s ease;
}
.nav-group-header:hover { color: var(--text-main); }
.nav-group-chevron { width: 14px; height: 14px; flex-shrink: 0; transition: transform 0.2s ease; }
.nav-group-chevron.open { transform: rotate(90deg); }
.nav-group-body {
  display: flex; flex-direction: column; gap: 2px;
  padding-left: 8px;
  margin-left: 8px;
  border-left: 1px solid var(--border-color);
}
/* En sidebar colapsado el acordeón se aplana a rail de íconos */
.sidebar-collapsed .nav-group-body {
  padding-left: 0; margin-left: 0; border-left: none;
}

/* F-013 — Badge numérico en ítems del sidebar */
.notif-sidebar-badge {
  position: absolute;
  top: 4px;
  right: 6px;
  background: #ef4444;
  color: white;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 10px;
  pointer-events: none;
}

.sidebar-footer {
  padding: 12px 10px;
  border-top: 1px solid var(--border-color);
}

.user-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  background: var(--bg-panel-hover);
}

.user-avatar {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--accent-glow);
  border: 1px solid var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--accent); font-weight: 600;
}

.user-name  { font-size: 13px; font-weight: 500; color: var(--text-main); }
.user-role  { font-size: 11px; color: var(--text-muted); }

/* ── Sidebar colapsado (F-008) ── */
.sidebar-collapsed .sidebar {
  width: var(--sidebar-w-collapsed);
}
.sidebar-collapsed .main {
  margin-left: var(--sidebar-w-collapsed);
}
.sidebar-collapsed .sidebar-logo {
  justify-content: center;
  padding: 20px 0 16px;
  gap: 0;
}
.sidebar-collapsed .sidebar-logo-text,
.sidebar-collapsed .sidebar-logo-sub {
  display: none;
}
.sidebar-collapsed .sidebar-nav {
  padding: 12px 6px;
}
.sidebar-collapsed .nav-item {
  justify-content: center;
  padding: 10px;
  gap: 0;
}
.sidebar-collapsed .nav-label {
  display: none;
}
.sidebar-collapsed .sidebar-footer {
  padding: 12px 6px;
}
.sidebar-collapsed .user-chip {
  justify-content: center;
  padding: 8px 6px;
  gap: 0;
}
.sidebar-collapsed .user-chip-details,
.sidebar-collapsed .user-chip-logout {
  display: none;
}

/* ── Mobile (F-008) ── */
@media (max-width: 640px) {
  /* Sidebar es overlay — no empuja el contenido */
  .layout .sidebar {
    width: var(--sidebar-w) !important;
    transform: translateX(-100%);
    z-index: 200;
  }
  .layout .main {
    margin-left: 0 !important;
  }
  /* Sidebar visible cuando NO está collapsed */
  .layout:not(.sidebar-collapsed) .sidebar {
    transform: translateX(0);
    box-shadow: 8px 0 40px rgba(0,0,0,0.6);
  }
  /* Backdrop al abrir en mobile */
  .layout:not(.sidebar-collapsed) .sidebar-backdrop {
    display: block;
  }
  .sidebar-backdrop {
    display: none;
    position: fixed; inset: 0;
    z-index: 199;
    background: rgba(0,0,0,0.5);
  }
  /* Tablas: garantizar ancho minimo en movil para que .table-wrap (overflow-x:auto)
     dispare scroll horizontal en vez de encoger las columnas hasta romperlas.
     Aplica solo a <table> reales — el .table-wrap de filtros no tiene tabla. */
  .table-wrap table { min-width: 760px; }
}

/* ── Cards ── */
/* `.card` se usa ~26 veces en el dashboard como panel pero nunca tuvo superficie
   (las páginas de auth definen su propio `.card` inline, que gana por cascada).
   Definirlo acá le da superficie real a Administración y armoniza el resto.
   El padding va inline por card (style="padding:22px") y pisa este default. */
.card {
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 18px 20px;
}

.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  box-shadow: var(--glass-shadow);
  padding: 20px 24px;
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.glass-card:hover { transform: translateY(-3px); border-color: hsla(250,70%,60%,0.2); }

.card-label { font-size: 12px; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.card-value { font-family: 'Outfit', sans-serif; font-size: 32px; font-weight: 700; color: var(--text-highlight); margin: 4px 0; }
.card-sub   { font-size: 12px; color: var(--text-muted); }

.card-icon {
  width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}

.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }

/* ── Tabla ── */
.table-wrap {
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  overflow-x: auto;   /* scroll horizontal dentro del contenedor en pantallas angostas (Android), sin desbordar la página */
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.table-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
}

table { width: 100%; border-collapse: collapse; }
thead th {
  padding: 11px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--bg-panel-hover);
  border-bottom: 1px solid var(--border-color);
}
tbody tr { border-bottom: 1px solid var(--border-color); transition: background 0.15s; }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--bg-panel-hover); }
tbody tr.row-selected { background: var(--accent-glow); }
tbody tr.row-selected:hover { background: var(--accent-glow); }
tbody td { padding: 12px 16px; font-size: 13px; color: var(--text-main); }

/* ── Badges ── */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 500;
}

.badge-pending  { background: var(--warning-bg);  color: var(--warning); }
.badge-approved { background: var(--success-bg);  color: var(--success); }
.badge-rejected { background: var(--danger-bg);   color: var(--danger);  }
.badge-admin    { background: var(--accent-glow);  color: var(--accent);  }
/* Aliases en español: usados por estadoSuscClass() y muchos badges del dashboard,
   pero nunca estuvieron definidos → salían sin pastilla. Mapean a los mismos estilos. */
.badge-aprobado  { background: var(--success-bg);  color: var(--success); }
.badge-pendiente { background: var(--warning-bg);  color: var(--warning); }
.badge-rechazado { background: var(--danger-bg);   color: var(--danger);  }
.badge-supervisor { background: hsla(200,70%,50%,0.12); color: hsl(200,70%,60%); }
.badge-worker   { background: var(--bg-panel-hover); color: var(--text-muted); }
/* Estados del ciclo de vida del gasto fuera de pendiente/aprobado/rechazado (F-010 v2). */
.badge-ensolicitud { background: hsla(220,72%,55%,0.14); color: hsl(220,72%,64%); }
.badge-reembolsado { background: var(--accent-glow);     color: var(--accent);   }
.badge-rendido     { background: hsla(265,60%,58%,0.16); color: hsl(265,60%,70%); }

/* Encabezados ordenables (F-010 v2) */
th.th-sort{cursor:pointer;user-select:none;transition:color .12s}
th.th-sort:hover{color:var(--accent)}
.sort-caret{font-size:10px;color:var(--accent);margin-left:2px}

/* Aviso de truncado del período (F-010 v2) */
.gastos-trunc-aviso{display:flex;align-items:center;gap:9px;padding:9px 14px;margin-bottom:10px;background:var(--warning-bg);border:1px solid var(--warning);border-radius:8px;font-size:12.5px;color:var(--text-main)}
.gastos-trunc-aviso .ic{width:16px;height:16px;flex:none}

/* Barra de acciones de selección (F-010 v2) — agrupada por intención.
   Gap grande entre grupos (14) + gap chico dentro (6) = lectura visual sin divisores. */
.sel-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:10px 14px;margin-bottom:10px;background:var(--accent-glow);border:1px solid var(--accent);border-radius:8px}
.sel-bar .sel-count{font-size:13px;font-weight:600;color:var(--accent);white-space:nowrap}
.sel-bar .sel-group{display:flex;align-items:center;gap:6px}
.sel-bar .sel-tail{margin-left:auto;display:flex;align-items:center;gap:10px}

/* Pie de paginación de tablas (F-010 v2) */
.table-pager{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:11px 14px;border-top:1px solid var(--border-color);font-size:13px;color:var(--text-muted)}
.table-pager .tp-size{display:flex;align-items:center;gap:7px}
.table-pager .tp-size select{padding:5px 8px;width:auto;min-width:62px}
.table-pager .tp-size strong{color:var(--text-main)}
.table-pager .tp-nav{display:flex;align-items:center;gap:8px}
.table-pager .tp-nav span{min-width:104px;text-align:center;font-weight:600;color:var(--text-main)}
.table-pager .tp-nav button[disabled]{opacity:.4;cursor:not-allowed}

/* ── Solicitudes de Reembolso (F-012) ─────────────────────────────────── */
.sol-pill      { display:inline-block; padding:2px 10px; border-radius:20px; font-size:11px; font-weight:700; }
.sol-pill-pend { background:#fef3c7; color:#92400e; }
.sol-pill-ok   { background:#d1fae5; color:#065f46; }
.sol-pill-rej  { background:#fee2e2; color:#b91c1c; }
.sol-pill-gray { background:#f3f4f6; color:#4b5563; }
.sol-card      { border:1px solid var(--border-color); border-radius:16px; padding:18px 20px; cursor:pointer; margin-bottom:16px;
                 background: linear-gradient(135deg, var(--bg-panel-hover), transparent 70%);
                 transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.sol-card:hover{ border-color:var(--accent); box-shadow:0 6px 20px rgba(0,0,0,.07); transform:translateY(-1px); }
.sol-tabs      { display:flex; gap:0; border-bottom:2px solid var(--border); margin-bottom:16px; }
.sol-tab       { padding:8px 18px; cursor:pointer; font-size:13px; font-weight:600; color:var(--text-muted); border-bottom:2px solid transparent; margin-bottom:-2px; transition:color .15s; }
.sol-tab.active{ color:var(--accent); border-bottom-color:var(--accent); }
.sol-empty     { text-align:center; padding:48px 24px; color:var(--text-muted); }
.sol-empty-icon{ font-size:36px; margin-bottom:10px; }
/* F-012 audit F5 — avatar del solicitante en las cards */
.sol-avatar    { width:32px; height:32px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
                 background:var(--accent-glow); color:var(--accent); font-weight:700; font-size:13px; font-family:'Outfit',sans-serif; }
/* F-012 audit F4 — escalamiento por antigüedad de la solicitud pendiente */
.sol-dias      { font-size:12px; font-weight:600; padding:2px 9px; border-radius:20px; white-space:nowrap; }
.sol-dias-ok   { color:var(--text-muted); font-weight:400; }
.sol-dias-ambar{ color:var(--warning); background:var(--warning-bg); }
.sol-dias-rojo { color:var(--danger);  background:var(--danger-bg); }
/* F-012 audit F6 — banners de estado + notas con tokens (respeta dark mode) */
.sol-banner       { display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:8px; margin-bottom:16px; }
.sol-banner-danger{ background:var(--danger-bg);  border:1px solid var(--danger); }
.sol-banner-ok    { background:var(--success-bg); border:1px solid var(--success); }
.sol-banner-icon  { font-size:18px; line-height:1.2; }
.sol-banner-t     { font-weight:700; font-size:13px; margin-bottom:3px; }
.sol-banner-b     { font-size:13px; color:var(--text-main); }
.sol-banner-danger .sol-banner-t{ color:var(--danger); }
.sol-banner-ok     .sol-banner-t{ color:var(--success); }
.sol-note-danger  { margin-top:10px; padding:8px 12px; background:var(--danger-bg); border-radius:6px; font-size:12px; color:var(--danger); }

/* ── F-020 · Tarjeta de pago del reembolso ── */
.pay-card      { background:var(--bg-panel); border:1px solid var(--border-color); border-radius:12px; margin-bottom:16px; overflow:hidden; }
.pay-head      { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 18px; border-bottom:1px solid var(--border-color); }
.pay-head-t    { display:flex; align-items:center; gap:9px; font-weight:700; font-size:14px; }
.pay-body      { padding:4px 18px 0; }
.pay-amount    { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:14px 0; border-bottom:1px solid var(--border-color); }
.pay-amount-k  { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; }
.pay-amount-v  { font-size:1.45rem; font-weight:800; letter-spacing:-.01em; }
.pay-grid      { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 40px; padding:6px 0 14px; }
.dep-row       { display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px solid var(--border-color); min-width:0; }
.dep-k         { font-size:12px; color:var(--text-muted); white-space:nowrap; }
.dep-v         { font-size:13px; font-weight:600; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dep-v.mono    { font-family:ui-monospace,Menlo,monospace; letter-spacing:.02em; }
.pay-foot      { display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; padding:13px 18px; background:var(--bg-app); border-top:1px solid var(--border-color); }
.pay-empty     { padding:16px 18px; font-size:13px; color:var(--text-muted); line-height:1.5; }
@media (max-width:640px){ .pay-grid{ grid-template-columns:1fr; gap:0; } }

/* ── Botones ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 16px; border-radius: 10px; font-size: 13px; font-weight: 500;
  cursor: pointer; border: 1px solid transparent; transition: all 0.2s ease;
  font-family: inherit;
}

.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-primary  { background: var(--accent);          color: #fff; }
.btn-primary:hover  { background: var(--accent-hover); }

.btn-success  { background: var(--success-bg);      color: var(--success); border-color: var(--success); }
.btn-success:hover  { background: var(--success); color: #fff; }

.btn-danger   { background: var(--danger-bg);       color: var(--danger);  border-color: var(--danger); }
.btn-danger:hover   { background: var(--danger);  color: #fff; }

.btn-ghost    { background: transparent; color: var(--text-muted); border-color: var(--border-color); }
.btn-ghost:hover    { background: var(--bg-panel-hover); color: var(--text-main); }

.btn-sm { padding: 5px 10px; font-size: 12px; border-radius: 8px; }
.btn-icon { width: 34px; height: 34px; padding: 0; }

/* ── Iconos Toria — Phosphor duotone vía sprite (#i-*) ──
   Línea en "tinta" (currentColor) + relleno tenue. El color lo da la clase
   semántica (.ic-teal núcleo · .ic-amber Alfred/IA · .ic-blue banco ·
   .ic-purple equipo · .ic-coral movilización · .ic-ink UI neutra ·
   estados intactos). Suaves, nunca duros. */
.ic { width: 1.15em; height: 1.15em; display: inline-block; vertical-align: -0.22em; fill: currentColor; flex: none; }
.ic-sm  { width: 1em;   height: 1em;   vertical-align: -0.16em; }
.ic-lg  { width: 1.5em; height: 1.5em; vertical-align: -0.3em; }
.ic-teal    { color: var(--accent); }
.ic-amber   { color: var(--ic-amber); }
.ic-blue    { color: var(--ic-blue); }
.ic-purple  { color: var(--ic-purple); }
.ic-coral   { color: var(--ic-coral); }
.ic-ink     { color: var(--text-muted); }
.ic-main    { color: var(--text-main); }
.ic-danger  { color: var(--danger); }
.ic-success { color: var(--success); }
.ic-warning { color: var(--warning); }

/* ── Inputs ── */
.input-group { display: flex; flex-direction: column; gap: 5px; }
.input-label { font-size: 12px; font-weight: 500; color: var(--text-muted); }

input, select, textarea {
  background: var(--bg-panel-hover);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  color: var(--text-main);
  font-family: inherit;
  font-size: 13px;
  padding: 9px 13px;
  width: 100%;
  outline: none;
  transition: border-color 0.2s;
}

input:focus, select:focus, textarea:focus { border-color: var(--accent); }

/* F-015 — fila de checkbox de rol (evita que el reset de input width:100% lo rompa) */
.role-check {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.3;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-panel-hover);
  transition: border-color 0.2s;
}
.role-check:hover { border-color: var(--accent); }
.role-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex: none;
  margin: 0;
  padding: 0;
  border-radius: 5px;
  accent-color: var(--accent);
  cursor: pointer;
}
.role-check .text-muted { font-size: 12px; }
input::placeholder, textarea::placeholder { color: var(--text-muted); }
select option { background: var(--bg-panel); }

/* ── Autocomplete / lista flotante (legible en tema claro y oscuro) ── */
.ac-list {
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: var(--glass-shadow);
  overflow: auto;
}
.ac-item {
  display: block; width: 100%; text-align: left;
  padding: 9px 12px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-main);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.12s;
}
.ac-item:last-child { border-bottom: none; }
.ac-item:hover, .ac-item:focus { background: var(--bg-panel-hover); }
.ac-empty { padding: 9px 12px; font-size: 12px; color: var(--text-muted); margin: 0; }

/* Chip suave (acento de marca) — para badges seleccionados en modales */
.chip-soft {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent-glow);
  color: var(--accent);
  padding: 4px 10px; border-radius: 6px;
  font-size: 12.5px; font-weight: 600;
}

/* ── Modal ── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}

.modal {
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
  width: 100%; max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border-color);
  display: flex; align-items: center; justify-content: space-between;
}

/* Wizard de onboarding (guías "Cómo funciona"): apila todos los pasos en la MISMA
   celda de grid → al cambiar de paso hacen crossfade en vez de empujarse uno a
   otro (sin "salto" de alto del modal). */
.guia-steps { display: grid; }
.guia-steps > div { grid-column: 1; grid-row: 1; }

.modal-title { font-family: 'Outfit', sans-serif; font-size: 18px; font-weight: 600; }
.modal-body  { padding: 20px 24px; display: flex; flex-direction: column; gap: 16px; }
.modal-footer { padding: 16px 24px; border-top: 1px solid var(--border-color); display: flex; gap: 10px; justify-content: flex-end; }

/* ── Modal Detalle de Gasto (rediseño — clases propias para no afectar otros modales) ── */
.modal-gd { max-width: 740px; }
.gd-body { padding: 22px 26px 24px; display: flex; flex-direction: column; }

/* Hero: proveedor + monto + estado */
.gd-hero {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: 18px 20px; border-radius: 16px;
  background: linear-gradient(135deg, var(--bg-panel-hover), transparent 70%);
  border: 1px solid var(--border-color);
}
.gd-hero-l { min-width: 0; }
.gd-prov { font-family: 'Outfit', sans-serif; font-size: 21px; font-weight: 700; line-height: 1.2; word-break: break-word; }
.gd-meta { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 5px 14px; font-size: 12.5px; color: var(--text-muted); }
.gd-meta b { color: var(--text-main); font-weight: 600; }

/* Datos del documento en filas "Etiqueta: valor" dentro del hero */
.gd-hero-rows { margin-top: 12px; display: flex; flex-direction: column; gap: 7px; }
.gd-hrow { display: flex; gap: 8px; font-size: 13px; line-height: 1.35; }
.gd-hrow-k { color: var(--text-muted); font-weight: 500; flex-shrink: 0; min-width: 116px; }
.gd-hrow-v { color: var(--text-main); font-weight: 600; min-width: 0; word-break: break-word; }
.gd-hrow-v .sii { color: var(--text-muted); font-weight: 500; }
.gd-hero-r { flex-shrink: 0; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.gd-amount { font-family: 'Outfit', sans-serif; font-size: 1.85rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.gd-amount-sub { font-size: 11.5px; color: var(--text-muted); }

/* Secciones con encabezado tenue */
.gd-section { margin-top: 22px; }
.gd-section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.gd-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); white-space: nowrap; }
.gd-section-line { height: 1px; background: var(--border-color); flex: 1; }

.gd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.gd-full { grid-column: 1 / -1; }

/* Filas de solo-lectura tipo ficha */
.gd-fact { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gd-fact-k { font-size: 11.5px; font-weight: 500; color: var(--text-muted); }
.gd-fact-v { font-size: 14px; font-weight: 600; color: var(--text-main); word-break: break-word; }
.gd-fact-v.muted { font-weight: 500; color: var(--text-muted); }

/* Medidor de confianza IA */
.gd-conf { display: flex; align-items: center; gap: 10px; }
.gd-conf-bar { flex: 1; height: 6px; border-radius: 99px; background: var(--bg-panel-hover); overflow: hidden; max-width: 160px; }
.gd-conf-fill { height: 100%; border-radius: 99px; background: var(--accent); }

@media (max-width: 620px) {
  .gd-hero { flex-direction: column; }
  .gd-hero-r { text-align: left; align-items: flex-start; }
  .gd-grid { grid-template-columns: 1fr; }
}

/* F-001 — tramos del viaje (modal de detalle de movilización, lenguaje gd-*) */
.trip-leg { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-panel-hover); }
.trip-leg.is-excluded { opacity: .5; }
.trip-leg-chk { flex: 0 0 auto; width: 16px; height: 16px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.trip-leg-main { flex: 1; min-width: 0; }
.trip-leg-route { font-size: 13.5px; font-weight: 600; color: var(--text-main); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.trip-leg-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; line-height: 1.4; }
.trip-leg-figs { flex-shrink: 0; text-align: right; display: flex; flex-direction: column; gap: 1px; }
.trip-leg-km { font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.trip-leg-amt { font-size: 14px; font-weight: 700; color: var(--text-main); font-variant-numeric: tabular-nums; }
.trip-rol { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 7px; border-radius: 6px; background: var(--accent-glow); color: var(--accent); }
.trip-rol.is-vuelta { background: var(--bg-panel); color: var(--text-muted); border: 1px solid var(--border-color); }
/* Totales del viaje */
.trip-tot { margin-top: 14px; font-size: 13px; }
.trip-tot-row { display: flex; justify-content: space-between; padding: 4px 0; }
.trip-tot-row span:last-child { font-variant-numeric: tabular-nums; }
.trip-tot-row.is-total { margin-top: 4px; padding-top: 9px; border-top: 1px solid var(--border-color); font-weight: 700; font-size: 14.5px; }

/* F-019 — cards de gasto en el detalle de aprobación (lenguaje gd-*) */
.apg-list { display: flex; flex-direction: column; gap: 10px; max-height: 46vh; overflow-y: auto; padding-right: 4px; }
.apg-card {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 14px 16px; border-radius: 14px;
  background: linear-gradient(135deg, var(--bg-panel-hover), transparent 70%);
  border: 1px solid var(--border-color);
}
.apg-l { min-width: 0; }
.apg-prov { font-family: 'Outfit', sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; word-break: break-word; }
.apg-meta { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--text-muted); }
.apg-meta b { color: var(--text-main); font-weight: 600; }
.apg-desc { margin-top: 6px; font-size: 12px; color: var(--text-muted); font-style: italic; word-break: break-word; }
.apg-motivo { margin-top: 8px; font-size: 12px; color: var(--text-main); background: var(--danger-bg); border-left: 3px solid var(--danger); border-radius: 6px; padding: 6px 10px; }
.apg-link { margin-top: 8px; display: inline-block; font-size: 12px; color: var(--accent-hover); text-decoration: none; font-weight: 600; }
.apg-r { flex-shrink: 0; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.apg-amount { font-family: 'Outfit', sans-serif; font-size: 18px; font-weight: 800; letter-spacing: -0.01em; line-height: 1; color: var(--text-main); }
.apg-amount-old { font-size: 11px; color: var(--text-muted); text-decoration: line-through; }
.apg-summary { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 4px 0 10px; }
.apg-summary-total { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 15px; color: var(--text-main); }

/* F-027 — cards de la bandeja/historial de Aprobaciones */
.apr-card {
  border-radius: 16px; border: 1px solid var(--border-color);
  background: var(--bg-panel-hover);
  box-shadow: 0 2px 6px rgba(0,0,0,.16);
  padding: 18px 20px; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.apr-card:hover { border-color: var(--accent); box-shadow: 0 8px 22px rgba(0,0,0,.22); transform: translateY(-1px); }
.apr-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.apr-title { font-family: 'Outfit', sans-serif; font-size: 16px; font-weight: 700; line-height: 1.2; word-break: break-word; }
.apr-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; }
.apr-amount { font-family: 'Outfit', sans-serif; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; line-height: 1; color: var(--text-main); }
.apr-amount-sub { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.apr-motivo { font-size: 12px; color: var(--text-main); background: var(--danger-bg); border-left: 3px solid var(--danger); border-radius: 6px; padding: 6px 10px; margin-top: 10px; }
.apr-actions { display: flex; gap: 10px; margin-top: 16px; align-items: center; flex-wrap: wrap; }

/* F-019 — cards de la lista de Flujos */
.flw-card {
  border: 1px solid var(--border-color); border-radius: 16px; padding: 20px 22px;
  background: linear-gradient(135deg, var(--bg-panel-hover), transparent 70%);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.flw-card:hover { border-color: var(--accent); box-shadow: 0 6px 20px rgba(0,0,0,.07); transform: translateY(-1px); }
.flw-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.flw-title { font-family: 'Outfit', sans-serif; font-size: 17px; font-weight: 700; color: var(--text-main); line-height: 1.2; }
.flw-steps { display: flex; align-items: stretch; gap: 8px; overflow-x: auto; padding: 16px 2px 4px; }
.flw-step {
  min-width: 152px; border: 1px solid var(--border-color); border-radius: 12px; padding: 11px 13px;
  background: var(--bg-panel); display: flex; flex-direction: column; gap: 2px;
}
.flw-step-k { font-size: 11px; color: var(--text-muted); font-weight: 500; }
.flw-step-name { font-size: 13px; font-weight: 600; color: var(--text-main); }
.flw-step-pol { font-size: 11px; color: var(--accent-hover); }
.flw-step-cond { font-size: 11px; color: var(--warning); }
.flw-arrow { display: flex; align-items: center; color: var(--text-muted); font-size: 15px; }

/* ── Filtros ── */
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.filters input, .filters select { width: auto; min-width: 140px; }

/* ── Section header ── */
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.section-title  { font-family: 'Outfit', sans-serif; font-size: 22px; font-weight: 700; }
.section-sub    { font-size: 13px; color: var(--text-muted); margin-top: 2px; }

/* ── Empty state ── */
.empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.empty-state-icon { font-size: 40px; margin-bottom: 12px; opacity: 0.4; }
.empty-state-text { font-size: 14px; }

/* ── Spinner ── */
.spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--border-color);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Toast ── */
.toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 300; display: flex; flex-direction: column; gap: 10px; }
.toast {
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 12px 18px;
  font-size: 13px;
  box-shadow: var(--glass-shadow);
  display: flex; align-items: center; gap: 10px;
  animation: slideIn 0.3s ease;
  min-width: 280px;
}
.toast-success { border-left: 3px solid var(--success); }
.toast-error   { border-left: 3px solid var(--danger); }
.toast-info    { border-left: 3px solid var(--text-muted); }
.toast-notif   { border-left: 3px solid var(--accent); }  /* F-042 C2: aviso en vivo, clickeable */
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ── Divider ── */
.divider { height: 1px; background: var(--border-color); margin: 8px 0; }

/* ── Utils ── */
.flex         { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.mt-1 { margin-top: 4px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.text-muted { color: var(--text-muted); }
.text-sm    { font-size: 12px; }
.font-bold  { font-weight: 700; }
.w-full     { width: 100%; }
.truncate   { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }

/* ── F-034 F3: bloque de upsell (gating suave) ──────────────────────────────── */
/* Se muestra en una sección cuyo plan/asiento no incluye la capacidad. No es un
   bloqueo brusco: orienta y ofrece la ruta a Administración › Plan y Cupos. */
.upsell-card {
  display: flex; align-items: center; gap: 16px;
  background: var(--bg-panel); border: 1px solid var(--border-color);
  border-left: 4px solid var(--warning);
  border-radius: 12px; padding: 18px 22px; margin: 8px 0 4px;
}
.upsell-card .upsell-ic {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: var(--warning-bg);
}
.upsell-card .upsell-ic .ic { width: 24px; height: 24px; }
.upsell-card .upsell-body { flex: 1 1 auto; min-width: 0; }
.upsell-card .upsell-title { font-weight: 700; color: var(--text-main); font-size: 14px; }
.upsell-card .upsell-msg   { color: var(--text-muted); font-size: 13px; margin-top: 2px; }
.upsell-card .btn { flex: 0 0 auto; }

/* ── F-034 F3b: modal "Permisos de Acceso" ──────────────────────────────────── */
.perm-mods { display: flex; flex-flow: row wrap; gap: 8px; margin: 2px 0 14px; }
.perm-mod {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 12px; border: 1px solid var(--border-color); border-radius: 9px;
  background: var(--bg-app);
}
.perm-mod-info { display: flex; align-items: center; gap: 9px; font-size: 13px; min-width: 0; }
.perm-mod-info strong { color: var(--text-main); }
.perm-mod-meta { color: var(--text-muted); font-size: 12px; white-space: nowrap; }
.perm-mod-acts { display: flex; gap: 6px; flex: 0 0 auto; }

.perm-search { position: relative; margin-bottom: 12px; }
.perm-search .ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--text-muted); pointer-events: none; }
.perm-search input {
  width: 100%; padding: 8px 12px 8px 34px; border: 1px solid var(--border-color);
  border-radius: 9px; background: var(--bg-panel); color: var(--text-main); font-size: 13px;
}
.perm-search input:focus { outline: none; border-color: var(--accent); }

.perm-table { width: 100%; border-collapse: collapse; }
.perm-table thead th {
  position: sticky; top: 0; z-index: 1; background: var(--bg-panel);
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted); font-weight: 700; text-align: left;
  padding: 9px 10px; border-bottom: 1px solid var(--border-color);
}
.perm-table th.col-chk, .perm-table td.col-chk { width: 34px; text-align: center; }
.perm-table th.col-mod, .perm-table td.col-mod { width: 104px; text-align: center; }
.perm-table tbody td { padding: 6px 10px; border-bottom: 1px solid var(--border-color); font-size: 13px; }
.perm-table tbody tr:nth-child(even) { background: var(--bg-app); }
.perm-table tbody tr:hover { background: var(--bg-panel-hover); }
.perm-table tbody tr:last-child td { border-bottom: none; }
.perm-table .uname { font-weight: 600; color: var(--text-main); }
.perm-table input[type=checkbox] { cursor: pointer; }

.perm-table-wrap {
  max-height: 44vh; overflow: auto;
  border: 1px solid var(--border-color); border-radius: 11px;
}

.perm-toggle {
  width: 27px; height: 27px; border-radius: 8px; border: 1px solid var(--border-color);
  background: transparent; color: var(--text-muted); cursor: pointer;
  font-size: 13px; line-height: 1; display: inline-flex; align-items: center;
  justify-content: center; transition: background .12s, border-color .12s, color .12s;
}
.perm-toggle:hover { border-color: var(--accent); color: var(--accent); }
.perm-toggle.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.perm-toggle.on:hover { background: var(--accent-hover); color: #fff; }
.perm-toggle:disabled { opacity: .45; cursor: default; }

/* Control segmentado: 2+ opciones mutuamente excluyentes (estado activo = lenguaje
   de selección de la app: accent-glow + borde + texto accent, igual que nav-item.active). */
.seg { display: inline-flex; width: 100%; gap: 6px; }
.seg-opt {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 12px; min-height: 42px; border: 1px solid var(--border-color); border-radius: 9px;
  background: var(--bg-panel-hover); color: var(--text-muted); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.seg-opt:hover { color: var(--text-main); border-color: var(--accent); }
.seg-opt.is-active { background: var(--accent-glow); color: var(--accent); border-color: var(--accent); }
.seg-opt .ic { width: 15px; height: 15px; }

.perm-bulk {
  display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin-top: 12px;
  padding: 9px 14px; background: var(--accent-glow);
  border: 1px solid var(--accent); border-radius: 10px;
}
.perm-bulk-grp { display: flex; align-items: center; gap: 6px; }
.perm-bulk-lbl { font-size: 12px; color: var(--text-muted); }

/* F-034 rediseño · Resumen de Administración — valor antes que precio.
   El héroe muestra primero lo que Alfred hizo este mes; el cobro se lee como
   retorno, no como pérdida (pain-of-paying). Reusa tokens del tema (dark/light). */
.metric-card {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--bg-app); border: 1px solid var(--border-color);
  border-radius: 10px; padding: 13px 14px; min-width: 0;
}
.metric-label { font-size: 12px; color: var(--text-muted); line-height: 1.3; }
.metric-val   { font-size: 23px; font-weight: 800; color: var(--text-highlight);
  font-family: 'Outfit', sans-serif; line-height: 1.1; }
.resumen-mark {
  width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--warning-bg);
}
.resumen-mark .ic { width: 20px; height: 20px; }
.resumen-row {
  display: flex; justify-content: space-between; gap: 16px;
  font-size: 13px; padding: 7px 0; border-bottom: 1px solid var(--border-color);
}
.resumen-row:last-child { border-bottom: none; }
.resumen-row span:first-child { color: var(--text-muted); }
.resumen-row span:last-child  { font-weight: 600; color: var(--text-main); }
.resumen-foot {
  display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px;
  padding-top: 13px; border-top: 1px solid var(--border-color);
  font-size: 12px; color: var(--text-muted);
}
.resumen-foot .ic { width: 14px; height: 14px; vertical-align: -2px; }
.resumen-cobro-num { font-size: 30px; font-weight: 800; color: var(--accent);
  font-family: 'Outfit', sans-serif; line-height: 1.1; margin-top: 6px; }

/* ── F-042: Centro de notificaciones (drawer master-detail) ─────────────── */
.ntf-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.42);
  z-index: 1190;
}
.ntf-modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 720px; max-width: calc(100vw - 32px);
  height: 600px; max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px);
  background: var(--bg-panel); border: 1px solid var(--border-color);
  border-radius: 16px; box-shadow: 0 12px 48px rgba(0,0,0,.4);
  z-index: 1200; display: flex; flex-direction: column; overflow: hidden;
}
.ntf-head {
  padding: 15px 18px; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; border-bottom: 1px solid var(--border-color); flex-shrink: 0;
}
.ntf-title { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.ntf-tabs { display: flex; gap: 2px; padding: 6px 14px 0; flex-shrink: 0; }
.ntf-tab {
  border: none; background: none; padding: 7px 8px; font-size: 13px; cursor: pointer;
  color: var(--text-muted); border-bottom: 2px solid transparent;
}
.ntf-tab.active { color: var(--text-main); border-bottom-color: var(--accent); }
.ntf-pill {
  font-size: 11px; background: var(--accent); color: #fff;
  border-radius: 9px; padding: 0 6px; margin-left: 3px; font-weight: 700;
}
.ntf-chips {
  display: flex; gap: 7px; padding: 10px 14px; border-bottom: 1px solid var(--border-color);
  overflow-x: auto; white-space: nowrap; flex-shrink: 0;
}
.ntf-chip {
  border: 1px solid var(--border-color); background: transparent; color: var(--text-muted);
  font-size: 12px; padding: 4px 11px; border-radius: 14px; cursor: pointer; flex-shrink: 0;
}
.ntf-chip:hover { background: var(--bg-panel-hover); }
.ntf-chip.active { border-color: var(--accent); background: var(--accent-glow); color: var(--accent); }
.ntf-body { flex: 1; display: flex; min-height: 0; }
.ntf-list {
  width: 258px; flex-shrink: 0; border-right: 1px solid var(--border-color);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.ntf-group { padding: 10px 14px 4px; font-size: 11px; font-weight: 700;
  letter-spacing: .04em; color: var(--text-muted); }
.ntf-row {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  padding: 10px 12px; border-left: 3px solid transparent;
}
.ntf-row:hover { background: var(--bg-panel-hover); }
.ntf-row.active { background: var(--bg-panel-hover); }
.ntf-row.unread { border-left-color: var(--accent); padding-left: 9px; }
.ntf-row__title { font-size: 13px; font-weight: 400; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.ntf-row.unread .ntf-row__title { font-weight: 600; }
.ntf-row__snip { font-size: 12px; color: var(--text-muted); line-height: 1.4; margin-top: 1px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ntf-row__time { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.ntf-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.ntile { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; }
.ntile .ic { width: 18px; height: 18px; }
.ntile.t-teal    { background: var(--accent-glow); }
.ntile.t-success { background: var(--success-bg); }
.ntile.t-warning { background: var(--warning-bg); }
.ntile.t-danger  { background: var(--danger-bg); }
.ntile.t-ink     { background: var(--bg-panel-hover); }
.ntf-detail { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ntf-det-head { padding: 18px 20px 14px; border-bottom: 1px solid var(--border-color);
  display: flex; gap: 12px; align-items: flex-start; }
.ntf-det-head .ntile { width: 40px; height: 40px; border-radius: 10px; }
.ntf-det-head .ntile .ic { width: 22px; height: 22px; }
.ntf-det-body { padding: 16px 20px; overflow-y: auto; flex: 1; }
.ntf-det-body p { font-size: 14px; line-height: 1.6; margin: 0 0 16px; color: var(--text-main); }
.ntf-det-actions { padding: 14px 20px; border-top: 1px solid var(--border-color);
  display: flex; gap: 10px; flex-shrink: 0; }
.ntf-empty { padding: 44px 16px; text-align: center; color: var(--text-muted); font-size: 13px; }
.ntf-empty .ic { width: 28px; height: 28px; display: block; margin: 0 auto 8px; color: var(--accent); }
.ntf-back { display: none; }
@media (max-width: 680px) {
  .ntf-modal { width: calc(100vw - 16px); height: auto; max-height: calc(100dvh - 24px); border-radius: 14px; }
  .ntf-list { width: 100%; border-right: none; }
  .ntf-detail { display: none; }
  .ntf-body.has-detail .ntf-list { display: none; }
  .ntf-body.has-detail .ntf-detail { display: flex; }
  .ntf-back { display: inline-flex; }
}