/*
    Tema del portal: "Umbral".
    El paso entre la mesa y el mundo de cada partida: noche azul y la luz cálida de una puerta.
    Se usa en la entrada, la lista de partidas y la administración. Siempre oscuro.

    Paleta:
      noche      #171B30  fondo
      superficie #212643  listas, campos, tarjetas
      piedra     #323A60  bordes
      lámpara    #E8B76E  lo que se pulsa (botones, enlaces)
      luz        #F5E4C3  títulos
      niebla     #A9B0CA  texto secundario
*/
:root[data-tema="portal"] {
    --noche: #171B30;
    --superficie: #212643;
    --piedra: #323A60;
    --lampara: #E8B76E;
    --luz: #F5E4C3;
    --niebla: #A9B0CA;

    --fuente-titulos: "Cormorant Garamond", Georgia, serif;
    --fuente-texto: "Atkinson Hyperlegible", system-ui, sans-serif;

    --bs-body-bg: var(--noche);
    --bs-body-bg-rgb: 23, 27, 48;
    --bs-body-color: #E4E7F1;
    --bs-body-color-rgb: 228, 231, 241;
    --bs-secondary-color: var(--niebla);
    --bs-secondary-bg: var(--superficie);
    --bs-tertiary-bg: var(--superficie);
    --bs-border-color: var(--piedra);
    --bs-heading-color: var(--luz);
    --bs-emphasis-color: #fff;
    --bs-link-color: var(--lampara);
    --bs-link-color-rgb: 232, 183, 110;
    --bs-link-hover-color: var(--luz);
    --bs-link-hover-color-rgb: 245, 228, 195;
    --bs-primary: var(--lampara);
    --bs-primary-rgb: 232, 183, 110;
    --bs-focus-ring-color: rgba(232, 183, 110, .35);
}

[data-tema="portal"] h1, [data-tema="portal"] .h1 { font-weight: 600; font-size: 2.3rem; }
[data-tema="portal"] h2, [data-tema="portal"] .h2,
[data-tema="portal"] h3, [data-tema="portal"] .h3 { font-weight: 600; }

/* --- Barra superior ------------------------------------------------------------------- */
[data-tema="portal"] .barra {
    background: transparent;
    border-bottom: 1px solid var(--piedra);
}
[data-tema="portal"] .barra .marca { color: var(--luz); }

/* --- Botones -------------------------------------------------------------------------- */
[data-tema="portal"] .btn-primary {
    --bs-btn-bg: var(--lampara);
    --bs-btn-border-color: var(--lampara);
    --bs-btn-color: var(--noche);
    --bs-btn-hover-bg: var(--luz);
    --bs-btn-hover-border-color: var(--luz);
    --bs-btn-hover-color: var(--noche);
    --bs-btn-active-bg: var(--luz);
    --bs-btn-active-color: var(--noche);
    --bs-btn-disabled-bg: var(--lampara);
    --bs-btn-disabled-border-color: var(--lampara);
    --bs-btn-disabled-color: var(--noche);
    font-weight: 700;
}
[data-tema="portal"] .btn-outline-primary {
    --bs-btn-color: var(--lampara);
    --bs-btn-border-color: rgba(232, 183, 110, .6);
    --bs-btn-hover-bg: var(--lampara);
    --bs-btn-hover-border-color: var(--lampara);
    --bs-btn-hover-color: var(--noche);
    --bs-btn-active-bg: var(--lampara);
    --bs-btn-active-color: var(--noche);
}
[data-tema="portal"] .btn-outline-secondary {
    --bs-btn-color: var(--niebla);
    --bs-btn-border-color: var(--piedra);
    --bs-btn-hover-bg: var(--piedra);
    --bs-btn-hover-border-color: var(--piedra);
    --bs-btn-hover-color: #fff;
}

