/* ═══════════════════════════════════════════════════════════════════════════
   VanyCorp · el marco de las aplicaciones: barra superior y rail lateral
   ═══════════════════════════════════════════════════════════════════════════
   Necesita `tokens.css` y `marca.css` cargados antes.

   Esto es lo que hasta hoy cada producto se hizo por su cuenta, y por eso había
   cinco marcos distintos: barra oscura en el portal de la cuenta y clara en las
   demás, el menú dentro de la barra en la consola de firma y en un rail en el
   portal, pestañas horizontales en la de correo, y el interruptor de tema a un
   clic en dos productos y a dos en otro.

   El marco es SIEMPRE el mismo. Lo único que cambia de un producto a otro son
   los enlaces del rail y sus grupos.

   ── De dónde sale cada pieza ───────────────────────────────────────────────

   **La barra, del correo.** Su menú de usuario es el acierto: identidad, ajustes
   y salir viven en un desplegable, no sueltos en la barra. Es lo que permite
   añadir una opción más sin rediseñar nada, y es lo que hacen GitHub, Google y
   Atlassian. Con dos correcciones:

     - **Superficie sólida**, no translúcida. El `backdrop-filter` de la consola
       de correo se ve bien sobre una página en reposo y emborrona el texto
       cuando debajo pasa una tabla larga. Legibilidad antes que efecto.
     - **El tema, dentro del menú.** Queda a dos clics en vez de a uno, y es un
       coste real; a cambio la barra deja de crecer cada vez que aparece un
       ajuste. Es la convención de las herramientas que se usan a diario.

   **El rail, del portal de la cuenta.** Es el único diseñado para muchos
   enlaces con grupos, que es la forma que tienen todos: filete de 3 px a la
   izquierda en vez de una pastilla rellena —una columna de quince pastillas es
   una escalera de bloques de color— y, en pantalla estrecha, una tira
   horizontal, porque un rail de 240 px en un teléfono se come la pantalla.

   ── Lo que hay que hacer al usarlo ─────────────────────────────────────────

   1. **Cada entrada del rail es un ENLACE con su URL**, no un botón que cambia
      una sección. Sin URL no se puede compartir «llévame a Canales de salida»,
      el botón atrás del navegador no hace lo que se espera, y un lector de
      pantalla no tiene cómo decir dónde estás.
   2. **La activa lleva `aria-current="page"`**, además de la clase. El color y
      el filete no existen para quien no los ve.
   3. El desplegable se abre con `.abierto` en `.vc-usuario`, y quien lo abre
      mantiene `aria-expanded` al día. Se cierra con Escape y al pinchar fuera:
      esas dos cosas las pone el producto, no el CSS.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── El marco ─────────────────────────────────────────────────────────────── */
.vc-marco {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--vc-bg);
  color: var(--vc-tinta);
  font-family: var(--vc-font-sans);
  font-size: var(--vc-t-cuerpo);
  -webkit-font-smoothing: antialiased;
}

/* `flex: 1` y no una altura calculada: la barra puede cambiar de alto y aquí no
   hay que enterarse. Un `calc(100vh - 54px)` se queda viejo en silencio. */
.vc-marco__cuerpo {
  display: flex;
  flex: 1;
  min-height: 0;
}

.vc-lienzo {
  flex: 1;
  min-width: 0;
  padding: clamp(var(--vc-e-5), 3vw, var(--vc-e-6));
}

/* Un solo ancho de lectura para toda la suite. Hasta hoy eran tres —900 px en
   el portal, 1152 en la consola de firma y sin límite en los flujos—, así que
   el mismo dato se veía en tres medidas según por dónde entraras. */
.vc-lienzo__ancho {
  max-width: 1180px;
  margin: 0 auto;
  width: 100%;
}

/* ── La barra ─────────────────────────────────────────────────────────────── */
.vc-barra {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--vc-e-4);
  padding: var(--vc-e-3) clamp(var(--vc-e-4), 3vw, var(--vc-e-5));
  background: var(--vc-superficie);
  border-bottom: 1px solid var(--vc-borde);
}

/* El lockup y, debajo, de quién es esto. Dos líneas muy juntas: es una firma,
   no un título. */
