[hidden] { display: none !important; }

/* ==========================================================================
   portal.css
   Estilos del Portal SUCC - Gestion de Tickets.
   Identidad visual identica al mockup aprobado por el cliente
   (Portal_SUCC_-_Mockup_Figma.html). Se agregan aqui unicamente los estados
   necesarios para datos reales: login, banner de error, skeleton de carga,
   estado vacio, indicador de autoguardado, toasts e impresion.
   ========================================================================== */

:root{
  --azul-primario:#1F3864;
  --azul-acento:#2E74B5;
  --fondo:#F7F9FC;
  --superficie:#FFFFFF;
  --texto:#202124;
  --texto-sec:#5F6368;
  --borde:#E5E8EC;

  --pend-bg:#FFF3CD; --pend-fg:#7B5700;
  --proc-bg:#DBEBF6; --proc-fg:#1F3864;
  --res-bg:#DAF0E1;  --res-fg:#1E6B3E;
  --der-bg:#E9DEF7;  --der-fg:#5A3F94;
  --cer-bg:#E5E8EC;  --cer-fg:#4A4E56;

  --alta-bg:#FBE0E0; --alta-fg:#C00000;
  --media-bg:#FFEAD1; --media-fg:#B26A00;
  --baja-bg:#E5E8EC; --baja-fg:#4A4E56;

  --ori-cons-bg:#EAF2FE; --ori-cons-fg:#2E74B5;
  --ori-recl-bg:#E3F4F1; --ori-recl-fg:#0F766E;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:"Segoe UI", system-ui, sans-serif;
  background:var(--fondo);
  color:var(--texto);
  font-size:14px;
  line-height:1.5;
}
a{color:var(--azul-acento);}
a:hover{color:var(--azul-primario);}
button{font-family:inherit;cursor:pointer;}
input, select, textarea{font-family:inherit;font-size:13px;color:var(--texto);}

.app{display:flex;min-height:100vh;}

