/* Tokens del Manual de Front End Einteligent 2026 (Diseño tableros imputs.pdf) */
:root {
  /* 3.1 imagotipo */
  --logo-negro: #000000;
  --logo-gris: #525252;
  --logo-azul: #0174FD;
  /* 3.2 colores principales (gráficas) */
  --g-azul-claro: #6FD6FF;
  --g-azul: #0174FD;
  --g-azul-oscuro: #003A82;
  --g-verde: #82C842;
  --g-verde-seco: #64B178;
  /* alertas */
  --a-rojo: #B10404;
  --a-salmon: #F26E5F;
  --a-naranja: #FF7B22;
  /* textos y componentes */
  --t-menu: #6D7D80;
  --t-general: #545454;
  --t-deshabilitado: #C5C5C5;
  --c-mapas: #6D5BBA;
  --c-dynamic: #69B445;
  --c-lease: #00B3FF;
  --c-citronella: #FF931E;
  /* columnas y fondos */
  --f-header: #000000;
  --f-tabla-1: #FFFFFF;
  --f-tabla-2: #F0F4F9;
  --f-tabla-titulo: #C2E7FF;
  --f-general: #E9EEF6;
  --f-secundario: #F0F1F1;
  --f-hover: #FFEB99;
  /* 12. botones */
  --btn-primario: #2201B2;
  --btn-rechazo: #EE4C01;
  /* derivados */
  --card-radius: 22px;
  --card-shadow: 0 10px 26px rgba(0, 58, 130, 0.10), 0 2px 6px rgba(0, 58, 130, 0.06);
  --font: Calibri, "Segoe UI", -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  font-size: 14px;                 /* cuerpo: Calibri regular 14 */
  color: var(--t-general);
  background: var(--f-general);
  min-height: 100vh;
}

/* ---------- header negro (manual: fondo de header #000000) ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--f-header);
  display: flex; align-items: center; gap: 28px;
  padding: 0 28px; height: 58px;
}
.topbar img.ei { height: 26px; display: block; }
.topbar .sep { width: 1px; height: 26px; background: rgba(255,255,255,.25); }
.topbar .sistema { color: #fff; font-size: 15px; letter-spacing: .4px; opacity: .92; }
.topbar nav { margin-left: auto; display: flex; gap: 6px; }
.topbar nav a {
  color: var(--t-deshabilitado); text-decoration: none; font-size: 14px;
  padding: 7px 16px; border-radius: 999px; transition: color .15s, background .15s;
}
.topbar nav a:hover { color: #fff; }
.topbar nav a.activo { background: var(--g-azul); color: #fff; }

/* ---------- head de la vista (card Head 10%) ---------- */
.head-card {
  background: #fff; border-radius: var(--card-radius); box-shadow: var(--card-shadow);
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding: 14px 26px; margin: 22px 26px 0;
}
.head-card img.banorte { height: 30px; }
.head-card h1 {
  font-size: 21px;                 /* título: Calibri regular 21 y altas */
  font-weight: 400; text-transform: uppercase; letter-spacing: 1px;
  color: var(--t-general); flex: 1; text-align: center; min-width: 220px;
}
.head-card .corte { font-size: 12.5px; color: var(--t-menu); text-align: right; line-height: 1.35; }
.head-card .corte b { color: var(--t-general); font-weight: 700; }

