/* Utilidades ERM — tamaños em de los widgets del dashboard.
   Reemplazan los style="font-size: X !important" inline históricos;
   son relativos al contenedor (h2/label), por eso em y no rem. */
.fs-em-70 { font-size: .7em !important; }
.fs-em-80 { font-size: .8em !important; }
.fs-em-90 { font-size: .9em !important; }

/* ==========================================================
   Estilos por página extraídos de <style> inline (lote 4).
   Mantener selectores con prefijo/scope de su página.
   ========================================================== */


/* === extraído de: user/group/index.blade.php === */
.groups-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px 8px;
    max-height: 340px;
    overflow-y: auto;
    border: 1px solid #dee2e6;
    border-radius: .25rem;
    padding: 10px 12px;
    background: #fafafa;
}
.group-item { margin-bottom: 2px; }


/* === extraído de: system/user/create.blade.php === */
.form-section-title {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #6c757d;
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 4px;
    margin-bottom: 12px;
}
.select2-container { width: 100% !important; }
.section-locked { opacity: .45; }
.groups-grid-locked { opacity: .45; pointer-events: none; }


/* === extraído de: system/user/edit.blade.php === */
.form-section-title {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #6c757d;
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 4px;
    margin-bottom: 12px;
}
.groups-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px 8px;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #dee2e6;
    border-radius: .25rem;
    padding: 10px 12px;
    background: #fafafa;
}
.group-item { margin-bottom: 2px; }
.select2-container { width: 100% !important; }
.section-locked { opacity: .45; }
.groups-grid-locked { opacity: .45; pointer-events: none; }


/* === extraído de: audit/index.blade.php === */
        .fix-selectpicker  .dropdown-menu.show {
            transform: scale(1) !important;
            opacity: 1 !important;
            visibility: visible !important;
        }


