/*
 * ════════════════════════════════════════════════════════
 *   MASTER VIP — SISTEMA DE DISEÑO GLOBAL
 *   Archivo: estilos.css
 *   Todos los archivos HTML deben importar este archivo
 *   para mantener coherencia visual en toda la plataforma
 * ════════════════════════════════════════════════════════
 */

/* ── 1. VARIABLES GLOBALES ──────────────────────────────
   Cambiar aquí afecta TODA la aplicación automáticamente
──────────────────────────────────────────────────────── */
:root {
    /* Colores principales */
    --oro:      #d4af37;   /* Torneos, acciones principales */
    --negro:    #0b0b0b;   /* Fondo general */
    --neon:     #2eff70;   /* Entrenamiento, éxito, series activas */
    --azul:     #3498db;   /* Navegación, cambio de turno */
    --rojo:     #e74c3c;   /* Peligro, restar, borrar */
    --blanco:   #ffffff;
    --gris1:    #1a1a1a;   /* Bordes sutiles */
    --gris2:    #111111;   /* Fondos de cards */
    --gris3:    #0a0a0a;   /* Fondo de stats */
    --texto-placeholder: #888888; /* Visible para adultos mayores 45+ */
    --texto-label: #555555;       /* Etiquetas secundarias */
    --texto-apagado: #333333;     /* Texto muy secundario */

    /* Tipografía */
    --fuente-principal: 'Arial Black', Arial, sans-serif;
    --fuente-numeros:   'Courier New', Courier, monospace;

    /* Tamaños de fuente — pensados para adultos mayores */
    --txt-xs:   0.65rem;   /* Etiquetas mínimas */
    --txt-sm:   0.75rem;   /* Labels de stats */
    --txt-md:   0.9rem;    /* Texto normal */
    --txt-lg:   1.1rem;    /* Nombres, inputs */
    --txt-xl:   1.4rem;    /* Títulos de sección */
    --txt-btn:  1.2rem;    /* Botones principales */

    /* Radios de borde — consistentes en toda la app */
    --radio-sm: 12px;
    --radio-md: 18px;
    --radio-lg: 22px;
    --radio-xl: 28px;

    /* Sombras estándar */
    --sombra-oro:  0 8px 25px rgba(212,175,55,0.25);
    --sombra-neon: 0 8px 25px rgba(46,255,112,0.25);
    --sombra-azul: 0 6px 20px rgba(52,152,219,0.25);
}

/* ── 2. RESET Y BASE ─────────────────────────────────── */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent; /* Elimina el flash azul al tocar en móvil */
}

body {
    background: var(--negro);
    color: var(--blanco);
    font-family: var(--fuente-principal);
    min-height: 100vh;
}

