/* ============================================
   ESTILOS PERSONALIZADOS AFOCAT
   Colores y estilos específicos de la empresa
   ============================================ */

:root {
    --afo-azul-principal: #007bff;
    --afo-azul-oscuro: #0069d9;
    --afo-rojo-peligro: #dc3545;
    --afo-verde-exito: #28a745;
    --afo-gris-secundario: #6c757d;
    --afo-verde-vigente: #063;
    --afo-rojo-vencido: #F00;
}

/* Fondo con logo de la empresa */
.afo-fondo-empresa {
    background: linear-gradient(135deg, var(--afo-azul-principal) 0%, var(--afo-azul-oscuro) 100%);
    color: white;
}

/* Spinner de carga personalizado */
.afo-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid #f3f3f3;
    border-top: 2px solid var(--afo-azul-principal);
    border-radius: 50%;
    animation: afo-girar 1s linear infinite;
}

@keyframes afo-girar {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Animación de entrada para modales */
@keyframes afo-aparecer {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.afo-modal-visible .afo-modal-dialogo {
    animation: afo-aparecer 0.3s ease-out;
}

/* Estilos para resultados de consulta */
.afo-resultado-tabla {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

.afo-resultado-tabla th {
    background-color: #f8f9fa;
    font-weight: 600;
    padding: 0.5rem;
    border: 1px solid #dee2e6;
}

.afo-resultado-tabla td {
    padding: 0.5rem;
    border: 1px solid #dee2e6;
}

/* Tarjeta de resultados */
.afo-tarjeta-resultado {
    border-left: 4px solid var(--afo-azul-principal);
    background-color: #f8f9fa;
    padding: 1rem;
    margin-bottom: 1rem;
}

.afo-tarjeta-resultado.vencido {
    border-left-color: var(--afo-rojo-peligro);
}

.afo-tarjeta-resultado.vigente {
    border-left-color: var(--afo-verde-exito);
}


/* ============================================
   ESTILOS PARA LOGO EN ENCABEZADO DE MODAL
   ============================================ */

.afo-logo-encabezado {
    max-width: 100%;
    height: auto;
    max-height: 80px; /* Cambia este valor según necesites */
    width: auto;
    display: block;
    margin: 0 auto; /* Centra la imagen horizontalmente */
    object-fit: contain;
}

/* Para que el encabezado tenga el color de la empresa */
.afo-tarjeta-encabezado.afo-encabezado-empresa {
    background: linear-gradient(135deg, var(--afo-azul-principal) 0%, var(--afo-azul-oscuro) 100%);
    border-bottom: none;
}

/* Ajuste responsive para el logo */
@media (max-width: 576px) {
    .afo-logo-encabezado {
        max-height: 60px; /* Más pequeño en móviles */
    }
}

@media (min-width: 768px) {
    .afo-logo-encabezado {
        max-height: 100px; /* Más grande en tablets/desktop */
    }
}