/* Layout compartido: variables y ajustes para mobile horizontal */

:root {
  --navbar-height: 0px;
}

body:has(.topbar) {
  --navbar-height: 52px;
}

@media (max-width: 1000px) and (orientation: landscape) {
  body:has(.topbar) {
    --navbar-height: 36px;
  }
}

@media (max-width: 1000px) and (orientation: landscape) {
  /* Contenedores con navbar: evitar recorte por 100vh + topbar */
  body:has(.topbar) .container-inicio,
  body:has(.topbar) .container-auth,
  body:has(.topbar) .container-puntajes,
  body:has(.topbar) .container-salas,
  body:has(.topbar) .container-crear-sala {
    min-height: calc(100dvh - var(--navbar-height));
    max-height: calc(100dvh - var(--navbar-height));
    height: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 16px;
    box-sizing: border-box;
  }

  /* ── Inicio: logo + botones en fila ── */
  .container-inicio {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px 20px;
  }

  .logo-inicio {
    margin-bottom: 0;
    flex-shrink: 0;
    margin-right: 3rem;
  }

  .botones-inicio {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 340px;
    justify-content: center;
  }

  .btn-inicio {
    flex: 1 1 calc(50% - 4px);
    min-width: 130px;
    max-width: 165px;
    min-height: 38px;
    padding: 6px 12px;
    font-size: 14px;
  }

  /* ── Auth / Jugar / Login ── */
  .container-auth:not(.page-bienvenida) {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px 16px;
    min-height: 100dvh;
    max-height: 100dvh;
    padding: 8px 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  body:has(.topbar) .container-auth:not(.page-bienvenida) {
    min-height: calc(100dvh - var(--navbar-height));
    max-height: calc(100dvh - var(--navbar-height));
  }

  .container-auth:not(.page-bienvenida) .logo-auth {
    width: 16rem;
    margin-bottom: 0;
    flex-shrink: 0;
    margin-right: 3rem;
    margin-top: 0;
  }

  .container-auth:not(.page-bienvenida) .auth-form {
    padding: 1rem 1.1rem;
    max-width: 340px;
    gap: 0.6rem;
  }

  .auth-title {
    font-size: 1.05rem;
    margin-bottom: 0.2rem;
  }

  .bienvenida-subtitle {
    font-size: 0.88rem;
  }

  .container-auth:not(.page-bienvenida) .bienvenida-acciones {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }

  .container-auth:not(.page-bienvenida) .bienvenida-acciones .btn-auth {
    flex: 1 1 calc(50% - 4px);
    min-width: 120px;
    padding: 0.5rem 0.8rem;
    font-size: 0.9rem;
  }

  .container-auth:not(.page-bienvenida) .bienvenida-acciones .auth-link {
    flex-basis: 100%;
    min-height: auto;
    padding: 4px 0;
    font-size: 0.85rem;
  }

  /* ── Bienvenida: columna centrada, info debajo ── */
  .page-bienvenida {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 100dvh;
    max-height: 100dvh;
    padding: 12px 16px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    gap: 0;
    box-sizing: border-box;
  }

  .page-bienvenida .bienvenida-hero {
    display: flex;
    flex-direction: row;
    align-items: center;
    max-width: 40rem;
    margin-inline: auto;
    flex-shrink: 0;
    gap: 2rem;
    margin-top: 1rem;
  }

  .page-bienvenida .logo-auth {
    margin-bottom: 10px;
    margin-top: 0;
  }

  .page-bienvenida .bienvenida-box {
    width: 100%;
    max-width: none;
    padding: 1rem 1.1rem;
    gap: 0.6rem;
  }

  .page-bienvenida .bienvenida-acciones {
    flex-direction: column;
    gap: 8px;
  }

  .page-bienvenida .bienvenida-acciones .btn-auth {
    flex: none;
    min-width: 0;
    /*! min-height: 38px; */
  }

  .page-bienvenida .bienvenida-info {
    width: min(560px, 92vw);
    max-width: 560px;
    margin-top: 12px;
    margin-inline: auto;
    flex: 0 0 auto;
    gap: 0.8rem;
    box-sizing: border-box;
  }

  .bienvenida-info article {
    padding: 0.8rem 1rem;
  }

  .bienvenida-info h2 {
    font-size: 0.9rem;
  }

  .bienvenida-info p,
  .bienvenida-pasos {
    font-size: 0.82rem;
    line-height: 1.4;
  }

  .auth-form input[type='text'],
  .auth-form input[type='password'] {
    padding: 0.5rem 0.8rem;
  }

  .btn-auth {
    /*! min-height: 38px; */
    padding: 0.5rem 0.8rem;
    font-size: 0.9rem;
  }

  /* ── Puntajes ── */
  .container-puntajes {
    align-items: flex-start;
    padding-top: 8px;
  }

  .puntajes-box {
    padding: 12px 14px;
    max-width: 100%;
  }

  .logo-puntajes {
    margin-bottom: 4px;
  }

  .puntajes-box h2 {
    margin-bottom: 8px;
    font-size: 1rem;
  }

  .tabla-puntajes {
    max-height: calc(100dvh - var(--navbar-height) - 140px);
    margin-bottom: 10px;
  }

  .tabla-puntajes th,
  .tabla-puntajes td {
    padding: 4px 6px;
    font-size: 12px;
  }

  .btn-puntajes {
    min-height: 36px;
    padding: 6px 16px;
    font-size: 13px;
  }

  /* ── Salas ── */
  .container-salas {
    padding-top: 8px;
    justify-content: flex-start;
  }

  .header-salas {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 16px;
    margin-bottom: 10px;
  }

  .logo-salas {
    width: 56px;
    margin-bottom: 0;
  }

  .input-buscar {
    margin-bottom: 8px;
    padding: 6px 12px;
    max-width: 240px;
  }

  .tabla-salas {
    padding: 8px 10px;
    margin-bottom: 10px;
    max-height: calc(100dvh - var(--navbar-height) - 160px);
    overflow-y: auto;
  }

  .tabla-salas th,
  .tabla-salas td {
    padding: 5px 8px;
    font-size: 12px;
  }

  .botones-salas {
    gap: 8px;
  }

  .btn-salas {
    min-height: 36px;
    padding: 6px 14px;
    font-size: 13px;
  }

  .btn-unirse {
    min-height: 32px;
    padding: 4px 10px;
    font-size: 12px;
  }

  /* ── Crear sala ── */
  .container-crear-sala {
    min-height: calc(100dvh - var(--navbar-height));
    height: auto;
    align-items: flex-start;
    padding-top: 8px;
  }

  .form-crear-sala {
    padding: 14px 16px 12px;
    max-width: 420px;
    margin-top: 2rem;
    margin-left: 0;
    margin-right: 0;
  }

  .form-crear-sala h1,
  .form-crear-sala h2 {
    margin-bottom: 10px;
    font-size: 1.05rem;
  }

  .form-crear-sala label {
    margin-top: 6px;
    font-size: 13px;
  }

  .input-crear {
    padding: 6px 10px;
    margin-bottom: 4px;
  }

  .botones-crear {
    margin-top: 10px;
    gap: 8px;
  }

  .btn-crear {
    min-height: 36px;
    padding: 6px 14px;
    font-size: 13px;
  }

  /* ── Reglas ── */
  .container-reglas {
    padding: 8px 12px;
    align-items: flex-start;
  }

  .reglas-articulo {
    padding: 14px 16px;
  }

  .reglas-header {
    margin-bottom: 12px;
    padding-bottom: 10px;
  }

  .logo-reglas {
    width: 48px;
    margin-bottom: 6px;
  }

  .reglas-articulo h1 {
    font-size: 1.15rem;
    padding-bottom: 6px;
  }

  .reglas-bajada {
    font-size: 0.82rem;
    margin-bottom: 10px;
  }

  .fact-strip li {
    padding: 4px 10px;
  }

  .fact-strip strong {
    font-size: 0.95rem;
  }

  .fact-strip span {
    font-size: 0.58rem;
  }

  .reglas-toc {
    padding: 8px 12px;
    margin-bottom: 14px;
  }

  .seccion {
    margin-bottom: 16px;
  }

  .seccion-header {
    margin: 14px 0 8px;
  }

  .reglas-articulo h2 {
    font-size: 0.95rem;
  }

  .reglas-articulo p,
  .seccion-intro {
    font-size: 0.82rem;
    margin-bottom: 6px;
  }

  .grid-mazo li {
    padding: 6px 0;
    font-size: 0.82rem;
  }

  .grid-cartas {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 8px;
  }

  .carta-regla {
    padding: 10px 12px;
  }

  .reglas-footer {
    margin-top: 16px;
    padding-top: 12px;
    gap: 8px;
  }

  a.btn-reglas,
  a.btn-reglas:link,
  a.btn-reglas:visited {
    min-height: 36px;
    padding: 6px 14px;
    font-size: 13px;
    width: auto;
  }
}