/* ============================================================================
   Mi e-Qapla · plataforma del colaborador
   ----------------------------------------------------------------------------
   Base tipográfica y de color: design system e-Qapla (ver
   ../design-system/eqapla-tokens.md). Lo que se toma de Duolingo son los
   patrones de interacción, no el look: bloques con borde inferior que se
   hunden al presionar, sendero de nodos, barras de progreso, confeti y una
   mascota que habla. Lo que manda el aspecto es e-Qapla:

   - Displays grandes en weight 400 con tracking muy negativo. Es la firma del
     sistema y es lo que se había perdido en la primera versión.
   - Azul #1E50FA como único acento. Verde y ámbar solo semánticos.
   - Cifras en mono.
   - Bloques oscuros con el gradiente oficial #0a0b0d a #0e1735.
   ============================================================================ */

:root {
  --azul: #1E50FA;
  --azul-activo: #1740C8;
  --azul-suave: #eef2ff;
  --azul-claro: #4b78ff;
  --tinta: #0a0b0d;
  --cuerpo: #5b616e;
  --tenue: #7c828a;
  --tenue-claro: #a8acb3;
  --lienzo: #ffffff;
  --fondo: #f7f7f7;
  --superficie: #eef0f3;
  --pelo: #dee1e6;
  --pelo-suave: #eef0f3;
  --navy: #0e1735;

  --arriba: #05b169;
  --arriba-oscuro: #049457;
  --arriba-suave: #e6f7ef;
  --abajo: #cf202f;
  --ambar: #f5a524;
  --ambar-oscuro: #d18a12;
  --ambar-suave: #fef6e7;
  --morado: #7c5cff;

  --r: 12px;
  --r-md: 16px;
  --r-lg: 24px;
  --sans: "Inter", -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sombra: 0 4px 12px rgba(0,0,0,0.04);
  --sombra-alta: 0 22px 50px rgba(8,12,30,0.10);
  --glow: 0 8px 24px rgba(30,80,250,0.35);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

button, input, textarea, select { font-family: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }

/* Displays: weight 400 y tracking negativo, la firma de e-Qapla. */
.display {
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: -0.028em;
  line-height: 1.04;
}
.titulo-vista {
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 400;
  letter-spacing: -0.026em;
  line-height: 1.06;
}
.bajada {
  font-size: 16px;
  line-height: 1.55;
  color: var(--cuerpo);
  margin-top: 14px;
  max-width: 62ch;
}
h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.1px; line-height: 1.33; }
p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--cuerpo); }

.etiqueta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tenue);
}
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--azul); }

.cifra { font-family: var(--mono); font-weight: 500; letter-spacing: -0.02em; }

/* ------------------------------------------------------------------ botones */
/* Interacción tipo Duolingo (borde inferior que se hunde) con la forma de
   e-Qapla: pill, texto en 14.5px weight 600, tracking ligeramente negativo. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 100px;
  padding: 13px 24px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.145px;
  color: #fff;
  background: var(--azul);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), 0 4px 0 var(--azul-activo), var(--glow);
  cursor: pointer;
  transition: transform .07s ease, box-shadow .07s ease, background .15s ease;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { background: var(--azul-activo); }
.btn:active {
  transform: translateY(4px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), 0 0 0 var(--azul-activo);
}
.btn.verde { background: var(--arriba); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), 0 4px 0 var(--arriba-oscuro), 0 8px 24px rgba(5,177,105,0.3); }
.btn.verde:hover { background: var(--arriba-oscuro); }
.btn.verde:active { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), 0 0 0 var(--arriba-oscuro); }
.btn.rojo { background: var(--abajo); box-shadow: 0 4px 0 #a3161f; }
.btn.rojo:active { box-shadow: 0 0 0 #a3161f; }
.btn.gris {
  background: #fff;
  color: var(--tinta);
  box-shadow: 0 4px 0 var(--pelo);
  border: 1px solid var(--pelo);
}
.btn.gris:hover { background: #fbfbfc; }
.btn.gris:active { box-shadow: 0 0 0 var(--pelo); }
.btn.chico { padding: 9px 16px; font-size: 13px; }
.btn.fantasma { background: none; color: var(--azul); box-shadow: none; padding: 8px 12px; }
.btn.fantasma:hover { background: var(--azul-suave); }
.btn.fantasma:active { transform: none; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* -------------------------------------------------------------------- cards */
.card {
  background: var(--lienzo);
  border: 1px solid var(--pelo);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: var(--sombra);
}
.card + .card { margin-top: 24px; }
.card .sub { font-size: 14px; color: var(--cuerpo); line-height: 1.55; margin-top: 9px; }
/* Aire entre el encabezado de una tarjeta y su contenido. */
.card > h3 + *, .card > .fila.entre + * { margin-top: 20px; }