/* tabs de vistas dentro del tablero */
.tabs {
  display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 26px 0;
}
.tabs a {
  text-decoration: none; color: var(--t-menu); background: #fff;
  border: 1px solid transparent; border-radius: 999px; padding: 8px 18px;
  font-size: 14px; box-shadow: var(--card-shadow); transition: all .15s;
}
.tabs a:hover { background: var(--f-hover); color: var(--t-general); }
.tabs a.activo { background: var(--btn-primario); color: #fff; }

/* ---------- grid de cards (manual: distribución 30/30, 30/15/15, 40, 20) ---------- */
main { padding: 18px 26px 40px; display: grid; gap: 18px; grid-template-columns: repeat(20, 1fr); }
.card {
  background: #fff; border-radius: var(--card-radius); box-shadow: var(--card-shadow);
  padding: 18px 22px 20px; min-width: 0; position: relative;
  display: flex; flex-direction: column;
}
.card.w30 { grid-column: span 10; }
.card.w15 { grid-column: span 5; }
.card.w35 { grid-column: span 15; }
.card.w40, .card.w20 { grid-column: span 20; }
.card.w25 { grid-column: span 7; }
@media (max-width: 980px) { .card.w30, .card.w15, .card.w25, .card.w35 { grid-column: span 20; } }

/* en cards angostas el badge fluye arriba del título para no encimarse */
.card.w15 > .badge, .card.w25 > .badge { position: static; order: -1; align-self: flex-start; margin-bottom: 8px; }
.card.w15 h2, .card.w25 h2 { padding-right: 0; }

.card h2 {
  font-size: 18px;                 /* subtítulo: Calibri 18 */
  font-weight: 700; color: var(--t-general); margin-bottom: 4px; padding-right: 130px;
}
.card .sub { font-size: 13px; color: var(--t-menu); margin-bottom: 12px; }

/* dato duro (manual: Calibri Bold 100) */
.dato-duro { text-align: center; padding: 12px 0 6px; }
.dato-duro .num {
  font-weight: 700; color: var(--t-general);
  font-size: clamp(48px, 7vw, 100px); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.dato-duro .etiqueta { font-size: 18px; color: var(--t-general); margin-top: 10px; font-weight: 700; }

/* KPIs por marca */
.kpi-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: space-between; }
.kpi { flex: 1; min-width: 110px; text-align: center; padding: 10px 6px; border-radius: 14px; background: var(--f-tabla-2); }
.kpi .k-label { font-size: 13px; color: var(--t-menu); letter-spacing: .5px; }
.kpi .k-value { font-size: clamp(22px, 2.6vw, 34px); font-weight: 700; color: var(--g-azul); font-variant-numeric: tabular-nums; }

/* ---------- procedencia ---------- */
.badge {
  position: absolute; top: 16px; right: 18px;
  font-size: 11px; font-weight: 700; letter-spacing: .3px;
  padding: 4px 11px; border-radius: 999px; cursor: help; white-space: nowrap;
}
.badge.auditado { background: rgba(130, 200, 66, .18); color: #3d6b12; }
.badge.referencia_pptx { background: var(--f-hover); color: #7a5e00; }
.badge.pendiente { background: var(--f-secundario); color: var(--t-menu); }

.nota { font-size: 12px; color: var(--t-menu); margin-top: 10px; line-height: 1.45; border-top: 1px solid var(--f-tabla-2); padding-top: 8px; }

/* placeholder pendiente */
.pend {
  flex: 1; min-height: 150px; border: 2px dashed var(--t-deshabilitado); border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; color: var(--t-menu); font-size: 14px; text-align: center; padding: 18px;
}
.pend .icono { font-size: 26px; opacity: .55; }

/* ---------- tablas (manual: títulos #C2E7FF, fondos blanco/#F0F4F9, hover #FFEB99) ---------- */
.tabla-wrap { overflow-x: auto; flex: 1; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
thead th {
  background: var(--f-tabla-titulo); color: var(--t-general); font-weight: 700;
  padding: 8px 12px; text-align: left; white-space: nowrap; position: sticky; top: 0;
}
thead th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody td { padding: 7px 12px; white-space: nowrap; }
tbody tr:nth-child(even) { background: var(--f-tabla-2); }
tbody tr:hover { background: var(--f-hover); }
tbody tr.total td { font-weight: 700; border-top: 2px solid var(--f-tabla-titulo); background: #fff; }
td .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: baseline; }

/* ---------- gráficas ---------- */
.chart { width: 100%; flex: 1; min-height: 0; }
.chart svg { display: block; width: 100%; height: auto; }
.leyenda { display: flex; gap: 16px; flex-wrap: wrap; margin: 4px 0 10px; font-size: 13px; color: var(--t-general); }
.leyenda .item { display: flex; align-items: center; gap: 6px; }
.leyenda .sw { width: 11px; height: 11px; border-radius: 3px; }

/* tooltip */
#tooltip {
  position: fixed; z-index: 100; pointer-events: none; display: none;
  background: #fff; border-radius: 10px; box-shadow: 0 6px 22px rgba(0,58,130,.22);
  padding: 8px 12px; font-size: 13px; color: var(--t-general); max-width: 300px;
}
#tooltip b { color: var(--logo-negro); }

/* ---------- filtros / botones (manual 12: pill 160x43 / 80x43) ---------- */
.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.chip {
  border: 1.5px solid var(--t-deshabilitado); background: #fff; color: var(--t-general);
  border-radius: 999px; height: 34px; padding: 0 16px; font-family: var(--font); font-size: 13.5px;
  cursor: pointer; transition: all .15s;
}
.chip:hover { background: var(--f-hover); }
.chip.activo { background: var(--btn-primario); border-color: var(--btn-primario); color: #fff; }
.chip:disabled { color: var(--t-deshabilitado); cursor: not-allowed; background: var(--f-secundario); }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 160px; height: 43px; border-radius: 999px; border: none;
  background: var(--btn-primario); color: #fff; font-family: var(--font); font-size: 15px; cursor: pointer;
}
.btn.secundario { background: #fff; color: var(--btn-primario); border: 1.5px solid var(--btn-primario); }

/* footer discreto */
footer { text-align: center; padding: 8px 0 26px; font-size: 12px; color: var(--t-menu); }
footer a { color: var(--g-azul); text-decoration: none; }