/* ==========================================================================
   DESIGN SYSTEM & VARIABLES
   ========================================================================== */
:root {
    --primary-color: #0f172a;      /* Tarjeta/sidebar/tabla background */
    --primary-hover: #1e293b;      
    --secondary-color: #6b7280;    
    --secondary-hover: #4b5563;
    --bg-overlay: rgba(15, 23, 42, 0.65); 
    --bg-modal: #0f172a;           
    --bg-general: #1e293b;         
    --text-primary: #f1f5f9;       
    --text-main: #f1f5f9;          
    --text-muted: #cbd5e1;
    --text-placeholder: #64748b;
    --border-color: #334155;       
    --border-focus: #3b82f6;
    --bg-readonly: #1e293b;        
    --shadow-premium: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
    --transition-smooth: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --border-radius: 4px;

    /* Escalado Matemático Responsivo para Cualquier Monitor / Zoom */
    --screen-scale-factor: 1;
    --font-size-base: clamp(15px, calc(0.85rem + 0.25vw * var(--screen-scale-factor, 1)), 19px);
    --font-size-sm: clamp(13.5px, calc(0.75rem + 0.2vw * var(--screen-scale-factor, 1)), 16px);
    --font-size-lg: clamp(16.5px, calc(1rem + 0.3vw * var(--screen-scale-factor, 1)), 22px);
    --font-size-title: clamp(18px, calc(1.1rem + 0.35vw * var(--screen-scale-factor, 1)), 24px);
    --modal-max-width: 100%;

    /* -----------------------------------------------------------------------
       PROPORCIÓN ÁUREA φ=1.618 — Neuro-diseño & Fibonacci
       ----------------------------------------------------------------------- */
    --phi: 1.618;

    /* Serie tipográfica áurea (base 16px) */
    --text-xs:   0.618rem;   /* = 1/φ²  ≈  9.9px  — metadatos mínimos        */
    --text-sm:   0.764rem;   /* = 1/φ   ≈ 12.2px  — labels / guía atencional */
    --text-base: 1rem;       /* = 16px             — cuerpo de texto          */
    --text-md:   1.272rem;   /* = φ^0.5 ≈ 20.4px  — subtítulos               */
    --text-lg:   1.618rem;   /* = φ     ≈ 25.9px  — títulos modal (primacy)  */
    --text-xl:   2.618rem;   /* = φ²    ≈ 41.9px  — display / hero           */

    /* Serie espacial Fibonacci (px): 3 · 5 · 8 · 13 · 21 · 34 · 55 */
    --space-xs:  3px;
    --space-sm:  5px;
    --space-md:  8px;    /* padding vertical inputs  */
    --space-lg:  13px;   /* margin-bottom form-row   */
    --space-xl:  21px;   /* padding modal-container  */
    --space-2xl: 34px;   /* padding horizontal botones cta */
    --space-3xl: 55px;   /* separaciones mayores     */

    /* Ratio áureo de layout: columna menor 38.2% / mayor 61.8% */
    --col-minor: 38.2%;
    --col-major: 61.8%;
}

/* ==========================================================================
   BASE STYLES
   ========================================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--text-main);
    background: transparent;
    min-height: 100vh;
    height: 100vh;
    margin: 0;
    padding: 0;
    line-height: 1.4;
    font-size: var(--font-size-base, 14px);
    overflow: hidden;
}

/* ==========================================================================
   MODAL CONTAINER & OVERLAY (FULL SCREEN ZERO-SCROLL WRAPPER)
   ========================================================================== */
.modal-overlay {
    width: 100%;
    height: 100%;
    min-height: 0;
    background-color: transparent;
    display: flex;
    flex-direction: column;
    z-index: 10;
    overflow: hidden;
}

