/** * ARCHIVO : registro_styles.css * UBICACIÓN : assets/css/registro_styles.css * * DESCRIPCIÓN : Estilos del formulario multistep de registro. * Extraídos del bloque de registro.php (líneas 682-1018) * para reducir el tamaño del HTML y mejorar caché. * * AUTOR : ERenovar SAS ® * VERSIÓN : 2.0 */ /* ══════════════════════════════════════════════════════════════════════════ TEMA LIGHT — explícito para anular cualquier herencia del sistema Esto garantiza que el formulario sea SIEMPRE claro salvo que el sitio active data-theme="dark" en el body. ══════════════════════════════════════════════════════════════════════════ */ #formulario-registro, #formulario-registro .form-seccion, #formulario-registro .rg-form-col, #formulario-registro .rg-progress-wrap, #formulario-registro .rg-submit-wrap, #formulario-registro .rg-sidebar, #formulario-registro .rg-sidebar-card, #formulario-registro .rg-success { color-scheme: light; } /* ══════════════════════════════════════════════════════════════════════════ LAYOUT BASE ══════════════════════════════════════════════════════════════════════════ */ #formulario-registro { background:#fff; padding:0; } @media(min-width:992px){ #formulario-registro{ background:#f2f4f8; padding:clamp(2rem,4vw,3rem) 0 clamp(2.5rem,5vw,4rem); } } .rg-wrap{ width:100%; max-width:1320px; margin:0 auto; padding:0; } @media(min-width:576px){ .rg-wrap{ padding:0 .4rem; } } @media(min-width:768px){ .rg-wrap{ padding:0 .9rem; } } @media(min-width:992px){ .rg-wrap{ padding:0 1.4rem; } } .row-registro{ --bs-gutter-x:0; --bs-gutter-y:0; } @media(min-width:992px){ .row-registro{ --bs-gutter-x:1.25rem; } } /* ────────────────────────────────────────────────── COLUMNA DEL FORMULARIO Siempre fondo blanco — independiente del OS theme ────────────────────────────────────────────────── */ .rg-form-col{ background:#fff; color:#1a202c; order:1; } @media(min-width:992px){ .rg-form-col{ border-radius:14px; overflow:hidden; box-shadow:0 4px 28px rgba(0,0,0,.09); order:0; } } /* ══════════════════════════════════════════════════════════════════════════ CABECERA DEL FORMULARIO ══════════════════════════════════════════════════════════════════════════ */ .rg-form-header{ background: white; color:#fff; padding:clamp(.85rem,2.5vw,1.1rem) clamp(1rem,3vw,1.5rem); display:flex; align-items:center; gap:.6rem; } /* ══════════════════════════════════════════════════════════════════════════ SECCIONES DEL FORMULARIO ══════════════════════════════════════════════════════════════════════════ */ .form-seccion{ padding:clamp(1rem,3vw,1.5rem) clamp(.9rem,3vw,1.5rem) clamp(.85rem,2.5vw,1.25rem); border-bottom:1px solid #eef0f3; background:#fff; color:#1a202c; } .form-seccion:last-of-type{ border-bottom:none; } .form-seccion-titulo{ font-size:clamp(.9rem,2.5vw,1.02rem); font-weight:700; display:flex; align-items:center; gap:.55rem; margin-bottom:1rem; color:#1a202c; } .form-seccion-titulo .icono{ width:clamp(26px,4vw,30px); height:clamp(26px,4vw,30px); border-radius:7px; background:var(--color-primary,#ff6600); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.78rem; flex-shrink:0; } /* ══════════════════════════════════════════════════════════════════════════ LEYENDA DE CAMPOS ══════════════════════════════════════════════════════════════════════════ */ .leyenda-campos{ display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; font-size:clamp(.71rem,1.8vw,.77rem); color:#555; padding:.55rem clamp(.9rem,3vw,1.5rem); background:#fafbfc; border-bottom:1px solid #eef0f3; margin:0; } /* ══════════════════════════════════════════════════════════════════════════ AVISO DE ADMISIÓN ══════════════════════════════════════════════════════════════════════════ */ .rg-aviso-admision{ display:flex; align-items:flex-start; gap:.6rem; padding:.8rem clamp(.9rem,3vw,1.5rem); background:#fff8f0; border-left:3px solid #ff6600; font-size:clamp(.78rem,2vw,.84rem); line-height:1.5; color:#1a202c; } /* ══════════════════════════════════════════════════════════════════════════ INPUTS — touch-friendly, mínimo 52px, SIEMPRE fondo blanco ══════════════════════════════════════════════════════════════════════════ */ .form-control, .form-select{ width:100%; min-height:52px; font-size:clamp(.88rem,2.3vw,.97rem); padding:.6rem .85rem; border-radius:10px; border:1.5px solid #d1d9e0; transition:border-color .15s,box-shadow .15s; /* Fondo y color explícitos — anulan prefers-color-scheme del navegador */ background:#fff !important; color:#1a202c !important; -webkit-appearance:none; appearance:none; } .form-control:focus, .form-select:focus{ border-color:#ff6600; box-shadow:0 0 0 3px rgba(255,102,0,.15); outline:none; background:#fff !important; color:#1a202c !important; } /* Autofill — Chrome aplica su propio fondo amarillo/azul oscuro */ .form-control:-webkit-autofill, .form-select:-webkit-autofill, .form-control:-webkit-autofill:focus, .form-select:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #fff inset !important; -webkit-text-fill-color: #1a202c !important; caret-color: #1a202c; transition: background-color 5000s ease-in-out 0s; } textarea.form-control{ min-height:88px; resize:vertical; } .form-control.llenado, .form-select.llenado{ border-color:#28a745; } .was-validated .form-control:invalid, .was-validated .form-select:invalid{ border-color:#dc3545; } /* ══════════════════════════════════════════════════════════════════════════ LABELS Y TEXTOS DE AYUDA ══════════════════════════════════════════════════════════════════════════ */ .form-label{ font-weight:600; font-size:clamp(.81rem,2vw,.88rem); margin-bottom:.3rem; color:#2d3748; display:inline-flex; align-items:center; flex-wrap:wrap; gap:.3rem; overflow-wrap:break-word; word-break:break-word; } .form-text{ font-size:clamp(.72rem,1.8vw,.79rem); color:#718096; margin-top:.25rem; line-height:1.4; } .campo-hint{ display:flex; align-items:flex-start; gap:.3rem; font-size:clamp(.7rem,1.7vw,.76rem); color:#718096; margin-top:.3rem; line-height:1.35; } .campo-hint i{ color:#a0aec0; margin-top:1px; flex-shrink:0; } .form-label,.alert,label,.campo-hint,.form-text{ overflow-wrap:break-word; word-break:break-word; hyphens:auto; } .alert p,.alert li,.alert span{ max-width:100%; } /* ══════════════════════════════════════════════════════════════════════════ ÍCONO EN INPUTS ══════════════════════════════════════════════════════════════════════════ */ .input-icon-wrap{ position:relative; } .input-icon-wrap .fi{ position:absolute; top:50%; left:13px; transform:translateY(-50%); color:#a0aec0; font-size:.8rem; pointer-events:none; z-index:2; } .input-icon-wrap input, .input-icon-wrap select{ padding-left:2.25rem; } /* ══════════════════════════════════════════════════════════════════════════ BADGES ══════════════════════════════════════════════════════════════════════════ */ /* Contraste WCAG AA: #c0392b sobre #fff0f0 ≈ 5.6:1 */ .badge-req{ background:#fff0f0; color:#c0392b; font-size:.61rem; font-weight:700; padding:1px 6px; border-radius:20px; border:1px solid #fcc; white-space:nowrap; display:inline-block; } /* Contraste WCAG AA: #1a5c38 sobre #f0fff4 ≈ 5.1:1 */ .badge-opc{ background:#f0fff4; color:#1a5c38; font-size:.61rem; font-weight:700; padding:1px 6px; border-radius:20px; border:1px solid #9ae6b4; white-space:nowrap; display:inline-block; } .badge-req2{ color:#c0392b; } .badge-opc2{ color:#1a5c38; } /* ══════════════════════════════════════════════════════════════════════════ TABLA DE CUOTAS ══════════════════════════════════════════════════════════════════════════ */ .tabla-cuotas-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -1rem; padding:0 1rem; scrollbar-width:thin; scrollbar-color:rgba(0,0,0,.15) transparent; } .tabla-cuotas-wrap::-webkit-scrollbar{ height:4px; } .tabla-cuotas-wrap::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.15); border-radius:2px; } @media(min-width:768px){ .tabla-cuotas-wrap{ margin:0; padding:0; border-radius:8px; box-shadow:0 1px 4px rgba(0,0,0,.07); } } /* Fallback sin min() para Safari iOS < 15 */ .tabla-cuotas-wrap table{ min-width:320px; } .tabla-cuotas-wrap table{ min-width:min(360px,100%); margin-bottom:0; font-size:clamp(.79rem,2vw,.87rem); /* Color de borde explícito — no depende del OS theme */ --bs-table-border-color:#dee2e6; background:#fff; color:#1a202c; } /* ══════════════════════════════════════════════════════════════════════════ TARJETAS DE MÉTODO DE PAGO ══════════════════════════════════════════════════════════════════════════ */ .mp-card{ border:2px solid #e2e8f0; border-radius:12px; padding:.65rem .75rem; background:#fff; color:#1a202c; cursor:pointer; transition:border-color .15s,background .15s; text-align:center; } .mp-card:hover, .mp-card.sel{ border-color:#ff6600; background:#fff8f4; box-shadow:0 2px 10px rgba(255,102,0,.13); } .mp-card .mp-icon{ font-size:1.4rem; } .mp-card .mp-label{ font-size:clamp(.73rem,1.8vw,.82rem); font-weight:600; margin-top:.2rem; display:block; } .mp-detalle{ display:none; margin-top:.5rem; } .mp-detalle.visible{ display:block; } #bloquePromocionPago{ display:none; } /* ══════════════════════════════════════════════════════════════════════════ ZONAS DE UPLOAD — fondo claro siempre ══════════════════════════════════════════════════════════════════════════ */ .upload-grid{ display:grid; gap:clamp(.65rem,2vw,.85rem); grid-template-columns:1fr; } @media(min-width:600px) and (max-width:991px){ .upload-grid{ grid-template-columns:1fr 1fr; } } @media(min-width:992px){ .upload-grid{ grid-template-columns:repeat(3,1fr); } } .upload-zona{ border:2px dashed #c8d0dc; border-radius:12px; padding:clamp(.9rem,2.5vw,1.2rem) clamp(.75rem,2vw,1rem); text-align:center; transition:border-color .18s,background .18s; /* Fondo explícito — blanco siempre */ background:#fafbfc; color:#4a5568; min-height:110px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.3rem; } .upload-zona.drag-over{ border-color:#ff6600; background:#fff3eb; } .upload-zona.has-file{ border-color:#28a745; background:#f0fdf4; } .upload-zona.loading{ pointer-events:none; opacity:.7; } .upload-file-input{ display:none; } .upload-icon{ font-size:clamp(1.4rem,4vw,1.8rem); color:#a0aec0; } .upload-label{ font-size:clamp(.78rem,2vw,.84rem); color:#718096; font-weight:600; } .upload-hint{ font-size:clamp(.68rem,1.6vw,.74rem); color:#a0aec0; } .upload-loading{ display:none; font-size:.78rem; color:#718096; } .upload-zona.loading .upload-loading{ display:flex; align-items:center; gap:.3rem; } .upload-zona.loading .upload-icon, .upload-zona.loading .upload-label, .upload-zona.loading .upload-hint, .upload-zona.loading .upload-btn{ display:none; } .upload-btn{ border:1.5px solid #ff6600; background:transparent; color:#ff6600; border-radius:8px; padding:.35rem .7rem; font-size:clamp(.75rem,1.8vw,.82rem); font-weight:600; cursor:pointer; transition:background .15s,color .15s; min-height:40px; touch-action:manipulation; } .upload-btn:hover{ background:#ff6600; color:#fff; } .upload-btn.secundario{ border-color:#a0aec0; color:#718096; font-size:clamp(.7rem,1.6vw,.76rem); min-height:36px; } .upload-btn.secundario:hover{ background:#a0aec0; color:#fff; } .upload-info-panel{ font-size:clamp(.7rem,1.7vw,.76rem); background:#f8fafc; border-radius:8px; padding:.5rem .75rem; color:#4a5568; line-height:1.5; } .upload-info-panel strong{ display:block; margin-bottom:.2rem; color:#2d3748; } .tag-ok{ color:#276749; font-weight:600; } .tag-no{ color:#c0392b; font-weight:600; } .preview-lista{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.5rem; } .preview-item{ position:relative; width:clamp(60px,10vw,72px); height:clamp(60px,10vw,72px); border-radius:8px; overflow:visible; border:1.5px solid #e2e8f0; background:#fff; display:flex; align-items:center; justify-content:center; } .preview-item img{ width:100%; height:100%; object-fit:cover; border-radius:7px; display:block; } .prev-doc{ display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; height:100%; } .prev-doc i{ font-size:clamp(1rem,4vw,1.3rem); color:#e03000; } .prev-nombre{ font-size:.55rem; padding:2px 4px; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; } .prev-quitar{ position:absolute; top:2px; right:2px; background:rgba(180,0,0,.82); color:#fff; border:none; border-radius:50%; width:20px; height:20px; font-size:.6rem; cursor:pointer; display:flex; align-items:center; justify-content:center; touch-action:manipulation; } /* ══════════════════════════════════════════════════════════════════════════ AUTORIZACIONES ══════════════════════════════════════════════════════════════════════════ */ .rg-auth-lista{ border-top:1px solid #eef0f3; } .rg-check-row{ display:flex; align-items:flex-start; gap:.8rem; padding:clamp(.75rem,2vw,.9rem) clamp(.9rem,3vw,1rem); border-bottom:1px solid #eef0f3; transition:background .12s; } .rg-check-row:last-child{ border-bottom:none; } .rg-check-row:hover{ background:#fafbfc; } .rg-check-row.req-row{ background:#fffdf9; } .rg-check-row.req-row:hover{ background:#fff8f0; } .rg-check-row.opc-row{ background:#f9fafb; } .rg-check-row.danger-row{ background:#fff5f5; } /* Checkbox táctil — mínimo 22px (WCAG 2.5.5) */ .rg-check-row .form-check-input{ flex-shrink:0; margin-top:.15rem; width:22px; height:22px; cursor:pointer; border:2px solid #c8d0dc; border-radius:5px; } .rg-check-row .form-check-input:checked{ background-color:#ff6600; border-color:#ff6600; } .rg-check-row .form-check-input[required]:checked{ background-color:#198754; border-color:#198754; } .rg-check-row .form-check-input:focus{ box-shadow:0 0 0 3px rgba(255,102,0,.2); border-color:#ff6600; } .rg-check-label{ font-size:clamp(.82rem,2.1vw,.9rem); line-height:1.5; color:#2d3748; } .rg-auth-sep{ padding:.45rem clamp(.9rem,3vw,1rem); background:#f5f6f8; font-size:clamp(.72rem,1.7vw,.77rem); font-weight:700; color:#718096; display:flex; align-items:center; gap:.4rem; border-bottom:1px solid #eef0f3; } /* ══════════════════════════════════════════════════════════════════════════ BLOQUES INTERNOS ══════════════════════════════════════════════════════════════════════════ */ .rg-inner-block{ background:#f9fafb; border-radius:10px; padding:clamp(.8rem,2.5vw,.9rem) clamp(.9rem,3vw,1rem); margin-top:.75rem; color:#2d3748; } .rg-pronto-bloque{ background:linear-gradient(135deg,#f0fdf4,#ecfdf5); border-left:3px solid #28a745; border-radius:0 10px 10px 0; padding:1rem; margin-top:.75rem; } .rg-precio-tachado{ text-decoration:line-through; font-size:.88rem; color:#718096; } .rg-precio-nuevo{ font-size:clamp(1.4rem,4vw,1.9rem); font-weight:800; color:#276749; line-height:1.1; } .rg-ahorro{ font-size:clamp(.78rem,2vw,.84rem); color:#276749; font-weight:600; } /* ══════════════════════════════════════════════════════════════════════════ BOTÓN ENVIAR — sticky, safe-area iPhone notch ══════════════════════════════════════════════════════════════════════════ */ .rg-submit-wrap{ padding:clamp(.85rem,2.5vw,1rem) clamp(.9rem,3vw,1rem); padding-bottom:max(clamp(.85rem,2.5vw,1.2rem), env(safe-area-inset-bottom)); background:#fff; bottom:0; z-index:20; border-top:1px solid #eef0f3; box-shadow:0 -3px 14px rgba(0,0,0,.06); } @media(min-width:992px){ .rg-submit-wrap{ position:static; box-shadow:none; border-top:none; padding:1.25rem 1.5rem 1.5rem; } } #btnEnviar{ width:100%; min-height:clamp(52px,7vw,56px); font-size:clamp(.93rem,2.5vw,1.05rem); font-weight:700; border-radius:12px; letter-spacing:.01em; background:#ff6600; border-color:#ff6600; box-shadow:0 4px 18px rgba(255,102,0,.28); transition:background .15s,box-shadow .15s; touch-action:manipulation; } #btnEnviar:hover{ background:#e55c00; border-color:#e55c00; box-shadow:0 6px 24px rgba(255,102,0,.36); } #btnEnviar:disabled{ opacity:.65; } /* ══════════════════════════════════════════════════════════════════════════ SIDEBAR ══════════════════════════════════════════════════════════════════════════ */ .rg-sidebar{ order:2; background:#fff; border-top:2px solid #eef0f3; } @media(min-width:992px){ .rg-sidebar{ order:0; background:transparent; border-top:none; } } .rg-sidebar-card{ background:#fff; border-bottom:1px solid #eef0f3; padding:1rem; color:#1a202c; } .rg-sidebar-card:last-child{ border-bottom:none; } @media(min-width:992px){ .rg-sidebar-card{ border-radius:12px; border:none; box-shadow:0 2px 12px rgba(0,0,0,.07); margin-bottom:.85rem; padding:0; overflow:hidden; } .rg-sidebar-card:last-child{ margin-bottom:0; } } .rg-sidebar-hd{ display:flex; align-items:center; gap:.5rem; font-weight:700; font-size:clamp(.86rem,2.2vw,.94rem); padding-bottom:.6rem; margin-bottom:.75rem; border-bottom:2px solid rgba(255,102,0,.2); color:#1a202c; } @media(min-width:992px){ .rg-sidebar-hd{ padding:.85rem 1rem .8rem; margin-bottom:0; border-bottom:1px solid #eef0f3; } } .rg-sidebar-body{ padding:0; font-size:clamp(.82rem,2vw,.88rem); color:#2d3748; } @media(min-width:992px){ .rg-sidebar-body{ padding:.7rem 1rem .9rem; } } /* ══════════════════════════════════════════════════════════════════════════ HERO ══════════════════════════════════════════════════════════════════════════ */ .rg-hero{ position:relative; min-height:clamp(36vh,55vw,65vh); display:flex; align-items:center; padding:clamp(4.5rem,12vw,8rem) 0 clamp(2.5rem,5vw,4.5rem); overflow:hidden; background-color:#0a1c3c; } .rg-hero::before{ content:''; position:absolute; bottom:0; left:0; right:0; height:60px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60'%3E%3Cpath fill='rgba(255,255,255,0.05)' d='M0,30L120,38C240,45,480,60,720,55C960,50,1200,30,1320,20L1440,10L1440,60L0,60Z'/%3E%3C/svg%3E") no-repeat bottom/cover; pointer-events:none; z-index:1; } @media(max-width:575px){ .rg-hero{ padding:clamp(4rem,18vw,5.5rem) 0 2rem; } } @media(max-width:575px) and (orientation:landscape){ .rg-hero{ min-height:auto; padding:clamp(3.5rem,8vh,5rem) 0 2rem; } } .stat-badge--urgente{ background:rgba(255,80,0,.22)!important; border-color:rgba(255,100,0,.45)!important; } .stat-badge--urgente .stat-badge-icon{ color:#ff6b35; } /* ══════════════════════════════════════════════════════════════════════════ PANTALLA DE ÉXITO ══════════════════════════════════════════════════════════════════════════ */ .rg-success{ padding:clamp(2rem,7vw,3.5rem) 1.25rem; text-align:center; background:#fff; color:#1a202c; } @media(min-width:992px){ .rg-success{ border-radius:14px; box-shadow:0 4px 24px rgba(0,0,0,.09); padding:3rem 2.5rem; } } /* ══════════════════════════════════════════════════════════════════════════ CHECKBOXES GENERALES ══════════════════════════════════════════════════════════════════════════ */ .form-check{ display:flex; align-items:flex-start; gap:.55rem; } .form-check .form-check-input{ flex-shrink:0; margin-top:.15rem; } .form-check-input:focus{ box-shadow:0 0 0 3px rgba(255,102,0,.2); border-color:#ff6600; } .form-check-label{ font-size:clamp(.84rem,2.1vw,.91rem); line-height:1.5; overflow-wrap:break-word; word-break:break-word; hyphens:auto; color:#2d3748; } /* ══════════════════════════════════════════════════════════════════════════ ANIMACIONES ══════════════════════════════════════════════════════════════════════════ */ .reveal-block{ animation:rgSlide .25s ease-out; } @keyframes rgSlide{ from{ opacity:0; transform:translateY(-5px); } to{ opacity:1; transform:translateY(0); } } @media(prefers-reduced-motion:reduce){ .reveal-block{ animation:none; } } /* ══════════════════════════════════════════════════════════════════════════ ACORDEÓN ══════════════════════════════════════════════════════════════════════════ */ .accordion-button{ white-space:normal; line-height:1.4; font-size:clamp(.83rem,2.1vw,.91rem); align-items:flex-start; gap:.45em; /* Fondo explícito — Bootstrap lo hace blanco pero prefers-color-scheme lo rompe */ background:#fff !important; color:#1a202c !important; } .accordion-button:not(.collapsed){ background:#fff8f4 !important; color:#ff6600 !important; box-shadow:inset 0 -1px 0 rgba(255,102,0,.2); } .accordion-body{ padding:.85rem 1rem; background:#fff; color:#2d3748; } /* Pasos del acordeón */ .paso-item{ display:flex; gap:.6rem; align-items:flex-start; margin-bottom:.55rem; } .paso-num{ min-width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:700; flex-shrink:0; color:#fff; } .paso-num.p-azul{ background:#0d6efd; } .paso-num.p-verde{ background:#198754; } .paso-num.p-naranja{ background:#ff6600; } .paso-num.p-warn{ background:#ffc107; color:#333; } /* ══════════════════════════════════════════════════════════════════════════ MISCELÁNEOS ══════════════════════════════════════════════════════════════════════════ */ .form-switch .form-check-input{ width:2.5em; height:1.4em; cursor:pointer; min-height:auto; } .rg-error-alert{ border-radius:0; margin-bottom:0; } @media(min-width:992px){ .rg-error-alert{ border-radius:8px; margin-bottom:1rem; } } /* Selector de cuotas — área táctil WCAG mínimo 44px */ .cuota-opcion{ min-height:44px !important; min-width:44px; font-size:clamp(.82rem,2vw,.9rem) !important; padding:.4rem .75rem !important; touch-action:manipulation; background:#fff; color:#1a202c; border:2px solid #e2e8f0; border-radius:8px; } .cuota-opcion.sel, .cuota-opcion:hover{ border-color:#ff6600; background:#fff8f4; color:#ff6600; } /* ══════════════════════════════════════════════════════════════════════════ BARRA DE PROGRESO DE PASOS — siempre blanca ══════════════════════════════════════════════════════════════════════════ */ .rg-progress-wrap{ position:sticky; top:0; z-index:30; background:#fff; color:#1a202c; border-bottom:1px solid #eef0f3; padding:.4rem clamp(.75rem,3vw,1.25rem); box-shadow:0 2px 8px rgba(0,0,0,.05); overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .rg-progress-wrap::-webkit-scrollbar{ display:none; } .rg-steps{ display:flex; gap:.15rem; min-width:max-content; align-items:center; } .rg-step{ display:flex; flex-direction:column; align-items:center; gap:.1rem; padding:.2rem .35rem; border-radius:6px; cursor:pointer; transition:background .15s; min-width:40px; } .rg-step:hover{ background:#fff8f4; } .rg-step.activo{ background:#fff3eb; } .rg-step-num{ width:clamp(22px,4vw,26px); height:clamp(22px,4vw,26px); border-radius:50%; border:2px solid #d1d9e0; display:flex; align-items:center; justify-content:center; font-size:.65rem; font-weight:700; color:#718096; transition:all .2s; flex-shrink:0; } .rg-step.activo .rg-step-num{ background:#ff6600; border-color:#ff6600; color:#fff; } .rg-step.completado .rg-step-num{ background:#28a745; border-color:#28a745; color:#fff; } .rg-step-lbl{ display:none; font-size:.55rem; color:#a0aec0; font-weight:600; text-transform:uppercase; letter-spacing:.3px; white-space:nowrap; max-width:52px; overflow:hidden; text-overflow:ellipsis; } @media(min-width:576px){ .rg-step-lbl{ display:block; } } .rg-step.activo .rg-step-lbl{ color:#ff6600; } .rg-step.completado .rg-step-lbl{ color:#28a745; } .rg-step-sep{ width:clamp(12px,2vw,20px); height:2px; background:#eef0f3; border-radius:1px; flex-shrink:0; margin-bottom:clamp(10px,2vw,13px); } .rg-step-sep.completado{ background:#28a745; } /* ══════════════════════════════════════════════════════════════════════════ RESPONSIVE EXTREMOS ══════════════════════════════════════════════════════════════════════════ */ @media(min-width:1600px){ .rg-wrap{ max-width:1480px; } .form-control,.form-select{ min-height:56px; font-size:1rem; } #btnEnviar{ min-height:60px; font-size:1.08rem; } .upload-btn{ min-height:48px; font-size:.92rem; } .preview-item{ width:clamp(80px,6vw,100px); } .rg-step-lbl{ max-width:64px; font-size:.6rem; } } @media(min-width:768px) and (max-width:1023px) and (orientation:landscape){ .rg-hero{ min-height:auto; padding:3.5rem 0 2rem; } .upload-grid{ grid-template-columns:repeat(3,1fr); } } /* ══════════════════════════════════════════════════════════════════════════ TEMA OSCURO DEL SITIO — solo cuando el SITIO activa [data-theme="dark"] NO depende del OS. Este bloque reemplaza @media(prefers-color-scheme:dark) que era la causa del bug de fondo oscuro con textos oscuros. ══════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] #formulario-registro { background:#1a202c; } [data-theme="dark"] .rg-form-col, [data-theme="dark"] .form-seccion, [data-theme="dark"] .rg-progress-wrap, [data-theme="dark"] .rg-submit-wrap { background:#16213e; color:#e0e0f0; } [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background:#1e293b !important; border-color:#3a4a6b !important; color:#e0e0f0 !important; } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { border-color:#ff6600 !important; background:#1e293b !important; color:#e0e0f0 !important; } [data-theme="dark"] .form-control:-webkit-autofill, [data-theme="dark"] .form-select:-webkit-autofill { -webkit-box-shadow:0 0 0 1000px #1e293b inset !important; -webkit-text-fill-color:#e0e0f0 !important; } [data-theme="dark"] .form-label { color:#c8d0e0; } [data-theme="dark"] .campo-hint { color:#8090a8; } [data-theme="dark"] .form-text { color:#8090a8; } [data-theme="dark"] .rg-aviso-admision { background:#2a1800; color:#f0c080; } [data-theme="dark"] .leyenda-campos { background:#1a1a2e; color:#8090a8; } [data-theme="dark"] .rg-step:hover { background:#2a1a0a; } [data-theme="dark"] .rg-step.activo { background:#2a1a0a; } [data-theme="dark"] .rg-step-num { border-color:#4a5568; color:#a0aec0; } [data-theme="dark"] .upload-zona { background:#1e2d3d; border-color:#3a4a6b; color:#a0aec0; } [data-theme="dark"] .upload-zona.has-file { background:#0d2a1a; border-color:#28a745; } [data-theme="dark"] .upload-label { color:#a0aec0; } [data-theme="dark"] .upload-hint { color:#6b7a8d; } [data-theme="dark"] .rg-check-row { border-color:#2d3748; } [data-theme="dark"] .rg-check-row:hover { background:#1e2d3d; } [data-theme="dark"] .rg-check-row.req-row { background:#1a1200; } [data-theme="dark"] .rg-check-row.opc-row { background:#0d1a0d; } [data-theme="dark"] .rg-check-label { color:#c8d0e0; } [data-theme="dark"] .rg-auth-sep { background:#1a202c; color:#718096; border-color:#2d3748; } [data-theme="dark"] .rg-sidebar-card { background:#16213e; border-color:#2d3748; color:#e0e0f0; } [data-theme="dark"] .rg-sidebar-hd { color:#e0e0f0; border-color:rgba(255,102,0,.3); } [data-theme="dark"] .rg-sidebar-body { color:#c8d0e0; } [data-theme="dark"] .mp-card { background:#1e293b; border-color:#3a4a6b; color:#e0e0f0; } [data-theme="dark"] .mp-card:hover, [data-theme="dark"] .mp-card.sel { background:#2a1800; border-color:#ff6600; } [data-theme="dark"] .accordion-button { background:#16213e !important; color:#e0e0f0 !important; } [data-theme="dark"] .accordion-button:not(.collapsed) { background:#2a1800 !important; color:#ff8844 !important; } [data-theme="dark"] .accordion-body { background:#16213e; color:#c8d0e0; } [data-theme="dark"] .tabla-cuotas-wrap table { --bs-table-border-color:#3a4a6b; background:#1e293b; color:#e0e0f0; } [data-theme="dark"] .rg-inner-block { background:#1e293b; color:#c8d0e0; } [data-theme="dark"] .rg-success { background:#1a202c; color:#e0e0f0; } /* ══════════════════════════════════════════════════════════════════════════ FIN — registro_styles.css v2.0 ══════════════════════════════════════════════════════════════════════════ */