/* ==========================================================================
   Ajustes — Estilos específicos
   Página de gestión para adultos (familia/profesorado), mismos tokens
   que el resto de la app. Reutiliza el patrón visual de equipo/styles.css.
   ========================================================================== */

.settings { max-width: 720px; }

.cabecera-settings { padding: var(--espacio) 0; }
.cabecera-settings h1 { margin: 8px 0; }

.idioma-selector { display: flex; flex-wrap: wrap; gap: var(--espacio); justify-content: center; }
.btn-idioma {
  min-height: var(--boton-min); min-width: 64px; padding: 0 var(--espacio);
  font-family: var(--fuente); font-size: var(--texto-base); font-weight: 700;
  color: var(--color-texto); background: var(--color-superficie);
  border: 3px solid var(--color-borde); border-radius: var(--radio);
  cursor: pointer;
}
.btn-idioma:hover { border-color: var(--color-foco); }
.btn-idioma[aria-pressed="true"] {
  border-color: var(--color-foco); background: var(--mod-coordinacion-suave);
}

.aviso-ruta {
  display: inline-block; padding: 8px 16px;
  background: var(--mod-memoria-suave); color: var(--color-texto);
  border: 2px solid var(--mod-memoria); border-radius: var(--radio);
  font-size: var(--texto-pequeno); font-weight: 700;
}

.entradilla { color: var(--color-texto-suave); }

#listaEstado { padding-left: 24px; }
#listaEstado li { margin-bottom: 6px; }

/* Progreso por actividad (D2-ítem3): mismo patrón visual que equipo/styles.css. */
.modulo-guia { border-left: 8px solid var(--acento); margin-top: var(--espacio); }
.modulo-guia h3 { color: var(--acento); margin-bottom: 4px; }
.guia table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: var(--texto-pequeno); }
.guia th, .guia td {
  padding: 10px 12px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--color-borde);
}
.guia th { background: var(--color-fondo); }
.guia td:first-child { font-weight: 700; white-space: nowrap; }
@media (max-width: 640px) {
  .guia td:first-child { white-space: normal; }
  .guia th, .guia td { padding: 8px; }
}

#copia-progreso .btn { margin-top: 8px; width: 100%; }
#copia-progreso hr { border: none; border-top: 2px solid var(--color-borde); margin: var(--espacio) 0; }
#copia-progreso .etiqueta-archivo { display: block; font-weight: 700; margin-bottom: 8px; }
#copia-progreso input[type="file"] {
  width: 100%; padding: 12px; margin-bottom: 8px;
  font-size: var(--texto-base); font-family: inherit;
  border: 2px solid var(--color-borde); border-radius: var(--radio);
  background: var(--color-superficie); color: var(--color-texto);
}
#copia-progreso .btn:disabled { opacity: 0.5; cursor: not-allowed; }

.etiqueta-pref { font-weight: 700; margin-top: var(--espacio); margin-bottom: 8px; }
.selector-pref { display: flex; flex-wrap: wrap; gap: var(--espacio); }
.btn-pref {
  min-height: var(--boton-min); padding: 0 var(--espacio);
  font-family: inherit; font-size: var(--texto-base); font-weight: 700;
  color: var(--color-texto); background: var(--color-superficie);
  border: 3px solid var(--color-borde); border-radius: var(--radio);
  cursor: pointer;
}
.btn-pref:hover { border-color: var(--color-foco); }
.btn-pref[aria-pressed="true"] {
  border-color: var(--color-foco); background: var(--mod-coordinacion-suave);
}

.etiqueta-campo { display: block; font-weight: 700; margin-top: var(--espacio); margin-bottom: 6px; }
.campo-texto {
  width: 100%; min-height: var(--boton-min); padding: 10px 12px; box-sizing: border-box;
  font-size: var(--texto-base); font-family: inherit;
  border: 2px solid var(--color-borde); border-radius: var(--radio);
  background: var(--color-superficie); color: var(--color-texto);
}
.fila-contacto { border-top: 1px dashed var(--color-borde); padding-top: 8px; margin-top: 8px; }
#mis-datos-personales .btn { margin-top: var(--espacio); width: 100%; }

.tarjeta-reset h2 { margin-bottom: 8px; }
.tarjeta-reset .nota-reset { color: var(--color-texto-suave); font-size: var(--texto-pequeno); }
.tarjeta-reset .btn { margin-top: var(--espacio); width: 100%; }

/* El restablecimiento completo no es "error" (no usa --color-animo, que
   ya significa "ánimo tras fallo" en toda la app) pero sí es la acción
   más seria de esta página: acento naranja de aviso, nunca rojo agresivo. */
.tarjeta-peligro { border-left: 8px solid var(--mod-memoria); }
.tarjeta-peligro h2 { color: var(--mod-memoria); }

.pie-settings {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--espacio);
  padding: var(--espacio) 0 40px;
}