/* OPOS-IA — componentes. Mismas clases que el sistema de diseño (prefijo oi-). */
.oi-base { font-family: var(--font-texto); color: var(--tinta); }
.oi-curva { transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }

/* Botón */
.oi-boton {
  font-family: var(--font-texto); font-size: 16px; line-height: 24px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--espacio-2);
  min-height: 44px; padding: var(--espacio-3) var(--espacio-5);
  border-radius: var(--radio-m); border: 2px solid transparent; cursor: pointer;
  transition: background-color var(--duracion-rapida), border-color var(--duracion-rapida), color var(--duracion-rapida), transform var(--duracion-rapida);
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
.oi-boton:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }
.oi-boton:active { transform: translateY(1px); }
.oi-boton--primario { background: var(--accion); color: var(--on-accion); padding-right: var(--espacio-4); }
.oi-boton--primario:hover { background: var(--accion-fuerte); transform: translateY(-1px); box-shadow: 0 6px 16px -6px var(--accion); }
.oi-boton--primario:active { transform: translateY(0); box-shadow: none; }
.oi-boton--secundario { background: var(--fondo-superficie); color: var(--accion); border-color: var(--accion); }
.oi-boton--secundario:hover { background: var(--anil-suave); color: var(--accion-fuerte); }
.oi-boton--fantasma { background: transparent; color: var(--accion); padding-left: var(--espacio-3); padding-right: var(--espacio-3); }
.oi-boton--fantasma:hover { background: var(--anil-suave); color: var(--accion-fuerte); }
/* La diana del botón primario: un anillo a la derecha cuyo punto naranja aparece al pasar el ratón. */
.oi-diana { width: 16px; height: 16px; flex: none; margin-left: var(--espacio-1); }
.oi-diana__anillo { fill: none; stroke: currentColor; stroke-width: 2.5; }
.oi-diana__punto { fill: var(--naranja); transform-origin: center; transform: scale(0); transition: transform var(--duracion-media) cubic-bezier(0.2, 0.8, 0.2, 1); }
.oi-boton--primario:hover .oi-diana__punto, .oi-boton--primario:focus-visible .oi-diana__punto { transform: scale(1); }
.oi-boton--pequeno { min-height: 36px; font-size: 14px; line-height: 20px; padding: var(--espacio-2) var(--espacio-4); }
.oi-boton[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }

/* Campo */
.oi-campo { display: flex; flex-direction: column; gap: var(--espacio-2); font-family: var(--font-texto); color: var(--tinta); }
.oi-campo__etiqueta { font-size: 14px; line-height: 20px; font-weight: 600; }
.oi-campo__input {
  font: inherit; font-size: 16px; line-height: 24px; color: var(--tinta);
  background: var(--fondo-superficie); border: 2px solid var(--borde-fuerte); border-radius: var(--radio-m);
  padding: var(--espacio-3) var(--espacio-4); min-height: 48px; width: 100%; box-sizing: border-box;
  transition: border-color var(--duracion-rapida) cubic-bezier(0.2, 0.8, 0.2, 1);
}
.oi-campo__input::placeholder { color: var(--tinta-3); }
.oi-campo__input:hover { border-color: var(--anil); }
.oi-campo__input:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-color: var(--anil); }
.oi-campo__ayuda { font-size: 14px; line-height: 20px; color: var(--tinta-2); }
.oi-campo--error .oi-campo__input { border-color: var(--fallo); }
.oi-campo--error .oi-campo__ayuda { color: var(--fallo); font-weight: 600; display: flex; gap: var(--espacio-1); align-items: center; }

/* Tarjeta */
.oi-tarjeta {
  background: var(--fondo-superficie); border: 1px solid var(--borde); border-radius: var(--radio-l);
  padding: var(--espacio-5); font-family: var(--font-texto); color: var(--tinta);
  transition: box-shadow var(--duracion-rapida) cubic-bezier(0.2, 0.8, 0.2, 1);
}
.oi-tarjeta:hover { box-shadow: var(--sombra-s); }
.oi-tarjeta--destacada { background: var(--naranja-suave); border-color: var(--naranja); }
.oi-tarjeta__sobretitulo { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-2); margin: 0 0 var(--espacio-2); }
.oi-tarjeta__titulo { font-family: var(--font-display); font-size: 20px; line-height: 26px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 var(--espacio-3); }
.oi-tarjeta__cuerpo { font-size: 16px; line-height: 24px; margin: 0; }

/* Etiqueta */
.oi-etiqueta {
  display: inline-flex; align-items: center; gap: var(--espacio-1);
  font-family: var(--font-texto); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: var(--espacio-1) var(--espacio-2); border-radius: var(--radio-s);
}
.oi-etiqueta--neutro { background: var(--fondo-hundido); color: var(--tinta-2); }
.oi-etiqueta--naranja { background: var(--naranja-suave); color: var(--naranja-texto); }
.oi-etiqueta--anil { background: var(--anil-suave); color: var(--anil-fuerte); }
.oi-etiqueta--acierto { background: var(--acierto-suave); color: var(--acierto); }
.oi-etiqueta--fallo { background: var(--fallo-suave); color: var(--fallo); }
.oi-etiqueta--aviso { background: var(--aviso-suave); color: var(--aviso); }

