/* =====================================================================
   Temas de pantalla -- Ivan, 2026-10-03:
     "Hay que mejorar el contraste de colores, en pleno sol cuesta leer
      bien. Me gusta el tema oscuro, propon diferentes versiones..."
     -> "poner en Mi cuenta un ajuste de Tema con cuatro opciones, mas el
        boton ☀️ dentro de la ronda"
   <html data-theme> es lo elegido (auto | dark | light | sun) y
   <html data-mode> lo que se pinta (dark | light | sun), resuelto en la
   cabecera de base.html. Solo en pantalla (@media screen): la impresion
   sigue con su paleta clara de siempre (ver @media print en style.css).

   - dark  (version "B", negro sol): fondo negro puro, grises casi blancos,
            lima mas brillante, bordes visibles. Por defecto de noche.
   - sun   (version "C", contraste maximo): todo blanco y en negrita, bordes
            marcados, amarillo vivo en vez de lima. Boton ☀️ de la ronda.
   - light (version "D", modo sol claro): fondo blanco, texto negro, acento
            oliva para textos y lima para botones.
   Contraste medido (texto gris sobre tarjeta, en sombra -> simulando el
   reflejo del sol): antes 6.0 -> 1.7; dark 13.6 -> 2.7; sun 18.7 -> 3.2.
   ===================================================================== */