/* --- Listas, campos, tarjetas ----------------------------------------------------------- */
[data-tema="portal"] .list-group { --bs-list-group-bg: var(--superficie); --bs-list-group-border-color: var(--piedra); --bs-list-group-action-hover-bg: #2A3053; --bs-list-group-action-active-bg: #2A3053; }
[data-tema="portal"] .card { --bs-card-bg: var(--superficie); --bs-card-border-color: var(--piedra); }
[data-tema="portal"] .form-control,
[data-tema="portal"] .form-select { background-color: #12152A; border-color: var(--piedra); }
[data-tema="portal"] .form-control:focus,
[data-tema="portal"] .form-select:focus { border-color: var(--lampara); box-shadow: 0 0 0 .2rem rgba(232, 183, 110, .25); }
[data-tema="portal"] .form-check-input:checked { background-color: var(--lampara); border-color: var(--lampara); }
[data-tema="portal"] .table { --bs-table-bg: transparent; }

/* --- Lista de partidas: cada una es una puerta al mundo de su juego ------------------------- */
.partida-fila {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.partida-nombre {
    font-family: var(--fuente-titulos);
    font-weight: 600;
    font-size: 1.4rem;
    line-height: 1.15;
    color: var(--luz);
}
/* Logotipo del juego. Cabe cualquier proporción (cuadrado o apaisado) sin deformarse. */
.logo-juego {
    width: 3.25rem;
    height: 3.25rem;
    flex: 0 0 auto;
    object-fit: contain;
    border-radius: .6rem;
}
/* Si el juego no tiene logotipo: un arco sencillo. */
.mini-puerta {
    width: 2.2rem;
    height: 3rem;
    margin: 0 .5rem;
    flex: 0 0 auto;
    border-radius: 1.1rem 1.1rem .2rem .2rem;
    border: 2px solid var(--piedra);
    background: var(--superficie);
}
.rol-partida {
    font-size: .8rem;
    padding: .15rem .55rem;
    border-radius: 1rem;
    border: 1px solid var(--piedra);
    color: var(--niebla);
    white-space: nowrap;
}
.rol-partida.es-master {
    border-color: rgba(232, 183, 110, .6);
    color: var(--lampara);
}

/* --- Pantalla de entrada: el umbral ---------------------------------------------------------- */
.umbral {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 1rem 0;
}
.umbral-nombre {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 600;
    font-size: clamp(3.2rem, 15vw, 4.75rem);
    letter-spacing: .04em;
    line-height: 1;
    color: var(--luz);
    margin: 0;
}
.umbral-lema {
    color: var(--niebla);
    margin: .5rem 0 2.25rem;
    text-align: center;
}
/* La puerta: un arco con luz cálida que sale desde el suelo. Dentro, el formulario. */
.puerta {
    position: relative;
    width: 100%;
    max-width: 22rem;
    padding: 5rem 1.5rem 1.75rem;
    border-radius: 11rem 11rem .6rem .6rem;
    border: 1px solid rgba(232, 183, 110, .5);
    background:
        radial-gradient(130% 75% at 50% 100%, rgba(232, 183, 110, .30), rgba(232, 183, 110, .07) 55%, transparent 78%),
        var(--superficie);
    box-shadow:
        0 0 0 7px var(--noche),
        0 0 0 8px var(--piedra),
        0 1.5rem 4rem -1.5rem rgba(232, 183, 110, .35);
}
/* La luz que se derrama por el suelo, delante de la puerta. */
.puerta::after {
    content: "";
    position: absolute;
    left: 6%;
    right: 6%;
    bottom: -2.4rem;
    height: 2.4rem;
    background: radial-gradient(ellipse at 50% 0%, rgba(232, 183, 110, .32), transparent 70%);
    pointer-events: none;
}
.puerta .form-control {
    background-color: rgba(18, 21, 42, .85);
}
.puerta .form-label {
    color: var(--luz);
}
.puerta-titulo {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 600;
    font-size: 1.6rem;
    text-align: center;
    color: var(--luz);
    margin-bottom: 1.25rem;
}
.umbral .firma {
    margin-top: auto;
    padding-top: 4rem;
}
/* Un único momento animado: la luz de la puerta se enciende al llegar. */
@media (prefers-reduced-motion: no-preference) {
    .puerta { animation: encender 1.4s ease-out both; }
    @keyframes encender {
        from { box-shadow: 0 0 0 7px var(--noche), 0 0 0 8px var(--piedra), 0 1.5rem 4rem -1.5rem rgba(232, 183, 110, 0); border-color: rgba(232, 183, 110, .15); }
    }
}