/*
    Panel del propietario del parqueadero.
    Misma paleta azul de la app del operador: cuando el cliente pida cambiar el color,
    se cambia aqui y no en cada archivo.
*/
:root {
    --primario: #1D4ED8;
    --peligro: #DC2626;
    --peligro-claro: #FEE2E2;
    --primario-oscuro: #1E3A8A;
    --primario-claro: #DBEAFE;
    --fondo: #F7F7F8;
    --superficie: #FFFFFF;
    --borde: #E5E5EA;
    --texto: #1C1C1E;
    --texto-secundario: #8A8A8E;
    --exito: #1F9D55;
    --exito-claro: #E6F6ED;
    --advertencia: #B7791F;
    --advertencia-claro: #FDF6E3;
    --sombra: 0 1px 3px rgba(0, 0, 0, .06);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 15px;
    color: var(--texto);
    background: var(--fondo);
}

h1 { font-size: 1.6rem; margin: 0 0 .25rem; }
h2 { font-size: 1.15rem; margin: 0 0 .75rem; }
h3 { font-size: 1rem; margin: 0 0 .5rem; }

a { color: var(--primario); text-decoration: none; }
a:hover { text-decoration: underline; }

.secundario { color: var(--texto-secundario); font-size: .85rem; }

/* ---------------------------------------------------------------- Estructura */

.app {
    display: grid;
    grid-template-columns: 236px 1fr;
    min-height: 100vh;
}

.barra-lateral {
    background: var(--superficie);
    border-right: 1px solid var(--borde);
    padding: 1.25rem 0;
    display: flex;
    flex-direction: column;
}

.marca {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 0 1.25rem 1.25rem;
    border-bottom: 1px solid var(--borde);
    margin-bottom: .75rem;
}

.marca img { width: 34px; height: 34px; }
.marca span { font-weight: 700; font-size: 1.05rem; }

.nav a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .65rem 1.25rem;
    color: var(--texto);
    font-size: .92rem;
    border-left: 3px solid transparent;
}

.nav a:hover { background: var(--fondo); text-decoration: none; }

.nav a.activo {
    color: var(--primario);
    font-weight: 600;
    border-left-color: var(--primario);
    background: var(--primario-claro);
}

.pie-lateral {
    margin-top: auto;
    padding: 1rem 1.25rem 0;
    border-top: 1px solid var(--borde);
}

/* Ocupa todo el ancho de la columna de contenido. Antes tenía max-width:1180px y en
   pantallas amplias quedaba una franja vacía a la derecha. */
.contenido { padding: 1.5rem 2rem; width: 100%; }

/* ---------------------------------------------------------------- Tarjetas */

.tarjeta {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    box-shadow: var(--sombra);
    margin-bottom: 1rem;
}

.rejilla-contadores {
    display: grid;
    /* 3 columnas fijas: los seis indicadores quedan en 3 x 2 en vez de 5 + 1 huerfano. */
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.contador { text-align: left; }
.contador .numero { font-size: 2rem; font-weight: 700; line-height: 1.1; }
.contador .numero.alerta { color: var(--primario); }
.contador .etiqueta { color: var(--texto-secundario); font-size: .85rem; }

/* ---------------------------------------------------------------- Tablas */

.tabla { width: 100%; border-collapse: collapse; }
.tabla th, .tabla td { text-align: left; padding: .7rem .6rem; border-bottom: 1px solid var(--borde); }
.tabla th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-secundario); }
.tabla tr:last-child td { border-bottom: none; }

/* Miniatura del banner en la tabla de Publicidad, y la vista previa dentro del modal.
   Se respeta la proporción 2.5:1 recomendada para las imágenes del carrusel. */
.ban-miniatura {
    width: 120px;
    aspect-ratio: 2.5 / 1;
    object-fit: cover;
    border-radius: 8px;
    display: block;
    background: var(--fondo);
}

.ban-previa {
    width: 100%;
    aspect-ratio: 2.5 / 1;
    object-fit: cover;
    border-radius: 10px;
    margin-top: .3rem;
    background: var(--fondo);
}

/* ---------------------------------------------------------------- Insignias */

.insignia {
    display: inline-block;
    padding: .15rem .55rem;
    border-radius: 10px;
    font-size: .72rem;
    font-weight: 700;
    background: var(--primario-claro);
    color: var(--primario);
}

.insignia.exito { background: var(--exito-claro); color: var(--exito); }
.insignia.espera { background: var(--advertencia-claro); color: var(--advertencia); }
.insignia.neutra { background: var(--fondo); color: var(--texto-secundario); }

/* ---------------------------------------------------------------- Botones */

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    border: none;
    border-radius: 9px;
    padding: .55rem 1rem;
    font-size: .9rem;
    font-weight: 600;
    background: var(--primario);
    color: #fff;
    cursor: pointer;
}

.boton:hover { background: var(--primario-oscuro); }

