/* ==========================================================================
   KANCHA - Hoja de Estilos Deportiva Profesional
   Modo Claro (Por Defecto) + Modo Oscuro Opcional
   ========================================================================== */

:root {
    --bg-main: #F8FAFC;
    --bg-card: #FFFFFF;
    --bg-card-secondary: #F1F5F9;
    --text-main: #0F172A;
    --text-muted: #64748B;
    --border-color: #E2E8F0;
    --primary: #10B981;
    --primary-hover: #059669;
    --primary-light: #ECFDF5;
    --accent: #84CC16;
}

html.dark {
    --bg-main: #0B1120;
    --bg-card: #1E293B;
    --bg-card-secondary: #0F172A;
    --text-main: #F8FAFC;
    --text-muted: #94A3B8;
    --border-color: #334155;
    --primary: #10B981;
    --primary-hover: #059669;
    --primary-light: rgba(16, 185, 129, 0.15);
    --accent: #A3E635;
}

body {
    background-color: var(--bg-main);
    color: var(--text-main);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Scrollbar sutil */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 4px;
}
html.dark ::-webkit-scrollbar-thumb {
    background: #475569;
}

/* Tarjetas y Contenedores */
.kancha-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

.kancha-card:hover {
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.08);
}

/* Recibo de pago con soporte de impresión */
@media print {
    body {
        background-color: #ffffff !important;
        color: #000000 !important;
    }
    nav, footer, .no-print, header, #themeToggleBtn {
        display: none !important;
    }
    .print-voucher {
        box-shadow: none !important;
        border: 1px solid #000 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 20px !important;
    }
}