/* ============================================================
   TOTAL GAS LP · Sistema de Medidores — estilos propios
   Complementa a Wowdash (style.css). No modificar style.css.
   ============================================================ */

/* ============================================================
   SIDEBAR v2 — sistema de diseño del menú lateral
   Lenguaje de selección unificado con las tablas:
   barra de acento + fondo primario suave.
   ============================================================ */

/* ---- Zona de logo ---- */
.zona-logo {
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--neutral-200, #e4e9f1);
    margin-bottom: 8px;
}
.logo-tglp { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo-flama {
    width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
    background: linear-gradient(135deg, #ff8a3d 0%, #f4511e 55%, #d84315 100%);
    box-shadow: 0 4px 10px rgba(244, 81, 30, .28);
    display: inline-flex; align-items: center; justify-content: center;
}
.logo-flama svg { color: #fff; font-size: 23px; }
.logo-texto { line-height: 1.15; }
.logo-nombre { display: block; font-weight: 700; font-size: 15px; letter-spacing: -.01em; color: var(--text-primary-light); }
.logo-sub { display: block; font-size: 10.5px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--text-secondary-light); }

/* ---- Títulos de grupo ---- */
.menu-tglp .grupo-menu {
    padding: 18px 24px 6px !important;
    font-size: 10.5px; font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase;
    color: #9aa4b5;
}

/* ---- Ítems del menú ---- */
.menu-tglp li { list-style: none; }
.menu-tglp .item-menu {
    display: flex !important; align-items: center; gap: 12px;
    margin: 2px 12px; padding: 10px 12px !important;
    border-radius: 8px;
    color: var(--text-secondary-light) !important;
    font-size: 15px; font-weight: 500; line-height: 1;
    white-space: nowrap; overflow: hidden;
    text-decoration: none;
    transition: background-color .15s ease-out, color .15s ease-out;
}
.menu-tglp .icono-menu { font-size: 20px; flex-shrink: 0; transition: color .15s ease-out; }
.menu-tglp .texto-menu { overflow: hidden; text-overflow: ellipsis; }

/* Hover: respuesta inmediata, sutil */
.menu-tglp a.item-menu:hover {
    background-color: #f2f5fa;
    color: var(--text-primary-light) !important;
}

/* Activo: mismo lenguaje que la fila seleccionada de las tablas */
.menu-tglp a.item-activo,
.menu-tglp a.item-activo:hover {
    background-color: var(--primary-50) !important;
    color: var(--primary-600) !important;
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--primary-600);
}

/* Futuro: sereno, sin ruido; el reloj cuenta la historia al pasar el mouse */
.menu-tglp .item-futuro {
    color: #a6b0c0 !important;
    cursor: default;
}
.menu-tglp .indicador-futuro {
    margin-left: auto; font-size: 14px; color: #c3cbd8;
    flex-shrink: 0;
}
.menu-tglp .item-futuro:hover .indicador-futuro { color: #9aa4b5; }

/* ============================================================
   MODO COLAPSADO (riel de iconos · clic en las tres rayitas)
   El template pone .active en .sidebar: 86px de ancho y se
   expande al pasar el mouse. Estas reglas hacen que nuestro
   sidebar v2 colapse con elegancia y regrese al expandirse.
   ============================================================ */

/* Logo: solo la flama, centrada */
.sidebar.active .zona-logo { padding: 20px 0 16px; display: flex; justify-content: center; }
.sidebar.active .logo-texto { display: none; }
.sidebar.active:hover .zona-logo { padding: 20px 20px 16px; justify-content: flex-start; }
.sidebar.active:hover .logo-texto { display: block; }

/* Títulos de grupo: se vuelven una línea divisoria discreta */
.sidebar.active .menu-tglp .grupo-menu { font-size: 0; padding: 4px 0 !important; }
.sidebar.active .menu-tglp .grupo-menu::after {
    content: ''; display: block; width: 26px; height: 1px;
    background: var(--neutral-200, #e4e9f1); margin: 8px auto;
}
.sidebar.active:hover .menu-tglp .grupo-menu { font-size: 10.5px; padding: 18px 24px 6px !important; }
.sidebar.active:hover .menu-tglp .grupo-menu::after { display: none; }

/* Ítems: icono centrado; el activo se vuelve pastilla sin barra */
.sidebar.active .menu-tglp .texto-menu { display: none; }
.sidebar.active .menu-tglp .indicador-futuro { display: none; }
.sidebar.active .menu-tglp .item-menu {
    justify-content: center; margin: 2px 10px; padding: 11px 0 !important;
}
.sidebar.active .menu-tglp a.item-activo { box-shadow: none; }

/* Al pasar el mouse el sidebar se expande: todo regresa */
.sidebar.active:hover .menu-tglp .texto-menu { display: inline; }
.sidebar.active:hover .menu-tglp .indicador-futuro { display: inline; }
.sidebar.active:hover .menu-tglp .item-menu {
    justify-content: flex-start; margin: 2px 12px; padding: 10px 12px !important;
}
.sidebar.active:hover .menu-tglp a.item-activo { box-shadow: inset 3px 0 0 var(--primary-600); }

/* ---- Píldoras de filtro (patrón homologado TGLP) ---- */
.pill-filtro {
    border: 1px solid var(--neutral-300); background: var(--white);
    color: var(--text-secondary-light); padding: 6px 16px; border-radius: 24px;
    font-size: 13px; font-weight: 500; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
    transition: all .15s ease;
}
.pill-filtro:hover { border-color: var(--primary-600); color: var(--primary-600); }
.pill-filtro.activa { background: var(--primary-600); border-color: var(--primary-600); color: #fff; }
.pill-filtro .conteo { background: rgba(0,0,0,.08); border-radius: 10px; padding: 0 8px; font-size: 11px; }
.pill-filtro.activa .conteo { background: rgba(255,255,255,.25); }

/* ---- Tabla de clientes: fila seleccionada e interacción ---- */
#tabla-clientes tbody tr { cursor: pointer; }
tr.fila-seleccionada td { background: var(--primary-50) !important; }
tr.fila-seleccionada td:first-child { box-shadow: inset 3px 0 0 var(--primary-600); }

/* ---- Estado vacío del panel de unidades ---- */
.estado-vacio {
    text-align: center; padding: 48px 16px; color: var(--text-secondary-light);
}
.estado-vacio iconify-icon { font-size: 44px; display: block; margin: 0 auto 12px; color: var(--neutral-400); }

/* ---- Login ---- */
.login-fondo {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(160deg, #f5f8ff 0%, #eef2ff 60%, #e7edff 100%);
    padding: 24px;
}
.login-tarjeta { width: 100%; max-width: 420px; }

/* ---- Formularios: secciones ---- */
.seccion-form .card-header h6 { display: flex; align-items: center; gap: 8px; }

/* ---- Utilería ---- */
.texto-monoespaciado { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }