/* CiberChess — estilos unificados. Responsivo + modo oscuro. */
:root{
    --brand-h:210;
    --brand-s:85%;
    --brand-l:52%;
    --bg:hsl(220 15% 98%);
    --bg-elev:hsl(220 15% 97%);
    --surface:#fff;
    --text:hsl(220 20% 20%);
    --muted:hsl(220 8% 45%);
    --primary:hsl(var(--brand-h) var(--brand-s) var(--brand-l));
    --primary-600:hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) - 6%));
    --primary-700:hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) - 12%));
    --primary-50:hsl(var(--brand-h) 100% 97%);
    --success:hsl(150 52% 40%);
    --warning:hsl(38 92% 50%);
    --danger:hsl(352 80% 54%);
    --border:hsl(220 14% 90%);
    --shadow:0 6px 20px hsl(220 20% 20%/.08);
    --font-sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",Ubuntu,Cantarell,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji";
    --fs-300:16px;
    --fs-800:40px;
    --r-md:14px;
    --r-lg:20px;
    --sp-4:1rem;
    --sp-5:1.5rem;
    --sp-6:2rem;

    /* 🔹 Variables añadidas para botones y fondo (coherentes con tu segundo CSS) */
    --primary-800:#1a2940;
    --accent:#2f4a7d;
    --accent-2:#4b6cb7;
    --ok:#38bdf8;
    --warn:#f59e0b;
    --paper:#e7dcc7;                                  /* usada en body */
    --bg-texture: radial-gradient(1200px 600px at 20% 0%, #e9edf3 0%, #f7f9fc 60%, #ffffff 100%);

    --radius-sm:8px;
    --radius-md:12px; /* alineado con --r-md */
    --radius-lg:16px;
    --btn-h:44px;
    --focus-ring:0 0 0 3px rgba(168,198,255,.35);
}
@media (prefers-color-scheme: dark){
    :root{
        --bg:hsl(220 15% 10%);
        --bg-elev:hsl(220 15% 12%);
        --surface:hsl(220 15% 14%);
        --text:#fff;
        --muted:hsl(220 10% 70%);
        --border:hsl(220 10% 22%);
        --shadow:0 6px 24px hsl(220 50% 2%/.4);
        --bg-texture: radial-gradient(1200px 600px at 20% 0%, #1a1f2a 0%, #0e1420 60%, #0a0f19 100%);
    }
}
html, body {
    height: 100%;
}
body {
    margin: 0;
    font-family: "Old Standard TT", serif;
    color: var(--paper);
    background: var(--bg-texture), var(--bg);
    background:
        linear-gradient(135deg, rgba(30,60,100,0.9), rgba(10,20,40,1)),
        url("/assets/texturas/dark-mosaic.png"); /* mejor servirla local */
    background-size: cover;
    background-attachment: fixed;
    color: #e0e8ff;
}

/* Opcional: un halo suave en todo el body */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at center, rgba(100,150,220,0.15), transparent 70%);
    pointer-events: none;
}
label{
    text-align: center;
    margin: 7px !important;
}
:where(h1){
    font-size:var(--fs-800);
    margin:0 0 .75rem;
    font-weight:800
}
:where(h2){
    font-size:28px;
    margin:0 0 .5rem
}
:where(p,ul,ol){
    margin:0 0 1rem
}
:where(a){
    color:var(--primary);
    text-decoration:none
}
:where(a:hover){
    text-decoration:underline
}
:where(button,a,input,select,textarea):focus-visible{
    outline:3px solid var(--primary);
    outline-offset:2px
}
/*
input[type=text]{
    background: #e5eefd !important;
    color: black !important;
}
*/
.container,.wrap{
    max-width:1200px;
    margin-inline:auto;
    padding-inline:var(--sp-4)
}
.wrap{
    min-height:100dvh;
    display:grid;
    place-items:center;
    padding-block:var(--sp-6)
}
.card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--r-lg);
    padding:var(--sp-5);
    box-shadow:var(--shadow)
}
.muted{
    color:var(--muted)
}
.hr{
    height:1px;
    background:var(--border);
    margin:var(--sp-6) 0;
    border-radius:1px
}
.row{
    display:flex;
    flex-direction: column;
    flex-wrap:wrap;
    gap:.75rem
}
:where(input,select,textarea){
    width:100%;
    padding:.625rem .75rem;
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--text);
    border-radius:var(--r-md)
}
:where(label){
    font-weight:700;
    display:inline-block;
    margin-bottom:.375rem
}
.alert{
    padding:var(--sp-4);
    border:1px solid var(--border);
    border-radius:var(--r-md)
}
.alert--success{
    background:hsl(150 40% 45%/.1);
    border-color:hsl(150 40% 45%/.35)
}
.alert--danger{
    background:hsl(352 80% 54%/.12);
    border-color:hsl(352 80% 54%/.35)
}

