/* _content/EventosEspeciales/Shared/CampoFecha.razor.rz.scp.css */
/* Estilos aislados de CampoFecha.razor.

   Van en un .razor.css y no en un bloque <style> porque el componente se repite varias veces en
   la misma pantalla y un <style> se emitiría una vez por instancia. El aislamiento le añade el
   atributo de ámbito, así que estas reglas no pueden tocar nada de la página anfitriona.

   La caja de texto hereda su aspecto de la clase que le pasa la página (parámetro Clase:
   "dlf-control", "form-control"...). Aquí solo se ajusta lo propio del componente. */

.cf-wrap[b-yrl7t9vibz] {
    position: relative;
    display: block;
    min-width: 0;
}

/* El padding derecho le reserva el sitio al botón para que no tape las cifras del año. */
.cf-texto[b-yrl7t9vibz] {
    width: 100%;
    padding-right: 36px;
    box-sizing: border-box;
}

.cf-texto.cf-mal[b-yrl7t9vibz] {
    border-color: #dc3545;
    background: #fff8f8;
}

.cf-boton[b-yrl7t9vibz] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: none;
    color: #6c757d;
    cursor: pointer;
}

.cf-boton:hover[b-yrl7t9vibz] {
    color: #03346c;
}

.cf-boton:disabled[b-yrl7t9vibz] {
    opacity: .5;
    cursor: not-allowed;
}

/* El SVG llega como MarkupString desde IconoSvg y por eso no lleva el atributo de ámbito:
   hay que alcanzarlo con ::deep. */
.cf-boton[b-yrl7t9vibz]  .cf-ic {
    width: 16px;
    height: 16px;
    display: block;
    /* Así el clic lo recibe siempre el botón y nunca el SVG: el listener de campo-fecha.js
       busca el botón con closest() desde el elemento pulsado. */
    pointer-events: none;
}

/* Invisible, pero RENDERIZADO: showPicker() falla sobre un elemento con display:none o
   visibility:hidden. Se le da el tamaño del botón para que el calendario salga anclado ahí. */
.cf-nativo[b-yrl7t9vibz] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 34px;
    padding: 0;
    border: none;
    background: none;
    opacity: 0;
    pointer-events: none;
}

.cf-msg[b-yrl7t9vibz] {
    margin-top: 4px;
    color: #dc3545;
    font-size: 12px;
}
/* _content/EventosEspeciales/Shared/MainLayout.razor.rz.scp.css */
/* Layout: barra superior fija de ancho completo + fila (menú lateral | contenido). */

.page[b-8pl0zs0e1y] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Barra superior (patrón webrh): azul COPEREX, fija arriba, sobre todo lo demás. */
.appbar[b-8pl0zs0e1y] {
    height: 3.5rem;
    background-color: #03346c;
    position: sticky;
    top: 0;
    z-index: 100;
    flex-shrink: 0;
}

.page-body[b-8pl0zs0e1y] {
    display: flex;
    flex: 1;
    min-height: 0;
}

/* Menú lateral: se queda pegado bajo la barra; el scroll interno lo maneja .nav-scrollable. */
.sidebar[b-8pl0zs0e1y] {
    background-color: #03346c;
    width: 250px;
    flex-shrink: 0;
    position: sticky;
    top: 3.5rem;
    height: calc(100vh - 3.5rem);
}

/* Hamburguesa: al ocultar, la barra desaparece y <main> (flex:1) toma todo el ancho.
   El botón sigue en la barra superior, siempre visible, para volver a mostrarla. */
.page.sidebar-oculto .sidebar[b-8pl0zs0e1y] {
    display: none;
}

main[b-8pl0zs0e1y] {
    flex: 1;
    min-width: 0;
}

.content[b-8pl0zs0e1y] {
    padding-top: 1.1rem;
}

/* En pantallas angostas el menú, cuando se muestra, se superpone al contenido en vez de
   estrujarlo (comportamiento tipo cajón); oculto por defecto ahí para no tapar la vista. */
@media (max-width: 640.98px) {
    .sidebar[b-8pl0zs0e1y] {
        position: fixed;
        left: 0;
        top: 3.5rem;
        z-index: 90;
        box-shadow: 2px 0 8px rgba(0,0,0,0.25);
    }
}

@media (min-width: 641px) {
    .content[b-8pl0zs0e1y] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* _content/EventosEspeciales/Shared/NavMenu.razor.rz.scp.css */
/* La marca, el botón hamburguesa y el toggler móvil ya NO viven aquí: están en la barra superior
   global (MainLayout), que muestra/oculta este menú entero. Aquí solo queda el estilo del propio
   menú (grupos y enlaces). */

.oi[b-q28utd0b1j] {
    width: 2rem;
    flex-shrink: 0;
    font-size: 1.1rem;
    vertical-align: text-top;
    top: -2px;
}

.nav-item[b-q28utd0b1j] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-q28utd0b1j] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-q28utd0b1j] {
        padding-bottom: 1rem;
    }

    .nav-item[b-q28utd0b1j]  a {
        color: #d7d7d7;
        border-radius: 4px;
        min-height: 3rem;
        display: flex;
        align-items: center;
        line-height: 1.25;
        padding-top: 0.35rem;
        padding-bottom: 0.35rem;
    }

.nav-item[b-q28utd0b1j]  a.active {
    background-color: rgba(255,255,255,0.25);
    color: white;
}

.nav-item[b-q28utd0b1j]  a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

/* Llena el alto de la barra lateral y hace scroll propio si el menú es alto (la barra lateral en
   MainLayout ya está acotada a la altura de la ventana menos la barra superior). */
.nav-scrollable[b-q28utd0b1j] {
    height: 100%;
    overflow-y: auto;
}