.modal-container {
    background-color: var(--bg-modal);
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
    padding: clamp(6px, 1vh, 12px) clamp(12px, 1.4vw, 20px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 1.5px solid var(--border-color);
    overflow: hidden !important;
    animation: modalAppear 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes modalAppear {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ==========================================================================
   HEADER BAR
   ========================================================================== */
.modal-header {
    background-color: var(--primary-color);
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    user-select: none;
}

.modal-title {
    font-size: var(--text-lg);   /* φ = 1.618rem ≈ 25.9px — efecto primacy/anclaje */
    font-weight: 500;
    letter-spacing: -0.01em;
}

.close-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.35rem;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
}

.close-btn:hover {
    color: #ffffff;
    transform: rotate(90deg);
}

/* ==========================================================================
   FORM BODY & GRID LAYOUT
   ========================================================================== */
.modal-body {
    padding: 0 !important;
    max-width: 100%;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.form-row {
    display: grid !important;
    grid-template-columns: clamp(110px, 9.5vw, 145px) 1fr !important;
    gap: clamp(6px, 0.8vw, 10px) !important;
    align-items: center !important;
    margin-bottom: clamp(2px, 0.45vh, 5px) !important;
}

.form-row.align-start {
    align-items: flex-start !important;
}

.form-row.align-start .form-label {
    margin-top: 4px !important;
}

/* Label styling */
.form-label {
    font-size: clamp(0.70rem, 0.66rem + 0.12vw, 0.79rem) !important;
    font-weight: 700;
    color: var(--text-muted);
    opacity: 0.9;
    text-transform: uppercase;
    text-align: right;
    transition: color 0.25s ease, opacity 0.25s ease;
    white-space: nowrap;
}

.form-label::after {
    content: ':';
}

.form-label.bold-label {
    font-weight: 700;
    color: var(--text-primary);
}

/* Wrapper for controls to enforce aligned right edge */
.form-control-wrapper {
    width: 100%;
    max-width: 100%; /* Stretches to the edges of the column */
    display: flex;
    flex-direction: column;
}

/* ==========================================================================
   FORM CONTROLS (INPUTS, SELECTS, TEXTAREAS)
   ========================================================================== */
.form-input, 
.form-select, 
.form-textarea {
    width: 100% !important;
    padding: clamp(2px, 0.45vh, 5px) clamp(6px, 0.7vw, 10px) !important;
    font-size: clamp(0.74rem, 0.70rem + 0.14vw, 0.85rem) !important;
    color: var(--text-main);
    background-color: var(--bg-general);
    border: 1.5px solid var(--border-color) !important;
    border-radius: var(--border-radius);
    outline: none;
    transition: var(--transition-smooth);
    font-family: inherit;
    text-transform: uppercase;
    min-height: clamp(26px, 3vh, 32px) !important;
    box-sizing: border-box !important;
}

#motivoEstudio {
    height: clamp(44px, 5.5vh, 64px) !important;
    min-height: 40px !important;
    max-height: 72px !important;
    resize: none !important;
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--text-placeholder);
    opacity: 1;
}

.form-input:focus, 
.form-select:focus, 
.form-textarea:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* Readonly fields (Fec. Probable-Entrega) */
.readonly-input {
    background-color: var(--bg-readonly);
    border-color: var(--border-color);
    color: var(--text-muted);
    cursor: not-allowed;
    width: 100% !important;
    max-width: none !important;
}

/* ==========================================================================
   SPECIAL INLINE GROUPS & BUTTONS
   ========================================================================== */
.inline-group {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
}

.inline-group .form-input,
.inline-group .form-select {
    flex: 1;
}

/* Button styles */
.btn {
    font-family: inherit;
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 500;
    padding: calc(7px * var(--screen-scale-factor, 1)) calc(16px * var(--screen-scale-factor, 1));
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition-smooth);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

.btn-primary {
    background-color: var(--primary-color);
    color: #ffffff;
    /* Padding Fibonacci: 8px (--space-md) · 34px (--space-2xl) */
    padding: var(--space-md) var(--space-2xl);
}

.btn-primary:hover {
    background-color: var(--primary-hover);
    box-shadow: 0 4px 6px -1px rgba(27, 62, 133, 0.2);
}

.btn-secondary-blue {
    background-color: #2b529f;
    color: #ffffff;
}

.btn-secondary-blue:hover {
    background-color: #1e3d7a;
}

.btn-inline {
    height: 34px;
    min-width: 80px;
}

/* DNI Buscar Layout */
.input-with-button-wrapper {
    display: flex;
    gap: 8px;
    width: 100%;
}

.input-with-button-wrapper .form-input {
    flex: 1;
}

.btn-inline-outer {
    height: 34px;
    min-width: 80px;
}

/* Med. Solicitante custom split */
.split-buttons {
    display: flex;
    gap: 12px;
}

.select-container-custom {
    flex: 1;
}

.button-group-inline {
    display: flex;
    gap: 6px;
}

.button-group-below {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.btn-inline-med {
    height: 34px;
    min-width: 75px;
}

.btn-dictate {
    background-color: #e11d48;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: 600;
    height: clamp(26px, 3vh, 32px) !important;
    font-size: clamp(0.72rem, 0.68rem + 0.12vw, 0.82rem) !important;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    width: 100%;
}

.btn-dictate:hover {
    background-color: #be123c;
}

.btn-dictate.listening {
    background-color: #16a34a;
    animation: pulseMic 1.5s infinite;
}

@keyframes pulseMic {
    0% { opacity: 1; }
    50% { opacity: 0.6; }
    100% { opacity: 1; }
}

/* ==========================================================================
   CHECKBOX & LAYOUT (Costo Transp. + Pago Pendiente)
   ========================================================================== */
.flex-column-layout {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.row-flex {
    display: grid !important;
    grid-template-columns: clamp(110px, 9.5vw, 145px) 1fr !important;
    gap: clamp(6px, 0.8vw, 10px) !important;
    align-items: center !important;
    width: 100%;
}

.checkbox-row {
    margin-top: 2px;
}

.form-label-placeholder {
    width: clamp(110px, 9.5vw, 145px) !important;
}

.checkbox-container {
    display: flex;
    align-items: center;
}

.checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 700; /* Bold as in image */
    color: var(--text-primary);
    font-size: 0.875rem;
    user-select: none;
}

.form-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--border-focus);
}