.vc-barra__marca {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-right: var(--vc-e-2);
  min-width: 0;
}
.vc-barra__casa {
  font-size: var(--vc-t-nota);
  color: var(--vc-tinta-tenue);
  line-height: 1.1;
}

/* ── La empresa de quien está dentro ──────────────────────────────────────
   Va a la IZQUIERDA, pegada al lockup y detrás de un divisor, porque es
   contexto de a quién pertenece lo que se está mirando —no un ajuste—. El
   lockup queda de ancla: no se mueve al saltar de producto, y la empresa se
   añade al lado.

   El logo es opcional y casi nadie lo tendrá al principio: sin él se pinta un
   chip con las iniciales, que es información de verdad y no un hueco gris. */
.vc-barra__divisor {
  width: 1px;
  align-self: stretch;
  margin: calc(var(--vc-e-1) * -1) 0;
  background: var(--vc-borde);
  flex: none;
}

.vc-empresa {
  display: flex;
  align-items: center;
  gap: var(--vc-e-2);
  min-width: 0;
}

.vc-empresa__logo {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: var(--vc-radio-sm);
  object-fit: contain;
  background: var(--vc-superficie-2);
}

/* El sustituto mientras no hay logo: las iniciales sobre el latón, que es el
   acento de la marca y no compite con el verdigrís de lo interactivo. */
.vc-empresa__inicial {
  width: 28px;
  height: 28px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--vc-radio-sm);
  background: var(--vc-laton-suave);
  color: var(--vc-laton-texto);
  font-size: var(--vc-t-nota);
  font-weight: var(--vc-peso-fuerte);
  line-height: 1;
}