@media screen {

/* --- Oscuro (B) ------------------------------------------------------------ */
:root[data-mode="dark"] {
    --ink: #000000;
    --bg: #000000;
    --surface: #111214;
    --surface-2: #2A2E33;
    --text: #FFFFFF;
    --text-muted: #D2D6DB;
    --lime: #D3E637;
    --lime-soft: #E3EF7A;
    --lime-ink: #14150A;
    --green: #3FD98A;
    --red: #FF6B6B;
    --team-a: #F09A3C;
    --team-b: #7AA2FF;
    --border: rgba(255, 255, 255, 0.20);
    --border-strong: rgba(255, 255, 255, 0.34);
}
:root[data-mode="dark"] .hint,
:root[data-mode="dark"] .stat-label,
:root[data-mode="dark"] .sc-format { font-weight: 500; }

/* --- Sol / contraste maximo (C) ---------------------------------------------- */
:root[data-mode="sun"] {
    --ink: #000000;
    --bg: #000000;
    --surface: #000000;
    --surface-2: #3A3F46;
    --text: #FFFFFF;
    --text-muted: #F0F2F4;
    --lime: #FFE600;
    --lime-soft: #FFF06A;
    --lime-ink: #000000;
    --green: #45F59A;
    --red: #FF5A5A;
    --team-a: #FFA94D;
    --team-b: #8DB2FF;
    --fairway-deep: #000000;
    --border: rgba(255, 255, 255, 0.60);
    --border-strong: rgba(255, 255, 255, 0.85);
}
:root[data-mode="sun"] body { background: #000; }
:root[data-mode="sun"] .hint,
:root[data-mode="sun"] .stat-label,
:root[data-mode="sun"] .sc-format,
:root[data-mode="sun"] .sc-date,
:root[data-mode="sun"] label,
:root[data-mode="sun"] .bottom-nav-item span,
:root[data-mode="sun"] .caddie-row-label,
:root[data-mode="sun"] .caddie-row-body,
:root[data-mode="sun"] .score-field-label,
:root[data-mode="sun"] .hole-detail-label { font-weight: 700; }
:root[data-mode="sun"] table.scorecard-table th,
:root[data-mode="sun"] table.scorecard-table td { font-weight: 700; border-bottom-color: rgba(255, 255, 255, 0.45); }
:root[data-mode="sun"] .hole-input,
:root[data-mode="sun"] .score-key { font-weight: 800 !important; }
:root[data-mode="sun"] .scoreboard-card,
:root[data-mode="sun"] .stat-tile,
:root[data-mode="sun"] .ring-card,
:root[data-mode="sun"] .hcp-hero,
:root[data-mode="sun"] .caddie-tip-box,
:root[data-mode="sun"] .ai-summary,
:root[data-mode="sun"] .modal-panel,
:root[data-mode="sun"] .feed-story-card,
:root[data-mode="sun"] .hole-detail { border: 1.5px solid var(--border) !important; }
:root[data-mode="sun"] .bottom-nav,
:root[data-mode="sun"] .account-shortcuts-bar { background: rgba(0, 0, 0, 0.92); border: 1.5px solid var(--border-strong); }
:root[data-mode="sun"] header.top,
:root[data-mode="sun"] .account-sticky-head { background: #000; }
:root[data-mode="sun"] .hcp-hero,
:root[data-mode="sun"] .profile-hero,
:root[data-mode="sun"] .detail-header,
:root[data-mode="sun"] .ai-tip { background: #000; }
:root[data-mode="sun"] table.scorecard-table:not(.scorecard-table-final) th.current-hole-col,
:root[data-mode="sun"] table.scorecard-table:not(.scorecard-table-final) td.current-hole-col {
    background-image: linear-gradient(rgba(255, 230, 0, 0.22), rgba(255, 230, 0, 0.22));
}
:root[data-mode="sun"] .btn-secondary,
:root[data-mode="sun"] .btn-action { border-width: 1.5px; }

/* --- Claro (D) ------------------------------------------------------------------ */
:root[data-mode="light"] {
    --ink: #FFFFFF;
    --bg: #FFFFFF;
    --surface: #F2F3EF;
    --surface-2: #D3D7CE;
    --text: #0B0C0D;
    --text-muted: #3A3F44;
    --lime: #5A6A00;        /* acento para texto/bordes (sobre blanco) */
    --lime-soft: #C2D230;   /* el lima de la marca, para botones */
    --lime-ink: #FFFFFF;
    --green: #157A45;
    --red: #C62828;
    --team-a: #A85D10;
    --team-b: #1E4FC2;
    --fairway: #1F7A4D;
    --fairway-deep: #E3EEDC;
    --border: rgba(0, 0, 0, 0.14);
    --border-strong: rgba(0, 0, 0, 0.28);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.06), 0 10px 26px -18px rgba(0, 0, 0, 0.30);
    color-scheme: light;
}
:root[data-mode="light"] body {
    background: radial-gradient(120% 60% at 50% -10%, rgba(31, 122, 77, 0.08), transparent 60%), var(--bg);
}
:root[data-mode="light"] .hint,
:root[data-mode="light"] .stat-label,
:root[data-mode="light"] .sc-format,
:root[data-mode="light"] .bottom-nav-item span { font-weight: 600; }
:root[data-mode="light"] header.top {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.88));
    border-bottom-color: var(--border);
}
:root[data-mode="light"] .account-sticky-head { background: rgba(255, 255, 255, 0.92); }
:root[data-mode="light"] .bottom-nav,
:root[data-mode="light"] .account-shortcuts-bar {
    background: rgba(255, 255, 255, 0.90);
    box-shadow: 0 12px 30px -14px rgba(0, 0, 0, 0.35);
}
:root[data-mode="light"] .bottom-nav-item.active { background: rgba(90, 106, 0, 0.12); }
:root[data-mode="light"] .detail-header {
    background: radial-gradient(120% 160% at 100% 0%, rgba(194, 210, 48, 0.28), transparent 55%), var(--surface);
}
:root[data-mode="light"] .hcp-hero {
    background:
        radial-gradient(90% 120% at 100% 0%, rgba(194, 210, 48, 0.30), transparent 55%),
        linear-gradient(160deg, #E3EEDC, var(--surface) 65%);
}
:root[data-mode="light"] .ai-tip {
    background: linear-gradient(135deg, rgba(194, 210, 48, 0.22), transparent 55%), var(--surface);
}
:root[data-mode="light"] .hcp-hero-delta { background: rgba(0, 0, 0, 0.06); }
:root[data-mode="light"] .result-tabs { background: rgba(0, 0, 0, 0.04); }
/* (:not(.btn-whatsapp): el boton de WhatsApp mantiene su verde en todos los temas) */
:root[data-mode="light"] .btn-secondary,
:root[data-mode="light"] .btn-action:not(.btn-whatsapp) { background: rgba(0, 0, 0, 0.04); }
@media (hover: hover) {
    :root[data-mode="light"] .btn-secondary:hover,
    :root[data-mode="light"] .btn-action:not(.btn-whatsapp):hover { background: rgba(0, 0, 0, 0.08); }
}
:root[data-mode="light"] .ring-track { stroke: rgba(0, 0, 0, 0.10); }
:root[data-mode="light"] .gps-ask-box { border-color: var(--border); }
/* Botones principales: el lima de la marca con texto oscuro (el --lime
   oliva de este tema es para textos). */
:root[data-mode="light"] .btn-primary,
:root[data-mode="light"] .bottom-nav-fab,
:root[data-mode="light"] #formTabBar .form-next-fab:not(.btn-shake-error) {
    background: linear-gradient(180deg, #D3E04A, #C2D230);
    color: #14150A;
}
:root[data-mode="light"] .bottom-nav-fab { box-shadow: 0 4px 14px rgba(120, 140, 0, 0.35), 0 0 0 4px var(--bg); }
:root[data-mode="light"] .result-tab-btn.active,
:root[data-mode="light"] .result-tab-btn.active:hover { background: var(--lime); color: #FFFFFF; border-color: var(--lime); }
:root[data-mode="light"] table.scorecard-table:not(.scorecard-table-final) th.current-hole-col,
:root[data-mode="light"] table.scorecard-table:not(.scorecard-table-final) td.current-hole-col {
    background-image: linear-gradient(rgba(194, 210, 48, 0.28), rgba(194, 210, 48, 0.28));
}
:root[data-mode="light"] .caddie-row-warn { background: rgba(198, 40, 40, 0.08); }
:root[data-mode="light"] .modal-overlay { background: rgba(0, 0, 0, 0.45); }

/* --- Selector de tema (Mi cuenta y Ajustes de la ronda) ------------------------------ */
.theme-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.theme-option {
    display: flex; flex-direction: column; gap: 2px; padding: 12px; cursor: pointer;
    background: var(--surface); border: 1.5px solid var(--border-strong); border-radius: var(--radius-md, 14px);
    color: var(--text); text-align: left; font: inherit;
}
.theme-option strong { font-size: 14px; }
.theme-option span { font-size: 12px; color: var(--text-muted); line-height: 1.35; }
.theme-option[aria-pressed="true"] { border-color: var(--lime); box-shadow: inset 0 0 0 1px var(--lime); }
.theme-option[aria-pressed="true"] strong::after { content: ' ✓'; color: var(--lime); }
.theme-status { margin-top: 6px; min-height: 1em; }

}

/* Cabecera de la ronda en directo (el antiguo boton ☀️ ahora vive dentro
   de Ajustes -> Pantalla, Ivan 2026-10-03). */
.live-head-actions { display: flex; align-items: center; gap: 8px; }

/* Color por jugador (ver style.css, "Color por jugador en las tarjetas"):
   en el tema claro los colores se oscurecen para leerse sobre blanco. */
@media screen {
:root[data-mode="light"] {
    --pc-0: #0D5C91; --pc-1: #784F00; --pc-2: #73417E; --pc-3: #006A66;
    --pc-4: #8B3B38; --pc-5: #29672E; --pc-6: #534D92; --pc-7: #863A5B;
}
}