/* Opción de test */
.oi-opcion {
  display: flex; align-items: flex-start; gap: var(--espacio-3); width: 100%; text-align: left;
  font-family: var(--font-texto); font-size: 16px; line-height: 24px; color: var(--tinta);
  background: var(--fondo-superficie); border: 2px solid var(--borde); border-radius: var(--radio-m);
  padding: var(--espacio-3) var(--espacio-4); cursor: pointer; box-sizing: border-box;
  transition: border-color var(--duracion-rapida), background-color var(--duracion-media);
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
.oi-opcion:hover { border-color: var(--anil); }
.oi-opcion:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.oi-opcion__letra {
  flex: none; width: 28px; height: 28px; border-radius: var(--radio-pill);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 14px; font-weight: 700;
  background: var(--fondo-hundido); color: var(--tinta-2);
}
.oi-opcion__texto { flex: 1; padding-top: 2px; }
.oi-opcion__estado { flex: none; display: inline-flex; align-items: center; gap: var(--espacio-1); font-size: 14px; font-weight: 600; padding-top: 2px; }
.oi-opcion--seleccionada { border-color: var(--anil); background: var(--anil-suave); }
.oi-opcion--seleccionada .oi-opcion__letra { background: var(--anil); color: var(--on-anil); }
.oi-opcion--acierto { border-color: var(--acierto); background: var(--acierto-suave); }
.oi-opcion--acierto .oi-opcion__letra { background: var(--acierto); color: #ffffff; }
.oi-opcion--acierto .oi-opcion__estado { color: var(--acierto); }
.oi-opcion--fallo { border-color: var(--fallo); background: var(--fallo-suave); }
.oi-opcion--fallo .oi-opcion__letra { background: var(--fallo); color: #ffffff; }
.oi-opcion--fallo .oi-opcion__estado { color: var(--fallo); }
.oi-opcion[disabled] { cursor: default; }

/* Anillo de progreso */
.oi-anillo { position: relative; display: inline-grid; place-items: center; font-family: var(--font-display); color: var(--tinta); }
.oi-anillo svg { display: block; }
.oi-anillo__pista { stroke: var(--fondo-hundido); }
.oi-anillo__trazo { stroke: var(--naranja); transition: stroke-dashoffset var(--duracion-lenta) cubic-bezier(0.2, 0.8, 0.2, 1); }
.oi-anillo__punto { fill: var(--anil); transform-origin: center; transform: scale(0); transition: transform var(--duracion-media) cubic-bezier(0.2, 0.8, 0.2, 1); }
.oi-anillo--completo .oi-anillo__punto { transform: scale(1); }
.oi-anillo__cifra { position: absolute; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.oi-anillo__etiqueta { font-family: var(--font-texto); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-2); margin-top: var(--espacio-2); text-align: center; }

/* Racha */
.oi-racha { display: inline-flex; flex-direction: column; gap: var(--espacio-2); font-family: var(--font-texto); color: var(--tinta); }
.oi-racha__cabecera { display: flex; align-items: baseline; gap: var(--espacio-2); }
.oi-racha__numero { font-family: var(--font-display); font-size: 40px; line-height: 44px; font-weight: 800; letter-spacing: -0.03em; color: var(--naranja-texto); }
.oi-racha__texto { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--tinta-2); text-transform: uppercase; letter-spacing: 0.08em; }
.oi-racha__dias { display: flex; gap: var(--espacio-1); }
.oi-racha__dia { width: 20px; height: 20px; border-radius: var(--radio-s); background: var(--fondo-hundido); border: 2px solid transparent; box-sizing: border-box; transition: background-color var(--duracion-lenta) cubic-bezier(0.2, 0.8, 0.2, 1); }
.oi-racha__dia--hecho { background: var(--naranja); }
.oi-racha__dia--hoy { border-color: var(--anil); background: var(--fondo-superficie); }
.oi-racha__dia--hoy.oi-racha__dia--hecho { background: var(--naranja); border-color: var(--anil); }

@media (prefers-reduced-motion: reduce) {
  .oi-boton, .oi-campo__input, .oi-tarjeta, .oi-opcion, .oi-anillo__trazo, .oi-anillo__punto, .oi-racha__dia, .oi-diana__punto { transition: none; }
  .oi-boton--primario:hover { transform: none; }
}

/* Botones nativos de WordPress y de Gutenberg heredan el primario */
.wp-block-button__link, .wp-element-button, button.oi-primario, .oi-primario,
input[type="submit"], .comment-form input[type="submit"] {
  font-family: var(--font-texto); font-size: 16px; line-height: 24px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--espacio-2);
  min-height: 44px; padding: var(--espacio-3) var(--espacio-4) var(--espacio-3) var(--espacio-5);
  border-radius: var(--radio-m); border: 2px solid transparent; cursor: pointer;
  background: var(--accion); color: var(--on-accion); text-decoration: none;
  transition: background-color var(--duracion-rapida), transform var(--duracion-rapida), box-shadow var(--duracion-rapida);
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
.wp-block-button__link:hover, .wp-element-button:hover, .oi-primario:hover, input[type="submit"]:hover {
  background: var(--accion-fuerte); color: var(--on-accion); transform: translateY(-1px); box-shadow: 0 6px 16px -6px var(--accion);
}
.wp-block-button__link:focus-visible, .wp-element-button:focus-visible, .oi-primario:focus-visible, input[type="submit"]:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }
.is-style-outline .wp-block-button__link { background: var(--fondo-superficie); color: var(--accion); border-color: var(--accion); }
.is-style-outline .wp-block-button__link:hover { background: var(--anil-suave); color: var(--accion-fuerte); box-shadow: none; }
.oi-primario:hover .oi-diana__punto, .wp-element-button:hover .oi-diana__punto, .oi-primario:focus-visible .oi-diana__punto { transform: scale(1); }

/* ---------------------------------------------------------------------
 * Magia: Oposia y compañía
 * ------------------------------------------------------------------ */
.oi-personaje { display: block; width: auto; height: auto; }

/* Oposia habla: avatar + bocadillo. La IA señala, no consuela. */
.oi-oposia { display: flex; align-items: flex-end; gap: var(--espacio-3); font-family: var(--font-texto); color: var(--tinta); max-width: 560px; }
.oi-oposia__avatar { flex: none; width: 72px; height: 78px; }
.oi-oposia__bocadillo { position: relative; background: var(--fondo-superficie); border: 2px solid var(--accion); border-radius: var(--radio-l); border-bottom-left-radius: var(--radio-s); padding: var(--espacio-3) var(--espacio-4); font-size: 16px; line-height: 24px; }
.oi-oposia__quien { display: block; font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accion); margin-bottom: var(--espacio-1); }
.oi-oposia__bocadillo p { margin: 0; }
.oi-oposia--grande .oi-oposia__avatar { width: 120px; height: 130px; }
.oi-oposia--grande .oi-oposia__bocadillo { font-size: 18px; line-height: 28px; padding: var(--espacio-4) var(--espacio-5); }