/* ==========================================================================
   CUSTOM FILE UPLOAD (Orden Servicio)
   ========================================================================== */
.file-upload-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
}

.file-upload-label-btn {
    display: inline-block;
    padding: 6px 14px;
    background: var(--bg-modal);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    font-size: 0.8125rem;
    color: var(--text-primary);
    cursor: pointer;
    user-select: none;
    transition: var(--transition-smooth);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.file-upload-label-btn:hover {
    background: var(--bg-general);
    border-color: var(--border-focus);
}

.file-upload-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.file-upload-status-text {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

/* ==========================================================================
   DIVIDER & ACTIONS FOOTER
   ========================================================================== */
.form-divider {
    border: 0;
    border-top: 1px solid var(--border-color);
    margin: clamp(2px, 0.4vh, 6px) 0 !important;
    width: 100%;
    opacity: 0.35;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    background-color: var(--bg-modal);
    padding: clamp(2px, 0.4vh, 6px) 0 0 0 !important;
    margin-top: 0 !important;
    flex-shrink: 0;
}

.btn-muted {
    background-color: #6b7280; /* Grey button for Salir */
    color: #ffffff;
    min-width: 75px;
    padding: clamp(4px, 0.6vh, 6px) 16px !important;
    font-size: clamp(0.75rem, 0.72rem + 0.12vw, 0.85rem) !important;
    border-radius: 4px;
}

.btn-muted:hover {
    background-color: var(--secondary-hover);
}

.btn-success {
    background-color: var(--primary-color); /* Same dark blue for Guardar */
    color: #ffffff;
    min-width: 90px;
    padding: clamp(4px, 0.6vh, 6px) 24px !important;
    font-size: clamp(0.75rem, 0.72rem + 0.12vw, 0.85rem) !important;
    border-radius: 4px;
}

.btn-success:hover {
    background-color: var(--primary-hover);
    box-shadow: 0 4px 10px rgba(27, 62, 133, 0.25);
}

/* ==========================================================================
   TOAST SYSTEM (Elegancia Visual)
   ========================================================================== */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 9999999 !important;
}

.toast {
    background-color: #1e293b;
    color: #ffffff;
    padding: 12px 20px;
    border-radius: 6px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 10px;
    transform: translateY(50px);
    opacity: 0;
    animation: toastSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    border-left: 4px solid var(--border-focus);
}

.toast.toast-success {
    border-left-color: #10b981;
}

.toast.toast-error {
    border-left-color: #ef4444;
}

@keyframes toastSlideIn {
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ==========================================================================
   2-COLUMN BOTTOM GRID LAYOUT
   ========================================================================== */
.form-grid-2col {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: clamp(14px, 2vw, 32px) !important;
    width: 100% !important;
    flex: 1 !important;
    min-height: 0 !important;
    align-content: space-between !important;
}

.form-col {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important;
    min-height: 0 !important;
}

/* ==========================================================================
   RESPONSIVE DESIGN (Pantallas Pequeñas)
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. Anular el clamp de escritorio y permitir que el modal use el 100% del ancho móvil */
    :root {
        --modal-max-width: 100% !important;
    }

    /* 2. Asegurar flujo y visibilidad de los contenedores principales en móvil */
    .app-container {
        height: 100dvh !important;
        overflow: hidden !important;
    }

    .main-layout {
        height: 100dvh !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        min-width: 100% !important;
    }

    /* 3. Permitir scroll vertical fluido con inercia en el contenido */
    .dashboard-content {
        flex: 1 1 auto !important;
        height: calc(100dvh - 50px) !important;
        max-height: calc(100dvh - 50px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 8px 8px 30px 8px !important;
    }

    /* 4. Forzar que el overlay y el container no se colapsen ni queden ocultos */
    .modal-overlay {
        width: 100% !important;
        min-height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        opacity: 1 !important;
        visibility: visible !important;
        background-color: transparent !important;
    }

    .modal-container {
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        margin: 0 !important;
        border-radius: 6px !important;
        border: 1.5px solid var(--border-color) !important;
        opacity: 1 !important;
        transform: none !important;
        animation: none !important; /* Evitar flash de opacidad en navegadores lentos */
    }

    /* 5. Cabecera del formulario y botón de cierre en móvil */
    .modal-header {
        padding: 12px 14px !important;
    }

    .modal-title {
        font-size: 1.05rem !important;
    }

    /* En index.html el botón de cerrar en cabecera se oculta porque es la vista principal */
    .modal-overlay #closeHeaderBtn {
        display: none !important;
    }

    /* 6. Formulario y espaciados ergonómicos en pantalla táctil */
    .modal-body {
        padding: 14px 10px !important;
    }

    .form-grid-2col {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    .form-row {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
        margin-bottom: 12px !important;
    }

    .form-label {
        text-align: left !important;
        font-size: 0.8rem !important;
    }

    .form-row.align-start .form-label {
        margin-top: 0 !important;
    }

    .form-control-wrapper {
        max-width: 100% !important;
    }

    .row-flex {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    .form-label-placeholder {
        display: none !important;
    }

    .form-input, 
    .form-select,
    .form-textarea {
        font-size: 0.88rem !important;
        padding: 9px 12px !important;
    }

    .split-buttons {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important;
    }

    .button-group-inline {
        justify-content: stretch !important;
        display: flex !important;
        gap: 6px !important;
    }

    .button-group-inline .btn {
        flex: 1 !important;
    }

    /* Vidrio esmerilado satinado móvil (Glassmorphism Clínico) con safe-area insets */
    .dashboard-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 100 !important;
        width: 100% !important;
        max-width: 100vw !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        min-width: 0 !important;
        min-height: 50px;
        height: auto !important;
        padding-top: max(8px, env(safe-area-inset-top, 0px)) !important;
        padding-bottom: 8px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        background: rgba(15, 23, 42, 0.90) !important;
        -webkit-backdrop-filter: blur(10px) saturate(160%) !important;
        backdrop-filter: blur(10px) saturate(160%) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }

    body.light-theme .dashboard-header {
        background: rgba(255, 255, 255, 0.88) !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
    }

    .form-actions {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 50 !important;
        padding: 12px 14px max(12px, env(safe-area-inset-bottom, 12px)) 14px !important;
        background: rgba(15, 23, 42, 0.90) !important;
        -webkit-backdrop-filter: blur(10px) saturate(160%) !important;
        backdrop-filter: blur(10px) saturate(160%) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.25) !important;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }

    body.light-theme .form-actions {
        background: rgba(255, 255, 255, 0.88) !important;
        border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06) !important;
    }

    /* Fallback sólido opaco para navegadores sin soporte de backdrop-filter */
    @supports not ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
        .dashboard-header,
        .form-actions {
            background: #0f172a !important;
        }

        body.light-theme .dashboard-header,
        body.light-theme .form-actions {
            background: #ffffff !important;
        }
    }
}

