/* Cabecera publica de Reporteria SC */

.cabecera {
    background: var(--marino);
    color: #EFF3F8;
    /* Magenta de SC Informática, tomado del logo. Es el único lugar donde
       aparece: el resto del panel mantiene su propia paleta. */
    border-bottom: 3px solid #C80858;
}

.cabecera__barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-block: 16px;
}

.cabecera__marca {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
}

.cabecera__logo {
    width: auto;
    height: 46px;
    flex: none;
    display: block;
}

.cabecera__titulo {
    margin: 0;
    color: #FFFFFF;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.2;
}

.cabecera__bajada {
    margin: 0;
    color: rgba(249, 245, 235, .62);
    font-size: .75rem;
}

/* Navegacion entre reportes. Va pegada a la marca; el estado queda a la derecha. */
.cabecera__nav {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: auto;
    margin-left: 12px;
}

.cabecera__enlace {
    padding: 6px 13px;
    border-radius: 999px;
    color: rgba(249, 245, 235, .78);
    font-size: .84rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, color .15s;
}

.cabecera__enlace:hover { background: rgba(249, 245, 235, .1); color: #FFFFFF; }

.cabecera__enlace--activo {
    background: rgba(249, 245, 235, .14);
    color: #FFFFFF;
}

.cabecera__enlace:focus-visible {
    outline: 2px solid var(--crema);
    outline-offset: 2px;
}

/* Sesion: nombre del usuario y boton para salir. Solo existe con sesion iniciada. */
.cabecera__sesion {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding-left: 14px;
    border-left: 1px solid rgba(249, 245, 235, .2);
}

.cabecera__usuario {
    color: rgba(249, 245, 235, .82);
    font-size: .78rem;
}

.cabecera__salir {
    border: 1px solid rgba(249, 245, 235, .28);
    background: transparent;
    font-family: inherit;
    cursor: pointer;
}

.cabecera__estado {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .78rem;
    color: rgba(249, 245, 235, .82);
}

.punto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
    background: var(--texto-suave);
}

.punto--ok { background: #5FBF8F; }
.punto--falla { background: var(--rojo); }

/* --- filtros --- */

.filtros {
    background: var(--azul);
    padding-block: 12px;
    margin-bottom: 26px;
}

.filtros__fila {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.filtros__etiqueta {
    color: rgba(249, 245, 235, .62);
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    margin-right: 2px;
}

.filtros__enlace {
    padding: 5px 13px;
    border-radius: 999px;
    border: 1px solid rgba(249, 245, 235, .22);
    color: rgba(249, 245, 235, .86);
    font-size: .8rem;
    text-decoration: none;
    transition: background .15s, border-color .15s;
}

.filtros__enlace:hover { background: rgba(249, 245, 235, .1); }

.filtros__etiqueta--separada { margin-left: 18px; }

.filtros__enlace--activo {
    background: var(--naranja);
    border-color: var(--naranja);
    color: #FFFFFF;
    font-weight: 600;
}

.filtros__rango {
    margin-left: auto;
    color: rgba(249, 245, 235, .6);
    font-size: .78rem;
}

/* Descarga del reporte. Va al extremo derecho, junto al rango aplicado: el PDF
   sale de ese mismo período, asi que el boton pertenece a ese grupo. */
.filtros__pdf {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 13px;
    border-radius: 999px;
    border: 1px solid rgba(249, 245, 235, .35);
    background: rgba(249, 245, 235, .06);
    color: #FFFFFF;
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, border-color .15s;
}

.filtros__pdf:hover {
    background: var(--naranja);
    border-color: var(--naranja);
}

.filtros__pdf:focus-visible {
    outline: 2px solid var(--crema);
    outline-offset: 2px;
}