/* =========================================================
   TABLERO EJECUTIVO DE INDICADORES — CEIBOAX / IMSS-BIENESTAR
   ========================================================= */

:root{
  /* ---- Paleta institucional base ---- */
  --guinda:        #9D2449;
  --guinda-oscuro:  #7A1B38;
  --azul-marino:   #003D6D;
  --azul-marino-2: #002B4D;
  --blanco:        #FFFFFF;
  --fondo:         #F1F4F7;
  --fondo-panel:   #FFFFFF;
  --linea:         #E2E8F0;
  --texto-principal: #1C2530;
  --texto-secundario: #5B6B7C;
  --texto-tenue:   #8B98A6;

  /* ---- Semáforo ---- */
  --semaforo-verde:   #167C45;
  --semaforo-verde-bg: #E7F5EC;
  --semaforo-amarillo: #B4690E;
  --semaforo-amarillo-bg: #FDF1E1;
  --semaforo-rojo:    #B3261E;
  --semaforo-rojo-bg: #FBE9E7;
  --semaforo-gris:    #6B7785;
  --semaforo-gris-bg: #ECEEF1;

  /* ---- Colores por departamento (familia tonal propia, oficinas heredan variación) ---- */
  --dep-1: #9D2449;   /* Atención Médica — guinda institucional */
  --dep-1-suave: #F4E2E8;
  --dep-2: #0E6E8C;   /* Supervisión y Desarrollo en Salud — azul petróleo */
  --dep-2-suave: #DFEFF3;
  --dep-3: #1C7A4E;   /* Epidemiología — verde institucional */
  --dep-3-suave: #E1F1E7;
  --dep-4: #6A3E8C;   /* Enfermería — morado */
  --dep-4-suave: #ECE3F2;
  --dep-5: #B5650F;   /* Programas Preventivos — ámbar */
  --dep-5-suave: #F7E9D8;
  --dep-6: #003D6D;   /* Educación e Investigación — azul marino */
  --dep-6-suave: #DCE6EE;

  /* ---- Tipografía ---- */
  --fuente-display: 'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
  --fuente-cuerpo:  'Inter', -apple-system, 'Segoe UI', sans-serif;

  /* ---- Geometría ---- */
  --radio-s: 6px;
  --radio-m: 10px;
  --radio-l: 16px;
  --sombra-card: 0 1px 2px rgba(16,30,46,.06), 0 1px 1px rgba(16,30,46,.04);
  --sombra-card-hover: 0 8px 24px rgba(16,30,46,.12), 0 2px 4px rgba(16,30,46,.06);
}

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

body{
  font-family: var(--fuente-cuerpo);
  background: var(--fondo);
  color: var(--texto-principal);
  -webkit-font-smoothing: antialiased;
  line-height: 1.45;
}

img{ max-width:100%; display:block; }

/* =================== ENCABEZADO INSTITUCIONAL =================== */

.encabezado{
  background: linear-gradient(100deg, var(--azul-marino-2) 0%, var(--azul-marino) 55%, var(--guinda-oscuro) 100%);
  color: var(--blanco);
  position: sticky;
  top:0;
  z-index: 50;
  box-shadow: 0 2px 12px rgba(0,0,0,.18);
}

.encabezado__barra{
  max-width: 1480px;
  margin: 0 auto;
  padding: 14px 28px;
  display:flex;
  align-items:center;
  gap:18px;
}

.encabezado__escudo{
  width:46px;
  height:46px;
  border-radius: 50%;
  background: var(--blanco);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  box-shadow: inset 0 0 0 2px rgba(157,36,73,.25);
}
.encabezado__escudo svg{ width:28px; height:28px; }

.encabezado__textos{ flex:1; min-width:0; }

.encabezado__eyebrow{
  font-family: var(--fuente-display);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  margin:0 0 2px;
}

