/* static/css/style.css */

/* Definición de colores corporativos (¡Ajusta estos hexadecimales según tus valores exactos!) */
:root {
    --omnisalud-azul-principal: #3A5795; 
    --omnisalud-azul-oscuro-hover: #2e4575; 
    --omnisalud-texto-sobre-azul: #FFFFFF;
    --omnisalud-gris-texto: #555555;
    --omnisalud-fondo-pagina: #f0f4f8; 
    --omnisalud-verde-exito: #28a745; 
    --omnisalud-rojo-error: #dc3545; 
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--omnisalud-fondo-pagina);
    padding-bottom: 20px; 
    margin: 0;
    color: var(--omnisalud-gris-texto); 
}

/* Estilos de la Tarjeta de Pago */
.card.shadow-sm {
    margin-bottom: 2rem; 
    border: 1px solid #dee2e6; 
}

/* Estilos generales del card-header */
.card-header {
    background-color: var(--omnisalud-azul-principal) !important; 
    color: var(--omnisalud-texto-sobre-azul) !important;
    border-bottom: none; 
}

/* Ajustes específicos para el card-header con logo apilado */
.custom-card-header-stacked-logo { 
    padding-top: 0.5rem;    /* Reducido el padding superior */
    padding-bottom: 0.5rem; /* Reducido el padding inferior */
    padding-left: 1rem;
    padding-right: 1rem;
}


.header-logo-stacked {
    height: 120px; /* Puedes ajustar este tamaño si aún es muy grande o pequeño */
    width: auto;  
    display: block; 
    margin-left: auto;
    margin-right: auto;
}


.card-header h4 { 
    margin-bottom: 0.05rem; /* Reducido el margen inferior del título */
    font-weight: 600; 
    font-size: 1.05rem; /* Ligeramente reducido el tamaño del título */
    display: inline-block; 
    vertical-align: middle;
}
.card-header h4 i.fas { 
    margin-right: 0.3rem; 
    font-size: 0.95em; /* Ligeramente reducido el icono */
}

.card-header p.subheader-text { 
    font-size: 0.8rem; /* Ligeramente reducido el subtítulo */
    opacity: 0.9;
    line-height: 1.1; /* Reducida la altura de línea */
    margin-bottom: 0; 
}

.form-label {
    font-weight: 500; 
    color: var(--omnisalud-gris-texto);
}

/* Botón Pagar con Wompi */
#payButton.btn-success { 
    background-color: var(--omnisalud-azul-principal);
    border-color: var(--omnisalud-azul-principal);
    color: var(--omnisalud-texto-sobre-azul);
    font-weight: bold;
    padding: 0.75rem 1.25rem; 
}

#payButton.btn-success:hover {
    background-color: var(--omnisalud-azul-oscuro-hover);
    border-color: var(--omnisalud-azul-oscuro-hover);
}

#payButton:disabled {
    background-color: #6c757d; 
    border-color: #6c757d;
}

/* Estilos para el footer personalizado de la tarjeta */
.custom-card-footer { 
    padding: 0.75rem 1rem; 
    text-align: center; 
    background-color: #f9f9f9; 
    border-top: 1px solid #eee; 
}

.footer-text { 
    display: block; 
    font-size: 0.8rem; 
    color: var(--omnisalud-gris-texto);
}

/* Estilos para las tarjetas de las páginas de éxito y fallo */
.status-card .card-header.bg-success {
    background-color: var(--omnisalud-verde-exito) !important;
}
.status-card .card-header.bg-danger {
    background-color: var(--omnisalud-rojo-error) !important;
}

/* Eliminamos los estilos del logo en la esquina superior derecha si ya no se usa */
.top-right-logo-container, .top-right-logo-img {
    display: none; 
}

.header-logo-wrapper {
    margin-bottom: 0.25rem !important; /* Forzar un margen más pequeño */
}