@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Oswald:wght@500;600;700&display=swap'); :root { --color-primary: #E8562B; /* Naranja balón */ --color-primary-hover: #cf431b; --color-tinta: #201A16; /* Texto principal */ --color-amber: #F2A900; /* Apoyo, acentos */ --color-gray: #6B7280; /* Texto secundario / bordes */ --color-background: #FFF9F2; /* Lienzo */ --color-surface: #FFFFFF; /* Tarjetas */ --color-border: #F0DFCB; --color-teal: #0E7C6B; /* Estado "confirmado" y CTA secundaria */ --color-tint: #FFE4D6; /* Fondos de icono y hover */ /* Estados */ --bg-por-revisar: #FFFBEB; --text-por-revisar: #D97706; --bg-duplicado: #FEF3C7; --text-duplicado: #D97706; --bg-aprobada: #ECFDF5; --text-aprobada: #059669; --bg-rechazada: #FEF2F2; --text-rechazada: #DC2626; --bg-archivado: #F3F4F6; --text-archivado: #4B5563; --bg-confirmado: #E3F6F3; /* Distinto de --bg-aprobada: "confirmado" (asistente) y "aprobada" (ficha) son estados distintos */ /* Fijos: a diferencia de --color-tinta/--color-background, NO se invierten en modo oscuro (bloques @media/:root[data-tema] de arriba). Los usa la cabecera de .tarjeta-lista (Convocados, Coches, Partidos... y la maqueta de la portada, Fase 37) y .comparativa-col--callup -- con --color-tinta normal, en modo oscuro se leerían como una tarjeta CLARA sobre fondo oscuro, el efecto contrario al buscado. */ --tinta-fija: #201A16; --crema-fija: #FFF9F2; /* Paleta de identidad de avatar (Fase 38): color determinista por nombre en .tarjeta-lista-avatar, misma paleta que ya usaba la maqueta estática de la portada (naranja/ámbar/marrón/arena) más dos tonos de marca para dar variedad en listas largas. Fijos por el mismo motivo que --tinta-fija: es identidad de persona, no un estado que deba invertirse con el tema. */ --avatar-1: #E8562B; --avatar-2: #F2A900; --avatar-3: #7A6A5D; --avatar-4: #C4B8AC; --avatar-5: #0E7C6B; --avatar-6: #6B7280; --font-title: 'Oswald', sans-serif; --font-body: 'Inter', sans-serif; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --shadow-warm-md: 0 8px 16px -4px rgba(232, 86, 43, 0.18), 0 4px 6px -2px rgba(232, 86, 43, 0.12); --shadow-warm-lg: 0 14px 24px -6px rgba(232, 86, 43, 0.22), 0 6px 10px -3px rgba(232, 86, 43, 0.14); --radius-md: 12px; --radius-lg: 16px; --radius-2xl: 1.5rem; --radius-3xl: 1.75rem; --transition-all: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } /* Modo oscuro: automático según preferencia del sistema operativo, salvo que el usuario haya elegido explícitamente un tema con el botón del header (data-tema en , persistido en localStorage por app.js). */ @media (prefers-color-scheme: dark) { :root { --color-tinta: #F2F1EC; --color-gray: #9CA3AF; --color-background: #14171B; --color-surface: #1C2126; --color-border: #2B3037; --color-teal: #2DD4BF; /* Variante clara: la del tema claro (#0E7C6B) no llega a 4.5:1 sobre fondo oscuro */ --color-tint: rgba(255, 228, 214, 0.12); --bg-por-revisar: rgba(251, 191, 36, 0.14); --text-por-revisar: #FBBF24; --bg-duplicado: rgba(251, 191, 36, 0.2); --text-duplicado: #FCD34D; --bg-aprobada: rgba(52, 211, 153, 0.14); --text-aprobada: #34D399; --bg-rechazada: rgba(248, 113, 113, 0.14); --text-rechazada: #F87171; --bg-archivado: rgba(156, 163, 175, 0.14); --text-archivado: #D1D5DB; --bg-confirmado: rgba(45, 212, 191, 0.14); --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.45), 0 4px 6px -2px rgba(0, 0, 0, 0.3); --shadow-warm-md: 0 8px 16px -4px rgba(232, 86, 43, 0.32), 0 4px 6px -2px rgba(232, 86, 43, 0.22); --shadow-warm-lg: 0 14px 24px -6px rgba(232, 86, 43, 0.4), 0 6px 10px -3px rgba(232, 86, 43, 0.26); } } :root[data-tema="oscuro"] { --color-tinta: #F2F1EC; --color-gray: #9CA3AF; --color-background: #14171B; --color-surface: #1C2126; --color-border: #2B3037; --color-teal: #2DD4BF; /* Variante clara: la del tema claro (#0E7C6B) no llega a 4.5:1 sobre fondo oscuro */ --color-tint: rgba(255, 228, 214, 0.12); --bg-por-revisar: rgba(251, 191, 36, 0.14); --text-por-revisar: #FBBF24; --bg-duplicado: rgba(251, 191, 36, 0.2); --text-duplicado: #FCD34D; --bg-aprobada: rgba(52, 211, 153, 0.14); --text-aprobada: #34D399; --bg-rechazada: rgba(248, 113, 113, 0.14); --text-rechazada: #F87171; --bg-archivado: rgba(156, 163, 175, 0.14); --text-archivado: #D1D5DB; --bg-confirmado: rgba(45, 212, 191, 0.14); --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.45), 0 4px 6px -2px rgba(0, 0, 0, 0.3); --shadow-warm-md: 0 8px 16px -4px rgba(232, 86, 43, 0.32), 0 4px 6px -2px rgba(232, 86, 43, 0.22); --shadow-warm-lg: 0 14px 24px -6px rgba(232, 86, 43, 0.4), 0 6px 10px -3px rgba(232, 86, 43, 0.26); } :root[data-tema="claro"] { --color-tinta: #201A16; --color-gray: #6B7280; --color-background: #FFF9F2; --color-surface: #FFFFFF; --color-border: #F0DFCB; --color-teal: #0E7C6B; --color-tint: #FFE4D6; --bg-por-revisar: #FFFBEB; --text-por-revisar: #D97706; --bg-duplicado: #FEF3C7; --text-duplicado: #D97706; --bg-aprobada: #ECFDF5; --text-aprobada: #059669; --bg-rechazada: #FEF2F2; --text-rechazada: #DC2626; --bg-archivado: #F3F4F6; --text-archivado: #4B5563; --bg-confirmado: #E3F6F3; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --shadow-warm-md: 0 8px 16px -4px rgba(232, 86, 43, 0.18), 0 4px 6px -2px rgba(232, 86, 43, 0.12); --shadow-warm-lg: 0 14px 24px -6px rgba(232, 86, 43, 0.22), 0 6px 10px -3px rgba(232, 86, 43, 0.14); } * { box-sizing: border-box; margin: 0; padding: 0; } /* Respeta la preferencia de reducir movimiento del sistema operativo: neutraliza transiciones, animaciones y scroll suave (rediseño visual, Paso 3 y Paso 4 — botones, .card-ticket, ancla "Entra y pruébalo"). */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } html { scroll-behavior: smooth; } body { font-family: var(--font-body); background-color: var(--color-background); color: var(--color-tinta); line-height: 1.5; padding: 2rem 1rem; min-height: 100vh; } .container { max-width: 768px; margin: 0 auto; } /* Header & Logo styling */ header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2.5rem; border-bottom: 1px solid var(--color-border); padding-bottom: 0.9rem; } /* Fase 27.C.3: en la vista de evento el header global se reduce al isotipo (sin wordmark ni eslogan) -- la cabecera compacta del propio evento (.appbar, más abajo) ya da contexto de dónde está el usuario. */ header.header-compacto { margin-bottom: 1rem; padding-bottom: 0.6rem; } /* Fase 37 (37.B.4): el claim vive en .marca-lockup-texto (wordmark + claim juntos) -- ocultarlo entero basta para dejar la cabecera interna de la app en una sola fila, sin claim. Los selectores .logo-text/.logo-slogan sueltos se conservan por si algún día se reutiliza header-compacto sobre un header que no lleve el lockup nuevo (p. ej. frontend/admin.html, sin tocar en esta fase, sigue con el suelto de antes). */ header.header-compacto .marca-lockup-texto, header.header-compacto .logo-text, header.header-compacto .logo-slogan { display: none; } .logo-container { display: flex; align-items: center; gap: 0.75rem; } .logo-container svg { color: var(--color-tinta); } /* Fase 37 (37.C.1): nombre de marca en texto corrido. ".marca" fija la familia display sobre el peso de cuerpo; ".up" colorea el segmento "-Up" siempre en --color-primary (D37.4), tanto en el wordmark de cabecera/pie (.logo-text ya trae su propia tipografía -- ".marca" ahí es redundante a propósito, por coherencia con "aplicada a todas las apariciones") como en cualquier mención dentro de un párrafo normal. */ .marca { font-family: var(--font-title); font-weight: 600; } .marca .up, .logo-text .up { color: var(--color-primary); } .logo-text { font-family: var(--font-title); font-size: 1.5rem; font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em; color: var(--color-tinta); /* Sin esto, el guion de "CALL-UP" es un punto de ruptura válido: al compartir fila con .header-acciones en móvil, un flex item puede encoger hasta ahí (min-content) antes que desbordar, partiendo la marca en dos líneas ("CALL-" / "UP") en vez de dejar que .header-acciones ceda sitio. */ white-space: nowrap; } /* Fase 37 (37.B.2): el claim baja de "Estás convocado." (voz de producto, singular, docs/MARCA.md) al plural de marca "estáis convocados" (D37.5), en versalitas -- letra normal minúscula + font-variant:small-caps, en vez de un text-transform:uppercase que igualaría todas las letras al mismo tamaño. Color: --color-gray en vez de la "tinta al 40%" que describe el documento de la fase -- un tinta al 40% sobre --color-background mide ~2.5:1 de contraste en tema claro, por debajo del 4.5:1 que exige AA (criterio de aceptación 8); --color-gray es el token de texto secundario ya auditado en el resto de la app y sí llega a AA sobre ambos fondos. */ .logo-slogan { font-family: var(--font-title); font-size: 0.78rem; color: var(--color-gray); font-weight: 600; letter-spacing: 1.8px; font-variant: small-caps; } /* Fase 37 (37.B.1/37.B.2): tile redondeado --color-primary con el silbato en blanco (D37.12, sustituye al isotipo "Check libre" suelto que llevaba el header). Los dos círculos interiores del SVG usan var(--color-primary), no currentColor: son un "hueco" que debe leerse siempre del mismo naranja que el tile de fondo, en los dos temas (--color-primary no cambia entre temas). */ .marca-lockup { display: flex; align-items: center; gap: 0.65rem; } .marca-isotipo { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--color-primary); box-shadow: var(--shadow-warm-md); } .marca-lockup-texto { display: flex; flex-direction: column; gap: 0.1rem; } /* Fase 37 (37.B.3): mismo lockup en el pie, a escala menor y sin sombra. */ .marca-lockup--pie { gap: 0.6rem; } .marca-lockup--pie .marca-isotipo { width: 30px; height: 30px; border-radius: var(--radius-md); box-shadow: none; } .marca-lockup--pie .logo-text { font-size: 1.15rem; } .marca-lockup--pie .logo-slogan { font-size: 0.66rem; letter-spacing: 1.4px; } /* Grupo de acciones a la derecha del header: toggle de tema + panel de admin */ .header-acciones { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .btn-tema { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 50%; font-size: 1.1rem; line-height: 1; cursor: pointer; transition: var(--transition-all); flex-shrink: 0; } .btn-tema:hover { border-color: var(--color-primary); } /* Fase 29: los tres formularios de acceso que usaban esta clase se retiran con el panel del header. Sigue viva solo para #banner-vincular-convocatorias (el "¿son tuyas?" de la Fase 12). */ .admin-form { display: flex; flex-wrap: wrap; gap: 0.5rem; } .admin-form[hidden] { display: none; } .admin-form input { padding: 0.5rem 0.75rem; border: 1px solid var(--color-gray); border-radius: 6px; font-size: 0.875rem; flex: 1 1 140px; min-width: 0; } .admin-form-error { font-size: 0.8rem; font-weight: 600; color: var(--text-rechazada); } /* Cabecera compacta en móvil. Hasta la Fase 29 esto apilaba el logo y las acciones en dos filas (flex-direction: column): con el header de entonces -- dos paneles de formulario completos (entrar / crear cuenta / recuperar) -- ponerlos junto al logo en la misma fila no cabía en un iPhone normal. Desde la Fase 29 el header solo lleva el toggle de tema y "Entrar" (o el nombre + "Salir"): cabe de sobra junto al logo, así que se apila mismo layout de fila que en escritorio (justify-content: space-between del selector "header" base) y se gana una fila entera de alto de cabecera. */ @media (max-width: 480px) { body { padding: 1.25rem 1rem; } header { margin-bottom: 1.25rem; padding-bottom: 0.65rem; gap: 0.5rem; } .logo-container svg { width: 28px; height: 28px; } .logo-text { font-size: 1.35rem; line-height: 1; } .logo-slogan { font-size: 0.7rem; } .header-acciones { gap: 0.4rem; flex-wrap: nowrap; } .btn-tema { width: 1.9rem; height: 1.9rem; font-size: 0.95rem; } .acceso-discreto, .sesion-nombre { font-size: 0.78rem; } } /* Sections */ section { margin-bottom: 2.5rem; } h2 { font-family: var(--font-title); font-size: 1.75rem; font-weight: 600; text-transform: uppercase; margin-bottom: 1.25rem; color: var(--color-tinta); border-left: 4px solid var(--color-primary); padding-left: 0.75rem; } h3 { font-family: var(--font-title); font-size: 1.25rem; font-weight: 500; text-transform: uppercase; margin: 1.5rem 0 1rem; color: var(--color-tinta); } /* Forms */ form { background: var(--color-surface); border-radius: var(--radius-md); padding: 1.5rem; box-shadow: var(--shadow-md); display: grid; gap: 1rem; } form > div { display: grid; gap: 0.35rem; } /* Fase 25 (25.A.6, AUD-09): mismo bug de cascada que ".admin-form[hidden]" -- "form > div { display: grid }" de arriba gana al [hidden] del user-agent, así que #fijar-password-consentimiento-grupo (oculto solo al recuperar contraseña, ver mostrarFijarPassword() en app.js) se quedaba visible y presente en el árbol de accesibilidad aunque tuviera el atributo hidden. Confirmado con Playwright: era el único caso sin este parche en toda la página -- el resto de "hidden" del documento ya computan display:none. */ #fijar-password-consentimiento-grupo[hidden] { display: none; } /* Mismo bug de cascada que .admin-form[hidden] / .banner-confirmar[hidden]: el "display: grid" de arriba gana al [hidden] del user-agent por origen de la regla, aunque tenga menor especificidad — hay que apagarlo a mano. Cubre los 3 pasos del asistente de creación de evento (Fase 17), no solo el de convocados (que conserva la clase .paso-evento). */ .paso-evento[hidden] { display: none; } label { font-size: 0.875rem; font-weight: 600; color: var(--color-tinta); } /* `email` faltaba en esta lista desde siempre, pero no se notaba: los únicos campos de email vivían en el panel del header y en landing.html, que tenían estilos propios. Al mudarse a #vista-acceso (Fase 29) quedaba como una caja blanca sin borde -- ilegible en modo oscuro. */ input[type="text"], input[type="email"], input[type="url"], input[type="number"], input[type="date"], input[type="password"], select, textarea { font-family: var(--font-body); font-size: 0.95rem; padding: 0.65rem 0.85rem; border: 1px solid var(--color-border); border-radius: 8px; background-color: var(--color-background); color: var(--color-tinta); transition: var(--transition-all); width: 100%; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--color-teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-teal) 15%, transparent); } input[type="checkbox"] { width: auto; margin-right: 0.5rem; accent-color: var(--color-primary); } button { font-family: var(--font-title); font-size: 1.1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.65rem 1.25rem; border: none; border-radius: 8px; cursor: pointer; transition: var(--transition-all); } button[type="submit"], .btn-primary { background-color: var(--color-primary); color: var(--color-surface); border-radius: 999px; } button[type="submit"]:hover, .btn-primary:hover { background-color: var(--color-primary-hover); transform: translateY(-1px); box-shadow: var(--shadow-warm-md); } /* :not() excluye los botones con una clase de jerarquía explícita (D3): sin esto, `button[type="button"]` (selector de atributo, más específico que una sola clase) ganaba siempre sobre `.btn-primary`/`.btn-secondary`/`.btn-ghost` en cualquier

fuera del