/* ==========================================================================
   1. ESTILOS GLOBALES (RESET & BASE)
   ========================================================================== */
html, body{
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue,
        Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    font-size: 13px;
}

.ui-confirm-dialog-message {
    white-space: pre-line !important;
}

/* Comportamiento móvil por defecto: sin límite de altura */
.form-scroll-area {
    overflow-x: hidden;
    /* En móvil, la tarjeta crece todo lo necesario y el scroll lo hace el body */
}

/* Comportamiento PC/Tablet: Frenamos la altura y activamos scroll interno */
@media screen and (min-width: 768px) {
    .form-scroll-area {
        /* 100% de la pantalla MENOS los píxeles que ocupan el logo, título y botones */
        max-height: calc(100vh - 340px);
        overflow-y: auto;
        padding-right: 0.5rem;
    }
}

@media screen and (min-width: 768px) and (max-height: 850px) {
    .dynamic-card {
        zoom: 0.80; /* Comprime la tarjeta entera al 75%(0.75) de su tamaño real */
    }

    .notebook-dialog-scale {
        transform: scale(0.70);
        transform-origin: center center;
    }

    .form-scroll-area {
        max-height: 65vh; /* Ajustamos el scroll para esta escala */
    }
    .auth-logo {
        margin-top: 5px !important; /* Le quitamos margen al logo para que no empuje hacia abajo */
    }
}

.limit-reached {
    color: #ef4444 !important;
    transition: color 0s ease;
}

.custom-dialog-content {
    padding: 0.5rem;
}

.text-gradient-primary {
    /* Definición del Gradiente */
    /*background: linear-gradient(90deg, #039be5 0%, #0277bd 100%);*/
    background: #039be5;

    /* Recorte del fondo a la forma del texto */
    -webkit-background-clip: text !important;
    background-clip: text !important;

    /* Hacer el texto transparente para ver el fondo */
    -webkit-text-fill-color: transparent !important;
    color: transparent !important; /* Fallback necesario */

    /* Tipografía */
    font-weight: 700 !important;

    /* Necesario para que el clip funcione correctamente sin cortar bordes */
    display: inline-block;
}

.row-hover-effect {
    cursor: default !important; /* 'help' O 'pointer' si prefieres */
}

/* ==========================================================================
   2. COMPONENTES DE TAREAS (Usado en: ../master/inbox.xhtml - /inbox.xhtml)
   ========================================================================== */

/* --- Badges de Estado --- */
.status-badge {
    padding: 4px 8px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 0.9em;
    display: inline-block;
    min-width: 30px;
    max-width: 160px;
    text-align: center;
}

/* Variantes de color para estados */
.status-finalizada {
    background-color: #C6E0B4;
    color: #155724;
} /* Verde */
.status-ejecucion  {
    background-color: #F4E9BC;
    color: #856404;
} /* Amarillo */
.status-rechazada  {
    background-color: #f8d7da;
    color: #721c24;
} /* Rojo */
.status-parcial    {
    background-color: #7ECFED;
    color: #0c5460;
} /* Azul */
.status-cerrada    {
    background-color: #BAB6B6;
    color: #383d41;
} /* Gris */
.status-default    {
    background-color: #e2e3e5;
    color: #383d41;
}

/* --- Badges de Documentos --- */
.doc-badge {
    padding: 4px 8px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 0.9em;
    display: inline-block;
    min-width: 30px;
    text-align: center;
}
.doc-si {
    background-color: #C6E0B4;
    color: #155724;
}
.doc-no {
    background-color: #f8d7da;
    color: #721c24;
}

