/* ============================================================================
   CENTRO DE MONITOREO OPERATIVO — ARANDA SERVICE DESK · Punto UAO
   Paleta institucional obligatoria (no modificar valores hexadecimales)
   ============================================================================ */
:root{
  --red:#C0151A;
  --wine:#8C0F13;
  --dark:#4A0608;

  --neutral:#EDE8E3;
  --neutral2:#E0D9D2;

  --bg:#F9F6F2;
  --card:#FFFFFF;
  --border:#EEEBE7;

  --t1:#1A1A1A;
  --t2:#4A3F38;
  --t3:#6B5E54;
  --t4:#9C8C7E;

  /* Colores de estado (clasificación por Progreso) */
  --status-normal:#9C8C7E;
  --status-riesgo:#D9A441;
  --status-critico:#C0151A;
  --status-vencido:#4A0608;

  --sidebar-w: 272px;
  --topbar-h: 84px;
  --radius: 10px;
  --shadow-card: 0 1px 2px rgba(74,6,8,0.04), 0 4px 16px rgba(74,6,8,0.06);
  --shadow-pop: 0 8px 28px rgba(74,6,8,0.14);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; height:100%; }

body{
  background:#DEDAD5;
  font-family:'Segoe UI',system-ui,sans-serif;
  color:var(--t1);
  -webkit-font-smoothing:antialiased;
}

button{ font-family:inherit; }

/* ============================== APP SHELL ============================== */
.app-shell{ display:flex; min-height:100vh; width:100%; }

