/* _______________________________________________________
   NEXEL - Sistema de diseño
   _______________________________________________________ */

:root {
  /* ---- Dorados / arena ---- */
  --gold-primary:#C6A877; --gold-deep:#BC995F; --gold-sand:#D7C29F; --gold-border:#E4D7BF;
  /* ---- Cafés ---- */
  --brown-dark:#47361D; --brown-mid:#664F29; --brown-accent:#96773F;
  /* ---- Estados ---- */
  --state-danger:#E86177; --state-danger-bg:rgba(232,97,119,0.16); --state-danger-bd:rgba(232,97,119,0.55);
  --state-info:rgba(41,170,226,0.55); --state-info-bg:rgba(41,170,226,0.16);
  /* ---- Glass ---- */
  --glass-card:rgba(255,255,255,0.07); --glass-card-2:rgba(255,255,255,0.10);
  --glass-panel:rgba(255,255,255,0.16); --glass-strong:rgba(255, 255, 255, 0.288);
  --glass-border:rgba(255,255,255,0.14);
  /* ---- Texto ---- */
  --text-on-dark:#FFFFFF; --text-on-dark-2:rgba(255,255,255,0.82); --text-on-dark-3:rgba(255,255,255,0.78);
  --neutral-light:#E0E0E0;

  /* ---- Derivados (alias / sombras, no son colores nuevos) ---- */
  --header-grad: linear-gradient(180deg, var(--gold-deep) 0%, var(--gold-primary) 100%);
  --shadow-soft: 0 8px 24px rgba(0,0,0,0.28);
  --shadow-card: 0 10px 30px rgba(0,0,0,0.35);
  --shadow-pill: 0 6px 18px rgba(0,0,0,0.30);

  /* ---- Radios / medidas ---- */
  --radius-card: 24px;
  --radius-pill: 999px;
  --radius-sm: 12px;
  --header-h: 64px;
  --tabbar-h: 95px;
  --content-max: 1100px;

  /* ---- Tipografía ---- */
  --font-base: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* _______________________________________________________
   Reset
   _______________________________________________________ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { height: 100%; background: #0c0a06; }
body { min-height: 100%; background: #0c0a06; }
#root { min-height: 100%; background: #0c0a06; }
body {
  font-family: var(--font-base);
  color: var(--text-on-dark);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.4;
}
img, picture, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--gold-sand); outline-offset: 2px; }

body {
  font-family: var(--font-base);
  color: var(--text-on-dark);
  background: var(--brown-dark);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.4;
}

/* _______________________________________________________
   Fondo fotográfico fijo + overlay
   (la imagen se inyecta por JS en #nx-bg / #nx-bg-login)
   _______________________________________________________ */
.app-bg {
  position: fixed; inset: 0; z-index: 0;
  min-height: 100dvh;
  background-size: cover; background-position: bottom; background-repeat: no-repeat;
}
@media (min-width: 768px) {
  .app-bg { background-position: bottom; }
}
.app-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,8,5,0.45) 0%, rgba(10,8,5,0.70) 100%);
}

/* _______________________________________________________
   Tipografía — escala mobile-first con clamp
   _______________________________________________________ */
.t-welcome { font-size: clamp(40px, 6vw, 50px); font-weight: 300; line-height: 1.1; }
.t-welcome strong { font-weight: 700; }
.t-section { font-size: clamp(24px, 4vw, 30px); font-weight: 700; }
.t-body  { font-size: clamp(16px, 2.4vw, 18px); font-weight: 400; }
.t-small { font-size: clamp(12px, 1.8vw, 14px); font-weight: 400; }
.t-label { font-size: clamp(11px, 1.6vw, 14px); font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }

/* _______________________________________________________
   Utilitarias de espaciado / layout
   _______________________________________________________ */
