/* Interfaz mínima de Fydelo. CSS plano, sin framework: son seis pantallas contra una API JSON y no justifican una dependencia. Paleta clara, cálida y "premium" (negro cálido + dorado sobre blanco cálido), buscada con el skill de diseño contra su base de paletas — variante "Luxury/Premium Brand" adaptada. El verde genérico de fintech no encajaba con el posicionamiento de marca (fidelidad/confianza); el dorado sí. Estructura de pantallas sin cambios, solo el vestuario — y como ya estaba todo en variables, el cambio entero vive acá arriba. */ :root { --bg: #faf9f7; --panel: #ffffff; --panel-2: #f2efea; --borde: #e2ddd6; --texto: #1c1917; --tenue: #716a66; --acento: #a16207; --acento-2: #a06909; --logo-1: #78350f; --logo-3: #eab308; --ok: #15803d; --alerta: #c2410c; --error: #dc2626; --radio: 18px; --sombra: 0 1px 2px rgba(20,22,26,.04), 0 4px 14px rgba(20,22,26,.05); } /* Temas alternativos (2026-09-02): preferencia personal de quien mira, no de marca — se aplican vía [data-theme] en , elegidos en «Cuenta» y guardados en localStorage (public/app.js). Solo se tocan los tokens de color; --ok/--alerta/--error quedan iguales a propósito en los tres: un error tiene que seguir siendo rojo sin importar la paleta elegida. Colores investigados contra fuentes reales de paleta (no elegidos a ojo). Contraste WCAG AA (4.5:1) verificado con `scripts/check-contrast.js` contra cada fondo real donde el token se usa como texto — no solo contra --bg. La primera pasada (2026-09-02) solo había chequeado un color contra un fondo a ojo y decía "los dos temas nuevos cumplen"; al calcular los 12 pares reales por tema aparecieron 3 fallas más sin detectar: --tenue en cobre (tres fondos) y en turquesa (--bg), y --acento-2 en cobre además del de dorado ya conocido. Los cinco tokens que fallaban se oscurecieron sobre el mismo matiz (H/S de HSL sin cambiar) hasta cruzar 4.5:1 con margen. */ [data-theme="cobre"] { --bg: #f5efe6; --panel: #ffffff; --panel-2: #efe6da; --borde: #e6dacb; --texto: #2b1b12; --tenue: #736357; --acento: #9f381d; --acento-2: #bc5638; --logo-1: #6b2a12; --logo-3: #f2a67e; } [data-theme="turquesa"] { --bg: #eaf6f6; --panel: #ffffff; --panel-2: #e0f0ef; --borde: #cfe8e6; --texto: #0b2a33; --tenue: #536f71; --acento: #0c6478; --acento-2: #0a7a8f; --logo-1: #062e38; --logo-3: #5fd6e0; } /* Siete paletas más (2026-09-03), a pedido del dueño del proyecto de tener más variedad para elegir. Sigue sin ser un selector de color libre — eso se evaluó y se descartó a propósito: un color elegido a mano puede romper el contraste de golpe, que es justo el bug que costó corregir la primera vez (arriba). Los diez tokens de cada una se generaron buscando la luminosidad en HSL que cumple WCAG AA con margen (no la lightness límite, para no repetir el error de quedar al borde como pasó con Dorado/Cobre), y se verifican con el mismo `scripts/check-contrast.js`, ahora generalizado para leer cualquier bloque `[data-theme]` en vez de los tres nombres fijos. */ [data-theme="esmeralda"] { --bg: #f3f9f6; --panel: #ffffff; --panel-2: #e7f3ee; --borde: #cfe8dc; --texto: #112c20; --tenue: #4e7462; --acento: #21734d; --acento-2: #1f7547; --logo-1: #0d4a2d; --logo-3: #87cfb4; } [data-theme="lavanda"] { --bg: #f5f4f9; --panel: #ffffff; --panel-2: #ece8f2; --borde: #d9d1e5; --texto: #1b112c; --tenue: #726786; --acento: #5e3b9b; --acento-2: #7637be; --logo-1: #401f7a; --logo-3: #d1b8e0; } [data-theme="rosa"] { --bg: #f8f4f5; --panel: #ffffff; --panel-2: #f2e9ec; --borde: #e4d2d8; --texto: #2b121b; --tenue: #7d666e; --acento: #91465f; --acento-2: #aa465d; --logo-1: #732640; --logo-3: #dabec0; } [data-theme="grafito"] { --bg: #f5f6f7; --panel: #ffffff; --panel-2: #ebedef; --borde: #d8dbdf; --texto: #171d26; --tenue: #666d78; --acento: #49505a; --acento-2: #586474; --logo-1: #263140; --logo-3: #b9c0d5; } [data-theme="vino"] { --bg: #f9f3f4; --panel: #ffffff; --panel-2: #f3e8ea; --borde: #e6d1d4; --texto: #2c1115; --tenue: #856368; --acento: #691c29; --acento-2: #8c212f; --logo-1: #3e0a12; --logo-3: #d99896; } [data-theme="medianoche"] { --bg: #f3f5f9; --panel: #ffffff; --panel-2: #e8ebf3; --borde: #d1d7e6; --texto: #11192c; --tenue: #626c84; --acento: #1c305f; --acento-2: #2b4882; --logo-1: #091634; --logo-3: #9fa7d1; } [data-theme="terracota"] { --bg: #f9f5f3; --panel: #ffffff; --panel-2: #f3eae7; --borde: #e8d5cf; --texto: #2c1811; --tenue: #856559; --acento: #974f35; --acento-2: #a05631; --logo-1: #74321a; --logo-3: #dec9b5; } * { box-sizing: border-box; } /* Sin esto, el atributo `hidden` pierde contra cualquier clase que fije `display` (.tabbar, .saldo, etc.): un estilo de autor le gana al `display: none` por defecto del navegador aunque la especificidad empate — es el origen de la regla, no el orden, lo que decide. Encontrado el 2026-09-02 mirando la puerta de edad en un navegador real: `mostrarPuerta()` pone `tabbar.hidden = true`, pero el tab bar de abajo seguía visible entero encima. */ [hidden] { display: none !important; } body { margin: 0; background: var(--bg); color: var(--texto); font: 15px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* ---------- estructura ---------- */ header { display: flex; align-items: center; gap: 16px; padding: 14px 22px; background: var(--panel); border-bottom: 1px solid var(--borde); position: sticky; top: 0; z-index: 10; flex-wrap: wrap; } .marca { font-weight: 700; font-size: 19px; letter-spacing: -0.3px; } .marca span { color: var(--acento); } .derecha { margin-left: auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .icono-menu { display: flex; padding: 4px; margin: 0; background: none; border: none; color: var(--tenue); cursor: pointer; border-radius: 8px; } .icono-menu:hover { background: var(--panel-2); color: var(--texto); } .icono-menu svg { width: 22px; height: 22px; } main { max-width: 1000px; margin: 0 auto; padding: 26px 22px 96px; } /* ---------- tab bar inferior ---------- */ /* Reemplaza el nav de arriba (2026-09-02): mismo patrón de Instagram/TikTok del demo "Fydelo Feed" — 5 destinos fijos abajo, con el "+" de subir elevado sobre la barra. Mis compras/Cobros/Moderación/Cuenta no entran en cinco íconos: se mudan a un menú dentro de Perfil (mismo patrón que usan esas apps — el tab de perfil es la puerta a todo lo demás). */ .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: flex-end; background: var(--panel); border-top: 1px solid var(--borde); padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px)); } .tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: none; cursor: pointer; color: var(--tenue); padding: 4px 0; font: inherit; } .tab svg { width: 22px; height: 22px; } .tab span { font-size: 10px; font-weight: 600; } .tab.activo { color: var(--acento); } /* El "+" central: mismo botón elevado con anillo del color de fondo que ya se probó en el demo, para separarlo del resto de la barra. */ .tab-subir { flex: none; width: 50px; height: 50px; margin: -20px 4px 0; border-radius: 50%; align-items: center; justify-content: center; background: linear-gradient(145deg, var(--acento) 0%, var(--acento-2) 100%); color: #fff; box-shadow: 0 8px 18px rgba(0,0,0,.25), 0 0 0 4px var(--panel); } .tab-subir svg { width: 24px; height: 24px; } .tab-subir:active { transform: scale(.94); } /* Sin esto, .tab.activo (pensado para las otras 4) le pinta el icono del mismo color que su propio fondo degradado cuando el "+" es la vista activa (Subir contenido) — el signo blanco se vuelve invisible. Encontrado el 2026-09-02 mirando esa pantalla en un navegador real. Tres clases a proposito, para no depender del orden de las reglas. */ .tab.tab-subir.activo { color: #fff; } /* ---------- Configuración y actividad (dentro de Perfil) ---------- */ /* Lista de filas con icono + chevron agrupada por secciones, estilo Instagram ("Configuración y actividad")/TikTok ("Configuración y privacidad"): mismos destinos de siempre (Mis compras, Cobros, Moderación, Cuenta), solo reorganizados. */ .menu-config h4 { margin: 20px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--tenue); font-weight: 700; } .menu-config h4:first-child { margin-top: 0; } .fila-config { display: flex; align-items: center; gap: 14px; width: 100%; padding: 13px 2px; background: none; border: none; border-bottom: 1px solid var(--borde); color: var(--texto); font: inherit; font-size: 15px; text-align: left; cursor: pointer; } .fila-config:last-child { border-bottom: none; } .fila-config:hover { background: var(--panel-2); } .fila-config svg.icono-fila { flex: none; color: var(--tenue); } .fila-config span { flex: 1; } .fila-config svg.chevron { flex: none; color: var(--tenue); } h2 { font-size: 21px; margin: 0 0 4px; letter-spacing: -0.3px; } .sub { color: var(--tenue); font-size: 14px; margin: 0 0 22px; } /* ---------- saldo ---------- */ .saldo { display: flex; gap: 18px; align-items: center; font-size: 13px; } .saldo b { display: block; font-size: 16px; font-variant-numeric: tabular-nums; } .saldo .etq { color: var(--tenue); font-size: 12px; } /* ---------- tarjetas ---------- */ .grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; } .tarjeta { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); display: flex; flex-direction: column; } .miniatura { aspect-ratio: 4/3; background: var(--panel-2); display: flex; align-items: center; justify-content: center; color: var(--tenue); font-size: 13px; position: relative; } .miniatura img, .miniatura video { width: 100%; height: 100%; object-fit: cover; } .candado { font-size: 30px; opacity: .4; } .cuerpo { padding: 13px 14px; display: flex; flex-direction: column; gap: 9px; flex: 1; } .titulo { font-weight: 600; font-size: 15px; } .precio { font-variant-numeric: tabular-nums; color: var(--acento); font-weight: 600; } .meta { color: var(--tenue); font-size: 12.5px; } /* ---------- Reels ---------- */ /* Feed vertical con scroll-snap (dirección visual del demo "Fydelo Feed", CLAUDE.md §3). Inmersivo y oscuro a propósito, igual que .visor más abajo: una foto o un video de cualquier color tiene que seguir siendo legible encima. El acento sigue la paleta que la persona eligió (--acento) en vez de un cuarto juego de colores fijo — ya existe el sistema de temas, no hace falta otro para esto. */ .reels-feed { height: min(76vh, 760px); min-height: 420px; overflow-y: auto; scroll-snap-type: y mandatory; border-radius: var(--radio); background: #14110e; scrollbar-width: none; } .reels-feed::-webkit-scrollbar { display: none; } .reel { position: relative; height: 100%; scroll-snap-align: start; display: flex; align-items: flex-end; overflow: hidden; background: #14110e; } .reel.bloqueado { background: linear-gradient(165deg, var(--acento) 0%, #14110e 72%); } .reel-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .reel-velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,13,10,.05) 0%, rgba(15,13,10,.18) 45%, rgba(12,10,8,.85) 100%); } .reel-info { position: relative; z-index: 2; padding: 22px 24px 26px; width: 100%; } .reel-creador { display: block; margin: 0 0 8px; padding: 0; background: none; border: none; color: #fff2da; font: 700 13.5px inherit; text-align: left; cursor: pointer; opacity: .9; } .reel-creador:hover { text-decoration: underline; } .reel-titulo { font-size: 18px; font-weight: 600; line-height: 1.3; margin: 0 0 14px; color: #fff2da; } .reel-desbloquear { display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.35); } .reel-check { display: inline-flex; align-items: center; gap: 6px; background: rgba(21,128,61,.85); color: #eafff0; padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; } /* ---------- Explorar ---------- */ /* Grilla estilo Instagram sobre el mismo contenido de Reels — ver .reel más arriba para el porqué del degradado en vez de una miniatura real cuando está bloqueado. */ .grilla-explorar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; } .celda-explorar { position: relative; aspect-ratio: 3/4; border-radius: 6px; overflow: hidden; display: flex; align-items: flex-end; padding: 6px; border: none; cursor: pointer; background: linear-gradient(165deg, var(--acento) 0%, #14110e 72%); } .celda-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .celda-explorar .etiqueta-precio { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 3px; font: 700 10.5px inherit; color: #fff2da; background: rgba(15,13,10,.55); backdrop-filter: blur(2px); border-radius: 999px; padding: 3px 8px; } .celda-explorar.bloqueada .etiqueta-precio { background: rgba(15,13,10,.6); } .celda-explorar:not(.bloqueada) .etiqueta-precio { background: rgba(21,128,61,.78); } /* ---------- Perfil ---------- */ .cabecera-perfil { padding: 6px 4px 20px; text-align: center; } .avatar-grande { width: 78px; height: 78px; margin: 0 auto 12px; border-radius: 50%; background: linear-gradient(135deg, var(--acento) 0%, var(--acento-2) 100%); display: flex; align-items: center; justify-content: center; font: 700 22px inherit; color: #fff; box-shadow: var(--sombra); } .stats-perfil { display: flex; justify-content: center; gap: 30px; margin-top: 4px; } .stat { display: flex; flex-direction: column; align-items: center; } .stat b { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; } .stat span { font-size: 11px; color: var(--tenue); text-transform: uppercase; letter-spacing: .05em; } /* ---------- tarjeta de saldo (Billetera) ---------- */ /* Mismo tratamiento "hero" del demo (número grande, degradado), atado a los tokens de tema de siempre en vez de un color fijo — igual que .reel más arriba. */ .tarjeta-saldo { background: linear-gradient(135deg, var(--acento) 0%, var(--acento-2) 100%); color: #fff; border-radius: var(--radio); padding: 24px; box-shadow: var(--sombra); margin-bottom: 18px; } .tarjeta-saldo .etiqueta-saldo { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; opacity: .85; margin-bottom: 8px; } .tarjeta-saldo .monto-saldo { font-size: 30px; font-weight: 700; margin-bottom: 10px; font-variant-numeric: tabular-nums; } .tarjeta-saldo p { margin: 0; font-size: 12.5px; opacity: .92; line-height: 1.5; } /* ---------- controles ---------- */ button.b { background: var(--acento); color: #fff; border: none; padding: 10px 18px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; } button.b:hover { background: var(--acento-2); } button.b:disabled { background: var(--panel-2); color: var(--tenue); cursor: not-allowed; } button.b.gris { background: var(--panel); color: var(--texto); border: 1.5px solid var(--borde); } button.b.gris:hover { background: var(--panel-2); } button.b.ok { background: var(--ok); } button.b.peligro { background: var(--error); } button.b.chico { padding: 7px 13px; font-size: 13px; } input, select, textarea { background: var(--bg); border: 1px solid var(--borde); color: var(--texto); padding: 11px 14px; border-radius: 14px; font: inherit; width: 100%; } input:focus, select:focus { outline: 2px solid var(--acento); border-color: transparent; } label { display: block; margin-bottom: 14px; font-size: 13px; color: var(--tenue); } label span { display: block; margin-bottom: 5px; } .panel { background: var(--panel); border: 1px solid var(--borde); box-shadow: var(--sombra); border-radius: var(--radio); padding: 22px; margin-bottom: 18px; } .angosto { max-width: 430px; } /* ---------- selector de tema (Cuenta) ---------- */ /* Grid de 2 columnas y no una lista vertical: con 10 paletas (2026-09-03, antes 3) una columna sola quedaba demasiado larga para una pantalla de ajustes. */ .temas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .tema-opcion { display: flex; align-items: center; gap: 12px; background: var(--panel-2); border: 2px solid transparent; border-radius: 12px; padding: 10px 12px; font: inherit; font-size: 14px; color: var(--texto); cursor: pointer; text-align: left; } .tema-opcion.activo { border-color: var(--acento); background: var(--panel); } .tema-muestra { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--borde); } /* ---------- entrada ---------- */ /* Tarjeta centrada al estilo Instagram/TikTok: primero el formulario, solo, sin nada más compitiendo por la atención. El texto de venta para el creador sigue existiendo, pero abajo, para quien baja a leerlo. */ /* Pantalla de entrada: relieve 3D tipo "soft UI", con los colores del tema activo en vez de los grises/azules típicos de neumorfismo — investigado contra la base de estilos del skill de diseño antes de escribir CSS. El neumorfismo "puro" (sombras suaves monocromáticas) está marcado ahí mismo con riesgo real de bajo contraste; la variante que se usa en producto profesional de verdad ("Soft UI Evolution") mantiene el relieve pero exige WCAG AA — por eso el foco de los inputs sigue siendo un outline sólido de 2px como en el resto del sitio, nunca solo un glow suave. */ .entrada { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 4vh; position: relative; } /* Halo suave detrás de la tarjeta, tenido con el acento del tema. */ .entrada::before { content: ''; position: absolute; top: -30px; left: 50%; translate: -50% 0; width: 480px; height: 480px; max-width: 92vw; background: radial-gradient(circle, color-mix(in srgb, var(--acento) 16%, transparent) 0%, transparent 70%); z-index: -1; pointer-events: none; } .tarjeta-auth { width: 100%; max-width: 380px; background: var(--panel); border: 1px solid color-mix(in srgb, var(--borde) 70%, var(--texto) 10%); border-radius: 26px; padding: 40px 32px 32px; /* Sombra ambiental de dos capas + un filo claro arriba: "tarjeta extruida". Verificado a ojo contra el fondo real (capturas de pantalla, 2026-09-02): la paleta de Fydelo es clara sobre clara, así que una sola sombra suave no alcanza a leerse — hace falta más contraste que en una paleta gris. */ box-shadow: 0 2px 4px color-mix(in srgb, var(--texto) 10%, transparent), 0 14px 22px -8px color-mix(in srgb, var(--texto) 28%, transparent), 0 34px 60px -16px color-mix(in srgb, var(--texto) 38%, transparent), inset 0 1px 0 rgba(255,255,255,.6); } /* Insignia circular arriba del wordmark — mismo truco que .avatar-grande en Perfil (degradado var(--acento)→var(--acento-2)), con relieve embossed: brillo arriba-izquierda, sombra abajo-derecha, glow de color abajo. */ .insignia-entrada { width: 60px; height: 60px; margin: 0 auto 16px; border-radius: 50%; background: linear-gradient(135deg, var(--acento) 0%, var(--acento-2) 100%); display: flex; align-items: center; justify-content: center; color: #fff; font: 800 24px inherit; box-shadow: 0 12px 22px -6px color-mix(in srgb, var(--acento) 50%, transparent), inset 0 2px 3px rgba(255,255,255,.4), inset 0 -3px 5px rgba(0,0,0,.18); } .logo-grande { text-align: center; font-weight: 800; font-size: 26px; letter-spacing: -0.5px; margin: 0 0 6px; background: linear-gradient(135deg, var(--logo-1) 0%, var(--acento) 45%, var(--logo-3) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .tarjeta-auth .campo { margin-bottom: 16px; } .tarjeta-auth .etq-campo { display: block; margin-bottom: 7px; font-size: 12.5px; font-weight: 600; color: var(--texto); } .tarjeta-auth .campo-caja { position: relative; } .tarjeta-auth .icono-campo { position: absolute; left: 14px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--tenue); pointer-events: none; } .tarjeta-auth input { border-radius: 14px; padding: 14px 16px 14px 42px; background: var(--panel-2); border: 1px solid color-mix(in srgb, var(--borde) 60%, var(--texto) 8%); /* Debossed: el campo se ve hundido en la superficie, no pegado encima. */ box-shadow: inset 2px 3px 6px color-mix(in srgb, var(--texto) 16%, transparent), inset -1px -1px 3px rgba(255,255,255,.7); transition: box-shadow .15s ease; } .tarjeta-auth input:focus { /* El outline sólido es la señal de foco real (accesibilidad primero); el inset queda solo como acompañamiento visual. */ outline: 2px solid var(--acento); outline-offset: 1px; border-color: transparent; box-shadow: inset 1px 1px 3px color-mix(in srgb, var(--texto) 10%, transparent); } .tarjeta-auth [name="password"], .tarjeta-auth [name="totp"] { padding-right: 42px; } .tarjeta-auth .alternar-clave { position: absolute; right: 10px; top: 50%; translate: 0 -50%; background: none; border: none; padding: 6px; cursor: pointer; color: var(--tenue); display: flex; align-items: center; border-radius: 8px; } .tarjeta-auth .alternar-clave:hover { color: var(--texto); } .tarjeta-auth .alternar-clave:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; } .tarjeta-auth .alternar-clave svg { width: 18px; height: 18px; } .tarjeta-auth .ayuda { display: block; margin-top: 6px; font-size: 12px; color: var(--tenue); } .tarjeta-auth button.b.grande { width: 100%; padding: 14px; border-radius: 999px; font-size: 15px; font-weight: 700; margin-top: 8px; background: linear-gradient(145deg, var(--acento) 0%, var(--acento-2) 100%); box-shadow: 0 12px 22px -6px color-mix(in srgb, var(--acento) 55%, transparent), inset 0 1px 0 rgba(255,255,255,.3); border: none; transition: transform .12s ease, box-shadow .12s ease; } .tarjeta-auth button.b.grande:hover { background: linear-gradient(145deg, var(--acento) 0%, var(--acento-2) 100%); box-shadow: 0 16px 28px -6px color-mix(in srgb, var(--acento) 62%, transparent), inset 0 1px 0 rgba(255,255,255,.3); } .tarjeta-auth button.b.grande:active { transform: scale(.98); box-shadow: inset 2px 2px 6px rgba(0,0,0,.22); } .tarjeta-cambiar { width: 100%; max-width: 380px; background: var(--panel); border: 1px solid var(--borde); box-shadow: 0 1px 2px rgba(20,22,26,.04), 0 14px 28px -12px color-mix(in srgb, var(--texto) 16%, transparent); border-radius: 18px; padding: 18px; text-align: center; font-size: 14px; color: var(--tenue); } .tarjeta-cambiar a { color: var(--acento); font-weight: 600; margin-left: 4px; text-decoration: none; } .tarjeta-cambiar a:hover { text-decoration: underline; } .sr-solo { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } @media (max-width: 420px) { .tarjeta-auth, .tarjeta-cambiar { padding-left: 22px; padding-right: 22px; } } /* Pitch: tarjeta plegable (2026-09-03, segunda vuelta — la versión con
nativo "no se veía bonito"). Header con insignia + título corto, estilo tarjeta (mismo lenguaje que .panel en Cuenta/Perfil). El cuerpo se desliza con una animación de alto suave vía CSS grid-template-rows (0fr -> 1fr) — la técnica moderna para animar un alto que no se conoce de antemano sin medir con JavaScript; el único JS es alternar la clase `.abierto` (montarPitch() en app.js). */ .entrada .pitch { width: 100%; max-width: 640px; margin-top: 50px; } .pitch-cabecera { width: 100%; display: flex; align-items: center; gap: 14px; background: var(--panel); border: 1px solid var(--borde); border-radius: 16px; padding: 14px 18px; font: inherit; text-align: left; cursor: pointer; box-shadow: var(--sombra); } .pitch-cabecera:hover { background: var(--panel-2); } .pitch-cabecera:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; } .pitch-insignia { flex: none; width: 38px; height: 38px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--acento) 0%, var(--acento-2) 100%); } .pitch-titulo { flex: 1; font-weight: 700; font-size: 15px; color: var(--texto); } .chevron-pitch { flex: none; color: var(--tenue); transition: transform .25s ease; } .pitch.abierto .chevron-pitch { transform: rotate(180deg); } .pitch-colapsable { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; } .pitch.abierto .pitch-colapsable { grid-template-rows: 1fr; } .pitch-colapsable > .pitch-cuerpo { overflow: hidden; min-height: 0; background: var(--panel); border: 1px solid var(--borde); border-radius: 16px; margin-top: 10px; padding: 0 20px; transition: padding .3s ease; } .pitch.abierto .pitch-cuerpo { padding: 20px; } .pitch-cuerpo h1 { font-size: 22px; line-height: 1.25; letter-spacing: -0.5px; margin: 0 0 14px; } .pitch-cuerpo h1 span { color: var(--acento); } .pitch-cuerpo > p { color: var(--tenue); margin: 0; max-width: 52ch; } .pitch-cuerpo ul { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 15px; } .pitch-cuerpo li { padding-left: 24px; position: relative; color: var(--tenue); max-width: 52ch; } .pitch-cuerpo li b { color: var(--texto); font-weight: 600; } .pitch-cuerpo li::before { content: "→"; position: absolute; left: 0; color: var(--acento); } /* ---------- puerta de edad ---------- */ .puerta { max-width: 500px; margin: 8vh auto 0; background: var(--panel); border: 1px solid var(--borde); box-shadow: var(--sombra); border-radius: var(--radio); padding: 30px; display: grid; gap: 16px; text-align: center; } .puerta h2 { margin: 0; } .puerta p { margin: 0; color: var(--tenue); } .puerta .acciones { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } /* ---------- estados ---------- */ .insignia { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; } .insignia.pending_review { background: #fef3c7; color: #92400e; } .insignia.published { background: #dcfce7; color: #15803d; } .insignia.rejected, .insignia.removed { background: #fee2e2; color: #b91c1c; } .insignia.adulto { background: #ede9fe; color: #6d28d9; } .aviso { padding: 11px 14px; border-radius: 12px; margin-bottom: 16px; font-size: 14px; } .aviso.error { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; } .aviso.bien { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; } .aviso.info { background: #dbeafe; color: #1d4ed8; border: 1px solid #bfdbfe; } .vacio { color: var(--tenue); text-align: center; padding: 44px 20px; } /* ---------- QR (2FA) ---------- */ /* La librería no fija width/height en el , solo viewBox: sin esto se dibuja al tamaño por defecto del navegador (~300x150) en vez de ocupar el contenedor. */ .qr { max-width: 200px; margin: 14px auto; padding: 12px; background: #fff; border: 1px solid var(--borde); border-radius: 12px; } .qr svg { width: 100%; height: auto; display: block; } /* ---------- hilo de disputa ---------- */ .hilo-disputa { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--borde); } .hilo-disputa .mensaje { padding: 8px 0; border-bottom: 1px solid var(--borde); } .hilo-disputa .mensaje:last-of-type { border-bottom: none; } .f-mensaje-disputa { display: flex; gap: 8px; margin-top: 10px; } .f-mensaje-disputa input { flex: 1; } /* ---------- tabla ---------- */ /* En celular angosto una tabla de varias columnas puede no entrar — que desborde ella sola, con su propio scroll, en vez de arrastrar toda la página de costado. */ .tabla-scroll { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 14px; } th { text-align: left; color: var(--tenue); font-weight: 500; font-size: 12.5px; padding: 8px 10px; border-bottom: 1px solid var(--borde); } td { padding: 10px; border-bottom: 1px solid var(--borde); } td.num { font-variant-numeric: tabular-nums; text-align: right; } /* ---------- visor ---------- */ /* Fondo oscuro fijo a propósito, sea cual sea el tema del sitio: es el contraste que hace legible una foto o un video de cualquier color. */ .visor { position: fixed; inset: 0; background: rgba(0,0,0,.88); display: flex; align-items: center; justify-content: center; padding: 32px; z-index: 50; } .visor img, .visor video { max-width: 100%; max-height: 100%; border-radius: 8px; } .visor .cerrar { position: absolute; top: 18px; right: 22px; } code { background: var(--bg); padding: 2px 6px; border-radius: 5px; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 13px; word-break: break-all; } .secreto { display: block; padding: 12px; margin: 10px 0; line-height: 1.7; }