/* ==================================================== */
/* Archivo CSS Personalizado para la Aplicación SATPENALVER  */
/* Basado en la estética de Atardecer y Underline Inputs */
/* ==================================================== */

/* ---------------------------------------------------- */
/* Variables de Colores Basadas en el Atardecer */
/* ---------------------------------------------------- */
:root {
    --color-naranja-atardecer: #ff8c00; /* Naranja vibrante para headers, acentos */
    --color-naranja-oscuro-atardecer: #e67e22; /* Un naranja más oscuro para hover/active */
    --color-naranja-claro-atardecer: #ffb680; /* Un naranja más claro/pastel para transiciones */
    --color-dorado-atardecer: #ffd700; /* Dorado para el gradiente o acentos */

    --color-azul-oscuro: #0056b3; /* Azul profundo para navbar, fondos de header */
    --color-azul-primario-btn: #007bff; /* Mantenido de Bootstrap para algunos botones */
    --color-gris-suave: #e9ecef; /* Para underline sutil de valores estáticos */
    --color-gris-intermedio: #ced4da; /* Para underline de inputs */
    --color-texto-secundario: #6c757d; /* Gris para labels y texto secundario */
    --color-texto-principal: #343a40; /* Negro para textos principales */
}

.header {
    --background-color: #023697;
    --heading-color: #ffffff;
    /* Corrección aquí: */
    color: var(--heading-color); /* Asegura que el texto sea blanco */
    transition: all 0.5s;
    z-index: 997;
    background-color: var(--background-color);
}

/* ---------------------------------------------------- */
/* Estilos Generales de la Card Contenedora (Create, Edit, Show) */
/* ---------------------------------------------------- */
.card.shadow-lg {
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.08) !important; /* Sombra sutil y limpia */
    border-radius: 0.75rem !important; /* Bordes suaves */
    overflow: hidden; /* Asegura que cualquier desbordamiento esté oculto */
}

/* Header del Card (Consistente en Create, Edit, Show) */
.card-header.bg-gradient-custom {
    background-color: var(
        --color-azul-oscuro
    ); /* Fondo azul oscuro como el navbar */
    color: white;
    text-align: center;
    padding: 1.5rem 1rem !important;
    border-bottom: 3px solid var(--color-naranja-atardecer); /* Línea inferior NARANJA */
    border-top-left-radius: 0.75rem !important;
    border-top-right-radius: 0.75rem !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra sutil para profundidad */
}
.card-header h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: white;
    margin-bottom: 0; /* Eliminar margen inferior predeterminado de h3 */
}

/* Cuerpo del Card */
.card-body {
    padding: 2rem !important; /* Espaciado interno generoso */
}

/* Footer del Card (para botones de acción en Show) */
.card-footer {
    background-color: #f8f9fa; /* Color de fondo claro */
    border-top: 1px solid #dee2e6; /* Borde superior suave */
    border-bottom-left-radius: 0.75rem !important;
    border-bottom-right-radius: 0.75rem !important;
}

/* ---------------------------------------------------- */
/* Estilos para Inputs y Selects (Estilo Underline) */
/* ---------------------------------------------------- */

.form-label.custom-label {
    font-weight: 500;
    color: var(--color-texto-secundario);
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
    display: block;
}

.form-control.custom-input-underline {
    border: none; /* Elimina todos los bordes */
    border-bottom: 1px solid var(--color-gris-intermedio); /* Solo el borde inferior */
    border-radius: 0; /* Asegura que no haya redondeo */
    padding: 0.5rem 0.25rem; /* Padding más ajustado para el estilo underline */
    background-color: transparent; /* Fondo transparente para integrar mejor */
    box-shadow: none; /* Elimina cualquier sombra predeterminada */
    transition: border-color 0.3s ease-in-out; /* Transición para el efecto de foco */
}

.form-control.custom-input-underline:focus {
    border-color: var(--color-naranja-atardecer); /* Borde NARANJA al enfocar */
    outline: 0;
    box-shadow: none; /* Asegura que no haya shadow de foco de Bootstrap */
}

/* Placeholder Styling */
.form-control.custom-input-underline::placeholder {
    color: #adb5bd; /* Un gris más claro para el placeholder */
    opacity: 1; /* Asegura que el placeholder sea visible */
}

/* Select2 Themeing for Underline Style */
/* Asegúrate de que el tema Bootstrap4 para Select2 esté incluido en tu proyecto */
.select2-container--bootstrap4
    .select2-selection--single.custom-input-underline {
    border: none !important;
    border-bottom: 1px solid var(--color-gris-intermedio) !important;
    border-radius: 0 !important;
    padding: 0.5rem 0.25rem !important;
    background-color: transparent !important;
    height: auto !important; /* Permitir que Select2 se ajuste al padding */
    min-height: calc(
        1.5em + 0.5rem + 2px
    ) !important; /* Altura mínima consistente */
    box-shadow: none !important;
    transition: border-color 0.3s ease-in-out !important;
    display: flex !important;
    align-items: center !important;
}

