/* ============================================================================
   MAILSVC — Design System v2.0 (MUI Minimals tokens)
   v2.0: adopción de tokens visuales MUI Minimals (modo oscuro) — paleta
        primary verde #00A76F, surfaces grey-neutros, tipografía Public Sans.
        Estructura semántica (nombres de variables) preservada para
        compatibilidad con templates y macros existentes. PDFs/Excels NO
        afectados (mantienen paleta propia inline).
   v1.1: grilla 4-col, alturas uniformes, proporciones, alineación formularios.
   ============================================================================ */

/* ── 1. Reset & base ─────────────────────────────────────────────────────── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html,body { height:100%; }
img,svg { display:block; max-width:100%; }
button { font:inherit; cursor:pointer; }
input,select,textarea { font:inherit; }
a { color:inherit; text-decoration:none; }
code { font-family:var(--font-mono); font-size:0.92em; }

/* Accesibilidad — foco visible consistente para teclado */
:focus-visible {
  outline:2px solid var(--primary);
  outline-offset:2px;
  border-radius:3px;
}
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline:none; }
.btn:focus-visible { outline-offset:3px; }
.nav a:focus-visible { outline-offset:-2px; }

/* ── 2. Design tokens — MUI Minimals dark ───────────────────────────────── */
:root {
  /* Surfaces — MUI Minimals dark backgrounds (grey-neutros) */
  --bg-0:#161C24;          /* background.default */
  --bg-1:#1C252E;          /* background.paper / cards */
  --bg-2:#14191F;          /* superficies más oscuras */
  --bg-3:#0F1419;          /* pisos / contenedores externos */
  --bg-elevated:#28323D;   /* background.neutral / hover */
  --overlay:rgba(20,25,31,0.65);

  /* Borders */
  --border-subtle:#28323D;
  --border:rgba(145,158,171,0.20);
  --border-strong:rgba(145,158,171,0.32);

  /* Text */
  --text-1:#FFFFFF;        /* text.primary */
  --text-2:#C4CDD5;        /* énfasis intermedio */
  --text-3:#919EAB;        /* text.secondary */
  --text-4:#637381;        /* text.disabled */

  /* Brand & states — MUI Minimals */
  --primary:#00A76F;       /* green.main — botones primarios, links, foco */
  --primary-hover:#22C55E; /* green.light — hover state */
  --primary-dark:#007867;  /* green.dark — pressed */
  --primary-soft:rgba(0,167,111,0.10);
  --primary-soft-2:rgba(0,167,111,0.18);

  --secondary:#8E33FF;     /* purple.main — acentos secundarios */
  --secondary-soft:rgba(142,51,255,0.14);

  --success:#22C55E;       /* success.main */
  --success-bg:rgba(34,197,94,0.14);
  --warning:#FFAB00;       /* warning.main */
  --warning-bg:rgba(255,171,0,0.14);
  --danger:#FF5630;        /* error.main */
  --danger-bg:rgba(255,86,48,0.14);
  --info:#00B8D9;          /* info.main — cyan */
  --info-bg:rgba(0,184,217,0.14);
  --neutral:#919EAB;
  --neutral-bg:rgba(145,158,171,0.12);

  /* Typography — Public Sans Variable (con fallbacks sistema) */
  --font-sans:'Public Sans Variable','Public Sans',-apple-system,'Segoe UI',system-ui,sans-serif;
  --font-mono:'JetBrains Mono','Consolas','SF Mono',monospace;

  --fs-xs:11px;
  --fs-sm:12px;
  --fs-base:13.5px;
  --fs-md:14px;
  --fs-lg:16px;
  --fs-xl:20px;
  --fs-2xl:24px;
  --fs-3xl:30px;

  --lh-tight:1.2;
  --lh-normal:1.5;
  --lh-loose:1.65;

  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;
  --fw-bold:700;

  /* Spacing (4px base) */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px; --sp-9:56px;

  /* Radii */
  --r-sm:6px;
  --r-md:8px;
  --r-lg:12px;
  --r-xl:16px;
  --r-pill:999px;

  /* Shadows */
  --shadow-1:0 1px 2px rgba(0,0,0,0.18);
  --shadow-2:0 4px 12px rgba(0,0,0,0.28);
  --shadow-3:0 12px 32px rgba(0,0,0,0.42);

  /* Layout */
  --sidebar-w:248px;
  --content-pad-x:32px;
  --content-pad-y:28px;
  --gap-grid:16px;
  --gap-grid-lg:20px;

  /* Control heights — clave para alineación de filtros y formularios */
  --h-control:38px;
  --h-control-lg:44px;

  --tr-fast:120ms ease;
  --tr-base:200ms ease;
}

/* ── 3. Tipografía base ──────────────────────────────────────────────────── */
body {
  font-family:var(--font-sans);
  font-size:var(--fs-base);
  line-height:var(--lh-normal);
  color:var(--text-1);
  background:var(--bg-0);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:'ss01','cv11';
}
h1,h2,h3,h4 { font-weight:var(--fw-semibold); line-height:var(--lh-tight); color:var(--text-1); letter-spacing:-0.01em; }
h1 { font-size:var(--fs-3xl); font-weight:var(--fw-bold); }
h2 { font-size:var(--fs-2xl); }
h3 { font-size:var(--fs-lg); }
h4 { font-size:var(--fs-md); }
.muted { color:var(--text-3); }
.dim   { color:var(--text-4); }
.mono  { font-family:var(--font-mono); font-feature-settings:normal; }
.tabular { font-variant-numeric:tabular-nums; }

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

/* Sidebar */
.sidebar {
  width:var(--sidebar-w); flex-shrink:0;
  background:var(--bg-2);
  border-right:1px solid var(--border);
  padding:var(--sp-6) var(--sp-4);
  position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column;
  overflow-y:auto;
  z-index:10;
}
.brand {
  display:flex; align-items:center; gap:var(--sp-2);
  padding:0 var(--sp-3) var(--sp-1);
  font-size:var(--fs-lg); font-weight:var(--fw-bold);
  color:var(--primary); letter-spacing:-0.01em;
}
.brand-dot { width:8px; height:8px; border-radius:50%; background:var(--success); box-shadow:0 0 6px rgba(52,211,153,0.6); }
.brand-sub {
  padding:0 var(--sp-3); margin-bottom:var(--sp-6);
  font-size:var(--fs-xs); color:var(--text-3);
  letter-spacing:0.08em; text-transform:uppercase;
}
.nav { display:flex; flex-direction:column; gap:2px; }
.nav-section {
  padding:var(--sp-5) var(--sp-3) var(--sp-1);
  font-size:10px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--text-4); font-weight:var(--fw-semibold);
}
.nav a {
  display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-3);
  border-radius:var(--r-md);
  color:var(--text-3);
  font-size:var(--fs-md); font-weight:var(--fw-medium);
  transition:var(--tr-fast);
  min-height:var(--h-control);
}
.nav a .nav-icon { width:18px; text-align:center; flex-shrink:0; opacity:0.8; }
/* Iconify icons en sidebar — dimensionado fijo + alineación vertical */
.nav a .nav-icon.iconify { font-size:20px; display:inline-flex; align-items:center; justify-content:center; }
.nav a:hover { background:rgba(255,255,255,0.03); color:var(--text-1); }
.nav a.active {
  background:var(--primary-soft);
  color:var(--primary);
  font-weight:var(--fw-semibold);
}
.nav a.active .nav-icon { opacity:1; }
.nav .nav-count {
  margin-left:auto;
  background:var(--danger); color:var(--bg-0);
  font-size:10px; font-weight:var(--fw-bold);
  padding:1px var(--sp-2); border-radius:var(--r-pill);
  line-height:1.4;
}

