/* ============================================================
   DOJO WIKI — Tokens de diseño
   Paleta inspirada en el tatami (fondo cálido), el keikogi/hakama
   (índigo profundo) y el sello vermellón usado en documentos
   tradicionales japoneses (acento, muy contenido).
   ============================================================ */
:root {
  --color-bg:        #F6F3EC;
  --color-surface:   #FFFFFF;
  --color-border:    #E4DFD1;
  --color-ink:       #232320;
  --color-ink-muted: #6E6A5E;
  --color-indigo:      #1C3352;
  --color-indigo-dark: #12233A;
  --color-vermillion:  #B5402F;

  --font-display: 'Shippori Mincho', serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  --radius: 6px;
  --spacing-1: 0.5rem;
  --spacing-2: 1rem;
  --spacing-3: 1.5rem;
  --spacing-4: 2.5rem;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  line-height: 1.5;
}

/* ---------- Cabecera ---------- */
.cabecera {
  
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-2) var(--spacing-4);

  
  /* 1. Cambiamos el fondo al color crema */
/  background: #F6F3EC; 
  background-color: #ffffff; /* Fondo blanco */
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  /* 2. Oscurecemos el texto usando tu variable indigo para mantener la armonía */
  color: var(--color-indigo); 
}

.cabecera a, 
.cabecera .cabecera__pretitulo {
  color: #333333; /* O usa #333333 si prefieres un gris muy oscuro */
}

.cabecera__marca {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.enso {
  width: 40px;
  height: 40px;
  color: var(--color-vermillion);
  flex-shrink: 0;
}

.cabecera__pretitulo {
  margin: 0 0 2px;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: ##333333;
}

.cabecera__titulo {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 0.01em;
}

.cabecera__usuario {
  font-size: 0.85rem;
  color: #333333;
}

/* ---------- Layout general ---------- */
.layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4);
  align-items: start;
}

@media (max-width: 820px) {
  .layout { grid-template-columns: 1fr; }
  /* En móvil los ejercicios van primero; el panel de filtros es muy
     largo y si va arriba empuja los resultados fuera de la vista
     inicial. Solo afecta el orden visual — el HTML/orden de tabulación
     no cambia, y en desktop (>820px) esta regla ni siquiera aplica. */
  .resultados { order: -1; }

  /* Barra con los 3 botones (Filtros / Aplicar filtros / Remover
     filtros): queda pegada arriba al hacer scroll. En desktop este
     contenedor no lleva estilo especial, así que no afecta ese layout. */
  .barra-filtros-movil {
      position: sticky;
      top: 0;
      z-index: 40;
      background: var(--color-bg);
      padding-top: var(--spacing-1);
      padding-bottom: var(--spacing-1);
      margin-bottom: var(--spacing-2);
  }
  .barra-filtros-movil .btn-toggle-filtros { margin-bottom: var(--spacing-1); }
  .resultados__cabecera { margin-bottom: 0 !important; }

  /* Al pulsar "Filtros" el panel aparece como una capa fija justo
     debajo de la barra de botones, sobre las tarjetas — así no hay
     que hacer scroll para llegar a él. El "top" exacto lo calcula el
     JS (altura real de la barra), haya o no scroll en ese momento. */
  .filtros {
      position: static !important;
      display: none;
  }
  .filtros.filtros--abierto {
      display: block;
      position: fixed !important;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 60;
      margin: 0;
      border-radius: 0;
      border-top-left-radius: 12px;
      border-top-right-radius: 12px;
      overflow-y: auto;
      box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.18);
  }

  .tarjetas {
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 0.6rem;
  }
  .tarjeta { padding: 10px; }
  .tarjeta h3 { font-size: 0.88rem; }
}

/* Bloquea el scroll de fondo mientras el panel de filtros está
   abierto en móvil (el panel ya tiene su propio scroll interno). */
body.bloquear-scroll { overflow: hidden; }