.boton:disabled { background: #ECECEF; color: #A6A6AC; cursor: not-allowed; }

.boton.secundario { background: transparent; color: var(--primario); border: 1.5px solid var(--primario); }
.boton.secundario:hover { background: var(--primario-claro); }

/* Aprobar: verde sólido con texto blanco, bien visible. */
.boton.aprobar { background: var(--exito); color: #fff; }
.boton.aprobar:hover { background: #17803B; }

/* Deshabilitado (falta aprobar la cédula): un verde apagado legible, no gris-sobre-gris.
   Así se lee "Aprobar perfil en espera" en vez de parecer un botón roto o invisible. */
.boton.aprobar:disabled { background: #DFF1E7; color: #4F8C6B; border: 1px solid #C6E9D3; }

.boton.pequeno { padding: .35rem .7rem; font-size: .8rem; }

/* ---------------------------------------------------------------- Formularios */

.campo { margin-bottom: .9rem; }
.campo label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .3rem; }

.campo input, .campo select, .campo textarea {
    width: 100%;
    padding: .6rem .75rem;
    border: 1px solid var(--borde);
    border-radius: 9px;
    font-size: .92rem;
    font-family: inherit;
    background: var(--superficie);
    color: var(--texto);
}

.campo input:focus, .campo select:focus, .campo textarea:focus {
    outline: none;
    border-color: var(--primario);
}

.campo textarea { resize: vertical; min-height: 84px; }

/* ---------------------------------------------------------------- Avisos */

.aviso {
    padding: .75rem 1rem;
    border-radius: 9px;
    font-size: .88rem;
    margin-bottom: 1rem;
    background: var(--primario-claro);
    color: var(--primario);
}

.aviso.exito { background: var(--exito-claro); color: var(--exito); }

.vacio {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--texto-secundario);
}

.cargando { color: var(--texto-secundario); font-size: .9rem; padding: 1rem 0; }

/* ---------------------------------------------------------------- Login */

.pantalla-login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1rem;
}

.caja-login { width: 100%; max-width: 380px; }
.caja-login .marca { border: none; justify-content: center; margin-bottom: .5rem; }


/* ---------------------------------------------------------------- Responsivo */

@media (max-width: 900px) {
    /* minmax(0, 1fr) y no 1fr: la fila de pestanas no se parte en lineas y, con 1fr, su
       ancho minimo ensanchaba la columna y toda la pagina se salia de la pantalla. */
    .app { grid-template-columns: minmax(0, 1fr); }
    .barra-lateral { min-width: 0; }
    .barra-lateral { border-right: none; border-bottom: 1px solid var(--borde); }
    .nav { display: flex; overflow-x: auto; }
    .nav a { border-left: none; border-bottom: 3px solid transparent; white-space: nowrap; }
    .nav a.activo { border-left: none; border-bottom-color: var(--primario); }
    /* En celular el pie se vuelve una fila: ocultarlo dejaba sin forma de cerrar sesion. */
    .pie-lateral { display: flex; align-items: center; gap: .6rem; padding: .4rem 1rem; border-top: 1px solid var(--borde); }
    .pie-lateral #rol-usuario { display: none; }
    .pie-lateral #btn-salir { margin-left: auto; }
    .contenido { padding: 1rem; }
}

/* ---------------------------------------------------------------- Campana de avisos */

/* La barra superior existe solo para colgar la campana a la derecha del contenido.
   Va dentro de .contenido y no en la barra lateral porque en movil esa barra se
   convierte en una fila de pestanas desplazable y la campana quedaria fuera de vista. */
.barra-superior {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: .5rem;
}

.campana-wrap { position: relative; }

.campana {
    position: relative;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: 10px;
    width: 40px;
    height: 40px;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
}

.campana:hover { background: var(--fondo); }

/* Un meneo corto al llegar un aviso: llama la atencion de quien tiene el panel abierto
   en otra pestana del contenido sin tapar nada de lo que este haciendo. */
.campana.suena { animation: campana-meneo .9s ease; }

@keyframes campana-meneo {
    0%, 100% { transform: rotate(0); }
    15% { transform: rotate(-14deg); }
    30% { transform: rotate(12deg); }
    45% { transform: rotate(-9deg); }
    60% { transform: rotate(7deg); }
    75% { transform: rotate(-4deg); }
}

.campana-contador {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--primario);
    color: #fff;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1;
    padding: .18rem .34rem;
    min-width: 17px;
}

/* Punto gris cuando el canal esta caido y reintentando. Sin esta senal, un panel
   desconectado se ve exactamente igual que uno sin avisos pendientes. */
.campana-desconectada {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--texto-secundario);
    border: 2px solid var(--superficie);
}

.campana-panel {
    position: absolute;
    right: 0;
    top: calc(100% + .4rem);
    width: 320px;
    max-height: 380px;
    overflow-y: auto;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    z-index: 20;
}

.campana-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--borde);
    font-weight: 600;
    font-size: .9rem;
}

.campana-vacio {
    margin: 0;
    padding: 1.2rem .9rem;
    color: var(--texto-secundario);
    font-size: .88rem;
    text-align: center;
}

.campana-item {
    display: flex;
    gap: .6rem;
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--borde);
    cursor: pointer;
}

