@font-face { font-family: 'Telefonica Sans'; src: url('fonts/Telefonica_Sans_Light.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Telefonica Sans'; src: url('fonts/Telefonica_Sans_Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Telefonica Sans'; src: url('fonts/Telefonica_Sans_Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Telefonica Sans'; src: url('fonts/Telefonica_Sans_DemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Telefonica Sans'; src: url('fonts/Telefonica_Sans_Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
/* Tokens del sistema Telefónica (los de la demo y el deck de PEX) */
:root { --night:#07071A; --violet:#8A5CFF; --blue:#0066FF; --blue-d:#0058DB; --blue-l:#8FB6FF; --blue-xl:#E5EFFF; --navy:#031A34; --ink:#3A4A66; --slate:#6A7690; --line:#D6DCE8; --paper:#F7F7FF; }
html, body { font-family: 'Telefonica Sans', system-ui, sans-serif; }
body { background: var(--paper); color: var(--navy); -webkit-font-smoothing: antialiased; }
.eyebrow { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; }
.card { background:#fff; border:1px solid var(--line); border-radius:18px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:999px; padding:10px 20px; font-weight:600; font-size:14px; background:var(--blue); color:#fff; transition:background .15s, opacity .15s; }
.btn:hover { background:var(--blue-d); } .btn:disabled { opacity:.45; cursor:not-allowed; }
.btn2 { display:inline-flex; align-items:center; gap:8px; border-radius:999px; padding:9px 18px; font-weight:600; font-size:14px; background:#fff; color:var(--navy); border:1px solid var(--line); }
.btn2:hover { border-color:var(--blue-l); }
.campo { width:100%; border:1px solid var(--line); border-radius:12px; padding:10px 12px; background:#fff; font-size:15px; line-height:1.45; }
.campo:focus { outline:2px solid var(--blue); outline-offset:0; border-color:transparent; }
textarea.campo { min-height:84px; resize:vertical; }
.etq { font-size:13px; font-weight:600; color:var(--ink); margin-bottom:4px; display:block; }
.ayuda { font-size:12px; color:var(--slate); }
.chip { display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:2px 10px; font-size:11px; font-weight:600; }
.t-slate { color:var(--slate); } .t-ink { color:var(--ink); } .t-blue { color:var(--blue); } .bg-xl { background:var(--blue-xl); } .bg-navy { background:var(--navy); }
.stage { background: radial-gradient(60% 70% at 85% 10%, rgba(138,92,255,.38), transparent 60%), radial-gradient(50% 60% at 10% 90%, rgba(0,102,255,.35), transparent 60%), radial-gradient(40% 40% at 50% 50%, rgba(255,60,180,.10), transparent 70%), var(--night); background-attachment: fixed; color:#fff; }
.glass { background: rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); }
.shimmer { background: linear-gradient(90deg, rgba(0,102,255,.08) 25%, rgba(0,102,255,.22) 50%, rgba(0,102,255,.08) 75%); background-size:200% 100%; animation: sh 1.2s linear infinite; }
@keyframes sh { from { background-position:200% 0; } to { background-position:-200% 0; } }
.reveal { animation: up .5s cubic-bezier(.2,.7,.2,1) both; } @keyframes up { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.pulse { animation: pulse 1.4s ease-in-out infinite; } @keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.3; } }
.sel { border-color:var(--blue) !important; box-shadow:0 0 0 2px var(--blue); }

.noche select:not(.campo) { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.2); }
.noche code { color: var(--blue-l); }
/* ===== Look «The Experiment» (aprobado en la demo, PR #2): noche con neón, anillos, cristal y titulares grandes ===== */
.mono { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; letter-spacing: .18em; text-transform: uppercase; font-size: 11px; }
.anillos::before, .anillos::after { content:''; position: fixed; border-radius: 9999px; border: 2px solid rgba(0,102,255,.45); pointer-events: none; z-index: 0; }
.anillos::before { width: 900px; height: 900px; right: -320px; top: -360px; }
.anillos::after { width: 560px; height: 560px; right: -140px; top: -180px; border-color: rgba(138,92,255,.35); }
.anillos > * { position: relative; z-index: 1; }
.noche.anillos::before { border-color: rgba(0,102,255,.28); } .noche.anillos::after { border-color: rgba(138,92,255,.2); }
.noche .card { background-color: rgba(12,12,34,.72); }
body.noche { background: radial-gradient(60% 70% at 85% 10%, rgba(138,92,255,.38), transparent 60%), radial-gradient(50% 60% at 10% 90%, rgba(0,102,255,.35), transparent 60%), radial-gradient(40% 40% at 50% 50%, rgba(255,60,180,.10), transparent 70%), var(--night); background-attachment: fixed; color: #fff; }
.noche .card { background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.13); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.noche .t-ink { color: rgba(255,255,255,.78); } .noche .t-slate, .noche .ayuda { color: rgba(255,255,255,.52); }
.noche .t-blue { color: var(--blue-l); } .noche .etq { color: rgba(255,255,255,.88); }
.noche .bg-xl { background: rgba(0,102,255,.16); } .noche .bg-white { background: rgba(255,255,255,.07) !important; color: #fff; }
.noche .bg-navy { background: rgba(3,26,52,.72); border: 1px solid rgba(143,182,255,.25); }
.noche .eyebrow { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; letter-spacing: .18em; font-weight: 500; }
.noche h1 { font-weight: 300; letter-spacing: -.01em; }
.noche .campo { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.16); color-scheme: dark; }
.noche .campo::placeholder { color: rgba(255,255,255,.35); }
.noche .campo:focus { outline-color: var(--blue); background: rgba(255,255,255,.09); }
.noche .campo[readonly] { background: rgba(255,255,255,.03); }
.noche select.campo option, .noche select option { color: var(--navy); }
.noche .btn { box-shadow: 0 0 0 0 rgba(0,102,255,0); transition: box-shadow .2s, background .15s; }
.noche .btn:hover { box-shadow: 0 0 28px rgba(0,102,255,.55); }
.noche .btn2 { background: rgba(255,255,255,.07); color: #fff; border-color: rgba(255,255,255,.18); }
.noche .btn2:hover { border-color: var(--blue-l); background: rgba(255,255,255,.11); }
.noche .sel { border-color: var(--blue) !important; box-shadow: 0 0 0 2px var(--blue), 0 0 32px rgba(0,102,255,.45); }
.noche table tr { border-color: rgba(255,255,255,.1) !important; }
.noche [style*="border-color:var(--line)"] { border-color: rgba(255,255,255,.14) !important; }
.noche .shimmer { background: linear-gradient(90deg, rgba(143,182,255,.08) 25%, rgba(143,182,255,.28) 50%, rgba(143,182,255,.08) 75%); background-size: 200% 100%; }
.cristal-barra { background: rgba(7,7,26,.72); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

/* ===== Identidad Telefónica (DESIGN_SYSTEM de Accelerate Impact, el mismo kit que los prototipos) =====
   Papel cálido, tinta, un solo azul como acento, jerarquía por tamaño y peso light, líneas finas en vez de sombras,
   etiquetas mono en mayúsculas. «papel» para participante/admin/entrada; «profundo» para la sala proyectada. */
:root { --k-azul:#0066FF; --k-azul-o:#0050C8; --k-azul-c:#E8F0FF; --k-oscuro:#0B2739; --k-tinta:#0F0F0F; --k-tinta-2:#2A2A28; --k-tinta-3:#6B6B66;
  --k-papel:#FAFAF7; --k-papel-2:#F3EFE8; --k-linea:rgba(15,15,15,.10); --k-linea-2:rgba(15,15,15,.20); --k-ok:#0B7A55; --k-mono:ui-monospace,'SFMono-Regular',Menlo,monospace; }
body.papel { background: var(--k-papel); color: var(--k-tinta); }
body.papel.anillos::before, body.papel.anillos::after { display: none; }
.papel h1, .papel h2, .papel .text-4xl, .papel .text-5xl, .papel .text-6xl, .papel .text-3xl { font-weight: 300 !important; letter-spacing: -.02em; color: var(--k-tinta); }
.papel h2, .papel h3, .papel .text-2xl, .papel .text-xl { font-weight: 400 !important; letter-spacing: -.01em; }
.papel .font-bold, .papel .font-semibold, .papel b, .papel strong { font-weight: 500 !important; }
.papel .eyebrow, .papel .mono { font-family: var(--k-mono); font-weight: 400; letter-spacing: .2em; color: var(--k-tinta-3); }
/* texto que estaba pensado en blanco sobre noche → tinta */
.papel .text-white, .papel [class*="text-white/8"], .papel [class*="text-white/7"] { color: var(--k-tinta) !important; }
.papel [class*="text-white/6"], .papel [class*="text-white/5"] { color: var(--k-tinta-2) !important; }
.papel [class*="text-white/4"], .papel [class*="text-white/3"] { color: var(--k-tinta-3) !important; }
.papel .text-\[var\(--blue-l\)\], .papel .t-blue { color: var(--k-azul) !important; }
.papel .t-ink { color: var(--k-tinta-2); } .papel .t-slate, .papel .ayuda { color: var(--k-tinta-3); }
.papel .text-\[\#7FE0B5\] { color: var(--k-ok) !important; }
/* superficies: blanco con filo fino, sin cristal ni sombras */
.papel .card, .papel .glass, .papel .bg-white, .papel [class*="bg-white/"] { background: #fff !important; border: 1px solid var(--k-linea) !important; color: var(--k-tinta); backdrop-filter: none; box-shadow: none !important; }
.papel .rounded-3xl, .papel .rounded-\[28px\] { border-radius: 20px !important; }
.papel .bg-xl { background: var(--k-azul-c) !important; }
.papel .bg-navy { background: var(--k-oscuro) !important; color: #fff; }
.papel .bg-navy .t-slate, .papel .bg-navy [class*="text-white/"] { color: rgba(255,255,255,.62) !important; }
.papel .bg-navy .text-white, .papel .bg-navy h1, .papel .bg-navy h2, .papel .bg-navy h3 { color: #fff !important; }
.papel .cristal-barra { background: rgba(250,250,247,.92) !important; border: 1px solid var(--k-linea) !important; color: var(--k-tinta); backdrop-filter: blur(10px); }
.papel [style*="border-color:var(--line)"], .papel table tr { border-color: var(--k-linea) !important; }
/* controles */
.papel .btn { background: var(--k-azul); color: #fff !important; font-weight: 500; box-shadow: none !important; }
.papel .btn:hover { background: var(--k-azul-o); box-shadow: none !important; }
.papel .btn2 { background: transparent; color: var(--k-tinta) !important; border: 1px solid var(--k-linea-2); font-weight: 500; }
.papel .btn2:hover { border-color: var(--k-tinta); background: transparent; }
.papel .campo { background: #fff; color: var(--k-tinta); border: 1px solid var(--k-linea-2); color-scheme: light; }
.papel .campo::placeholder { color: #A3A39E; }
.papel .campo:focus { outline: 2px solid var(--k-azul); border-color: transparent; background: #fff; }
.papel .campo[readonly] { background: var(--k-papel-2); }
.papel select:not(.campo) { background: #fff; color: var(--k-tinta); border-color: var(--k-linea-2); }
.papel .etq { color: var(--k-tinta-2); font-weight: 500; }
.papel .sel { border-color: var(--k-azul) !important; box-shadow: 0 0 0 1px var(--k-azul) !important; }
.papel .chip { font-weight: 500; }
.papel code { color: var(--k-azul-o); }
.papel .shimmer { background: linear-gradient(90deg, rgba(0,102,255,.06) 25%, rgba(0,102,255,.16) 50%, rgba(0,102,255,.06) 75%); background-size: 200% 100%; }
.papel .bg-\[var\(--blue\)\] { color: #fff; }
.papel .bg-\[var\(--blue\)\] [class*="text-white"] { color: #fff !important; }

/* Sala proyectada: profundo y plano (sin neón), tipografía grande y light, líneas finas */
body.profundo { background: var(--k-oscuro); color: #fff; }
body.profundo.anillos::before { border: 1px solid rgba(255,255,255,.10); } body.profundo.anillos::after { border: 1px solid rgba(0,102,255,.35); }
.profundo h1, .profundo h2, .profundo .text-4xl, .profundo .text-5xl, .profundo .text-6xl { font-weight: 300 !important; letter-spacing: -.02em; }
.profundo .font-bold, .profundo .font-semibold { font-weight: 500 !important; }
.profundo .glass, .profundo .card { background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.12) !important; backdrop-filter: none; box-shadow: none; }
.profundo .eyebrow, .profundo .mono { font-family: var(--k-mono); font-weight: 400; letter-spacing: .2em; }
.profundo .btn { box-shadow: none !important; }
.papel .stage { background: var(--k-papel) !important; color: var(--k-tinta); }
.papel [class*="hover:text-white"]:hover { color: var(--k-azul) !important; }
.papel [class*="shadow-[0_0"] { box-shadow: none !important; }
.papel .chip.bg-\[var\(--blue\)\] { background: var(--k-tinta) !important; color: #fff !important; }
.papel ::-webkit-scrollbar { height: 6px; } .papel ::-webkit-scrollbar-thumb { background: var(--k-linea-2); border-radius: 9px; } .papel ::-webkit-scrollbar-track { background: transparent; }