/* Mobile sidebar */
.menu-btn {
  display:none;
  background:transparent; border:1px solid var(--border);
  color:var(--text-1); padding:var(--sp-2) var(--sp-3);
  border-radius:var(--r-md); font-size:var(--fs-md);
  align-items:center; gap:var(--sp-2);
  height:var(--h-control);
}
.menu-btn:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.sidebar-backdrop {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,0.55); z-index:99;
}

/* Main */
.main { flex:1; min-width:0; padding:var(--content-pad-y) var(--content-pad-x) var(--sp-9); }
.main-narrow { max-width:1180px; }

.back-link {
  display:inline-flex; align-items:center; gap:var(--sp-1);
  font-size:var(--fs-sm); color:var(--primary); margin-bottom:var(--sp-3);
}
.back-link:hover { color:var(--primary-hover); }

.topbar {
  display:flex; justify-content:space-between; align-items:center;
  gap:var(--sp-4); margin-bottom:var(--sp-6); flex-wrap:wrap;
}
.topbar h2 { font-size:var(--fs-2xl); font-weight:var(--fw-semibold); }
.topbar-controls { display:flex; gap:var(--sp-2); align-items:center; flex-wrap:wrap; }
.user-info { font-size:var(--fs-sm); color:var(--text-3); white-space:nowrap; }
.user-info a { color:var(--primary); }

/* ── 5. GRILLA DASHBOARD — 4 columnas reales ─────────────────────────────── */
.dashboard-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--gap-grid);
  margin-bottom:var(--gap-grid);
}
.dashboard-grid:last-child { margin-bottom:0; }
.dg-1 { grid-column:span 1; }
.dg-2 { grid-column:span 2; }
.dg-3 { grid-column:span 3; }
.dg-4 { grid-column:span 4; }

/* ── 6. Cards & paneles — altura uniforme via flex ──────────────────────── */
.card, .kpi {
  background:var(--bg-1);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:var(--sp-5);
  display:flex; flex-direction:column;
  min-width:0;
}
.card-body { flex:1; display:flex; flex-direction:column; }
.card-flush { padding:0; overflow:hidden; }

.card-head {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:var(--sp-4); gap:var(--sp-3);
}
.card-head h3 { font-size:var(--fs-md); font-weight:var(--fw-semibold); }
.card-head .link { font-size:var(--fs-sm); color:var(--primary); font-weight:var(--fw-medium); white-space:nowrap; }
.card-head .link:hover { color:var(--primary-hover); }

.section-title {
  font-size:var(--fs-xs); color:var(--text-3);
  text-transform:uppercase; letter-spacing:0.08em;
  font-weight:var(--fw-semibold); margin-bottom:var(--sp-3);
}

/* ── 7. KPI específico — estructura uniforme con baseline alineado ──────── */
/* Estructura obligatoria por cada .kpi:
     .kpi-head      (label)        — fila 1: altura fija
     .kpi-value     (número)       — fila 2: altura fija
     .kpi-sub       (subtítulo)    — fila 3: altura fija
     .kpi-cta-slot  (cta o vacío)  — fila 4: SIEMPRE presente para preservar baseline
   Cada slot tiene min-height idéntico entre cards → todas las cards quedan
   alineadas pixel-perfect sin importar si tienen CTA o no. */
.kpi {
  display:grid;
  grid-template-rows:auto auto auto auto;
  gap:var(--sp-2);
  min-height:172px;
}
.kpi-head {
  display:flex; justify-content:space-between; align-items:center; gap:var(--sp-2);
  font-size:var(--fs-xs); color:var(--text-3);
  text-transform:uppercase; letter-spacing:0.08em; font-weight:var(--fw-semibold);
  min-height:18px;
}
.kpi-value {
  font-size:var(--fs-3xl); font-weight:var(--fw-bold);
  line-height:1; letter-spacing:-0.025em;
  font-variant-numeric:tabular-nums;
  min-height:30px;
}
.kpi-value.success { color:var(--success); }
.kpi-value.danger  { color:var(--danger); }
.kpi-value.warning { color:var(--warning); }
.kpi-value.primary { color:var(--primary); }
.kpi-sub {
  font-size:var(--fs-sm); color:var(--text-3);
  min-height:20px;
}
.kpi-cta-slot {
  min-height:22px;
  margin-top:auto;
  display:flex; align-items:flex-end;
}
.kpi-cta {
  font-size:var(--fs-sm); color:var(--primary);
  display:inline-flex; align-items:center; gap:var(--sp-1); font-weight:var(--fw-medium);
}
.kpi-cta:hover { color:var(--primary-hover); }

/* ── 8. Grillas auxiliares (formularios, etc.) ──────────────────────────── */
.grid { display:grid; gap:var(--gap-grid); }
.grid-2 { grid-template-columns:repeat(2,1fr); }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-4 { grid-template-columns:repeat(4,1fr); }
.row-gap { margin-bottom:var(--gap-grid); }

/* ── 9. Forms — controles con altura uniforme ────────────────────────────── */
.field-label {
  display:block;
  font-size:var(--fs-xs); color:var(--text-3);
  text-transform:uppercase; letter-spacing:0.06em;
  font-weight:var(--fw-semibold); margin-bottom:var(--sp-2);
  min-height:14px;
}
.input, .select, .textarea {
  width:100%;
  height:var(--h-control);
  background:var(--bg-2);
  border:1px solid var(--border);
  color:var(--text-1);
  padding:0 var(--sp-3);
  border-radius:var(--r-md);
  font-size:var(--fs-md);
  font-family:var(--font-sans);
  transition:var(--tr-fast);
}
.textarea { height:auto; padding:var(--sp-3); resize:vertical; min-height:80px; }
.input:focus, .select:focus, .textarea:focus {
  outline:none; border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-soft);
}
.input::placeholder { color:var(--text-4); }
.input-sm, .select-sm {
  height:var(--h-control);
  padding:0 var(--sp-3); font-size:var(--fs-base);
}
.select {
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237a93b3' stroke-width='2.5'><polyline points='6 9 12 15 18 9'></polyline></svg>");
  background-repeat:no-repeat;
  background-position:right var(--sp-3) center;
  padding-right:var(--sp-7);
}

/* Filter bar (filtros generales con altura uniforme) */
.filter-bar {
  display:flex; gap:var(--sp-2); flex-wrap:wrap; align-items:center;
  margin-bottom:var(--sp-4);
}
.filter-bar .input,
.filter-bar .select { width:auto; min-width:140px; height:var(--h-control); }
.filter-bar .lbl { font-size:var(--fs-sm); color:var(--text-3); }
.filter-bar .grow { flex:1; min-width:180px; }
.filter-bar .right { margin-left:auto; display:flex; gap:var(--sp-2); align-items:center; }
.filter-bar .btn { height:var(--h-control); }