/* ==========================================================================
   ROLE BASED ACCESS CONTROL (RBAC) & OFFLINE STYLES
   ========================================================================== */
body.role-clinic .admin-only {
    display: none !important;
}

body.role-clinic .sidebar,
body.role-clinic #appSidebar {
    display: none !important;
}

body.role-clinic .main-content,
body.role-clinic .app-container {
    margin-left: 0 !important;
    padding-left: 0 !important;
    width: 100% !important;
}

.connection-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 9999px;
    transition: var(--transition-smooth);
}

.connection-status.online {
    background-color: #d1fae5;
    color: #065f46;
}

.connection-status.offline {
    background-color: #fee2e2;
    color: #991b1b;
}

.connection-status.syncing {
    background-color: #fef3c7;
    color: #92400e;
    animation: pulseSync 1.5s infinite;
}

@keyframes pulseSync {
    0% { opacity: 1; }
    50% { opacity: 0.6; }
    100% { opacity: 1; }
}

/* ==========================================================================
   NEUROCIENCIA COGNITIVA — Principios aplicados al formulario
   φ=1.618 | Ley de Miller | Efecto Saliencia | Guía de Flujo | Anclaje
   ========================================================================== */

/* ── 1. EFECTO SALIENCIA (Attentional Salience) ───────────────────────────
   Cuando el input/select tiene :focus, su .form-label hermano anterior
   aumenta luminosidad y opacidad → dirige la mirada hacia el campo activo.
   Se usa :has() para detectar el foco desde el ancestro .form-row.
   ─────────────────────────────────────────────────────────────────────── */