/* --- Utilidad de Columna (Truncamiento) --- */
.col-detalle {
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

/* ==========================================================================
   ALINEACIÓN PERFECTA PARA TABLAS RESPONSIVAS (Modo Celular - Reflow)
   ========================================================================== */

/* Interceptamos el modo celular de las tablas de PrimeFaces */
@media screen and (max-width: 640px) {

    /* 1. Convertimos cada celda de la tabla móvil en un contenedor Flexbox */
    body .ui-datatable.ui-datatable-reflow .ui-datatable-data > tr > td {
        display: flex !important;
        align-items: center !important; /* Centra verticalmente etiqueta y valor */
        text-align: left !important;
        padding: 0.6rem !important; /* Un respiro visual entre filas */
    }

    /* 2. El Título (Etiqueta izquierda) anclado exactamente al 40% de la pantalla */
    body .ui-datatable.ui-datatable-reflow .ui-datatable-data > tr > td .ui-column-title {
        display: block !important;
        flex: 0 0 40% !important; /* Ocupa un 40% estricto. Esta es la LÍNEA INVISIBLE */
        min-width: 40% !important;
        margin: 0 !important;
        padding-right: 15px !important;
        white-space: normal !important; /* Permite que títulos largos bajen de línea si es necesario */
    }

    /* 3. El Valor (Contenido derecho) ocupa el 60% restante, perfectamente alineado */
    body .ui-datatable.ui-datatable-reflow .ui-datatable-data > tr > td > :not(.ui-column-title) {
        flex: 1 1 60% !important; /* Toma el espacio restante */
        display: block !important;
        width: 100% !important;
    }

}

/* ==========================================================================
   3. BOTONES PERSONALIZADOS (Reemplazo de buttonStyle inline)
   ========================================================================== */

/* Apuntamos al contenedor del botón (el componente p:menuButton en sí) */
body .btn-gradient-blue {
    /* 1. OBLIGATORIO: Hace que el elemento respete los márgenes verticales */
    display: inline-block !important;

    /* 2. ESPACIO ABAJO: Esto despega la tabla del botón */
    margin-bottom: 12px !important;

    /* 3. SUBIRLO: Esto hace que el botón "flote" un poco hacia arriba */
    /* Un valor negativo en Y mueve el elemento hacia arriba */
    /*transform: translateY(-1px); */

    /* Opcional: Asegura que no se vea cortado si sube mucho */
    position: relative;
    z-index: 10;
}

/* Botón "Gestionar Tareas" (Azul) - (Usado en: ../master/inbox.xhtml) */
.btn-gradient-blue .ui-button {
    background: linear-gradient(90deg, #0277bd 0%, #039be5 100%) !important;
    border-radius: 7px !important;
    border: none !important;
    font-size: 1.1rem !important;
    box-shadow: 0 4px 15px rgba(108, 117, 125, 0.5) !important;
    transform: translateY(0px);
}

/* Botón "Acciones" (Gris Oscuro) - (Usado en: ../master/inbox.xhtml - Columna Acciones) */
.btn-gradient-dark .ui-button {
    background: linear-gradient(90deg, #1e1e1e 0%, #6c757d 100%) !important;
    border-radius: 5px !important;
    border: none !important;
    font-size: 1.1rem !important;
    box-shadow: 0 4px 15px rgba(108, 117, 125, 0.5) !important;
}

/* ==========================================================================
   4. EFECTOS E INTERACCIONES (JS Hooks)
   ========================================================================== */

/* Animación de rotación del ícono de engranaje */
.btn-rotacion-icon .ui-button-icon-left {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transform: rotate(0deg);
    display: inline-block !important;
}

/* Estado activo (inyectado por task-actions.js) */
.btn-rotacion-icon.is-rotated .ui-button-icon-left {
    transform: rotate(90deg) !important;
}

/* Estilo del Menú Flotante (inyectado por task-actions.js) */
.modern-floating-menu {
    border: 1px solid #f0f0f0 !important;
    border-radius: 5px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
    background-color: #ffffff !important;
    padding: 3px 1px !important;
    width: 200px;
    overflow: visible !important;
}

.modern-floating-menu .ui-menuitem-link {
    padding: 8px 5px !important;
    font-size: 1.1rem;
    margin: 0px !important;
    transition: all 0.2s ease;
}

.modern-floating-menu .ui-menuitem-link:hover,
.modern-floating-menu .ui-menuitem-link.ui-state-hover {
    background-color: #e3f2fd !important;
    color: #0277bd !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
}

.modern-floating-menu .ui-menuitem-icon {
    color: #455a64 !important;
}

/* ==========================================================================
   5. LEYENDA / FOOTER (Reemplazo de Tabla HTML antigua)
   ========================================================================== */
/* Usado en: ../master/inbox.xhtml - Footer */
.legend-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Para móviles */
    gap: 20px;
    margin-top: 20px;
    padding: 10px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
}

.legend-color-box {
    width: 15px;
    height: 15px;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 3px;
    flex-shrink: 0;
}

/* Colores específicos de la leyenda (Sincronizados con status-badges) */
.bg-cerrada    {
    background-color: #BAB6B6;
}
.bg-rechazada  {
    background-color: #f8d7da;
}
.bg-finalizada {
    background-color: #C6E0B4;
}
.bg-ejecucion  {
    background-color: #F4E9BC;
}
.bg-parcial    {
    background-color: #7ECFED;
}

/* ==========================================================================
   6. ESTILOS ESPECÍFICOS DE SOLICITUDES (Migrado de vista inline)
   ========================================================================== */
/* Estados específicos de Solicitudes */
.status-pend {
    background-color: #F4E9BC;
    color: #856404;
} /* Pendiente */
.status-sol  {
    background-color: #7ECFED;
    color: #0c5460;
} /* Solicitada */
.status-fin  {
    background-color: #C6E0B4;
    color: #155724;
} /* Finalizada */

/* Badge para el Rol */
.status-rol {
    background-color: #E3F2FD;
    color: #1565C0;
    border: 1px solid #BBDEFB;
}

/* Truncamiento para columna Motivo */
.col-motivo {
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

/* ==========================================================================
   7. ESTILOS ESPECÍFICOS DE LISTA DE USUARIOS (Nuevos colores)
   ========================================================================== */
/* Colores para Estado de Cuenta (Si/No) */
.status-activo   {
    background-color: #C6E0B4;
    color: #155724;
} /* Verde - Si */
.status-inactivo {
    background-color: #f8d7da;
    color: #721c24;
} /* Rojo - No */

/* ==========================================================================
   8. ESTILOS PARA PRIORIDAD EN VISTAS DE TAREA
   ========================================================================== */
.prioridad-alta {
    color: #ef4444 !important;
}
.prioridad-media {
    color: #f59e0b !important;
}
.prioridad-baja {
    color: #22c55e !important;
}

/* ==========================================================================
   ESTILOS EXTRAÍDOS DEL SIDENAV (Navegación Lateral)
   ========================================================================== */
/* Ancho responsivo del panel lateral */
.sidenav-panel-custom {
    width: 80% !important; /* Celular por defecto */
}
@media screen and (min-width: 768px) {
    .sidenav-panel-custom {
        width: 360px !important; /* Ancho original en PC */
    }
}
.sidenav-header-padding {
    padding: 1rem;
}
.sidenav-logo-img {
    height: auto;
    width: 110px;
    padding: 6px;
}

/* En móvil queremos que el botón ocupe el 100% de ancho para fácil "tap" */
.sidenav-action-btn {
    width: 100% !important;
    border-radius: 6px !important;
    margin-bottom: 5px;
}
.sidenav-fix-top-25 {
    position: relative;
    top: -25px;
}
.sidenav-fix-top-20 {
    position: relative;
    top: -20px;
}

/* ==========================================================================
   CORRECCIÓN VISUAL PARA COMPONENTE FILEUPLOAD (Botón Seleccionar)
   ========================================================================== */

/* 1. Centrado perfecto del ícono y el texto en los botones del fileUpload */
/*body .ui-fileupload .ui-fileupload-buttonbar .ui-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0rem !important;  Espacio limpio entre el ícono y el texto 
    vertical-align: middle !important;
}*/

/* 2. Corrección específica para el ícono (+) que se cae hacia abajo */
/*body .ui-fileupload .ui-fileupload-buttonbar .ui-button .ui-icon {
    position: static !important;  PrimeFaces suele ponerlo absolute, esto lo rompe en flex 
    margin: 0 !important;
    margin-left: 0px !important;
    margin-right: 2px !important;
    display: inline-block !important;
    vertical-align: middle !important;
}*/

/* 3. (Opcional) Si quieres que el botón "Seleccionar" en móvil ocupe el 100% */
/*@media screen and (max-width: 768px) {
    body .ui-fileupload .ui-fileupload-buttonbar .ui-button {
        width: 15% !important;
        margin-bottom: 0.5rem !important;
    }
}*/

/*@media screen and (min-width: 768px) {
    body .ui-fileupload .ui-fileupload-buttonbar .ui-button .ui-icon {
        position: static !important;  PrimeFaces suele ponerlo absolute, esto lo rompe en flex 
        margin: 0 !important;
        margin-left: 8px !important;
        margin-right: 2px !important;
        display: inline-block !important;
        vertical-align: middle !important;
    }
}*/

body .dialog-compact .ui-dialog-content {
    padding-top: 0.1rem !important; /* Elimina el colchón superior interno */
}

/* ==========================================================================
   TABLAS REFLOW: MANTENER BOTÓN DE ACCIÓN A LA DERECHA EN MÓVIL
   ========================================================================== */
@media screen and (max-width: 768px) {
    /* 1. Le damos espacio a la derecha de la tarjeta para que el botón no tape el texto */
    body .table-roles-mobile .ui-datatable-data > tr {
        position: relative;
        padding-right: 4rem !important; 
    }
    
    /* 2. Tomamos la ÚLTIMA columna (el basurero) y la flotamos a la derecha */
    body .table-roles-mobile .ui-datatable-data > tr > td:last-child {
        position: absolute !important;
        top: 50% !important;
        right: 0.5rem !important;
        transform: translateY(-50%) !important; /* Centrado vertical perfecto */
        border: none !important;
        width: auto !important;
        padding: 0 !important;
    }

    /* 3. Ocultamos el título invisible de la columna en móvil para que no estorbe */
    body .table-roles-mobile .ui-datatable-data > tr > td:last-child .ui-column-title {
        display: none !important;
    }
}