.stack { display: flex; flex-direction: column; }
.gap-24 { gap: 24px; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.text-center { text-align: center; }

/* _______________________________________________________
   GLASS (card / 2 / panel / strong)
   _______________________________________________________ */
.glass {
  background: var(--glass-card);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.glass--2      { background: var(--glass-card-2); }
.glass--panel  { background: var(--glass-panel); }
.glass--strong { background: var(--glass-strong); }

/* _______________________________________________________
   BOTÓN PILL  (.btn · gold / ghost / block) + spinner + icono
   _______________________________________________________ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 28px; border-radius: var(--radius-pill);
  font-weight: 700; font-size: 16px; letter-spacing: .2px;
  transition: transform .12s ease, filter .12s ease, opacity .12s ease;
}
.btn--gold  { background: var(--header-grad); color: var(--brown-dark); box-shadow: var(--shadow-pill); }
.btn--ghost { background: var(--glass-strong); color: var(--text-on-dark); border: 1px solid var(--glass-border); }
.btn--block { display: flex; width: 100%; }
.btn:hover:not(:disabled)  { filter: brightness(1.05); transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn__icon { width: 20px; height: 20px; }
.btn__spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(71,54,29,0.35); border-top-color: var(--brown-dark);
  animation: nx-spin .7s linear infinite;
}
.btn--ghost .btn__spinner { border-color: rgba(255,255,255,0.35); border-top-color: var(--text-on-dark); }
@keyframes nx-spin { to { transform: rotate(360deg); } }

/* _______________________________________________________
   BADGES de estado (.badge · danger / info / gold / muted)
   _______________________________________________________ */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
}
.badge--danger { background: var(--state-danger-bg); border: 1px solid var(--state-danger-bd); color: var(--state-danger); }
.badge--info   { background: var(--state-info-bg);   border: 1px solid var(--state-info);     color: var(--text-on-dark); }
.badge--gold   { background: var(--gold-deep); color: var(--brown-dark); }
.badge--muted  { background: var(--glass-card-2); border: 1px solid var(--glass-border); color: var(--text-on-dark-2); }
.badge__dot    { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* _______________________________________________________
   Transiciones
   _______________________________________________________ */
@keyframes nx-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nx-page-enter {
  animation: nx-fade-in .35s ease both;
}

/* _______________________________________________________
   HEADER dorado
   _______________________________________________________ */
.nx-header {
  position: sticky; top: 0; z-index: 20;
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px;
  background: var(--gold-primary);
}
.nx-header__brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.nx-header__plantosa { height: 35px; width: auto; }
.nx-header__sep { width: 2px; height: 28px; background: rgba(71,54,29,0.45); }
.nx-header__nexel { height: 35px; width: auto; }
.nx-header__date {
  color: var(--brown-dark); font-weight: 700; font-size: 13px; letter-spacing: .3px; white-space: nowrap;
}
@media (max-width: 420px) {
  .nx-header__date { font-size: 11px; }
  .nx-header__nexel { height: 30px; }
}

/* _______________________________________________________
   PAGE / CONTAINER  (contenido interno)
   _______________________________________________________ */
.page {
  min-height: auto;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.container {
  width: 100%; max-width: var(--content-max);
  margin-inline: auto;
  padding: 32px clamp(20px, 5vw, 40px) calc(var(--tabbar-h) + 96px);
}
@media (min-width: 768px) {
  .container { padding-bottom: calc(var(--tabbar-h) + 88px); }
}

/* _______________________________________________________
   Inicio - Main Menu Options Cards
   _______________________________________________________ */

.module-list {
  display: flex;
  flex-direction: column;
  gap: 35px;
  margin-top: 24px;
}

.module-card {
  display: flex;
  align-items: stretch;
  text-align: left;
  width: 100%;
  min-height: 130px;
  max-height: 130px;
  background: var(--glass-strong);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  cursor: pointer;
  transition: filter .15s ease;
}
.module-card:hover { filter: brightness(1.08); }

.module-card__img {
  width: 96px;
  flex: 0 0 96px;
  object-fit: contain;
  align-self: center;
  padding: 12px;
}

.module-card__body {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}

.module-card__title {
  font-size: clamp(16px, 3.4vw, 20px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--gold-sand);
}
.module-card__text {
  font-size: clamp(13px, 2.4vw, 15px);
  color: var(--text-on-dark-2);
  line-height: 1.45;
}

@media (min-width: 768px) {
  .module-card__img { flex-basis: 160px; width: 160px; }
}




/* _______________________________________________________
   LOADER de ruta protegida (.nx-loader)
   _______________________________________________________ */
.nx-loader { min-height: 100vh; display: grid; place-items: center; }
.nx-loader__ring {
  width: 44px; height: 44px; border-radius: 50%;
  border: 3px solid var(--glass-border); border-top-color: var(--gold-primary);
  animation: nx-spin .8s linear infinite;
}

/* _______________________________________________________
   BOTTOM-TAB BAR  (móvil: borde a borde · desktop: pill flotante)
   Marcado: .nx-tabbar > .nx-tab (NavLink) > .nx-tab__bubble + label
   Estado activo: NavLink añade aria-current="page".
   _______________________________________________________ */
.nx-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  height: var(--tabbar-h);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  background: var(--glass-panel);
  border-top: 1px solid var(--glass-border);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  color: var(--gold-sand);
}
.nx-tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--gold-sand); flex: 0 0 auto; min-width: 0;
  font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  transition: color .15s ease;
  color: var(--gold-sand);
}
.nx-tabbar__row {
  display: flex; flex-direction: row; flex-wrap: nowrap;
  justify-content: center; gap: 100px;
}
.nx-tabbar__legal {
  padding-top: 8px;
  font-size: 11px;
  color: var(--text-on-dark-3);
  text-align: center;
  opacity: .6;
}
.nx-tab__bubble {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  transition: background .18s ease, color .18s ease;
}
.nx-tab__bubble svg { width: 24px; height: 24px; }
.nx-tab[aria-current="page"] { color: var(--gold-sand); }
/*
.nx-tab[aria-current="page"] .nx-tab__bubble {
  background: var(--brown-dark); color: var(--text-on-dark);
  box-shadow: var(--shadow-soft);
}
*/
@media (min-width: 768px) {
  .nx-tabbar {
    left: 0; right: 0; margin-inline: auto;
    bottom: 24px;
    width: min(600px, calc(100% - 48px));
    height: auto;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-card);
    padding: 10px 18px;
    justify-content: center;
  }
  .nx-tab { flex-direction: row; gap: 10px; flex: 0 1 auto; padding: 4px 10px; font-size: 12px; }
}



