/* ========================================================== JUVENTUD EMPRENDE DIFERENTE — Sistema visual Azul institucional · Verde emprendimiento · Amarillo señal ========================================================== */ /* Las tipografías se cargan desde el de cada página (más rápido, en paralelo) con font-display:optional — ver assets/css/fuentes.css y el comentario en cada .html. Si algún día falta ese , el sitio sigue viéndose bien con las tipografías de reserva de abajo. */ :root{ --azul:#0A3D72; --azul-oscuro:#062B52; --azul-tinta:#12233A; --verde:#00A651; --verde-oscuro:#008442; --amarillo:#F5C518; --papel:#F4F7FB; --blanco:#FFFFFF; --linea:#DFE7F1; --texto:#12233A; --suave:#5C7089; --rojo:#D6323F; --naranja:#E08600; --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:28px; --sombra:0 1px 2px rgba(10,61,114,.06), 0 8px 24px rgba(10,61,114,.07); --sombra-alta:0 18px 50px rgba(10,61,114,.16); --display:'Bricolage Grotesque', system-ui, sans-serif; --cuerpo:'Inter Tight', system-ui, -apple-system, sans-serif; --mono:'JetBrains Mono', ui-monospace, monospace; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--papel); color:var(--texto); font-family:var(--cuerpo); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; } img{max-width:100%; display:block} a{color:var(--azul); text-underline-offset:3px} h1,h2,h3,h4{font-family:var(--display); font-weight:800; line-height:1.08; margin:0; letter-spacing:-.02em} h1{font-size:clamp(2rem,5vw,3.4rem)} h2{font-size:clamp(1.5rem,3vw,2.2rem)} h3{font-size:1.15rem} p{margin:0 0 1rem} :focus-visible{outline:3px solid var(--amarillo); outline-offset:2px; border-radius:4px} .contenedor{width:min(1240px,92vw); margin-inline:auto} .estrecho{width:min(760px,92vw); margin-inline:auto} .oculto{display:none !important} .solo-lectura-pantalla{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} /* ---------- Cabecera ---------- */ .cabecera{ position:sticky; top:0; z-index:40; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--linea); } .cabecera-fila{display:flex; align-items:center; gap:1.2rem; padding:.7rem 0} .marca{display:flex; align-items:center; gap:.7rem; text-decoration:none; color:inherit} .marca img{height:80px; width:auto} .marca-texto{display:flex; flex-direction:column; line-height:1.05} .marca-texto b{font-family:var(--display); font-size:1.02rem; color:var(--azul)} .marca-texto span{font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--verde); font-weight:700} .nav{margin-left:auto; display:flex; align-items:center; gap:.35rem; flex-wrap:wrap} .nav a{ text-decoration:none; color:var(--azul-tinta); font-weight:600; font-size:.93rem; padding:.5rem .8rem; border-radius:999px; } .nav a:hover{background:#EAF1FA; color:var(--azul)} .nav a.activo{background:var(--azul); color:#fff} /* ---------- Botones ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-family:var(--cuerpo); font-weight:700; font-size:.94rem; letter-spacing:.01em; padding:.72rem 1.25rem; border-radius:999px; border:1.5px solid transparent; cursor:pointer; text-decoration:none; transition:transform .12s ease, box-shadow .16s ease, background .16s ease; touch-action:manipulation; /* evita el retraso de ~300ms de Safari/Chrome móvil que espera a ver si el toque es parte de un doble-tap para hacer zoom */ } .btn:hover{transform:translateY(-1px)} .btn:active{transform:translateY(0)} .btn:disabled{opacity:.55; cursor:not-allowed; transform:none} .btn-primario{background:var(--azul); color:#fff; box-shadow:0 6px 18px rgba(10,61,114,.24)} .btn-primario:hover{background:#0d4a8a} .btn-verde{background:var(--verde); color:#fff; box-shadow:0 6px 18px rgba(0,166,81,.26)} .btn-verde:hover{background:var(--verde-oscuro)} .btn-amarillo{background:var(--amarillo); color:#3B2E00} .btn-linea{background:#fff; color:var(--azul); border-color:var(--linea)} .btn-linea:hover{border-color:var(--azul)} .btn-peligro{background:#fff; color:var(--rojo); border-color:#F3C9CC} .btn-peligro:hover{background:#FDF2F3} .btn-bloque{width:100%} .btn-sm{padding:.62rem .9rem; font-size:.82rem} /* alto real ≈44px: mínimo recomendado para tocar con el dedo */ /* ---------- Portada ---------- */ .portada{position:relative; overflow:hidden; background:var(--azul); color:#fff; padding:4.5rem 0 5.5rem} .portada::after{ content:''; position:absolute; right:-14%; top:-32%; width:640px; height:640px; border-radius:50%; border:56px solid var(--amarillo); opacity:.16; } .portada .contenedor{position:relative; z-index:2} .etiqueta-portada{ display:inline-flex; align-items:center; gap:.5rem; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28); color:#fff; padding:.35rem .9rem; border-radius:999px; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; margin-bottom:1.2rem; } .portada h1{max-width:15ch} .portada h1 em{font-style:normal; color:var(--amarillo)} .portada p{max-width:56ch; color:#D6E4F4; font-size:1.08rem; margin-top:1rem} .acciones-portada{display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.8rem} .cifras{display:flex; gap:2.4rem; margin-top:3rem; flex-wrap:wrap} .cifra b{display:block; font-family:var(--display); font-size:2.1rem; color:var(--amarillo); line-height:1} .cifra span{font-size:.82rem; color:#BFD3EA; letter-spacing:.06em; text-transform:uppercase} /* ---------- Patrocinadores (portada) ---------- */ .patrocinadores-portada{ position:absolute; right:0; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; align-items:center; gap:1rem; max-width:340px; } .patrocinadores-etiqueta{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:#BFD3EA; text-align:center; } .patrocinadores-logos{display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap; justify-content:center} .patrocinadores-logos img{ height:96px; width:auto; } @media (max-width:1080px){ /* No cabe al lado del texto sin encimarse: pasa a flujo normal, debajo de las cifras, en vez de perderse en pantallas angostas. */ .patrocinadores-portada{ position:static; transform:none; margin-top:2.6rem; max-width:none; align-items:flex-start; } .patrocinadores-etiqueta{text-align:left} .patrocinadores-logos{justify-content:flex-start} } /* Arco: firma visual tomada del logotipo */ .arco{display:block; width:120px; height:22px; margin-bottom:1rem} .arco path{fill:none; stroke:var(--amarillo); stroke-width:7; stroke-linecap:round} /* ---------- Secciones ---------- */ .seccion{padding:3.4rem 0} .encabezado-seccion{margin-bottom:1.8rem} .encabezado-seccion p{color:var(--suave); max-width:62ch; margin:.4rem 0 0} /* ---------- Tarjetas ---------- */ .rejilla{display:grid; gap:1.2rem} .rejilla-3{grid-template-columns:repeat(auto-fill,minmax(310px,1fr))} .rejilla-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} .tarjeta{ background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r-lg); box-shadow:var(--sombra); padding:1.4rem; } .tarjeta-curso{display:flex; flex-direction:column; position:relative; overflow:hidden; padding-top:1.6rem} .tarjeta-curso::before{content:''; position:absolute; inset:0 0 auto 0; height:6px; background:var(--barra,var(--azul))} .tarjeta-curso h3{font-size:1.22rem; margin:.55rem 0 .5rem} .tarjeta-curso .resumen{color:var(--suave); font-size:.93rem; flex:1} .fila-tarjeta{display:flex; align-items:center; justify-content:space-between; gap:.6rem} .meta{display:flex; flex-direction:column; gap:.55rem; margin:1rem 0; font-size:.88rem; color:var(--azul-tinta)} .meta div{display:flex; gap:.55rem; align-items:flex-start} .meta svg{flex:none; margin-top:2px} .id-curso{font-family:var(--mono); font-size:.74rem; color:var(--suave)} .insignia{ display:inline-flex; align-items:center; gap:.35rem; font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:.28rem .65rem; border-radius:999px; } .insignia-activa{background:#E3F7EC; color:var(--verde-oscuro)} .insignia-inactiva{background:#FDEEEF; color:var(--rojo)} .insignia-neutra{background:#EEF3F9; color:var(--suave)} .insignia-amarilla{background:#FDF3D0; color:#7A5B00} .contador{ font-family:var(--mono); font-weight:600; background:#EAF1FA; color:var(--azul); padding:.2rem .7rem; border-radius:999px; font-size:.9rem; } .chip{ display:inline-flex; align-items:center; gap:.4rem; background:#F3F6FB; border:1px solid var(--linea); border-radius:999px; padding:.3rem .7rem; font-size:.82rem; color:var(--azul-tinta); margin:0 .35rem .35rem 0; } .barra-cupos{height:7px; background:#EAF1FA; border-radius:999px; overflow:hidden; margin-top:.4rem} .barra-cupos i{display:block; height:100%; background:var(--verde); border-radius:999px} /* ---------- Formularios ---------- */ .panel-formulario{background:#fff; border:1px solid var(--linea); border-radius:var(--r-xl); box-shadow:var(--sombra); padding:1.8rem} .paso{border-top:1px solid var(--linea); padding-top:1.5rem; margin-top:1.5rem} /* Mismas secciones numeradas del formulario de inscripción, pero para mostrar datos ya guardados (solo lectura) en vez de pedirlos. */ .dato{font-size:.95rem; color:var(--texto); padding:.2rem 0; min-height:1.4em} .dato.vacio{color:var(--suave); font-style:italic} .enlace-detalle{ background:none; border:0; padding:0; font:inherit; color:var(--azul); font-weight:700; cursor:pointer; text-align:left; touch-action:manipulation; } .enlace-detalle:hover{text-decoration:underline} .paso:first-of-type{border-top:0; padding-top:0; margin-top:0} .titulo-paso{display:flex; align-items:center; gap:.7rem; margin-bottom:1.1rem} .numero-paso{ width:30px; height:30px; flex:none; border-radius:50%; background:var(--azul); color:#fff; display:grid; place-items:center; font-family:var(--mono); font-size:.85rem; font-weight:600; } .titulo-paso h3{font-size:1.05rem} .campos{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(230px,1fr))} .campo{display:flex; flex-direction:column; gap:.35rem} .campo.ancho{grid-column:1/-1} label{font-size:.85rem; font-weight:600; color:var(--azul-tinta)} label .req{color:var(--rojo)} input,select,textarea{ font-family:var(--cuerpo); font-size:.97rem; color:var(--texto); background:#fff; border:1.5px solid var(--linea); border-radius:var(--r-md); padding:.72rem .85rem; width:100%; transition:border-color .15s ease, box-shadow .15s ease; } input[type=file]{padding:.55rem; background:#FAFCFE} textarea{min-height:96px; resize:vertical} input:focus,select:focus,textarea:focus{border-color:var(--azul); box-shadow:0 0 0 4px rgba(10,61,114,.1); outline:none} input.valido{border-color:var(--verde); box-shadow:0 0 0 4px rgba(0,166,81,.1)} input.invalido{border-color:var(--rojo); box-shadow:0 0 0 4px rgba(214,50,63,.1)} .pista{font-size:.79rem; color:var(--suave)} .error{font-size:.82rem; color:var(--rojo); font-weight:600} .exito{font-size:.82rem; color:var(--verde-oscuro); font-weight:600} .mono{font-family:var(--mono); letter-spacing:.06em} .casilla{display:flex; gap:.65rem; align-items:flex-start; font-size:.88rem; color:var(--azul-tinta)} .casilla input{width:18px; height:18px; flex:none; margin-top:2px} /* Botón de "mostrar contraseña" */ .campo-clave{position:relative} .campo-clave input{padding-right:2.9rem} .clave-alternar{ position:absolute; right:.15rem; top:50%; transform:translateY(-50%); width:2.75rem; height:2.75rem; display:grid; place-items:center; background:none; border:0; border-radius:var(--r-md); cursor:pointer; color:var(--suave); touch-action:manipulation; } .clave-alternar:hover{color:var(--azul); background:#F1F5FA} .clave-alternar:focus-visible{outline:2px solid var(--azul); outline-offset:2px} /* Validador de cédula — elemento distintivo */ .validador{ margin-top:.6rem; border:1.5px dashed var(--linea); border-radius:var(--r-md); padding:.75rem .9rem; background:#FAFCFE; font-size:.85rem; display:none; } .validador.visible{display:block; min-height:78px} /* El alto reservado evita que, al terminar de escribir la cédula (cuando este cuadro pasa de una línea a dos), el resto del formulario salte hacia abajo justo cuando la persona ya se está moviendo al siguiente campo — el clic termina cayendo en el campo equivocado, que quedó desplazado. */ #verificacion-cedula:not(:empty), #verificacion-cedula.reservado{min-height:70px} .validador.ok{border-color:var(--verde); border-style:solid; background:#F1FBF5} .validador.mal{border-color:var(--rojo); border-style:solid; background:#FEF5F5} .validador-fila{display:flex; align-items:center; gap:.5rem; font-weight:600} .validador-detalle{margin-top:.45rem; color:var(--suave); font-size:.8rem; display:flex; flex-wrap:wrap; gap:.4rem .9rem} .validador-detalle span b{font-family:var(--mono); color:var(--azul-tinta)} /* ---------- Aviso ---------- */ .aviso{border-radius:var(--r-md); padding:.9rem 1.05rem; font-size:.9rem; margin-bottom:1rem; overflow-wrap:break-word} .aviso b{font-weight:700} .aviso code{background:rgba(255,255,255,.6); padding:.1rem .35rem; border-radius:5px; font-family:var(--mono); font-size:.86em} .aviso-info{background:#EAF1FA; color:var(--azul); border:1px solid #CFE0F3} .aviso-ok{background:#E9F9F0; color:var(--verde-oscuro); border:1px solid #B9E9CD} .aviso-mal{background:#FDF0F1; color:var(--rojo); border:1px solid #F5CDD1} .aviso-alerta{background:#FEF7E0; color:#7A5B00; border:1px solid #F5E2A8} /* ---------- Acceso (login) ---------- */ .pantalla-acceso{min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr} .acceso-lateral{background:var(--azul); color:#fff; padding:3rem; display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden} .acceso-lateral::after{content:''; position:absolute; left:-18%; bottom:-30%; width:520px; height:520px; border-radius:50%; border:48px solid var(--verde); opacity:.18} .acceso-lateral > *{position:relative; z-index:2} .acceso-lateral img{height:72px; width:auto; margin-bottom:2rem; align-self:flex-start} /* sin esto, el flex column (align-items:stretch por defecto) estira la imagen a lo ancho de la columna y la deforma */ .acceso-lateral h2{font-size:2.1rem; max-width:16ch} .acceso-lateral p{color:#CBDDF0; max-width:44ch; margin-top:.8rem} .lista-beneficios{list-style:none; padding:0; margin:2rem 0 0; display:grid; gap:.7rem} .lista-beneficios li{display:flex; gap:.7rem; align-items:center; font-size:.94rem; color:#E3EEF9} .punto{width:9px; height:9px; border-radius:50%; background:var(--amarillo); flex:none} .acceso-panel{display:grid; place-items:center; padding:2.5rem 1.5rem; background:var(--papel)} .caja-acceso{width:min(430px,100%)} .pestanas{display:flex; background:#EAF1FA; padding:.28rem; border-radius:999px; margin-bottom:1.5rem} .pestanas button{ flex:1; border:0; background:transparent; font-family:var(--cuerpo); font-weight:700; font-size:.9rem; padding:.85rem .6rem; border-radius:999px; cursor:pointer; color:var(--suave); touch-action:manipulation; min-height:44px; } .pestanas button.activa{background:#fff; color:var(--azul); box-shadow:var(--sombra)} /* ---------- Panel admin ---------- */ .barra-admin{background:var(--azul-oscuro); color:#fff; padding:.75rem 0} .barra-admin .contenedor{display:flex; align-items:center; gap:1rem; flex-wrap:wrap} .barra-admin .marca-texto b{color:#fff} .barra-admin img{height:38px} .usuario-admin{margin-left:auto; display:flex; align-items:center; gap:.75rem; font-size:.88rem; color:#C7D9EE} .avatar{width:34px; height:34px; border-radius:50%; background:var(--verde); color:#fff; display:grid; place-items:center; font-weight:700; font-size:.85rem} .tablero{display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); margin-bottom:2rem} .metrica{background:#fff; border:1px solid var(--linea); border-radius:var(--r-lg); padding:1.15rem 1.25rem; box-shadow:var(--sombra)} .metrica span{font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--suave); font-weight:700} .metrica b{display:block; font-family:var(--display); font-size:2.2rem; line-height:1.1; margin-top:.3rem; color:var(--azul)} .metrica small{color:var(--suave); font-size:.8rem} .dona{width:132px; height:132px; border-radius:50%; display:grid; place-items:center; flex:none; background:conic-gradient(var(--linea) 0 100%);} .dona-centro{width:82px; height:82px; border-radius:50%; background:#fff; display:grid; place-items:center; text-align:center; line-height:1.1} .dona-centro span{font-size:.6rem; letter-spacing:.12em; color:var(--suave); text-transform:uppercase} .dona-centro b{font-family:var(--display); font-size:1.5rem; color:var(--azul)} .leyenda{display:grid; gap:.6rem; flex:1; min-width:180px} .leyenda div{display:flex; align-items:center; gap:.6rem; font-size:.9rem} .leyenda i{width:11px; height:11px; border-radius:50%; flex:none} .leyenda b{margin-left:auto; font-family:var(--mono); font-size:.85rem} .barra-dato{margin-bottom:.9rem} .barra-dato .fila-tarjeta{font-size:.88rem; font-weight:600; margin-bottom:.3rem} .barra-dato .pista-barra{height:8px; background:#EEF3F9; border-radius:999px; overflow:hidden} .barra-dato .pista-barra i{display:block; height:100%; background:var(--azul); border-radius:999px} .caja-tabla{background:#fff; border:1px solid var(--linea); border-radius:var(--r-lg); box-shadow:var(--sombra); overflow:hidden} .herramientas-tabla{display:flex; gap:.7rem; align-items:center; flex-wrap:wrap; padding:1.2rem 1.3rem} .herramientas-tabla .buscador{flex:1; min-width:220px} .desplazable{overflow-x:auto} table{width:100%; border-collapse:collapse; font-size:.9rem; white-space:nowrap} thead th{ background:#F7FAFD; text-align:left; padding:.85rem 1rem; font-size:.71rem; letter-spacing:.09em; text-transform:uppercase; color:var(--suave); font-weight:700; border-bottom:1px solid var(--linea); position:sticky; top:0; } tbody td{padding:.85rem 1rem; border-bottom:1px solid #EEF3F9; vertical-align:middle} tbody tr:hover{background:#FAFCFE} td.nombre{font-weight:600; white-space:normal; min-width:210px} td .mono{font-size:.85rem} select.mini{padding:.35rem .5rem; font-size:.82rem; border-radius:999px; width:auto; min-width:130px} .vacio{text-align:center; padding:3rem 1rem; color:var(--suave)} .vacio b{display:block; font-family:var(--display); font-size:1.2rem; color:var(--azul-tinta); margin-bottom:.3rem} /* ---------- Modal ---------- */ .fondo-modal{ position:fixed; inset:0; background:rgba(6,43,82,.55); backdrop-filter:blur(3px); display:none; place-items:center; padding:1.2rem; z-index:80; } .fondo-modal.abierto{display:grid} .modal{background:#fff; border-radius:var(--r-xl); width:min(680px,100%); max-height:90vh; overflow:auto; box-shadow:var(--sombra-alta); padding:1.8rem} .modal-cabecera{display:flex; align-items:flex-start; gap:1rem; margin-bottom:1.3rem} .cerrar{margin-left:auto; border:0; background:#F1F5FA; width:34px; height:34px; border-radius:50%; cursor:pointer; font-size:1.1rem; color:var(--suave)} /* ---------- Aviso flotante ---------- */ .avisos{position:fixed; right:1.1rem; bottom:1.1rem; display:grid; gap:.6rem; z-index:100; max-width:min(380px,92vw)} .flotante{ background:#fff; border-left:5px solid var(--azul); border-radius:var(--r-md); box-shadow:var(--sombra-alta); padding:.85rem 1.05rem; font-size:.9rem; animation:entrar .25s ease; } .flotante.ok{border-left-color:var(--verde)} .flotante.mal{border-left-color:var(--rojo)} @keyframes entrar{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}} /* ---------- Cargando ---------- */ .girador{width:34px; height:34px; border:3px solid var(--linea); border-top-color:var(--azul); border-radius:50%; animation:girar .8s linear infinite; margin:2.5rem auto} @keyframes girar{to{transform:rotate(360deg)}} /* ---------- Pie ---------- */ .pie{background:var(--azul-oscuro); color:#B9CDE4; padding:2.6rem 0; margin-top:3rem; font-size:.88rem} .pie .contenedor{display:flex; gap:1.5rem; justify-content:space-between; flex-wrap:wrap; align-items:center} .pie a{color:#fff; text-decoration:none} .pie a:hover{text-decoration:underline} .pie-patrocinadores{ margin-top:1.8rem; padding-top:1.8rem; border-top:1px solid rgba(255,255,255,.12); display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap; } .pie-patrocinadores span{font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:#8FA9C7} .pie-logos{display:flex; align-items:center; gap:.9rem; flex-wrap:wrap} .pie-logos img{height:60px; width:auto} /* ---------- Responsive ---------- */ @media (max-width:880px){ .pantalla-acceso{grid-template-columns:1fr} .acceso-lateral{padding:2.2rem 1.5rem} .acceso-lateral h2{font-size:1.6rem} .lista-beneficios{display:none} .portada{padding:3rem 0 3.5rem} .cifras{gap:1.4rem} .nav a:not(.btn){padding:.45rem .6rem; font-size:.86rem} /* los enlaces de texto se achican; los botones (ej. "Registrarme") mantienen su tamaño táctil normal */ } @media (max-width:560px){ .cabecera-fila{gap:.5rem} .marca img{height:46px} .marca-texto b{font-size:.9rem; white-space:nowrap} .marca-texto span{display:none} .nav{gap:.15rem} .nav a:not(.btn){padding:.4rem .5rem; font-size:.82rem} /* los botones dentro del nav no se achican, para no quedar por debajo del tamaño mínimo táctil */ .panel-formulario{padding:1.2rem; border-radius:var(--r-lg)} .id-curso{font-size:.68rem} .insignia{font-size:.63rem; padding:.24rem .5rem} .fila-tarjeta{gap:.4rem} .barra-admin .contenedor{gap:.6rem} .usuario-admin{width:100%; margin-left:0; justify-content:flex-start} } @media (max-width:400px){ .marca-texto{display:none} } @media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms !important; transition-duration:.01ms !important} } @media print{ .cabecera,.nav,.pie,.herramientas-tabla,.avisos{display:none !important} body{background:#fff} } /* ---------- Selector de fecha en rueda (día / mes / año) ---------- */ body.bloqueo-scroll{overflow:hidden} .campo-fecha-envoltura{position:relative} .rueda-fecha-capa{ display:block; width:100%; text-align:left; cursor:pointer; font-family:var(--cuerpo); font-size:.97rem; color:var(--suave); background:#fff; border:1.5px solid var(--linea); border-radius:var(--r-md); padding:.72rem .85rem; transition:border-color .15s ease, box-shadow .15s ease; } .rueda-fecha-capa.con-valor{color:var(--texto)} .rueda-fecha-capa:hover{border-color:#C6D3E4} .rueda-fecha-capa:focus-visible{border-color:var(--azul); box-shadow:0 0 0 4px rgba(10,61,114,.1); outline:none} .fondo-fecha{ position:fixed; inset:0; background:rgba(6,12,20,.55); display:flex; align-items:flex-end; justify-content:center; padding:0 0 1.4rem; z-index:200; opacity:0; pointer-events:none; transition:opacity .2s; } .fondo-fecha.abierto{opacity:1; pointer-events:auto} .hoja-fecha{ background:rgba(30,32,38,.78); -webkit-backdrop-filter:blur(26px) saturate(180%); backdrop-filter:blur(26px) saturate(180%); width:100%; max-width:420px; margin:0 1rem; border-radius:var(--r-xl); border:1px solid rgba(255,255,255,.08); box-shadow:0 24px 60px rgba(0,0,0,.45); transform:translateY(24px) scale(.97); opacity:0; transition:transform .28s cubic-bezier(.32,.72,0,1), opacity .22s; } .fondo-fecha.abierto .hoja-fecha{transform:translateY(0) scale(1); opacity:1} .hoja-fecha-cabecera{ display:flex; align-items:center; justify-content:space-between; padding:.95rem 1.2rem; border-bottom:1px solid rgba(255,255,255,.08); } .hoja-fecha-cabecera span{font-family:var(--display); font-weight:800; color:#fff; font-size:.95rem} .hoja-fecha-cabecera button{ background:none; border:0; font-family:var(--cuerpo); font-size:.95rem; font-weight:600; cursor:pointer; padding:.85rem .6rem; margin:-.85rem -.6rem; min-height:44px; display:flex; align-items:center; touch-action:manipulation; /* El padding agrandado (compensado con margen negativo, para que el texto se vea igual) hace que el área táctil real llegue a los 44px mínimos recomendados: con el tamaño anterior (28px) costaba acertarle con el dedo. */ } .hoja-fecha-cabecera .fecha-cancelar{color:rgba(255,255,255,.55)} .hoja-fecha-cabecera .fecha-listo{color:#5EA1FF; font-weight:700} .ruedas-fecha{position:relative; display:flex; padding:.5rem 1rem 1.2rem; perspective:900px} .ruedas-fecha::before,.ruedas-fecha::after{ content:''; position:absolute; left:0; right:0; height:70px; z-index:2; pointer-events:none; } .ruedas-fecha::before{top:.5rem; background:linear-gradient(rgba(30,32,38,.95), rgba(30,32,38,0))} .ruedas-fecha::after{bottom:1.2rem; background:linear-gradient(rgba(30,32,38,0), rgba(30,32,38,.95))} .rueda-marco{ position:absolute; left:.7rem; right:.7rem; top:50%; height:44px; margin-top:-22px; background:rgba(255,255,255,.09); border-radius:12px; pointer-events:none; } .rueda{ flex:1; height:220px; overflow:hidden; position:relative; cursor:grab; touch-action:none; -webkit-user-select:none; user-select:none; transform-style:preserve-3d; } .rueda:active{cursor:grabbing} .rueda-lista{position:relative; width:100%; height:100%; transform-style:preserve-3d} .rueda-item{ position:absolute; left:0; right:0; top:50%; height:44px; margin-top:-22px; display:flex; align-items:center; justify-content:center; font-family:var(--cuerpo); font-size:1.05rem; color:rgba(255,255,255,.7); will-change:transform, opacity; backface-visibility:hidden; } .rueda-item.activo{color:#fff; font-weight:700; font-size:1.2rem}