/* Fallo con nombre: lo que te tumba, con su cuenta. Sin personaje. */
.oi-fallo { display: inline-flex; align-items: center; gap: var(--espacio-3); background: var(--fondo-hundido); border: 2px solid var(--borde); border-radius: var(--radio-m); padding: var(--espacio-2) var(--espacio-4) var(--espacio-2) var(--espacio-2); font-family: var(--font-texto); color: var(--tinta); }
.oi-fallo__diana { flex: none; width: 40px; height: 40px; color: var(--fallo); }
.oi-fallo__cuerpo { display: flex; flex-direction: column; gap: 2px; }
.oi-fallo__nombre { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-2); }
.oi-fallo__que { font-size: 16px; line-height: 22px; font-weight: 600; }
.oi-fallo__veces { font-size: 14px; line-height: 20px; color: var(--fallo); font-weight: 600; }
.oi-fallo--vencido { border-color: var(--acierto); background: var(--acierto-suave); }
.oi-fallo--vencido .oi-fallo__veces { color: var(--acierto); }
.oi-fallo--vencido .oi-fallo__diana { color: var(--acierto); }

/* Duende: la tarea pequeña de hoy. */
.oi-duende { display: flex; align-items: center; gap: var(--espacio-3); font-family: var(--font-texto); color: var(--tinta); padding: var(--espacio-2) 0; border-bottom: 1px solid var(--borde); }
.oi-duende:last-child { border-bottom: 0; }
.oi-duende__avatar { flex: none; width: 32px; height: 40px; }
.oi-duende__tarea { flex: 1; font-size: 16px; line-height: 24px; min-width: 0; }
.oi-duende__tiempo { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-2); white-space: nowrap; }
.oi-duende--hecha .oi-duende__tarea { color: var(--tinta-2); text-decoration: line-through; text-decoration-color: var(--acierto); }
.oi-duende--hecha .oi-duende__avatar { opacity: 0.4; }

/* Elfos: un elfo por tema dominado al 100 %. La colección que crece. */
.oi-elfos { display: flex; flex-wrap: wrap; gap: var(--espacio-2); font-family: var(--font-texto); }
.oi-elfo { display: inline-flex; flex-direction: column; align-items: center; gap: var(--espacio-1); width: 64px; }
.oi-elfo__avatar { width: 40px; height: 60px; }
.oi-elfo__tema { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.04em; color: var(--tinta-2); text-align: center; }
.oi-elfo--pendiente .oi-elfo__avatar { opacity: 0.18; }
.oi-elfo--nuevo .oi-elfo__avatar { animation: oi-elfo-llega var(--duracion-lenta) cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes oi-elfo-llega { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Magia: comodines, pocos y caros. */
.oi-magia { display: inline-flex; align-items: center; gap: var(--espacio-2); font-family: var(--font-texto); font-size: 14px; line-height: 20px; font-weight: 600; color: var(--accion); background: var(--anil-suave); border-radius: var(--radio-pill); padding: var(--espacio-1) var(--espacio-3) var(--espacio-1) var(--espacio-2); }
.oi-magia__diana { width: 18px; height: 18px; flex: none; }
.oi-magia__diana circle:first-child { fill: none; stroke: currentColor; stroke-width: 2.5; }
.oi-magia__diana circle:last-child { fill: var(--naranja); }

@media (prefers-reduced-motion: reduce) { .oi-elfo--nuevo .oi-elfo__avatar { animation: none; } }