/* Tarjeta de login */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--sp-5);
    box-shadow: var(--shadow);
    width: 100%;
    max-width: fit-content;
    margin: 4rem auto;
}
.title-logo {
    font-family: 'Cinzel', serif;
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 1rem;
    letter-spacing: 2px;
}
.curso-cta{
    margin-top:1.25rem;
    padding:1rem;
    border:1px solid #e5e7eb;
    border-radius:12px;
    background:#000000e8;
}
.curso-cta__title{
    margin:0 0 .25rem;
    font-size:1.1rem
}
.curso-cta__text{
    margin:0 0 .75rem;
    color:#4b5563
}
.btn{
    display:inline-block;
    padding:.6rem 1rem;
    border-radius:10px;
    text-decoration:none
}
.btn-outline{
    border:1px solid #111827
}
.btn-outline:hover{
    background:#111827;
    color:#fff
}
#login_registrado{
    margin-top: 1.25rem;
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #000000e8;
}
#nick_personalizado{
    margin-top: 1.25rem;
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #000000e8;
}
p.muted{
    text-align: center;
}
/* =========================================================
   BOTONES — estilos traídos del segundo CSS y mapeados aquí
   ========================================================= */

/* Base renovada con mejor contraste en hover */
button, .btn{
    --bg: var(--primary);
    --fg: #fff;
    --bd: var(--primary-700);

    min-height: var(--btn-h);
    padding: 12px 16px;
    font-size: 16px;
    line-height: 1.2;
    border-radius: var(--radius-md);
    border: 1px solid var(--bd);
    background: linear-gradient(180deg, var(--bg), var(--primary-700));
    color: var(--fg);
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
    transition: transform .12s ease, filter .12s ease, background .2s ease, box-shadow .2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    text-decoration: none;
    touch-action: manipulation;
}
button:hover, .btn:hover{
    /* 🔹 Fondo ligeramente más oscuro, texto se mantiene blanco para contraste */
    background: linear-gradient(180deg, var(--primary-600), var(--primary-800));
    color: #fff;
    filter: none;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(0,0,0,.28);
}
button:active, .btn:active{
    transform: translateY(0);
    filter: brightness(.98);
}
button:focus-visible, .btn:focus-visible{
    outline: none;
    box-shadow: var(--focus-ring), 0 6px 18px rgba(0,0,0,.25);
}
button:disabled, .btn:disabled, .is-disabled{
    opacity:.6;
    cursor:not-allowed;
    filter:grayscale(.2);
}

/* Variantes semánticas */
.btn-primary{
    --bg: var(--primary);
    --bd: var(--primary-700);
    color:#fff;
}
.btn-success{
    --bg:#2563eb;
    --bd:#1e40af;
    color:#fff;
}
.btn-warning{
    --bg:#b45309;
    --bd:#92400e;
    color:#fff;
}
.btn-danger {
    --bg:#b91c1c;
    --bd:#7f1d1d;
    color:#fff;
}

/* Contorno (outline) */
.btn-outline{
    --fg:#e0e8ff;
    background: transparent;
    color: var(--fg);
    border: 1px solid var(--accent);
}
.btn-outline:hover{
    background: rgba(59,92,154,.18);  /* un poco más opaco para contraste */
    border-color: var(--accent-2);
    color:#fff;                       /* 🔹 asegura contraste en hover */
}
.btn{
    background: transparent !important;
    color: white !important;
    border: 1px solid white !important;
}
/* Fantasma (ghost) */
.btn-ghost{
    background: #00000020;
    color: #e0e8ff;
    border: 1px solid transparent;
}
.btn-ghost:hover{
    background: #00000035;
    border-color: var(--accent);
    color:#fff; /* mejora contraste */
}

/* Sólido estilo tema */
.btn-solid{
    --bg: var(--primary);
    --bd: var(--accent);
    background: linear-gradient(180deg, var(--primary), var(--primary-700));
    color:#fff;
    border:1px solid var(--accent);
}
.btn-solid:hover{
    background: linear-gradient(180deg, var(--accent-2), var(--primary-700));
    color:#fff;
}

/* Tamaños */
.btn-xs{
    min-height:36px;
    padding:8px 12px;
    font-size:14px;
}
.btn-sm{
    min-height:40px;
    padding:10px 14px;
    font-size:15px;
}
.btn-lg{
    min-height:52px;
    padding:14px 18px;
    font-size:17px;
    border-radius: var(--radius-lg);
}

/* Con icono */
.btn .icon{
    width:1.1em;
    height:1.1em;
    display:inline-block;
    line-height:1;
}

#boton_curso{
    text-align: center;
    width: 100%;
}
/* Loading */
.is-loading{
    position:relative;
    pointer-events:none;
}
.is-loading::after{
    content:"";
    width:1em;
    height:1em;
    border-radius:50%;
    border:2px solid rgba(255,255,255,.6);
    border-top-color: transparent;
    display:inline-block;
    margin-left:.5rem;
    animation: spin .9s linear infinite;
}
@keyframes spin{
    to{
        transform: rotate(360deg);
    }
}

/* 🔁 MAPEOS de tus clases existentes a las nuevas variantes */
.btn--ghost{ /* tu clase antigua → ghost moderno */
    background: #00000020;
    color:#e0e8ff;
    border:1px solid transparent;
}
.btn--ghost:hover{
    background:#00000035;
    border-color:var(--accent);
    color:#fff;
}
/* .btn.secondary → outline coherente */
.btn.secondary{
    background: transparent;
    color:#e0e8ff;
    border: 1px solid var(--accent);
}
.btn.secondary:hover{
    background: rgba(59,92,154,.18);
    border-color: var(--accent-2);
    color:#fff;
}