/* ============================================
   Baby Reveal Portal - Minimal Theme
   ============================================ */
:root {
    --bg: #fafafa;
    --card-bg: #ffffff;
    --text: #2d2d2d;
    --text-light: #6b7280;
    --accent: #7c9a8e;
    --accent-light: #e8f0ec;
    --border: #e5e7eb;
    --error: #dc2626;
    --success: #16a34a;
    --radius: 12px;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; background:var(--bg); color:var(--text); line-height:1.6; min-height:100vh; }
.container { max-width:700px; margin:0 auto; padding:40px 20px; }

/* Header */
.header { text-align:center; margin-bottom:40px; }
.header h1 { font-size:2rem; font-weight:300; letter-spacing:-0.5px; margin-bottom:8px; }
.header p  { color:var(--text-light); }

/* Nav */
.nav { display:flex; justify-content:center; gap:8px; margin-bottom:40px; flex-wrap:wrap; }
.nav a { text-decoration:none; color:var(--text-light); padding:8px 16px; border-radius:20px; font-size:0.9rem; transition:all .2s; border:1px solid var(--border); }
.nav a:hover,.nav a.active { background:var(--accent); color:white; border-color:var(--accent); }

/* Cards */
.card { background:var(--card-bg); border-radius:var(--radius); padding:32px; margin-bottom:24px; border:1px solid var(--border); }