/* Form grids (formulario alineado — todos los campos al mismo alto) */
.form-grid { display:grid; gap:var(--sp-3) var(--sp-4); align-items:end; }
.form-grid .field { display:flex; flex-direction:column; min-width:0; }
.form-grid .field-action { justify-content:flex-end; }
.form-grid .field-action .btn { width:100%; height:var(--h-control); }

/* Grid presets para formularios de filtros (responsive baked in) */
.form-grid-3 { grid-template-columns:1.6fr 1.1fr 1.6fr auto; }
.form-grid-4 { grid-template-columns:repeat(4, 1fr) auto; }
@media (max-width:1024px) {
  .form-grid-3, .form-grid-4 { grid-template-columns:repeat(2, 1fr); }
  .form-grid-3 .field-action,
  .form-grid-4 .field-action { grid-column:span 2; }
}
@media (max-width:540px) {
  .form-grid-3, .form-grid-4 { grid-template-columns:1fr; }
  .form-grid-3 .field-action,
  .form-grid-4 .field-action { grid-column:span 1; }
}

/* Search-bar — patrón unificado (busqueda + filtros + acción + meta) */
.search-bar {
  display:grid;
  grid-template-columns:minmax(220px, 1fr) minmax(160px, auto) auto auto;
  gap:var(--sp-3) var(--sp-4);
  align-items:end;
  margin-bottom:var(--sp-4);
}
.search-bar .field { display:flex; flex-direction:column; min-width:0; gap:var(--sp-2); }
.search-bar .field .input,
.search-bar .field .select { height:var(--h-control); }
.search-bar .field-action .btn { height:var(--h-control); }
.search-bar .meta {
  font-size:var(--fs-sm); color:var(--text-3);
  align-self:center;
  white-space:nowrap;
  padding-bottom:9px;
}
.search-bar .meta strong { color:var(--text-2); font-weight:var(--fw-semibold); }
@media (max-width:1024px) {
  .search-bar { grid-template-columns:1fr 1fr; }
  .search-bar .field-action { grid-column:span 2; }
  .search-bar .meta { grid-column:span 2; padding-bottom:0; padding-top:var(--sp-1); text-align:right; }
}
@media (max-width:540px) {
  .search-bar { grid-template-columns:1fr; }
  .search-bar .field-action,
  .search-bar .meta { grid-column:span 1; text-align:left; }
}

/* Segmented control — grupo de toggles tipo tabs (alerts) */
.seg-control {
  display:inline-flex;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:3px;
  background:var(--bg-2);
  gap:2px;
  margin-bottom:var(--sp-4);
  height:var(--h-control);
}
.seg-control a {
  display:inline-flex; align-items:center; justify-content:center;
  padding:0 var(--sp-4);
  border-radius:6px;
  font-size:var(--fs-sm); font-weight:var(--fw-semibold);
  color:var(--text-3);
  transition:var(--tr-fast);
  min-width:80px;
}
.seg-control a:hover { color:var(--text-1); background:rgba(255,255,255,0.03); }
.seg-control a.active {
  background:var(--primary-soft);
  color:var(--primary);
}
.seg-control .count {
  display:inline-block; margin-left:var(--sp-2);
  font-size:10px; padding:1px 6px; border-radius:var(--r-pill);
  background:rgba(255,255,255,0.08); color:var(--text-3); font-weight:var(--fw-bold);
}
.seg-control a.active .count { background:var(--primary); color:var(--bg-0); }

/* Presets pills (ahora viven en su propia fila, alineados) */
.presets {
  display:flex; gap:var(--sp-2); flex-wrap:wrap; align-items:center;
  margin-top:var(--sp-3);
  padding-top:var(--sp-3);
  border-top:1px dashed var(--border-subtle);
}
.presets-label { font-size:var(--fs-xs); color:var(--text-3); text-transform:uppercase; letter-spacing:0.06em; font-weight:var(--fw-semibold); margin-right:var(--sp-1); }
.preset {
  font-size:var(--fs-xs); padding:5px var(--sp-3);
  border-radius:var(--r-pill);
  background:var(--primary-soft); color:var(--primary);
  border:none; font-weight:var(--fw-medium);
  transition:var(--tr-fast);
}
.preset:hover { background:var(--primary-soft-2); }
.preset.active { background:var(--primary); color:var(--bg-0); }

/* ── 10. Botones ─────────────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  height:var(--h-control);
  padding:0 var(--sp-5);
  border-radius:var(--r-md);
  border:1px solid transparent;
  background:var(--primary); color:var(--bg-0);
  font-weight:var(--fw-semibold); font-size:var(--fs-md);
  transition:var(--tr-fast);
  white-space:nowrap;
}
.btn:hover { background:var(--primary-hover); transform:translateY(-1px); }
.btn:active { transform:translateY(0); }
.btn-sm { height:32px; padding:0 var(--sp-3); font-size:var(--fs-sm); }
.btn-lg { height:var(--h-control-lg); padding:0 var(--sp-6); font-size:var(--fs-lg); }
.btn-block { width:100%; }
.btn-outline { background:transparent; color:var(--text-1); border-color:var(--border); }
.btn-outline:hover { background:rgba(255,255,255,0.04); border-color:var(--border-strong); color:var(--text-1); }
.btn-ghost { background:transparent; color:var(--text-3); border-color:transparent; }
.btn-ghost:hover { background:rgba(255,255,255,0.04); color:var(--text-1); transform:none; }
.btn-danger { background:var(--danger); color:var(--bg-0); }
.btn-danger:hover { background:#fa8e8e; }
.btn-warning { background:var(--warning); color:var(--bg-0); }
.btn-warning:hover { background:#ffcd54; }

/* Send control — botón con destinatario configurable */
.send-control {
  display:inline-flex; align-items:center;
  gap:var(--sp-3);
  height:var(--h-control);
  padding:0 var(--sp-3) 0 var(--sp-3);
  background:transparent;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  font-size:var(--fs-sm);
  color:var(--text-2);
}
.send-control button.send-btn {
  border:none; background:transparent;
  display:inline-flex; align-items:center; gap:var(--sp-2);
  color:var(--text-1); font-weight:var(--fw-semibold);
  height:100%; padding:0;
}
.send-control button.send-btn:hover { color:var(--primary); }
.send-control .sep { width:1px; height:18px; background:var(--border); }
.send-control .dest { font-size:var(--fs-xs); color:var(--text-3); display:flex; align-items:center; gap:var(--sp-2); }
.send-control .dest strong { color:var(--text-2); font-weight:var(--fw-medium); font-family:var(--font-mono); }
.send-control .dest a { color:var(--primary); font-size:var(--fs-xs); }
.send-control:hover { border-color:var(--border-strong); }