/* _______________________________________________________
   LOGIN
   _______________________________________________________ */
.login {
  min-height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 40px 16px 24px;
  position: relative;
  z-index: 1;
}
.login__inner {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto 0;
}
.login__logo { width: clamp(100px, 50vw, 180px); height: auto; }
.login__slogan {
  margin-top: 20px; text-align: center; color: var(--text-on-dark-2);
  font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; max-width: 50ch;
}
.login__card { width: 75%; margin-top: 40px; padding: 28px 24px;}
.login__title { text-align: center; font-size: 19px;}

/* Campos de formulario */
.field { display: flex; flex-direction: column; gap: 8px; }
.field__label { color: var(--text-on-dark-2); }
.input {
  width: 100%; padding: 13px 16px; border-radius: var(--radius-sm);
  background: rgba(0,0,0,0.25); border: 1px solid var(--glass-border);
  color: var(--text-on-dark); font-size: 16px;
  transition: border-color .15s ease, background .15s ease;
}
.input::placeholder { color: var(--text-on-dark-3); }
.input:focus { border-color: var(--gold-primary); background: rgba(0,0,0,0.35); outline: none; }
.input--error { border-color: var(--state-danger-bd); }
.input::-ms-reveal {
  filter: invert(1);
}

/* _______________________________________________________
   LFOOTER de ruta protegida (.nx-loader)
   _______________________________________________________ */

.login__footer {
  display: flex;
  justify-content: center;
  width: 100%;
  padding-top: 24px;
}
.login__footer img { height: 50px; width: auto; opacity: .9; }



/* Mensaje de error de formulario */
.form-error {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: var(--radius-sm);
  background: var(--state-danger-bg); border: 1px solid var(--state-danger-bd);
  color: var(--state-danger); font-size: 14px; font-weight: 600;
}
.form-error svg { width: 20px; height: 20px; flex: 0 0 auto; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}


/* _______________________________________________________
   CLIMA
   _______________________________________________________ */

/* Situación de 0 formularios */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 56px 32px;
  gap: 12px;
}
.empty-state__icon {
  color: var(--gold-sand);
  margin-bottom: 8px;
}
.empty-state__icon svg {
  width: 56px;
  height: 56px;
}
.empty-state__title {
  color: var(--text-on-dark);
}
.empty-state__text {
  color: var(--text-on-dark-2);
  max-width: 46ch;
}