.form-row:has(.form-input:focus) .form-label,
.form-row:has(.form-select:focus) .form-label,
.form-row:has(.form-textarea:focus) .form-label {
    color: var(--border-focus);   /* Azul vibrante — saliencia perceptual    */
    opacity: 1;                    /* Máxima presencia visual                 */
}

/* ── 2. REDUCCIÓN DE CARGA COGNITIVA — Ley de Miller (7±2 chunks) ────────
   Los campos financieros (costo, adelanto, transporte) se agrupan con
   un borde izquierdo azul tenue para crear un "chunk" visual coherente.
   Aplica al contenedor que envuelve esos campos: .financial-group
   ─────────────────────────────────────────────────────────────────────── */
.financial-group {
    border-left: 2px solid rgba(37, 99, 235, 0.3);
    padding-left: var(--space-lg);   /* 13px — Fibonacci */
    margin-left: calc(-1 * var(--space-lg));
}

/* ── 3. GUÍA VISUAL DE FLUJO — Barra de progreso sutil ───────────────────
   Una línea de progreso fina arriba del formulario ancla el ojo en el
   inicio y comunica estructura secuencial (reduce ansiedad de tarea).
   Añade class="form-progress" al elemento antes del primer form-row.
   ─────────────────────────────────────────────────────────────────────── */
.form-progress {
    width: 100%;
    height: 3px;   /* --space-xs = 3px Fibonacci */
    background: linear-gradient(
        90deg,
        var(--border-focus)  0%,
        rgba(59, 130, 246, 0.35) 61.8%,   /* Punto áureo 61.8% */
        transparent 100%
    );
    border-radius: 9999px;
    margin-bottom: var(--space-xl);   /* 21px — Fibonacci */
    opacity: 0.7;
}

/* ── 4. EFECTO DE ANCLAJE — Primacy Effect en tipoServicio ───────────────
   El primer campo significativo (tipo de servicio) tiene mayor peso visual:
   borde más prominente y sutil fondo diferenciado → ancla la atención y
   comunica que es el campo categorizador principal del formulario.
   ─────────────────────────────────────────────────────────────────────── */
#tipoServicio {
    border-color: rgba(59, 130, 246, 0.65);   /* Borde azul prominente (vs. --border-color) */
    border-width: 3px;
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.18);
    font-weight: 600;
}

#tipoServicio:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.22);
}