/*
 * Componentes reutilizables.
 * Reúne lo que aparece en más de una pestaña: Los botones, la tarjeta base, los chips de filtro, el buscador, los campos, las insignias, las barras, la ventana de detalle, las tablas, los paneles y los avisos.
 * Ocupa el tercer lugar de la cascada porque consume los testigos de la base y las cajas de la disposición, y porque las hojas de secciones y de acentos necesitan poder afinarlo después.
 * Las variantes de tarjeta que solo existen en una pestaña viven en la hoja de secciones, de modo que aquí queda lo que de verdad se repite.
 * Ninguna regla escribe un color literal, razón por la que cada componente se ve igual de bien en los dos temas sin duplicar nada.
 */

/* ------------------------------------------------------------
   Botones.
   ------------------------------------------------------------ */

.boton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion), background var(--transicion);
}

.boton:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); }
.boton:active { transform: translateY(0); }

.boton[disabled],
.boton[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }

.boton-primario { background: var(--grad-marca); color: var(--marca-tinta); box-shadow: var(--sombra); }

.boton-primario:hover { color: var(--marca-tinta); }

.boton-secundario { background: var(--superficie); border-color: var(--borde); color: var(--tinta); }

.boton-secundario:hover { border-color: var(--marca); color: var(--tinta); }

/* Botón cuadrado que solo lleva un icono, de modo que su nombre accesible viaja en el atributo aria-label. */
.boton-icono {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--superficie);
  color: var(--tinta-2);
  transition: transform var(--transicion), box-shadow var(--transicion), color var(--transicion), border-color var(--transicion);
}

.boton-icono:hover { color: var(--marca); border-color: var(--marca); box-shadow: var(--sombra); }
.boton-tema:hover { transform: rotate(18deg) scale(1.06); }

/* ------------------------------------------------------------
   Tarjeta base.
   Toda tarjeta se puede alcanzar con el tabulador y se activa con Enter o con la barra espaciadora, de ahí que el foco tenga que verse.
   ------------------------------------------------------------ */

.tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  color: var(--tinta);
  overflow: hidden;
  transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}

.tarjeta[role="button"] { cursor: pointer; }
.tarjeta:hover { transform: translateY(-4px); box-shadow: var(--sombra); border-color: var(--borde-fuerte); }

.tarjeta-titulo { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 1.04rem; }

.tarjeta-texto { margin: 0; color: var(--tinta-2); font-size: 0.9rem; }

.tarjeta-codigo {
  margin: 0;
  font-family: var(--fuente-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

.tarjeta-lapso { margin: 0; color: var(--marca); font-size: 0.82rem; font-weight: 700; }

.tarjeta-pie {
  margin: auto 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--borde);
  color: var(--tinta-3);
  font-size: 0.82rem;
}

/* ------------------------------------------------------------
   Barra de herramientas de cada sección, que reúne el buscador, el orden, los chips y el contador.
   ------------------------------------------------------------ */

.barra-herramientas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
}

.campo-busqueda {
  flex: 1 1 260px;
  min-width: 0;
  padding: 12px 18px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--superficie);
  color: var(--tinta);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}

.campo-busqueda::placeholder { color: var(--tinta-3); }

.campo-busqueda:focus {
  outline: none;
  border-color: var(--marca);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--marca) 18%, transparent);
}

/* ------------------------------------------------------------
   Campos de formulario.
   ------------------------------------------------------------ */

.campo { display: flex; flex-direction: column; gap: 5px; margin: 0; }
.campo-etiqueta { color: var(--tinta-2); font-size: 0.84rem; font-weight: 600; }

.selector {
  padding: 10px 12px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-s);
  background: var(--superficie);
  color: var(--tinta);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}

.selector:focus {
  outline: none;
  border-color: var(--marca);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--marca) 18%, transparent);
}

/* Casilla grande, porque una lista de verificación se marca con el dedo tanto como con el ratón. */
.casilla { width: 22px; height: 22px; accent-color: var(--marca); cursor: pointer; }

/* ------------------------------------------------------------
   Chips de filtro.
   ------------------------------------------------------------ */

.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--superficie);
  color: var(--tinta-2);
  font-weight: 600;
  font-size: 0.85rem;
  transition: background var(--transicion), border-color var(--transicion), color var(--transicion), transform var(--transicion);
}

.chip:hover { border-color: var(--marca); color: var(--tinta); transform: translateY(-1px); }

.chip-activo,
.chip[aria-pressed="true"] { background: var(--marca); border-color: var(--marca); color: var(--marca-tinta); box-shadow: var(--sombra); }

.chip-contador {
  padding: 1px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 16%, transparent);
  font-size: 0.74rem;
  font-weight: 800;
}

/* ------------------------------------------------------------
   Insignias.
   Cada insignia lleva su texto escrito, de manera que la identidad nunca depende solo del color.
   ------------------------------------------------------------ */

.insignias { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }

.insignia {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--superficie-2);
  color: var(--tinta-2);
  font-size: 0.72rem;
  font-weight: 700;
}

.insignia-fundacional {
  border-color: color-mix(in srgb, var(--marca) 45%, transparent);
  background: color-mix(in srgb, var(--marca) 12%, var(--superficie));
  color: var(--marca);
}

.insignia-nuevo {
  border-color: color-mix(in srgb, var(--exito) 45%, transparent);
  background: color-mix(in srgb, var(--exito) 12%, var(--superficie));
  color: var(--exito);
}