.btn-toggle-filtros {
  display: none;
  width: 100%;
  padding: 0.6rem 0.9rem;
  background-color: #f3e5f5;
  border: 1px solid #e1bee7;
  color: #6a1b9a;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
  transform: translateY(0);
  transition: all 0.2s ease-in-out;
}
.btn-toggle-filtros:hover {
  background-color: #e1bee7;
  box-shadow: 0 6px 12px rgba(106, 27, 154, 0.25);
  transform: translateY(-2px);
}
@media (max-width: 820px) {
  .btn-toggle-filtros { display: block; }
}

.btn-ningun-filtro {
  display: block;
  width: 100%;
  margin: 0 0 var(--spacing-2);
  padding: 0.5rem;
  background-color: #f3e5f5;
  border: 1px solid #e1bee7;
  color: #6a1b9a;
  border-radius: var(--radius);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
  transform: translateY(0);
  transition: all 0.2s ease-in-out;
}
.btn-ningun-filtro:hover {
  background-color: #e1bee7;
  box-shadow: 0 6px 12px rgba(106, 27, 154, 0.25);
  transform: translateY(-2px);
}

/* ---------- Responsive: móvil ---------- */
@media (max-width: 640px) {
  .cabecera {
    flex-wrap: wrap;
    row-gap: 0.6rem;
    padding: var(--spacing-1) var(--spacing-2);
  }

  .cabecera__acciones {
    width: 100%;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .layout {
    padding: var(--spacing-2);
    gap: var(--spacing-2);
  }
}

/* ---------- Panel de filtros ---------- */
.filtros {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--spacing-3);
  position: sticky;
  top: var(--spacing-3);
}

.filtros__titulo {
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin: 0 0 var(--spacing-2);
  color: var(--color-indigo-dark);
}

fieldset {
  border: none;
  border-top: 1px solid var(--color-border);
  padding: var(--spacing-2) 0;
  margin: 0;
}

fieldset:first-of-type { border-top: none; padding-top: 0; }

legend {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  padding: 0;
  margin-bottom: var(--spacing-1);
}

.opciones-checkbox {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.9rem;
}

.opciones-checkbox label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

select {
  width: 100%;
  padding: 0.45rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  font-family: var(--font-body);
  font-size: 0.9rem;
  margin-top: 0.4rem;
}

select:first-child { margin-top: 0; }

/* Rango de edad: dos sliders superpuestos en la misma pista */
.rango-edad__lecturas {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--color-ink-muted);
  margin-bottom: 0.3rem;
}

.rango-edad__separador { color: var(--color-border); }

.rango-edad__controles {
  position: relative;
  height: 28px;
}

.rango-edad__controles input[type="range"] {
  position: absolute;
  width: 100%;
  top: 8px;
  accent-color: var(--color-indigo);
  background: transparent;
  pointer-events: none;
}

.rango-edad__controles input[type="range"]::-webkit-slider-thumb {
  pointer-events: auto;
}
.rango-edad__controles input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
}

.boton-principal {
  width: 100%;
  margin-top: var(--spacing-2);
  padding: 0.7rem;
  background: var(--color-vermillion);
  color: #FFFFFF;
  border: none;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: filter 0.15s ease;
  /* =========================================
     BOTÓN: Aplicar filtros
     ========================================= */
  .boton-principal, 
  #btnFiltrar {
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15) !important; 
      transform: translateY(0) !important; /* Le decimos al navegador: "este es tu punto cero" */
      transition: all 0.2s ease-in-out !important; /* Animamos TODO de forma fluida */
      cursor: pointer !important; /* Asegura que aparezca la manita */
  }

  .boton-principal:hover, 
  #btnFiltrar:hover {
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25) !important;
      transform: translateY(-2px) !important; /* Se eleva 2 pixeles */
  }
}

.boton-principal:hover { filter: brightness(1.08); }
.boton-principal:focus-visible {
  outline: 3px solid var(--color-indigo);
  outline-offset: 2px;
  box-shadow: 0 7px 12px rgba(0, 0, 0, 0.30);
  transform: translateY(-2px);
}

/* ---------- Resultados ---------- */
.resultados__cabecera {
  margin-bottom: var(--spacing-2);
  color: var(--color-ink-muted);
  font-size: 0.9rem;
}

.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--spacing-2);
}

