@font-face {
            font-family: 'Recoleta';
            src: url('./Font/Recoleta SemiBold.woff2') format('woff2'),
                 url('./Font/Recoleta SemiBold.otf') format('opentype');
            font-weight: 600;
            font-style: normal;
            font-display: swap;
        }

        :root {
            /* Principales */
            --verde-bosque: #3D2C3A;
            --verde-profundo: #3D2C3A;
            --lavanda-humo: #E4AB9B;
            --terracota: #E4AB9B;
            
            /* Fondos y Superficies */
            --marfil: #F4F0EB;
            --blanco-superficie: #FCFAF8;
            --gris-claro: #E0D8DB;
            
            /* Texto */
            --carbon: #3D2C3A;
            --gris-calido: #7A6676;
            
            /* Estados */
            --exito: #5D8A6A;
            --advertencia: #D9A441;
            --error: #C85B5B;
            --info: #6E88A8;
            
            --font-titulos: 'DM Sans', sans-serif;
            --font-interfaz: 'DM Sans', sans-serif;
            --shadow-suave: none;
            --transition: all 0.3s ease;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { background-color: var(--marfil); color: var(--carbon); font-family: var(--font-interfaz); -webkit-font-smoothing: antialiased; }
        .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }

        header { background-color: var(--blanco-superficie); padding: 16px 0; border-bottom: 1px solid var(--gris-claro); }
        .nav-wrapper { display: flex; justify-content: space-between; align-items: center; }
        .logo-area { display: flex; align-items: center; gap: 12px; text-decoration: none; }
        .logo-img { height: 32px; width: auto; }
        .logo-text { font-family: var(--font-titulos); font-size: 22px; color: var(--verde-bosque); }
        .btn-back { color: var(--verde-oliva); text-decoration: none; font-size: 14px; font-weight: 600; transition: var(--transition); }
        .btn-back:hover { color: var(--terracota); }

        .register-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; padding: 40px 0 80px 0; align-items: start; }
        .form-card { background-color: var(--blanco-superficie); border-radius: 24px; padding: 40px; box-shadow: none; border: 1px solid var(--gris-claro); border: 1px solid rgba(42, 42, 42, 0.02); }
        .form-card h1 { font-family: var(--font-titulos); font-size: 32px; color: var(--verde-bosque); margin-bottom: 8px; }
        .form-card .intro-p { font-size: 14px; opacity: 0.7; margin-bottom: 32px; line-height: 1.5; }
        
        .form-section { margin-bottom: 36px; border-bottom: 1px solid var(--marfil); padding-bottom: 32px; }
        .form-section:last-of-type { border: none; padding-bottom: 0; margin-bottom: 24px; }
        .form-section h3 { font-family: var(--font-titulos); font-size: 20px; color: var(--verde-bosque); margin-bottom: 20px; }

        .form-group { margin-bottom: 20px; }
        .form-group label { display: block; font-size: 12px; font-weight: 700; margin-bottom: 8px; color: var(--carbon); opacity: 0.8; text-transform: uppercase; letter-spacing: 0.03em; }
        .form-control { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--gris-claro); background-color: var(--marfil); font-family: var(--font-interfaz); font-size: 14px; color: var(--carbon); outline: none; transition: var(--transition); }
        .form-control:focus { border-color: var(--verde-oliva); background-color: var(--blanco-superficie); box-shadow: 0 0 0 3px rgba(107, 138, 122, 0.1); }
        .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

        .upload-grid { display: flex; flex-direction: column; gap: 14px; }
        .upload-slot { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; background-color: var(--marfil); border: 1px dashed var(--verde-oliva); border-radius: 12px; transition: var(--transition); }
        .upload-slot.uploaded { background-color: rgba(72, 105, 92, 0.05); border-style: solid; border-color: var(--verde-bosque); }
        .upload-info h5 { font-size: 13px; font-weight: 600; color: var(--carbon); }
        .upload-info p { font-size: 11px; opacity: 0.6; margin-top: 2px; }
        .upload-info p.ok { color: var(--verde-bosque); opacity: 1; font-weight: 600; }
        .btn-upload { background-color: var(--blanco-superficie); border: 1px solid var(--gris-claro); padding: 8px 16px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; color: var(--verde-bosque); transition: var(--transition); font-family: var(--font-interfaz); }
        .btn-upload:hover { border-color: var(--verde-oliva); }
        /* Input file real escondido */
        .real-file-input { display: none; }

        .availability-hint { font-size: 12px; opacity: 0.7; margin-bottom: 14px; line-height: 1.4; }
        .grid-days { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
        .day-chip { background-color: var(--marfil); border: 1px solid var(--gris-claro); padding: 12px 6px; border-radius: 10px; font-size: 12px; font-weight: 600; text-align: center; cursor: pointer; transition: var(--transition); user-select: none; }
        .day-chip:hover { border-color: var(--verde-bosque); }
        .day-chip.selected { background-color: var(--verde-bosque); color: var(--marfil); border-color: var(--verde-bosque); }

        /* Chips de Especialidades (Accesibilidad) */
        .esp-chip-wrapper { display: inline-block; }
        .esp-checkbox { display: none; }
        .esp-label-chip {
            display: flex; align-items: center; justify-content: center;
            background-color: var(--blanco-superficie); border: 1px solid var(--gris-claro);
            padding: 14px 18px; border-radius: 12px; font-size: 13px; font-weight: 600;
            color: var(--carbon); cursor: pointer; transition: var(--transition);
            text-align: center; user-select: none; line-height: 1.3;
        }
        .esp-label-chip:hover { border-color: var(--verde-bosque); transform: translateY(-1px); }
        .esp-checkbox:checked + .esp-label-chip {
            background-color: var(--verde-bosque); color: white; border-color: var(--verde-bosque);
        }

        .btn-submit-registration { background-color: var(--verde-bosque); color: var(--marfil); border: none; width: 100%; padding: 16px; border-radius: 12px; font-family: var(--font-interfaz); font-size: 15px; font-weight: 600; cursor: pointer; transition: var(--transition); }
        .btn-submit-registration:hover { background-color: var(--verde-profundo); }
        .btn-submit-registration:disabled { opacity: 0.6; cursor: not-allowed; }

        .info-sidebar { background-color: var(--verde-profundo); color: var(--marfil); border-radius: 24px; padding: 40px; position: sticky; top: 40px; }
        .info-sidebar h2 { font-family: var(--font-titulos); font-size: 28px; margin-bottom: 16px; color: var(--marfil); }
        .info-sidebar p { font-size: 14px; line-height: 1.6; opacity: 0.8; margin-bottom: 32px; }
        .benefit-item { display: flex; gap: 16px; margin-bottom: 24px; }
        .benefit-icon { font-size: 20px; color: var(--terracota); line-height: 1; }
        .benefit-text h4 { font-family: var(--font-interfaz); font-size: 15px; font-weight: 600; margin-bottom: 4px; }
        .benefit-text p { font-size: 13px; opacity: 0.7; line-height: 1.5; margin-bottom: 0; }

        .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(42, 42, 42, 0.4); backdrop-filter: blur(4px); display: none; justify-content: center; align-items: center; z-index: 2000; }
        .modal-card { background: var(--blanco-superficie); padding: 40px; border-radius: 24px; max-width: 420px; width: 100%; text-align: center; box-shadow: none; border: 1px solid var(--gris-claro); border: 1px solid rgba(42, 42, 42, 0.02); transform: scale(0.9); transition: var(--transition); }
        .modal-overlay.open { display: flex; }
        .modal-overlay.open .modal-card { transform: scale(1); }
        .modal-icon { width: 56px; height: 56px; background: rgba(72, 105, 92, 0.1); color: var(--verde-bosque); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: bold; margin: 0 auto 20px auto; transition: var(--transition); }
        .modal-icon.warning { background: rgba(199, 119, 82, 0.1); color: var(--terracota); }
        .modal-card h3 { font-family: var(--font-titulos); font-size: 24px; color: var(--verde-bosque); margin-bottom: 12px; }
        .modal-card p { font-size: 14px; opacity: 0.8; line-height: 1.6; margin-bottom: 28px; }

        .cropper-view-box, .cropper-face { border-radius: 16px; }

        @media (max-width: 968px) {
            .register-layout { grid-template-columns: 1fr; gap: 32px; }
            .form-row { grid-template-columns: 1fr; gap: 0; }
            .info-sidebar { position: relative; top: 0; }
        }