/* ============================================================================ PWA DEL SOCIO — fundación de diseño Mobile-first, white-label. El acento sale de --acento (el color del gimnasio); los neutros son la escala Zinc fija. Claro por defecto, oscuro por sistema. Todo scopeado bajo .pwa. ============================================================================ */ :root { --sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif; --mono: "IBM Plex Mono", ui-monospace, monospace; --acento: #e5484d; /* lo pisa el gimnasio (color_primario) */ --acento-fg: #ffffff; --superficie: #ffffff; --superficie-2: #fafafa; --superficie-3: #f4f4f5; --borde: #e4e4e7; --borde-fuerte: #d4d4d8; --fg: #18181b; --fg-atenuado: #71717a; --fg-sutil: #a1a1aa; --fg-placeholder: #c4c4c9; --texto-callout: #52525b; --exito: #16a34a; --rad: 14px; --rad-chico: 12px; --rad-grande: 28px; --sombra: 0 24px 60px rgba(20, 20, 30, .12); color-scheme: light; } /* Derivadas del acento: viven en .pwa —el que recibe --acento del gimnasio— para que se recalculen con ESE color. En :root quedaban congeladas al default y rompían el white-label. */ .pwa { --acento-press: color-mix(in srgb, var(--acento) 82%, #000); --acento-suave: color-mix(in srgb, var(--acento) 9%, var(--superficie)); --acento-inerte: color-mix(in srgb, var(--acento) 48%, var(--superficie)); } /* Oscuro: lo activa data-tema en el , que fija el script del desde localStorage (auto/claro/oscuro). "Automático" se resuelve ahí a claro/oscuro según prefers-color-scheme, igual que el selector del backoffice. Claro sigue siendo el default (:root de arriba). */ :root[data-tema="oscuro"] { --superficie: #18181b; --superficie-2: #232326; --superficie-3: #232326; --borde: #3f3f46; --borde-fuerte: #52525b; --fg: #fafafa; --fg-atenuado: #a1a1aa; --fg-sutil: #71717a; --fg-placeholder: #5b5b63; --texto-callout: #a1a1aa; color-scheme: dark; } :root[data-tema="oscuro"] .pwa { --acento-suave: color-mix(in srgb, var(--acento) 16%, var(--superficie)); --acento-inerte: color-mix(in srgb, var(--acento) 40%, var(--superficie)); } .pwa * { box-sizing: border-box; } /* El atributo `hidden` debe ocultar SIEMPRE: un componente con display propio (p. ej. .pwa-push, position:fixed + display:flex) lo pisa y el elemento queda trancado aunque el JS haga `.hidden = true`. Regla global en vez de un parche por componente. */ .pwa [hidden] { display: none !important; } .pwa { margin: 0; font-family: var(--sans); background: var(--superficie); color: var(--fg); -webkit-font-smoothing: antialiased; } .pwa .mono { font-family: var(--mono); } /* ============================ MARCA ============================ */ .pwa-marca { display: flex; align-items: center; gap: 11px; } .pwa-marca__sigla { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; background: var(--acento); color: var(--acento-fg); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 17px; } .pwa-marca__nombre { font-size: 15px; font-weight: 600; color: var(--fg); } .pwa-marca__logo { max-width: 220px; max-height: 48px; object-fit: contain; } /* Marca del gimnasio: el ícono subido llena el cuadradito de sigla (hereda su forma). */ .pwa .marca-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; } /* ============================ ACCESO (Ingresar / Código) ============================ */ /* Pantalla de una sola acción: contenido arriba, botón al alcance del pulgar abajo. Centrada en una columna de ancho de teléfono para que también se vea bien en desktop. */ .pwa-acceso { min-height: 100vh; min-height: 100dvh; max-width: 420px; margin: 0 auto; display: flex; flex-direction: column; padding: max(28px, env(safe-area-inset-top)) 24px max(26px, env(safe-area-inset-bottom)); } .pwa-acceso__cuerpo { flex: 1; display: flex; flex-direction: column; } .pwa-acceso h1 { margin: 28px 0 0; font-size: 25px; font-weight: 700; line-height: 1.15; color: var(--fg); text-wrap: balance; } .pwa-acceso__sub { margin: 10px 0 0; font-size: 15px; line-height: 1.45; color: var(--fg-atenuado); } .pwa-acceso__sub strong { font-family: var(--mono); font-weight: 500; color: var(--fg); } .pwa-acceso__empuje { flex: 1; min-height: 16px; } /* Campo */ .pwa-campo { margin-top: 24px; } .pwa-campo__label { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-atenuado); margin-bottom: 8px; } .pwa-campo input { width: 100%; height: 58px; padding: 0 16px; border: 1.5px solid var(--borde); border-radius: var(--rad); background: var(--superficie); color: var(--fg); font-family: var(--mono); font-size: 20px; } .pwa-campo input::placeholder { color: var(--fg-placeholder); } .pwa-campo input:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 18%, transparent); } /* Foco de teclado con la marca para links, botones y tabs (sobre el default del navegador). */ .pwa a:focus-visible, .pwa button:focus-visible, .pwa [role="button"]:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; } /* Botón */ .pwa-boton { display: block; width: 100%; height: 56px; border: none; border-radius: var(--rad); background: var(--acento); color: var(--acento-fg); font-family: inherit; font-size: 16px; font-weight: 600; cursor: pointer; } .pwa-boton:hover { background: var(--acento-press); } .pwa-boton:disabled { background: var(--acento-inerte); cursor: not-allowed; } .pwa-enlace { display: block; margin-top: 16px; text-align: center; font-size: 14px; color: var(--fg-atenuado); text-decoration: underline; text-underline-offset: 3px; } /* Aviso (fuera del padrón, demasiados intentos, código inválido) */ .pwa-aviso { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; background: var(--superficie-3); border: 1px solid var(--borde); border-radius: var(--rad-chico); padding: 12px 13px; } .pwa-aviso__punto { width: 7px; height: 7px; flex: none; margin-top: 6px; border-radius: 50%; background: var(--acento); } .pwa-aviso__texto { font-size: 13px; line-height: 1.4; color: var(--texto-callout); } /* Código: seis casillas */ .pwa-codigo { display: flex; gap: 9px; margin-top: 26px; } .pwa-codigo input { flex: 1; width: 100%; min-width: 0; height: 60px; padding: 0; text-align: center; border: 1.5px solid var(--borde); border-radius: var(--rad-chico); background: var(--superficie-2); color: var(--fg); font-family: var(--mono); font-size: 26px; font-weight: 600; } .pwa-codigo input:focus { outline: none; border-color: var(--acento); background: var(--superficie); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 18%, transparent); } /* ============================================================================ SHELL LOGUEADO — header + cuerpo + tab bar (Inicio / Premios / Cuenta) ============================================================================ */ .pwa-app { min-height: 100vh; min-height: 100dvh; max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; background: var(--superficie); } /* Header de las pantallas con tab (marca + campana) */ .pwa-header { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: max(8px, env(safe-area-inset-top)) 22px 12px; border-bottom: 1px solid var(--borde); } .pwa-header__marca { display: flex; align-items: center; gap: 10px; } .pwa-header__sigla { width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--acento); color: var(--acento-fg); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; } .pwa-header__nombre { font-size: 15px; font-weight: 600; color: var(--fg); } .pwa-header__logo { max-height: 30px; max-width: 180px; object-fit: contain; display: block; } .pwa-campana { position: relative; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--fg-atenuado); } .pwa-campana:active { background: var(--superficie-3); } .pwa-campana__punto { position: absolute; top: 8px; right: 9px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--acento); color: #fff; border: 2px solid var(--superficie); font-size: 10px; font-weight: 700; line-height: 12px; text-align: center; } /* Header de las pantallas empujadas (volver + título) */ .pwa-header--volver { justify-content: flex-start; gap: 6px; } .pwa-volver { display: flex; align-items: center; gap: 4px; margin: -6px -6px -6px -8px; padding: 6px 8px; color: var(--fg); font-size: 16px; font-weight: 600; } .pwa-volver svg { width: 22px; height: 22px; } /* Cuerpo scrolleable */ .pwa-cuerpo { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 22px; } /* Tab bar */ .pwa-tabs { flex: none; display: flex; border-top: 1px solid var(--borde); background: var(--superficie); padding: 8px 12px max(12px, env(safe-area-inset-bottom)); } .pwa-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; padding-top: 3px; color: var(--fg-atenuado); font-size: 11px; font-weight: 500; } .pwa-tab svg { width: 22px; height: 22px; } .pwa-tab.is-activa { color: var(--acento); font-weight: 600; } .pwa-tab__marca { width: 20px; height: 3px; border-radius: 99px; background: transparent; margin-bottom: 2px; } .pwa-tab.is-activa .pwa-tab__marca { background: var(--acento); } /* ============================ HOME (Mis puntos) ============================ */ .pwa-saldo__valor { font-family: var(--mono); font-size: 56px; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--fg); } .pwa-saldo__label { margin-top: 6px; font-size: 15px; color: var(--fg-atenuado); } .pwa-saldo__detalle { margin-top: 8px; font-family: var(--mono); font-size: 12px; color: var(--fg-atenuado); } .pwa-bloques { display: flex; flex-direction: column; gap: 15px; } /* Tarjeta de impulso */ .pwa-impulso { display: flex; gap: 12px; align-items: center; padding: 14px 15px; border-radius: 16px; background: var(--acento-suave); border: 1px solid color-mix(in srgb, var(--acento) 26%, var(--superficie)); } .pwa-impulso__mult { flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--acento); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 17px; font-weight: 700; } .pwa-impulso__texto { font-size: 13px; line-height: 1.4; color: var(--fg); } .pwa-impulso__texto strong { color: var(--acento); } /* Tarjeta de desafío */ .pwa-desafio { background: var(--superficie-3); border: 1px solid var(--borde); border-radius: 16px; padding: 15px; } .pwa-desafio__fila { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .pwa-desafio__nombre { font-size: 14px; font-weight: 600; color: var(--fg); } .pwa-desafio__conteo { font-family: var(--mono); font-size: 13px; color: var(--fg-atenuado); } .pwa-progreso { margin-top: 10px; height: 8px; border-radius: 99px; background: var(--borde); overflow: hidden; } .pwa-progreso > span { display: block; height: 100%; border-radius: 99px; background: var(--acento); } /* CTA al catálogo */ .pwa-cta { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--superficie); border: 1.5px solid var(--acento); border-radius: 14px; padding: 13px 15px; } .pwa-cta__texto { font-size: 14px; line-height: 1.35; color: var(--fg); } .pwa-cta__texto strong { font-weight: 700; } .pwa-cta__flecha { flex: none; font-size: 18px; color: var(--acento); } /* Entrada al check-in (decisión de implementación: el diseño no la cableó en la nav) */ .pwa-checkin-cta { display: flex; align-items: center; gap: 12px; background: var(--acento); color: var(--acento-fg); border-radius: 16px; padding: 15px; } .pwa-checkin-cta__icono { flex: none; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, #fff 22%, transparent); display: flex; align-items: center; justify-content: center; } .pwa-checkin-cta__titulo { font-size: 15px; font-weight: 600; } .pwa-checkin-cta__sub { font-size: 12.5px; opacity: .9; margin-top: 1px; } /* Lista de movimientos */ .pwa-rotulo { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-atenuado); margin-bottom: 6px; } .pwa-movimiento { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--borde); } .pwa-movimiento:last-child { border-bottom: 0; } .pwa-movimiento__desc { font-size: 14px; color: var(--fg); } .pwa-movimiento__monto { font-family: var(--mono); font-size: 14px; font-weight: 600; } .pwa-movimiento__monto.es-pos { color: var(--exito); } .pwa-movimiento__monto.es-neg { color: var(--fg-atenuado); } /* Estado vacío */ .pwa-vacio { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 16px; padding: 40px 12px; } .pwa-vacio__icono { width: 72px; height: 72px; border-radius: 18px; background: var(--superficie-3); border: 1px solid var(--borde); display: flex; align-items: center; justify-content: center; font-size: 26px; color: var(--fg-sutil); } .pwa-vacio__texto { margin: 0; font-size: 16px; line-height: 1.5; color: var(--texto-callout); text-wrap: balance; max-width: 300px; } /* ============================ FLASH + PUSH ============================ */ .pwa-flash { flex: none; margin: 12px 22px -6px; padding: 11px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.4; } .pwa-flash.es-ok { background: var(--acento-suave); color: var(--fg); border: 1px solid color-mix(in srgb, var(--acento) 26%, var(--superficie)); } .pwa-flash.es-alerta { background: var(--superficie-3); color: var(--texto-callout); border: 1px solid var(--borde); } .pwa-push { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; background: rgba(10, 10, 12, .4); } .pwa-push__caja { width: 100%; max-width: 480px; margin: 0 auto; background: var(--superficie); border-radius: 22px 22px 0 0; padding: 22px 22px max(22px, env(safe-area-inset-bottom)); } .pwa-push__texto { margin: 0 0 16px; font-size: 16px; line-height: 1.5; color: var(--fg); text-align: center; } .pwa-push__acciones { display: flex; flex-direction: column; gap: 8px; } .pwa-push__no { border: none; background: none; color: var(--fg-atenuado); font-family: inherit; font-size: 15px; padding: 10px; cursor: pointer; } /* ============================ CATÁLOGO ============================ */ .pwa-catalogo__saldo { font-size: 15px; color: var(--fg-atenuado); margin-bottom: 16px; } .pwa-catalogo__saldo strong { font-family: var(--mono); font-weight: 700; color: var(--fg); } .pwa-premios { display: flex; flex-direction: column; gap: 12px; } .pwa-premio { border: 1px solid var(--borde); border-radius: 16px; padding: 12px; } .pwa-premio__fila { display: flex; gap: 12px; align-items: center; } .pwa-premio__foto { flex: none; width: 68px; height: 68px; border-radius: 12px; object-fit: cover; display: flex; align-items: center; justify-content: center; } /* Sin foto cargada: un ícono de premio sobre superficie lisa (antes decía "foto" en mono). */ .pwa-premio__foto--vacia { background: var(--superficie-3); color: var(--fg-sutil); } .pwa-premio__nombre { font-size: 15px; font-weight: 600; color: var(--fg); line-height: 1.3; } .pwa-premio__costo { margin-top: 4px; font-family: var(--mono); font-size: 14px; color: var(--texto-callout); } .pwa-premio__pedir { width: 100%; height: 44px; margin-top: 12px; font-size: 15px; } .pwa-premio__faltan { margin-top: 12px; } .pwa-premio__barra { height: 6px; border-radius: 99px; background: var(--superficie-3); overflow: hidden; } .pwa-premio__barra > span { display: block; height: 100%; border-radius: 99px; background: var(--acento); } .pwa-premio__falta-texto { margin-top: 7px; font-size: 13px; font-weight: 500; color: var(--acento); } /* Tarjeta de comprobante activo (en el catálogo) */ .pwa-comprobantes { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; } .pwa-comprobante-card { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--acento-suave); border: 1px solid color-mix(in srgb, var(--acento) 26%, var(--superficie)); border-radius: 16px; } .pwa-comprobante-card__cod { flex: none; font-family: var(--mono); font-size: 15px; font-weight: 700; letter-spacing: .04em; color: var(--acento); background: var(--superficie); border-radius: 10px; padding: 8px 10px; } .pwa-comprobante-card__info { flex: 1; min-width: 0; } .pwa-comprobante-card__nombre { font-size: 14px; font-weight: 600; color: var(--fg); } .pwa-comprobante-card__sub { font-size: 12.5px; color: var(--fg-atenuado); margin-top: 1px; } .pwa-comprobante-card__flecha { flex: none; color: var(--acento); font-size: 18px; } /* ============================ COMPROBANTE (pantalla) ============================ */ .pwa-comprobante { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 8px; } .pwa-estado-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--acento-suave); color: var(--acento); border: 1px solid color-mix(in srgb, var(--acento) 26%, var(--superficie)); } .pwa-estado-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; } .pwa-estado-pill.es-neutro { background: var(--superficie-3); color: var(--fg-atenuado); border-color: var(--borde); } .pwa-estado-pill.es-ok { background: color-mix(in srgb, var(--exito) 12%, var(--superficie)); color: var(--exito); border-color: color-mix(in srgb, var(--exito) 30%, var(--superficie)); } .pwa-comprobante__premio { margin-top: 20px; } .pwa-comprobante__nombre { font-size: 19px; font-weight: 700; color: var(--fg); } .pwa-comprobante__costo { margin-top: 4px; font-family: var(--mono); font-size: 15px; color: var(--fg-atenuado); } .pwa-comprobante__qr { margin-top: 24px; padding: 16px; background: #fff; border: 1px solid var(--borde); border-radius: 20px; } .pwa-comprobante__qr svg { display: block; width: 232px; height: 232px; } .pwa-comprobante__codigo { margin-top: 22px; font-family: var(--mono); font-size: 40px; font-weight: 700; letter-spacing: .06em; color: var(--fg); } .pwa-comprobante__vigencia { margin-top: 10px; font-size: 14px; color: var(--fg-atenuado); } .pwa-comprobante__anular { margin-top: 28px; } .pwa-comprobante__anular button { border: none; background: none; color: var(--fg-atenuado); font-family: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } /* ============================ CHECK-IN ============================ */ .pwa-detalle h2 { margin: 0; font-size: 23px; font-weight: 700; color: var(--fg); } .pwa-detalle__sub { margin: 8px 0 0; font-size: 15px; line-height: 1.45; color: var(--fg-atenuado); } .pwa-visor { position: relative; width: 100%; aspect-ratio: 1; margin-top: 16px; border-radius: 20px; overflow: hidden; background: #141416; } .pwa-visor video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .pwa-visor__marco { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 62%; height: 62%; } .pwa-visor__esq { position: absolute; width: 30px; height: 30px; } .pwa-visor__esq--si { top: 0; left: 0; border-top: 4px solid var(--acento); border-left: 4px solid var(--acento); border-top-left-radius: 8px; } .pwa-visor__esq--sd { top: 0; right: 0; border-top: 4px solid var(--acento); border-right: 4px solid var(--acento); border-top-right-radius: 8px; } .pwa-visor__esq--ii { bottom: 0; left: 0; border-bottom: 4px solid var(--acento); border-left: 4px solid var(--acento); border-bottom-left-radius: 8px; } .pwa-visor__esq--id { bottom: 0; right: 0; border-bottom: 4px solid var(--acento); border-right: 4px solid var(--acento); border-bottom-right-radius: 8px; } .pwa-visor__linea { position: absolute; top: 50%; left: 6px; right: 6px; height: 2px; background: var(--acento); box-shadow: 0 0 10px var(--acento); animation: pwa-barrer 2.4s ease-in-out infinite; } .pwa-visor__pista { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; font-size: 13px; color: rgba(255, 255, 255, .7); } @keyframes pwa-barrer { 0%, 100% { top: 20%; } 50% { top: 80%; } } @media (prefers-reduced-motion: reduce) { .pwa-visor__linea { animation: none; top: 50%; } } .pwa-separador { display: flex; align-items: center; gap: 12px; margin: 18px 0; } .pwa-separador::before, .pwa-separador::after { content: ""; flex: 1; height: 1px; background: var(--borde); } .pwa-separador span { font-size: 13px; color: var(--fg-atenuado); } .pwa-codigo-fila { display: flex; gap: 10px; } .pwa-codigo-fila input { flex: 1; min-width: 0; height: 56px; padding: 0 16px; border: 1.5px solid var(--borde); border-radius: var(--rad); background: var(--superficie); color: var(--fg); font-family: var(--mono); font-size: 18px; } .pwa-codigo-fila input:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 18%, transparent); } .pwa-codigo-fila button { flex: none; width: auto; padding: 0 20px; height: 56px; } /* ============================ BANDEJA + MENSAJE ============================ */ .pwa-msg { display: flex; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--borde); } .pwa-msg__punto { flex: none; width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: var(--acento); } .pwa-msg__punto.es-leido { background: transparent; } .pwa-msg__cuerpo { flex: 1; min-width: 0; } .pwa-msg__titulo { font-size: 15px; font-weight: 600; color: var(--fg); } .pwa-msg__titulo.es-leido { font-weight: 500; color: var(--fg-atenuado); } .pwa-msg__extracto { margin-top: 3px; font-size: 14px; line-height: 1.4; color: var(--fg-atenuado); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .pwa-mensaje__marca { display: flex; align-items: center; gap: 8px; color: var(--fg-atenuado); font-size: 13px; font-weight: 500; } .pwa-mensaje__sigla { width: 22px; height: 22px; flex: none; border-radius: 6px; background: var(--acento); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; } .pwa-mensaje__titulo { margin: 14px 0 0; font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--fg); } .pwa-mensaje__imagen { width: 100%; border-radius: 16px; margin-top: 16px; } .pwa-mensaje__cuerpo { margin-top: 14px; font-size: 15px; line-height: 1.6; color: var(--fg); white-space: pre-line; } /* ============================ ASISTENCIAS ============================ */ .pwa-tarjeta { background: var(--superficie-3); border: 1px solid var(--borde); border-radius: 16px; padding: 15px; } .pwa-tarjeta__titulo { font-size: 15px; font-weight: 600; color: var(--fg); } .pwa-tarjeta__sub { margin-top: 3px; font-size: 14px; line-height: 1.4; color: var(--fg-atenuado); } .pwa-tarjeta input[type="date"] { width: 100%; height: 52px; margin-top: 12px; padding: 0 14px; border: 1.5px solid var(--borde); border-radius: 12px; background: var(--superficie); color: var(--fg); font-family: var(--mono); font-size: 16px; } .pwa-tarjeta input[type="date"]:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 18%, transparent); } .pwa-tarjeta .pwa-boton { height: 50px; margin-top: 10px; font-size: 15px; } .pwa-asistencia { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--borde); } .pwa-asistencia:last-child { border-bottom: 0; } .pwa-asistencia__fecha { font-family: var(--mono); font-size: 14px; color: var(--fg); } .pwa-asistencia__sede { font-size: 13px; color: var(--fg-atenuado); } /* ============================ PERFIL + NOTIFICACIONES ============================ */ .pwa-perfil { display: flex; flex-direction: column; align-items: center; gap: 10px; } .pwa-perfil__avatar { width: 76px; height: 76px; border-radius: 50%; background: var(--acento); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 700; } .pwa-perfil__nombre { font-size: 18px; font-weight: 700; color: var(--fg); } .pwa-perfil__rol { margin-top: 2px; font-size: 13px; color: var(--fg-atenuado); } .pwa-datos { margin-top: 22px; } .pwa-dato { padding: 12px 0; border-bottom: 1px solid var(--borde); } .pwa-dato__label { font-size: 12px; color: var(--fg-atenuado); } .pwa-dato__valor { margin-top: 2px; font-size: 16px; color: var(--fg); } .pwa-dato__valor.mono { font-family: var(--mono); } .pwa-menu-fila { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid var(--borde); font-size: 16px; color: var(--fg); } .pwa-menu-fila__flecha { color: var(--fg-sutil); font-size: 18px; } .pwa-salir { margin-top: 20px; } .pwa-salir button { width: 100%; border: none; background: none; color: var(--fg-atenuado); font-family: inherit; font-size: 15px; padding: 12px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .pwa-toggle-fila { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--borde); } .pwa-toggle-fila__texto { font-size: 15px; color: var(--fg); } .pwa-toggle { position: relative; flex: none; } .pwa-toggle input { position: absolute; opacity: 0; width: 0; height: 0; } .pwa-toggle__pista { display: block; width: 46px; height: 28px; border-radius: 999px; background: var(--borde-fuerte); transition: background .15s; } .pwa-toggle__pista::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: left .15s; } .pwa-toggle input:checked + .pwa-toggle__pista { background: var(--acento); } .pwa-toggle input:checked + .pwa-toggle__pista::after { left: 21px; } .pwa-nota { margin: 16px 0 22px; font-size: 14px; line-height: 1.5; color: var(--fg-atenuado); } /* Selector de tema (Automático / Claro / Oscuro): segmented control, mismo espíritu que el .bo-tema del backoffice pero con objetivos táctiles más grandes. */ .pwa-tema { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--superficie-3); } .pwa-tema__opcion { flex: 1; padding: 11px 8px; border: none; border-radius: 10px; background: transparent; color: var(--fg-atenuado); font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer; } .pwa-tema__opcion.is-actual { background: var(--superficie); color: var(--fg); font-weight: 600; box-shadow: 0 1px 3px rgba(20, 20, 30, .12); }