@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700;900&family=Lobster&display=swap');

:root {
    --blue: #1565c0; --red: #c62828; --gold: #ffca28; 
    --dark: #1a1a1a; --bg: #f3f4f6;
}

body { font-family: 'Poppins', sans-serif; margin: 0; background: var(--bg); color: #333; }
* { box-sizing: border-box; }

/* UTILS */
.w-100 { width: 100%; }
.hidden { display: none !important; }
.btn { border: none; padding: 12px; border-radius: 6px; font-weight: bold; color: white; cursor: pointer; transition: 0.2s; font-size: 1rem; display: flex; justify-content: center; align-items: center; gap: 8px; }
.btn:hover { opacity: 0.9; transform: scale(1.02); }
.btn-blue { background: var(--blue); }
.btn-red { background: var(--red); }
.btn-green { background: #2e7d32; }
.btn-gold { background: linear-gradient(45deg, #ffca28, #ff8f00); color: black; }

/* ADMIN */
.admin-wrapper { max-width: 1000px; margin: 0 auto; padding: 20px; }
.admin-header { text-align: center; margin-bottom: 30px; }
.admin-header h1 { font-family: 'Lobster'; font-size: 3rem; margin: 0; color: var(--blue); }
.highlight { color: var(--gold); text-shadow: 1px 1px 0 #000; }
.badge { background: #ddd; display: inline-block; padding: 5px 15px; border-radius: 20px; font-size: 0.8rem; font-weight: bold; margin-top: 5px; }

.admin-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.panel { background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.panel-head { padding: 15px; color: white; font-weight: bold; font-size: 1.1rem; display: flex; align-items: center; gap: 10px; }
.color-blue { background: var(--blue); }
.color-red { background: var(--red); }
.color-green { background: #2e7d32; }
.color-gold { background: #f9a825; }
.panel-body { padding: 20px; }
.input-big { width: 100%; padding: 10px; font-size: 1.1rem; border: 1px solid #ccc; border-radius: 5px; margin-bottom: 15px; text-align: center; }
.range-inputs { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; }
.range-inputs input { width: 100%; padding: 8px; text-align: center; border: 1px solid #ccc; border-radius: 4px; }
textarea { width: 100%; height: 80px; margin-top: 10px; padding: 5px; border: 1px solid #eee; }
.desc { font-size: 0.85rem; color: #666; margin-bottom: 10px; }

/* CARTÓN BINGO (UNIVERSAL) */
.bingo-card {
    width: 320px; background: white; border: 3px solid #000; border-radius: 12px;
    position: relative; overflow: hidden; margin: 10px auto;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    /* CRÍTICO PARA PDF */
    page-break-inside: avoid; break-inside: avoid;
}
.wm { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(-45deg); font-size: 4rem; opacity: 0.05; font-weight: 900; pointer-events: none; }
.c-head { background: var(--red); color: white; display: grid; grid-template-columns: repeat(5,1fr); text-align: center; font-family: 'Lobster'; font-size: 2.2rem; border-bottom: 3px solid black; }
.c-body { display: grid; grid-template-columns: repeat(5,1fr); position: relative; z-index: 1; }
.cel { height: 60px; display: flex; justify-content: center; align-items: center; font-size: 1.8rem; font-weight: 900; border: 1px solid #ccc; color: #333; cursor: pointer; }
.cel.free { background: var(--gold); color: #b71c1c; font-size: 0.7rem; flex-direction: column; line-height: 1; border-color: #ff8f00; }
.c-foot { background: #eee; text-align: right; padding: 4px 10px; font-size: 0.8rem; font-weight: bold; border-top: 2px solid black; }

/* JUEGO (GAME) */
.game-wrapper { background: #111; min-height: 100vh; padding: 20px; color: white; display: flex; flex-direction: column; }
.prize-banner { background: #222; padding: 10px; border-radius: 8px; display: flex; justify-content: center; align-items: center; gap: 10px; border: 2px solid var(--gold); margin-bottom: 20px; }
.prize-banner span { color: var(--gold); font-weight: bold; }
.prize-banner input { background: none; border: none; border-bottom: 1px solid #555; color: white; font-size: 1.2rem; width: 60%; text-align: center; }

.game-layout { display: flex; flex-wrap: wrap; gap: 30px; justify-content: center; flex: 1; }
.controls-area { width: 300px; text-align: center; }
.ball-stage { perspective: 800px; width: 200px; height: 200px; margin: 0 auto 20px; }
.ball-3d { width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #444, #000); border: 5px solid white; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0,0,0,0.5); transition: transform 0.3s; }
.ball-3d .face { text-align: center; }
.ball-3d .l { display: block; font-family: 'Lobster'; font-size: 2rem; }
.ball-3d .n { display: block; font-size: 6rem; font-weight: 900; line-height: 0.9; }

/* Colores Bolas */
.b-B { background: radial-gradient(at 30% 30%, #42a5f5, #0d47a1); }
.b-I { background: radial-gradient(at 30% 30%, #ef5350, #b71c1c); }
.b-N { background: radial-gradient(at 30% 30%, #fff, #90a4ae); color: #333 !important; }
.b-G { background: radial-gradient(at 30% 30%, #66bb6a, #1b5e20); }
.b-O { background: radial-gradient(at 30% 30%, #ffa726, #e65100); }
.shake { animation: shake 0.1s infinite; }
@keyframes shake { 0%,100% { transform: rotate(0deg); } 25% { transform: rotate(5deg); } 75% { transform: rotate(-5deg); } }

.btn-big { background: linear-gradient(to bottom, #4caf50, #1b5e20); width: 100%; font-size: 1.5rem; padding: 20px; border-radius: 50px; border: none; color: white; font-weight: 900; box-shadow: 0 5px 0 #0d3a10; cursor: pointer; margin-bottom: 10px; }
.btn-big:active { transform: translateY(5px); box-shadow: none; }
.btn-win { background: linear-gradient(45deg, #ffca28, #ff6f00); color: black; font-weight: bold; width: 100%; padding: 15px; border-radius: 30px; border: none; margin-bottom: 10px; cursor: pointer; animation: pulse 1s infinite; }
.btn-reset { background: #333; color: white; border: none; padding: 8px 20px; border-radius: 5px; cursor: pointer; }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }
.last-info { font-size: 1.2rem; color: #888; margin-bottom: 15px; }
.last-info span { color: white; font-weight: bold; font-size: 1.5rem; }

.board-area { flex: 1; background: #263238; padding: 15px; border-radius: 10px; min-width: 350px; }
.board-row { display: flex; margin-bottom: 8px; align-items: center; }
.letter { width: 30px; font-size: 1.5rem; font-family: 'Lobster'; color: var(--gold); }
.numbers { display: flex; flex-wrap: wrap; gap: 5px; flex: 1; }
.nm { width: 34px; height: 34px; background: #37474f; border-radius: 50%; display: flex; justify-content: center; align-items: center; color: #90a4ae; font-weight: bold; }
.nm.active { background: white; color: var(--red); transform: scale(1.2); box-shadow: 0 0 10px white; }

/* MODAL */
.modal-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 1000; display: flex; justify-content: center; align-items: center; }
.modal-card { background: white; padding: 40px; border-radius: 20px; text-align: center; border: 5px solid var(--gold); animation: pop 0.5s; color: black; }
.modal-card h1 { color: var(--red); font-size: 3rem; margin: 0; font-family: 'Lobster'; }
.trophy { font-size: 5rem; margin: 20px 0; animation: bounce 1s infinite; }
@keyframes pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }

/* CLIENTE */
.client-wrapper { background: var(--blue); min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.client-card-box { transform: scale(1.1); margin-bottom: 20px; }
.hint { color: rgba(255,255,255,0.7); }
.cel.marked { background: rgba(46, 125, 50, 0.4); color: #1b5e20; position: relative; }
.cel.marked::after { content: 'X'; position: absolute; font-size: 3.5rem; color: var(--red); opacity: 0.8; font-family: sans-serif; top: -5px; }

/* ERROR */
.error-box { text-align: center; padding: 50px; }