/* _______________________________________________________
   Evaluaciones Desempeno Activas
   _______________________________________________________ */



.eval-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.eval-card {
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
  width: 100%;
  padding: 18px 20px;
  background: var(--glass-strong);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: filter .15s ease;
}
.eval-card:hover { filter: brightness(1.08); }
.eval-card__avatar {
  flex: 0 0 auto;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 2px solid var(--gold-border);
  color: var(--gold-sand);
}
.eval-card__avatar svg { width: 28px; height: 28px; }
.eval-card__body { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.eval-card__name {
  font-size: clamp(16px, 3vw, 19px);
  font-weight: 700;
  color: var(--text-on-dark);
}
.eval-card__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.eval-card__period { font-size: 13px; color: var(--text-on-dark-2); }




/* _______________________________________________________
   EVALUATION FORM  ·  /evaluar/:evalCode
   Secuencia de pasos: intro → criterio → aspecto → outro
   Reusa tokens y patrones glass existentes.
   _______________________________________________________ */

.ev-form { padding-bottom: 8px;}

/* ---- Reglas comunes a las tarjetas de paso ---- */
.ev-intro, .ev-cover, .ev-aspecto, .ev-outro { padding: 28px clamp(20px, 4vw, 36px); }

/* ---- INTRO (indicaciones + contexto) ---- */
.ev-intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
.ev-intro__eyebrow { color: var(--gold-sand); display: block; }
.ev-intro__list {
  margin-top: 12px;
  display: flex; flex-direction: column; gap: 10px;
  counter-reset: ev;
  
}
.ev-intro__list li {
  position: relative; padding-left: 38px;
  font-size: clamp(15px, 2.4vw, 17px); color: var(--text-on-dark-2); line-height: 1.45;
  counter-increment: ev;
}
.ev-intro__list li::before {
  content: counter(ev, upper-alpha);
  position: absolute; left: 0; top: -2px;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gold-deep); color: var(--brown-dark);
  font-size: 13px; font-weight: 700;
}
.ev-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.ev-chip {
  padding: 8px 14px; border-radius: var(--radius-pill);
  background: var(--gold-sand); color: var(--brown-dark);
  font-size: 13px; font-weight: 700; white-space: nowrap;
}
/* Columna de contexto */
.ev-intro__context {
  border-top: 1px solid var(--glass-border);
  padding-top: 20px;
}
.ev-ctx__name { font-size: clamp(18px, 3vw, 22px); font-weight: 700; color: var(--gold-sand); margin-top: 6px; }
.ev-ctx__list { margin-top: 14px; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; }
.ev-ctx__list dt { color: var(--text-on-dark-3); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; align-self: center; }
.ev-ctx__list dd { color: var(--text-on-dark); font-size: 14px; }

@media (min-width: 768px) {
  .ev-intro { grid-template-columns: 1fr 300px; }
  .ev-intro__context { border-top: none; border-left: 1px solid var(--glass-border); padding-top: 0; padding-left: 28px; }
}

/* ---- CRITERIO (portada) ---- */
.ev-cover { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 44px; padding-bottom: 44px; }
.ev-cover__eyebrow { color: var(--gold-sand); }
.ev-cover__title { max-width: 22ch; }
.ev-cover__desc { color: var(--text-on-dark-2); max-width: 52ch; }
.ev-cover__foot { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.ev-cover__count { color: var(--text-on-dark-3); }

/* ---- ASPECTO (una pregunta) ---- */
.ev-aspecto__crit { color: var(--gold-sand); }
.ev-aspecto__label { margin-top: 6px; }

/* círculos 1–5 */
.ev-scale__dots { display: flex; gap: clamp(10px, 3vw, 20px); margin-top: 22px; justify-content: center; }
.ev-dot {
  width: clamp(44px, 11vw, 58px); height: clamp(44px, 11vw, 58px);
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gold-sand); color: var(--brown-dark);
  font-size: clamp(18px, 4vw, 22px); font-weight: 700;
  border: 2px solid transparent;
  transition: transform .12s ease, filter .12s ease, background .12s ease, opacity .12s ease;
}
.ev-dot:hover { filter: brightness(1.06); transform: translateY(-1px); }
.ev-dot.is-on { background: var(--gold-deep); color: var(--brown-dark); border-color: var(--text-on-dark); box-shadow: var(--shadow-pill); }
.ev-dot.is-dim { opacity: .5; }
.ev-scale__chosen { margin-top: 16px; color: var(--text-on-dark-2); text-align: center; }
.ev-scale__chosen strong { color: var(--gold-sand); }

