/* ATERRIZA EU — S12 «Cartas listas» (02/10/2026). Solo lo que no existe ya en
   mi.css / componentes.css; todo con las variables de tokens.css, móvil primero. */

.lista-cartas {
  list-style: none;
  margin: var(--espacio-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--espacio-3);
}

.carta-item {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  padding: var(--espacio-4);
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
}

.carta-item__titulo { font-weight: var(--peso-bold); font-size: var(--texto-md); margin: 0; }
.carta-item__resumen { font-size: var(--texto-sm); color: var(--color-carbon-70); margin: 0; }
.carta-item__base { font-size: var(--texto-xs); color: var(--color-carbon-50); margin: 0; }
.carta-item__estado {
  align-self: flex-start;
  font-size: var(--texto-xs);
  font-weight: var(--peso-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px var(--espacio-2);
  border-radius: var(--radio-completo);
  background: var(--color-progreso-bg);
  color: var(--color-progreso-fg);
}
.carta-item__estado--pack { background: var(--color-info-bg); color: var(--color-info-fg); }

.form-seccion { margin-bottom: var(--espacio-5); }
.form-seccion > h2 { font-size: var(--texto-md); margin: 0 0 var(--espacio-3); }

.campo--casilla { display: flex; flex-direction: row; align-items: flex-start; gap: var(--espacio-3); }
.campo--casilla input { margin-top: 4px; }
.campo__error { color: var(--color-alerta-fg); font-size: var(--texto-sm); }
.campo[data-invalido] input, .campo[data-invalido] select { border-color: var(--color-alerta-fg); }

.carta-papel {
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-sm);
  padding: var(--espacio-4);
  font-size: var(--texto-sm);
  line-height: var(--interlineado-texto);
  overflow-wrap: anywhere;
}
.carta-papel p { margin: 0 0 var(--espacio-3); }
.carta-papel--es { background: var(--color-crema); }
.carta-papel__direccion { color: var(--color-carbon-50); font-size: var(--texto-xs); }

.modelo-fijo { font-weight: var(--peso-bold); }

@media (min-width: 720px) {
  .lista-cartas { grid-template-columns: repeat(2, 1fr); }
}