/* ── 11. Tablas ──────────────────────────────────────────────────────────── */
.table-wrap {
  background:var(--bg-1);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.table { width:100%; border-collapse:collapse; table-layout:fixed; }
.table th {
  text-align:left;
  padding:var(--sp-3) var(--sp-4);
  background:rgba(0,0,0,0.18);
  border-bottom:1px solid var(--border);
  color:var(--text-3);
  font-size:var(--fs-xs); font-weight:var(--fw-semibold);
  text-transform:uppercase; letter-spacing:0.06em;
  white-space:normal;
  word-wrap:break-word; overflow-wrap:break-word;
  vertical-align:bottom; line-height:1.3;
}
.table td {
  padding:var(--sp-3) var(--sp-4);
  border-bottom:1px solid var(--border-subtle);
  font-size:var(--fs-base);
  color:var(--text-1);
  vertical-align:middle;
  overflow:hidden; text-overflow:ellipsis;
  word-break:break-word;
}
.table tr:last-child td { border-bottom:none; }
.table tr:hover td { background:rgba(255,255,255,0.015); }
.table tr.expanded td { background:var(--primary-soft); }
.table .right { text-align:right; }
.table .center { text-align:center; }
.table .col-mono { font-family:var(--font-mono); font-size:var(--fs-sm); }
.table .col-num { font-variant-numeric:tabular-nums; text-align:right; }
.table .cell-stack { display:flex; flex-direction:column; gap:2px; }
.table .cell-stack .sub { font-size:var(--fs-xs); color:var(--text-3); }
.table .cell-truncate {
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--text-3);
}
.table .cell-actions { text-align:right; overflow:visible; }
.table .cell-actions form { display:inline-block; }
.table .cell-actions.center { text-align:center; }
.table th[scope="col"] { vertical-align:bottom; }
.table .btn-link {
  background:transparent; border:none; color:var(--danger);
  font-size:var(--fs-sm); font-weight:var(--fw-semibold);
  padding:var(--sp-1) var(--sp-2); cursor:pointer;
  border-radius:var(--r-sm);
}
.table .btn-link:hover { background:var(--danger-bg); }

/* Column width helpers para .t-mensajes */
.t-mensajes col.c-exp    { width:32px; }
.t-mensajes col.c-date   { width:90px; }
.t-mensajes col.c-status { width:108px; }
.t-mensajes col.c-from   { width:18%; }
.t-mensajes col.c-to     { width:16%; }
.t-mensajes col.c-doc    { width:100px; }
.t-mensajes col.c-diag   { width:auto; }
.t-mensajes col.c-action { width:130px; }

