/* ── Mi nivel de conciencia como tablero (23-sep-2026) ───────────────────
   Pedro eligió la opción C de vista-previa-nivel.html, en el estilo de sus
   referencias de Notion (las mismas de Protocolos): pestañas con icono,
   bloques con título e icono y una tarjeta interior. Aplica a la cabecera,
   Mi formulario y Mi evolución; Mis reportes se queda como está.

   Carga el último; quitar su <link> deja estas pantallas sin estos estilos. */

body[data-vista="nivel"]{ --ambiente:rgba(63,208,200,.08) }

/* ── Pestañas con icono (también se ven en Mis reportes) ──────────────── */
.pestanas-nivel.nv-tabs{ display:flex; gap:4px; padding:22px 40px 0; margin:0; background:transparent; border:0; box-shadow:none; width:auto }
.nv-tabs .pestana{
  display:inline-flex; align-items:center; gap:8px; padding:9px 15px !important; border-radius:12px !important; border:0 !important;
  background:transparent !important; box-shadow:none !important; color:var(--tinta-tenue) !important; font-size:13px !important;
  letter-spacing:normal !important; text-transform:none !important;
}
.nv-tabs .pestana:hover{ color:var(--tinta) !important; background:rgba(238,237,245,.04) !important }
.nv-tabs .pestana.aqui{ background:rgba(238,237,245,.08) !important; color:var(--tinta) !important }
.nv-tabs svg, .nv-ico svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round }

/* ── Estructura común ─────────────────────────────────────────────────── */
.nv{ max-width:1180px; padding:28px 40px 56px; animation:lx-rise .6s var(--curva-lx) both }
.nv-cabeza{ margin-bottom:24px }
.nv-rotulo{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0; font-size:9.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--tinta-tenue) }
.nv-h1{ margin:14px 0 0; font-family:var(--display); font-weight:200; font-size:clamp(30px,3.4vw,38px); letter-spacing:-.03em; line-height:1.05; color:var(--tinta) }
.nv-bajada{ margin:8px 0 0; max-width:58ch; font-size:12.5px; line-height:1.6; color:var(--tinta-media) }
.nv-estado{ display:inline-flex; align-items:center; gap:7px; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--oro) }
.nv-estado::before{ content:''; width:5px; height:5px; border-radius:50%; background:currentColor; box-shadow:0 0 8px currentColor }
.nv-estado.si{ color:rgb(var(--c-menta)) }

.nv .tira-meses, .nv .meses{ margin-bottom:22px }

.nv-grid{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr); gap:22px; align-items:start; max-width:none }

.nv-bloque{ --c:var(--c-turquesa); padding:24px 22px 22px; border-radius:24px; border:1px solid rgba(238,237,245,.08); background:rgba(238,237,245,.02) }
.nv-bloque.lila{ --c:var(--c-lila) } .nv-bloque.oro{ --c:var(--c-oro) }
.nv-bloque + .nv-bloque{ margin-top:22px }
.nv-tit{ display:flex; align-items:center; gap:12px; margin:0 0 16px; font-family:var(--display); font-weight:300; font-size:22px; letter-spacing:-.02em; color:var(--tinta) }
.nv-tit-fila{ display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:6px }
.nv-tit-fila .nv-tit{ margin:0 }
.nv-ico{ width:30px; height:30px; flex:none; display:grid; place-items:center; border-radius:9px; color:rgb(var(--c)); background:rgba(var(--c),.14); box-shadow:inset 0 0 0 1px rgba(var(--c),.3) }
.nv-interior{ padding:18px 18px 16px; border-radius:18px; border:1px solid rgba(238,237,245,.08); background:rgba(0,0,0,.18) }
.nv-interior h4{ margin:0 0 8px; font-family:var(--display); font-weight:400; font-size:16px; color:var(--tinta) }
.nv-nota{ margin:0 0 12px; font-size:11.5px; line-height:1.55; color:var(--tinta-tenue) }

