/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 5 sep. 2025, 11:53:56
    Author     : crojase
*/


/* Aplicación general de la fuente y el tamaño base */
body {
    /* La OpenSansLocal será la primera opción */
    /*font-family: 'OpenSansLocal', Arial, sans-serif;
    font-size: 12px;*/ /* Establece un tamaño base para el escritorio */
}

/* ===== SOLUCIÓN DEFINITIVA PARA MÓVILES ===== */
@media screen and (max-width: 768px) {
    /* Reset completo del layout */
    .ui-layout {
        position: relative !important;
        display: block !important;
        height: auto !important;
        overflow: visible !important;
    }
    
    /* Todas las units visibles y apiladas */
    .ui-layout-unit {
        position: relative !important;
        display: block !important;
        visibility: visible !important;
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        float: none !important;
        clear: both !important;
        margin: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        z-index: 1 !important;
    }
    
    /* West unit específico */
    .ui-layout-unit-west {
        order: 1;
        max-height: 40vh !important;
        overflow-y: auto !important;
        border-right: none !important;
        border-bottom: 2px solid #ccc !important;
    }
    
    /* Center unit específico - ¡ESTO ES CLAVE! */
    .ui-layout-unit-center {
        order: 2;
        display: block !important;
        visibility: visible !important;
        margin-left: 0 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 60vh !important;
        overflow: visible !important;
    }
    
    /* Ocultar elementos que interfieren */
    .ui-layout-resizer,
    .ui-layout-toggler {
        display: none !important;
    }
    
    /* Asegurar que el contenido sea visible */
    .ui-layout-unit-content {
        display: block !important;
        visibility: visible !important;
        height: auto !important;
        overflow: visible !important;
        padding: 10px !important;
    }
    
    /* Panel interno */
    .ui-panel {
        width: 100% !important;
        height: auto !important;
    }
    
    /* Fuerza la visualización */
    .ui-layout-unit-center,
    .ui-layout-unit-center * {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Para tablets */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .ui-layout-unit-west {
        width: 200px !important;
    }
    
    .ui-layout-unit-center {
        margin-left: 200px !important;
        width: calc(100% - 200px) !important;
    }
}


/* Media Query: Aplicar estos estilos SOLO cuando la pantalla tiene un ancho MÁXIMO de 768px (móviles y tabletas pequeñas) */
@media screen and (max-width: 768px) {

    /* --- ESTILOS PARA EL TEXTO SELECCIONADO (PARA ENVOLVER) --- */

    /* Ajusta el contenedor del p:selectOneMenu para que crezca en altura si el texto envuelve */
    .wrap-select {
        height: auto !important; 
    }

    /* Targetea el texto seleccionado (.ui-selectonemenu-label) y fuerza el envoltorio */
    .wrap-select .ui-selectonemenu-label {
        /* Permite que el texto salte de línea */
        white-space: normal !important;
        /* Permite que el componente crezca para el texto envuelto */
        height: auto !important; 
    }

    /* --- ESTILOS PARA EL PANEL DESPLEGABLE (DROPDOWN) --- */

    /* Asegura que el panel del dropdown no se estire demasiado, por ejemplo, hasta el 90% del viewport */
    .select-wrap-panel {
        max-width: 90vw; 
    }

    /* Targetea los ítems dentro del panel y fuerza el envoltorio */
    .select-wrap-panel .ui-selectonemenu-item {
        /* Permite que el texto salte de línea dentro del dropdown */
        white-space: normal !important; 
        /* Asegura el ajuste de palabras largas */
        word-wrap: break-word; 
    }
}

/* Media Query para dispositivos muy pequeños (como iPhone SE, Pixel 3) */
@media (max-width: 420px) {
    
    /* --- 1. AJUSTE DEL DIÁLOGO PRINCIPAL (AgendaCreateDlg) --- */
    
    /* Forzar que el diálogo ocupe casi todo el ancho visible */
    .ui-dialog#AgendaCreateDlg {
        width: 98vw !important;        /* Ocupar casi todo el ancho */
        left: 1vw !important;          /* Centrarlo con un pequeño margen */
        top: 1vh !important;           /* Asegurar que el diálogo inicie cerca de la parte superior */
        max-height: 98vh;              /* Máxima altura del diálogo en general */
        height: auto !important;
    }

    /* --- 2. CONTENEDOR DEL SCROLL (Donde está el formulario/horarios) --- */
    /* Apunta al contenedor interno de PrimeFaces donde va tu contenido */
    .ui-dialog#AgendaCreateDlg .ui-dialog-content {
        /* PROPIEDADES CLAVE: Definir altura máxima y scroll */
        max-height: 75vh !important;   /* Reducimos la altura a 75% para asegurar espacio a los botones inferiores */
        overflow-y: auto !important;   /* Activa el scroll vertical si el contenido excede 75vh */
        overflow-x: hidden !important; /* Evitar el scroll horizontal innecesario */
        padding: 5px;                  /* Reducir padding interno para ganar espacio */
    }

    /* --- 3. CONTENEDOR DE BOTONES (Asegurar visibilidad) --- */
    /* Asegurar que la barra de botones inferior no sea ignorada */
    .ui-dialog#AgendaCreateDlg .ui-dialog-buttonpane {
        width: 100% !important;
        /* Forzar que los botones se apilen o se centren si no caben */
        display: flex;
        justify-content: center;
        flex-wrap: wrap; /* Permitir que los botones envuelvan si el espacio es muy reducido */
        padding: 10px 5px !important;
    }

    /* Asegurar que los botones ocupen el 100% del ancho si se envuelven */
    .ui-dialog#AgendaCreateDlg .ui-dialog-buttonpane .ui-button {
        flex-grow: 1; /* Permite que los botones crezcan para llenar el espacio disponible */
        margin: 5px !important; /* Añadir margen entre botones */
    }
}