.encabezado__titulo{
  font-family: var(--fuente-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: .01em;
  margin:0;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

.encabezado__sub{
  font-size: 12.5px;
  color: rgba(255,255,255,.78);
  margin:2px 0 0;
}

.encabezado__meta{
  display:flex;
  align-items:center;
  gap: 14px;
  flex-shrink:0;
}

.chip-actualizado{
  display:flex;
  align-items:center;
  gap:7px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 12.5px;
  white-space: nowrap;
}
.chip-actualizado svg{ width:14px; height:14px; opacity:.85; }

/* =================== BARRA DE NAVEGACIÓN / PESTAÑAS =================== */

.navegacion{
  background: var(--fondo-panel);
  border-bottom: 1px solid var(--linea);
  position: sticky;
  top: 74px;
  z-index: 40;
}

.navegacion__envoltura{
  max-width: 1480px;
  margin:0 auto;
  padding: 0 20px;
  display:flex;
  align-items:center;
  gap: 4px;
}

.tabs-deptos{
  display:flex;
  gap:4px;
  overflow-x:auto;
  scrollbar-width: thin;
  flex:1;
  padding: 10px 0;
}
.tabs-deptos::-webkit-scrollbar{ height:4px; }
.tabs-deptos::-webkit-scrollbar-thumb{ background: var(--linea); border-radius:4px; }

.tab-depto{
  font-family: var(--fuente-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing:.01em;
  white-space: nowrap;
  border: none;
  background: transparent;
  color: var(--texto-secundario);
  padding: 9px 16px;
  border-radius: 999px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:8px;
  transition: background .15s ease, color .15s ease;
}
.tab-depto__punto{
  width:8px; height:8px; border-radius:50%;
  background: var(--dep-color, var(--texto-tenue));
  flex-shrink:0;
}
.tab-depto:hover{ background: var(--fondo); color: var(--texto-principal); }
.tab-depto.activo{
  background: var(--dep-color, var(--azul-marino));
  color: var(--blanco);
}
.tab-depto.activo .tab-depto__punto{ background: var(--blanco); }

.btn-vertodo{
  font-family: var(--fuente-cuerpo);
  font-weight: 600;
  font-size: 12.5px;
  border: 1.5px solid var(--linea);
  background: var(--fondo-panel);
  color: var(--texto-secundario);
  padding: 8px 14px;
  border-radius: var(--radio-m);
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:6px;
  flex-shrink:0;
  transition: all .15s ease;
  margin-left: 8px;
}
.btn-vertodo:hover{ border-color: var(--azul-marino); color: var(--azul-marino); }
.btn-vertodo.activo{
  background: var(--azul-marino);
  border-color: var(--azul-marino);
  color: var(--blanco);
}
.btn-vertodo svg{ width:14px; height:14px; }

/* =================== CONTENEDOR PRINCIPAL =================== */

.contenedor{
  max-width: 1480px;
  margin: 0 auto;
  padding: 26px 20px 60px;
}

/* ---- Resumen ejecutivo (KPIs globales) ---- */

.resumen{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}

.resumen-card{
  background: var(--fondo-panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio-l);
  padding: 16px 18px;
  display:flex;
  align-items:center;
  gap: 14px;
  box-shadow: var(--sombra-card);
}

.resumen-card__icono{
  width: 42px; height:42px;
  border-radius: var(--radio-m);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.resumen-card__icono svg{ width:22px; height:22px; }

.resumen-card__icono.tot{ background:#E8EEF4; color: var(--azul-marino); }
.resumen-card__icono.verde{ background: var(--semaforo-verde-bg); color: var(--semaforo-verde); }
.resumen-card__icono.amarillo{ background: var(--semaforo-amarillo-bg); color: var(--semaforo-amarillo); }
.resumen-card__icono.rojo{ background: var(--semaforo-rojo-bg); color: var(--semaforo-rojo); }

.resumen-card__valor{
  font-family: var(--fuente-display);
  font-size: 26px;
  font-weight: 700;
  line-height:1;
  color: var(--texto-principal);
}
.resumen-card__label{
  font-size: 12px;
  color: var(--texto-secundario);
  margin-top:2px;
}

/* ---- Sección de departamento ---- */

.seccion-depto{
  margin-bottom: 38px;
}
.seccion-depto:last-child{ margin-bottom: 0; }

.seccion-depto__cabecera{
  display:flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--dep-color);
}

.seccion-depto__titulo{
  font-family: var(--fuente-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--dep-color);
  text-transform: uppercase;
  letter-spacing:.01em;
  margin:0;
}

.seccion-depto__conteo{
  font-size: 12.5px;
  color: var(--texto-tenue);
  white-space: nowrap;
}

/* ---- Oficina (grupo dentro de un departamento) ---- */

.bloque-oficina{
  margin-bottom: 22px;
}
.bloque-oficina:last-child{ margin-bottom:0; }

.bloque-oficina__titulo{
  display:flex;
  align-items:center;
  gap:8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-secundario);
  margin: 0 0 10px;
  padding-left: 2px;
}

.bloque-oficina__barra{
  width: 4px;
  height: 14px;
  border-radius:2px;
  background: var(--of-color, var(--dep-color));
  flex-shrink:0;
}

/* ---- Grid de tarjetas de indicador ---- */

.grid-indicadores{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 12px;
}

.card-indicador{
  position:relative;
  background: var(--fondo-panel);
  border: 1px solid var(--linea);
  border-left: 4px solid var(--of-color, var(--dep-color));
  border-radius: var(--radio-m);
  padding: 14px 15px 13px;
  box-shadow: var(--sombra-card);
  cursor: default;
  transition: box-shadow .18s ease, transform .18s ease;
}
.card-indicador:hover{
  box-shadow: var(--sombra-card-hover);
  transform: translateY(-2px);
}

.card-indicador__top{
  display:flex;
  justify-content: space-between;
  align-items:flex-start;
  gap:8px;
  margin-bottom:8px;
}

.card-indicador__clave{
  font-family: var(--fuente-display);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing:.04em;
  color: var(--texto-tenue);
  text-transform: uppercase;
}

.badge-semaforo{
  display:flex;
  align-items:center;
  gap:5px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing:.02em;
  padding: 4px 9px;
  border-radius: 999px;
  text-transform: uppercase;
  flex-shrink:0;
  white-space: nowrap;
}
.badge-semaforo__punto{ width:6px; height:6px; border-radius:50%; }

.badge-semaforo.verde{ background: var(--semaforo-verde-bg); color: var(--semaforo-verde); }
.badge-semaforo.verde .badge-semaforo__punto{ background: var(--semaforo-verde); }
.badge-semaforo.amarillo{ background: var(--semaforo-amarillo-bg); color: var(--semaforo-amarillo); }
.badge-semaforo.amarillo .badge-semaforo__punto{ background: var(--semaforo-amarillo); }
.badge-semaforo.rojo{ background: var(--semaforo-rojo-bg); color: var(--semaforo-rojo); }
.badge-semaforo.rojo .badge-semaforo__punto{ background: var(--semaforo-rojo); }
.badge-semaforo.gris{ background: var(--semaforo-gris-bg); color: var(--semaforo-gris); }
.badge-semaforo.gris .badge-semaforo__punto{ background: var(--semaforo-gris); }

.card-indicador__nombre{
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-principal);
  line-height: 1.32;
  margin: 0 0 10px;
  min-height: 34px;
  display:flex;
  align-items:flex-start;
}

.card-indicador__valorfila{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.card-indicador__valor{
  font-family: var(--fuente-display);
  font-size: 28px;
  font-weight: 700;
  line-height:1;
  color: var(--of-color, var(--dep-color));
}
.card-indicador__unidad{
  font-size: 13px;
  font-weight: 600;
  margin-left: 2px;
  opacity:.7;
}

.card-indicador__periodo{
  font-size: 11px;
  color: var(--texto-tenue);
  white-space: nowrap;
}

/* ---- Tooltip de definición (solo hover sobre toda la tarjeta) ---- */

.card-indicador__info{
  display:flex; align-items:center; justify-content:center;
  width: 15px; height:15px;
  flex-shrink:0;
  margin-top: 1px;
}
.card-indicador__info svg{ width:14px; height:14px; color: var(--texto-tenue); }

.tooltip-definicion{
  position:absolute;
  z-index: 60;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: 280px;
  background: var(--azul-marino-2);
  color: #EAF1F7;
  font-size: 12px;
  line-height:1.5;
  padding: 12px 14px;
  border-radius: var(--radio-m);
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
  opacity:0;
  pointer-events:none;
  transition: opacity .15s ease, transform .15s ease;
}
.tooltip-definicion::after{
  content:'';
  position:absolute;
  top:100%; left:50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--azul-marino-2);
}
.tooltip-definicion strong{
  display:block;
  color: #fff;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing:.04em;
  margin-bottom: 5px;
  opacity:.85;
}

.card-indicador:hover .tooltip-definicion{
  opacity:1;
  transform: translateX(-50%) translateY(0);
  pointer-events:auto;
}

/* Si la tarjeta está cerca del borde superior, el tooltip se voltea hacia abajo */
.card-indicador.tooltip-abajo .tooltip-definicion{
  bottom:auto;
  top: calc(100% + 10px);
}
.card-indicador.tooltip-abajo .tooltip-definicion::after{
  top:auto; bottom:100%;
  border-top-color: transparent;
  border-bottom-color: var(--azul-marino-2);
}

/* ---- Estado vacío: oficina sin indicadores ---- */

.card-vacia{
  background: repeating-linear-gradient(135deg, #FAFBFC 0 10px, #F4F6F8 10px 20px);
  border: 1.5px dashed var(--linea);
  border-radius: var(--radio-m);
  padding: 22px 16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:8px;
  min-height: 118px;
  grid-column: 1 / -1;
}
.card-vacia svg{ width:22px; height:22px; color: var(--texto-tenue); }
.card-vacia__texto{
  font-size: 12.5px;
  color: var(--texto-tenue);
  font-weight: 500;
}

/* =================== PIE INSTITUCIONAL =================== */

.pie{
  background: var(--azul-marino-2);
  color: rgba(255,255,255,.72);
  padding: 18px 20px;
  text-align:center;
  font-size: 11.5px;
}
.pie strong{ color: rgba(255,255,255,.92); }

/* =================== RESPONSIVE =================== */

@media (max-width: 900px){
  .resumen{ grid-template-columns: repeat(2, 1fr); }
  .encabezado__titulo{ font-size: 16px; }
  .encabezado__sub{ display:none; }
  .navegacion{ top: 64px; }
}

@media (max-width: 600px){
  .encabezado__barra{ padding: 12px 16px; gap:12px;}
  .encabezado__escudo{ width:38px; height:38px; }
  .encabezado__escudo svg{ width:22px; height:22px; }
  .encabezado__eyebrow{ display:none; }
  .encabezado__titulo{ white-space: normal; font-size: 15px; line-height:1.25; }
  .chip-actualizado span.txt-larga{ display:none; }
  .resumen{ grid-template-columns: 1fr 1fr; gap:10px; }
  .resumen-card{ padding:12px 14px; }
  .resumen-card__valor{ font-size:21px; }
  .grid-indicadores{ grid-template-columns: 1fr 1fr; }
  .tooltip-definicion{ width: 220px; }
  .contenedor{ padding: 18px 14px 40px; }
}

@media (max-width: 420px){
  .grid-indicadores{ grid-template-columns: 1fr; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .card-indicador, .tooltip-definicion, .tab-depto, .btn-vertodo{ transition:none; }
}

/* Foco visible accesible */
button:focus-visible{
  outline: 2.5px solid var(--azul-marino);
  outline-offset: 2px;
}