/* Column widths — .t-blocklist (20/14/14/8/12/12/10/10 = 100%) */
.t-blocklist col.c-addr    { width:20%; }
.t-blocklist col.c-tenant  { width:14%; }
.t-blocklist col.c-reason  { width:14%; }
.t-blocklist col.c-hits    { width:8%; }
.t-blocklist col.c-since   { width:12%; }
.t-blocklist col.c-expires { width:12%; }
.t-blocklist col.c-resp    { width:10%; }
.t-blocklist col.c-act     { width:10%; }
.t-blocklist td.center, .t-blocklist th.center { text-align:center; }
.t-blocklist td.cell-actions { overflow:visible; }
.t-blocklist td.cell-actions .btn-link { white-space:nowrap; }
.t-blocklist td.col-mono {
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Column widths — .t-alerts (12/10/12/34/12/10/10 = 100%) */
.t-alerts col.c-when   { width:12%; }
.t-alerts col.c-level  { width:10%; }
.t-alerts col.c-cat    { width:12%; }
.t-alerts col.c-detail { width:34%; }
.t-alerts col.c-origin { width:12%; }
.t-alerts col.c-state  { width:10%; }
.t-alerts col.c-act    { width:10%; }
.t-alerts td.center, .t-alerts th.center { text-align:center; }
.t-alerts td.center .chip { min-width:78px; justify-content:center; }
.t-alerts td.cell-actions { overflow:visible; }
.t-alerts td.cell-actions .btn { white-space:nowrap; }

/* Column widths — .t-tenants
   Brief pedía 8/12/34/22/8/8/8, pero "CASILLAS" y chip "Activo" requieren
   un poco más de ancho. Ajuste afinado: 8/12/32/20/8/10/10 = 100% */
.t-tenants col.c-code     { width:8%; }
.t-tenants col.c-name     { width:12%; }
.t-tenants col.c-legal    { width:32%; }
.t-tenants col.c-contact  { width:20%; }
.t-tenants col.c-doms     { width:8%; }
.t-tenants col.c-mbx      { width:10%; }
.t-tenants col.c-status   { width:10%; }
.t-tenants td.center, .t-tenants th.center { text-align:center; }
.t-tenants td.contact-cell {
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.t-tenants .legal-row {
  display:flex; align-items:baseline; gap:var(--sp-2);
  flex-wrap:wrap;
  font-size:var(--fs-base);
}
.t-tenants .legal-row .ruc {
  color:var(--text-2); font-weight:var(--fw-semibold);
  font-family:var(--font-mono); font-size:var(--fs-sm);
}
.t-tenants .legal-row .sep { color:var(--text-4); }
.t-tenants .legal-row .legal {
  color:var(--text-1); flex:1; min-width:0;
}

/* Column widths — .t-domains */
.t-domains col.c-domain   { width:auto; }
.t-domains col.c-dkim     { width:160px; }
.t-domains col.c-status   { width:120px; }
.t-domains col.c-created  { width:170px; }

/* Column widths — .t-mailboxes (lista en tenant_detail) */
.t-mailboxes col.c-addr     { width:auto; }
.t-mailboxes col.c-name     { width:22%; }
.t-mailboxes col.c-sent     { width:110px; }
.t-mailboxes col.c-bnc      { width:110px; }
.t-mailboxes col.c-last     { width:160px; }
.t-mailboxes col.c-status   { width:100px; }
.t-mailboxes td a.col-mono { word-break:break-all; }

/* Column widths — .t-recent (envíos en mailbox_detail) */
.t-recent col.c-when    { width:160px; }
.t-recent col.c-to      { width:28%; }
.t-recent col.c-status  { width:110px; }
.t-recent col.c-resp    { width:auto; }

/* Column widths — .t-events (events en message_detail) */
.t-events col.c-when    { width:150px; }
.t-events col.c-type    { width:120px; }
.t-events col.c-cat     { width:140px; }
.t-events col.c-dsn     { width:80px; }
.t-events col.c-detail  { width:auto; }
.t-events col.c-source  { width:120px; }

/* Column widths — .t-recent-alerts (dashboard) */
.t-recent-alerts col.c-level  { width:120px; }
.t-recent-alerts col.c-title  { width:auto; }
.t-recent-alerts col.c-when   { width:180px; }

.table-foot {
  display:flex; justify-content:space-between; align-items:center;
  padding:var(--sp-3) var(--sp-4);
  font-size:var(--fs-sm); color:var(--text-3);
  border-top:1px solid var(--border-subtle);
}
.table-foot a { color:var(--primary); }

/* ── 12. Chips/Badges ────────────────────────────────────────────────────── */
.chip {
  display:inline-flex; align-items:center; gap:var(--sp-1);
  padding:3px var(--sp-3);
  border-radius:var(--r-pill);
  font-size:var(--fs-xs); font-weight:var(--fw-semibold);
  white-space:nowrap; line-height:1.4;
}
.chip-success { background:var(--success-bg); color:var(--success); }
.chip-danger  { background:var(--danger-bg);  color:var(--danger); }
.chip-warning { background:var(--warning-bg); color:var(--warning); }
.chip-info    { background:var(--info-bg);    color:var(--info); }
.chip-primary { background:var(--primary-soft-2); color:var(--primary); }
.chip-neutral { background:var(--neutral-bg); color:var(--text-3); }

.dot { display:inline-block; width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.dot-success { background:var(--success); box-shadow:0 0 6px rgba(52,211,153,0.55); }
.dot-warning { background:var(--warning); box-shadow:0 0 6px rgba(251,191,36,0.55); }
.dot-danger  { background:var(--danger);  box-shadow:0 0 6px rgba(248,113,113,0.55); }
.dot-muted   { background:var(--text-4); }

/* ── 13. Hints ───────────────────────────────────────────────────────────── */
.hint {
  display:flex; gap:var(--sp-3); align-items:flex-start;
  background:var(--primary-soft);
  border-left:3px solid var(--primary);
  padding:var(--sp-4) var(--sp-5);
  border-radius:var(--r-sm);
  font-size:var(--fs-md); line-height:var(--lh-loose);
  color:var(--text-2);
  margin-bottom:var(--sp-5);
}
.hint strong { color:var(--primary); }
.hint-icon { font-size:var(--fs-lg); flex-shrink:0; line-height:1; padding-top:2px; }

/* ── 14. Notificaciones (alertas operativas) ─────────────────────────────── */
.notif-list { display:flex; flex-direction:column; gap:var(--sp-3); }
.notif {
  display:grid;
  grid-template-columns:48px 1fr 96px;
  gap:var(--sp-4);
  background:var(--bg-1);
  border:1px solid var(--border);
  border-left:3px solid var(--border-strong);
  border-radius:var(--r-lg);
  padding:var(--sp-4) var(--sp-5);
  align-items:flex-start;
}
.notif-icon {
  width:40px; height:40px; border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; flex-shrink:0;
}
.notif-body { min-width:0; }
.notif-head {
  display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap;
  margin-bottom:var(--sp-1);
}
.notif-title { font-size:var(--fs-md); font-weight:var(--fw-semibold); color:var(--text-1); }
.notif-desc { font-size:var(--fs-md); color:var(--text-2); line-height:var(--lh-loose); }
.notif-context {
  font-size:var(--fs-sm); color:var(--text-3);
  background:var(--bg-3);
  padding:var(--sp-2) var(--sp-3);
  border-radius:var(--r-sm);
  margin-top:var(--sp-3);
  font-family:var(--font-mono);
  word-break:break-word;
}
.notif-actions { display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-top:var(--sp-3); }
.notif-meta {
  text-align:right; font-size:var(--fs-xs); color:var(--text-3); line-height:1.5;
  white-space:nowrap;
}
.notif.critical { border-left-color:var(--danger); }
.notif.critical .notif-icon { background:var(--danger-bg); color:var(--danger); }
.notif.warning  { border-left-color:var(--warning); }
.notif.warning  .notif-icon { background:var(--warning-bg); color:var(--warning); }
.notif.info     { border-left-color:var(--primary); }
.notif.info     .notif-icon { background:var(--primary-soft-2); color:var(--primary); }
.notif.resolved { border-left-color:var(--success); opacity:0.72; }
.notif.resolved .notif-icon { background:var(--success-bg); color:var(--success); }

/* ── 15. Drawer (fila expandida) ─────────────────────────────────────────── */
.drawer {
  background:var(--overlay);
  border-left:3px solid var(--danger);
  border-radius:var(--r-md);
  margin:0 var(--sp-4) var(--sp-4);
  padding:var(--sp-5);
}
.drawer.ok { border-left-color:var(--success); }
.drawer-grid {
  display:grid;
  grid-template-columns:120px 1fr;
  gap:var(--sp-3) var(--sp-5);
  font-size:var(--fs-md);
  line-height:var(--lh-loose);
}
.drawer-label {
  color:var(--text-3); font-size:var(--fs-xs);
  text-transform:uppercase; letter-spacing:0.06em;
  font-weight:var(--fw-semibold); padding-top:3px;
}
.drawer-value { color:var(--text-1); }
.drawer-raw {
  background:var(--bg-3);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-sm);
  padding:var(--sp-3);
  font-family:var(--font-mono);
  font-size:var(--fs-sm);
  color:var(--text-2);
  margin-top:var(--sp-1);
  white-space:pre-wrap; word-break:break-word;
}
.drawer-actions {
  display:flex; gap:var(--sp-2); flex-wrap:wrap;
  margin-top:var(--sp-4);
  padding-top:var(--sp-3);
  border-top:1px solid var(--border-subtle);
}

/* ── 16. Mailbox card ────────────────────────────────────────────────────── */
.mbx-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:var(--gap-grid);
}
.mbx-card {
  background:var(--bg-1);
  border:1px solid var(--border);
  border-left:3px solid var(--border-strong);
  border-radius:var(--r-lg);
  padding:var(--sp-4) var(--sp-5);
  display:flex; flex-direction:column; gap:var(--sp-3);
  transition:var(--tr-base);
  min-height:160px;
}
.mbx-card:hover { border-color:var(--primary); transform:translateY(-1px); }
.mbx-card.s-good { border-left-color:var(--success); }
.mbx-card.s-warn { border-left-color:var(--warning); }
.mbx-card.s-bad  { border-left-color:var(--danger); }
.mbx-card.s-idle { border-left-color:var(--text-4); }
.mbx-head { display:flex; justify-content:space-between; align-items:flex-start; gap:var(--sp-3); }
.mbx-name { font-family:var(--font-mono); font-size:var(--fs-base); font-weight:var(--fw-semibold); word-break:break-all; line-height:1.4; }
.mbx-metrics {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:var(--sp-3); padding-top:var(--sp-1);
}
.mbx-metric .v { font-size:var(--fs-xl); font-weight:var(--fw-bold); line-height:1; font-variant-numeric:tabular-nums; }
.mbx-metric .v.success { color:var(--success); }
.mbx-metric .v.danger  { color:var(--danger); }
.mbx-metric .l { font-size:10px; color:var(--text-3); text-transform:uppercase; letter-spacing:0.06em; margin-top:var(--sp-1); }
.mbx-foot {
  margin-top:auto;
  display:flex; justify-content:space-between; align-items:center;
  padding-top:var(--sp-3); border-top:1px solid var(--border-subtle);
  font-size:var(--fs-sm); color:var(--text-3);
}
.mbx-foot a { color:var(--primary); }

/* ── 17. Tenant group ────────────────────────────────────────────────────── */
.tenant-section { margin-bottom:var(--sp-8); }
.tenant-section:last-child { margin-bottom:0; }
.tenant-head {
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:var(--sp-4); padding-bottom:var(--sp-3);
  border-bottom:1px solid var(--border-subtle);
  flex-wrap:wrap; gap:var(--sp-2);
}
.tenant-head h3 { font-size:var(--fs-lg); color:var(--primary); font-weight:var(--fw-semibold); }
.tenant-head .info { font-size:var(--fs-sm); color:var(--text-3); }

/* ── 18. Charts ──────────────────────────────────────────────────────────── */
.chart { padding:var(--sp-2) 0 0; position:relative; }
.chart-bars {
  display:flex; align-items:flex-end; gap:var(--sp-2);
  height:160px; margin-bottom:var(--sp-7);
}
.bar {
  flex:1; background:var(--success); border-radius:3px 3px 0 0;
  position:relative; min-height:8px;
  transition:var(--tr-base);
}
.bar:hover { filter:brightness(1.15); }
.bar .bar-bounce { position:absolute; bottom:0; left:0; right:0; background:var(--danger); border-radius:0; }
.bar .bar-label {
  position:absolute; bottom:-22px; left:0; right:0;
  text-align:center; font-size:10px; color:var(--text-3); font-weight:var(--fw-medium);
}
.chart-legend {
  display:flex; gap:var(--sp-5); flex-wrap:wrap;
  font-size:var(--fs-sm); color:var(--text-3);
  margin-top:auto;
}
.chart-legend .lg { display:inline-flex; align-items:center; gap:var(--sp-2); }
.chart-legend .lg::before {
  content:''; display:inline-block; width:10px; height:10px; border-radius:2px; background:var(--success);
}
.chart-legend .lg.danger::before { background:var(--danger); }

/* ── 19. List rows ───────────────────────────────────────────────────────── */
.list-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:var(--sp-3) 0;
  border-bottom:1px solid var(--border-subtle);
  font-size:var(--fs-md);
  gap:var(--sp-3);
}
.list-row:last-child { border-bottom:none; padding-bottom:0; }
.list-row .left { display:flex; align-items:center; gap:var(--sp-3); min-width:0; flex:1; }
.list-row .left .meta { font-size:var(--fs-sm); color:var(--text-3); margin-top:2px; }
.list-row .right { text-align:right; white-space:nowrap; }
.list-row .v-strong { font-weight:var(--fw-bold); font-size:var(--fs-md); font-variant-numeric:tabular-nums; }
.list-row .v-strong.success { color:var(--success); }
.list-row .v-strong.warning { color:var(--warning); }
.list-row .v-strong.danger { color:var(--danger); }

