/*
 * Componentes base, propios (diseño de la Fase 2, sección 5; decisión D-25). Se apoyan en los
 * elementos del navegador (<button>, <dialog>, <details>, <select>, <progress>) y en los
 * patrones de accesibilidad de la W3C. La galería está en /muestra/.
 */

/* ---------------------------------------------------------------------------------------
 * Botones: principal, secundario, peligro y de texto
 * ------------------------------------------------------------------------------------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-2);
  min-height: var(--alto-control);
  padding: var(--espacio-2) var(--espacio-4);
  border: 1px solid transparent;
  border-radius: var(--radio-control);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

.boton--principal {
  background: var(--color-acento);
  color: var(--color-sobre-acento);
}

.boton--principal:hover {
  background: var(--color-acento-hover);
  color: var(--color-sobre-acento);
}

.boton--secundario {
  background: var(--color-panel);
  border-color: var(--color-borde-campo);
  color: var(--color-texto);
}

.boton--secundario:hover {
  background: var(--color-neutro-fondo);
  color: var(--color-texto);
}

.boton--peligro {
  background: var(--color-error);
  color: var(--color-sobre-acento);
}

.boton--peligro:hover {
  background: var(--color-peligro-hover);
  color: var(--color-sobre-acento);
}

.boton--texto {
  min-height: 32px;
  padding: var(--espacio-1) var(--espacio-2);
  background: transparent;
  color: var(--color-acento);
}

.boton--texto:hover {
  background: var(--color-info-fondo);
  color: var(--color-acento-hover);
}

.boton:disabled,
.boton[aria-disabled="true"] {
  background: var(--color-neutro-fondo);
  border-color: var(--color-borde-suave);
  color: var(--color-texto-secundario);
  cursor: not-allowed;
}

/* ---------------------------------------------------------------------------------------
 * Campos, listas y casillas (cada uno con su etiqueta visible; el error, junto al campo)
 * ------------------------------------------------------------------------------------- */

.campo {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
  max-width: 480px;
}

fieldset.campo {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

fieldset.campo legend {
  padding: 0;
  margin-bottom: var(--espacio-1);
}

.campo__etiqueta {
  font-weight: 600;
}

.campo__ayuda {
  color: var(--color-texto-secundario);
  font-size: var(--tamano-chico);
}

.campo__control {
  width: 100%;
  min-height: var(--alto-control);
  padding: var(--espacio-2) var(--espacio-3);
  border: 1px solid var(--color-borde-campo);
  border-radius: var(--radio-control);
  background: var(--color-panel);
  color: var(--color-texto);
  font: inherit;
}

textarea.campo__control {
  min-height: 96px;
  resize: vertical;
}

.campo__control[aria-invalid="true"] {
  border-color: var(--color-error);
  border-width: 2px;
}

.campo__error {
  display: flex;
  align-items: flex-start;
  gap: var(--espacio-2);
  color: var(--color-error);
  font-size: var(--tamano-chico);
  font-weight: 500;
}

.casilla {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  min-height: 32px;
  cursor: pointer;
}

.casilla input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--color-acento);
}

/* ---------------------------------------------------------------------------------------
 * Tablas compactas (las cifras, con números tabulares)
 * ------------------------------------------------------------------------------------- */

.tabla-contenedor {
  /* Relativo: lo que va solo para los lectores de pantalla dentro de la tabla también queda
     dentro del recuadro, y no ensancha la página. */
  position: relative;
  overflow-x: auto;
}