.vc-empresa__nombre {
  font-size: var(--vc-t-nota);
  font-weight: var(--vc-peso-medio);
  color: var(--vc-tinta-suave);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* En estrecho se queda el logo y se va el nombre: el logo ya dice de quién es
   esto, y el nombre completo se come la barra. */
@media (max-width: 640px) {
  .vc-empresa__nombre { display: none; }
}

.vc-barra__hueco { flex: 1; }

/* ── La barra en un teléfono ──────────────────────────────────────────────
   En 360 px no cabe todo, y lo que se perdía era justo el ancla: el rótulo del
   producto se encogía y el avatar o el chip de la organización se montaban
   encima («VanyCorp · Cu…» tapado; lo vio VanyCuenta al adoptar la marca). El
   orden de lo que cede: el rótulo NO cede; el nombre de la empresa ya se fue
   (arriba); el nombre del usuario se va y queda el avatar; el chip de la
   organización se acorta con puntos suspensivos. */
.vc-barra__marca { flex: none; }
.vc-barra .vc-lockup { white-space: nowrap; }
.vc-org { min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
.vc-usuario { flex: none; }
@media (max-width: 640px) {
  .vc-barra { gap: var(--vc-e-2); padding-left: var(--vc-e-4); padding-right: var(--vc-e-3); }
  .vc-barra__marca { margin-right: 0; }
  .vc-usuario__nombre { display: none; }
  .vc-usuario__abrir { padding-right: var(--vc-e-1); gap: var(--vc-e-1); }
  /* `inline-block` y no `inline-flex`: los puntos suspensivos no salen en el
     texto suelto de una caja flexible. */
  .vc-org { display: inline-block; max-width: 7.5rem; padding: var(--vc-e-1) var(--vc-e-2); }
}
@media (max-width: 400px) {
  /* Muy estrecho: el chip se acorta más (el nombre entero, en su `title`) y
     el divisor se va; el lockup sigue entero. */
  .vc-org { max-width: 4.5rem; }
  /* Con la campana ya no cabe ni el chip corto: se va, y la organización sigue
     dicha en la cabeza del menú de usuario. */
  .vc-barra:has(vc-campana) .vc-org { display: none; }
  .vc-barra__divisor { display: none; }
}

/* Sobre qué organización se está operando. **Solo la operación de plataforma.**
   A quien solo tiene la suya no se le pone aquí: su empresa ya está a la
   izquierda, en `.vc-empresa`, y repetirla es ruido. */
.vc-org {
  display: inline-flex;
  align-items: center;
  gap: var(--vc-e-2);
  padding: var(--vc-e-1) var(--vc-e-3);
  border: 1px solid var(--vc-borde);
  border-radius: var(--vc-radio-lg);
  font-size: var(--vc-t-nota);
  color: var(--vc-tinta-suave);
  white-space: nowrap;
}

/* ── El menú de usuario ───────────────────────────────────────────────────── */
.vc-usuario { position: relative; }

.vc-usuario__abrir {
  display: flex;
  align-items: center;
  gap: var(--vc-e-2);
  padding: var(--vc-e-1) var(--vc-e-3) var(--vc-e-1) var(--vc-e-1);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--vc-radio-lg);
  color: var(--vc-tinta);
  font: inherit;
  cursor: pointer;
}
.vc-usuario__abrir:hover { background: var(--vc-superficie-2); }

.vc-usuario__nombre {
  font-size: var(--vc-t-nota);
  font-weight: var(--vc-peso-medio);
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vc-usuario__flecha {
  color: var(--vc-tinta-tenue);
  transition: transform 0.15s ease;
}
.vc-usuario.abierto .vc-usuario__flecha { transform: rotate(180deg); }

.vc-avatar {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  object-fit: cover;
  background: var(--vc-primario-suave);
  color: var(--vc-primario-2);
  border: 1px solid var(--vc-borde);
  font-size: var(--vc-t-nota);
  font-weight: var(--vc-peso-fuerte);
}

.vc-usuario__menu {
  position: absolute;
  right: 0;
  top: calc(100% + var(--vc-e-2));
  min-width: 250px;
  padding: var(--vc-e-1);
  background: var(--vc-superficie);
  border: 1px solid var(--vc-borde);
  border-radius: var(--vc-radio-md);
  box-shadow: var(--vc-sombra-elevada);
  z-index: 40;
  /* Se anima y se apaga, en vez de quitarse del árbol: así el foco puede volver
     al botón que lo abrió y la transición existe. */
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
}
.vc-usuario.abierto .vc-usuario__menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .vc-usuario__menu,
  .vc-usuario__flecha { transition: none; }
}

.vc-usuario__cabeza {
  display: flex;
  align-items: center;
  gap: var(--vc-e-2);
  padding: var(--vc-e-3) var(--vc-e-3) var(--vc-e-3);
  border-bottom: 1px solid var(--vc-borde);
  margin-bottom: var(--vc-e-1);
}
.vc-usuario__cabeza b,
.vc-usuario__cabeza small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vc-usuario__cabeza b { font-size: var(--vc-t-cuerpo); font-weight: var(--vc-peso-medio); }
.vc-usuario__cabeza small { font-size: var(--vc-t-nota); color: var(--vc-tinta-tenue); }

.vc-usuario__item {
  /* `border-box`: con `width: 100%` y su relleno, en una página sin el
     `box-sizing` global (la de ejemplo sin framework, la ayuda) la entrada se
     salía del menú 7 px y empujaba la página de lado en 360 px (sprint 6). */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--vc-e-2);
  width: 100%;
  padding: var(--vc-e-2) var(--vc-e-3);
  background: transparent;
  border: 0;
  border-radius: var(--vc-radio-sm);
  color: var(--vc-tinta);
  font: inherit;
  font-size: var(--vc-t-nota);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.vc-usuario__item:hover { background: var(--vc-superficie-2); }
.vc-usuario__item svg { color: var(--vc-tinta-tenue); flex: none; }
.vc-usuario__item--salir { color: var(--vc-error); }
.vc-usuario__item--salir svg { color: var(--vc-error); }

.vc-usuario__sep {
  height: 1px;
  background: var(--vc-borde);
  margin: var(--vc-e-1) var(--vc-e-2);
}

/* ── El rail ──────────────────────────────────────────────────────────────── */
.vc-rail {
  flex: none;
  width: 240px;
  padding: var(--vc-e-5) 0;
  background: var(--vc-superficie);
  border-right: 1px solid var(--vc-borde);
}

.vc-rail__grupo {
  padding: var(--vc-e-5) var(--vc-e-4) var(--vc-e-1);
  font-family: var(--vc-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vc-tinta-tenue);
}
.vc-rail__grupo:first-child { padding-top: 0; }

.vc-rail a {
  display: flex;
  align-items: center;
  gap: var(--vc-e-3);
  padding: var(--vc-e-2) var(--vc-e-4);
  border-left: 3px solid transparent;
  color: var(--vc-tinta-suave);
  font-size: var(--vc-t-cuerpo);
  text-decoration: none;
}
.vc-rail a:hover { color: var(--vc-tinta); background: var(--vc-superficie-2); }

/* El filete, no una pastilla rellena: una columna de quince pastillas es una
   escalera de bloques de color. `aria-current` además de la clase, porque el
   color y el filete no existen para quien no los ve. */
.vc-rail a[aria-current='page'],
.vc-rail a.activa {
  color: var(--vc-tinta);
  font-weight: var(--vc-peso-medio);
  border-left-color: var(--vc-primario);
  background: var(--vc-superficie-2);
}

.vc-rail__icono { flex: none; }
.vc-rail__texto { flex: 1; min-width: 0; }

/* La cuenta pendiente de una sección, si la hay. */
.vc-rail__cuenta {
  flex: none;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--vc-e-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--vc-error);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: var(--vc-peso-fuerte);
  font-variant-numeric: tabular-nums;
}

