/* «Tus cartas»: la puerta en Inicio, la colecta y la ronda (app.js, bloque del mismo nombre; 15 nov 2026).
   La pantalla de preguntas reusa las clases fondo-* de «Repásala a fondo» (fondo.css): aquí solo va lo propio.
   Regla de la casa: todo el ancho; las fichas se acomodan solas en columnas y en teléfono se apilan. */

.ronda-mal { color: var(--mal); text-decoration: line-through; text-decoration-thickness: 1px; }
.ronda-bien { color: var(--bien); font-weight: 600; }
.ronda-cambio { display: flex; flex-direction: column; gap: 2px; margin: 0; font-size: 15.5px; line-height: 1.4; }
.ronda-nota { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--tenue); }
.ronda-nota b { color: var(--texto); font-weight: 600; }

/* La puerta, en Inicio */
.ronda-puerta { display: flex; flex-wrap: wrap; gap: 28px 48px; align-items: center; padding: 30px 32px; border-radius: var(--radio);
  background: var(--superficie); border: 1px solid var(--acento-linea); box-shadow: var(--sombra); }
.ronda-puerta-cuenta { flex: 1 1 320px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ronda-puerta-cuenta h2 { margin: 0; font-family: var(--serif); font-size: clamp(30px, 4vw, 46px); line-height: 1.08; }
.ronda-puerta-cuenta .entrada { margin: 0; max-width: 46ch; }
.ronda-acciones { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; margin-top: 4px; }
.ronda-puerta-lista { flex: 999 1 420px; min-width: 0; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px; }
.ronda-puerta-lista li { display: flex; flex-direction: column; gap: 2px; padding: 11px 14px; border-radius: 12px; background: var(--superficie-2); font-size: 15px; line-height: 1.4; }

/* Colecta, cartas de la ronda y resumen */
.ronda-barra { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; margin: 4px 0 20px; }
.ronda-barra b { font-family: var(--serif); font-size: 26px; }
.ronda-barra span { color: var(--tenue); margin-right: auto; }
.ronda-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.ronda-rejilla.justa { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.ronda-ficha { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: var(--radio); background: var(--superficie); border: 1px solid var(--linea); min-width: 0; }
.ronda-ficha.va { border-color: var(--acento-linea); }
.ronda-ficha:not(.va) { opacity: .78; }
.ronda-ficha-cabeza { display: flex; gap: 10px; justify-content: space-between; align-items: baseline; }
.ronda-ficha h3 { margin: 0; font-size: 16px; line-height: 1.3; }
.ronda-sello { flex-shrink: 0; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--acento); }
.ronda-ficha .boton { align-self: flex-start; margin-top: auto; }
.ronda-frases { list-style: none; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--linea); display: flex; flex-direction: column; gap: 8px;
  font-family: var(--serif); font-size: 17px; line-height: 1.3; }
.ronda-almacen { margin-top: 26px; }
.ronda-almacen > .ronda-nota { margin: 10px 0 14px; }

/* La pregunta */
.ronda-cabeza-corta { display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: center; justify-content: space-between; }
.ronda-cabeza-corta .sobre { margin: 0; }
.ronda-avance { height: 6px; border-radius: 3px; background: var(--superficie-2); overflow: hidden; margin: 6px 0 18px; }
.ronda-avance i { display: block; height: 100%; background: var(--acento); border-radius: 3px; transition: width .25s ease; }
.ronda .fondo-carta .ronda-cambio { font-size: 17px; margin: 4px 0 10px; }

@media (max-width: 700px) {
  .ronda-puerta { padding: 22px 18px; }
  .ronda-rejilla { grid-template-columns: 1fr; }
  .ronda-barra span { margin-right: 0; width: 100%; order: 2; }
}

/* Un color por carta (Adolfo, 15 nov 2026: «asociación por color», para que cada carta se reconozca sin leerla).
   La carta lleva el mismo color donde salga: en la puerta, al verlas juntas, en la pregunta y en el resumen. */
.tono-1 { --tono: #d99a1c; } .tono-2 { --tono: #2a9d8f; } .tono-3 { --tono: #8b6fd6; } .tono-4 { --tono: #e0694f; } .tono-5 { --tono: #3f8fd8; }
.ronda-ficha[class*="tono-"] { border-top: 5px solid var(--tono); }
.ronda-ficha[class*="tono-"] h3 { color: var(--tono); }
.ronda-puerta-lista li[class*="tono-"] { border-left: 5px solid var(--tono); }
.ronda .fondo-carta[class*="tono-"] { border-color: var(--tono); border-top-width: 5px; }
.ronda .fondo-carta[class*="tono-"] .fondo-tema, .ronda .fondo-carta[class*="tono-"] h2 { color: var(--tono); }
.ronda .fondo-tarjeta[class*="tono-"] { border-top: 5px solid var(--tono); }

/* Las palabras que se le dan: se califica el molde, no el vocabulario. */
.ronda-usa { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 2px 0 6px; font-size: 14px; color: var(--tenue); }
.ronda-usa b { padding: 5px 11px; border-radius: 999px; background: var(--superficie-2); border: 1px solid var(--linea); color: var(--texto); font-weight: 500; }

/* Cuántas cartas por ronda (Adolfo, 15 nov 2026: que se pueda ajustar de 1 a 5; de entrada, 3). */
.ronda-tam { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--tenue); }
.ronda-tam span { margin-right: 6px; }
.ronda-tam button { min-width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--linea); background: var(--superficie); color: var(--texto); font: inherit; font-weight: 600; cursor: pointer; }
.ronda-tam button[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }

/* Las cartas de la ronda, con el aspecto de la maqueta (Adolfo, 15 nov: «me gusta más la primera que me pusiste»):
   rótulo chico en mayúsculas con el color de la carta, el cambio, las frases en grande y «Cuenta» hasta abajo. */
.ronda-rejilla.justa { gap: 18px; align-items: stretch; }
.ronda-rejilla.justa .ronda-ficha { padding: 24px 22px; gap: 14px; min-height: 360px; border-top-width: 1px; border-color: var(--linea); }
.ronda-rejilla.justa .ronda-ficha h3 { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; line-height: 1.4; color: var(--tono, var(--acento)); }
.ronda-rejilla.justa .ronda-cambio { font-size: 15px; }
.ronda-rejilla.justa .ronda-frases { padding-top: 14px; gap: 13px; font-size: 19px; line-height: 1.3; }
.ronda-cuenta { margin-top: auto; padding-top: 6px; }