/* tarjetas de ScaleValue */
.ev-options { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
.ev-option {
  display: flex; align-items: center; gap: 16px; text-align: left; width: 100%;
  padding: 16px 18px;
  background: var(--glass-card-2); border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  transition: filter .12s ease, border-color .12s ease, background .12s ease;
}
.ev-option:hover { filter: brightness(1.08); border-color: var(--gold-border); }
.ev-option.is-on { background: var(--glass-strong); border-color: var(--gold-primary); }
.ev-option__num {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gold-sand); color: var(--brown-dark); font-weight: 700;
}
.ev-option.is-on .ev-option__num { background: var(--gold-deep); }
.ev-option__text { flex: 1 1 auto; color: var(--text-on-dark); font-size: clamp(15px, 2.6vw, 17px); }
.ev-option__pick {
  flex: 0 0 auto; padding: 6px 14px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  background: var(--glass-strong); color: var(--text-on-dark-2); border: 1px solid var(--glass-border);
}
.ev-option.is-on .ev-option__pick { background: var(--gold-deep); color: var(--brown-dark); border-color: transparent; }

/* textarea (String) */
.ev-text { margin-top: 20px; }
.ev-text__hint { color: var(--text-on-dark-2); }
.ev-text__area { margin-top: 12px; resize: vertical; min-height: 120px; line-height: 1.5; }
.ev-text__warn { margin-top: 12px; }

/* ---- OUTRO (resumen + submit) ---- */
.ev-outro { display: flex; flex-direction: column; align-items: center; }
.ev-outro__icon { color: var(--gold-sand); margin-bottom: 6px; }
.ev-outro__icon svg { width: 52px; height: 52px; }
.ev-outro__lead { color: var(--text-on-dark-2); max-width: 50ch; margin-top: 8px; }
.ev-summary { width: 100%; margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.ev-summary__row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: var(--glass-card-2); border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
}
.ev-summary__row.is-done { background: var(--glass-strong); border-color: var(--gold-border); }
.ev-summary__mark {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--glass-strong); color: var(--text-on-dark-2);
  font-size: 13px; font-weight: 700;
}
.ev-summary__row.is-done .ev-summary__mark { background: var(--gold-deep); color: var(--brown-dark); }
.ev-summary__mark svg { width: 18px; height: 18px; }
.ev-summary__name { flex: 1 1 auto; min-width: 0; color: var(--text-on-dark); font-weight: 700; font-size: clamp(14px, 2.4vw, 16px); line-height: 1.3; }
.ev-summary__row .badge { flex: 0 0 auto; }

/* ---- BARRA DE PROGRESO + NAVEGACIÓN ---- */
.ev-nav {
  display: flex; flex-direction: column; gap: 16px;
  padding: 18px clamp(16px, 3vw, 22px);
  background: var(--glass-panel); border: 1px solid var(--glass-border);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
}
.ev-progress { display: flex; flex-direction: column; gap: 8px; }
.ev-progress__track { height: 8px; border-radius: var(--radius-pill); background: rgba(0,0,0,0.28); overflow: hidden; }
.ev-progress__fill { height: 100%; background: var(--header-grad); border-radius: var(--radius-pill); transition: width .3s ease; }
.ev-progress__label { color: var(--text-on-dark-2); }
.ev-nav__btns { display: flex; justify-content: space-between; gap: 12px; }
.ev-nav__btns .btn { flex: 1 1 0; }

@media (min-width: 768px) {
  .ev-nav { flex-direction: row; align-items: center; gap: 24px; }
  .ev-progress { flex: 1 1 auto; }
  .ev-nav__btns { flex: 0 0 auto; }
  .ev-nav__btns .btn { flex: 0 0 auto; }
}