.campana-item:last-child { border-bottom: none; }
.campana-item:hover { background: var(--fondo); }

.campana-icono { font-size: 1.05rem; line-height: 1.3; }
.campana-titulo { font-weight: 600; font-size: .88rem; }
.campana-detalle { color: var(--texto-secundario); font-size: .84rem; }
.campana-hora { color: var(--texto-secundario); font-size: .76rem; margin-top: .15rem; }

.enlace {
    background: none;
    border: none;
    color: var(--primario);
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

/* ---------------------------------------------------------------- Panel estático */

/*
   El atributo hidden equivale a display:none, pero con una especificidad tan baja que
   cualquier regla de clase lo pisa. Como .app y .pantalla-login declaran display (grid
   y flex), ocultarlas con hidden no surtia efecto: el login seguia ocupando su espacio
   encima del panel y lo empujaba fuera de la pantalla.
   Esta regla es la que hace que hidden signifique lo que parece.
*/
[hidden] { display: none !important; }

/*
   Utilitarias para reemplazar estilos en linea (style="...") del index.html. La CSP del
   panel usa style-src 'self' sin 'unsafe-inline' —para que inyectar HTML no permita meter
   estilos— y eso bloquea cualquier atributo style suelto. Los pocos que habia viven aqui.
*/
.mt-0 { margin-top: 0; }
.ancho-total { width: 100%; }
.centrado { text-align: center; }
.negrita { font-weight: 600; }
.mb-06 { margin-bottom: .6rem; }

/* ---------------------------------------------------------------- Modal
   Ventana centrada para editar en el sitio (catálogos). position:fixed la ancla a la
   pantalla, así aparece donde esté el usuario sin importar el scroll de la página. */
.modal-fondo {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.modal {
    background: var(--superficie);
    border-radius: 12px;
    padding: 1.5rem;
    width: 100%;
    max-width: 440px;
    max-height: 90vh;
    overflow: auto;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
}

.modal h3 { margin: 0 0 1rem; }

.modal-acciones {
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
    margin-top: 1.25rem;
}

/* ---------------------------------------------------------------- Parqueadero */

.cabecera-vista {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.filtros {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-bottom: 1rem;
}

.filtros .campo { margin-bottom: 0; min-width: 140px; }

.selector-sede select {
    padding: .45rem .6rem;
    border: 1px solid var(--borde);
    border-radius: 8px;
    background: var(--superficie);
    font: inherit;
}

/* Las tablas anchas se desplazan dentro de su tarjeta en el celular, sin empujar la pagina. */
.tabla-contenedor { overflow-x: auto; }
.tabla td.numero, .tabla th.numero { text-align: right; white-space: nowrap; }
.tabla tr.clicable { cursor: pointer; }
.tabla tr.clicable:hover td { background: var(--fondo); }

.contador .detalle { color: var(--texto-secundario); font-size: .8rem; margin-top: .2rem; }

.rejilla-dos {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.grafica { position: relative; height: 300px; }

.ocupacion { margin-bottom: .8rem; }
.ocupacion .fila { display: flex; justify-content: space-between; font-size: .9rem; margin-bottom: .25rem; }
.ocupacion .barra { height: 10px; background: var(--fondo); border-radius: 6px; overflow: hidden; }
.ocupacion .relleno { height: 100%; background: var(--primario); border-radius: 6px; }
.ocupacion .relleno.lleno { background: var(--peligro); }

.insignia.peligro { background: var(--peligro-claro); color: var(--peligro); }
.aviso.peligro { background: var(--peligro-claro); color: var(--peligro); }

.boton.peligro { background: var(--peligro); color: #fff; }
.boton.peligro:hover { background: #B91C1C; }
.acciones-fila { white-space: nowrap; }
.acciones-fila .boton + .boton { margin-left: .4rem; }

.presets { display: flex; gap: .4rem; flex-wrap: wrap; }

.paginacion { display: flex; justify-content: space-between; align-items: center; margin-top: .8rem; }

.rejilla-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .8rem; }
.casilla { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; font-size: .9rem; }
.casilla input { width: auto; }

.lista-detalle { width: 100%; border-collapse: collapse; margin: .5rem 0; }
.lista-detalle td { padding: .35rem 0; border-bottom: 1px dashed var(--borde); }
.lista-detalle td:last-child { text-align: right; font-weight: 600; }

.modal.ancho { max-width: 720px; }

@media (max-width: 900px) {
    .rejilla-dos, .rejilla-campos { grid-template-columns: 1fr; }
    .rejilla-contadores { grid-template-columns: repeat(2, 1fr); }
    .barra-lateral { padding: .5rem 0 0; }
    .barra-lateral .marca { padding-bottom: .5rem; margin-bottom: .25rem; }
    .grafica { height: 240px; }
}

/* Un elemento de grid no se encoge por debajo de su contenido minimo: sin esto, una grafica
   o una tabla ancha empujan la columna del contenido y aparece scroll horizontal en toda
   la pagina. */
.contenido, .rejilla-dos > *, .rejilla-contadores > *, .tarjeta { min-width: 0; }