/* VERSION TGLP-2026-09-28-56F
   ============================================================
   TEMA DE MEDIDORES · «ÍNDIGO» (opción C, elegida por Roberto el 28/sep/2026)
   ============================================================
   Medidores y admin se trabajan a la par; así se distinguen a primera vista (admin es verde petróleo):
   · menú lateral índigo con letras claras (los íconos conservan el color de su sección);
   · la opción activa con una rayita amarilla a la izquierda y su cuadrito sólido;
   · el fondo del contenido lila grisáceo y una línea morada bajo la barra de arriba;
   · el logo sobre una placa blanca con «SISTEMA DE MEDIDORES» debajo, en negritas (igual que en admin).
   Tarjetas, tablas, botones y modales NO cambian. Se carga en partials/head.php DESPUÉS de medidores.css.
   ============================================================ */
:root { --med-1: #25205a; --med-2: #312a74; --med-fondo: #eceaf6; --med-linea: #8b5cf6; --med-acento: #fbbf24;
        --med-texto: #e0ddf7; --med-titulos: rgba(224, 221, 247, .6); }

/* Fondo del contenido y línea bajo la barra de arriba */
body, .dashboard-main { background-color: var(--med-fondo) !important; }
.navbar-header { box-shadow: inset 0 -3px 0 var(--med-linea); }

/* Menú lateral */
.sidebar { background: linear-gradient(180deg, var(--med-1) 0%, var(--med-2) 100%) !important; border-right: 0 !important; }
.sidebar-menu-area { scrollbar-color: rgba(255, 255, 255, .25) transparent; }
.sidebar-close-btn { color: #fff !important; }

/* El logo como en admin: placa blanca centrada y el rótulo en negritas */
.zona-logo { background: #fff; margin: 12px 14px 8px; border-radius: 12px; border-bottom: 0 !important; padding: 14px 10px 12px !important; }
.logo-tglp { flex-direction: column; align-items: center !important; gap: 6px; }
.logo-imagen { width: 150px !important; }
.logo-tglp .logo-sub { padding-left: 0 !important; font-size: 10.5px; font-weight: 700 !important; letter-spacing: .12em !important; text-align: center; color: var(--med-1) !important; }
.sidebar.active .zona-logo { margin: 12px 10px 8px; padding: 10px 4px !important; }
.sidebar.active:hover .zona-logo { margin: 12px 14px 8px; padding: 14px 10px 12px !important; }

/* Títulos de sección, opciones, pasar el ratón y la activa */
.menu-tglp .grupo-menu { color: var(--med-titulos) !important; }
.menu-tglp .item-menu { color: var(--med-texto) !important; background-color: transparent !important; }
.menu-tglp a.item-menu:hover { background-color: rgba(255, 255, 255, .07) !important; color: #fff !important; }
.menu-tglp a.item-activo, .menu-tglp a.item-activo:hover { background-color: rgba(255, 255, 255, .12) !important; color: #fff !important; box-shadow: inset 3px 0 0 var(--med-acento) !important; }

/* Íconos: cuadrito translúcido y el color de su sección, más claro para que se vea sobre el índigo */
.menu-tglp .icono-burbuja { background: rgba(255, 255, 255, .09) !important; }
.menu-tglp .c-marca { --c: #fdba74; } .menu-tglp .c-azul { --c: #93c5fd; } .menu-tglp .c-verde { --c: #86efac; } .menu-tglp .c-naranja { --c: #fdba74; }
.menu-tglp .c-morado { --c: #c4b5fd; } .menu-tglp .c-teal { --c: #5eead4; } .menu-tglp .c-gris { --c: #cbd5e1; }
.menu-tglp .item-futuro .icono-burbuja { --c: rgba(255, 255, 255, .35); }
.menu-tglp .item-futuro { color: rgba(255, 255, 255, .45) !important; }
.menu-tglp a.item-activo .icono-burbuja { background: var(--c) !important; color: var(--med-1) !important; }

/* Menú colapsado (solo íconos) y al pasar el ratón sobre él */
.sidebar.active .menu-tglp .grupo-menu::after { background: rgba(255, 255, 255, .15) !important; }
.sidebar.active .menu-tglp a.item-activo { background-color: transparent !important; box-shadow: none !important; }
.sidebar.active:hover .menu-tglp a.item-activo { background-color: rgba(255, 255, 255, .12) !important; box-shadow: inset 3px 0 0 var(--med-acento) !important; }

/* ==========================================================================================
   58u · REGLA UNIVERSAL DE LOS MODALES (Roberto, 01/oct/2026): TODO modal cabe en cualquier pantalla y, si su contenido
   es más alto que la pantalla, se desplaza POR DENTRO (encabezado y pie fijos, el cuerpo con su barra). Vale para los
   modales de Bootstrap con .modal-body, los que llevan el <form> dentro de .modal-content y los de estructura propia
   (sin .modal-body): en esos se desplaza el contenido completo. No hace falta la clase modal-dialog-scrollable.
   ========================================================================================== */
.modal-dialog { max-height: calc(100vh - 1rem); display: flex; flex-direction: column; justify-content: flex-start; }
.modal-dialog-centered { justify-content: center; min-height: calc(100% - 1rem); }
@media (min-width: 576px) { .modal-dialog { max-height: calc(100vh - 3.5rem); } .modal-dialog-centered { min-height: calc(100% - 3.5rem); } }
.modal-dialog .modal-content { max-height: calc(100vh - 1rem); display: flex; flex-direction: column; min-height: 0; }
@media (min-width: 576px) { .modal-dialog .modal-content { max-height: calc(100vh - 3.5rem); } }
.modal-content > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; max-height: 100%; }
.modal-content > .modal-body, .modal-content > form > .modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1 1 auto; min-height: 0; }
.modal-content > .modal-header, .modal-content > .modal-footer, .modal-content > form > .modal-header, .modal-content > form > .modal-footer { flex-shrink: 0; }
/* con .modal-body: el contenido no se desborda (el cuerpo es el que se desplaza); sin .modal-body: se desplaza todo el contenido */
.modal-dialog .modal-content:has(> .modal-body), .modal-dialog .modal-content:has(> form > .modal-body) { overflow: hidden; }
.modal-dialog .modal-content:not(:has(> .modal-body)):not(:has(> form > .modal-body)) { overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* celular: sin esquinas pegadas al borde y con espacio para las barras del sistema */
@media (max-width: 575px) { .modal-dialog { margin: .5rem; max-height: calc(100vh - 1rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); } .modal-dialog .modal-content { max-height: calc(100vh - 1rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); } }