.pastilla {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 100px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  background: var(--azul-suave);
  color: var(--azul-activo);
  white-space: nowrap;
}
.pastilla.verde { background: var(--arriba-suave); color: var(--arriba-oscuro); }
.pastilla.ambar { background: var(--ambar-suave); color: #8a5e04; }
.pastilla.roja { background: #fdecec; color: #a3161f; }
.pastilla.gris { background: var(--superficie); color: var(--tenue); }
.pastilla .punto { width: 7px; height: 7px; border-radius: 100px; background: currentColor; }

/* --------------------------------------------------------- bloque oscuro DS */
.oscuro {
  background: var(--tinta);
  background-image: linear-gradient(135deg, #0a0b0d 0%, #0e1735 100%);
  color: #fff;
  border-radius: var(--r-lg);
  padding: 30px 32px;
  position: relative;
  overflow: hidden;
}
.oscuro::after {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: -160px;
  top: -220px;
  background: radial-gradient(circle, rgba(30,80,250,0.35) 0%, rgba(30,80,250,0) 62%);
  pointer-events: none;
}
.oscuro .etiqueta { color: var(--tenue); }
.oscuro p { color: var(--tenue-claro); }
.oscuro .contenido-oscuro { position: relative; z-index: 1; }
.pill-oscura {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 100px;
  padding: 7px 13px;
  font-size: 13px;
  color: #c4c8d0;
}
.pill-oscura .punto { width: 7px; height: 7px; border-radius: 100px; background: var(--arriba); }

/* ----------------------------------------------------------------- progreso */
.barra { height: 12px; background: var(--superficie); border-radius: 100px; overflow: hidden; }
.barra > i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 100px;
  background: var(--azul);
  position: relative;
  transition: width 1.1s cubic-bezier(.2,.7,.3,1);
}
.barra > i::after {
  content: "";
  position: absolute;
  inset: 2px 5px auto 5px;
  height: 3px;
  border-radius: 100px;
  background: rgba(255,255,255,0.4);
}
.barra.verde > i { background: var(--arriba); }
.barra.en-oscuro { background: rgba(255,255,255,0.14); }

/* ----------------------------------------------------------------- mascotas */
.mascota { width: 84px; height: 84px; flex: 0 0 84px; }
.mascota.chica { width: 44px; height: 44px; flex-basis: 44px; }
.mascota.grande { width: 128px; height: 128px; flex-basis: 128px; }
/* Respira, para que no se sienta un sticker pegado. */
.mascota.viva { animation: flota 3.4s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes flota {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-5px) rotate(1.5deg); }
}

.dialogo { display: flex; align-items: flex-start; gap: 14px; }
.globo {
  position: relative;
  background: var(--lienzo);
  border: 1px solid var(--pelo);
  border-radius: 18px;
  padding: 15px 18px;
  font-size: 15px;
  line-height: 1.5;
  flex: 1;
  box-shadow: var(--sombra);
  animation: aparece-globo .45s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes aparece-globo {
  from { opacity: 0; transform: translateX(-8px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.globo::before, .globo::after {
  content: "";
  position: absolute;
  left: -10px;
  top: 24px;
  border: 10px solid transparent;
  border-right-color: var(--pelo);
  border-left: 0;
}
.globo::after { left: -8px; border-right-color: var(--lienzo); }
.globo b { color: var(--azul); font-weight: 600; }
.globo .quien {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tenue-claro);
  margin-bottom: 5px;
}

/* -------------------------------------------------------------------- login */
.login {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 32px 20px;
  background: radial-gradient(900px 520px at 78% -12%, #e9edff 0%, rgba(233,237,255,0) 62%), var(--fondo);
}
.login-caja { width: 100%; max-width: 560px; text-align: center; }
.login h1 { margin-top: 20px; }
.login .duo { display: flex; justify-content: center; gap: 4px; }
.quienes { display: grid; gap: 13px; margin-top: 34px; text-align: left; }

/* ------------------------------------------------- formulario de entrada */
/* La pantalla de entrada no lista a nadie: correo y contraseña, punto. */
.modos {
  display: inline-flex;
  gap: 4px;
  background: var(--superficie);
  border-radius: 100px;
  padding: 4px;
  margin-top: 30px;
}
.modos button {
  border: 0;
  background: none;
  padding: 9px 16px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  color: var(--tenue);
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
  white-space: nowrap;
}
.modos button.on { background: var(--lienzo); color: var(--tinta); box-shadow: var(--sombra); }

.form-login {
  text-align: left;
  margin: 22px auto 0;
  max-width: 420px;
  display: grid;
  gap: 16px;
}
/* El ojito de la contraseña: muestra u oculta lo que se escribe. */
.campo-ojo { position: relative; display: block; }
.campo-ojo input { padding-right: 50px; }
.ojo {
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: none;
  font-size: 18px;
  line-height: 1;
  padding: 7px 9px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s ease;
}
.ojo:hover { background: var(--superficie); }
.ojo:active { transform: translateY(-50%) scale(.92); }
.form-login .btn { width: 100%; margin-top: 6px; }
.form-login .mal { font-size: 13px; color: var(--abajo); font-weight: 600; }
.form-login .bien { font-size: 13px; color: var(--arriba-oscuro); font-weight: 600; }
.form-login #l-enviar { margin-top: 10px; width: auto; }
.quien-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  background: var(--lienzo);
  border: 1px solid var(--pelo);
  border-radius: var(--r-md);
  padding: 14px 16px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease;
  text-align: left;
  box-shadow: 0 3px 0 var(--pelo-suave);
}
.quien-btn:hover { border-color: #b9c6ff; box-shadow: 0 3px 0 #d7e0ff, var(--sombra-alta); transform: translateY(-2px); }
.quien-btn:active { transform: translateY(1px); box-shadow: 0 0 0 var(--pelo-suave); }
.quien-btn .nom { font-size: 16px; font-weight: 600; letter-spacing: -0.2px; }
.quien-btn .rol { font-size: 13px; color: var(--tenue); }
.quien-btn .flecha { margin-left: auto; color: var(--tenue-claro); font-size: 22px; }

.avatar {
  width: 44px; height: 44px; flex: 0 0 44px;
  border-radius: 100px;
  background: var(--azul);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 17px;
}
.avatar.admin { background: var(--tinta); }
.avatar.suave { background: var(--azul-suave); color: var(--azul); }

/* --------------------------------------------------------------------- app */
.app { display: none; min-height: 100svh; }
.app.activa { display: block; }

.tope {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--pelo);
}
.tope-in { max-width: 1120px; margin: 0 auto; padding: 13px 20px; display: flex; align-items: center; gap: 14px; }
.marca { font-size: 18px; font-weight: 700; letter-spacing: -0.4px; }
.marca span { color: var(--azul); }
.tope .der { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.racha { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; color: var(--tinta); }

.contenido { max-width: 1120px; margin: 0 auto; padding: 30px 20px 116px; }

/* Cada vista cuelga sus bloques directo de acá, así que la separación entre
   bloques se resuelve una sola vez: ninguno queda pegado al anterior y el
   ritmo vertical es el mismo en todas las vistas. Pasos de la escala del
   design system, no números al azar. */
#contenido > * + * { margin-top: 24px; }

/* La cabecera de cada vista (eyebrow, título y bajada) respira más antes del
   primer bloque de contenido: es el corte entre "de qué va esto" y el detalle. */
.cabecera-vista + * { margin-top: 34px; }
.cabecera-vista .titulo-vista { margin-top: 14px; }

.nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  background: var(--lienzo);
  border-top: 1px solid var(--pelo);
  display: flex;
  padding: 6px;
}
.nav button {
  position: relative;
  flex: 1;
  border: 0;
  background: none;
  padding: 8px 4px;
  border-radius: 12px;
  cursor: pointer;
  color: var(--tenue);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  display: grid;
  gap: 3px;
  justify-items: center;
  transition: color .15s ease, background .15s ease;
}
.nav button .ico { font-size: 19px; line-height: 1; transition: transform .18s ease; }
.nav button:hover .ico { transform: translateY(-2px) scale(1.08); }
.nav button.on { color: var(--azul); background: var(--azul-suave); }
.nav .globito {
  position: absolute;
  top: 2px;
  right: 50%;
  margin-right: -22px;
  min-width: 18px;
  height: 18px;
  border-radius: 100px;
  background: var(--abajo);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: grid;
  place-items: center;
  padding: 0 5px;
  animation: latido 1.8s ease-in-out infinite;
}
@keyframes latido {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.16); }
}

/* ------------------------------------------------------------ entrada suave */
.vista { display: none; }
.vista.activa { display: block; }
/* Escalonado: cada bloque entra un pelo después del anterior. */
.sube { opacity: 0; transform: translateY(14px); animation: sube .5s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes sube { to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- rejillas */
.rejilla { display: grid; gap: 16px; }
.rejilla.dos { grid-template-columns: 1fr 1fr; }
.rejilla.tres { grid-template-columns: repeat(3, 1fr); }
/* Dos por dos y no cuatro en fila: el contenedor tope 1120px deja ~848px
   utiles, y en cuatro columnas las cifras en mono se parten en dos lineas.
   Con auto-fit quedaba 3 arriba y 1 sola abajo, desbalanceado. */
.rejilla.cuatro { grid-template-columns: repeat(2, 1fr); }

.kpi {
  background: var(--lienzo);
  border: 1px solid var(--pelo);
  border-radius: var(--r-md);
  padding: 20px 21px;
  box-shadow: var(--sombra);
  transition: transform .18s ease, box-shadow .18s ease;
}
.kpi:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); }
.kpi .n {
  font-family: var(--mono);
  font-size: clamp(20px, 2.05vw, 26px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-top: 9px;
  /* Una cifra jamás se parte en dos líneas: si no cabe, se achica el clamp o
     se acorta el rótulo, pero "S/ 1,800.00" en dos renglones no es opción. */
  white-space: nowrap;
}
.kpi .n.azul { color: var(--azul); }
.kpi .n.verde { color: var(--arriba); }
.kpi .n.chico { font-size: 18px; }
.kpi .pie { font-size: 12px; color: var(--tenue); margin-top: 5px; line-height: 1.4; }

/* ------------------------------------------------------------- actividades */
.actividad {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--lienzo);
  border: 1px solid var(--pelo);
  border-radius: var(--r-md);
  padding: 17px 18px;
  box-shadow: 0 3px 0 var(--pelo-suave);
  transition: transform .15s ease, border-color .15s ease;
}
.actividad:hover { transform: translateX(3px); border-color: #c9d3f5; }
.actividad.lista { border-color: #bfe8d4; background: #f5fcf8; box-shadow: 0 3px 0 #e2f4ea; }
.actividad .marca-act {
  width: 38px; height: 38px; flex: 0 0 38px;
  border-radius: 100px;
  display: grid; place-items: center;
  font-size: 17px;
  background: var(--ambar-suave);
}
.actividad.lista .marca-act { background: var(--arriba); color: #fff; }
.actividad .txt { flex: 1; min-width: 0; }
.actividad .txt .t { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.1px; }
.actividad .txt .d { display: block; font-size: 13px; color: var(--cuerpo); margin-top: 2px; }

/* ------------------------------------------------------------------ camino */
.camino-tabs { display: inline-flex; gap: 4px; background: var(--superficie); border-radius: 100px; padding: 4px; margin-top: 18px; }
.camino-tabs button {
  border: 0;
  background: none;
  padding: 9px 18px;
  border-radius: 100px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tenue);
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.camino-tabs button.on { background: var(--lienzo); color: var(--tinta); box-shadow: var(--sombra); }

/* El sendero es una escalera que SUBE: el hito más antiguo va abajo y el más
   reciente arriba, y cada peldaño se corre un poco a la derecha. Es un camino de
   crecimiento, leerlo cayendo hacia abajo decía lo contrario.
   column-reverse deja el primer hito del DOM abajo, así el orden de los datos
   sigue siendo cronológico y la animación sube sola. */
.sendero {
  position: relative;
  margin-top: 22px;
  display: flex;
  flex-direction: column-reverse;
  gap: 30px;
  --peldano: 32px;
}
.paso {
  position: relative;
  display: flex;
  gap: 18px;
  margin-left: calc(var(--nivel, 0) * var(--peldano));
}

/* Conexión en escalón hacia el peldaño de abajo: baja por su columna y dobla a
   la izquierda hasta la columna del hito anterior. Se dibuja al entrar. */
.paso::before, .paso::after {
  content: "";
  position: absolute;
  background: linear-gradient(180deg, #c9d3f5 0%, var(--azul) 100%);
  border-radius: 4px;
}
.paso::before {
  left: 25px;
  top: 56px;
  bottom: -24px;
  width: 4px;
  transform: scaleY(0);
  transform-origin: 50% 0;
  animation: baja-tramo .5s ease forwards;
  animation-delay: var(--retraso, 0s);
}
.paso::after {
  left: calc(25px - var(--peldano));
  bottom: -24px;
  width: calc(var(--peldano) + 4px);
  height: 4px;
  transform: scaleX(0);
  transform-origin: 100% 50%;
  animation: cruza-tramo .35s ease forwards;
  animation-delay: calc(var(--retraso, 0s) + .3s);
}
/* El de más abajo es el primero: no cuelga de nada. */
.paso.base::before, .paso.base::after { display: none; }
.paso.futuro::before, .paso.futuro::after { background: var(--pelo); }
@keyframes baja-tramo { to { transform: scaleY(1); } }
@keyframes cruza-tramo { to { transform: scaleX(1); } }

/* ------------------------------------------------------ ruta serpenteante */
/* Camino que sube culebreando, con banderín en cada hito y las tarjetas hacia
   afuera, alternando lados. El trazado va en SVG (escala solo) y las tarjetas
   son HTML posicionado en porcentaje sobre el mismo sistema de coordenadas, así
   el texto fluye de verdad. En pantallas angostas se usa la escalera en su
   lugar, ver .sendero. */
/* El margen inferior es para que el remate de la carretera no llegue al bloque
   siguiente; el superior lo pone la regla de separación del contenedor. */
.ruta { position: relative; margin-bottom: 20px; }
.ruta > svg { width: 100%; height: auto; display: block; overflow: visible; }
.ruta .asfalto-hecho {
  stroke-dasharray: var(--largo);
  stroke-dashoffset: var(--largo);
  animation: dibuja-ruta 1.4s cubic-bezier(.3,.7,.3,1) forwards var(--retraso, 0s);
}
@keyframes dibuja-ruta { to { stroke-dashoffset: 0; } }
.ruta .banderin-grupo {
  cursor: pointer;
  animation: brota .45s cubic-bezier(.2,1.5,.4,1) both;
  animation-delay: var(--retraso, 0s);
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform .16s ease;
}
.ruta .banderin-grupo:hover { transform: translateY(-4px) scale(1.04); }

.hito-bloque {
  position: absolute;
  width: 28%;
  transform: translateY(-50%);
  /* Animación propia y NO la genérica .sube: esta tarjeta vive centrada con
     translateY(-50%), y una animación que termine en "transform: none" la deja
     corrida media altura hacia abajo mientras dura, montándose sobre la
     carretera y el bloque siguiente. La keyframe termina en el mismo -50%. */
  animation: sube-hito .5s cubic-bezier(.2,.7,.3,1) both;
  animation-delay: var(--retraso, 0s);
}
@keyframes sube-hito {
  from { opacity: 0; transform: translateY(calc(-50% + 16px)); }
  to   { opacity: 1; transform: translateY(-50%); }
}
.hito-bloque.izq { left: 1%; }
.hito-bloque.der { left: 71%; }
.hito-bloque .rotulo {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tenue);
}
.hito-bloque .titulo {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.25px;
  line-height: 1.2;
  margin-top: 4px;
  cursor: pointer;
}
.hito-bloque .cargo { font-size: 13px; color: var(--cuerpo); margin-top: 3px; }
.hito-bloque .plata {
  font-family: var(--mono);
  font-size: 19px;
  font-weight: 500;
  color: var(--azul);
  margin-top: 6px;
}
.hito-bloque .delta { font-size: 12px; font-weight: 600; color: var(--arriba); }
.hito-bloque.futuro .rotulo,
.hito-bloque.futuro .titulo,
.hito-bloque.futuro .plata { color: var(--tenue-claro); }
.hito-bloque .extra {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .35s ease, opacity .25s ease;
  font-size: 12.5px;
  color: var(--cuerpo);
  line-height: 1.5;
}
.hito-bloque.abierto .extra {
  max-height: 160px;
  opacity: 1;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--pelo-suave);
}
.hito-bloque .extra .fila-dato { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; }
.hito-bloque .extra .fila-dato span:last-child { font-family: var(--mono); color: var(--tinta); }

/* Notitas de Cooper y Alejandro, pegadas al hito del que hablan. */
.notita {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: #f7f9ff;
  border: 1px solid #dbe4ff;
  border-radius: 12px;
  padding: 9px 11px;
  margin-top: 15px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--cuerpo);
  transform: rotate(-1.1deg);
  box-shadow: 0 3px 0 rgba(30,80,250,0.06);
}
.notita:nth-of-type(even) { transform: rotate(1deg); }
.notita.ojo { background: var(--ambar-suave); border-color: #f3d9a4; color: #8a5e04; }
.notita .cabecita { width: 34px; height: 34px; flex: 0 0 34px; margin-top: -2px; }
.notita b { color: var(--tinta); font-weight: 600; }
.notita.ojo b { color: #6b4903; }
.notita .firma {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tenue-claro);
  margin-bottom: 2px;
}

/* Remate de la cima, arriba de todo. */
.cima {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: calc(var(--nivel, 0) * var(--peldano));
  animation: sube .5s cubic-bezier(.2,.7,.3,1) both;
  animation-delay: var(--retraso, 0s);
}
.cima .banderin {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  border-radius: 100px;
  display: grid;
  place-items: center;
  font-size: 22px;
  background: var(--lienzo);
  border: 2px dashed var(--pelo);
  color: var(--tenue);
}
.cima .txt { font-size: 14px; color: var(--tenue); line-height: 1.45; }
.cima .txt b { color: var(--tinta); font-weight: 600; }

.paso .nodo {
  width: 54px; height: 54px; flex: 0 0 54px;
  border-radius: 100px;
  background: var(--azul);
  box-shadow: 0 4px 0 var(--azul-activo), var(--glow);
  color: #fff;
  display: grid; place-items: center;
  font-size: 21px;
  border: 0;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease;
  animation: brota .5s cubic-bezier(.2,1.5,.4,1) both;
  animation-delay: var(--retraso, 0s);
}
@keyframes brota { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.paso .nodo:hover { transform: translateY(-3px) scale(1.06); }
.paso .nodo:active { transform: translateY(3px); box-shadow: 0 0 0 var(--azul-activo); }
.paso.futuro .nodo { background: var(--superficie); box-shadow: 0 4px 0 #dcdfe5; color: var(--tenue-claro); }
.paso.dudoso .nodo { background: var(--ambar); box-shadow: 0 4px 0 var(--ambar-oscuro); color: #fff; }
.paso.abierto .nodo { transform: scale(1.06); }

.paso .caja {
  flex: 1;
  min-width: 0;
  background: var(--lienzo);
  border: 1px solid var(--pelo);
  border-radius: var(--r-md);
  padding: 17px 19px;
  box-shadow: var(--sombra);
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  animation: sube .5s cubic-bezier(.2,.7,.3,1) both;
  animation-delay: var(--retraso, 0s);
}
.paso .caja:hover { border-color: #c9d3f5; transform: translateY(-2px); box-shadow: var(--sombra-alta); }
.paso.abierto .caja { border-color: var(--azul); }
.paso .caja .cuando { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tenue); }
.paso .caja .que { font-size: 17px; font-weight: 600; letter-spacing: -0.2px; margin-top: 3px; }
.paso .caja .cargo { font-size: 13.5px; color: var(--cuerpo); margin-top: 2px; }
.paso .caja .plata { font-family: var(--mono); font-size: 20px; font-weight: 500; color: var(--azul); margin-top: 7px; }
.paso .caja .delta { font-size: 12px; font-weight: 600; color: var(--arriba); }
/* Detalle que se despliega al tocar el nodo. */
.paso .detalle {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s cubic-bezier(.2,.7,.3,1), opacity .3s ease;
  opacity: 0;
  font-size: 13.5px;
  color: var(--cuerpo);
  line-height: 1.55;
}
.paso.abierto .detalle { max-height: 220px; opacity: 1; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--pelo-suave); }
.paso .detalle .fila-dato { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.paso .detalle .fila-dato span:last-child { font-family: var(--mono); color: var(--tinta); }

/* --------------------------------------------------------- curva de sueldo */
.curva-caja { margin-top: 18px; }
.curva { width: 100%; height: 260px; display: block; overflow: visible; }
.curva .trazo {
  fill: none;
  stroke: var(--azul);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--largo);
  stroke-dashoffset: var(--largo);
  animation: dibuja 1.5s cubic-bezier(.3,.7,.3,1) forwards .15s;
}
@keyframes dibuja { to { stroke-dashoffset: 0; } }
.curva .trazo.futuro { stroke: var(--tenue-claro); stroke-dasharray: 6 6; animation: none; opacity: .9; }
.curva .relleno { fill: url(#degradeCurva); opacity: 0; animation: aparece-relleno .8s ease forwards 1s; }
@keyframes aparece-relleno { to { opacity: 1; } }
.curva .punto {
  fill: #fff;
  stroke: var(--azul);
  stroke-width: 3;
  cursor: pointer;
  animation: brota .4s cubic-bezier(.2,1.5,.4,1) both;
  transition: r .15s ease;
}
.curva .punto:hover { r: 9; }
.curva .punto.futuro { stroke: var(--tenue-claro); }
.curva .eje { stroke: var(--pelo-suave); stroke-width: 1; }
.curva text { font-family: var(--mono); font-size: 10px; fill: var(--tenue); }
.curva text.valor { font-size: 11px; fill: var(--tinta); font-weight: 500; }
.tooltip-curva {
  position: absolute;
  background: var(--tinta);
  color: #fff;
  border-radius: 10px;
  padding: 8px 11px;
  font-size: 12px;
  line-height: 1.4;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease;
  z-index: 5;
  white-space: nowrap;
}
.tooltip-curva.on { opacity: 1; }
.tooltip-curva .m { font-family: var(--mono); color: var(--azul-claro); }

.hueco {
  border: 1px dashed var(--ambar);
  background: var(--ambar-suave);
  border-radius: var(--r-md);
  padding: 17px 19px;
  margin-top: 18px;      /* nunca pegado al bloque anterior */
  font-size: 13.5px;
  line-height: 1.55;
  color: #8a5e04;
}
.hueco b { color: #6b4903; }

/* -------------------------------------------------------------------- bonos */
.nivel-bono {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 17px;
  border: 1px solid var(--pelo);
  border-radius: var(--r-md);
  background: var(--lienzo);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.nivel-bono + .nivel-bono { margin-top: 13px; }
.nivel-bono:hover { transform: translateX(3px); }
.nivel-bono.alcanzado { border-color: #bfe8d4; background: #f5fcf8; }
.nivel-bono.actual { border-color: var(--azul); background: var(--azul-suave); transform: translateX(6px); }
.nivel-bono .n {
  width: 32px; height: 32px; flex: 0 0 32px;
  border-radius: 100px;
  display: grid; place-items: center;
  font-weight: 600; font-size: 13px;
  background: var(--superficie); color: var(--tenue);
}
.nivel-bono.alcanzado .n { background: var(--arriba); color: #fff; }
.nivel-bono.actual .n { background: var(--azul); color: #fff; }
.nivel-bono .info { flex: 1; min-width: 0; }
.nivel-bono .info .t { display: block; font-size: 14.5px; font-weight: 600; }
.nivel-bono .info .d { display: block; font-size: 12.5px; color: var(--cuerpo); margin-top: 1px; }
.nivel-bono .monto { font-family: var(--mono); font-size: 18px; font-weight: 500; }
.nivel-bono.actual .monto { color: var(--azul); }

/* ---------------------------------------------------------- reconocimientos */
.insignias { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.insignia {
  text-align: center;
  border: 1px solid var(--pelo);
  border-radius: var(--r-md);
  padding: 24px 14px 22px;
  background: var(--lienzo);
  transition: transform .2s ease, box-shadow .2s ease;
}
.insignia:hover { transform: translateY(-4px) rotate(-1.5deg); box-shadow: var(--sombra-alta); }
.insignia .ico { font-size: 30px; filter: grayscale(1) opacity(.3); transition: filter .2s ease, transform .2s ease; }
.insignia:hover .ico { transform: scale(1.12); }
.insignia.ganada { border-color: var(--morado); background: #f8f5ff; }
.insignia.ganada .ico { filter: none; }
.insignia .nom { font-size: 12.5px; font-weight: 600; margin-top: 12px; line-height: 1.35; }
.insignia .cuando { font-size: 11px; color: var(--tenue); margin-top: 4px; }

/* Insignias de antigüedad (1, 2 y 3 años): anillo de carga que se llena con
   los meses en la agencia. Nadie las otorga, salen de la fecha de ingreso. */
.anillo.claro { width: 84px; height: 84px; flex: 0 0 84px; margin: 0 auto; }
.anillo.claro .pista { stroke: var(--superficie); stroke-width: 9; }
.anillo.claro .avance { stroke: var(--azul); stroke-width: 9; }
/* Ganada = completada: verde, que es el color reservado para eso. */
.insignia.anio.ganada { border-color: #bfe8d4; background: #f5fcf8; }
.insignia.anio.ganada .anillo.claro .avance { stroke: var(--arriba); }
.insignia.anio .ico-anio { font-size: 26px; filter: grayscale(1) opacity(.4); }
.insignia.anio.ganada .ico-anio { filter: none; }
.insignia.anio .nom { margin-top: 14px; }

/* Título de sección dentro de una vista, sin tarjeta. */
.cabecera-seccion .sub {
  font-size: 14px;
  color: var(--cuerpo);
  line-height: 1.55;
  margin-top: 8px;
  max-width: 60ch;
}

/* ------------------------------------------------------------------ subida */
.zona-subida {
  border: 1px dashed #b9c6ff;
  background: var(--azul-suave);
  border-radius: var(--r-md);
  padding: 30px 26px;
  text-align: center;
  transition: border-color .2s ease, background .2s ease;
}
.zona-subida.ok { border-color: #bfe8d4; background: var(--arriba-suave); }
.zona-subida input[type=file] { display: none; }
.zona-subida .nombre-archivo { font-size: 13px; color: var(--cuerpo); margin-top: 10px; word-break: break-all; }

/* -------------------------------------------------------------- vacaciones */
.saldo-anillo { display: flex; align-items: center; gap: 20px; }
.anillo { width: 116px; height: 116px; flex: 0 0 116px; position: relative; }
.anillo svg { transform: rotate(-90deg); }
.anillo .pista { fill: none; stroke: rgba(255,255,255,0.14); stroke-width: 11; }
.anillo .avance {
  fill: none;
  stroke: var(--azul-claro);
  stroke-width: 11;
  stroke-linecap: round;
  stroke-dasharray: var(--circ);
  stroke-dashoffset: var(--circ);
  animation: llena-anillo 1.3s cubic-bezier(.2,.7,.3,1) forwards .2s;
}
@keyframes llena-anillo { to { stroke-dashoffset: var(--resto); } }
.anillo .centro {
  position: absolute; inset: 0;
  display: grid; place-items: center; text-align: center;
}
.anillo .centro .g { font-family: var(--mono); font-size: 30px; font-weight: 500; line-height: 1; }
.anillo .centro .p { font-size: 11px; color: var(--tenue); margin-top: 3px; }

.form-fila { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; margin-top: 22px; }
.campo { display: block; }
.campo > span {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tenue);
  margin-bottom: 7px;
}
.campo input, .campo textarea, .campo select {
  width: 100%;
  border: 1px solid var(--pelo);
  border-radius: var(--r);
  padding: 12px 13px;
  font-size: 15px;
  color: var(--tinta);
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.campo input:focus, .campo textarea:focus, .campo select:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(30,80,250,0.12);
}
.campo textarea { resize: vertical; min-height: 92px; line-height: 1.5; }
.campo .ayuda { font-size: 12px; color: var(--tenue); margin-top: 6px; }
.campo.error input, .campo.error textarea { border-color: var(--abajo); }
.campo .mal { font-size: 12.5px; color: var(--abajo); margin-top: 6px; font-weight: 600; }

.resumen-dias {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--azul-suave);
  border-radius: var(--r-md);
  padding: 16px 18px;
  margin-top: 18px;
  animation: sube .4s ease both;
}
.resumen-dias .g { font-family: var(--mono); font-size: 26px; font-weight: 500; color: var(--azul); }

.solicitud {
  border: 1px solid var(--pelo);
  border-radius: var(--r-md);
  background: var(--lienzo);
  padding: 16px 17px;
  box-shadow: var(--sombra);
  transition: border-color .18s ease, transform .18s ease;
}
.solicitud + .solicitud { margin-top: 16px; }
.solicitud:hover { transform: translateY(-2px); border-color: #c9d3f5; }
.solicitud.pendiente { border-left: 3px solid var(--ambar); }
.solicitud.aprobada { border-left: 3px solid var(--arriba); }
.solicitud.denegada { border-left: 3px solid var(--abajo); }
.solicitud .cabecera { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.solicitud .rango { font-family: var(--mono); font-size: 15px; font-weight: 500; }
.solicitud .motivo {
  font-size: 14px;
  color: var(--cuerpo);
  line-height: 1.55;
  margin-top: 14px;
  padding: 11px 13px;
  background: var(--fondo);
  border-radius: var(--r);
  border-left: 2px solid var(--pelo);
}
.solicitud .acciones { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.solicitud .meta { font-size: 12px; color: var(--tenue); margin-top: 8px; }

/* --------------------------------------------------------------------- admin */
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th {
  text-align: left;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--tenue);
  padding: 0 10px 10px;
  white-space: nowrap;
}
.tabla td { padding: 13px 10px; border-top: 1px solid var(--pelo-suave); vertical-align: middle; }
.tabla td.num { font-family: var(--mono); }
.tabla tbody tr { transition: background .15s ease; }
.tabla tbody tr:hover td { background: #fafbfd; }
.envoltura-tabla { overflow-x: auto; }

.aviso {
  display: flex; gap: 12px;
  background: var(--ambar-suave);
  border: 1px solid #f3d9a4;
  border-radius: var(--r-md);
  padding: 17px 19px;
  font-size: 13.5px; line-height: 1.55;
  color: #8a5e04;
}
.aviso b { color: #6b4903; }

.stepper { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stepper input {
  width: 96px;
  font-family: var(--mono);
  font-size: 18px; font-weight: 500;
  text-align: center;
  border: 1px solid var(--pelo);
  border-radius: var(--r);
  padding: 11px 6px;
}
.stepper input:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(30,80,250,0.12); }

/* ------------------------------------------------------------------- varios */
.fila { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fila.entre { justify-content: space-between; }
.separador { height: 1px; background: var(--pelo-suave); margin: 26px 0; }
.vacio { text-align: center; padding: 34px 20px; color: var(--tenue); font-size: 14px; }

.confeti { position: fixed; top: 28%; width: 9px; height: 9px; border-radius: 2px; pointer-events: none; z-index: 60; opacity: 0; }

.brinca { animation: brinca .5s cubic-bezier(.3,1.6,.4,1); }
@keyframes brinca { 0% { transform: scale(1); } 45% { transform: scale(1.14); } 100% { transform: scale(1); } }

@media (max-width: 620px) {
  .rejilla.dos, .rejilla.tres, .rejilla.cuatro { grid-template-columns: 1fr; }
  .insignias { grid-template-columns: repeat(2, 1fr); }
  .form-fila { grid-template-columns: 1fr; }
  .contenido { padding: 24px 16px 114px; }
  .card { padding: 22px 20px; }
  .oscuro { padding: 24px 22px; }
  /* Mismo criterio que en escritorio, con pasos algo menores. */
  #contenido > * + * { margin-top: 20px; }
  .cabecera-vista + * { margin-top: 28px; }
  .mascota { width: 62px; height: 62px; flex-basis: 62px; }
  /* Peldaños más cortos: si no, la escalera se come el ancho de la tarjeta. */
  .sendero { --peldano: 14px; gap: 20px; }
  .saldo-anillo { flex-direction: column; align-items: flex-start; }
  .paso .caja { padding: 13px 14px; }
  .curva { height: 220px; }
}

@media (min-width: 901px) {
  .nav {
    top: 76px; bottom: auto; left: auto; right: auto;
    width: 196px;
    margin-left: calc(50vw - 560px);
    flex-direction: column;
    border: 1px solid var(--pelo);
    border-radius: var(--r-lg);
    padding: 10px;
    gap: 3px;
    box-shadow: var(--sombra);
  }
  .nav button {
    flex: none;
    grid-auto-flow: column;
    justify-items: start;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    font-size: 12px;
  }
  .nav .globito { top: 50%; right: 14px; margin: -9px 0 0 0; }
  .contenido { padding-left: 232px; padding-bottom: 60px; }
}

/* Red de seguridad. Las animaciones de entrada arrancan en opacity 0, y el
   navegador las frena o las pausa cuando la pestaña no está visible: si eso
   pasa, el contenido se quedaría invisible. Pasado el tiempo en que ya debieron
   terminar, el JS marca el body y todo se fuerza a su estado final. */
body.anim-fin .sube,
body.anim-fin .paso .caja,
body.anim-fin .paso .nodo,
body.anim-fin .insignia,
body.anim-fin .globo,
body.anim-fin .resumen-dias,
body.anim-fin .curva .punto {
  opacity: 1 !important;
  animation: none !important;
}
body.anim-fin .sube,
body.anim-fin .paso .caja,
body.anim-fin .globo { transform: none !important; }
body.anim-fin .paso::before,
body.anim-fin .paso::after,
body.anim-fin .cima { transform: none !important; opacity: 1 !important; animation: none !important; }
body.anim-fin .ruta .asfalto-hecho { stroke-dashoffset: 0 !important; animation: none !important; }
body.anim-fin .ruta .banderin-grupo,
body.anim-fin .hito-bloque { opacity: 1 !important; animation: none !important; }
body.anim-fin .hito-bloque { transform: translateY(-50%) !important; }
body.anim-fin .curva .trazo { stroke-dashoffset: 0 !important; animation: none !important; }
body.anim-fin .curva .relleno { opacity: 1 !important; animation: none !important; }
body.anim-fin .anillo .avance { stroke-dashoffset: var(--resto) !important; animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .sube, .paso .caja, .paso .nodo, .cima,
  .ruta .banderin-grupo { opacity: 1; transform: none; }
  .paso::before, .paso::after { transform: none; }
  .hito-bloque { opacity: 1; transform: translateY(-50%); }
  .ruta .asfalto-hecho { stroke-dashoffset: 0; }
  .curva .trazo { stroke-dashoffset: 0; }
  .curva .relleno { opacity: 1; }
  .anillo .avance { stroke-dashoffset: var(--resto); }
}