/* Estilos Premium para la herramienta Comprobador de Nómina y SMI */

:root {
    --smi-primary: #ff8507;
    --smi-primary-grad: linear-gradient(135deg, #ffa033 0%, #ff8507 100%);
    --smi-success: #10b981;
    --smi-success-bg: rgba(16, 185, 129, 0.1);
    --smi-warning: #f59e0b;
    --smi-warning-bg: rgba(245, 158, 11, 0.1);
    --smi-danger: #ef4444;
    --smi-danger-bg: rgba(239, 68, 68, 0.1);
    --smi-bg-light: #f8fafc;
    --smi-text-dark: #1e293b;
    --smi-text-muted: #475569; /* Gris oscuro para contraste y buena lectura */
    --smi-border: #e2e8f0;
}

#smi-tool-container {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--smi-text-dark);
}

.smi-card {
    background: #ffffff;
    border: 1px solid var(--smi-border);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.smi-card-header {
    background: var(--smi-primary-grad);
    border-bottom: 0;
}

/* Formularios y elementos interactivos */
.btn-outline-custom {
    border: 2px solid var(--smi-border);
    color: var(--smi-text-dark);
    background-color: #ffffff;
    transition: all 0.2s ease;
    text-align: left;
}

.btn-outline-custom:hover {
    border-color: var(--smi-primary);
    background-color: #fff9f2;
}

.btn-check:checked + .btn-outline-custom {
    border-color: var(--smi-primary);
    background-color: rgba(255, 133, 7, 0.08);
    box-shadow: 0 0 0 3px rgba(255, 133, 7, 0.25);
}

.btn-smi-outline {
    border: 2px solid var(--smi-border);
    color: var(--smi-text-dark);
    background-color: #ffffff;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    display: block;
    text-decoration: none;
    text-align: center;
}

.btn-smi-outline:hover {
    border-color: var(--smi-primary);
    background-color: rgba(255, 133, 7, 0.04);
}

.btn-check:checked + .btn-smi-outline {
    border-color: var(--smi-primary);
    background-color: var(--smi-primary);
    color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(255, 133, 7, 0.25);
}

/* Forzar que los textos y elementos dentro de un botón de radio seleccionado sean legibles */
.btn-check:checked + .btn-smi-outline *,
.btn-check:checked + .btn-smi-outline {
    color: #ffffff !important;
}

.btn-check:checked + .btn-outline-custom * {
    color: var(--smi-text-dark) !important;
}

.form-control:focus, .form-select:focus {
    border-color: var(--smi-primary);
    box-shadow: 0 0 0 3px rgba(255, 133, 7, 0.25);
}

.btn-primary-premium {
    background: var(--smi-primary-grad);
    color: #ffffff;
    border: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-primary-premium:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 133, 7, 0.35);
    color: #ffffff;
}

.btn-primary-premium:active {
    transform: translateY(0);
}

/* Pasos e indicadores de progreso */
.step-container {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.step-container.active {
    opacity: 1;
    transform: translateY(0);
}

.progress-container {
    position: relative;
}

.bg-gradient-primary {
    background: var(--smi-primary-grad);
}

.step-indicator {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--smi-text-muted);
    position: relative;
    transition: color 0.3s ease;
}

.step-indicator.active {
    color: var(--smi-primary);
}

/* Alertas personalizadas */
.alert-custom-info {
    background-color: rgba(255, 133, 7, 0.06);
    border-left: 4px solid var(--smi-primary);
}

/* Badges e indicadores de diagnóstico */
.diagnostic-badge {
    padding: 1.25rem 2.5rem;
    border-radius: 1rem;
    font-weight: bold;
    display: inline-block;
    transition: all 0.3s ease;
}

.diagnostic-badge.status-ok {
    background-color: rgba(16, 185, 129, 0.08);
    color: #047857; /* Verde esmeralda oscuro de alto contraste */
    border: 2px solid #10b981;
}

.diagnostic-badge.status-warning {
    background-color: rgba(245, 158, 11, 0.08);
    color: #b45309; /* Naranja/marrón de alto contraste */
    border: 2px solid #f59e0b;
}

.diagnostic-badge.status-error {
    background-color: rgba(239, 68, 68, 0.08);
    color: #b91c1c; /* Rojo oscuro de alto contraste */
    border: 2px solid #ef4444;
}

/* Clases de apoyo para legibilidad estricta */
#smi-tool-container .text-muted {
    color: #475569 !important; /* Gris oscuro para contraste AA */
}

#smi-tool-container .text-secondary {
    color: #334155 !important; /* Gris carbón legible */
}

#smi-tool-container .fs-8.text-muted {
    color: #475569 !important;
}

/* Gráfico Comparativo */
.smi-chart-container {
    background-color: var(--smi-bg-light);
    border: 1px solid var(--smi-border);
}

.progress-bar.bg-secondary {
    background-color: #cbd5e1 !important;
    color: #475569 !important;
}

.progress-bar {
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.85rem;
    line-height: 24px;
}

.progress-bar.bg-success {
    background-color: var(--smi-success) !important;
}

.progress-bar.bg-warning {
    background-color: var(--smi-warning) !important;
}

.progress-bar.bg-danger {
    background-color: var(--smi-danger) !important;
}

/* Modales */
.modal-content {
    background: #ffffff;
}

/* Soporte para modo de impresión */
@media print {
    body * {
        visibility: hidden;
    }
    #smi-tool-container, #smi-tool-container * {
        visibility: visible;
    }
    #smi-tool-container {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .btn, .progress-steps, .progress-container, .navbar, .footer, .btn-link, .modal {
        display: none !important;
    }
    .smi-card {
        border: none !important;
        box-shadow: none !important;
    }
    .smi-card-body {
        padding: 0 !important;
    }
    #results-step {
        display: block !important;
        opacity: 1 !important;
        transform: none !important;
    }
    #smiForm, #intro-step {
        display: none !important;
    }
}

.text-muted-visible {
    color: #475569 !important;
}

/* Sobrescribir colores primarios de Bootstrap para adaptarlos a la marca naranja */
#smi-tool-container .card {
    max-width: none !important;
}

#smi-tool-container .text-primary,
#helpModal .text-primary,
#smiAlertModal .text-primary {
    color: var(--smi-primary) !important;
}

#smi-tool-container .bg-primary,
#helpModal .bg-primary,
#smiAlertModal .bg-primary {
    background-color: var(--smi-primary) !important;
}

#smi-tool-container .btn-primary,
#helpModal .btn-primary,
#smiAlertModal .btn-primary {
    background-color: var(--smi-primary) !important;
    border-color: var(--smi-primary) !important;
    color: #ffffff !important;
}

#smi-tool-container .btn-outline-primary,
#helpModal .btn-outline-primary,
#smiAlertModal .btn-outline-primary {
    border-color: var(--smi-primary) !important;
    color: var(--smi-primary) !important;
}

#smi-tool-container .btn-outline-primary:hover,
#helpModal .btn-outline-primary:hover,
#smiAlertModal .btn-outline-primary:hover {
    background-color: var(--smi-primary) !important;
    color: #ffffff !important;
}