/* Media Query para dispositivos pequeños (iPhone SE, Pixel, etc.) */
@media screen and (max-width: 420px) { 
    
    /* Contenedor principal del login (el cuadro blanco con los logos) */
    .login-container {
        /* Forzar visibilidad si alguna regla lo oculta */
        display: block !important; 
        
        /* CLAVE: Usar un margen superior bajo (ej. 3vh) y un margen inferior generoso (2vh) 
           para asegurar espacio para el footer. */
        margin: 3vh auto 2vh auto !important; 
        
        /* Aseguramos que ocupe buen ancho */
        width: 90% !important;
        
        /* Reducir el padding interno ligeramente si el contenido es apretado */
        padding: 20px 15px !important; 
        
        /* Asegurar que el contenido interno se centre */
        text-align: center;
    }
    
    
    
    /* El contenedor que envuelve los logos (si existe) */
    .login-header, .login-logo {
        text-align: center !important;
        width: 100% !important;
    }
    
    /* Contenedor del footer: ©2022 - 2025 Dirección Nacional... */
    .login-footer {
        /* Usar posición fixed o absolute para asegurarlo en la parte inferior del viewport */
        position: fixed !important; 
        bottom: 0 !important; 
        
        /* Ocupar todo el ancho */
        width: 100% !important; 
        
        /* Centrar texto */
        text-align: center !important; 
        
        /* Fondo semi-transparente para que no se mezcle con el fondo de la imagen */
        background-color: rgba(255, 255, 255, 0.9); 
        
        /* Reducir fuente para que quepa */
        font-size: 10px !important; 
        padding: 5px 0 !important; 
        
        /* Asegurar que esté por encima de la imagen de fondo */
        z-index: 100 !important; 
    }
    
}