/* ── 3. HEADER ESTÁNDAR ──────────────────────────────── */
/* Mismo header en todos los archivos */
.mvp-header {
    width: 100%;
    background: #000;
    border-bottom: 2px solid var(--gris1);
    padding: 16px 20px;
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.mvp-header-titulo {
    color: var(--oro);
    font-size: var(--txt-xl);
    letter-spacing: 3px;
}
.mvp-header-sub {
    color: var(--texto-apagado);
    font-size: var(--txt-xs);
    letter-spacing: 2px;
    margin-top: 3px;
}

/* ── 4. BOTONES PRINCIPALES ──────────────────────────── */

/* Botón INICIAR — Dorado — para torneos y duelos */
.btn-iniciar-oro {
    width: 100%;
    padding: 22px;
    background: linear-gradient(135deg, var(--oro), #a07800);
    color: #000;
    border: none;
    border-radius: var(--radio-lg);
    font-size: var(--txt-btn);
    font-weight: bold;
    font-family: var(--fuente-principal);
    cursor: pointer;
    letter-spacing: 3px;
    box-shadow: var(--sombra-oro);
    transition: 0.15s;
}
.btn-iniciar-oro:active { transform: scale(0.97); box-shadow: none; }

/* Botón INICIAR — Verde — para entrenamiento */
.btn-iniciar-neon {
    width: 100%;
    padding: 22px;
    background: linear-gradient(135deg, var(--neon), #18b040);
    color: #000;
    border: none;
    border-radius: var(--radio-lg);
    font-size: var(--txt-btn);
    font-weight: bold;
    font-family: var(--fuente-principal);
    cursor: pointer;
    letter-spacing: 3px;
    box-shadow: var(--sombra-neon);
    transition: 0.15s;
}
.btn-iniciar-neon:active { transform: scale(0.97); box-shadow: none; }

/* Botón FINALIZAR — siempre discreto, esquina superior */
.btn-finalizar {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 30;
    background: rgba(0,0,0,0.9);
    border: 1px solid var(--gris1);
    color: var(--texto-apagado);
    padding: 10px 18px;
    border-radius: 20px;
    font-size: var(--txt-xs);
    font-family: var(--fuente-principal);
    cursor: pointer;
    letter-spacing: 2px;
    transition: 0.2s;
}
.btn-finalizar:active { border-color: var(--oro); color: var(--oro); }

/* Botón VOLVER AL MENÚ — siempre texto, nunca invasivo */
.btn-volver {
    width: 100%;
    background: none;
    border: none;
    color: var(--texto-label);
    padding: 15px;
    cursor: pointer;
    font-size: var(--txt-sm);
    font-family: var(--fuente-principal);
    letter-spacing: 2px;
    margin-top: 5px;
    transition: 0.2s;
}
.btn-volver:active { color: var(--oro); }

/* Botón GUARDAR — verde neón */
.btn-guardar {
    width: 100%;
    padding: 20px;
    background: linear-gradient(135deg, var(--neon), #18b040);
    color: #000;
    border: none;
    border-radius: var(--radio-lg);
    font-size: var(--txt-btn);
    font-weight: bold;
    font-family: var(--fuente-principal);
    cursor: pointer;
    letter-spacing: 2px;
    box-shadow: var(--sombra-neon);
    transition: 0.15s;
}
.btn-guardar:active { transform: scale(0.97); box-shadow: none; }

/* Botón SIGUIENTE ENTRADA — azul */
.btn-siguiente {
    width: 100%;
    padding: 18px;
    background: linear-gradient(135deg, var(--azul), #1a5a90);
    color: #fff;
    border: none;
    border-radius: var(--radio-md);
    font-size: var(--txt-btn);
    font-weight: bold;
    font-family: var(--fuente-principal);
    cursor: pointer;
    letter-spacing: 2px;
    box-shadow: var(--sombra-azul);
    transition: 0.15s;
}
.btn-siguiente:active { transform: scale(0.97); box-shadow: none; }

/* Botón de navegación secundario — gris oscuro */
.btn-nav {
    flex: 1;
    padding: 14px;
    background: var(--gris2);
    border: 1px solid var(--gris1);
    border-radius: var(--radio-md);
    color: var(--blanco);
    font-size: var(--txt-xs);
    font-family: var(--fuente-principal);
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    transition: 0.2s;
    letter-spacing: 1px;
}
.btn-nav:active { border-color: var(--oro); }
.btn-nav .nav-icono { font-size: 1.5rem; line-height: 1; }
.btn-nav .nav-txt { font-size: 0.55rem; letter-spacing: 1px; }

/* ── 5. BARRA DE NAVEGACIÓN INFERIOR ─────────────────── */
/* Fija en la parte baja — igual en todos los archivos */
.nav-bottom {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(transparent, #000 35%);
    padding: 10px 15px 22px;
    display: flex;
    gap: 10px;
    max-width: 500px;
    margin: 0 auto;
    z-index: 40;
}

/* ── 6. CAMPOS DE FORMULARIO ─────────────────────────── */
/* Placeholder visible para adultos mayores 45+ */
.mvp-campo {
    width: 100%;
    max-width: 420px;
    background: var(--gris2);
    border: 1px solid var(--gris1);
    border-radius: var(--radio-lg);
    padding: 20px 24px;
    margin-bottom: 12px;
}
.mvp-campo label {
    display: block;
    color: var(--texto-label);
    font-size: var(--txt-sm);   /* Más grande que antes */
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
    font-weight: bold;
}
.mvp-campo input,
.mvp-campo select,
.mvp-campo textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--gris1);
    color: var(--blanco);
    font-family: var(--fuente-principal);
    font-size: var(--txt-lg);
    padding: 8px 0;
    outline: none;
}
/* Placeholder visible — #888 para adultos mayores */
.mvp-campo input::placeholder,
.mvp-campo textarea::placeholder {
    color: var(--texto-placeholder);
    font-size: var(--txt-md);
    font-weight: normal;
}

/* ── 7. CARDS ESTÁNDAR ───────────────────────────────── */
.mvp-card {
    width: 100%;
    max-width: 420px;
    background: var(--gris2);
    border: 1px solid var(--gris1);
    border-radius: var(--radio-xl);
    padding: 22px;
    margin-bottom: 12px;
}

/* ── 8. DIVISOR CON TEXTO ────────────────────────────── */
.mvp-divisor {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 420px;
    margin: 20px 0;
}
.mvp-divisor-linea { flex: 1; height: 1px; background: var(--gris1); }
.mvp-divisor-txt { color: var(--texto-apagado); font-size: var(--txt-xs); letter-spacing: 2px; white-space: nowrap; }

/* ── 9. BARRA DE STATS (ENTRADAS / PROMEDIO / SERIE) ─── */
/* Estándar en duelo y entrenamiento */
.mvp-stats-bar {
    display: flex;
    width: 100%;
    max-width: 420px;
    background: var(--gris3);
    border: 1px solid var(--gris2);
    border-radius: var(--radio-md);
    overflow: hidden;
}
.mvp-stat {
    flex: 1;
    padding: 18px 8px;
    text-align: center;
    border-right: 1px solid var(--gris2);
}
.mvp-stat:last-child { border-right: none; }
.mvp-stat-val {
    font-size: 3.2rem;
    font-weight: 900;
    color: var(--neon);
    font-family: var(--fuente-numeros);
    display: block;
    line-height: 1;
    text-shadow: 0 0 12px rgba(46,255,112,0.4);
}
.mvp-stat-lbl {
    font-size: var(--txt-sm);
    color: var(--texto-label);
    letter-spacing: 2px;
    display: block;
    margin-top: 6px;
    font-weight: bold;
}

/* ── 10. TECLADO NUMÉRICO FIJO ───────────────────────── */
/* Igual en duelo y entrenamiento */
.mvp-teclado {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 25;
    padding: 8px 15px 22px;
    background: linear-gradient(transparent, #000 20%);
}
.mvp-teclado-fila {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-bottom: 10px;
}
.mvp-btn-num {
    background: #141414;
    border: 1px solid #252525;
    color: var(--blanco);
    border-radius: var(--radio-md);
    font-size: 2rem;
    font-weight: 900;
    font-family: var(--fuente-principal);
    padding: 20px 5px;
    cursor: pointer;
    transition: 0.12s;
    user-select: none;
    text-align: center;
    line-height: 1;
}
.mvp-btn-num:active { background: #2a2a2a; transform: scale(0.9); }
.mvp-btn-restar {
    background: rgba(231,76,60,0.12);
    border-color: rgba(231,76,60,0.3);
    color: var(--rojo);
    font-size: 2.2rem;
}
.mvp-btn-restar:active { background: rgba(231,76,60,0.25); }

/* ── 11. ANIMACIONES ESTÁNDAR ────────────────────────── */
/* Rebote al sumar puntos */
@keyframes mvp-bump {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.12); }
    100% { transform: scale(1); }
}
.mvp-bump { animation: mvp-bump 0.2s ease-out; }

/* Parpadeo de urgencia en el reloj */
@keyframes mvp-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.2; }
}
.mvp-urgente {
    color: var(--rojo) !important;
    text-shadow: 0 0 20px var(--rojo) !important;
    animation: mvp-blink 0.5s infinite;
}

/* ── 12. EMPTY STATE ─────────────────────────────────── */
/* Pantalla vacía estándar */
.mvp-empty {
    text-align: center;
    padding: 50px 20px;
    color: var(--texto-apagado);
}
.mvp-empty-icon { font-size: 3rem; margin-bottom: 15px; display: block; }
.mvp-empty-txt { font-size: var(--txt-md); line-height: 2; }