.tabla {
  width: 100%;
  /* En pantallas angostas (zoom al 400 %), la tabla no se aprieta: se desplaza en su recuadro. */
  min-width: 32rem;
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.tabla caption {
  padding-bottom: var(--espacio-2);
  color: var(--color-texto-secundario);
  font-size: var(--tamano-chico);
  text-align: left;
}

.tabla th {
  padding: var(--espacio-2) var(--espacio-3);
  background: var(--color-neutro-fondo);
  color: var(--color-texto-secundario);
  font-size: var(--tamano-chico);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

.tabla th:first-child {
  border-radius: var(--radio-control) 0 0 var(--radio-control);
}

.tabla th:last-child {
  border-radius: 0 var(--radio-control) var(--radio-control) 0;
}

.tabla td {
  padding: var(--espacio-3);
  border-bottom: 1px solid var(--color-borde-suave);
  vertical-align: middle;
}

.tabla .numero {
  text-align: right;
}

.tabla__secundario {
  display: block;
  color: var(--color-texto-secundario);
  font-size: var(--tamano-chico);
}

/* ---------------------------------------------------------------------------------------
 * Chips de estado: siempre con texto y con ícono, nunca solo el color (sección 4.3)
 * ------------------------------------------------------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-1);
  padding: 2px var(--espacio-2);
  border-radius: var(--radio-chip);
  font-size: var(--tamano-chico);
  font-weight: 600;
  white-space: nowrap;
}

/* Dentro de una tabla, un chip largo se parte, para que la tabla quepa a lo ancho (la lista de
   versiones, con «pyxform no la acepta: no se puede publicar» y sus acciones). */
.tabla td .chip {
  white-space: normal;
}

.chip .icono {
  width: 14px;
  height: 14px;
  vertical-align: 0;
}

.chip--listo {
  background: var(--color-listo-fondo);
  color: var(--color-listo);
}

.chip--aviso {
  background: var(--color-aviso-fondo);
  color: var(--color-aviso);
}

.chip--error {
  background: var(--color-error-fondo);
  color: var(--color-error);
}

.chip--info {
  background: var(--color-info-fondo);
  color: var(--color-info);
}

.chip--neutro {
  background: var(--color-neutro-fondo);
  color: var(--color-texto-secundario);
}

/* ---------------------------------------------------------------------------------------
 * Tarjetas e indicadores
 * ------------------------------------------------------------------------------------- */

.tarjeta {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  padding: var(--espacio-5);
  border: 1px solid var(--color-borde-suave);
  border-radius: var(--radio-tarjeta);
  background: var(--color-panel);
}

.indicador__valor {
  font-size: 2rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.indicador__etiqueta {
  color: var(--color-texto-secundario);
  font-size: var(--tamano-chico);
}

.avance {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-2) var(--espacio-3);
}

.tabla .avance {
  flex-wrap: nowrap;
  white-space: nowrap;
}

.avance progress {
  width: 100%;
  max-width: 200px;
  height: 8px;
  border: 0;
  border-radius: var(--radio-chip);
  overflow: hidden;
  background: var(--color-neutro-fondo);
  accent-color: var(--color-acento);
  appearance: none;
}

.avance progress::-webkit-progress-bar {
  background: var(--color-avance-fondo);
}

.avance progress::-webkit-progress-value {
  background: var(--color-acento);
}

.avance progress::-moz-progress-bar {
  background: var(--color-acento);
}

/* ---------------------------------------------------------------------------------------
 * Avisos: información, listo, aviso y error
 * ------------------------------------------------------------------------------------- */

.aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--espacio-3);
  padding: var(--espacio-3) var(--espacio-4);
  border-radius: var(--radio-tarjeta);
}

.aviso .icono {
  margin-top: 2px;
}

.aviso__titulo {
  font-weight: 600;
}

.aviso--info {
  background: var(--color-info-fondo);
  color: var(--color-info);
}

.aviso--listo {
  background: var(--color-listo-fondo);
  color: var(--color-listo);
}

.aviso--aviso {
  background: var(--color-aviso-fondo);
  color: var(--color-aviso);
}

.aviso--error {
  background: var(--color-error-fondo);
  color: var(--color-error);
}

/* ---------------------------------------------------------------------------------------
 * Lo que encuentra la validación (sección 6.4): cada error o aviso, con su lugar
 * ------------------------------------------------------------------------------------- */