/* ── 20. Sugerencias blocklist ───────────────────────────────────────────── */
.sug-card {
  background:var(--bg-1);
  border:1px solid var(--warning);
  border-radius:var(--r-lg);
  padding:var(--sp-5);
  margin-bottom:var(--sp-5);
}
.sug-card-head {
  display:flex; justify-content:space-between; align-items:flex-start; gap:var(--sp-3);
  margin-bottom:var(--sp-4); flex-wrap:wrap;
}
.sug-card-title {
  font-size:var(--fs-md); font-weight:var(--fw-semibold); color:var(--warning);
  display:flex; align-items:center; gap:var(--sp-2);
}
.sug-card-title .count {
  background:var(--warning); color:var(--bg-0);
  font-size:var(--fs-xs); font-weight:var(--fw-bold);
  padding:1px var(--sp-2); border-radius:var(--r-pill);
}
.sug-card-desc { font-size:var(--fs-sm); color:var(--text-3); margin-top:var(--sp-1); }
.sug-list { display:flex; flex-direction:column; gap:var(--sp-2); }
.sug-row {
  display:flex; justify-content:space-between; align-items:center; gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);
  background:var(--bg-3);
  border-radius:var(--r-md);
  flex-wrap:wrap;
}
.sug-info { flex:1; min-width:240px; }
.sug-email { font-family:var(--font-mono); font-size:var(--fs-base); font-weight:var(--fw-semibold); color:var(--text-1); }
.sug-meta { font-size:var(--fs-xs); color:var(--text-3); margin-top:2px; }
.sug-actions { display:flex; gap:var(--sp-2); flex-wrap:wrap; }

/* ── 21. Action cards ────────────────────────────────────────────────────── */
.action-card {
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:var(--sp-4);
  margin-bottom:var(--sp-3);
}
.action-card:last-child { margin-bottom:0; }
.action-card.priority {
  background:rgba(251,191,36,0.06);
  border-color:rgba(251,191,36,0.3);
}
.action-card.info {
  background:var(--primary-soft);
  border-color:rgba(56,189,248,0.25);
}
.action-card-title { font-size:var(--fs-md); font-weight:var(--fw-semibold); margin-bottom:var(--sp-1); }
.action-card-desc { font-size:var(--fs-sm); color:var(--text-2); line-height:var(--lh-loose); }
.action-card-link {
  display:inline-block; margin-top:var(--sp-2);
  font-size:var(--fs-sm); color:var(--primary); font-weight:var(--fw-medium);
}

/* ── 22. Stats strip (mensajes) ──────────────────────────────────────────── */
.stats-strip {
  display:flex; gap:var(--sp-6); flex-wrap:wrap; align-items:center;
  background:var(--bg-1);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:var(--sp-3) var(--sp-5);
  margin-bottom:var(--sp-4);
  font-size:var(--fs-base);
}
.stats-strip .stat { display:flex; gap:var(--sp-2); align-items:baseline; }
.stats-strip .num { font-size:var(--fs-lg); font-weight:var(--fw-bold); font-variant-numeric:tabular-nums; }
.stats-strip .num.success { color:var(--success); }
.stats-strip .num.danger  { color:var(--danger); }
.stats-strip .num.warning { color:var(--warning); }
.stats-strip .num.muted   { color:var(--text-3); }
.stats-strip .lbl { color:var(--text-3); }
.stats-strip .right { margin-left:auto; color:var(--text-3); font-size:var(--fs-sm); }
.stats-strip .right a { color:var(--primary); }

