:root{
  --bg:#0b0f19; --card:#0f172a; --text:#e5e7eb; --muted:#94a3b8; --border:#1f2937;
  --brand:#0ea5e9; --brand-contrast:#001018; --chip:#0b1220; --radius:16px; --shadow:0 10px 30px rgba(2,8,23,0.35);
}
:root.light{
  --bg:#f6f7f9; --card:#ffffff; --text:#0f172a; --muted:#64748b; --border:#e5e7eb;
  --brand:#111827; --brand-contrast:#ffffff; --chip:#f3f4f6; --shadow:0 10px 30px rgba(2,8,23,0.07);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,Arial,sans-serif;color:var(--text);background:var(--bg)}
.container{max-width:1100px;margin:0 auto;padding:0 16px}
.container--narrow{max-width:800px;margin:12px auto}

.site-header{position:sticky;top:0;z-index:10;backdrop-filter:blur(6px);background:rgba(2,6,23,.6);border-bottom:1px solid var(--border)}
:root.light .site-header{background:rgba(255,255,255,.85)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.logo{width:40px;height:40px;border-radius:12px}
.brand h1{font-size:clamp(18px,2.2vw,24px);margin:0}

.header-actions{display:flex;align-items:center;gap:10px}
.icon-btn{border:1px solid var(--border);background:transparent;color:var(--text);padding:8px;border-radius:12px;cursor:pointer}
.view-switch{display:flex;gap:8px}
.btn{border:1px solid var(--border);background:transparent;color:var(--text);padding:8px 12px;border-radius:12px;cursor:pointer}
.btn:hover{background:rgba(255,255,255,.06)}
:root.light .btn:hover{background:#f9fafb}
.btn.active,.btn:focus{outline:none;background:var(--brand);color:var(--brand-contrast);border-color:var(--brand)}

main{padding:22px 0 8px}
.filters{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.segmented{display:inline-flex;gap:6px;background:transparent;border:1px solid var(--border);padding:6px;border-radius:14px}
.seg-btn{border:0;background:transparent;padding:8px 14px;border-radius:10px;cursor:pointer;font-weight:600;color:var(--text)}
.seg-btn.active{background:var(--brand);color:var(--brand-contrast)}
.search input{width:min(380px);padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:transparent;color:var(--text)}

.stats{display:grid;grid-template-columns:1fr;gap:12px;margin:12px 0 18px}
@media(min-width:920px){.stats{grid-template-columns:1fr 1fr 1fr}}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.stat{padding:16px}.stat .stat-label{color:var(--muted);font-size:14px;margin-bottom:6px}.stat .stat-value{font-size:28px;font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:8px}.chips .chip{background: var(--chip);border:1px solid var(--border);padding:6px 10px;border-radius:999px;font-size:13px;cursor:default}
.chips.clickable .chip{cursor:pointer}
.muted{color:var(--muted)}

.list-container{display:block}
.table-wrap{overflow:auto;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse;font-size:14px}
thead th{position:sticky;top:0;text-align:left;padding:12px;background:#0b1220;border-bottom:1px solid var(--border);cursor:pointer;user-select:none}
:root.light thead th{background:#f3f4f6}
tbody td{padding:12px;border-top:1px solid var(--border);vertical-align:top}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;background:#1e293b;border:1px solid var(--border);font-size:12px}
:root.light .badge{background:#eef2ff}

.grid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:760px){.grid{grid-template-columns: 1fr 1fr}}
.card-incident{padding:14px}
.card-incident h3{margin:0 0 6px;font-size:18px}
.meta{color:var(--muted);font-size:13px;margin-bottom:6px}

.note{color:var(--muted);font-size:14px;margin:10px 0 26px}
.site-footer{border-top:1px solid var(--border);padding:18px 0 26px;color: var(--muted);text-align:center;background:transparent;margin-top:18px}
.link{color:#38bdf8;text-decoration:none}
.link:hover{text-decoration:underline}

/* Pagination */
.pager{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 0}
.pager-left{display:flex;align-items:center;gap:8px}
.pager-right{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.page-btn{border:1px solid var(--border);background:transparent;color:var(--text);border-radius:10px;padding:6px 10px;cursor:pointer}
.page-btn[disabled]{opacity:.5;cursor:not-allowed}
.page-btn.active{background:var(--brand);color:var(--brand-contrast);border-color:var(--brand)}
.page-size{border:1px solid var(--border);border-radius:10px;padding:6px 10px;background:transparent;color:var(--text)}

.sort-caret{margin-left:6px; opacity:.8; font-size:12px}
.icon-btn img {
  filter: invert(1);
}

:root.light .icon-btn img {
  filter: invert(0);
}



/* === Mejora de layout para 'Por tipo' === */

/* En escritorio, la fila .stats será una grilla de 12 columnas */
@media (min-width: 920px){
  .stats{
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  /* Total (izquierda) = 3/12, Por tipo (centro) = 6/12, Por región (derecha) = 3/12 */
  .stats .card.stat:nth-child(1){ grid-column: span 2; }
  .stats .card.stat:nth-child(2){ grid-column: span 8; } /* <-- más ancho */
  .stats .card.stat:nth-child(3){ grid-column: span 2; }
}

/* Por tipo: chips con ancho según contenido (no columnas iguales) */
#statByType.chips{
  display: flex !important;     /* fuerza flex y anula el grid anterior */
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: flex-start;
  /* por si quedó alguna propiedad de grid en caché: */
  grid-template-columns: unset;
}

/* Cada chip no debe estirarse; usa su propio ancho */
#statByType.chips > *{
  flex: 0 0 auto;               /* no crecer / no ocupar igual que otros */
  white-space: nowrap;          /* evita partir el texto en dos líneas */
}

/* (Opcional) Aplica también a 'Por región' si quieres el mismo estilo */
#statByRegion.chips{
 display: flex !important;     /* fuerza flex y anula el grid anterior */
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: flex-start;
  /* por si quedó alguna propiedad de grid en caché: */
  grid-template-columns: unset;
}
/* Cada chip no debe estirarse; usa su propio ancho */
#statByRegion.chips > *{
  flex: 0 0 auto;               /* no crecer / no ocupar igual que otros */
  white-space: nowrap;          /* evita partir el texto en dos líneas */
}