.hallazgos {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hallazgo {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
  padding: var(--espacio-3) var(--espacio-4);
  border: 1px solid var(--color-borde-suave);
  border-left: 4px solid var(--color-aviso);
  border-radius: var(--radio-tarjeta);
  background: var(--color-panel);
}

.hallazgo--error {
  border-left-color: var(--color-error);
}

.hallazgo__que {
  display: flex;
  align-items: flex-start;
  gap: var(--espacio-2);
  font-weight: 600;
}

.hallazgo__que .icono {
  flex: none;
  margin-top: 2px;
  color: var(--color-aviso);
}

.hallazgo--error .hallazgo__que .icono {
  color: var(--color-error);
}

.hallazgo__lugar {
  color: var(--color-texto-secundario);
  font-size: var(--tamano-chico);
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------------------
 * Diálogos (<dialog>): Esc los cierra y el foco vuelve a donde estaba
 * ------------------------------------------------------------------------------------- */

.dialogo {
  width: min(520px, calc(100vw - 2 * var(--espacio-4)));
  padding: 0;
  border: 0;
  border-radius: var(--radio-tarjeta);
  background: var(--color-panel);
  color: var(--color-texto);
  box-shadow: var(--sombra-dialogo);
}

.dialogo::backdrop {
  background: rgb(16 18 23 / 45%);
}

.dialogo__cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  padding: var(--espacio-6);
}

.dialogo__acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--espacio-3);
  padding: var(--espacio-4) var(--espacio-6);
  border-top: 1px solid var(--color-borde-suave);
}

/* ---------------------------------------------------------------------------------------
 * Tarea larga (sección 4.2): en cola, en curso, lista, con error o cancelada
 * ------------------------------------------------------------------------------------- */

.tarea {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  padding: var(--espacio-4) var(--espacio-5);
  border: 1px solid var(--color-borde-suave);
  border-radius: var(--radio-tarjeta);
  background: var(--color-panel);
}

.tarea__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-3);
}

.tarea__titulo {
  font-weight: 600;
}

/* El estado y, si lo hay, el resultado: juntos, a la derecha */
.tarea__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
  margin-left: auto;
}

.tarea__paso {
  color: var(--color-texto-secundario);
}

.tarea__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-3);
}

/* Lo que sigue a la tarea, como «Importar otro archivo» */
.tarea + .fila {
  margin-top: var(--espacio-4);
}

.tarea__error {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
}

.detalle-tecnico summary {
  width: fit-content;
  color: var(--color-acento);
  font-size: var(--tamano-chico);
  font-weight: 600;
  cursor: pointer;
}

.detalle-tecnico pre {
  margin: var(--espacio-2) 0 0;
  padding: var(--espacio-3);
  overflow-x: auto;
  border-radius: var(--radio-control);
  background: var(--color-neutro-fondo);
  color: var(--color-texto);
  font-size: var(--tamano-chico);
  white-space: pre-wrap;
  overflow-wrap: anywhere; /* los nombres largos de Java, sin desplazar la página */
}

.girando {
  animation: girar 1.2s linear infinite;
}

@keyframes girar {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .girando {
    animation: none;
  }
}

/* ---------------------------------------------------------------------------------------
 * La marca del Central: «Pruebas» (ámbar) o «Producción» (roja), en todo lo que escribe
 * ------------------------------------------------------------------------------------- */

.marca-central {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  padding: var(--espacio-1) var(--espacio-3);
  border: 1px solid currentcolor;
  border-radius: var(--radio-chip);
  font-size: var(--tamano-chico);
  font-weight: 600;
}

.marca-central--pruebas {
  background: var(--color-aviso-fondo);
  color: var(--color-aviso);
}

.marca-central--produccion {
  background: var(--color-error-fondo);
  color: var(--color-error);
}

/* «Sin guardar», junto al título de lo que se está editando (sección 4.1) */
.sin-guardar {
  display: none;
}

[data-sin-guardar="true"] .sin-guardar {
  display: inline-flex;
}

/* ---------------------------------------------------------------------------------------
 * Formularios: el resumen de errores arriba, los campos en columna y las casillas
 * ------------------------------------------------------------------------------------- */

.formulario {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-5);
}

.formulario--en-linea {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
}

.formulario--en-linea .campo {
  flex: 1 1 260px;
}

.campo--ancho {
  max-width: none;
}

.campo__opcional {
  color: var(--color-texto-secundario);
  font-weight: 400;
}

.campo__error p + p {
  margin-top: var(--espacio-1);
}

.casillas {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
  margin-top: var(--espacio-1);
}

.resumen-de-errores {
  margin-bottom: var(--espacio-2);
}

.resumen-de-errores__lista {
  margin: var(--espacio-1) 0 0;
  padding-left: var(--espacio-5);
}