@media screen and (max-width: 330px) {
    
    /* Contenedor principal del login: Reafirmar ancho y padding */
    .login-container {
        width: 95% !important; 
        padding: 15px 5px !important; /* Reducir el padding lateral al mínimo (5px) */
        margin: 1vh auto 3vh auto !important; 
        text-align: center;
        /* Forzar visibilidad si alguna regla lo oculta */
        display: block !important; 
        
    }
    
    /* --- 1. CENTRAR EL CONTENIDO DE LA CELDA --- */
    /* Apunta a la celda específica donde se encuentra el enlace de correo. 
       Si el enlace es la última celda en el panelGrid, usa un selector como este: */
    .login-container .ui-panelgrid tr:last-of-type td {
        /* Aseguramos que la celda tenga centrado de texto */
        text-align: center !important;
        /* Y que ocupe todo el ancho para que el centrado funcione */
        width: 100% !important;
        /* Forzar a apilarse, ya que solo hay un elemento */
        display: block !important; 
    }
    
    /* Si el enlace no tiene clase, y es el último enlace en el contenedor: */
    .login-container a:last-of-type {
        display: inline-block !important; 
        text-align: center !important; 
        font-size: 10px !important;
        padding: 1px 0 !important;
    }
    
    /* Reducir el tamaño de las imágenes del logo */
    .login-container img {
        /* Tamaño máximo para que quepa en 320px */
        max-width: 80px !important; 
        height: auto !important;
        
        /* Reducir el margen inferior entre los logos y el título */
        margin-bottom: 5px !important; 
    }

    /* Si los logos están en un contenedor específico (ej. .logo-header) */
    .logo-header {
        /* Reducir el padding interno del contenedor de logos */
        padding: 5px 0 !important; 
        margin-top: 5px !important; /* Margen superior reducido */
        margin-bottom: 5px !important;
        text-align: center;
        width: 100%;
    }

    /* Contenedor de las filas de opciones (Asumiendo p:panelGrid) */
    .login-container .ui-panelgrid tr {
        /* CLAVE: Usar Flexbox para alinear horizontalmente */
        display: flex !important;
        flex-direction: row !important; /* Asegurar alineación horizontal */
        align-items: center !important; /* Centrar verticalmente los ítems */
        justify-content: space-between !important; /* Distribuir espacio entre elementos */
        width: 100% !important;
        margin-bottom: 8px !important; /* Separación entre filas */
    }
    
    /* Celdas/Elementos dentro de la fila */
    .login-container .ui-panelgrid td {
        display: flex !important; /* Tratar cada celda como un contenedor flexible */
        padding: 0 3px !important; /* Reducir el padding entre columnas */
        height: auto !important; 
    }

    /* Asegurar que las celdas tomen el espacio necesario */
    .login-container .ui-panelgrid td:first-child {
        /* Etiqueta de texto (Ej. "¿No está registrado?") */
        width: 60% !important; /* Dar más espacio al texto */
        justify-content: flex-start;
        align-items: center;
    }
    
    .login-container .ui-panelgrid td:last-child {
        /* Botón (Registro, Recuperar, etc.) */
        width: 40% !important; /* Dar menos espacio al botón */
        justify-content: flex-end;
    }

    /* --- AJUSTE DE FUENTES Y BOTONES --- */
    
    /* 2. Etiquetas de Texto (Ej. "¿No está registrado?") */
    .login-container label {
        font-size: 10px !important; /* CLAVE: Reducir drásticamente la fuente para que el texto quepa */
        text-align: left !important;
        width: 100% !important;
        line-height: 1.2;
    }

    /* 3. Botones (Registro, Recuperar, Trámites) */
    .login-container .ui-button {
        /* Ajustar el tamaño del botón para que quepa en el 40% del ancho */
        height: 30px !important; /* Altura más baja para ahorrar espacio */
        font-size: 11px !important; /* CLAVE: Fuente muy pequeña */
        width: 100% !important; /* Usar 100% de su celda (40% de la fila) */
        padding: 0 5px !important; /* Reducir el padding interno del botón */
    }

    /* Footer (Ajuste final) */
    .login-footer {
        font-size: 8px !important; /* Fuente extremadamente pequeña para el footer */
        padding: 5px 0 !important;
    }
}