/* Tarjetas de estado (Monitoreo de zona, alertas del dashboard) */
.estado-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; padding-top: 1.5rem; }
.estado-tile {
    display: flex; align-items: center; gap: .75rem; min-width: 12rem;
    padding: .6rem .9rem; border-radius: .5rem;
    border: 1px solid rgba(128,128,128,.25); border-left-width: 4px;
    background: rgba(128,128,128,.06); transition: border-color .2s, background .2s;
}
.estado-tile .estado-icon {
    width: 2.25rem; height: 2.25rem; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 1.15rem; color: #fff;
}
.estado-tile .estado-nombre { font-weight: 600; line-height: 1.2; }
.estado-tile .estado-label { font-size: .75rem; opacity: .75; }
.estado-tile[data-status="ok"] { border-left-color: #28c76f; }
.estado-tile[data-status="ok"] .estado-icon { background: #28c76f; }
.estado-tile[data-status="warn"] { border-left-color: #ff9f43; }
.estado-tile[data-status="warn"] .estado-icon { background: #ff9f43; }
.estado-tile[data-status="fail"] { border-left-color: #ea5455; }
.estado-tile[data-status="fail"] .estado-icon { background: #ea5455; }
.estado-tile[data-status="fail"] .estado-icon::before { animation: estado-pulse 1.5s infinite; }
@keyframes estado-pulse { 50% { opacity: .35; } }
.estado-tile .estado-icon::before { font-family: "bootstrap-icons"; }
.estado-tile[data-status="ok"] .estado-icon::before { content: "\f26e"; }
.estado-tile[data-status="warn"] .estado-icon::before { content: "\f33a"; }
.estado-tile[data-status="fail"] .estado-icon::before { content: "\f623"; }

/* Variante para alertas del dashboard: varias líneas por zona */
.estado-tile.estado-tile-alerta { align-items: flex-start; flex: 1 1 18rem; max-width: 24rem; }
.estado-tile.estado-tile-alerta .estado-nombre a { color: inherit; }
.estado-tile.estado-tile-alerta .estado-label { margin-top: .25rem; }
.estado-tile.estado-tile-alerta .estado-label div + div { margin-top: .15rem; }
.estado-tiles.estado-tiles-alertas { justify-content: flex-start; padding-top: 0; }

/* Variante compacta (pills en la tabla de zonas) */
.estado-pill {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .1rem .5rem .1rem .3rem; margin: .1rem .15rem .1rem 0;
    border-radius: 999px; font-size: .75rem; font-weight: 600; line-height: 1.4;
    border: 1px solid rgba(128,128,128,.25); background: rgba(128,128,128,.06);
}
.estado-pill::before {
    font-family: "bootstrap-icons"; width: 1.1rem; height: 1.1rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; color: #fff;
}
.estado-pill[data-status="ok"] { border-color: rgba(40,199,111,.4); }
.estado-pill[data-status="ok"]::before { content: "\f26e"; background: #28c76f; }
.estado-pill[data-status="warn"] { border-color: rgba(255,159,67,.5); }
.estado-pill[data-status="warn"]::before { content: "\f33a"; background: #ff9f43; }
.estado-pill[data-status="fail"] { border-color: rgba(234,84,85,.5); background: rgba(234,84,85,.08); }
.estado-pill[data-status="fail"]::before { content: "\f623"; background: #ea5455; animation: estado-pulse 1.5s infinite; }

/* Tabla moderna: separadores finos + hover en lugar de filas rayadas */
.table.table-modern { margin-bottom: 0; }
.table.table-modern thead th {
    border-top: 0; border-bottom: 1px solid rgba(128,128,128,.3);
    padding: .5rem .75rem; font-size: .72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em; color: rgba(110,107,123,.75);
}
.table.table-modern tbody td {
    border-top: 0; border-bottom: 1px solid rgba(128,128,128,.15);
    padding: .65rem .75rem; vertical-align: middle;
    transition: background .15s;
}
.table.table-modern tbody tr:last-child td { border-bottom: 0; }
.table.table-modern tbody tr:hover td { background: rgba(128,128,128,.08); }
/* Variante compacta (tablas dentro de modales) */
.table.table-modern.table-modern-compact thead th { padding: .35rem .5rem; font-size: .68rem; }
.table.table-modern.table-modern-compact tbody td { padding: .4rem .5rem; font-size: .85rem; }
/* Separadores verticales finos (sin borde en la última columna) */
.table.table-modern thead th,
.table.table-modern tbody td { border-right: 1px solid rgba(128,128,128,.15); }
.table.table-modern thead th:last-child,
.table.table-modern tbody td:last-child { border-right: 0; }
.table.table-modern .table-actions { text-align: right; white-space: nowrap; }
.table.table-modern .table-actions .btn { padding: .35rem .6rem; opacity: .6; transition: opacity .15s; }
.table.table-modern tr:hover .table-actions .btn { opacity: 1; }
body.dark-layout .table.table-modern thead tr th {
    background-color: transparent; border-bottom: 1px solid rgba(255,255,255,.18);
    color: rgba(208,210,214,.7);
}
body.dark-layout .table.table-modern tbody tr:not([class*=table-]) td,
body.dark-layout .table.table-modern tbody tr:not([class*=table-]) th {
    border-bottom: 1px solid rgba(255,255,255,.08);
}
body.dark-layout .table.table-modern tbody tr:last-child td { border-bottom: 0; }
body.dark-layout .table.table-modern thead tr th,
body.dark-layout .table.table-modern tbody tr:not([class*=table-]) td { border-right: 1px solid rgba(255,255,255,.08); }
body.dark-layout .table.table-modern thead tr th:last-child,
body.dark-layout .table.table-modern tbody tr:not([class*=table-]) td:last-child { border-right: 0; }
body.dark-layout .table.table-modern tbody tr:hover td { background: rgba(255,255,255,.05); }
/* Variante sticky: primera columna y encabezado fijos al desplazar (tablas anchas) */
.table-responsive.table-sticky-wrap { max-height: 70vh; overflow: auto; }
.table.table-modern.table-modern-sticky thead th {
    position: sticky; top: 0; z-index: 2; background: #fff;
}
.table.table-modern.table-modern-sticky thead th:first-child,
.table.table-modern.table-modern-sticky tbody td:first-child {
    position: sticky; left: 0; z-index: 1; background: #fff;
    box-shadow: 2px 0 4px -2px rgba(0,0,0,.15);
}
.table.table-modern.table-modern-sticky thead th:first-child { z-index: 3; }
.table.table-modern.table-modern-sticky tbody tr:hover td:first-child { background: #f2f2f2; }
body.dark-layout .table.table-modern.table-modern-sticky thead th,
body.dark-layout .table.table-modern.table-modern-sticky tbody td:first-child { background: #283046; }
body.dark-layout .table.table-modern.table-modern-sticky tbody tr:hover td:first-child { background: #2f3850; }