/* En pantalla estrecha el rail se pliega a una tira horizontal: 240 px de menú
   lateral en un teléfono se comen la pantalla. Los grupos desaparecen —no caben
   y no hacen falta cuando todo está a la vista— y el filete pasa abajo. */
@media (max-width: 860px) {
  .vc-marco__cuerpo { flex-direction: column; }
  .vc-rail {
    width: auto;
    padding: var(--vc-e-1) 0;
    display: flex;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--vc-borde);
  }
  .vc-rail__grupo { display: none; }
  .vc-rail a {
    border-left: 0;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
  }
  .vc-rail a[aria-current='page'],
  .vc-rail a.activa {
    border-left-color: transparent;
    border-bottom-color: var(--vc-primario);
  }
  .vc-rail__cuenta { margin-left: var(--vc-e-1); }
}

/* ── El diálogo, y «Mi perfil» ─────────────────────────────────────────────
   Lo usa `marca/perfil.js`, y sirve para cualquier otro que haga falta. Va aquí
   y no en cada producto por lo mismo que la barra: cinco copias de un diálogo
   son cinco diálogos que se separan. */
.vc-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: var(--vc-e-4);
  /* Un velo, no un fondo opaco: se sigue viendo dónde se estaba, y eso ayuda a
     entender que esto es un paso encima y no otra pantalla. */
  background: rgba(15, 22, 24, 0.42);
}

.vc-modal__caja {
  /* Con su relleno DENTRO del ancho: una página sin `box-sizing: border-box` general la
     sacaba del teléfono (lo cazó el banco de capturas con «Mi perfil», sprint 14). */
  box-sizing: border-box;
  width: 100%;
  max-width: 26rem;
  max-height: 90dvh;
  overflow-y: auto;
  padding: var(--vc-e-6);
  background: var(--vc-superficie);
  border: 1px solid var(--vc-borde);
  border-radius: var(--vc-radio-tarjeta);
  box-shadow: var(--vc-sombra-elevada);
  display: flex;
  flex-direction: column;
  gap: var(--vc-e-4);
}

.vc-modal__titulo {
  margin: 0;
  font-size: var(--vc-t-titulo);
  font-weight: var(--vc-peso-fuerte);
  letter-spacing: -0.01em;
}

.vc-modal__sub {
  margin: 0;
  font-size: var(--vc-t-nota);
  color: var(--vc-tinta-tenue);
  text-wrap: pretty;
}

.vc-modal__forma {
  display: flex;
  flex-direction: column;
  gap: var(--vc-e-4);
  margin: 0;
}

.vc-modal__acciones {
  display: flex;
  flex-direction: column;
  gap: var(--vc-e-2);
  margin-top: var(--vc-e-1);
}

/* ── «Mi perfil» completo (sprint 14, P04) ───────────────────────────────────
   La ficha entera de la persona —pintada por `VanyFicha` con la definición que
   manda VanyID— y, debajo, el segundo factor. Una ficha de once campos necesita
   más ancho que un diálogo de tres; en el teléfono ocupa lo que hay. */
/* La columna del modal no puede crecer con lo que lleva dentro: sin esto, una ficha con un
   campo que no encoge ensancha la caja más allá de un teléfono de 360 px. */
