/* =====================================================================
   Bingo Rossana — "Pastel dulce" con bordes de neón
   Lila, rosa, menta, durazno y celeste, formas muy redondeadas, y todos los
   bordes con un resplandor de neón (lila / rosa / menta). Claro por defecto;
   el modo oscuro es "Noche lila", donde el neón brilla más. Se carga DESPUÉS
   de los estilos de index.html y de Tailwind, por eso usa !important donde
   pisa utilidades.
   ===================================================================== */
:root {
  --r-lila: #9b7bf0;
  --r-lila-d: #7a5bd0;
  --r-neon-l: #b388ff;   /* neón lila  */
  --r-neon-p: #ff7eb6;   /* neón rosa  */
  --r-neon-m: #5ef0c0;   /* neón menta */
  --r-neon-s: #ffd23f;   /* neón sol   */
  --r-ink: #4a3b6b;
  --r-mut: #8b7bad;
  --r-bg0: #f5eeff;
  --r-bg1: #fff0f6;
  --r-panel: #ffffff;
  --r-cell: #f1e8ff;
  --r-field: #ffffff;
  --r-line: #e2d6fb;
  --r-g: .55;           /* intensidad del resplandor */
}
:root[data-theme="dark"] {
  --r-ink: #f3ecff;
  --r-mut: #b7a8dc;
  --r-bg0: #1b1230;
  --r-bg1: #2a1b4a;
  --r-panel: #261a45;
  --r-cell: #382a5f;
  --r-field: #1f1538;
  --r-line: #4a3a7a;
  --r-g: .95;
}