.resumen-de-errores__lista li + li {
  margin-top: var(--espacio-1);
}

/* Cada enlace lleva a su campo: de 24 px de alto como mínimo, para tocarlo (sección 4.3). */
.resumen-de-errores__lista a {
  display: inline-block;
  min-height: 24px;
  padding: 2px 0;
  color: inherit;
}

.filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--espacio-4);
}

.filtros .campo {
  flex: 1 1 180px;
}

.filtros__botones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
}

/* ---------------------------------------------------------------------------------------
 * Listas de datos, actividad y avisos del sistema
 * ------------------------------------------------------------------------------------- */

.datos {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.datos > div {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) minmax(0, 2fr);
  gap: var(--espacio-3);
  padding: var(--espacio-2) 0;
  border-bottom: 1px solid var(--color-borde-suave);
}

.datos dt {
  color: var(--color-texto-secundario);
}

.datos dd {
  margin: 0;
  overflow-wrap: anywhere; /* una dirección o una huella larga, sin desplazar la página */
}

.actividad {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.actividad li {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: var(--espacio-3);
  padding: var(--espacio-2) 0;
  border-bottom: 1px solid var(--color-borde-suave);
  overflow-wrap: anywhere; /* un texto largo sin espacios, como una cadena de versión */
}

.actividad__cuando {
  color: var(--color-texto-secundario);
  font-size: var(--tamano-chico);
  font-variant-numeric: tabular-nums;
}

.lista-simple__fila {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
  padding-bottom: var(--espacio-3);
  border-bottom: 1px solid var(--color-borde-suave);
}

.lista-simple__titulo {
  font-weight: 600;
}

.lista-simple__fila:last-child,
.actividad li:last-child,
.datos > div:last-child {
  border-bottom: 0;
}

.aviso-del-sistema {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espacio-2);
  padding: var(--espacio-4);
  border: 1px solid var(--color-borde-suave);
  border-radius: var(--radio-tarjeta);
}

.vacio {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  color: var(--color-texto-secundario);
}

.notas-con-icono {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-texto-secundario);
  font-size: var(--tamano-chico);
}

.notas-con-icono li {
  display: flex;
  align-items: flex-start;
  gap: var(--espacio-2);
}

.notas-con-icono strong {
  color: var(--color-texto);
}

.tabla__enlace {
  font-weight: 600;
}

.tabla tbody th {
  padding: var(--espacio-3);
  border-bottom: 1px solid var(--color-borde-suave);
  border-radius: 0;
  background: none;
  color: var(--color-texto);
  font-size: inherit;
  white-space: normal;
}

.sin-cortar {
  white-space: nowrap;
}

.persona-en-tabla {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
}

.paginas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-4);
  margin-top: var(--espacio-4);
}

/* ---------------------------------------------------------------------------------------
 * El acceso: el paso hecho, los pasos del doble factor, el código QR, los códigos de
 * respaldo y el enlace de un solo uso
 * ------------------------------------------------------------------------------------- */

.paso-hecho {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  padding: var(--espacio-3) var(--espacio-4);
  border-radius: var(--radio-tarjeta);
  background: var(--color-neutro-fondo);
}

.paso-hecho > .icono {
  color: var(--color-listo);
}

.paso-hecho__titulo {
  font-weight: 600;
}

.paso-hecho .boton--texto {
  margin-left: auto;
}

.pasos {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.qr {
  width: fit-content;
  padding: var(--espacio-2);
  border: 1px solid var(--color-borde-suave);
  border-radius: var(--radio-control);
  background: var(--color-panel);
  line-height: 0;
}

.clave {
  font-family: var(--letra-mono);
  font-size: 1rem;
  letter-spacing: 0.05em;
  word-spacing: 0.3em;
  overflow-wrap: anywhere;
}

.codigos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: var(--espacio-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.codigos li {
  padding: var(--espacio-2) var(--espacio-3);
  border-radius: var(--radio-control);
  background: var(--color-neutro-fondo);
  font-family: var(--letra-mono);
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-align: center;
}

.enlace-unico .campo__control {
  font-family: var(--letra-mono);
  font-size: var(--tamano-chico);
}