.insignia-verano {
  border-color: color-mix(in srgb, var(--alerta) 45%, transparent);
  background: color-mix(in srgb, var(--alerta) 12%, var(--superficie));
  color: var(--alerta);
}

/* ------------------------------------------------------------
   Barras de dificultad, de carga y de progreso.
   ------------------------------------------------------------ */

/* La barra se declara en bloque y al ancho completo porque también se emite como span, que en línea no admitiría la altura y quedaría reducida a una mota. */
.barra {
  display: block;
  width: 100%;
  height: 9px;
  border-radius: 999px;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  overflow: hidden;
}

.barra-relleno {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--grad-marca);
  transition: width 260ms ease;
}

/* ------------------------------------------------------------
   Contador, estado vacío y paginación.
   ------------------------------------------------------------ */

.contador { margin: 0; color: var(--tinta-3); font-size: 0.88rem; }

.vacio {
  margin: 18px 0;
  padding: 26px 22px;
  border: 1px dashed var(--borde-fuerte);
  border-radius: var(--radio);
  background: var(--superficie);
  color: var(--tinta-2);
  text-align: center;
}

.paginacion { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 22px 0 0; }

.pagina-boton {
  min-width: 38px;
  padding: 7px 11px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-s);
  background: var(--superficie);
  color: var(--tinta-2);
  font-weight: 600;
  transition: border-color var(--transicion), color var(--transicion);
}

.pagina-boton:hover { border-color: var(--marca); color: var(--marca); }

.pagina-boton[aria-current="page"] { background: var(--marca); border-color: var(--marca); color: var(--marca-tinta); }

/* ------------------------------------------------------------
   Paneles de contenido fijo.
   ------------------------------------------------------------ */

.panel {
  margin: 22px 0;
  padding: 22px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

.panel:empty { display: none; }

.panel-titulo { margin: 0 0 12px; display: flex; align-items: center; gap: 9px; font-size: 1.18rem; }

.panel-texto { margin: 0 0 8px; color: var(--tinta-2); }

.panel-total {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--borde);
  font-family: var(--fuente-titulo);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--marca);
}

.lista-simple { margin: 0 0 10px; padding-left: 1.2em; color: var(--tinta-2); }
.lista-simple li { margin-bottom: 4px; }

/* ------------------------------------------------------------
   Tablas, que en pantallas estrechas se desplazan dentro de su envoltorio.
   ------------------------------------------------------------ */

.tabla-envoltorio { overflow-x: auto; margin: 0 0 12px; }
.tabla { width: 100%; min-width: 420px; font-size: 0.92rem; }

.tabla th,
.tabla td { padding: 9px 12px; border-bottom: 1px solid var(--borde); text-align: left; }

.tabla th {
  color: var(--tinta-3);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tabla tbody tr:hover { background: color-mix(in srgb, var(--marca) 6%, transparent); }

/* ------------------------------------------------------------
   Bloques plegables.
   ------------------------------------------------------------ */

.detalle,
.plegable {
  margin: 0 0 8px;
  padding: 12px 16px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-s);
  background: var(--superficie-2);
}

.detalle > summary,
.plegable > summary { cursor: pointer; font-weight: 600; color: var(--tinta); }

.detalle[open] > summary,
.plegable[open] > summary { margin-bottom: 8px; color: var(--marca); }

.detalle-texto { margin: 0; color: var(--tinta-2); }

/* ------------------------------------------------------------
   Avisos.
   El color va acompañado del marco y del texto, de modo que el mensaje se entiende también impreso en blanco y negro.
   ------------------------------------------------------------ */

.aviso {
  margin: 14px 0;
  padding: 13px 18px;
  border: 1px solid var(--borde);
  border-left: 4px solid var(--marca);
  border-radius: var(--radio-s);
  background: var(--superficie-2);
  color: var(--tinta-2);
  font-size: 0.93rem;
}

.aviso-error {
  border-left-color: var(--peligro);
  background: color-mix(in srgb, var(--peligro) 10%, var(--superficie));
  color: var(--peligro);
}

.aviso-alerta {
  border-left-color: var(--alerta);
  background: color-mix(in srgb, var(--alerta) 10%, var(--superficie));
  color: var(--alerta);
}

.aviso-exito {
  border-left-color: var(--exito);
  background: color-mix(in srgb, var(--exito) 10%, var(--superficie));
  color: var(--exito);
}

/* ------------------------------------------------------------
   Ventana de detalle.
   ------------------------------------------------------------ */

/* La columna se declara con un mínimo de cero para que el contenido más ancho de la ficha no ensanche la rejilla y la ventana pueda ceñirse al ancho de la pantalla. */
.modal-fondo {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 20px;
  background: color-mix(in srgb, var(--tinta) 55%, transparent);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.modal {
  width: min(760px, 100%);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  padding: 24px 26px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-g);
  box-shadow: var(--sombra-alta);
  animation: modal-entra 220ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

@keyframes modal-entra {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.modal-cabecera {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--borde);
}

/* El ancho mínimo de cero deja que el título y el cuerpo se encojan dentro de la ventana en lugar de estirarla desde dentro. */
.modal-titulo { margin: 0; flex: 1; min-width: 0; font-size: 1.35rem; }
.modal-cerrar { flex: 0 0 auto; }
.modal-cuerpo { min-width: 0; overflow-y: auto; padding-top: 14px; }

.ficha-titulo { margin: 18px 0 8px; font-size: 1.02rem; color: var(--marca); }
.ficha-texto { margin: 0 0 10px; color: var(--tinta-2); }

.ficha-nota {
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--borde);
  color: var(--tinta-3);
  font-size: 0.85rem;
}