.select2-container--bootstrap4.select2-container--focus
    .select2-selection--single.custom-input-underline,
.select2-container--bootstrap4.select2-container--open
    .select2-selection--single.custom-input-underline {
    border-color: var(
        --color-naranja-atardecer
    ) !important; /* NARANJA al enfocar Select2 */
}

.select2-container--bootstrap4 .select2-selection__arrow {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    right: 0.25rem !important; /* Ajuste para el icono */
}
.select2-container--bootstrap4 .select2-selection__rendered {
    padding-left: 0 !important;
    padding-right: 1.5rem !important; /* Espacio para la flecha */
}
.select2-container--bootstrap4 .select2-selection__clear {
    right: 1.75rem !important; /* Ajusta posición del botón de limpiar */
}

/* Datepicker Input Group */
.input-group.date .form-control.custom-input-underline {
    border-right: none;
    border-bottom: 1px solid var(--color-gris-intermedio); /* Mantiene el borde inferior */
    border-radius: 0;
}
/* Si decides reintroducir el icono del datepicker, necesitarás estilizarlo.
   Por ahora, el estilo asume que el icono no está en un input-group-append
   que rompa el underline.
*/

/* ---------------------------------------------------- */
/* Estilos Específicos para el Show (Visualización de Datos) */
/* ---------------------------------------------------- */

.form-label.custom-label-show {
    font-weight: 500;
    color: var(--color-texto-secundario);
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
    display: block;
}



.form-control-static.custom-value-show {
    border-bottom: 1px solid var(--color-gris-suave); /* Línea inferior muy sutil para el valor */
    padding: 0.5rem 0.25rem;
    color: var(--color-texto-principal);
    font-size: 1rem;
    margin-bottom: 0; /* Eliminar margen inferior predeterminado de <p> */
    word-wrap: break-word; /* Romper palabras largas si es necesario */
    min-height: calc(
        1.5em + 0.5rem + 2px
    ); /* Asegurar altura mínima para alinear con inputs */
    display: block; /* Para que el borde inferior funcione correctamente */
}

.custom-value-show:hover {
    border-color: var(--color-naranja-atardecer); /* Borde NARANJA al enfocar */
    
}

/* Estilos para Badges (Estatus) */
.badge.custom-badge {
    padding: 0.5em 0.8em;
    border-radius: 0.25rem;
    font-weight: 600;
    font-size: 0.85rem;
    min-width: 80px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px; /* Altura fija para alinear verticalmente */
}
.badge.bg-success {
    background-color: #28a745 !important; /* Verde estándar para éxito */
    color: white;
}
.badge.bg-danger {
    background-color: #dc3545 !important; /* Rojo estándar para peligro */
    color: white;
}

/* ---------------------------------------------------- */
/* Botones de Acción (Consistentes en toda la aplicación) */
/* ---------------------------------------------------- */

.btn-lg.custom-submit-btn,
.btn-lg.custom-cancel-btn {
    border-radius: 0.5rem !important; /* Bordes menos redondeados que "pill" */
    padding: 0.75rem 2rem; /* Padding generoso */
    font-weight: 600;
    transition: all 0.2s ease-in-out;
    display: inline-flex; /* Para alinear icono y texto */
    align-items: center;
    justify-content: center;
}
/* Botón Principal (Guardar, Mostrar Fotos) */
.btn-primary.custom-submit-btn {
    background-color: var(--color-naranja-atardecer);
    border-color: var(--color-naranja-atardecer);
    color: white; /* Asegurar texto blanco */
}
.btn-primary.custom-submit-btn:hover {
    background-color: #e67e00; /* Un poco más oscuro que naranja-atardecer */
    border-color: #e67e00;
    transform: translateY(-1px);
}
/* Botón Secundario (Cancelar, Volver) */
.btn-secondary.custom-cancel-btn {
    background-color: #6c757d;
    border-color: #6c757d;
    color: white; /* Asegurar texto blanco */
}
.btn-secondary.custom-cancel-btn:hover {
    background-color: #545b62;
    border-color: #545b62;
    transform: translateY(-1px);
}

/* Botón de Adjuntar Archivo (customizado) */
.custom-file-upload-button {
    background-color: transparent;
    color: var(--color-naranja-atardecer);
    border: 1px solid var(--color-naranja-atardecer);
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all 0.3s ease-in-out;
}
.custom-file-upload-button:hover {
    background-color: var(--color-naranja-atardecer);
    color: white;
}

.material-icons.me-2 {
    margin-right: 0.5rem; /* Espacio entre icono y texto */
    font-size: 1.2rem; /* Tamaño del icono */
}