.vc-modal:has(.vc-modal__caja--ancha) { grid-template-columns: minmax(0, 1fr); }
.vc-modal__caja--ancha { max-width: 46rem; min-width: 0; }
.vc-perfil__cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--vc-e-5);
  min-width: 0;
}
/* Lo que la persona no puede cambiar llega en lectura con su PORQUÉ en el sitio de la
   ayuda. En cualquier otra ficha la ayuda de un campo en lectura sobra y se esconde
   (`componentes.css`); aquí es justo lo que hay que leer. */
.vc-perfil__ficha vc-campo[data-vc-lectura] .vc-campo__ayuda { display: block; }
.vc-perfil__factor {
  display: flex;
  flex-direction: column;
  gap: var(--vc-e-3);
  padding-top: var(--vc-e-4);
  border-top: 1px solid var(--vc-borde);
}
.vc-perfil__factor[hidden] { display: none; }
.vc-perfil__titulo {
  margin: 0;
  font-size: var(--vc-t-cuerpo);
  font-weight: var(--vc-peso-fuerte);
}
.vc-perfil__nota {
  margin: 0;
  font-size: var(--vc-t-nota);
  color: var(--vc-tinta-tenue);
  text-wrap: pretty;
}
.vc-perfil__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vc-e-2);
}
.vc-perfil__acciones .vc-boton { width: auto; }
/* El QR va siempre oscuro sobre claro, también en el tema oscuro: así lo lee la
   cámara. Es el mismo recuadro que en la página de ingreso de VanyID. */
.vc-perfil__qr {
  align-self: center;
  padding: var(--vc-e-3);
  background: #ffffff;      /* el QR necesita fondo claro también en tema oscuro */
  border: 1px solid var(--vc-borde);
  border-radius: var(--vc-radio-md);
  line-height: 0;
}
.vc-perfil__qr svg { display: block; width: 11rem; height: 11rem; }
.vc-perfil__clave {
  margin: 0;
  font-family: var(--vc-font-mono);
  letter-spacing: 0.08em;
  text-align: center;
  overflow-wrap: anywhere;
}
.vc-perfil__respaldos {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: var(--vc-e-2);
  font-family: var(--vc-font-mono);
}
@media (max-width: 30rem) {
  .vc-modal:has(.vc-modal__caja--ancha) { padding: var(--vc-e-2); }
  .vc-modal__caja--ancha { padding: var(--vc-e-4); }
  .vc-perfil__acciones .vc-boton { width: 100%; }
}

/* El desplegable, con el mismo aire que los campos de texto. */
.vc-entrada__select {
  width: 100%;
  padding: var(--vc-e-3) var(--vc-e-4);
  background: var(--vc-superficie);
  color: var(--vc-tinta);
  border: 1px solid var(--vc-borde);
  border-radius: var(--vc-radio-md);
  font-family: inherit;
  font-size: var(--vc-t-cuerpo);
}
.vc-entrada__select:focus-visible {
  outline: 2px solid var(--vc-primario);
  outline-offset: 2px;
}

/* Un campo deshabilitado tiene que PARECERLO: si no, quien tiene su ficha en el
   directorio de su organización teclea sin que pase nada y no entiende por qué. */
.vc-modal input:disabled,
.vc-modal select:disabled {
  background: var(--vc-superficie-2);
  color: var(--vc-tinta-tenue);
  cursor: not-allowed;
}

/* ── «Tu plan» ───────────────────────────────────────────────────────────────
   Lo usa `marca/plan.js` en cada producto y VanyCuenta para todos juntos. Una
   tarjeta sobria: los números mandan (tabulares, para que se comparen de un
   vistazo) y el color solo aparece cuando algo pide atención. */
.vp-plan {
  display: flex;
  flex-direction: column;
  gap: var(--vc-e-4);
  padding: var(--vc-e-5);
  background: var(--vc-superficie);
  border: 1px solid var(--vc-borde);
  border-radius: var(--vc-radio-lg);
  color: var(--vc-tinta);
  font-size: var(--vc-t-cuerpo);
  min-width: 0;
}
.vp-plan--cargando { color: var(--vc-tinta-tenue); font-size: var(--vc-t-nota); }