/* === extraído de: water-management/dashboard/statistics/small-boxes.blade.php === */
    .erm-kpi-row {
        display:grid; grid-template-columns: 1fr 1fr; gap:1rem;
        margin-bottom: 1.25rem;
    }
    @media (max-width:768px) { .erm-kpi-row { grid-template-columns: 1fr; } }

    .erm-kpi {
        padding:1.5rem 1.75rem; border-radius:12px; color:#fff;
        display:flex; justify-content:space-between; align-items:center;
        cursor:pointer;
        transition: transform .15s, box-shadow .15s;
        box-shadow:0 1px 3px rgba(0,0,0,.06);
        position:relative; overflow:hidden;
        text-decoration:none !important;
    }
    .erm-kpi:hover { transform: translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.12); color:#fff; }
    .erm-kpi-warn  { background: linear-gradient(135deg,#b58900,#cd9b1f); }
    .erm-kpi-alarm { background: linear-gradient(135deg,#b02a37,#dc3545); }
    .erm-kpi-num   {
        font-size: 2.4rem; font-weight:700; line-height:1;
        text-shadow: 0 1px 2px rgba(0,0,0,.15);
    }
    .erm-kpi-num small { font-size:1.2rem; font-weight:400; opacity:.85; }
    .erm-kpi-label { opacity:.95; font-size:.95rem; margin-top:.35rem; font-weight:500; }
    .erm-kpi-icon  { font-size: 2.8rem; opacity:.35; }


/* === extraído de: water-management/dashboard/statistics/cup-levels.blade.php === */
    /* Zonas en una sola columna, una sobre otra, ocupando el ancho completo */
    .erm-zones { display:flex; flex-direction:column; gap:1.25rem; }

    .erm-zone {
        background:#fff; border:1px solid #ced4da; border-radius:12px;
        box-shadow:0 2px 6px rgba(13,27,42,.06);
        transition: box-shadow .15s;
        overflow:hidden;
    }
    .erm-zone-body { padding: 1rem 1.25rem 1.25rem; }

    /* Header sobrio — mismo lenguaje visual que los tiles (gris claro + borde) */
    .erm-zone-head {
        display:flex; align-items:center; gap:.75rem;
        padding:.7rem 1.1rem;
        background:#f8f9fa;
        border-bottom:1px solid #dee2e6;
        border-left:4px solid #adb5bd;
    }
    .erm-zone-head .title-group { display:flex; align-items:center; gap:.6rem; flex:1; min-width:0; }
    .erm-zone-head h5 {
        color:#212529;
        font-size:1.05rem; font-weight:700; margin:0;
        letter-spacing:.01em;
        text-transform:none;
        white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }

    /* Handle de arrastre — discreto, mismo gris que el borde */
    .erm-zone-handle {
        cursor: grab; color:#6c757d; padding:4px 8px; border-radius:6px;
        user-select:none; font-size:1rem; line-height:1;
        transition: background .15s, color .15s;
        flex-shrink:0;
    }
    .erm-zone-handle:hover { background:#e9ecef; color:#0C2742; }
    .erm-zone-handle:active { cursor: grabbing; }

    /* Estados durante el drag */
    .erm-zone.sortable-ghost {
        opacity: .35; border-style: dashed; background:#f8f9fa;
    }
    .erm-zone.sortable-chosen { box-shadow:0 8px 24px rgba(0,0,0,.15); }
    .erm-zone.sortable-drag   { transform: rotate(.5deg); }

    .erm-grid {
        display:grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
        gap:.6rem;
    }

    .erm-tile {
        background:#fff; border:1px solid #ced4da; border-radius:8px;
        padding:.7rem .85rem; position:relative; overflow:hidden;
        text-decoration:none !important;
        transition: transform .12s, box-shadow .12s;
        display:flex; flex-direction:column;
    }
    .erm-tile:hover { transform: translateY(-2px); box-shadow:0 4px 12px rgba(13,27,42,.15); text-decoration:none; }
    .erm-tile-name { font-size:.8rem; font-weight:600; line-height:1.2; min-height:1.85em; }
    .erm-tile-value { font-size:1.55rem; font-weight:800; line-height:1.1; margin-top:.4rem; }
    .erm-tile-unit  { font-size:.8rem; font-weight:500; opacity:.7; margin-left:.1rem; }
    .erm-tile-bar { height:6px; border-radius:3px; margin-top:.5rem; background:rgba(0,0,0,.08); overflow:hidden; }
    .erm-tile-bar > span { display:block; height:100%; border-radius:3px; }

    /* === ESTADOS — fondos saturados para distinguir claramente === */

    /* OK: blanco con acento verde a la izquierda */
    .erm-tile-ok {
        border-left:6px solid #198754; border-color:#cfe2dc;
    }
    .erm-tile-ok .erm-tile-name  { color:#0f5132; }
    .erm-tile-ok .erm-tile-value { color:#0f5132; }
    .erm-tile-ok .erm-tile-bar > span { background:#198754; }

    /* WARN: fondo amarillo saturado, borde y texto oscuros — imposible confundir con OK */
    .erm-tile-warn {
        background:#fff3cd; border:1px solid #f0c14b; border-left:6px solid #d39e00;
    }
    .erm-tile-warn .erm-tile-name  { color:#664d03; }
    .erm-tile-warn .erm-tile-value { color:#664d03; }
    .erm-tile-warn .erm-tile-bar { background:rgba(102,77,3,.18); }
    .erm-tile-warn .erm-tile-bar > span { background:#d39e00; }

    /* CRIT: fondo rojo saturado, igual lógica */
    .erm-tile-crit {
        background:#f8d7da; border:1px solid #ea868f; border-left:6px solid #b02a37;
    }
    .erm-tile-crit .erm-tile-name  { color:#58151c; }
    .erm-tile-crit .erm-tile-value { color:#58151c; }
    .erm-tile-crit .erm-tile-bar { background:rgba(88,21,28,.18); }
    .erm-tile-crit .erm-tile-bar > span { background:#b02a37; }

    /* OFF: gris azulado bien apagado */
    .erm-tile-off {
        background:#e9ecef; border:1px solid #adb5bd; border-left:6px solid #495057;
    }
    .erm-tile-off .erm-tile-name  { color:#495057; }
    .erm-tile-off .erm-tile-value { color:#6c757d; }
    .erm-tile-off .erm-tile-bar > span { background:#6c757d; }

    .erm-zone-empty {
        text-align:center; padding:2rem 1rem; color:#adb5bd; font-size:.85rem;
    }


/* === extraído de: water-management/dashboard/energy/resume.blade.php, water-management/dashboard/energy/index.blade.php === */
        @media (max-width: 576px) {
            .main-box-number {
                font-size: 1.3em;
            }
            .box-label {
                font-size: 0.7em;
            }
            .main-box-icon {
                visibility: hidden;
            }
        }


/* === extraído de: water-management/dashboard/chart/index.blade.php === */
        .swal2-container {
            z-index: 300000;
        }


/* === extraído de: water-management/dashboard/alarm/index.blade.php === */
        .fix-selectpicker  .dropdown-menu.show {
            transform: scale(1) !important;
            opacity: 1 !important;
            visibility: visible !important;
        }

        /* Móvil: las tablas de alarmas se renderizan como cards (una por alarma).
           Los td llevan data-label con el nombre de la columna; el thead se oculta. */
        @media (max-width: 991.98px) {
            #active-alarms-table table thead,
            #last-alarms-table table thead {
                display: none;
            }
            #active-alarms-table table,
            #active-alarms-table table tbody,
            #last-alarms-table table,
            #last-alarms-table table tbody {
                display: block;
                width: 100%;
            }
            #active-alarms-table table tbody tr,
            #last-alarms-table table tbody tr {
                display: block;
                border: 1px solid #e5e5e5;
                border-radius: .5rem;
                margin: .75rem .5rem;
                padding: .5rem .75rem;
                background: #fff;
                box-shadow: 0 1px 2px rgba(0,0,0,.05);
            }
            #active-alarms-table table tbody td,
            #last-alarms-table table tbody td {
                display: flex;
                justify-content: space-between;
                align-items: center;
                gap: .75rem;
                border: 0;
                padding: .2rem 0;
                text-align: right;
            }
            #active-alarms-table table tbody td::before,
            #last-alarms-table table tbody td::before {
                content: attr(data-label);
                font-weight: 600;
                text-align: left;
                flex-shrink: 0;
            }
        }


/* === extraído de: water-management/dashboard/views/device.blade.php, water-management/dashboard/views/sub-zone.blade.php, water-management/dashboard/views/control.blade.php === */
        .progress-bar-vertical {
            width: 80%;
            margin: auto;
            min-height: 140px;
            display: flex;
            align-items: flex-end;
            border-radius: 5px !important;
        }

        .progress-bar-vertical .progress-bar {
            width: 100%;
            height: 0;
            -webkit-transition: height 0.6s ease;
            -o-transition: height 0.6s ease;
            transition: height 0.6s ease;
        }


/* === switches on/off de los dashboards (ex partials/output-css) === */
.onoffswitch {
position: relative; width: 120px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch.is-readonly {
opacity: 0.88;
}
.onoffswitch.is-readonly .onoffswitch-label {
cursor: not-allowed;
}
.onoffswitch.is-sending {
opacity: 0.65;
pointer-events: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #FFFFFF; border-radius: 50px;
}
.onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 29px; padding: 0; line-height: 29px;
font-size: 8px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "On";
padding-left: 8px;
background-color: #EEEEEE; color: #A1A1A1;
}
.onoffswitch-inner:after {
content: "OFF";
padding-right: 8px;
background-color: #EEEEEE; color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 39px; margin: -3px;
background: #A1A1A1;
position: absolute; top: 0; bottom: 0;
right: 89px;
border: 4px solid #FFFFFF; border-radius: 100px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
background-color: #0A6EBD;
}
.onoffswitch.is-sending .onoffswitch-label {
cursor: wait;
}

/* ── Buscador rápido (paleta Ctrl+K) ──────────────────────────────────────
   Reemplaza al dropdown "Arbol Completo" de 4 niveles. Ver
   resources/views/components/quick-search.blade.php */
.erm-qs {
position: fixed; inset: 0; z-index: 200000;
display: flex; align-items: flex-start; justify-content: center;
padding: 10vh 16px 16px;
}
.erm-qs[hidden] { display: none; }
.erm-qs-backdrop {
position: absolute; inset: 0;
background: rgba(15, 23, 42, .45);
}
.erm-qs-panel {
position: relative; width: 100%; max-width: 640px;
background: #fff; border-radius: 10px;
box-shadow: 0 20px 60px rgba(15, 23, 42, .35);
display: flex; flex-direction: column; max-height: 70vh;
overflow: hidden;
}
.erm-qs-input-wrap {
display: flex; align-items: center; gap: 10px;
padding: 14px 16px; border-bottom: 1px solid #e5e7eb;
flex-shrink: 0;
}
.erm-qs-input-wrap > i { color: #9ca3af; font-size: 16px; }
#erm-qs-input {
flex: 1; border: 0; outline: 0; font-size: 16px; color: #111827;
background: transparent; min-width: 0;
}
.erm-qs-kbd {
font-size: 11px; color: #6b7280; background: #f3f4f6;
border: 1px solid #e5e7eb; border-bottom-width: 2px;
border-radius: 4px; padding: 1px 5px; white-space: nowrap;
}
.erm-qs-results { overflow-y: auto; flex: 1; }
.erm-qs-item {
display: flex; align-items: center; gap: 12px;
padding: 9px 16px; cursor: pointer; border: 0; width: 100%;
background: transparent; text-align: left; color: inherit;
}
.erm-qs-item:hover, .erm-qs-item.is-active { background: #eff6ff; }
.erm-qs-badge {
flex-shrink: 0; width: 78px; font-size: 10px; letter-spacing: .04em;
text-transform: uppercase; color: #6b7280; font-weight: 600;
}
.erm-qs-text { min-width: 0; flex: 1; }
.erm-qs-name {
display: block; font-size: 14px; color: #111827;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.erm-qs-name mark { background: #fef08a; padding: 0; color: inherit; }
.erm-qs-ctx {
display: block; font-size: 12px; color: #6b7280;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.erm-qs-empty { padding: 28px 16px; text-align: center; color: #6b7280; font-size: 14px; }
.erm-qs-foot {
flex-shrink: 0; padding: 8px 16px; border-top: 1px solid #e5e7eb;
font-size: 11px; color: #6b7280; display: flex; gap: 14px; flex-wrap: wrap;
}
.erm-qs-trigger { white-space: nowrap; }
@media (max-width: 575.98px) {
.erm-qs { padding: 0; }
.erm-qs-panel { max-width: none; height: 100%; max-height: none; border-radius: 0; }
.erm-qs-badge { width: 62px; }
.erm-qs-foot { display: none; }
}


/* === water-management/admin/device/offline/index.blade.php ===
   Una fila por punto de control; dentro de cada celda, una línea por equipo
   caído. La altura mínima calza con el btn-sm del Log (~31px) para que las
   líneas queden alineadas entre columnas aunque una sea texto y otra botón. */
.erm-stack > div {
    display: flex;
    align-items: center;
    min-height: 2rem;
    white-space: nowrap;
}
.erm-stack > div + div { border-top: 1px dashed #e5e5e5; }
.erm-stack .btn-sm { margin: 0; }

/* ---- DataTables responsive: indicador de fila expandible (movil) ----
   El theme (datatables.styles.app.scss) dibuja el control como una barra
   de 1rem casi invisible y ademas sus selectores dependen de
   tr[role="row"], atributo que DataTables >= 1.11 ya no emite: en la
   practica no habia NINGUN indicador de que la fila se toca para ver las
   columnas colapsadas (7 de 10 columnas en movil). Circulo +/- clasico.
   Se estila aqui (archivo utilitario global) para no recompilar el
   bundle datatables.blunde.css; las reglas viejas quedan muertas por el
   [role="row"] y no compiten. */
table.dataTable.dtr-inline.collapsed > tbody > tr:not(.child) > td:first-child:not(.dataTables_empty) {
position: relative; padding-left: 2.4rem !important; cursor: pointer;
}
table.dataTable.dtr-inline.collapsed > tbody > tr:not(.child) > td:first-child:not(.dataTables_empty)::before {
content: "+"; position: absolute; left: 0.6rem; top: 50%; transform: translateY(-50%);
width: 1.2rem; height: 1.2rem; line-height: 1.2rem; border-radius: 50%;
background: #0960a5; color: #fff; text-align: center; font-weight: 700; font-size: 0.9rem;
box-shadow: none; border: 0; margin: 0; display: block;
}
table.dataTable.dtr-inline.collapsed > tbody > tr.parent:not(.child) > td:first-child:not(.dataTables_empty)::before {
content: "\2212"; background: #6c7a89;
}
table.dataTable.dtr-inline.collapsed > tbody > tr.child > td::before { content: none; }