:root { --brand:#0b5ed7; --brand-50:#e8f0fe; --ok:#2ebf6a; --warn:#ffb020; --bad:#e55353; }
body{ background:#fff; }
.one-screen{ min-height:calc(100vh - 90px); }
.card-sub{ background:#fff; border:1px solid #edf0f3; border-radius:14px; }
.kpi-card{ flex:1 1 220px; background:#fff; border:1px solid #e8edf3; border-radius:14px; padding:12px 16px; min-width:220px; }
.kpi-title{ font-size:.85rem; color:#6b7280; }
.kpi-value{ font-size:2rem; font-weight:800; color:var(--brand); }

.traffic .light{ width:18px; height:18px; border-radius:50%; display:inline-block; border:2px solid #e6e6e6; box-shadow: inset 0 0 0 2px #fff; }
.traffic .red{ background:var(--bad); } .traffic .amber{ background:var(--warn); } .traffic .green{ background:var(--ok); }

.timeline{ display:grid; gap:10px; }
.timeline .item{ display:grid; grid-template-columns: 180px 1fr; align-items:center; gap:10px; font-size:.9rem; }
.timeline .bar{ height:8px; background:#eef2f6; border-radius:999px; position:relative; overflow:hidden; }
.timeline .dot{ position:absolute; top:50%; transform:translateY(-50%); width:14px; height:14px; border-radius:50%; background:var(--brand); border:2px solid #fff; box-shadow:0 0 0 2px var(--brand-50); }

.timeline-phases{ font-size:.78rem; }
.timeline-phases span{ flex:1 1 auto; text-align:center; }

table td, table th { white-space:nowrap; }

/* Gráficos: contenedores de altura fija para evitar bucles */
.chart-wrap{ position:relative; width:100%; }
.h-220{ height:220px; }
.h-240{ height:240px; }

.card-body, .card-sub{ min-height:0; }

/* Scroll interno y cabeceras sticky para lectura rápida */
.scroll-y{ overflow:auto; overscroll-behavior:contain; }
.table thead th{ position:sticky; top:0; background:#f8f9fa; z-index:1; }

/* ===== Responsivo (decisiones en 30s) ===== */
/* Desktop grande */
@media (min-width: 1200px){
  .panel-pocs-table{ max-height: 38vh; }
  .panel-timeline{ max-height: 34vh; }
  .panel-tickets-table{ max-height: 34vh; }
}
/* Laptops / tablets landscape */
@media (max-width: 1199.98px){
  .panel-pocs-table{ max-height: 40vh; }
  .panel-timeline{ max-height: 32vh; }
  .panel-tickets-table{ max-height: 32vh; }
  .h-220{ height:190px; }
  .h-240{ height:190px; }
}
/* Tablets portrait / móviles */
@media (max-width: 767.98px){
  .panel-pocs-table{ max-height: 42vh; }
  .panel-timeline{ max-height: 30vh; }
  .panel-tickets-table{ max-height: 30vh; }
  .h-220{ height:160px; }
  .h-240{ height:160px; }
  .timeline .item{ grid-template-columns: 140px 1fr; }
}

/* Truncado suave para celdas muy largas */
.table td{ max-width: 220px; overflow:hidden; text-overflow:ellipsis; }

/* Alturas equivalentes para paneles full-width debajo (POCs críticos y Timeline) */
@media (min-width: 1200px){
  .panel-pocs-table{ max-height: 34vh; }   /* = panel-timeline */
  .panel-timeline{  max-height: 34vh; }
}

@media (max-width: 1199.98px){
  .panel-pocs-table{ max-height: 32vh; }   /* = panel-timeline */
  .panel-timeline{  max-height: 32vh; }
}

@media (max-width: 767.98px){
  .panel-pocs-table{ max-height: 30vh; }   /* = panel-timeline */
  .panel-timeline{  max-height: 30vh; }
}

/* Reducir tamaño de fuente y compactar tabla de POCs críticos */
#tbl_pocs_critical td, 
#tbl_pocs_critical th {
  font-size: 0.80rem;   /* más pequeño que el normal (~12.8px si base=16px) */
  padding: 0.35rem 0.5rem; /* menos espacio vertical y horizontal */
}

#tbl_pocs_critical th {
  font-weight: 600; /* mantener cabecera clara */
}

/* ===== Barra segmentada por fases en KPI POCs ===== */
.kpi-phasebar{
  display:flex; gap:2px; height:12px; border-radius:8px;
  background:#eef2f6; padding:2px; align-items:stretch; overflow:hidden;
}
.kpi-phasebar .seg{
  height:100%; min-width:0; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  font-size:.68rem; line-height:1; color:#fff; /* número encima del segmento */
}

/* Paleta suave por fase (puedes ajustar si quieres) */
.seg-1{ background:#1e88e5; }  /* Inicio */
.seg-2{ background:#43a047; }  /* Planificación */
.seg-3{ background:#fb8c00; }  /* Ejecución */
.seg-4{ background:#8e24aa; }  /* Pruebas */
.seg-5{ background:#f4511e; }  /* Cierre */
.seg-6{ background:#3949ab; }  /* Operación */

/* Leyenda compacta debajo de la barra */
.kpi-phaselegend{
  display:flex; flex-wrap:wrap; gap:6px 10px;
  font-size:.72rem; color:#6b7280;
}
.kpi-phaselegend .item{ display:flex; align-items:center; gap:6px; }
.kpi-phaselegend .dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.kpi-phaselegend .lbl{ white-space:nowrap; }

/* Gráfico de POCs por país optimizado y compacto */
.chart-country {
  height: 160px !important;   /* fuerza altura fija más baja */
  max-height: 160px !important;
  display: block;
}

.chart-container {
  padding: 0;                 /* sin padding extra */
  margin: 0;                  /* sin márgenes que bajen el contenido */
}