.vp-plan__encabezado {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--vc-e-3);
}
.vp-plan__titulos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vp-plan__sobre {
  font-size: var(--vc-t-marca);
  font-weight: var(--vc-peso-fuerte);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vc-tinta-tenue);
}
.vp-plan__titulo {
  margin: 0;
  font-size: var(--vc-t-subtitulo);
  font-weight: var(--vc-peso-fuerte);
  letter-spacing: -0.01em;
}
.vp-plan__estado {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: var(--vc-t-nota);
  font-weight: var(--vc-peso-medio);
  background: var(--vc-superficie-2);
  color: var(--vc-tinta-suave);
}
.vp-plan__estado::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.vp-plan__estado--ok { background: var(--vc-primario-suave); color: var(--vc-primario-2); }
.vp-plan__estado--aviso { background: var(--vc-laton-suave); color: var(--vc-laton-texto); }
.vp-plan__estado--error { background: var(--vc-error-suave); color: var(--vc-error); }

.vp-plan__cuerpo { display: flex; flex-direction: column; gap: var(--vc-e-4); }
.vp-plan__medidor { display: flex; flex-direction: column; gap: 6px; }
.vp-plan__cab {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--vc-e-3);
  flex-wrap: wrap;
}
.vp-plan__etiqueta { color: var(--vc-tinta-suave); font-size: var(--vc-t-nota); }
.vp-plan__cifra {
  font-variant-numeric: tabular-nums;
  font-size: var(--vc-t-nota);
  color: var(--vc-tinta-tenue);
  white-space: nowrap;
}
.vp-plan__cifra strong { color: var(--vc-tinta); font-size: var(--vc-t-cuerpo); font-weight: var(--vc-peso-fuerte); }

.vp-plan__barra {
  display: flex;
  height: 8px;
  border-radius: 999px;
  background: var(--vc-superficie-2);
  overflow: hidden;
}
.vp-plan__relleno {
  display: block;
  height: 100%;
  transition: width 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.vp-plan__relleno--ok { background: var(--vc-primario); }
.vp-plan__relleno--aviso { background: var(--vc-laton); }
.vp-plan__relleno--error { background: var(--vc-error); }
.vp-plan__relleno--otros { background: var(--vc-tinta-tenue); opacity: 0.35; }
@media (prefers-reduced-motion: reduce) { .vp-plan__relleno { transition: none; } }

.vp-plan__leyenda { display: flex; flex-wrap: wrap; gap: 6px var(--vc-e-4); }
.vp-plan__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--vc-t-nota);
  font-variant-numeric: tabular-nums;
  color: var(--vc-tinta-suave);
}
.vp-plan__chip::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--vc-tinta-tenue);
  opacity: 0.35;
}
.vp-plan__chip--este::before { background: var(--vc-primario); opacity: 1; }
.vp-plan__chip--libre::before { background: var(--vc-superficie-2); opacity: 1; border: 1px solid var(--vc-borde); }

.vp-plan__nota { margin: 0; font-size: var(--vc-t-nota); }
.vp-plan__nota--error { color: var(--vc-error); }

.vp-plan__pie {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--vc-e-3);
  flex-wrap: wrap;
  padding-top: var(--vc-e-3);
  border-top: 1px solid var(--vc-borde);
}
.vp-plan__notas { display: flex; flex-direction: column; gap: 2px; font-size: var(--vc-t-nota); color: var(--vc-tinta-tenue); }
.vp-plan__vida { color: var(--vc-tinta-suave); }
.vp-plan__enlace {
  font-size: var(--vc-t-nota);
  font-weight: var(--vc-peso-medio);
  color: var(--vc-primario-2);
  text-decoration: none;
  white-space: nowrap;
  /* 24 px de alto para el dedo (WCAG 2.5.8): relleno, y el margen negativo lo
     devuelve para que el pie no se mueva. */
  display: inline-block;
  box-sizing: border-box;
  min-height: 24px;
  padding-block: 5px;
  margin-block: -5px;
}
.vp-plan__enlace::after { content: ' →'; }
.vp-plan__enlace:hover { text-decoration: underline; }
.vp-plan__enlace:focus-visible { outline: 2px solid var(--vc-primario); outline-offset: 3px; border-radius: 4px; }

/* Varias tarjetas juntas (VanyCuenta): se acomodan solas, de una a tres columnas. */
.vp-planes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: var(--vc-e-4);
  align-items: start;
}