/* Phase banner */
.phase-banner { display:flex; align-items:center; gap:16px; padding:16px 20px; border-radius:var(--radius); margin-bottom:24px; border:1px solid; }
.phase-banner .phase-icon { font-size:2rem; flex-shrink:0; }
.phase-banner strong { display:block; margin-bottom:2px; }
.phase-banner p { margin:0; font-size:0.9rem; }
.phase-1 { background:#fefce8; border-color:#fde68a; color:#92400e; }
.phase-2 { background:#f0fdf4; border-color:#bbf7d0; color:#166534; }
.phase-3 { background:#eff6ff; border-color:#bfdbfe; color:#1e40af; }

/* Countdown */
.countdown { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; text-align:center; margin:30px 0; }
.countdown-item { background:var(--accent-light); border-radius:var(--radius); padding:20px 10px; }
.countdown-item .number { font-size:2.5rem; font-weight:700; color:var(--accent); display:block; }
.countdown-item .label  { font-size:0.75rem; color:var(--text-light); text-transform:uppercase; letter-spacing:1px; }

/* Forms */
.form-group { margin-bottom:20px; }
.form-group label { display:block; margin-bottom:6px; font-weight:500; font-size:0.9rem; }
.form-group input,.form-group select,.form-group textarea { width:100%; padding:12px 16px; border:1px solid var(--border); border-radius:8px; font-size:1rem; transition:border-color .2s; background:var(--bg); }
.form-group input:focus,.form-group select:focus,.form-group textarea:focus { outline:none; border-color:var(--accent); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.radio-group { display:flex; gap:16px; margin-top:6px; flex-wrap:wrap; }
.radio-group label { display:flex; align-items:center; gap:8px; font-weight:400; cursor:pointer; padding:10px 20px; border:1px solid var(--border); border-radius:8px; transition:all .2s; }
.radio-group label:has(input:checked) { border-color:var(--accent); background:var(--accent-light); }
.radio-group input[type="radio"] { width:auto; }

/* Buttons */
.btn { display:inline-block; padding:12px 32px; background:var(--accent); color:white; border:none; border-radius:8px; font-size:1rem; cursor:pointer; transition:all .2s; text-decoration:none; text-align:center; width:100%; }
.btn:hover { opacity:.9; transform:translateY(-1px); }
.btn-outline { background:transparent; color:var(--accent); border:1px solid var(--accent); }
.btn-outline:hover { background:var(--accent-light); }
.btn-info { background:var(--accent-light); color:var(--accent); border:1px solid var(--accent); border-radius:8px; padding:6px 14px; font-size:0.85rem; cursor:pointer; transition:all .2s; }
.btn-info:hover { background:var(--accent); color:white; }

/* Messages */
.message { padding:12px 16px; border-radius:8px; margin-bottom:20px; font-size:0.9rem; }
.message.error   { background:#fef2f2; color:var(--error);   border:1px solid #fecaca; }
.message.success { background:#f0fdf4; color:var(--success); border:1px solid #bbf7d0; }

/* Stats */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:16px; margin:20px 0; }
.stat-item { text-align:center; padding:20px; background:var(--accent-light); border-radius:var(--radius); }
.stat-item .stat-value { font-size:2rem; font-weight:700; color:var(--accent); }
.stat-item .stat-label { font-size:0.8rem; color:var(--text-light); margin-top:4px; }

/* Progress */
.progress-bar { background:var(--border); border-radius:20px; height:30px; overflow:hidden; display:flex; margin:10px 0; }
.progress-bar .male   { background:#93c5fd; display:flex; align-items:center; justify-content:center; font-size:0.8rem; font-weight:600; color:#1e40af; }
.progress-bar .female { background:#fda4af; display:flex; align-items:center; justify-content:center; font-size:0.8rem; font-weight:600; color:#9f1239; }

/* Table */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:0.9rem; }
table th,table td { padding:10px 12px; text-align:left; border-bottom:1px solid var(--border); }
table th { font-weight:600; color:var(--text-light); font-size:0.8rem; text-transform:uppercase; letter-spacing:0.5px; }
table tr:hover { background:var(--accent-light); }

/* Names list */
.names-list { list-style:none; padding:0; }
.names-list li { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--border); }
.names-list li:last-child { border-bottom:none; }
.names-list .count { background:var(--accent-light); color:var(--accent); padding:2px 10px; border-radius:12px; font-size:0.8rem; font-weight:600; }

/* Ranking */
.ranking-list { list-style:none; counter-reset:rank; padding:0; }
.ranking-list li { counter-increment:rank; display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--border); }
.ranking-list li:last-child { border-bottom:none; }
.ranking-list li::before { content:counter(rank); background:var(--accent); color:white; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.8rem; font-weight:700; flex-shrink:0; }
.ranking-list li:nth-child(1)::before { background:#f59e0b; }
.ranking-list li:nth-child(2)::before { background:#9ca3af; }
.ranking-list li:nth-child(3)::before { background:#b45309; }

/* Badge */
.badge { padding:3px 8px; border-radius:12px; font-size:0.75rem; font-weight:600; }
.badge-on  { background:#d1fae5; color:#065f46; }
.badge-off { background:#f3f4f6; color:#9ca3af; }

/* Metriche table */
.metriche-table { border:1px solid var(--border); border-radius:8px; overflow:hidden; font-size:0.85rem; }
.metrica-row { display:grid; grid-template-columns:120px 60px 1fr; gap:12px; padding:10px 14px; border-bottom:1px solid var(--border); }
.metrica-row:last-child { border-bottom:none; }
.header-row { background:var(--bg); font-weight:600; font-size:0.8rem; color:var(--text-light); text-transform:uppercase; letter-spacing:0.5px; }
.total-row { background:var(--accent-light); font-weight:700; }
.metrica-row .pts { font-weight:700; color:var(--accent); }
.hidden { display:none; }

/* Reveal */
.reveal-container { text-align:center; padding:40px 20px; }
.reveal-container .emoji { font-size:4rem; margin-bottom:20px; }
.reveal-container h2 { font-size:1.8rem; margin-bottom:20px; }
.reveal-data { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px; margin-top:30px; }
.reveal-data .item { padding:20px; background:var(--accent-light); border-radius:var(--radius); }
.reveal-data .item .label { font-size:0.75rem; color:var(--text-light); text-transform:uppercase; letter-spacing:1px; }
.reveal-data .item .value { font-size:1.3rem; font-weight:600; color:var(--accent); margin-top:4px; }

/* Fase buttons (admin) */
.fase-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.fase-btn { width:100%; padding:16px 10px; border:2px solid var(--border); border-radius:var(--radius); background:var(--bg); cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:4px; transition:all .2s; }
.fase-btn .fase-emoji { font-size:1.8rem; }
.fase-btn strong { font-size:0.9rem; }
.fase-btn small { font-size:0.75rem; color:var(--text-light); text-align:center; }
.fase-btn:hover { border-color:var(--accent); background:var(--accent-light); }
.fase-btn-active { border-color:var(--accent); background:var(--accent-light); }
.fase-btn-active small { color:var(--accent); }

/* Footer */
.footer { text-align:center; margin-top:40px; color:var(--text-light); font-size:0.8rem; }

/* Responsive */
@media (max-width:600px) {
    .countdown { grid-template-columns:repeat(2,1fr); }
    .form-row  { grid-template-columns:1fr; }
    .container { padding:20px 16px; }
    .fase-grid { grid-template-columns:1fr; }
    .metrica-row { grid-template-columns:100px 50px 1fr; font-size:0.8rem; }
}