.tarjeta-ejercicio {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--spacing-2);
  animation: aparecer 0.25s ease both;
}

@keyframes aparecer {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tarjeta-ejercicio h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin: 0 0 0.4rem;
  color: var(--color-indigo-dark);
}

.tarjeta-ejercicio__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--color-ink-muted);
}

.etiqueta {
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
}

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

/* ---------- Pantalla de login ---------- */
.pantalla-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-3);
}

.tarjeta-login {
  width: 100%;
  max-width: 380px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--spacing-4) var(--spacing-3);
}

.tarjeta-login .cabecera__marca {
  margin-bottom: var(--spacing-3);
}

/* Dentro de la tarjeta de login el fondo es claro, no el índigo de
   la cabecera principal, así que el texto de marca se recolorea. */
.tarjeta-login .cabecera__pretitulo { color: var(--color-ink-muted); }
.tarjeta-login .cabecera__titulo { color: var(--color-indigo-dark); }

.campo {
  display: block;
  margin-bottom: var(--spacing-2);
  font-size: 0.85rem;
  color: var(--color-ink-muted);
}

.campo span {
  display: block;
  margin-bottom: 0.3rem;
  font-weight: 500;
}

.campo input {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-ink);
}

.campo input:focus-visible {
  outline: 2px solid var(--color-indigo);
  outline-offset: 1px;
}

.mensaje-error {
  background: #FBEAE7;
  border: 1px solid var(--color-vermillion);
  color: #8A2E22;
  border-radius: var(--radius);
  padding: 0.6rem 0.8rem;
  font-size: 0.85rem;
  margin: 0 0 var(--spacing-2);
}

/* ---------- Usuario y logout en la cabecera principal ---------- */
.cabecera__usuario {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.boton-salir {
  display: inline-block;
  text-decoration: none;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: inherit;
  border-radius: var(--radius);
  padding: 0.35rem 0.8rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  cursor: pointer;
}

.boton-salir:hover { background: rgba(255, 255, 255, 0.12); }
.boton-salir:focus-visible {
  outline: 2px solid #FFF;
  outline-offset: 2px;
}
/* =========================================
     ESTILOS PARA LOS BOTONES DE ACCIÓN (Usuarios)
     ========================================= */
  .acciones button {
      border: 1px solid transparent !important;
      border-radius: 4px;
      padding: 5px 12px;
      font-size: 0.8rem;
      cursor: pointer;
      margin-right: 4px;
      font-weight: 600;
      font-family: 'Inter', sans-serif;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
      transform: translateY(0);
      transition: all 0.2s ease-in-out;
  }

  /* Botón EDITAR (Verde suave) */
  .acciones button[data-accion="editar"],
  .acciones button[data-accion="editar-dojo"] {
      background-color: #e6f4ea !important;
      color: #137333 !important;
      border-color: #ceead6 !important;
  }
  .acciones button[data-accion="editar"]:hover,
  .acciones button[data-accion="editar-dojo"]:hover {
      background-color: #ceead6 !important;
      box-shadow: 0 4px 8px rgba(19, 115, 51, 0.2);
      transform: translateY(-2px);
  }

  /* Botón RESETEAR CONTRASEÑA (Amarillo suave) */
  .acciones button[data-accion="reset"] {
      background-color: #fef7e0 !important;
      color: #b06000 !important;
      border-color: #fce8b2 !important;
  }
  .acciones button[data-accion="reset"]:hover {
      background-color: #fce8b2 !important;
      box-shadow: 0 4px 8px rgba(176, 96, 0, 0.2);
      transform: translateY(-2px);
  }

  /* Botón ELIMINAR (Rojo suave) */
  .acciones button[data-accion="eliminar-usuario"],
  .acciones button[data-accion="eliminar-dojo"] {
      background-color: #fce8e6 !important;
      color: #c5221f !important;
      border-color: #fad2cf !important;
  }
  .acciones button[data-accion="eliminar-usuario"]:hover,
  .acciones button[data-accion="eliminar-dojo"]:hover {
      background-color: #fad2cf !important;
      box-shadow: 0 4px 8px rgba(197, 34, 31, 0.2);
      transform: translateY(-2px);
  }