/* =========================================================
   Tema Mr. Shifu Stream — se carga después de panel.css
   Colores del logo: negro, rojo neón, blanco hueso y beige del pelaje
   Letras: Anton (como "STREAM") y Permanent Marker (pincel, como "Shifu")
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Permanent+Marker&display=swap');

:root {
  --bg: #070707;
  --bg-2: #0d0d0d;
  --surface: #141414;
  --surface-2: #1b1b1b;
  --hover: #232323;
  --border: #262626;
  --border-2: #363636;
  --text: #fbf6f3;
  --text-2: #d2c9c4;
  --muted: #8f8682;
  --navy: #000;
  --navy-2: #2a0606;
  --accent: #e3241b;
  --accent-2: #b5150f;
  --accent-soft: rgba(227, 36, 27, .14);
  --red: #ff3b30;
  --red-soft: rgba(255, 59, 48, .12);
  --fur: #c4a197;
  --glow: 0 0 16px rgba(255, 45, 35, .55), 0 0 40px rgba(227, 36, 27, .25);
  --display: 'Anton', Impact, sans-serif;
  --brush: 'Permanent Marker', 'Segoe Script', cursive;
  --shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 14px 34px -16px rgba(0, 0, 0, .9);
}
html { color-scheme: dark; }
body, body.pub { background: var(--bg); }

/* Franja superior */
.flagbar { background: linear-gradient(90deg, #000, var(--accent), var(--text), var(--red), #000, var(--accent)); background-size: 300% 100%; }

/* Fondo animado de la portada */
.o1 { background: radial-gradient(circle, rgba(227, 36, 27, .50), transparent 65%); }
.o2 { background: radial-gradient(circle, rgba(130, 10, 6, .60), transparent 65%); }
.o3 { background: radial-gradient(circle, rgba(196, 161, 151, .20), transparent 65%); }
.dots { background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.2px); }
.t1, .t4 { stroke: var(--accent); }
.t2 { stroke: var(--fur); }
.t3 { stroke: var(--text); }

/* Logo */
.logo-pulse::after { border-color: var(--fur); }
.logo-pulse .logo-img { box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 0 28px rgba(227, 36, 27, .45), 0 16px 36px -12px #000; }

/* Título: más pequeño y con la letra del logo */
.pub-title { font-family: var(--display); font-weight: 400; font-size: clamp(26px, 4.6vw, 38px); letter-spacing: .02em; line-height: 1.1; text-transform: none; color: var(--text); }
.pub-title .hl { font-family: inherit; text-transform: none; font-size: 1em; letter-spacing: inherit; color: var(--text); text-shadow: none; }
.pub-title .hl::after { display: none; }
.pub-sub { margin: 10px 0 26px; color: var(--muted); }

/* Tarjeta del formulario */
.pub-card { background: rgba(17, 17, 17, .88); border-color: var(--border); box-shadow: 0 0 0 1px rgba(255, 59, 48, .07), 0 30px 70px -30px rgba(227, 36, 27, .45); }
.pub-card::before { background: linear-gradient(90deg, var(--accent), var(--red) 60%, var(--fur)); }
.big-label { font-family: var(--display); font-weight: 400; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.big-input { background: #0b0b0b; border-color: var(--border-2); color: var(--text); }
.big-input::placeholder, .big-field.is-select select:invalid { color: #6f6763; }
.big-input:hover { border-color: #4a4a4a; }
.big-input:focus { border-color: var(--red); box-shadow: 0 0 0 4px rgba(227, 36, 27, .18); }
.big-field.is-select option { background: var(--surface); color: var(--text); }
.big-field:focus-within > svg:first-child, .big-field.is-select:focus-within .chev { color: var(--red); }
.big-btn { font-family: var(--display); font-weight: 400; font-size: 20px; letter-spacing: .06em; text-transform: uppercase;
  background: linear-gradient(135deg, var(--red), var(--accent-2)); box-shadow: 0 12px 28px -12px rgba(227, 36, 27, .8); }
.big-btn:hover { box-shadow: 0 0 0 1px rgba(255, 59, 48, .5), 0 18px 34px -12px rgba(227, 36, 27, .9); }
.progress { background-image: linear-gradient(90deg, transparent, var(--red), var(--fur), transparent); }

/* Resultados */
.results-title { font-family: var(--display); font-weight: 400; font-size: 16px; letter-spacing: .1em; color: var(--text-2); }
.mail, .noresult { background: var(--surface); border-color: var(--border); }
.digits .d { background: linear-gradient(180deg, #1f1f1f, #121212); border-color: var(--border-2); color: var(--text); }
.digits:hover .d { border-color: var(--red); color: var(--red); }
.digits.copied .d { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Iconos de plataforma con su color de marca */
.svc-ico { background: #2a2a2a; }
.svc-ico.netflix { background: #e50914; }
.svc-ico.disney { background: #1f4fd6; }
.svc-ico.prime { background: #00a8e1; }
.svc-ico.hbomax { background: #5b2bb5; }
.svc-ico.paramount { background: #0064ff; }
.svc-ico.crunchyroll { background: #f47521; }

/* Controles comunes */
.input, .select { background-color: #0b0b0b; color: var(--text); }
.input::placeholder { color: #6f6763; }
.input:hover, .select:hover, .btn.secondary:hover, .chip:hover span { border-color: #4a4a4a; }
.select option { background: var(--surface); }
.btn:hover { box-shadow: 0 6px 18px -6px rgba(227, 36, 27, .6); }
.btn.secondary { background: var(--surface-2); }
.alert { color: #ff9b93; border-color: rgba(255, 59, 48, .3); }
.modal .scrim { background: rgba(0, 0, 0, .7); }
.toast { background: var(--surface-2); }
.avatar { border-color: rgba(227, 36, 27, .3); }
.chip span { background: var(--surface); }

/* Administración */
.auth { background: radial-gradient(700px 360px at 15% -10%, rgba(227, 36, 27, .16), transparent 70%), radial-gradient(600px 320px at 100% 110%, rgba(196, 161, 151, .08), transparent 70%), var(--bg); }
.auth-brand h1, .page-head h1 { font-family: var(--display); font-weight: 400; letter-spacing: .04em; text-transform: uppercase; color: var(--text); }
.adm-top { background: #000; border-bottom: 1px solid rgba(227, 36, 27, .35); }
.estado.ok { color: #4ade80; }

/* Letra principal: Poppins (reemplaza a Anton) */
:root { --display: 'Poppins', 'Segoe UI', sans-serif; }
.pub-title { font-weight: 800; letter-spacing: -.02em; font-size: clamp(28px, 4.8vw, 40px); }
.big-label { font-weight: 600; font-size: 12.5px; letter-spacing: .1em; }
.big-btn { font-weight: 700; font-size: 17px; letter-spacing: .04em; }
.results-title { font-weight: 600; font-size: 13px; letter-spacing: .12em; }
.auth-brand h1, .page-head h1 { font-weight: 700; letter-spacing: 0; text-transform: none; }