/* ---------------------------------------------------- */
/* Navbar Styling (Ejemplo - DEBES ADAPTAR ESTO A TU COMPONENTE REAL DEL NAV) */
/* ---------------------------------------------------- */
/* Asumo que tienes una estructura de navbar similar a Bootstrap */
.navbar {
    background-color: var(
        --color-azul-oscuro
    ) !important; /* Fondo azul oscuro para el navbar */
    /* Si quieres un sutil degradado que termine en naranja, descomenta la siguiente línea y comenta la anterior: */
    /* background: linear-gradient(to right, var(--color-azul-oscuro), var(--color-naranja-atardecer)); */
}
.navbar .nav-link,
.navbar .navbar-brand {
    color: white !important;
    font-weight: 500;
}
.navbar .nav-link:hover {
    color: var(
        --color-naranja-atardecer
    ) !important; /* Texto NARANJA al pasar el mouse */
}
/* Estilo para la línea inferior de la pestaña activa en el navbar (si aplica) */
.navbar .nav-item.active .nav-link {
    border-bottom: 3px solid var(--color-naranja-atardecer);
    padding-bottom: calc(
        0.5rem - 3px
    ); /* Ajusta el padding para que la línea no añada altura */
}

/* Ajustes adicionales para la vista principal si es necesario (dashboard, listados) */
/* Por ejemplo, para los pequeños cuadros de resumen en image_e26cbb.jpg */
.info-box-custom {
    /* Un nombre de clase de ejemplo */
    border-radius: 0.75rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
    color: white; /* Color de texto predeterminado */
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.info-box-custom.bg-green {
    background-color: #28a745;
}
.info-box-custom.bg-info-blue {
    /* Un azul más vibrante si quieres */
    background-color: #17a2b8;
}
.info-box-custom.bg-yellow {
    background-color: #ffc107;
    color: #343a40; /* Texto oscuro para fondo claro */
}
.info-box-custom.bg-dark-gray {
    background-color: #343a40;
}
.info-box-custom .icon-wrapper {
    font-size: 3rem; /* Tamaño del icono */
    opacity: 0.7;
}
.info-box-custom .text-content {
    text-align: right;
}
.info-box-custom .value {
    font-size: 2rem;
    font-weight: 700;
}
.info-box-custom .label {
    font-size: 0.9rem;
    opacity: 0.9;
}

/* CoreUI overrides para ajustes específicos si estás usando CoreUI Templates */
/* .card { border: none !important; } */ /* Si quieres eliminar todos los bordes predeterminados de CoreUI Card */

/* botones btn orange */



/* Estilos para tu botón naranja personalizado */
.btn-orange {
    /* Color de fondo */
    background-color: var(--color-naranja-atardecer);
    /* Color del texto */
    color: #ffffff;
    /* Borde inicial */
    border-color: var(--color-naranja-atardecer);
    /* Aseguramos que se mantengan las propiedades de base de Bootstrap */
    /* Puedes añadir aquí padding, border-radius si no lo hereda bien de .btn */
    /* padding: .375rem .75rem; */ /* Valores predeterminados de Bootstrap btn */
    /* border-radius: .25rem; */ /* Valores predeterminados de Bootstrap btn */

    /* Transición suave para todos los estados */
    transition: all 0.2s ease-in-out;
}

/* Estado al pasar el ratón (hover) */
.btn-orange:hover {
    background-color: var(
        --color-naranja-oscuro-atardecer
    ); /* Un naranja ligeramente más oscuro */
    border-color: var(--color-naranja-oscuro-atardecer);
    color: #ffffff; /* Asegura el color del texto */
}

/* Estado cuando el botón está presionado/activo (active) */
.btn-orange:active {
    background-color: var(
        --color-naranja-oscuro-atardecer
    ); /* Mismo color que hover o un poco más oscuro */
    border-color: var(--color-naranja-oscuro-atardecer);
    color: #ffffff;
    /* Efecto de "presión" visual para el botón activo */
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

/* Estado cuando el botón tiene el foco (navegación con teclado o después de hacer clic) */
.btn-orange:focus {
    /* Importante: Reemplaza el box-shadow por defecto de Bootstrap */
    box-shadow: 0 0 0 0.25rem rgba(255, 140, 0, 0.5) !important; /* Usamos RGBA para transparencia y !important */
    /* Puedes usar una de tus variables de color aquí para consistencia */
    /* box-shadow: 0 0 0 0.25rem rgba(var(--color-naranja-atardecer-rgb), 0.5) !important; */ /* Si defines variables RGB */
    border-color: transparent !important; /* Para evitar un borde doble, si Bootstrap añade uno */
    outline: 0 !important; /* Asegura que el outline del navegador se quite */
}

/* Puedes añadir una variable RGB para facilitar el uso en rgba() si lo necesitas en :root */
/* Ejemplo en :root para el color naranja atardecer */
/* --color-naranja-atardecer-rgb: 255, 140, 0; */