/*
 * Tarjetas de las rejillas e insignias.
 * Contiene las insignias, las tarjetas de solo texto, las tarjetas de temas, los términos del glosario, el estado vacío con su botón de limpiar y el color de acento por área.
 */

/* Insignias */
.insignias { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.insignia {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.18rem 0.6rem;
  border-radius: 7px;
  background: var(--superficie-3);
  color: var(--tinta-2);
  border: 1px solid var(--borde-2);
}
/* Respaldo neutro: si el código emite un mod-* que aún no tiene regla,
   la insignia degrada a los colores de superficie en vez de quedar
   desnuda por consumir variables inexistentes */
.insignia.modalidad { border: none; background: var(--superficie-3); color: var(--tinta-2); }
.insignia.mod-gramatica { background: var(--gram-suave); color: var(--gram); }
.insignia.mod-sintaxis { background: var(--sint-suave); color: var(--sint); }
.insignia.mod-ortografia { background: var(--orto-suave); color: var(--orto); }
.insignia.mod-literatura { background: var(--lit-suave); color: var(--lit); }
.insignia.mod-lexico { background: var(--lex-suave); color: var(--lex); }
.insignia.categoria { background: var(--info-suave); color: var(--info); border: none; }
.insignia.nivel { text-transform: uppercase; font-size: 0.64rem; }
/* Las clases de dificultad van sin acentos (dom-basico y no básico) para
   que el dato con tilde nunca tenga que coincidir letra a letra con el CSS */
.insignia.nivel.dom-basico { background: var(--exito-suave); color: var(--exito); border: none; }
.insignia.nivel.dom-intermedio { background: var(--alerta-suave); color: var(--alerta); border: none; }
.insignia.nivel.dom-avanzado { background: var(--peligro-suave); color: var(--peligro); border: none; }

.sin-resultados {
  grid-column: 1 / -1;
  text-align: center;
  padding: 4rem 1rem;
  color: var(--tinta-3);
}
.emoji-grande { font-size: 3rem; margin-bottom: 0.5rem; }

/* Salida rápida del estado vacío: un solo botón devuelve el buscador y los
   chips a su estado inicial. */
.boton-limpiar {
  display: inline-flex; align-items: center; gap: 0.45rem;
  margin-top: 1.1rem;
  background: color-mix(in srgb, var(--marca-500) 12%, transparent);
  color: var(--marca-tinta);
  border: 1px solid color-mix(in srgb, var(--marca-500) 35%, transparent);
  padding: 0.55rem 1.05rem;
  border-radius: var(--r-sm);
  font-size: 0.88rem; font-weight: 600; font-family: inherit;
  cursor: pointer;
  transition: all 0.2s var(--paso);
}
.boton-limpiar:hover { background: var(--marca-grad); color: #fff; border-color: transparent; transform: translateY(-1px); box-shadow: var(--sombra-marca); }
.boton-limpiar:active { transform: translateY(0) scale(0.98); box-shadow: none; }

/* Coincidencias de la búsqueda realzadas en las tarjetas. El realce usa la
   marca en vez del amarillo del navegador, porque ese amarillo ignora el tema
   oscuro y pelea con los acentos de color. */
.tarjeta-texto mark, .tema-tarjeta mark, .termino mark {
  background: color-mix(in srgb, var(--marca-400) 26%, transparent);
  color: inherit;
  border-radius: 3px;
  padding: 0 0.1em;
}

/* ============================================================
   Tarjetas de solo texto (signos, clasificaciones, calculadoras)
   ============================================================ */
.galeria-texto { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.tarjeta-texto {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  padding: 1.1rem 1.25rem;
  box-shadow: var(--sombra-sm);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s var(--paso), box-shadow 0.25s var(--paso), border-color 0.25s;
  animation: aparecer 0.5s var(--paso) both;
}
.tarjeta-texto::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; background: var(--marca-grad);
  transform: scaleY(0); transform-origin: top;
  transition: transform 0.3s var(--paso);
}
.tarjeta-texto:hover { transform: translateY(-4px); box-shadow: var(--sombra-lg); border-color: color-mix(in srgb, var(--marca-400) 40%, var(--borde)); }
.tarjeta-texto:hover::before { transform: scaleY(1); }
.tarjeta-texto h3 { font-size: 1.02rem; margin: 0.55rem 0 0.4rem; font-weight: 700; letter-spacing: -0.01em; }
.tarjeta-texto p { font-size: 0.86rem; color: var(--tinta-2); }

/* ============================================================
   Temas
   ============================================================ */
.temas { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.1rem; }
.tema-tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  padding: 1.35rem 1.45rem;
  box-shadow: var(--sombra-sm);
  cursor: pointer;
  position: relative; overflow: hidden;
  transition: transform 0.25s var(--paso), box-shadow 0.25s var(--paso), border-color 0.25s;
  animation: aparecer 0.5s var(--paso) both;
}
.tema-tarjeta::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--marca-grad); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--paso);
}
.tema-tarjeta:hover { transform: translateY(-5px); box-shadow: var(--sombra-lg); border-color: color-mix(in srgb, var(--marca-400) 40%, var(--borde)); }
.tema-tarjeta:hover::after { transform: scaleX(1); }
.tema-tarjeta h3 { font-size: 1.12rem; margin: 0.6rem 0 0.45rem; font-weight: 700; letter-spacing: -0.015em; }
.tema-tarjeta p { font-size: 0.9rem; color: var(--tinta-2); }
.tema-meta { margin-top: 0.85rem; font-size: 0.76rem; color: var(--tinta-3); font-weight: 600; }

/* ============================================================
   Glosario
   ============================================================ */
.glosario { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0.85rem; }
.termino {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  padding: 1.1rem 1.25rem;
  box-shadow: var(--sombra-sm);
  border-left: 3px solid var(--marca-400);
  transition: transform 0.2s var(--paso), box-shadow 0.2s;
  animation: aparecer 0.4s var(--paso) both;
}
.termino:hover { transform: translateY(-3px); box-shadow: var(--sombra-md); }
.termino h3 { font-size: 1.02rem; color: var(--tinta); font-weight: 700; margin-top: 0.35rem; }
.termino p { font-size: 0.9rem; color: var(--tinta-2); margin-top: 0.3rem; }

/* Ícono de estado vacío */
.emoji-grande .ico { width: 46px; height: 46px; color: var(--tinta-3); stroke-width: 1.6; }

/* ============================================================
   Color de acento por sistema del cuerpo
   ============================================================ */
.sis-gramatica { --acento-sis: #7c3aed; }
.sis-sintaxis { --acento-sis: #16a34a; }
.sis-ortografia { --acento-sis: #0891b2; }
.sis-literatura { --acento-sis: #db2777; }
.sis-lexico-y-semantica { --acento-sis: #d97706; }
.sis-expresion-y-redaccion { --acento-sis: #4f46e5; }
.sis-comprension-lectora { --acento-sis: #0d9488; }
.sis-comunicacion { --acento-sis: #e11d48; }

.tarjeta-texto[class*="sis-"] { border-top: 3px solid var(--acento-sis, var(--marca-400)); }
/* Las proporciones de la mezcla son tokens: el tema oscuro sube el fondo y
   aclara la tinta hacia el blanco sin duplicar esta regla por las dos vías. */
.insignia.sistema {
  background: color-mix(in srgb, var(--acento-sis, var(--marca-500)) var(--sis-fondo), transparent);
  color: color-mix(in srgb, var(--acento-sis, var(--marca-500)) var(--sis-tinta), #fff);
  border: none;
}