/* =============================================
   Shared theme variables & base styles
   Used by index.php and reto.php
   ============================================= */

:root {
    --bg: #ffffff;
    --text: #222222;
    --muted: #666666;
    --border: #dddddd;
    --input-bg: #ffffff;
    --input-border: #cccccc;
    --btn-bg: #0066cc;
    --btn-text: #ffffff;
    --btn-reset-bg: #888888;
    --stats-bg: #f4f4f4;
    --accent: #0066cc;
    --resaltar: #fff9c4;
    --msg-error-bg: #ffe0e0;
    --msg-error-text: #cc0000;
    --msg-exito-bg: #e0ffe0;
    --msg-exito-text: #006600;
    --msg-info-bg: #e0f0ff;
    --msg-info-text: #003366;
}

/* System dark theme - applied automatically via prefers-color-scheme */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: rgb(32, 31, 35);
        --text: #e8e8e8;
        --muted: #aaaaaa;
        --border: #3a3a3a;
        --input-bg: #2a2a2a;
        --input-border: #444444;
        --btn-bg: #4a9eff;
        --btn-text: #ffffff;
        --btn-reset-bg: #555555;
        --stats-bg: #252525;
        --accent: #6ab5ff;
        --resaltar: #3d3a1e;
        --msg-error-bg: #3a1a1a;
        --msg-error-text: #ff8080;
        --msg-exito-bg: #1a3a1a;
        --msg-exito-text: #80ff80;
        --msg-info-bg: #1a2a3a;
        --msg-info-text: #80c0ff;
        --ultima-palabra-bg: rgba(60, 90, 140, 0.15);
    }
}

/* Dark theme override (user manual choice, overrides system preference) */
.dark-theme {
    --bg: rgb(32, 31, 35);
    --text: #e8e8e8;
    --muted: #aaaaaa;
    --border: #3a3a3a;
    --input-bg: #2a2a2a;
    --input-border: #444444;
    --btn-bg: #4a9eff;
    --btn-text: #ffffff;
    --btn-reset-bg: #555555;
    --stats-bg: #252525;
    --accent: #6ab5ff;
    --resaltar: #3d3a1e;
    --msg-error-bg: #3a1a1a;
    --msg-error-text: #ff8080;
    --msg-exito-bg: #1a3a1a;
    --msg-exito-text: #80ff80;
    --msg-info-bg: #1a2a3a;
    --msg-info-text: #80c0ff;
    --ultima-palabra-bg: rgba(60, 90, 140, 0.15);
}

/* Light theme override (user manual choice, overrides system preference) */
.light-theme {
    --bg: rgb(223, 224, 220);
    --text: #222222;
    --muted: #666666;
    --border: #dddddd;
    --input-bg: #ffffff;
    --input-border: #cccccc;
    --btn-bg: #0066cc;
    --btn-text: #ffffff;
    --btn-reset-bg: #888888;
    --stats-bg: #f4f4f4;
    --accent: #0066cc;
    --resaltar: #fff9c4;
    --msg-error-bg: #ffe0e0;
    --msg-error-text: #cc0000;
    --msg-exito-bg: #e0ffe0;
    --msg-exito-text: #006600;
    --msg-info-bg: #e0f0ff;
    --msg-info-text: #003366;
    --ultima-palabra-bg: rgba(100, 140, 200, 0.10);
}

/* Base layout */
body {
    font-family: Arial, sans-serif;
    margin: 10px auto;
    padding: 20px;
    background: var(--bg);
    color: var(--text);
}

h1 { text-align: center; }

button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background: var(--btn-bg);
    color: var(--btn-text);
    border: none;
    border-radius: 4px;
}

button:hover { opacity: 0.9; }

button.reset {
    background: var(--btn-reset-bg);
    color: #fff;
    font-size: 14px;
    padding: 6px 12px;
}

input[type="text"] {
    flex: 1;
    padding: 10px;
    font-size: 16px;
    background: var(--input-bg);
    color: var(--text);
    border: 1px solid var(--input-border);
    border-radius: 4px;
}

input[type="text"]:focus {
    outline: none;
    border-color: var(--accent);
}

/* Message styles */
.error { background: var(--msg-error-bg); color: var(--msg-error-text); }
.exito { background: var(--msg-exito-bg); color: var(--msg-exito-text); font-weight: bold; }
.info { background: var(--msg-info-bg); color: var(--msg-info-text); }

/* Ocultar elementos */
.oculto {
    display: none;
}

/* Ranking badge */
.rank {
    font-weight: bold;
    color: var(--accent);
}

/* Ranking name gold highlight (100% winners) */
.ranking-name-gold {
    color: #FFD700 !important;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.7);
}
.light-theme .ranking-name-gold {
    text-shadow: 0 0 5px rgba(31, 26, 0, 0.7);
}

/* Ranking name purple highlight (current user) */
.ranking-name-purple {
    color: #7a658d !important;
}

/* Back link */
.back-link {
    display: block;
    text-align: center;
    margin-top: 20px;
    color: var(--accent);
    text-decoration: none;
}

.back-link:hover {
    text-decoration: underline;
}