/*
 * CTM App Base — Reset + Kinetic Arena base
 * Se carga en todas las páginas que usan la plantilla "Mi Torneo — App"
 */

/* ── Reset global ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
    background: #081425 !important;
    min-height: 100%;
}

body.ctm-app-page {
    margin: 0 !important;
    padding: 0 !important;
    background: #081425 !important;
    color: #d8e3fb !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

/* Ocultar todo lo que el tema inserta fuera de nuestro root
   Excepciones: script, style, wpadminbar, y cualquier elemento CTM (modales, toasts) */
body.ctm-app-page > *:not(#ctm-app-root):not(script):not(style):not([id^="ctm-"]):not(.ctm-modal):not(.ctm-toast-container):not(.flatpickr-calendar) {
    display: none !important;
}

/* Admin bar */
#wpadminbar { display: none !important; }
html { margin-top: 0 !important; }

/* ── Contenedor raíz ─────────────────────────────────────────── */
#ctm-app-root {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ── Tokens de diseño Kinetic Arena ─────────────────────────── */
:root {
    --ctm-bg:           #081425;
    --ctm-surface-dim:  #040e1f;
    --ctm-surface:      #0d1a2e;
    --ctm-surface-high: #1f2a3c;
    --ctm-border:       rgba(255,255,255,0.08);
    --ctm-primary:      #bded4d;
    --ctm-primary-dark: #a2d031;
    --ctm-secondary:    #98d59e;
    --ctm-text:         #d8e3fb;
    --ctm-muted:        #6a7a8a;
    --ctm-red:          #e30613;
    --ctm-orange:       #f59e0b;
    --ctm-radius:       10px;
    --ctm-radius-sm:    6px;
    --ctm-shadow:       0 4px 24px rgba(0,0,0,0.4);
}

/* ── Tipografía base ─────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Lexend', sans-serif !important;
    color: #d8e3fb !important;
    margin: 0 0 0.5em !important;
    line-height: 1.2 !important;
}
a { color: var(--ctm-primary); text-decoration: none; }
a:hover { color: #fff; }
p { margin: 0 0 1em; }

/* ── Formularios base (para páginas de login, registro, etc.) ── */
.ctm-app-page input[type="text"],
.ctm-app-page input[type="email"],
.ctm-app-page input[type="password"],
.ctm-app-page input[type="tel"],
.ctm-app-page input[type="number"],
.ctm-app-page input[type="date"],
.ctm-app-page select,
.ctm-app-page textarea {
    background-color: #0d1a2e !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    border-radius: var(--ctm-radius-sm) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    padding: 10px 14px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.9rem !important;
    width: 100%;
    transition: border-color .2s, box-shadow .2s;
}
.ctm-app-page input:focus,
.ctm-app-page select:focus,
.ctm-app-page textarea:focus {
    border-color: rgba(189,237,77,.6) !important;
    box-shadow: 0 0 0 3px rgba(189,237,77,.08) !important;
    outline: none !important;
}
.ctm-app-page input::placeholder,
.ctm-app-page textarea::placeholder {
    color: #4a5a6a !important;
    opacity: 1 !important;
}

/* ── Botones base ────────────────────────────────────────────── */
.ctm-app-page .ctm-btn,
.ctm-app-page button.ctm-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: var(--ctm-radius-sm);
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background .2s, color .2s, opacity .2s;
    text-decoration: none;
}
.ctm-app-page .ctm-btn-primary {
    background: var(--ctm-primary) !important;
    color: #081425 !important;
}
.ctm-app-page .ctm-btn-primary:hover { background: var(--ctm-primary-dark) !important; }
.ctm-app-page .ctm-btn-secondary {
    background: rgba(255,255,255,0.08) !important;
    color: var(--ctm-text) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
}
.ctm-app-page .ctm-btn-secondary:hover { background: rgba(255,255,255,0.13) !important; }

/* ── Página centrada (login, registro, etc.) ─────────────────── */
.ctm-centered-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: var(--ctm-bg);
}
.ctm-centered-card {
    background: #111d2e;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 36px 40px;
    width: 100%;
    max-width: 440px;
    box-shadow: var(--ctm-shadow);
}
.ctm-centered-card h1,
.ctm-centered-card h2 {
    font-size: 1.5rem !important;
    margin-bottom: 6px !important;
}
.ctm-centered-card .ctm-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 28px;
    font-family: 'Lexend', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ctm-primary);
}
@media (max-width: 480px) {
    .ctm-centered-card { padding: 28px 20px; }
}