/* ============ SIDEBAR ============ */
.sidebar{
  width:220px;
  flex-shrink:0;
  background:var(--superficie);
  border-right:1px solid var(--borde);
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  height:100vh;
}
.sidebar__logo{
  padding:22px 18px 16px;
  border-bottom:1px solid var(--borde);
  display:flex;
  align-items:center;
  gap:10px;
}
.sidebar__logo-text{line-height:1.2;}
.sidebar__logo-text strong{
  display:block;
  font-size:19px;
  font-weight:700;
  color:var(--azul-primario);
  letter-spacing:.3px;
}
.sidebar__logo-text span{
  display:block;
  font-size:11px;
  color:var(--texto-sec);
}
.sidebar__logo-img{flex-shrink:0;object-fit:contain;}
.login-logo{display:block;margin:0 auto 6px;object-fit:contain;}
nav.sidebar__nav{padding:14px 10px;display:flex;flex-direction:column;gap:2px;}
.navlink{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 12px;
  border-radius:6px;
  font-size:13.5px;
  font-weight:500;
  color:var(--texto-sec);
  text-decoration:none;
  border:none;
  background:transparent;
  width:100%;
  text-align:left;
}
.navlink:hover{background:#EEF2F7;}
.navlink.active{background:var(--azul-primario);color:#fff;font-weight:600;}
.navlink .ic{font-size:15px;}

.sidebar__section{padding:16px 16px 6px;}
.sidebar__section h3{
  margin:0 0 8px;
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--texto-sec);
}
.filter-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:7px 10px;
  border-radius:6px;
  font-size:13px;
  color:var(--texto);
  cursor:pointer;
  border:none;
  background:transparent;
  width:100%;
  text-align:left;
}
.filter-row:hover{background:#EEF2F7;}
.filter-row.active{background:#E7F0FA;font-weight:600;color:var(--azul-primario);}
.badge-count{
  font-size:11px;
  font-weight:700;
  padding:1px 8px;
  border-radius:9px;
  background:var(--cer-bg);
  color:var(--cer-fg);
}
.badge-count.pend{background:var(--pend-bg);color:var(--pend-fg);}
.badge-count.proc{background:var(--proc-bg);color:var(--proc-fg);}
.badge-count.res{background:var(--res-bg);color:var(--res-fg);}
.badge-count.der{background:var(--der-bg);color:var(--der-fg);}
.badge-count.origen-consultas{background:var(--ori-cons-bg);color:var(--ori-cons-fg);}
.badge-count.origen-reclamos{background:var(--ori-recl-bg);color:var(--ori-recl-fg);}

select.filter-select{
  width:100%;
  padding:7px 10px;
  border:1px solid var(--borde);
  border-radius:6px;
  background:#fff;
  color:var(--texto);
}
.chip-row{display:flex;gap:6px;flex-wrap:wrap;}
.chip{
  border:1px solid var(--borde);
  background:#fff;
  color:var(--texto-sec);
  font-size:12px;
  font-weight:600;
  padding:5px 11px;
  border-radius:14px;
}
.chip.active[data-p="Alta"]{background:var(--alta-bg);color:var(--alta-fg);border-color:transparent;}
.chip.active[data-p="Media"]{background:var(--media-bg);color:var(--media-fg);border-color:transparent;}
.chip.active[data-p="Baja"]{background:var(--baja-bg);color:var(--baja-fg);border-color:transparent;}

.sidebar__user{
  margin-top:auto;
  padding:14px 16px;
  border-top:1px solid var(--borde);
  display:flex;
  align-items:center;
  gap:10px;
}
.avatar{
  width:32px;height:32px;border-radius:50%;
  background:var(--azul-acento);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;flex-shrink:0;
}
.sidebar__user-name{font-size:13px;font-weight:600;}
.sidebar__user-role{font-size:11px;color:var(--texto-sec);}
.logout-btn{
  margin-left:auto;
  border:1px solid var(--borde);
  background:#fff;
  border-radius:6px;
  width:28px;height:28px;
  flex-shrink:0;
  font-size:13px;
}

.admin-only[hidden]{display:none !important;}

/* ============ MAIN ============ */
main.main{flex:1;min-width:0;padding:28px 24px 60px;}
.screen{display:none;}
.screen.active{display:block;}

.page-header{
  display:flex;
  align-items:flex-start;
  gap:18px;
  margin-bottom:22px;
  flex-wrap:wrap;
}
.page-header h1{margin:0;font-size:28px;font-weight:600;color:var(--texto);}
.page-header .subtitle{font-size:14px;color:var(--texto-sec);margin-top:4px;}

.search-box{position:relative;flex:1;max-width:380px;min-width:220px;}
.search-box input{
  width:100%;
  padding:9px 12px 9px 34px;
  border:1px solid var(--borde);
  border-radius:6px;
  background:#fff;
}
.search-box .ic{position:absolute;left:11px;top:9px;font-size:14px;color:var(--texto-sec);}

.btn{
  border-radius:6px;
  padding:9px 16px;
  font-size:13.5px;
  font-weight:600;
  border:1px solid transparent;
}
.btn-primary{background:var(--azul-primario);color:#fff;}
.btn-secondary{background:#fff;color:var(--azul-acento);border-color:var(--azul-acento);}
.btn-danger{background:#fff;color:#C00000;border-color:#C00000;}
.btn-ghost{background:#fff;color:var(--texto);border-color:var(--borde);}
.btn-sm{padding:5px 10px;font-size:12px;}
.btn:disabled{opacity:.55;cursor:not-allowed;}
.btn:focus-visible, .navlink:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible{
  outline:2px solid var(--azul-acento);
  outline-offset:2px;
}

.toolbar{display:flex;align-items:center;gap:10px;margin-left:auto;flex-wrap:wrap;}
.icon-btn{
  width:36px;height:36px;border-radius:6px;border:1px solid var(--borde);
  background:#fff;font-size:15px;display:flex;align-items:center;justify-content:center;
  position:relative;
}
.icon-btn .dot{
  position:absolute;top:-4px;right:-4px;
  width:15px;height:15px;border-radius:50%;
  background:#C00000;color:#fff;font-size:9px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}

.card{
  background:var(--superficie);
  border-radius:6px;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  padding:18px 20px;
}

/* ============ TABS (Origen) ============ */
.tabs{
  display:flex;
  gap:4px;
  margin-bottom:16px;
  border-bottom:1px solid var(--borde);
  flex-wrap:wrap;
}
.tab{
  background:none;
  border:none;
  padding:10px 16px;
  font-size:13.5px;
  font-weight:600;
  color:var(--texto-sec);
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  display:flex;
  align-items:center;
  gap:8px;
}
.tab:hover{color:var(--texto);}
.tab.active{color:var(--azul-primario);border-bottom-color:var(--azul-primario);}
.tab .badge-count{background:var(--fondo);}
.tab.active .badge-count{background:#E7F0FA;color:var(--azul-primario);}

/* ---- table ---- */
.table-card{padding:0;overflow-x:auto;}
table.tickets{width:100%;min-width:1218px;border-collapse:collapse;table-layout:fixed;}
table.tickets col.col-numero{width:124px;}
table.tickets col.col-fecha{width:96px;}
table.tickets col.col-origen{width:112px;}
table.tickets col.col-remitente{width:160px;}
table.tickets col.col-asunto{width:auto;}
table.tickets col.col-tipo{width:92px;}
table.tickets col.col-area{width:120px;}
table.tickets col.col-prioridad{width:78px;}
table.tickets col.col-estado{width:96px;}
table.tickets col.col-asignado{width:130px;}
table.tickets col.col-acciones{width:36px;}
table.tickets thead th{
  text-align:left;
  font-size:10.5px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.3px;
  color:var(--texto-sec);
  padding:10px 8px;
  border-bottom:1px solid var(--borde);
  background:#FAFBFD;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
table.tickets tbody td{
  padding:10px 8px;
  border-bottom:1px solid var(--borde);
  font-size:12.5px;
  vertical-align:middle;
  overflow:hidden;
}
table.tickets tbody tr{cursor:pointer;}
table.tickets tbody tr:hover{background:#F3F6FA;}
table.tickets tbody tr:nth-child(even){background:#FCFDFE;}
table.tickets tbody tr:nth-child(even):hover{background:#F3F6FA;}
table.tickets tbody tr.is-hidden{display:none;}

.tk-numero{font-weight:700;color:var(--azul-acento);white-space:nowrap;}
.tk-remitente strong{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tk-remitente span{display:block;font-size:10.5px;color:var(--texto-sec);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tk-asunto{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.badge{
  display:inline-block;
  padding:3px 10px;
  border-radius:4px;
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
}
.badge-tipo{background:#EAF2FE;color:var(--azul-acento);}
.badge-area{background:#EEF1F5;color:#3C4043;}
.badge-pend{background:var(--pend-bg);color:var(--pend-fg);}
.badge-proc{background:var(--proc-bg);color:var(--proc-fg);}
.badge-res{background:var(--res-bg);color:var(--res-fg);}
.badge-der{background:var(--der-bg);color:var(--der-fg);}
.badge-cer{background:var(--cer-bg);color:var(--cer-fg);}
.badge-origen-consultas{background:var(--ori-cons-bg);color:var(--ori-cons-fg);}
.badge-origen-reclamos{background:var(--ori-recl-bg);color:var(--ori-recl-fg);}
.chip-prio{
  display:inline-block;
  padding:3px 10px;
  border-radius:14px;
  font-size:11px;
  font-weight:700;
}
.chip-alta{background:var(--alta-bg);color:var(--alta-fg);}
.chip-media{background:var(--media-bg);color:var(--media-fg);}
.chip-baja{background:var(--baja-bg);color:var(--baja-fg);}

.tk-asignado{display:flex;align-items:center;gap:6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.tk-asignado .avatar{width:22px;height:22px;font-size:9.5px;flex-shrink:0;}

.kebab{border:none;background:none;font-size:16px;color:var(--texto-sec);padding:4px 8px;border-radius:4px;}
.kebab:hover{background:#EEF2F7;}

.row-menu-pop{
  position:absolute;z-index:60;
  background:#fff;border:1px solid var(--borde);border-radius:6px;
  box-shadow:0 6px 18px rgba(0,0,0,.16);
  min-width:160px;padding:4px;
}
.row-menu-pop[hidden]{display:none !important;}
.row-menu-pop button{
  display:block;width:100%;text-align:left;
  background:none;border:none;cursor:pointer;
  padding:8px 10px;border-radius:4px;
  font-size:12.5px;color:var(--texto);
}
.row-menu-pop button:hover{background:#EEF2F7;}

.pagination{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;font-size:12.5px;color:var(--texto-sec);
}
.pagination .pg-btns{display:flex;gap:6px;}
.pagination button{
  width:28px;height:28px;border:1px solid var(--borde);background:#fff;border-radius:5px;font-size:12px;
}
.pagination button:disabled{opacity:.4;cursor:not-allowed;}

/* ---- skeleton / estado vacio ---- */
.skeleton-row td{padding:12px 8px;border-bottom:1px solid var(--borde);}
.skeleton-bar{
  height:12px;border-radius:4px;background:linear-gradient(90deg,#EEF1F5 25%,#F7F9FC 37%,#EEF1F5 63%);
  background-size:400% 100%;animation:skeleton-shimmer 1.4s ease infinite;
}
@keyframes skeleton-shimmer{0%{background-position:100% 0;}100%{background-position:0 0;}}

.empty-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:56px 20px;color:var(--texto-sec);text-align:center;
}
.empty-state__ic{font-size:34px;margin-bottom:10px;}
.empty-state p{margin:0;font-size:14px;}

/* ---- Detalle ---- */
.detail-header{display:flex;align-items:center;gap:14px;margin-bottom:20px;flex-wrap:wrap;}
.back-link{
  display:flex;align-items:center;gap:6px;
  background:none;border:none;color:var(--azul-acento);font-size:13.5px;font-weight:600;
}
.detail-header h1{font-size:26px;font-weight:700;color:var(--azul-primario);margin:0;}
.detail-grid{display:flex;gap:24px;align-items:flex-start;}
.detail-left{flex:0 0 63%;display:flex;flex-direction:column;gap:16px;min-width:0;}
.detail-right{flex:1;position:sticky;top:28px;display:flex;flex-direction:column;gap:14px;}

.card h2{margin:0 0 10px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--texto-sec);}
.card-ia{background:#EAF2FE;border:1px solid #D3E4F7;}
.card-ia .ic{font-size:18px;flex-shrink:0;}
.card-ia h2{color:var(--azul-primario);}
.card-ia p{margin:0;font-size:13.5px;}

/* ---- Análisis IA ---- */
.ia-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.ia-head h2{margin:0;}
.ia-resumen{margin:0 0 10px;font-size:13.5px;line-height:1.55;}
.ia-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px;}
.ia-tag{
  display:inline-block;padding:3px 10px;border-radius:12px;
  font-size:11px;font-weight:700;background:#fff;border:1px solid #D3E4F7;color:var(--azul-primario);
}
.ia-tag.sent-negativo,.ia-tag.urg-alta{background:var(--alta-bg);color:var(--alta-fg);border-color:transparent;}
.ia-tag.sent-neutro,.ia-tag.urg-media{background:var(--media-bg);color:var(--media-fg);border-color:transparent;}
.ia-tag.sent-positivo,.ia-tag.urg-baja{background:var(--res-bg);color:var(--res-fg);border-color:transparent;}
.ia-keywords{display:flex;gap:6px;flex-wrap:wrap;}
.ia-keywords .kw{
  font-size:11px;font-weight:600;color:var(--texto-sec);
  background:#fff;border:1px solid #D3E4F7;border-radius:4px;padding:2px 8px;
}

/* ---- Respuesta propuesta IA ---- */
.card-respuesta-ia{background:#F0FBF4;border:1px solid #C5E9D3;}
.card-respuesta-ia h2{color:var(--res-fg);margin:0;}
.respuesta-textarea{
  width:100%;min-height:150px;resize:vertical;
  border:1px solid #C5E9D3;border-radius:6px;background:#fff;
  padding:12px;font-size:13.5px;line-height:1.55;color:var(--texto);
  font-family:inherit;
}
.ia-fuentes{
  margin-top:8px;font-size:11.5px;color:var(--texto-sec);
}
.ia-fuentes strong{color:var(--res-fg);}
.respuesta-actions{display:flex;gap:8px;margin-top:12px;}
.ia-disclaimer{margin:10px 0 0;font-size:11px;color:var(--texto-sec);font-style:italic;}

.kv-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;font-size:13px;}
.kv-grid span.label{color:var(--texto-sec);}
.kv-grid strong{font-weight:600;}

.email-body{
  max-height:200px;overflow-y:auto;
  padding:4px 2px;
  font-size:13.5px;
  color:var(--texto);
  border-top:1px solid var(--borde);
  margin-top:6px;
  padding-top:12px;
}
.email-body blockquote{
  margin:10px 0;padding:8px 14px;
  border-left:3px solid var(--borde);
  color:var(--texto-sec);
  font-size:12.5px;
}

.attachments{display:flex;gap:10px;flex-wrap:wrap;}
.attachment-chip{
  display:flex;align-items:center;gap:8px;
  border:1px solid var(--borde);border-radius:16px;
  padding:6px 14px 6px 10px;font-size:12.5px;font-weight:600;color:var(--azul-acento);
  background:#fff;
}
.attachment-chip .ic{font-size:14px;}
.attachment-chip span.size{color:var(--texto-sec);font-weight:400;}

.timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.timeline li{display:flex;gap:10px;font-size:12.5px;}
.timeline .tl-dot{width:8px;height:8px;border-radius:50%;background:var(--azul-acento);margin-top:5px;flex-shrink:0;}
.timeline .tl-time{color:var(--texto-sec);}

.field-group{margin-bottom:14px;}
.field-group label{
  display:flex;align-items:center;gap:8px;
  font-size:11.5px;font-weight:600;color:var(--texto-sec);
  text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px;
}
.field-group select, .field-group input, .field-group textarea{
  width:100%;padding:9px 10px;border:1px solid var(--borde);border-radius:6px;background:#fff;
}
.field-group textarea{resize:vertical;min-height:90px;}

.autosave-indicator{
  text-transform:none;letter-spacing:0;font-weight:600;color:var(--res-fg);
}

.sla-card{background:#F7F9FC;}
.sla-row{display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px;}
.sla-bar{height:7px;border-radius:4px;background:var(--borde);overflow:hidden;margin:8px 0;}
.sla-bar-fill{height:100%;background:var(--res-fg);}
.sla-status{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--res-fg);}
.sla-status.warn{color:var(--media-fg);}
.sla-status.danger{color:var(--alta-fg);}
.sla-dot{width:9px;height:9px;border-radius:50%;background:var(--res-fg);}
.sla-status.warn .sla-dot{background:var(--media-fg);}
.sla-status.danger .sla-dot{background:var(--alta-fg);}
.sla-bar-fill.warn{background:var(--media-fg);}
.sla-bar-fill.danger{background:var(--alta-fg);}

.detail-actions{display:flex;flex-direction:column;gap:9px;}
.detail-actions .btn{width:100%;padding:11px;}

/* ---- Dashboard ---- */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:18px;}
.kpi-card .kpi-label{font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--texto-sec);}
.kpi-value{display:flex;align-items:baseline;gap:10px;margin-top:8px;}
.kpi-value strong{font-size:32px;font-weight:700;color:var(--azul-primario);}
.kpi-trend{font-size:11.5px;font-weight:700;padding:3px 8px;border-radius:8px;}
.kpi-trend.up{background:var(--res-bg);color:var(--res-fg);}
.kpi-trend.warn{background:var(--alta-bg);color:var(--alta-fg);}
.kpi-progress{height:6px;border-radius:3px;background:var(--borde);margin-top:10px;overflow:hidden;}
.kpi-progress-fill{height:100%;background:var(--azul-acento);}

.charts-row{display:grid;grid-template-columns:1fr 1.4fr;gap:18px;margin-bottom:18px;}
.chart-card h2{margin:0 0 14px;font-size:13px;font-weight:700;color:var(--texto);text-transform:none;letter-spacing:0;}
.donut-wrap{display:flex;align-items:center;gap:22px;}
/* Contenedores de tamaño fijo para que Chart.js no se estire */
.donut-box{width:160px;height:160px;flex-shrink:0;position:relative;}
.donut-box canvas{width:100%!important;height:100%!important;}
.chart-box{position:relative;height:240px;width:100%;}
.chart-box--tall{height:300px;}
.chart-box canvas{width:100%!important;height:100%!important;}
.legend{display:flex;flex-direction:column;gap:8px;font-size:12px;margin:0;padding:0;}
.legend .dot{width:10px;height:10px;border-radius:2px;display:inline-block;margin-right:7px;}
.legend .pct{margin-left:auto;font-weight:700;color:var(--texto-sec);}
.legend li{list-style:none;display:flex;align-items:center;}

.trend-card{margin-bottom:18px;}
.trend-legend{display:flex;gap:16px;font-size:12px;color:var(--texto-sec);margin-bottom:10px;}
.trend-legend .dot{width:9px;height:9px;border-radius:2px;display:inline-block;margin-right:6px;}

.oldest-table th, .oldest-table td{padding:9px 10px;font-size:12.5px;}
.oldest-table th{text-align:left;color:var(--texto-sec);text-transform:uppercase;font-size:10.5px;border-bottom:1px solid var(--borde);}
.oldest-table td{border-bottom:1px solid var(--borde);}
.oldest-table tr:last-child td{border-bottom:none;}

/* ============ LOGIN ============ */
.login-screen{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:var(--fondo);padding:20px;
}
.login-card{
  background:var(--superficie);border-radius:10px;box-shadow:0 4px 24px rgba(0,0,0,.08);
  padding:40px 36px;max-width:340px;width:100%;text-align:center;
}
.login-card h1{margin:14px 0 4px;font-size:22px;color:var(--azul-primario);}
.login-card p{margin:0 0 24px;color:var(--texto-sec);font-size:13.5px;}
.login-card .btn{width:100%;}
.login-error{
  margin-top:16px;padding:10px 12px;border-radius:6px;background:var(--alta-bg);color:var(--alta-fg);
  font-size:12.5px;text-align:left;
}

/* ============ BANNER DE ERROR GLOBAL ============ */
.error-banner{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:10px;
  background:#FBE0E0;color:#8A1414;
  padding:10px 20px;font-size:13px;font-weight:600;
}
.error-banner__close{margin-left:auto;background:none;border:none;color:#8A1414;font-size:14px;}

/* ============ TOASTS ============ */
.toast-container{
  position:fixed;bottom:20px;right:20px;z-index:40;
  display:flex;flex-direction:column;gap:10px;
}
.toast{
  background:var(--azul-primario);color:#fff;padding:11px 18px;border-radius:6px;
  font-size:13px;font-weight:600;box-shadow:0 4px 14px rgba(0,0,0,.18);
  animation:toast-in .2s ease;
}
.toast.error{background:#C00000;}
@keyframes toast-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

@media (max-width: 1100px){
  .detail-grid{flex-direction:column;}
  .detail-left, .detail-right{flex:1 1 auto;width:100%;}
  .kpi-grid{grid-template-columns:repeat(2,1fr);}
  .charts-row{grid-template-columns:1fr;}
}
@media (max-width: 860px){
  .sidebar{position:fixed;z-index:20;transform:translateX(-100%);transition:transform .2s;}
  .sidebar.open{transform:translateX(0);}
  .kpi-grid{grid-template-columns:1fr 1fr;}
}

/* ============ IMPRESION (Exportar a PDF) ============ */
@media print{
  .sidebar, .detail-actions, .back-link, #btnExportarPDF, .toast-container, .error-banner, .tabs{display:none !important;}
  .detail-right{position:static;}
  main.main{padding:0;}
  .card{box-shadow:none;border:1px solid var(--borde);}
}

/* ============================================================
   Tooltip informativo (Dashboard)
   ============================================================ */
.info-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 6px;
  border-radius: 50%;
  background: #E5E8EC;
  color: #5F6368;
  font-size: 11px;
  font-weight: 700;
  font-style: italic;
  font-family: Georgia, serif;
  cursor: help;
  position: relative;
  vertical-align: middle;
  user-select: none;
}
.info-tip:hover {
  background: #2E74B5;
  color: #FFFFFF;
}
.info-tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #1F3864;
  color: #FFFFFF;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 400;
  font-style: normal;
  font-family: "Segoe UI", system-ui, sans-serif;
  line-height: 1.4;
  white-space: normal;
  width: max-content;
  max-width: 260px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.info-tip::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: #1F3864;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 100;
}
.info-tip:hover::after,
.info-tip:hover::before {
  opacity: 1;
}
.kpi-label, .card.chart-card > h2 {
  display: flex;
  align-items: center;
}