/* ── Mi formulario ────────────────────────────────────────────────────── */
.nv-opciones{ display:flex; flex-direction:column; gap:2px; margin:0 }
.nv .ficha.nv-opcion{
  display:flex; align-items:center; gap:12px; width:100%; margin:0; padding:8px 6px !important; cursor:pointer;
  border:0 !important; border-radius:10px !important; background:transparent !important; box-shadow:none !important;
  color:var(--tinta); font-size:13.5px; text-transform:none; letter-spacing:0;
}
.nv .ficha.nv-opcion:hover{ background:rgba(238,237,245,.035) !important }
.nv .ficha.nv-opcion input{ position:absolute; opacity:0; width:0; height:0 }
.nv .ficha.nv-opcion i{ width:16px; height:16px; flex:none; border-radius:50%; border:1px solid rgba(238,237,245,.3); transition:all .25s }
.nv .ficha.nv-opcion.puesta i{ border:5px solid rgb(var(--c-turquesa)); box-shadow:0 0 10px rgba(var(--c-turquesa),.6) }
.nv .ficha.nv-opcion span{ padding:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; color:var(--tinta-media); font-size:13.5px }
.nv .ficha.nv-opcion.puesta span{ color:var(--tinta) }
.nv .campo{ margin:0 }
.nv .campo + .campo{ margin-top:18px }
.nv .campo label{ display:block; margin:0 0 6px; font-size:9.5px; letter-spacing:.22em; line-height:1.6; text-transform:uppercase; color:var(--tinta-tenue) }
.nv .nv-linea, .nv .nv-interior input:not([type=radio]), .nv .nv-interior select{
  width:100%; padding:9px 0 !important; border:0 !important; border-bottom:1px solid rgba(238,237,245,.12) !important;
  border-radius:0 !important; background:transparent !important; box-shadow:none !important; resize:vertical;
  color:var(--tinta); font:300 14px/1.6 var(--display);
}
.nv .nv-linea:focus, .nv .nv-interior input:focus{ border-bottom-color:rgb(var(--c)) !important }
.nv .pareja{ display:grid; grid-template-columns:1fr 1fr; gap:18px }
.nv .pareja + .pareja{ margin-top:18px }
.nv .pista{ margin:6px 0 0; font-size:11px; color:var(--tinta-tenue) }
.nv-acciones{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:18px }
.nv-boton{
  padding:11px 20px !important; border-radius:99px !important; border:1px solid rgba(var(--c-turquesa),.45) !important;
  background:transparent !important; box-shadow:none !important; color:var(--tinta) !important;
  font-size:10px !important; letter-spacing:.22em !important; text-transform:uppercase !important; cursor:pointer;
}
.nv-boton:hover{ background:rgba(var(--c-turquesa),.08) !important }
.nv-boton:disabled{ opacity:.6 }

/* ── Mi evolución ─────────────────────────────────────────────────────── */
.nv-aros{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
.nv-aro{ display:flex; flex-direction:column; align-items:center; padding:16px 10px 14px; text-align:center; border-radius:18px; border:1px solid rgba(238,237,245,.08); background:rgba(0,0,0,.18) }
.nv-aro-r{ position:relative; width:112px; aspect-ratio:1 }
.nv-aro-r svg{ width:100%; height:100%; transform:rotate(-90deg) }
.nv-aro-r circle{ fill:none; stroke-width:6 }
.nv-aro-r .pi{ stroke:rgba(238,237,245,.07) }
.nv-aro-r .va{ stroke-linecap:round; transition:stroke-dashoffset 1s var(--curva-lx) }
.nv-aro-r b{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:200; font-size:30px; letter-spacing:-.03em; color:var(--tinta) }
.nv-aro small{ margin-top:8px; font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--tinta-tenue) }
.nv-aro span{ margin-top:2px; font-size:12px }
.nv-resumen{ margin:14px 0 0; text-align:center; font-size:12px }
.nv-cifras{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px }
.nv-cifras > div{ padding:14px 16px; border-radius:16px; border:1px solid rgba(238,237,245,.08); background:rgba(0,0,0,.18) }
.nv-cifras small{ display:block; font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:var(--tinta-tenue) }
.nv-cifras b{ display:block; margin-top:6px; font-family:var(--display); font-weight:200; font-size:26px; color:var(--tinta) }
.nv-cifras span{ font-size:11px; color:var(--tinta-tenue) }

.nv-serie{ margin:0 !important }
.nv .marco-grafica.nv-grafica{ margin-top:10px; padding:10px 0 0; border:0 !important; background:transparent !important; box-shadow:none !important }

.nv-retos{ display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:10px }
.nv .nv-reto{ display:flex; flex-direction:column; padding:14px; border-radius:16px; border:1px solid rgba(238,237,245,.08); background:rgba(0,0,0,.18) }
.nv-reto small{ font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--tinta-tenue) }
.nv-reto b{ display:flex; align-items:center; gap:8px; margin:6px 0 2px; font-weight:400; font-size:14px; color:var(--tinta) }
.nv-reto b::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--tono); box-shadow:0 0 8px var(--tono) }
.nv-reto > span{ font-size:11px; color:var(--tinta-tenue) }
.nv-reto .agregar-nota{ margin-top:10px; font-size:11px; color:rgb(var(--c-turquesa)); cursor:pointer }
.nv-reto .reto-notas{ margin:10px 0 0; padding:0; border:0 }
.nv-reto .reto-nota{ position:relative; display:block !important; padding:8px 18px 8px 0 !important; border:0 !important; border-top:1px solid rgba(238,237,245,.06) !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important }
.nv-reto .reto-nota p{ margin:2px 0 0; font-size:12px; line-height:1.5; color:var(--tinta-media) }
.nv-reto .reto-nota-fecha{ font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-tenue) }
.nv-reto .borrar-nota{ position:absolute; top:6px; right:0; color:var(--tinta-tenue); cursor:pointer }
.nv-reto .reto-form{ margin-top:10px }
.nv-reto .reto-form label{ display:block; margin-bottom:4px; font-size:10.5px; line-height:1.5; color:var(--tinta-tenue); text-transform:none; letter-spacing:0 }
.nv-reto .reto-form .acciones-fila{ margin-top:8px; gap:6px; flex-wrap:wrap }

@media (max-width:860px){
  .pestanas-nivel.nv-tabs{ padding:12px 18px 0; overflow-x:auto }
  .nv{ padding:18px 18px 40px }
  .nv-grid, .nv .pareja{ grid-template-columns:1fr }
}
@media (prefers-reduced-motion:reduce){ .nv{ animation:none } }