/* ═══════════════════════════════════════════════════════════
   ESCRITORIO
   ───────────────────────────────────────────────────────────
   La app está pensada para el teléfono y así tiene que seguir.
   Pero también se usa desde una computadora —el que administra
   propiedades, el que atiende una inmobiliaria, el profesional
   que arma su perfil tranquilo— y ahí una columna de 560 px en
   el medio de una pantalla de 27 pulgadas se ve como un error.

   No se rediseña nada: se reacomoda. La barra de pestañas, que
   abajo está donde llega el pulgar, en una computadora no tiene
   sentido abajo —el mouse llega a cualquier lado— y pasa a ser
   una columna a la izquierda, que es donde uno la busca.
   ═══════════════════════════════════════════════════════════ */

@media (min-width: 1000px) {

  /* ── La barra de pestañas, a la izquierda ── */
  .tabs {
    top: 0; bottom: 0; right: auto;
    width: 218px;
    grid-template-columns: 1fr;
    grid-auto-rows: min-content;
    align-content: start;
    gap: 2px;
    padding: 84px 12px 12px;
    border-top: 0;
    border-right: 1px solid var(--linea-soft);
    background: rgba(11, 22, 32, 0.55);
  }
  .tab {
    flex-direction: row; justify-content: flex-start; align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: var(--r-sm);
    font-size: 14.5px; letter-spacing: 0;
  }
  .tab .tab-i { width: 21px; height: 21px; }
  .tab:hover { background: var(--tinta-2); color: var(--cal-2); }
  .tab.activa { background: var(--tinta-3); }
  /* La rayita de arriba que marca la pestaña activa pasa a ser un borde
     lateral: en una columna, una línea horizontal no marca nada. */
  .tab.activa::before,
  .tab.activa::after {
    top: 8px; bottom: 8px; left: 0; right: auto;
    width: 3px; height: auto;
    border-radius: 0 3px 3px 0;
  }
  .tab-globo { position: static; margin-left: auto; }

  /* ── El contenido, al lado ── */
  main {
    max-width: 900px;
    margin-left: 218px;
    padding-left: var(--s6);
    padding-right: var(--s6);
    padding-bottom: var(--s7);
  }
  .barra {
    padding-left: calc(218px + var(--s6));
    padding-right: var(--s6);
  }
  .barra-titulo { font-size: 16px; }

  /* La hoja de abajo, en una computadora, es un panel al costado:
     que suba desde abajo en una pantalla ancha se siente raro. */
  .hoja-panel {
    max-width: 560px;
    margin-left: auto; margin-right: 0;
    border-radius: var(--r-lg) 0 0 var(--r-lg);
    max-height: 100dvh; height: 100dvh;
  }

  /* Listas y tarjetas aprovechan el ancho en vez de estirarse. */
  .matches-lista { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .beneficios-lista { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* Pantallas muy anchas: el contenido se centra en vez de pegarse al menú. */
@media (min-width: 1400px) {
  main { margin-left: 218px; margin-right: auto; }
}

/* ── El mazo, en escritorio ────────────────────────────────
   La tarjeta se arrastra igual con el mouse, pero con teclado y
   con botones grandes se maneja más rápido: se muestran las
   teclas al lado de cada botón. */
@media (min-width: 1000px) and (pointer: fine) {
  .mazo-teclas { display: flex; }
}
.mazo-teclas { display: none; gap: 10px; justify-content: center; margin-top: 10px; }
.mazo-teclas kbd {
  font-family: var(--dato); font-size: 11px; color: var(--cal-3);
  border: 1px solid var(--linea); border-bottom-width: 2px;
  border-radius: 4px; padding: 1px 6px;
}