/* ── 23. Reporte exportable (fondo blanco) ──────────────────────────────── */
.report-shell {
  background:var(--bg-1);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.report-shell-head {
  background:rgba(0,0,0,0.22);
  padding:var(--sp-3) var(--sp-5);
  border-bottom:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
}
.report-shell-head .left { display:flex; gap:var(--sp-3); align-items:center; flex-wrap:wrap; }
.report-shell-head .title { font-size:var(--fs-md); font-weight:var(--fw-semibold); }
.report-shell-actions { display:flex; gap:var(--sp-2); flex-wrap:wrap; align-items:center; }

/* Preview del documento A4 — centrado con aire alrededor (no pegado a la izq) */
.report-shell .report-doc-frame {
  background:rgba(0,0,0,0.18);
  padding:var(--sp-6) var(--sp-5);
  display:flex; justify-content:center;
}
.report-doc {
  background:#fafbfc;
  color:#1a2740;
  padding:var(--sp-7) var(--sp-6);
  font-family:var(--font-sans);
  line-height:var(--lh-loose);
  width:100%;
  /* Ajuste 01-jun-2026 Task #37 (Caleb): la vista previa debe verse como una
     HOJA PDF horizontal centrada, no como una tabla web estirada.
     A4 landscape impresión ≈ 1123px @ 96dpi; subimos a 1280px para legibilidad
     en pantalla pero manteniendo proporción de hoja. El frame queda full-width
     (entorno) y la hoja centrada con sombras a los lados (documento). */
  max-width:1280px;
  margin-left:auto; margin-right:auto;
  border-radius:var(--r-md);
  box-shadow:0 4px 16px rgba(0,0,0,0.18);
}

/* Controles arriba (form generador + chip historial): ancho consistente con
   las demás pantallas del sistema, NO se estiran al ancho completo. El shell
   del reporte sí ocupa todo el ancho para dar aire a la hoja centrada. */
.reports-controls {
  max-width:1280px;
  margin-left:auto; margin-right:auto;
  width:100%;
}
@media (max-width:768px) {
  .report-shell .report-doc-frame { padding:var(--sp-3); }
  .report-doc { padding:var(--sp-5) var(--sp-4); }
}
.report-doc h1, .report-doc h2 { color:#1a2740; letter-spacing:-0.01em; }
.report-doc .doc-cover {
  display:flex; justify-content:space-between; align-items:flex-start;
  border-bottom:2px solid #1e4d96;
  padding-bottom:var(--sp-5);
  margin-bottom:var(--sp-7);
  gap:var(--sp-5); flex-wrap:wrap;
}
.report-doc .doc-cover h1 { font-size:24px; color:#1e4d96; font-weight:var(--fw-bold); margin-bottom:var(--sp-1); }
.report-doc .doc-cover .subt { color:#5a6580; font-size:13px; }
.report-doc .doc-cover .meta { text-align:right; font-size:12px; color:#5a6580; line-height:1.8; }
.report-doc .doc-cover .meta strong { color:#1a2740; }

.report-doc h2 {
  font-size:13px; color:#1e4d96; text-transform:uppercase;
  letter-spacing:0.08em; font-weight:var(--fw-bold);
  margin-bottom:var(--sp-3); margin-top:var(--sp-7);
}
.report-doc h2:first-of-type { margin-top:0; }
.report-doc .doc-summary {
  background:#eef4fb;
  border-left:4px solid #1e4d96;
  padding:var(--sp-4) var(--sp-5);
  border-radius:var(--r-sm);
  font-size:14px; line-height:var(--lh-loose); color:#1a2740;
}
.report-doc .doc-summary .big {
  display:inline-block; font-size:20px; font-weight:var(--fw-bold);
  color:#1e4d96; vertical-align:baseline; padding:0 2px;
  font-variant-numeric:tabular-nums;
}
.report-doc .doc-summary .ok  { color:#0c8a5a; }
.report-doc .doc-summary .bad { color:#c43030; }

.report-doc .doc-kpis {
  /* gap reducido a sp-2 (8px) para evitar overflow del 4to card en pantallas
     donde el container es justo. min-width:0 en kpi previene desborde. */
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-2);
  margin-bottom:var(--sp-5); margin-top:var(--sp-4);
}
.report-doc .doc-kpi {
  background:#fff;
  border:1px solid #d7dff0;
  border-radius:var(--r-md);
  padding:var(--sp-4);
  min-width:0;  /* permite que el grid item se encoja sin overflow */
}
.report-doc .doc-kpi .l { font-size:11px; color:#5a6580; text-transform:uppercase; letter-spacing:0.05em; font-weight:var(--fw-semibold); margin-bottom:var(--sp-1); }
.report-doc .doc-kpi .n { font-size:22px; font-weight:var(--fw-bold); color:#1a2740; line-height:1; font-variant-numeric:tabular-nums; }
.report-doc .doc-kpi .n.ok  { color:#0c8a5a; }
.report-doc .doc-kpi .n.bad { color:#c43030; }

.report-doc table.doc-table { width:100%; border-collapse:collapse; font-size:12.5px; margin-top:var(--sp-2); table-layout:fixed; }
.report-doc .doc-table th {
  background:#1e4d96; color:#fff;
  padding:var(--sp-2) var(--sp-3);
  text-align:left; font-weight:var(--fw-semibold);
  text-transform:uppercase; font-size:11px; letter-spacing:0.05em;
}
.report-doc .doc-table td {
  padding:var(--sp-3);
  border-bottom:1px solid #e6ecf4;
  color:#1a2740; vertical-align:top;
  word-break:break-word;
}
.report-doc .doc-table tr:nth-child(even) td { background:#fafbfc; }
.report-doc .doc-table tr:last-child td { border-bottom:none; }
.report-doc .doc-table .right  { text-align:right; }
.report-doc .doc-table .center { text-align:center; }
.report-doc .doc-table .mono { font-family:var(--font-mono); font-size:11.5px; }
.report-doc .doc-table .doc-ref { font-family:var(--font-mono); color:#1e4d96; font-weight:var(--fw-semibold); }
.report-doc .doc-table .lbl-danger { color:#c43030; font-weight:var(--fw-medium); }
.report-doc .doc-table .lbl-warning { color:#c47030; font-weight:var(--fw-medium); }
.report-doc .doc-table .lbl-ok { color:#0c8a5a; font-weight:var(--fw-semibold); }
.report-doc .doc-table .recom { font-size:11.5px; color:#5a6580; font-style:italic; }

.report-doc .doc-footer {
  margin-top:var(--sp-7);
  padding-top:var(--sp-4);
  border-top:1px solid #d7dff0;
  font-size:11px; color:#5a6580; text-align:center; line-height:1.8;
}
.report-doc .doc-footer strong { color:#1a2740; }

/* ── 24. Empty state ─────────────────────────────────────────────────────── */
.empty { text-align:center; padding:var(--sp-9) var(--sp-5); color:var(--text-3); }
.empty-icon { font-size:36px; opacity:0.4; margin-bottom:var(--sp-3); }
.empty-title { font-size:var(--fs-md); font-weight:var(--fw-semibold); color:var(--text-2); margin-bottom:var(--sp-1); }
.empty-desc { font-size:var(--fs-sm); color:var(--text-3); }
.empty-compact { padding:var(--sp-6) var(--sp-4); }
.empty-compact .empty-icon { font-size:24px; margin-bottom:var(--sp-2); }

/* ── 25. Anotación wireframe ─────────────────────────────────────────────── */
.wf-note {
  position:fixed; bottom:var(--sp-5); right:var(--sp-5);
  background:var(--warning); color:var(--bg-0);
  padding:var(--sp-3) var(--sp-4);
  border-radius:var(--r-md);
  font-size:var(--fs-sm); font-weight:var(--fw-semibold);
  max-width:300px; box-shadow:var(--shadow-3);
  line-height:var(--lh-normal);
  z-index:50;
}

/* ── 26. Pagination ──────────────────────────────────────────────────────── */
.pagination {
  display:flex; justify-content:space-between; align-items:center;
  margin-top:var(--sp-4); font-size:var(--fs-sm); color:var(--text-3);
  flex-wrap:wrap; gap:var(--sp-3);
}
.pagination a { color:var(--primary); }

/* ── 27. Utilidades ──────────────────────────────────────────────────────── */
.flex { display:flex; }
.flex-1 { flex:1; }
.items-center { align-items:center; }
.justify-between { justify-content:space-between; }
.gap-2 { gap:var(--sp-2); }
.gap-3 { gap:var(--sp-3); }
.gap-4 { gap:var(--sp-4); }
.mb-2 { margin-bottom:var(--sp-2); }
.mb-3 { margin-bottom:var(--sp-3); }
.mb-4 { margin-bottom:var(--sp-4); }
.mb-5 { margin-bottom:var(--sp-5); }
.mb-6 { margin-bottom:var(--sp-6); }
.mt-2 { margin-top:var(--sp-2); }
.mt-3 { margin-top:var(--sp-3); }
.text-sm { font-size:var(--fs-sm); }
.text-xs { font-size:var(--fs-xs); }
.text-right { text-align:right; }
.text-center { text-align:center; }
.fw-semibold { font-weight:var(--fw-semibold); }
.fw-bold { font-weight:var(--fw-bold); }
.success { color:var(--success); }
.danger  { color:var(--danger); }
.warning { color:var(--warning); }
.primary { color:var(--primary); }
.nowrap { white-space:nowrap; }
.break-all { word-break:break-all; }
.hidden { display:none; }

/* ── 28. RESPONSIVE — adaptación REAL por tipo de pantalla ──────────────── */

/* Laptop (1280px ↓) — densidad media, sidebar más estrecho */
@media (max-width:1280px) {
  :root {
    --sidebar-w:220px;
    --content-pad-x:24px;
    --gap-grid:14px;
    --fs-3xl:28px;
  }
  .kpi-value { font-size:26px; }
}

/* Tablet (1024px ↓) — sidebar solo íconos, grilla 4-col → 2-col */
@media (max-width:1024px) {
  :root { --sidebar-w:64px; --content-pad-x:20px; }
  .sidebar { padding:var(--sp-4) var(--sp-2); }
  .brand { justify-content:center; padding:0; }
  .brand span:not(.brand-dot) { display:none; }
  .brand-sub, .nav-section { display:none; }
  .nav a { justify-content:center; padding:var(--sp-3) 0; font-size:0; }
  .nav a.active { background:var(--primary-soft); }
  .nav .nav-icon { font-size:var(--fs-lg); }
  .nav .nav-count { position:absolute; transform:translate(8px,-8px); }

  /* Grilla 4 → 2 columnas (en tablet) */
  .dashboard-grid { grid-template-columns:repeat(2,1fr); }
  .dg-1 { grid-column:span 1; }
  .dg-2 { grid-column:span 2; }
  .dg-3 { grid-column:span 2; }
  .dg-4 { grid-column:span 2; }
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .grid-3 { grid-template-columns:repeat(2,1fr); }
  .report-doc .doc-kpis { grid-template-columns:repeat(2,1fr); }

  /* Form grids → todas las columnas iguales en grid de 2 */
  .form-grid { grid-template-columns:repeat(2,1fr) !important; }
  .form-grid .field-action { grid-column:span 2; }

  /* Tablas: relajar table-layout fijo (auto en tablet) — excepto donde forzamos
     proporciones por su semántica (mensajes/blocklist/alerts/tenants/etc.)
     mantienen colgroup activo. */
  .table { table-layout:auto; }
  .table.t-msgs, .table.t-blocklist, .table.t-alerts, .table.t-tenants,
  .table.t-domains, .table.t-mailboxes, .table.t-recent, .table.t-events,
  .table.t-recent-alerts, .table.t-quarantine { table-layout:fixed; }
  /* Email-cells siempre se truncan con ellipsis (no se rompen a la mitad) */
  .table .contact-cell, .table .cell-truncate {
    white-space:nowrap !important;
    overflow:hidden;
    text-overflow:ellipsis;
    word-break:normal !important;
  }

  .mbx-grid { grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); }
}

/* Móvil grande (768px ↓) — sidebar oculto + hamburger, tablas → cards */
@media (max-width:768px) {
  :root { --content-pad-x:16px; --content-pad-y:20px; --gap-grid:12px; }
  .sidebar {
    position:fixed; left:0; top:0;
    width:260px; height:100vh; z-index:100;
    transform:translateX(-100%);
    transition:transform var(--tr-base);
    padding:var(--sp-5) var(--sp-3);
  }
  .sidebar.open { transform:translateX(0); box-shadow:var(--shadow-3); }
  .sidebar .brand,
  .sidebar .brand span:not(.brand-dot),
  .sidebar .brand-sub,
  .sidebar .nav-section { display:block; }
  .sidebar .brand { justify-content:flex-start; padding:0 var(--sp-3) var(--sp-2); }
  .sidebar .nav a { font-size:var(--fs-md); padding:var(--sp-3); justify-content:flex-start; }
  .sidebar .nav .nav-count { position:static; transform:none; margin-left:auto; }

  .menu-btn { display:inline-flex; }
  .sidebar-backdrop.open { display:block; }

  .topbar h2 { font-size:var(--fs-xl); }
  .kpi-value { font-size:24px; }
  .filter-bar .input, .filter-bar .select { width:100%; min-width:0; }
  .filter-bar .grow { width:100%; }
  .filter-bar .right { width:100%; justify-content:flex-end; }
  .form-grid { grid-template-columns:1fr !important; }
  .form-grid .field-action { grid-column:span 1; }

  /* Tabla → cards */
  .table-mobile-cards .table { display:block; }
  .table-mobile-cards .table thead { display:none; }
  .table-mobile-cards .table tbody,
  .table-mobile-cards .table tr { display:block; }
  .table-mobile-cards .table tr {
    background:var(--bg-1);
    border:1px solid var(--border-subtle);
    border-radius:var(--r-md);
    margin-bottom:var(--sp-3);
    padding:var(--sp-3);
  }
  .table-mobile-cards .table td {
    display:flex; justify-content:space-between; align-items:flex-start;
    padding:var(--sp-2) 0;
    border:none; gap:var(--sp-3);
    font-size:var(--fs-sm);
  }
  .table-mobile-cards .table td::before {
    content:attr(data-label);
    color:var(--text-3); font-size:var(--fs-xs);
    text-transform:uppercase; letter-spacing:0.06em;
    font-weight:var(--fw-semibold);
    flex-shrink:0; width:42%;
  }
  .table-mobile-cards .table td:first-child {
    padding-top:0; border-bottom:1px dashed var(--border-subtle); padding-bottom:var(--sp-2);
  }

  .notif { grid-template-columns:auto 1fr; }
  .notif-meta { grid-column:2; text-align:left; margin-top:var(--sp-1); }
  .drawer-grid { grid-template-columns:1fr; gap:var(--sp-2); }
  .drawer-label { padding-top:0; }
  .report-doc { padding:var(--sp-5) var(--sp-4); }
  .report-doc .doc-cover { flex-direction:column; }
  .report-doc .doc-cover .meta { text-align:left; }
  .report-doc .doc-kpis { grid-template-columns:repeat(2,1fr); }
  .wf-note { left:var(--sp-3); right:var(--sp-3); bottom:var(--sp-3); max-width:none; }

  .send-control { width:100%; justify-content:space-between; }
}

/* Móvil pequeño (480px ↓) */
@media (max-width:480px) {
  .dashboard-grid { grid-template-columns:1fr; }
  .dg-1, .dg-2, .dg-3, .dg-4 { grid-column:span 1; }
  .grid-4, .grid-3, .grid-2 { grid-template-columns:1fr; }
  .stats-strip { gap:var(--sp-4); }
  .report-doc .doc-kpis { grid-template-columns:1fr 1fr; }
}

/* ── 29. Print (PDF) ─────────────────────────────────────────────────────── */
@media print {
  .sidebar, .topbar, .back-link, .report-shell-head, .wf-note { display:none; }
  body { background:#fff; }
  .main { padding:0; }
  .report-shell, .report-doc { background:#fff; box-shadow:none; border:none; border-radius:0; }
  .report-doc { padding:24px; }
}