/* ---- Fondo: pastel con nubes de color y olas suaves ---- */
body {
  font-family: 'Nunito', system-ui, sans-serif;
  background:
    radial-gradient(55% 40% at 5% 0%, rgba(255,157,184,.35) 0%, transparent 70%),
    radial-gradient(55% 40% at 100% 20%, rgba(142,201,255,.35) 0%, transparent 70%),
    radial-gradient(60% 40% at 50% 100%, rgba(155,227,200,.35) 0%, transparent 70%),
    linear-gradient(180deg, var(--r-bg0) 0%, var(--r-bg1) 100%) !important;
  background-attachment: fixed !important;
  color: var(--r-ink);
}
:root[data-theme="dark"] body {
  background:
    radial-gradient(55% 40% at 5% 0%, rgba(255,126,182,.18) 0%, transparent 70%),
    radial-gradient(55% 40% at 100% 20%, rgba(142,201,255,.14) 0%, transparent 70%),
    linear-gradient(180deg, var(--r-bg0) 0%, #120a22 100%) !important;
  background-attachment: fixed !important;
}
body::after {
  content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: 110px; pointer-events: none; z-index: 0; opacity: .55;
  background-repeat: repeat-x; background-size: 320px 110px; background-position: bottom;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='110' viewBox='0 0 320 110'><path d='M0 70 Q40 40 80 70 T160 70 T240 70 T320 70 V110 H0Z' fill='%23ffd28a' fill-opacity='.35'/><path d='M0 84 Q40 58 80 84 T160 84 T240 84 T320 84 V110 H0Z' fill='%23ff9db8' fill-opacity='.35'/><path d='M0 98 Q40 76 80 98 T160 98 T240 98 T320 98 V110 H0Z' fill='%239be3c8' fill-opacity='.45'/></svg>");
}
#root { position: relative; z-index: 1; }

h1, h2, h3, .font-black { font-family: 'Nunito', sans-serif; font-weight: 900; }
::-webkit-scrollbar-thumb { background: var(--r-neon-l) !important; border-radius: 99px; box-shadow: 0 0 6px var(--r-neon-l); }

/* ---- Neón: borde de 2px + resplandor (afuera y adentro) ---- */
.r-card, .r-modal, .r-sheet {
  background: var(--r-panel);
  border: 2px solid var(--r-neon-l);
  border-radius: 26px;
  box-shadow:
    0 0 0 1px rgba(179,136,255,calc(var(--r-g) * .35)),
    0 0 16px rgba(179,136,255,var(--r-g)),
    inset 0 0 16px rgba(179,136,255,calc(var(--r-g) * .14));
}
.r-modal { border-color: var(--r-neon-p); box-shadow: 0 0 0 1px rgba(255,126,182,calc(var(--r-g) * .35)), 0 0 18px rgba(255,126,182,var(--r-g)), inset 0 0 16px rgba(255,126,182,calc(var(--r-g) * .12)); }
.r-modal { background: var(--r-panel); }

/* Tailwind: los paneles viejos (slate / violeta) se vuelven pastel con borde neón */
:root[data-theme="light"] .bg-slate-900\/60, :root[data-theme="light"] .bg-slate-900, :root[data-theme="light"] .bg-slate-800, :root[data-theme="light"] .bg-slate-800\/70 { background-color: #ffffff !important; }
:root[data-theme="light"] .bg-slate-800\/60, :root[data-theme="light"] .bg-slate-800\/40, :root[data-theme="light"] .bg-slate-800\/30 { background-color: #f6f0ff !important; }
:root[data-theme="light"] .bg-slate-700, :root[data-theme="light"] .bg-slate-700\/60 { background-color: #ece2ff !important; }
:root[data-theme="light"] .border-slate-700, :root[data-theme="light"] .border-slate-800, :root[data-theme="light"] .border-slate-600 { border-color: rgba(179,136,255,.7) !important; }
:root[data-theme="light"] .border-slate-700\/50, :root[data-theme="light"] .border-slate-800\/60 { border-color: rgba(179,136,255,.4) !important; }
:root[data-theme="light"] .border-bingopurple\/20, :root[data-theme="light"] .border-bingopurple\/30, :root[data-theme="light"] .border-bingopurple\/40, :root[data-theme="light"] .border-bingopurple\/50 { border-color: rgba(179,136,255,.75) !important; }
:root[data-theme="light"] .text-slate-100, :root[data-theme="light"] .text-slate-200 { color: #3a2d58 !important; }
:root[data-theme="light"] .text-slate-300, :root[data-theme="light"] .text-slate-400 { color: #6c5d90 !important; }
:root[data-theme="light"] .text-slate-500, :root[data-theme="light"] .text-slate-600 { color: #8b7bad !important; }
:root[data-theme="light"] .text-purple-100, :root[data-theme="light"] .text-purple-200 { color: #6d49d8 !important; }
:root[data-theme="light"] .text-purple-300, :root[data-theme="light"] .text-purple-400, :root[data-theme="light"] .text-violet-300, :root[data-theme="light"] .text-indigo-300 { color: #7c5be6 !important; }
:root[data-theme="light"] .text-fuchsia-300, :root[data-theme="light"] .text-pink-300 { color: #e0527a !important; }
:root[data-theme="light"] .from-purple-300 { --tw-gradient-from: #9b7bf0 !important; }
:root[data-theme="light"] .to-fuchsia-300 { --tw-gradient-to: #ff7eb6 !important; }
:root[data-theme="light"] .bg-bingopurple\/10, :root[data-theme="light"] .bg-purple-500\/10, :root[data-theme="light"] .bg-violet-500\/10 { background-color: #f3ecff !important; }
:root[data-theme="light"] .bg-bingopurple\/30, :root[data-theme="light"] .bg-violet-500\/20, :root[data-theme="light"] .bg-indigo-500\/20 { background-color: #e6dafd !important; }

:root[data-theme="dark"] .bg-slate-900\/60, :root[data-theme="dark"] .bg-slate-900 { background-color: var(--r-panel) !important; }
:root[data-theme="dark"] .bg-slate-950\/60, :root[data-theme="dark"] .bg-slate-950\/50, :root[data-theme="dark"] .bg-slate-950\/40 { background-color: rgba(27,18,48,.82) !important; }
:root[data-theme="dark"] .bg-slate-800, :root[data-theme="dark"] .bg-slate-800\/70, :root[data-theme="dark"] .bg-slate-800\/60 { background-color: #382a5f !important; }
:root[data-theme="dark"] .bg-slate-800\/40, :root[data-theme="dark"] .bg-slate-800\/30 { background-color: rgba(56,42,95,.55) !important; }
:root[data-theme="dark"] .border-slate-700, :root[data-theme="dark"] .border-slate-800, :root[data-theme="dark"] .border-slate-600 { border-color: rgba(179,136,255,.7) !important; }
:root[data-theme="dark"] .border-bingopurple\/20, :root[data-theme="dark"] .border-bingopurple\/30, :root[data-theme="dark"] .border-bingopurple\/40 { border-color: rgba(179,136,255,.75) !important; }
:root[data-theme="dark"] .text-purple-100, :root[data-theme="dark"] .text-purple-200 { color: #e0d3ff !important; text-shadow: 0 0 10px rgba(179,136,255,.5); }
:root[data-theme="dark"] .text-slate-100 { color: var(--r-ink) !important; }
:root[data-theme="dark"] .text-slate-400 { color: var(--r-mut) !important; }

/* ---- Botones: pastillas con borde de neón ---- */
.r-btn { border-radius: 999px; font-weight: 900; letter-spacing: .2px; border: 2px solid transparent; transition: transform .1s, box-shadow .2s, filter .15s; }
.r-btn:hover:not(:disabled) { filter: brightness(1.05); transform: translateY(-1px); }
.r-btn:active:not(:disabled) { transform: translateY(1px) scale(.99); }
.r-btn-primary { color: #fff; background: linear-gradient(180deg, #b79bff 0%, #9b7bf0 100%); border-color: #e2d3ff; box-shadow: 0 0 16px rgba(179,136,255,calc(var(--r-g) + .2)), 0 3px 0 #7a5bd0; text-shadow: 0 1px 0 rgba(0,0,0,.15); }
.r-btn-ghost { color: #6d49d8; background: transparent; border-color: var(--r-neon-m); box-shadow: 0 0 12px rgba(94,240,192,var(--r-g)), inset 0 0 10px rgba(94,240,192,calc(var(--r-g) * .15)); }
:root[data-theme="light"] .r-btn-ghost { background: #fff; color: #1f8f6c; }
:root[data-theme="dark"] .r-btn-ghost { color: #b9ffe6; }
.r-btn-danger { color: #fff; background: #ff7fa8; border-color: #ffc1d6; box-shadow: 0 0 14px rgba(255,126,182,calc(var(--r-g) + .1)), 0 3px 0 #e0527a; }
.r-btn-success { color: #0e3d2c; background: linear-gradient(180deg, #9bf5d2, #5ef0c0); border-color: #d6fff0; box-shadow: 0 0 14px rgba(94,240,192,calc(var(--r-g) + .1)), 0 3px 0 #2fbf92; }
.r-btn-rosa { color: #5a2038; background: linear-gradient(180deg, #ffc1d6, #ff9db8); border-color: #ffe0ea; box-shadow: 0 0 14px rgba(255,126,182,calc(var(--r-g) + .1)), 0 3px 0 #e8708f; }

/* ---- Campos ---- */
.r-field {
  background: var(--r-field) !important; color: var(--r-ink) !important;
  border: 2px solid rgba(179,136,255,.65) !important; border-radius: 16px !important;
  transition: box-shadow .2s, border-color .2s;
}
.r-field::placeholder { color: var(--r-mut) !important; opacity: .75; }
.r-field:focus { outline: none !important; border-color: var(--r-neon-p) !important; box-shadow: 0 0 0 1px rgba(255,126,182,.4), 0 0 14px rgba(255,126,182,var(--r-g)); }
select.r-field option { background: var(--r-panel); color: var(--r-ink); }

/* ---- Insignias con borde de neón ---- */
.r-badge { border-radius: 999px; font-weight: 800; border: 1.5px solid; }
.r-badge-purple { color: #5b3bc4; background: #efe6ff; border-color: var(--r-neon-l); box-shadow: 0 0 8px rgba(179,136,255,var(--r-g)); }
.r-badge-green { color: #0e5a3f; background: #dcfbef; border-color: var(--r-neon-m); box-shadow: 0 0 8px rgba(94,240,192,var(--r-g)); }
.r-badge-yellow { color: #6a4300; background: #fff2d1; border-color: var(--r-neon-s); box-shadow: 0 0 8px rgba(255,210,63,var(--r-g)); }
.r-badge-red { color: #8a1a3d; background: #ffe3ec; border-color: var(--r-neon-p); box-shadow: 0 0 8px rgba(255,126,182,var(--r-g)); }
.r-badge-gray { color: #5d5280; background: #f1ecf9; border-color: #cfc3ea; }
:root[data-theme="dark"] .r-badge-purple { color: #e0d3ff; background: #3d2f6a; }
:root[data-theme="dark"] .r-badge-green { color: #c9f9e6; background: #1c4d3d; }
:root[data-theme="dark"] .r-badge-yellow { color: #ffe9b0; background: #5a4210; }
:root[data-theme="dark"] .r-badge-red { color: #ffd0dc; background: #6a2442; }
:root[data-theme="dark"] .r-badge-gray { color: #d3c9ee; background: #3d3166; border-color: #6a5a9a; }

/* ---- Menú lateral / encabezado ---- */
aside.bg-slate-950\/60 { background: rgba(255,255,255,.85) !important; border-right: 2px solid var(--r-neon-l) !important; box-shadow: 4px 0 18px rgba(179,136,255,calc(var(--r-g) * .45)); backdrop-filter: blur(6px); }
header.bg-slate-950\/40 { background: rgba(255,255,255,.75) !important; border-bottom: 2px solid var(--r-neon-p) !important; box-shadow: 0 4px 18px rgba(255,126,182,calc(var(--r-g) * .4)); backdrop-filter: blur(6px); }
:root[data-theme="dark"] aside.bg-slate-950\/60, :root[data-theme="dark"] header.bg-slate-950\/40 { background: rgba(27,18,48,.88) !important; }
.from-bingopurple.to-bingoaccent { background-image: linear-gradient(135deg, #b79bff 0%, #ff9db8 100%) !important; border: 2px solid #f0e6ff; box-shadow: 0 0 16px rgba(179,136,255,calc(var(--r-g) + .2)) !important; color: #fff; }

/* ---- Bolas: pastel con resplandor de su propio color ---- */
.bingo-ball { border: 4px solid #fff; box-shadow: 0 0 22px currentColor, 0 0 0 3px rgba(255,255,255,.12), inset 0 -6px 10px rgba(0,0,0,.08) !important; }
.bingo-ball.bg-pink-300 { color: #ff7eb6; } .bingo-ball.bg-emerald-300 { color: #5ef0c0; } .bingo-ball.bg-amber-300 { color: #ffd23f; }
.bingo-ball.bg-violet-400 { color: #b388ff; } .bingo-ball.bg-sky-300 { color: #6ac4ff; }
.bingo-ball > * { text-shadow: none; }
.bg-pink-300.text-white, .bg-pink-300 > * { color: #5a2038 !important; }
.bg-emerald-300.text-white, .bg-emerald-300 > * { color: #0e3d2c !important; }
.bg-amber-300.text-white, .bg-amber-300 > * { color: #5a3a00 !important; }
.bg-sky-300.text-white, .bg-sky-300 > * { color: #0b3a5e !important; }
.bingo-ball.bg-pink-300 > *, .bingo-ball.bg-emerald-300 > *, .bingo-ball.bg-amber-300 > *, .bingo-ball.bg-sky-300 > * { color: inherit; }
.bingo-ball.bg-pink-300 > * { color: #5a2038 !important; } .bingo-ball.bg-emerald-300 > * { color: #0e3d2c !important; }
.bingo-ball.bg-amber-300 > * { color: #5a3a00 !important; } .bingo-ball.bg-sky-300 > * { color: #0b3a5e !important; }
.bingo-ball.bg-violet-400 > * { color: #fff !important; }

/* ---- Marca ---- */
.r-logo { border: 3px solid #fff !important; box-shadow: 0 0 0 2px var(--r-neon-p), 0 0 22px rgba(255,126,182,.8), 0 0 36px rgba(179,136,255,.7) !important; }
.r-title { font-family: 'Nunito', sans-serif; font-weight: 900; color: #7a5bd0; text-shadow: 0 2px 0 #ffc2d4, 0 0 16px rgba(179,136,255,.45); }
:root[data-theme="dark"] .r-title { color: #eadfff; text-shadow: 0 0 14px rgba(179,136,255,.9), 0 0 28px rgba(255,126,182,.5); }

/* ---- Login: portada lila con bolas + hoja inferior con borde neón ---- */
.r-hero {
  position: relative; overflow: hidden; text-align: center;
  padding: 30px 16px 56px; margin-bottom: -30px;
  border-radius: 34px 34px 28px 28px; border: 2px solid #e6d9ff;
  background: linear-gradient(160deg, #b79bff 0%, #9b7bf0 55%, #ff9db8 135%);
  box-shadow: 0 0 22px rgba(179,136,255,.8), inset 0 0 26px rgba(255,255,255,.18);
}
:root[data-theme="dark"] .r-hero { background: linear-gradient(160deg, #6a4bd0 0%, #4a2f9a 60%, #a8416f 140%); border-color: #b388ff; }
.r-hero .r-title { color: #fff; font-size: 2.2rem; line-height: 1.1; margin-top: 10px; text-shadow: 0 3px 0 rgba(122,91,208,.55), 0 0 20px rgba(255,255,255,.55); }
.r-hero .credito-neon { color: #fff !important; text-shadow: 0 0 10px rgba(255,255,255,.7); }
.r-hero-ball {
  position: absolute; width: 38px; height: 38px; border-radius: 50%; border: 3px solid #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 13px; line-height: 1;
  box-shadow: 0 0 16px rgba(255,255,255,.7); animation: rHeroFloat 5s ease-in-out infinite alternate;
}
@keyframes rHeroFloat { from { transform: translateY(0) rotate(-6deg); } to { transform: translateY(-10px) rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .r-hero-ball { animation: none; } }
.r-sheet { position: relative; z-index: 1; padding: 20px; border-color: var(--r-neon-p); box-shadow: 0 0 0 1px rgba(255,126,182,calc(var(--r-g) * .35)), 0 0 18px rgba(255,126,182,var(--r-g)), inset 0 0 16px rgba(255,126,182,calc(var(--r-g) * .12)); }

/* Crédito / subtítulo */
@keyframes creditoNeonPulse {
  0%, 100% { text-shadow: 0 0 6px rgba(179,136,255,.6); }
  50% { text-shadow: 0 0 14px rgba(179,136,255,.95), 0 0 24px rgba(255,126,182,.6); }
}
.credito-neon { color: #7a5bd0 !important; font-weight: 800 !important; }
.credito-neon a { color: #e0527a !important; border-bottom-color: rgba(224,82,122,.6) !important; }
:root[data-theme="dark"] .credito-neon { color: #e0d3ff !important; }
:root[data-theme="dark"] .credito-neon a { color: #ffb3cb !important; }
.owner-neon-board { background: #fff !important; border: 2px solid var(--r-neon-l) !important; box-shadow: 0 0 16px rgba(179,136,255,.8), inset 0 0 14px rgba(179,136,255,.15) !important; }
.owner-neon-text { color: #7a5bd0 !important; text-shadow: 0 0 10px rgba(179,136,255,.7), 0 0 22px rgba(255,126,182,.45) !important; }

/* ---- Opacidades sueltas de Tailwind que faltaban en los dos temas ---- */
:root[data-theme="light"] [class~="bg-slate-800/50"], :root[data-theme="light"] [class~="bg-slate-800/20"], :root[data-theme="light"] [class~="bg-slate-700/40"], :root[data-theme="light"] [class~="bg-slate-700/60"] { background-color: #f3ecff !important; }
:root[data-theme="light"] [class~="bg-slate-900/70"], :root[data-theme="light"] [class~="bg-slate-900/80"] { background-color: rgba(255,255,255,.92) !important; }
:root[data-theme="light"] [class~="border-slate-700/60"], :root[data-theme="light"] [class~="border-slate-700/70"], :root[data-theme="light"] [class~="border-slate-700/40"], :root[data-theme="light"] [class~="border-slate-500/60"] { border-color: rgba(179,136,255,.55) !important; }
:root[data-theme="dark"] [class~="bg-slate-800/50"], :root[data-theme="dark"] [class~="bg-slate-800/20"], :root[data-theme="dark"] [class~="bg-slate-700/40"], :root[data-theme="dark"] [class~="bg-slate-700/60"] { background-color: rgba(56,42,95,.6) !important; }
:root[data-theme="dark"] [class~="bg-slate-900/70"], :root[data-theme="dark"] [class~="bg-slate-900/80"] { background-color: rgba(38,26,69,.92) !important; }
:root[data-theme="dark"] [class~="border-slate-700/60"], :root[data-theme="dark"] [class~="border-slate-700/70"], :root[data-theme="dark"] [class~="border-slate-700/40"], :root[data-theme="dark"] [class~="border-slate-700/50"] { border-color: rgba(179,136,255,.55) !important; }

/* ---- Encabezado en celular: que los botones bajen de línea en vez de salirse ---- */
header.bg-slate-950\/40 { flex-wrap: wrap; gap: 8px; }
header.bg-slate-950\/40 > div:last-child { flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.r-hero .subtitulo-animado { text-shadow: 0 1px 8px rgba(70,40,150,.55) !important; }

/* ---- Figuras en miniatura (rejilla 5x5): casilla marcada vs vacía ---- */
.r-pat-on { background: linear-gradient(135deg, #9b7bf0, #ff7eb6); box-shadow: 0 0 5px rgba(179,136,255,.75); }
.r-pat-off { background: #e6dafd; }
:root[data-theme="dark"] .r-pat-off { background: #3d2f6a; }