/* ============================== SIDEBAR ============================== */
.sidebar{
  width:var(--sidebar-w);
  flex:0 0 var(--sidebar-w);
  background:linear-gradient(180deg,var(--dark) 0%, #3a0507 100%);
  color:var(--neutral);
  display:flex;
  flex-direction:column;
  position:fixed;
  top:0; left:0; bottom:0;
  z-index:1000;
  box-shadow:2px 0 24px rgba(0,0,0,0.18);
  transition:transform .25s ease;
}
.sidebar-brand{ display:flex; align-items:center; gap:12px; padding:22px 20px 18px; border-bottom:1px solid rgba(255,255,255,0.08); }
.brand-mark{ width:42px; height:42px; border-radius:8px; background:var(--red); color:#fff; display:flex;align-items:center;justify-content:center; font-weight:700; font-size:14px; letter-spacing:.5px; flex:0 0 auto; }
.brand-text{ display:flex; flex-direction:column; line-height:1.25; }
.brand-title{ font-size:14.5px; font-weight:600; color:#fff; }
.brand-sub{ font-size:11.5px; color:rgba(237,232,227,0.65); letter-spacing:.3px; }
.sidebar-toggle{ margin-left:auto; background:transparent;border:none;color:#fff;font-size:18px; }

.sidebar-nav{ flex:1; overflow-y:auto; padding:14px 12px 18px; }
.nav-section-label{ font-size:10.5px; text-transform:uppercase; letter-spacing:1.1px; color:rgba(237,232,227,0.45); padding:14px 12px 6px; font-weight:600; }
.nav-link{ width:100%; display:flex; align-items:center; gap:11px; background:transparent; border:none; color:rgba(237,232,227,0.82); padding:10px 12px; border-radius:8px; font-size:13.5px; font-weight:500; text-align:left; cursor:pointer; position:relative; transition:background .15s ease, color .15s ease; }
.nav-link i{ font-size:15px; width:18px; text-align:center; opacity:.9; }
.nav-link:hover{ background:rgba(255,255,255,0.07); color:#fff; }
.nav-link.active{ background:rgba(192,21,26,0.85); color:#fff; box-shadow:0 4px 14px rgba(192,21,26,0.35); }
.nav-link span:not(.nav-badge){ flex:1; }
.nav-badge{ background:rgba(255,255,255,0.14); color:#fff; font-size:11px; font-weight:700; padding:1px 7px; border-radius:99px; min-width:22px; text-align:center; }
.nav-link.active .nav-badge{ background:rgba(255,255,255,0.28); }
.nav-link--alert .nav-badge{ background:var(--status-riesgo); color:#3a2a00; }
.nav-link--alert:not(.active) .nav-badge{ background:var(--status-vencido); color:#fff; }
.nav-badge--ok{ background:#2a7a3b !important; color:#fff !important; }

/* Submenú de categorías bajo "Casos" */
.nav-caret{ font-size:11px !important; width:auto !important; opacity:.7; transition:transform .15s ease; }
.nav-link.is-sub-open .nav-caret{ transform:rotate(180deg); }
.nav-sub{ display:none; margin:2px 0 6px 20px; padding-left:10px; border-left:1px solid rgba(255,255,255,0.12); }
.nav-sub.is-open{ display:block; }
.nav-sub-link{ width:100%; display:flex; align-items:center; gap:9px; background:transparent; border:none; color:rgba(237,232,227,0.72); padding:7px 10px; border-radius:7px; font-size:12.5px; text-align:left; cursor:pointer; }
.nav-sub-link i{ font-size:13px; width:16px; text-align:center; }
.nav-sub-link span:not(.nav-sub-count){ flex:1; }
.nav-sub-link:hover{ background:rgba(255,255,255,0.07); color:#fff; }
.nav-sub-link.active{ background:rgba(255,255,255,0.14); color:#fff; font-weight:600; }
.nav-sub-count{ font-size:10.5px; font-weight:700; color:rgba(237,232,227,0.6); }

/* Seguimiento operativo: sub-pestañas Atención / Responsables / Grupos */
.gestion-tabs{ margin-bottom:18px; flex-wrap:wrap; }
.gestion-sub{ display:none; }
.gestion-sub.is-active{ display:block; }

.sidebar-footer{ padding:14px 16px 18px; border-top:1px solid rgba(255,255,255,0.08); }
.sync-pill{ display:flex; align-items:center; gap:8px; background:rgba(255,255,255,0.06); border-radius:99px; padding:7px 12px; font-size:12px; color:rgba(237,232,227,0.85); }
.sync-pill i{ font-size:13px; }
.sync-pill.is-syncing i{ animation:spin 1s linear infinite; }
.sync-pill.is-error{ background:rgba(192,21,26,0.25); color:#fff; }
.sync-pill.is-partial{ background:rgba(217,164,65,0.25); color:#fff; }
.sidebar-footer-meta{ font-size:10.5px; color:rgba(237,232,227,0.4); margin-top:8px; text-align:center; }
.sidebar-footer-credit{ font-size:9px; color:#c9a0a2; margin-top:4px; text-align:center; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.sidebar-overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:999; }

/* ============================== MAIN ============================== */
.main-content{ flex:1; margin-left:var(--sidebar-w); min-width:0; display:flex; flex-direction:column; }

.topbar{ height:var(--topbar-h); flex:0 0 var(--topbar-h); background:var(--card); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:18px; padding:0 28px; position:sticky; top:0; z-index:50; }
.icon-btn{ background:var(--neutral); border:1px solid var(--border); color:var(--t2); width:38px; height:38px; border-radius:8px; display:flex;align-items:center;justify-content:center; font-size:16px; cursor:pointer; transition:background .15s ease; }
.icon-btn:hover{ background:var(--neutral2); }
.icon-btn.is-spinning i{ animation:spin .6s linear infinite; }

.breadcrumb-block{ flex:1; min-width:0; }
.breadcrumb{ font-size:11.5px; color:var(--t4); display:flex; align-items:center; gap:6px; margin-bottom:2px; }
.breadcrumb i{ font-size:9px; }
.view-title{ font-size:21px; font-weight:600; margin:0; color:var(--t1); letter-spacing:-.2px; }

.topbar-actions{ display:flex; align-items:center; gap:16px; }
.global-search{ display:flex; align-items:center; gap:8px; background:var(--neutral); border:1px solid var(--border); border-radius:99px; padding:8px 16px; width:300px; }
.global-search i{ color:var(--t4); font-size:14px; }
.global-search input{ border:none; background:transparent; outline:none; font-size:13px; color:var(--t1); width:100%; }
.global-search input::placeholder{ color:var(--t4); }

.last-update{ display:flex; flex-direction:column; align-items:flex-end; line-height:1.25; white-space:nowrap; }
.last-update-label{ font-size:10.5px; color:var(--t4); }
.last-update-value{ font-size:13px; font-weight:600; color:var(--t2); }

.error-banner-stack{ padding:0 28px; }
.error-banner{ display:flex; align-items:center; gap:10px; background:#FBEAEA; border:1px solid #EFC9C9; color:var(--wine); border-radius:8px; padding:10px 16px; font-size:13px; margin-top:14px; }
.error-banner i{ font-size:15px; }
.error-banner strong{ font-weight:600; }

.view-container{ flex:1; padding:24px 28px 48px; }
.view{ display:none; }
.view.active{ display:block; animation:fadeIn .25s ease; }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:translateY(0); } }

/* ============================== KPI CARDS ============================== */
.kpi-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr)); gap:16px; margin-bottom:24px; }
.kpi-card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:18px 18px 16px; box-shadow:var(--shadow-card); position:relative; overflow:hidden; }
.kpi-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--accent, var(--t4)); }
.kpi-card .kpi-label{ font-size:11.5px; color:var(--t3); text-transform:uppercase; letter-spacing:.5px; font-weight:600; display:flex; align-items:center; gap:6px; margin-bottom:10px; }
.kpi-card .kpi-value{ font-size:30px; font-weight:700; color:var(--t1); line-height:1; }
.kpi-card .kpi-value small{ font-size:16px; font-weight:600; color:var(--t3); }
.kpi-card .kpi-foot{ font-size:11.5px; color:var(--t4); margin-top:8px; }
.kpi-card--vencido{ --accent:var(--status-vencido); } .kpi-card--vencido .kpi-value{ color:var(--status-vencido); }
.kpi-card--critico{ --accent:var(--status-critico); } .kpi-card--critico .kpi-value{ color:var(--status-critico); }
.kpi-card--riesgo{ --accent:var(--status-riesgo); } .kpi-card--riesgo .kpi-value{ color:#8a6512; }
.kpi-card--normal{ --accent:var(--status-normal); }
.kpi-card--sla{ --accent:var(--wine); }
.kpi-card--info{ --accent:var(--t4); }
.kpi-card--atencion{ --accent:var(--wine); } .kpi-card--atencion .kpi-value{ color:var(--wine); }
.kpi-grid--attention .kpi-card{ border-width:1px; }

/* Tarjetas de categoría principal (Jerarquía nivel 1) — pestaña Casos */
.kpi-grid--categorias .kpi-card{ cursor:pointer; transition:transform .12s ease, box-shadow .12s ease; }
.kpi-grid--categorias .kpi-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-pop); }
.kpi-grid--categorias .kpi-card.is-active{ border-color:var(--wine); box-shadow:0 0 0 2px rgba(140,15,19,.15); }
.kpi-card--cat-financiero{ --accent:#8C0F13; }
.kpi-card--cat-tecnologias{ --accent:#4A6B8C; }
.kpi-card--cat-academicos{ --accent:#C0151A; }
.kpi-card--cat-bienestar{ --accent:#D9A441; }
.kpi-card--cat-pqrs{ --accent:#6B4E8C; }
.kpi-card--cat-otro{ --accent:#9C8C7E; }

/* ============================== PANELS / LAYOUT GRIDS ============================== */
.grid-2col{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }
/* min-width:0 evita que un gráfico ancho (tendencia por días) estire la columna en vez de desplazarse. */
.grid-2col > *, .grid-3col > *{ min-width:0; }
.grid-3col{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:18px; }

.panel{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px 20px; box-shadow:var(--shadow-card); margin-bottom:0; }
.panel-header{ display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:6px 14px; margin-bottom:14px; }
.panel-header h2{ font-size:14.5px; font-weight:600; color:var(--t1); margin:0; display:flex; align-items:center; gap:8px; }
.panel-header h2 i{ color:var(--wine); font-size:15px; }
.panel-sub{ font-size:11.5px; color:var(--t4); }
.panel--highlight{ border-top:3px solid var(--wine); }

/* ══════════════════════════ BARRA DE FILTROS ══════════════════════════ */
.global-filter-bar{ position:sticky; top:0; z-index:100; background:#FFFFFF; border-bottom:2px solid var(--border); box-shadow:0 2px 10px rgba(0,0,0,.09); }
.gfb-inner{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px; padding:10px 20px; }
.gfb-title{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--wine); white-space:nowrap; flex-shrink:0; }
.gfb-drops{ display:flex; flex-wrap:wrap; gap:8px; flex:1; }
.gfb-dates{ display:flex; gap:8px; align-items:center; }
.gfb-clear{ display:flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:var(--t3); background:none; border:1px solid var(--border); border-radius:7px; padding:5px 10px; cursor:pointer; transition:all .15s ease; white-space:nowrap; }
.gfb-clear:hover{ color:var(--wine); border-color:var(--wine); }
.gfb-clear.has-filters{ color:var(--wine); border-color:var(--wine); background:#fdf0f0; }

.ms-drop{ position:relative; }
.ms-toggle{ display:flex; align-items:center; gap:5px; font-size:12.5px; font-weight:500; color:var(--t1); background:#FFFFFF; border:1px solid var(--border); border-radius:7px; padding:5px 10px; cursor:pointer; transition:border-color .15s ease, box-shadow .15s ease; white-space:nowrap; user-select:none; }
.ms-toggle:hover{ border-color:var(--t4); }
.ms-drop.is-open .ms-toggle{ border-color:var(--wine); box-shadow:0 0 0 2px rgba(140,15,19,.12); }
.ms-label{ flex:1; }
.ms-badge{ background:var(--wine); color:#fff; font-size:10px; font-weight:700; border-radius:10px; padding:1px 6px; min-width:18px; text-align:center; }
.ms-chevron{ font-size:10px; color:var(--t4); transition:transform .2s ease; }
.ms-drop.is-open .ms-chevron{ transform:rotate(180deg); }

.ms-panel{ position:absolute; top:calc(100% + 4px); left:0; z-index:200; background:#FFFFFF; border:1px solid var(--border); border-radius:9px; box-shadow:0 6px 24px rgba(0,0,0,.13); min-width:200px; max-width:280px; overflow:hidden; }
.ms-search{ display:block; width:100%; box-sizing:border-box; font-size:12px; color:var(--t1); background:var(--bg); border:none; border-bottom:1px solid var(--border); padding:8px 12px; outline:none; }
.ms-search:focus{ border-bottom-color:var(--wine); }
.ms-opts-wrap{ max-height:220px; overflow-y:auto; padding:4px 0; }
.ms-opt{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--t1); padding:6px 12px; cursor:pointer; transition:background .1s ease; user-select:none; }
.ms-opt:hover{ background:var(--bg); }
.ms-opt--all{ font-weight:600; border-bottom:1px solid var(--border); margin-bottom:2px; }
.ms-opt input[type="checkbox"]{ accent-color:var(--wine); width:14px; height:14px; flex-shrink:0; cursor:pointer; }

.filter-select--sm{ min-width:auto; padding:5px 8px; font-size:12px; }
.filter-group{ display:flex; align-items:center; gap:8px; }
.filter-group label{ font-size:11.5px; font-weight:600; color:var(--t3); text-transform:uppercase; letter-spacing:.03em; white-space:nowrap; }
.filter-select{ font-size:12.5px; color:var(--t1); background:var(--bg); border:1px solid var(--border); border-radius:7px; padding:6px 10px; min-width:160px; cursor:pointer; transition:border-color .15s ease; }
.filter-select:hover{ border-color:var(--t4); }
.filter-select:focus{ outline:none; border-color:var(--wine); }

.chart-wrap{ position:relative; height:280px; }
.chart-wrap.chart-tall{ height:320px; }
.chart-wrap--hscroll{ overflow-x:auto; overflow-y:hidden; }
.chart-scroll-inner{ min-width:100%; height:100%; position:relative; }

.spotlight{ font-size:19px; font-weight:700; color:var(--t1); padding-top:6px; }
.spotlight .spotlight-count{ display:block; font-size:12px; font-weight:600; color:var(--wine); margin-top:6px; }
.spotlight-empty{ font-size:14px; font-weight:500; color:var(--t4); }

.attention-hero{ background:linear-gradient(120deg, var(--dark), var(--wine)); border-radius:var(--radius); padding:20px 24px; margin-bottom:20px; color:#fff; box-shadow:var(--shadow-pop); }
.attention-hero-title{ display:flex; align-items:center; gap:16px; }
.attention-hero-title i{ font-size:30px; color:var(--status-riesgo); }
.attention-hero-title h2{ margin:0 0 2px; font-size:19px; font-weight:700; }
.attention-hero-title p{ margin:0; font-size:13px; color:rgba(255,255,255,0.78); }

/* ============================== STATUS BADGES / PROGRESS ============================== */
.status-pill{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; padding:3px 10px; border-radius:99px; color:#fff; white-space:nowrap; }
.status-pill::before{ content:""; width:6px;height:6px;border-radius:50%; background:currentColor; }
.status-pill--normal{ background:var(--status-normal); }
.status-pill--riesgo{ background:var(--status-riesgo); color:#3a2a00; }
.status-pill--critico{ background:var(--status-critico); }
.status-pill--vencido{ background:var(--status-vencido); }

.progress-track{ position:relative; width:100%; min-width:90px; height:8px; background:var(--neutral); border-radius:99px; overflow:hidden; }
.progress-fill{ height:100%; border-radius:99px; }
.progress-fill--normal{ background:var(--status-normal); }
.progress-fill--riesgo{ background:var(--status-riesgo); }
.progress-fill--critico{ background:var(--status-critico); }
.progress-fill--vencido{ background:var(--status-vencido); }
.progress-text{ font-size:11px; color:var(--t3); margin-top:3px; display:block; }

.area-chip{ display:inline-block; font-size:11px; font-weight:600; padding:2px 9px; border-radius:6px; background:var(--neutral); color:var(--t2); }
/* Metas y progreso (Notion) */
.metas-fuente{ font-size:12px; color:var(--t3); margin-bottom:12px; }
.metas-fuente a{ color:var(--wine); font-weight:600; text-decoration:none; }
.metas-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:14px; }
.meta-card{ border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px; background:var(--card); display:flex; flex-direction:column; gap:8px; }
.meta-card-top{ display:flex; justify-content:space-between; align-items:center; }
.meta-card-nombre{ font-weight:700; font-size:13.5px; color:var(--t1); }
.meta-link{ color:var(--t4); } .meta-link:hover{ color:var(--wine); }
.meta-progreso{ display:flex; align-items:center; gap:10px; } .meta-progreso .progress-track{ flex:1; }
.meta-progreso strong{ font-size:13px; min-width:38px; text-align:right; }
.progress-fill--meta{ background:#4A6B8C; }
.meta-card-meta{ display:flex; flex-wrap:wrap; gap:4px 12px; font-size:11.5px; color:var(--t3); }
.meta-venc{ color:var(--red); font-weight:600; }
.meta-estado{ font-size:11px; font-weight:700; padding:2px 9px; border-radius:99px; background:var(--neutral); color:var(--t2); }
.meta-estado--en-curso{ background:#e3ecf6; color:#2d5a86; }
.meta-estado--atrasado{ background:#fdecec; color:var(--red); }
.meta-estado--en-espera{ background:#fdf1e0; color:#9a5b12; }
.meta-estado--terminado{ background:#e3f3e6; color:#2a7a3b; }
.meta-estado--perdido{ background:#f1e4e4; color:#7a1e22; }

/* Sub tareas desplegables en Metas */
tr.meta-row--subs{ cursor:pointer; }
.subs-toggle{ display:inline-block; margin-top:4px; font-size:11px; font-weight:600; color:var(--wine); }
tr.meta-row--subs.is-open .subs-toggle i{ display:inline-block; transform:rotate(180deg); }
.meta-subs-row > td{ background:var(--bg) !important; padding:10px 18px 12px 34px !important; }
.subs-lista{ display:flex; flex-direction:column; gap:6px; }
.subs-item{ display:grid; grid-template-columns:18px 1fr auto 90px; align-items:center; gap:10px; font-size:12.5px; }
.subs-item .bi-check-circle-fill{ color:#2a7a3b; } .subs-item .bi-circle{ color:var(--t4); }
.subs-estado{ font-size:11px; font-weight:600; padding:2px 9px; border-radius:99px; background:var(--neutral); color:var(--t2); white-space:nowrap; }
.subs-estado--listo{ background:#e3f3e6; color:#2a7a3b; }
.subs-estado--en-curso{ background:#ece6f3; color:#6B4E8C; }
.subs-fecha{ font-size:11.5px; color:var(--t3); text-align:right; }

/* Condición del caso en la tabla de Casos */
.cond-chip{ display:inline-block; font-size:11px; font-weight:700; padding:2px 9px; border-radius:6px; }
.cond-chip--abierto{ background:#fdf0f0; color:var(--wine); border:1px solid var(--wine); }
.cond-chip--cerrado{ background:var(--neutral); color:var(--t3); }
.cond-chip--fuera{ background:#fff; color:var(--t3); border:1px dashed var(--t3); cursor:help; white-space:nowrap; }
.chip-nivel1{ display:inline-block; font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:6px; color:#fff; }
.chip-nivel1--financiero{ background:#8C0F13; }
.chip-nivel1--tecnologias{ background:#4A6B8C; }
.chip-nivel1--academicos{ background:#C0151A; }
.chip-nivel1--bienestar{ background:#B5842A; }
.chip-nivel1--pqrs{ background:#6B4E8C; }
.chip-nivel1--otro{ background:#9C8C7E; }

/* ============================== TABLES / DATATABLES OVERRIDES ============================== */
.table-responsive{ overflow-x:auto; }
table.data-table{ width:100%; font-size:12.8px; color:var(--t2); border-collapse:separate; border-spacing:0; }
/* Encabezados largos bajan a 2 líneas (no se cortan ni ensanchan la columna); el ancho lo reparte el navegador según el contenido. */
table.data-table thead th{ background:var(--neutral); color:var(--t2); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.3px; border-bottom:none !important; padding:8px 8px; white-space:normal; line-height:1.2; vertical-align:bottom; }
table.data-table tbody td{ padding:7px 8px; border-bottom:1px solid var(--border); vertical-align:middle; }
table.data-table tbody tr:hover{ background:#FBF8F4; }
table.data-table tbody tr.row--vencido td:first-child{ border-left:3px solid var(--status-vencido); }
table.data-table tbody tr.row--critico td:first-child{ border-left:3px solid var(--status-critico); }
table.data-table tbody tr.row--vencido{ background:#FFF5F5; }
table.data-table tbody tr.row--critico{ background:#FFF8F0; }

div.dataTables_wrapper .dataTables_length select, div.dataTables_wrapper .dataTables_filter input{ border:1px solid var(--border); border-radius:6px; padding:5px 10px; font-size:12.5px; color:var(--t2); background:#fff; }
div.dataTables_wrapper .dataTables_info, div.dataTables_wrapper .dataTables_length, div.dataTables_wrapper .dataTables_filter{ font-size:12.5px; color:var(--t3); }
div.dataTables_wrapper .dataTables_paginate .paginate_button{ border-radius:6px !important; font-size:12.5px; padding:5px 11px !important; margin-left:2px !important; color:var(--t2) !important; border:1px solid transparent !important; }
div.dataTables_wrapper .dataTables_paginate .paginate_button.current{ background:var(--wine) !important; border-color:var(--wine) !important; color:#fff !important; }
div.dataTables_wrapper .dataTables_paginate .paginate_button:hover{ background:var(--neutral) !important; color:var(--t1) !important; }
.dt-buttons{ margin-bottom:14px; margin-top:12px; display:flex; gap:8px; flex-wrap:wrap; }
.dt-button{ background:var(--card) !important; border:1px solid var(--border) !important; color:var(--t2) !important; font-size:12.3px !important; padding:7px 14px !important; border-radius:7px !important; display:inline-flex; align-items:center; gap:6px; }
.dt-button:hover{ background:var(--neutral) !important; }

/* ============================== SKELETONS / TOASTS ============================== */
.chart-skeleton{ position:relative; }
.toast-stack{ position:fixed; bottom:22px; right:22px; z-index:2000; display:flex; flex-direction:column; gap:10px; }
.toast-item{ background:var(--dark); color:#fff; padding:12px 18px; border-radius:8px; font-size:13px; box-shadow:var(--shadow-pop); display:flex; align-items:center; gap:10px; min-width:260px; animation:fadeIn .2s ease; transition:opacity .35s ease, transform .35s ease; }
.toast-item.is-leaving{ opacity:0; transform:translateX(12px); }
.toast-item i{ color:var(--status-riesgo); font-size:16px; }

/* ============================== RESPONSABLES ============================== */
.resp-row{ cursor:pointer; transition:background .12s; }
.resp-row:hover td{ background:#F5F1EC !important; }
.resp-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:24px; height:22px; border-radius:11px; padding:0 8px; font-size:11.5px; font-weight:700; color:#fff; }
.resp-badge--vencido{ background:var(--status-vencido); }
.resp-badge--critico{ background:var(--status-critico); }
.resp-detail-panel{ border-top:3px solid var(--wine); margin-top:4px; }
.resp-detail-header{ align-items:flex-start !important; flex-wrap:wrap; gap:8px; }
.resp-detail-header h2{ font-size:17px; font-weight:700; }
.resp-tab-btns{ display:flex; gap:6px; margin-bottom:16px; }
.casos-cat-nav{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-bottom:16px; }
.casos-cat-nav .resp-tab-btns{ margin-bottom:0; flex-wrap:wrap; }
.casos-cat-select{ width:auto; min-width:190px; border-color:#d9cfc6; }
.casos-cat-select:focus{ border-color:#8C0F13; box-shadow:0 0 0 2px rgba(140,15,19,.12); }
.resp-tab-btn{ padding:6px 14px; font-size:12.5px; font-weight:600; border:1px solid var(--border); border-radius:7px; background:var(--card); color:var(--t3); cursor:pointer; }
.resp-tab-btn.is-active{ background:var(--wine); border-color:var(--wine); color:#fff; }
.resp-subview{ display:none; }
.resp-subview.is-active{ display:block; }

/* ============================== TENDENCY PERIOD BUTTONS ============================== */
.tend-period-btns{ display:flex; gap:4px; flex-shrink:0; }
.tend-btn{ padding:4px 12px; font-size:11.5px; font-weight:600; border:1px solid var(--border); border-radius:6px; background:var(--card); color:var(--t3); cursor:pointer; transition:background .15s, color .15s, border-color .15s; }
.tend-btn:hover{ background:var(--neutral); color:var(--t1); }
.tend-btn--active{ background:var(--wine); border-color:var(--wine); color:#fff; }

/* ============================== RESPONSIVE ============================== */
@media (max-width:1200px){ .grid-2col{ grid-template-columns:1fr; } .grid-3col{ grid-template-columns:1fr 1fr; } }
@media (max-width:991px){
  .sidebar{ transform:translateX(-100%); }
  .sidebar.is-open{ transform:translateX(0); }
  .sidebar-overlay.is-open{ display:block; }
  .main-content{ margin-left:0; }
  .global-search{ display:none; }
  .grid-3col{ grid-template-columns:1fr; }
  .topbar{ padding:0 16px; gap:10px; }
  .view-container{ padding:18px 16px 40px; }
}
@media (max-width:600px){
  .last-update{ display:none; }
  .view-title{ font-size:18px; }
  .kpi-grid{ grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); }
  .kpi-card .kpi-value{ font-size:24px; }
}

.sidebar-nav::-webkit-scrollbar{ width:6px; }
.sidebar-nav::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.15); border-radius:99px; }
/* Columnas de "Gestión del día" en Responsables: se distinguen del resto. */
table.data-table thead th.th-dia{ background:#E9DFD3; color:var(--wine); }
table.resp-resumen-table td:first-child{ min-width:150px; }
table.resp-resumen-table thead th{ font-size:10.5px; letter-spacing:.2px; }
.resp-dia-solo{ display:inline-flex; align-items:center; gap:6px; margin-left:10px; text-transform:none !important; letter-spacing:0 !important; font-weight:500 !important; color:var(--t2) !important; cursor:pointer; }
/* Paginación y botones de DataTables con la integración Bootstrap 5: misma paleta del dashboard
   (sin esto salen en azul y los botones Excel/CSV se estiran a todo el ancho). */
div.dataTables_wrapper .pagination{ margin:6px 0 0; gap:3px; flex-wrap:wrap; }
div.dataTables_wrapper .page-link{ font-size:12.5px; padding:4px 10px; color:var(--t2); border:1px solid var(--border); border-radius:6px !important; background:var(--card); box-shadow:none !important; }
div.dataTables_wrapper .page-item.active .page-link{ background:var(--wine); border-color:var(--wine); color:#fff; }
div.dataTables_wrapper .page-item.disabled .page-link{ color:var(--t3); opacity:.6; background:var(--card); }
div.dataTables_wrapper .page-link:hover{ background:var(--neutral); color:var(--t1); }
.dt-buttons.btn-group{ display:flex; gap:8px; width:auto; }
.dt-buttons.btn-group > .btn{ flex:0 0 auto; border-radius:7px !important; }
/* Flechas de orden más juntas: DataTables reserva 26px por columna y en tablas anchas no caben. */
table.dataTable thead > tr > th.sorting, table.dataTable thead > tr > th.sorting_asc, table.dataTable thead > tr > th.sorting_desc{ padding-right:16px !important; }
table.dataTable thead > tr > th.sorting:before, table.dataTable thead > tr > th.sorting:after,
table.dataTable thead > tr > th.sorting_asc:before, table.dataTable thead > tr > th.sorting_asc:after,
table.dataTable thead > tr > th.sorting_desc:before, table.dataTable thead > tr > th.sorting_desc:after{ right:4px !important; }
table.data-table td.td-dia-detalle{ white-space:nowrap; color:var(--t3); }
/* Evaluación por período: semáforo del ANS real (≥90 / ≥75 / <75). */
table.data-table td.eval-ok{ color:#2a7a3b; font-weight:700; }
table.data-table td.eval-medio{ color:#B07D1A; font-weight:700; }
table.data-table td.eval-bajo{ color:var(--status-critico); font-weight:700; }
/* Tabla de evaluación (12 columnas): más compacta para que quepa sin desplazamiento. */
#tableRespEval thead th, #tableRespEval tbody td{ padding-left:5px; padding-right:5px; }
#tableRespEval thead th.sorting, #tableRespEval thead th.sorting_asc, #tableRespEval thead th.sorting_desc{ padding-right:14px !important; }
#tableRespEval td:first-child{ min-width:120px; }
/* Fuera del reporte: número de caso y fechas en una sola línea. */
#tableFueraReporte td:nth-child(1), #tableFueraReporte td:nth-child(2), #tableFueraReporte td:nth-child(4),
#tableFueraReporte td:nth-child(11), #tableFueraReporte td:nth-child(12), #tableFueraReporte td:nth-child(13){ white-space:nowrap; }
/* Detalle de la evaluación: columna "Por qué cuenta" más ancha, fechas en una línea. */
#tableRespEvalDetalle td:nth-child(3){ white-space:nowrap; }
#tableRespEvalDetalle td:nth-child(4){ min-width:280px; }
.tag-retirado{ display:inline-block; margin-top:2px; font-size:10.5px; font-weight:600; color:var(--t3); border:1px dashed var(--t3); border-radius:99px; padding:0 7px; cursor:help; }