/* comun.css — la plataforma: portal y paneles. Los colores de la marca los pone el tema (Marca::css), en línea.
   Colores por defecto (los de la marca de partida): marino #0d1727, dorado #c78300,
   lienzo cálido, Manrope en títulos e Inter en el texto. */

:root {
  --vx-tinta: #111b2b;
  --vx-marino: #0d1727;
  --vx-marino-suave: #18253a;
  --vx-lienzo: #f6f5f1;
  --vx-blanco: #fff;
  --vx-linea: #e7e5df;
  --vx-linea-suave: #f0eee9;
  --vx-tenue: #6b788d;
  --vx-oro: #b77800;
  --vx-oro-vivo: #c78300;
  --vx-oro-claro: #f4ad27;
  --vx-oro-suave: #fff3dc;
  --vx-sobre-marino: #fff;
  --vx-sobre-oro: #fff;
  --vx-realce: #f4ad27;
  --vx-error: #b42318;
  --vx-error-suave: #fef1f0;
  --vx-bien: #157a45;
  --vx-bien-suave: #eaf7ef;
  --vx-aviso: #9a5b00;
  --vx-raiz: #6d28d9;
  --vx-raiz-suave: #f1eafe;
  --vx-radio: 14px;
  --vx-radio-chico: 10px;
  --vx-sombra: 0 1px 2px rgba(17, 27, 43, .05), 0 10px 28px -22px rgba(17, 27, 43, .45);
  --vx-sombra-alta: 0 24px 50px -28px rgba(17, 27, 43, .55);
  --vx-lateral: 252px;
  --vx-titulos: 'Manrope', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--vx-lienzo); color: var(--vx-tinta);
  font: 14.5px/1.55 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--vx-titulos); letter-spacing: -.02em; line-height: 1.2; }
a { color: var(--vx-oro); }
code { font-size: .84em; padding: 1px 6px; border-radius: 6px; background: var(--vx-linea-suave); overflow-wrap: anywhere; }
[hidden] { display: none !important; }
.vx-es-raiz { --vx-oro: var(--vx-raiz); --vx-oro-vivo: #7c3aed; --vx-oro-claro: #a78bfa; --vx-oro-suave: var(--vx-raiz-suave); }

/* ================================================================ marco */

.vx-lateral {
  position: fixed; inset: 0 auto 0 0; z-index: 30; display: flex; flex-direction: column; width: var(--vx-lateral);
  background: var(--vx-marino); color: color-mix(in srgb, var(--vx-sobre-marino) 72%, transparent); transition: width .2s ease, transform .2s ease;
}
.vx-es-raiz .vx-lateral { background: #160b2e; }
.vx-marca { display: flex; align-items: center; gap: 11px; height: 72px; padding: 0 20px; color: var(--vx-sobre-marino); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--vx-sobre-marino) 8%, transparent); }
.vx-marca__g {
  display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; background: var(--vx-oro-vivo);
  color: var(--vx-sobre-oro); font: 800 1.05rem var(--vx-titulos); box-shadow: 0 9px 20px -10px color-mix(in srgb, var(--vx-oro-vivo) 90%, transparent);
}
.vx-marca__texto { display: grid; gap: 3px; line-height: 1; min-width: 0; }
.vx-marca__texto b { font: 800 .92rem var(--vx-titulos); letter-spacing: .08em; }
.vx-marca__texto small { color: color-mix(in srgb, var(--vx-sobre-marino) 58%, transparent); font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vx-marca--clara { height: auto; padding: 0; border: 0; color: var(--vx-tinta); }
.vx-marca--clara .vx-marca__texto small { color: var(--vx-tenue); }

.vx-lateral__menu { flex: 1; padding: 18px 12px; overflow-y: auto; }
.vx-lateral__grupo { display: block; margin: 0 10px 8px; color: color-mix(in srgb, var(--vx-sobre-marino) 45%, transparent); font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.vx-lateral__enlace {
  display: flex; align-items: center; gap: 12px; width: 100%; margin: 2px 0; padding: 10px 12px; border: 0; border-radius: var(--vx-radio-chico);
  background: none; color: color-mix(in srgb, var(--vx-sobre-marino) 72%, transparent); font: 500 .88rem 'Inter', sans-serif; text-align: left; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.vx-lateral__enlace i { width: 18px; color: color-mix(in srgb, var(--vx-sobre-marino) 52%, transparent); text-align: center; font-size: .95rem; }
.vx-lateral__enlace:hover { background: color-mix(in srgb, var(--vx-sobre-marino) 6%, transparent); color: var(--vx-sobre-marino); }
.vx-lateral__enlace:hover i, .vx-lateral__enlace.is-activo i { color: var(--vx-oro-claro); }
.vx-lateral__enlace.is-activo { background: color-mix(in srgb, var(--vx-realce) 18%, transparent); color: var(--vx-sobre-marino); font-weight: 700; }
.vx-es-raiz .vx-lateral__enlace.is-activo { background: rgba(167, 139, 250, .16); }
/* El menú de todos los módulos: grupos, y cada módulo desplegable con sus secciones. */
.vx-lateral__menu > .vx-lateral__grupo:not(:first-child) { margin-top: 16px; }
.vx-modulo { margin: 1px 0; }
.vx-modulo > summary { list-style: none; }
.vx-modulo > summary::-webkit-details-marker { display: none; }
.vx-modulo__cabeza { font-weight: 600; }
.vx-modulo__flecha { width: auto !important; margin-left: auto; font-size: .62rem !important; transition: transform .15s ease; }
.vx-modulo[open] > summary .vx-modulo__flecha { transform: rotate(180deg); }
.vx-modulo.is-actual > summary { color: var(--vx-sobre-marino); }
.vx-modulo.is-actual > summary > i:first-child { color: var(--vx-oro-claro); }
.vx-modulo__secciones { margin: 2px 0 6px 21px; padding-left: 8px; border-left: 1px solid color-mix(in srgb, var(--vx-sobre-marino) 10%, transparent); }
.vx-modulo__secciones .vx-lateral__enlace { padding: 7px 10px; font-size: .84rem; }
.vx-modulo__secciones .vx-lateral__enlace i { font-size: .82rem; }
.vx-lateral__pie { padding: 12px; border-top: 1px solid color-mix(in srgb, var(--vx-sobre-marino) 8%, transparent); }
.vx-lateral__plegar i { transition: transform .2s ease; }

.vx-marco { min-height: 100vh; }
.vx-con-lateral .vx-marco { margin-left: var(--vx-lateral); transition: margin-left .2s ease; }

/* Plegada: solo iconos. */
@media (min-width: 961px) {
  .vx-plegada { --vx-lateral: 76px; }
  .vx-plegada .vx-marca { justify-content: center; padding: 0; }
  .vx-plegada .vx-marca__texto, .vx-plegada .vx-lateral__enlace span, .vx-plegada .vx-lateral__grupo { display: none; }
  .vx-plegada .vx-lateral__enlace { justify-content: center; padding: 11px 0; }
  .vx-plegada .vx-modulo__secciones, .vx-plegada .vx-modulo__flecha { display: none; }
  .vx-plegada .vx-lateral__menu > .vx-lateral__grupo:not(:first-child) { display: block; height: 1px; margin: 10px 14px; overflow: hidden; background: color-mix(in srgb, var(--vx-sobre-marino) 10%, transparent); color: transparent; }
  .vx-plegada .vx-lateral__plegar i { transform: rotate(180deg); }
}

.vx-cima {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 10px 28px;
  background: color-mix(in srgb, var(--vx-sobre-marino) 92%, transparent); border-bottom: 1px solid var(--vx-linea); backdrop-filter: blur(10px);
}
.vx-cima__menu { display: none; width: 38px; height: 38px; border: 1px solid var(--vx-linea); border-radius: var(--vx-radio-chico); background: var(--vx-blanco); color: var(--vx-tinta); cursor: pointer; }
.vx-migas { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--vx-tenue); font-size: .86rem; }
.vx-migas a { color: var(--vx-tenue); text-decoration: none; white-space: nowrap; }
.vx-migas a:hover { color: var(--vx-oro); }
.vx-migas span { color: var(--vx-tinta); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vx-migas i { font-size: .6rem; color: #b5bdc9; }
.vx-cima__secciones { display: flex; gap: 4px; margin-left: 12px; }
.vx-cima__secciones a { padding: 8px 12px; border-radius: var(--vx-radio-chico); color: var(--vx-tenue); font-weight: 600; font-size: .86rem; text-decoration: none; }
.vx-cima__secciones a:hover, .vx-cima__secciones a.is-activo { background: var(--vx-oro-suave); color: var(--vx-oro); }
.vx-cima__yo { display: flex; align-items: center; gap: 11px; margin-left: auto; }
.vx-cima__yo form { margin: 0; }
.vx-cima__nombre { display: grid; font-weight: 700; font-size: .85rem; line-height: 1.25; }
.vx-cima__nombre small { color: var(--vx-tenue); font-weight: 500; font-size: .74rem; }
.vx-avatar {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: var(--vx-marino); color: var(--vx-sobre-marino); font: 700 .78rem var(--vx-titulos); letter-spacing: .02em;
}
.vx-avatar--grande { width: 56px; height: 56px; font-size: 1.15rem; }
.vx-avatar--raiz { background: var(--vx-raiz); }

.vx-velo { position: fixed; inset: 0; z-index: 25; background: rgba(13, 23, 39, .45); }

@media (max-width: 960px) {
  .vx-con-lateral .vx-marco { margin-left: 0; }
  .vx-lateral { transform: translateX(-100%); box-shadow: var(--vx-sombra-alta); }
  .vx-lateral.is-abierta { transform: none; }
  .vx-lateral__plegar { display: none; }
  .vx-cima { padding: 10px 16px; }
  .vx-cima__menu { display: grid; place-items: center; }
  .vx-cima__nombre, .vx-cima__yo .vx-boton span { display: none; }
}
@media (max-width: 640px) {
  .vx-sin-lateral .vx-cima { flex-wrap: wrap; }
  .vx-cima__secciones { order: 3; flex-basis: 100%; margin: 0; overflow-x: auto; }
  .vx-sin-lateral .vx-marca__texto small { display: none; }
}

/* ================================================================ contenido */

.vx-contenido { max-width: none; margin: 0; padding: 28px clamp(16px, 2.4vw, 36px) 64px; }
@media (max-width: 640px) { .vx-contenido { padding: 20px 16px 48px; } }
.vx-cabecera { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 14px; margin-bottom: 22px; }
.vx-cabecera h1 { margin: 2px 0 4px; font-size: clamp(1.45rem, 2.6vw, 1.85rem); font-weight: 800; }
.vx-cabecera p { margin: 0; color: var(--vx-tenue); max-width: 60ch; }
.vx-eyebrow { color: var(--vx-oro); font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.vx-volver { display: inline-flex; gap: 6px; align-items: center; margin-bottom: 6px; color: var(--vx-tenue); font-size: .84rem; font-weight: 600; text-decoration: none; }
.vx-volver:hover { color: var(--vx-oro); }

.vx-bloque { margin: 0 0 18px; padding: 22px; border: 1px solid var(--vx-linea); border-radius: var(--vx-radio); background: var(--vx-blanco); box-shadow: var(--vx-sombra); }
.vx-bloque > h2, .vx-bloque__titulo { display: flex; gap: 10px; align-items: center; margin: 0 0 4px; font-size: 1rem; font-weight: 800; }
.vx-bloque > h2 i { color: var(--vx-oro); }
.vx-bloque > h2 + .vx-ayuda { margin-bottom: 16px; }
.vx-bloque > h2:not(:has(+ .vx-ayuda)) { margin-bottom: 16px; }
.vx-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; align-items: start; }
.vx-rejilla > .vx-bloque { margin: 0; }
.vx-rejilla > *, .vx-dos > * { min-width: 0; }
.vx-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: stretch; margin-bottom: 18px; }
.vx-dos > .vx-bloque { margin: 0; display: flex; flex-direction: column; }
.vx-dos > .vx-bloque > form { flex: 1; }
/* Un formulario cuyo botón va siempre abajo, alineado con el del bloque de al lado. */
.vx-cuenta__form { display: flex; flex-direction: column; gap: 16px; }
.vx-cuenta__form > .vx-form__pie { margin-top: auto; }
@media (max-width: 900px) { .vx-dos { grid-template-columns: 1fr; } }

/* «Mi cuenta»: el perfil arriba, Datos y Contraseña a la par, lo demás a todo el ancho. */
.vx-perfil { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 22px; }
.vx-perfil__quien { flex: 1; min-width: 220px; }
.vx-perfil__quien h1 { margin: 2px 0 2px; font-size: clamp(1.3rem, 2.4vw, 1.6rem); font-weight: 800; }
.vx-perfil__quien p { margin: 0; color: var(--vx-tenue); overflow-wrap: anywhere; }
.vx-perfil__datos { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; }
.vx-perfil__datos dt { color: var(--vx-tenue); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.vx-perfil__datos dd { margin: 3px 0 0; font-weight: 600; font-size: .9rem; }
.vx-cuenta__fila { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px 20px; }
.vx-cuenta__fila h2 { display: flex; gap: 10px; align-items: center; margin: 0 0 4px; font-size: 1rem; font-weight: 800; }
.vx-cuenta__fila h2 i { color: var(--vx-oro); }
.vx-tarjetas--tres .vx-tarjeta__ir { margin-top: auto; }
.vx-ancho { grid-column: 1 / -1; }

/* ================================================================ formularios */

.vx-form { display: grid; gap: 14px; }
.vx-form--doble { grid-template-columns: 1fr 1fr; }
.vx-form__ancho { grid-column: 1 / -1; }
@media (max-width: 640px) { .vx-form--doble { grid-template-columns: 1fr; } }
.vx-form > label, .vx-form--doble > label, .vx-campo { display: grid; gap: 6px; color: var(--vx-tenue); font-size: .78rem; font-weight: 700; }
.vx-form input:not([type=checkbox]):not([type=radio]), .vx-form select, .vx-form textarea, .vx-filtros input, .vx-filtros select, .vx-selector {
  width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--vx-linea); border-radius: var(--vx-radio-chico); background: var(--vx-blanco);
  font: 500 .92rem 'Inter', sans-serif; color: var(--vx-tinta); transition: border-color .15s ease, box-shadow .15s ease;
}
.vx-form textarea { height: auto; min-height: 84px; padding: 10px 12px; resize: vertical; }
.vx-form :is(input, select, textarea):focus, .vx-filtros :is(input, select):focus, .vx-selector:focus {
  outline: none; border-color: var(--vx-oro-vivo); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vx-oro-vivo) 15%, transparent);
}
.vx-form :is(input, select, textarea):disabled { background: var(--vx-linea-suave); color: var(--vx-tenue); }
.vx-form .is-mal { border-color: var(--vx-error) !important; background: var(--vx-error-suave); }
.vx-form__error { color: var(--vx-error); font-weight: 600; font-size: .76rem; }
.vx-form__pie { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 4px; }
.vx-form__pie--repartido { justify-content: space-between; }
.vx-ayuda { margin: 0; color: var(--vx-tenue); font-size: .86rem; }

/* Casillas: una fila, la casilla a la izquierda. */
.vx-casilla { display: flex !important; align-items: flex-start; gap: 10px; padding: 9px 11px; border: 1px solid var(--vx-linea); border-radius: var(--vx-radio-chico);
  color: var(--vx-tinta) !important; font-weight: 500 !important; font-size: .9rem !important; cursor: pointer; background: var(--vx-blanco); }
.vx-casilla:hover { border-color: #d9d5cc; }
.vx-casilla:has(input:checked) { border-color: var(--vx-oro-vivo); background: var(--vx-oro-suave); }
.vx-casilla input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--vx-oro-vivo); flex: none; }
.vx-casilla small { display: block; color: var(--vx-tenue); font-size: .76rem; font-weight: 500; }
.vx-casillas { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }

/* ================================================================ botones */

.vx-boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px;
  border: 1px solid transparent; border-radius: var(--vx-radio-chico); background: var(--vx-boton, var(--vx-oro-vivo)); color: var(--vx-sobre-boton, var(--vx-sobre-oro));
  font: 700 .86rem 'Inter', sans-serif; text-decoration: none; cursor: pointer; white-space: nowrap; transition: filter .15s ease, background .15s ease;
}
.vx-boton:hover { filter: brightness(1.05); }
.vx-boton:disabled { opacity: .55; cursor: progress; }
.vx-boton--suave { background: var(--vx-oro-suave); color: var(--vx-oro); }
.vx-boton--linea { background: var(--vx-blanco); color: var(--vx-tinta); border-color: var(--vx-linea); }
.vx-boton--linea:hover { border-color: #d6d2c8; background: color-mix(in srgb, var(--vx-linea-suave) 45%, var(--vx-blanco)); filter: none; }
.vx-boton--peligro { background: var(--vx-error); color: #fff; }
.vx-boton--peligro-linea { background: var(--vx-blanco); color: var(--vx-error); border-color: #f2c9c5; }
.vx-boton--mini { height: 32px; padding: 0 11px; font-size: .78rem; border-radius: 8px; }
.vx-boton--icono { width: 34px; height: 34px; padding: 0; }
.vx-boton--ancho { width: 100%; }
.vx-enlace { padding: 0; border: 0; background: none; color: var(--vx-oro); font: 600 .84rem 'Inter', sans-serif; cursor: pointer; }
.vx-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ================================================================ avisos */

.vx-aviso { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--vx-linea); border-radius: var(--vx-radio-chico); background: var(--vx-blanco); font-size: .88rem; }
.vx-aviso i { margin-top: 3px; color: var(--vx-oro); }
.vx-aviso--error { border-color: #f3c7c3; background: var(--vx-error-suave); color: var(--vx-error); }
.vx-aviso--error i { color: var(--vx-error); }
.vx-aviso--bien { border-color: #bfe5cd; background: var(--vx-bien-suave); color: var(--vx-bien); }
.vx-aviso--bien i { color: var(--vx-bien); }

/* ================================================================ etiquetas y cifras */

.vx-etiqueta { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 99px; background: var(--vx-linea-suave); color: #4d5a6d; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.vx-etiqueta::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; }
.vx-etiqueta--sin-punto::before { display: none; }
.vx-etiqueta--bien { background: var(--vx-bien-suave); color: var(--vx-bien); }
.vx-etiqueta--mal { background: var(--vx-error-suave); color: var(--vx-error); }
.vx-etiqueta--oro { background: var(--vx-oro-suave); color: var(--vx-oro); }
.vx-etiqueta--raiz { background: var(--vx-raiz-suave); color: var(--vx-raiz); }
.vx-chips { display: flex; flex-wrap: wrap; gap: 5px; }

.vx-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 20px; }
.vx-cifra { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--vx-linea); border-radius: var(--vx-radio); background: var(--vx-blanco); box-shadow: var(--vx-sombra); }
.vx-cifra__icono { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--vx-oro-suave); color: var(--vx-oro); }
.vx-cifra__icono--bien { background: var(--vx-bien-suave); color: var(--vx-bien); }
.vx-cifra__icono--mal { background: var(--vx-error-suave); color: var(--vx-error); }
.vx-cifra__icono--tenue { background: var(--vx-linea-suave); color: var(--vx-tenue); }
.vx-cifra b { display: block; font: 800 1.45rem/1.1 var(--vx-titulos); }
.vx-cifra span { color: var(--vx-tenue); font-size: .8rem; }

.vx-datos { display: grid; grid-template-columns: max-content 1fr; gap: 9px 18px; margin: 0; font-size: .89rem; }
.vx-datos dt { color: var(--vx-tenue); }
.vx-datos dd { margin: 0; overflow-wrap: anywhere; }

/* ================================================================ tablas y listas */

.vx-filtros { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.vx-filtros > * { flex: 1 1 170px; }
.vx-filtros .vx-buscador { position: relative; flex: 3 1 260px; }
.vx-buscador i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #9aa5b5; font-size: .85rem; pointer-events: none; }
.vx-buscador input { padding-left: 36px !important; }

.vx-tabla-envoltorio { overflow-x: auto; border: 1px solid var(--vx-linea); border-radius: var(--vx-radio); background: var(--vx-blanco); box-shadow: var(--vx-sombra); }
.vx-tabla { width: 100%; border-collapse: collapse; font-size: .875rem; }
.vx-tabla th { padding: 11px 16px; background: color-mix(in srgb, var(--vx-linea-suave) 45%, var(--vx-blanco)); border-bottom: 1px solid var(--vx-linea); color: var(--vx-tenue); font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.vx-tabla td { padding: 12px 16px; border-bottom: 1px solid var(--vx-linea-suave); vertical-align: middle; }
.vx-tabla tbody tr:last-child td { border-bottom: 0; }
.vx-tabla tr.is-pulsable { cursor: pointer; }
.vx-tabla tr.is-pulsable:hover td { background: var(--vx-oro-suave); }
.vx-tabla small { display: block; color: var(--vx-tenue); font-size: .76rem; }
.vx-tabla .vx-col-acciones { width: 1%; text-align: right; white-space: nowrap; }
.vx-tabla--compacta td { padding: 8px 16px; }
.vx-persona { display: flex; align-items: center; gap: 11px; }
.vx-persona .vx-avatar { width: 34px; height: 34px; font-size: .74rem; background: #e9e6df; color: var(--vx-tinta); }
.vx-persona b { display: block; font-weight: 600; }

.vx-vacio { padding: 44px 20px; color: var(--vx-tenue); text-align: center; }
.vx-vacio i { display: block; margin-bottom: 10px; color: #c6ccd5; font-size: 1.8rem; }
.vx-vacio b { display: block; color: var(--vx-tinta); }

.vx-paginacion { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-top: 14px; color: var(--vx-tenue); font-size: .84rem; }
.vx-paginacion__botones { display: flex; gap: 4px; }
.vx-paginacion__botones button { min-width: 34px; height: 34px; padding: 0 9px; border: 1px solid var(--vx-linea); border-radius: 8px; background: var(--vx-blanco); color: var(--vx-tinta); font: 600 .82rem 'Inter', sans-serif; cursor: pointer; }
.vx-paginacion__botones button.is-actual { border-color: var(--vx-oro-vivo); background: var(--vx-oro-suave); color: var(--vx-oro); }
.vx-paginacion__botones button:disabled { opacity: .45; cursor: default; }

/* Menú «⋯» de una fila */
.vx-menu { position: relative; display: inline-block; }
.vx-menu__lista { position: absolute; right: 0; top: calc(100% + 4px); z-index: 15; min-width: 210px; padding: 6px; border: 1px solid var(--vx-linea); border-radius: 12px; background: var(--vx-blanco); box-shadow: var(--vx-sombra-alta); }
.vx-menu__lista button, .vx-menu__lista a { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: none; color: var(--vx-tinta); font: 500 .86rem 'Inter', sans-serif; text-align: left; text-decoration: none; cursor: pointer; }
.vx-menu__lista button:hover, .vx-menu__lista a:hover { background: var(--vx-linea-suave); }
.vx-menu__lista i { width: 16px; color: var(--vx-tenue); }
.vx-menu__lista .is-peligro, .vx-menu__lista .is-peligro i { color: var(--vx-error); }

/* ================================================================ pestañas */

.vx-pestanas { display: flex; gap: 2px; margin: 0 0 18px; border-bottom: 1px solid var(--vx-linea); overflow-x: auto; }
.vx-pestanas button, .vx-pestanas a { display: inline-flex; text-decoration: none; align-items: center; gap: 8px; padding: 11px 14px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--vx-tenue); font: 600 .88rem 'Inter', sans-serif; cursor: pointer; white-space: nowrap; margin-bottom: -1px; }
.vx-pestanas button:hover, .vx-pestanas a:hover { color: var(--vx-tinta); }
.vx-pestanas button.is-activa, .vx-pestanas a.is-activa { border-bottom-color: var(--vx-oro-vivo); color: var(--vx-tinta); }
.vx-pestanas .vx-contador { padding: 0 7px; border-radius: 99px; background: var(--vx-linea-suave); font-size: .72rem; }

/* ================================================================ ficha */

.vx-ficha { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 18px; }
.vx-ficha__texto { flex: 1; min-width: 220px; }
.vx-ficha__texto h1 { margin: 0 0 4px; font-size: clamp(1.35rem, 2.4vw, 1.7rem); font-weight: 800; }
.vx-ficha__texto p { margin: 0; color: var(--vx-tenue); }
.vx-ficha .vx-chips { margin-top: 8px; }

/* ================================================================ permisos (tres estados) */

.vx-servicio { border: 1px solid var(--vx-linea); border-radius: var(--vx-radio); background: var(--vx-blanco); }
.vx-servicio + .vx-servicio { margin-top: 10px; }
.vx-servicio > summary { display: flex; align-items: center; gap: 10px; padding: 13px 16px; cursor: pointer; list-style: none; font-weight: 700; }
.vx-servicio > summary::-webkit-details-marker { display: none; }
.vx-servicio > summary::after { content: '\f078'; margin-left: auto; color: var(--vx-tenue); font: 900 .7rem 'Font Awesome 6 Free'; transition: transform .2s ease; }
.vx-servicio[open] > summary::after { transform: rotate(180deg); }
.vx-servicio__lista { padding: 4px 16px 10px; }
.vx-permiso { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--vx-linea-suave); }
.vx-permiso__texto { flex: 1; min-width: 220px; font-size: .88rem; }
.vx-permiso__texto small { display: block; color: var(--vx-tenue); font-size: .74rem; }

.vx-tres { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--vx-linea-suave); }
.vx-tres label { position: relative; }
.vx-tres input { position: absolute; opacity: 0; pointer-events: none; }
.vx-tres span { display: block; padding: 5px 11px; border-radius: 8px; color: var(--vx-tenue); font-size: .76rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.vx-tres input:checked + span { background: var(--vx-blanco); color: var(--vx-tinta); box-shadow: 0 1px 3px rgba(17, 27, 43, .12); }
.vx-tres input[value=conceder]:checked + span { color: var(--vx-bien); }
.vx-tres input[value=retirar]:checked + span { color: var(--vx-error); }
.vx-tres input:focus-visible + span { outline: 2px solid var(--vx-oro-vivo); }
.vx-tres input:disabled + span { cursor: default; }

/* ================================================================ ventana */

.vx-ventana { width: min(580px, calc(100% - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 0; border-radius: 18px; box-shadow: var(--vx-sombra-alta); }
.vx-ventana--ancha { width: min(820px, calc(100% - 32px)); }
.vx-ventana::backdrop { background: rgba(13, 23, 39, .5); backdrop-filter: blur(2px); }
.vx-ventana > form, .vx-ventana > div { padding: 24px; }
.vx-ventana h2 { margin: 0 0 6px; font-size: 1.15rem; font-weight: 800; }
.vx-ventana__cuerpo { max-height: 52vh; overflow-y: auto; margin: 0 -24px; padding: 0 24px; }

/* ================================================================ tarjetas (portal, raíz) */

.vx-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
/* El inicio del portal: los módulos de tres en tres (dos en tableta, uno en el móvil). */
.vx-tarjetas--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vx-tarjetas--tres .vx-eyebrow { margin-top: 4px; }
@media (max-width: 1100px) { .vx-tarjetas--tres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .vx-tarjetas--tres { grid-template-columns: 1fr; } }
.vx-tarjeta {
  position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 180px; padding: 22px;
  border: 1px solid var(--vx-linea); border-radius: var(--vx-radio); background: var(--vx-blanco); color: inherit; text-decoration: none;
  box-shadow: var(--vx-sombra); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
a.vx-tarjeta:hover, a.vx-tarjeta:focus-visible { transform: translateY(-3px); border-color: var(--vx-oro-claro); box-shadow: var(--vx-sombra-alta); outline: none; }
.vx-tarjeta :is(h2, h3) { margin: 8px 0 0; font-size: 1.08rem; font-weight: 800; }
.vx-tarjeta p { margin: 0; color: var(--vx-tenue); font-size: .87rem; }
.vx-tarjeta__icono { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: var(--vx-oro-suave); color: var(--vx-oro); font-size: 1.15rem; }
.vx-tarjeta__ir { display: inline-flex; gap: 6px; align-items: center; margin-top: auto; padding-top: 6px; color: var(--vx-oro); font-weight: 700; font-size: .84rem; }
a.vx-tarjeta:hover .vx-tarjeta__ir i { transform: translateX(3px); }
.vx-tarjeta__ir i { transition: transform .18s ease; }
.vx-tarjeta.is-apagada { opacity: .6; box-shadow: none; }

/* El inicio del portal: la cabecera sobre la escena de la marca, las cifras del día, los paneles por grupo y la cuenta. */
.vx-inicio__cabecera { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 22px; padding: 34px 34px 30px; border-radius: 22px;
  min-height: 190px; }
.vx-inicio__saludo { max-width: 60ch; }
.vx-inicio__fecha { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 99px; background: color-mix(in srgb, var(--vx-sobre-marino) 14%, transparent);
  font-size: .78rem; font-weight: 700; }
.vx-inicio__fecha i { color: var(--vx-oro-claro); }
.vx-inicio__cabecera h1 { margin: 14px 0 6px; font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; }
.vx-inicio__cabecera p { margin: 0; color: color-mix(in srgb, var(--vx-sobre-marino) 84%, transparent); }
.vx-inicio__cuenta { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid color-mix(in srgb, var(--vx-sobre-marino) 30%, transparent); border-radius: 12px;
  background: color-mix(in srgb, var(--vx-sobre-marino) 10%, transparent); color: inherit; font-weight: 700; text-decoration: none; backdrop-filter: blur(6px); }
.vx-inicio__cuenta:hover { background: color-mix(in srgb, var(--vx-sobre-marino) 20%, transparent); }
.vx-inicio__rejilla { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.vx-inicio__principal { display: grid; gap: 26px; min-width: 0; }
.vx-inicio__titulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 12px; }
.vx-inicio__titulo h2 { margin: 0; font-size: 1.05rem; font-weight: 800; }
.vx-inicio__titulo .vx-ayuda { font-size: .8rem; }
.vx-inicio__lado { position: sticky; top: 84px; display: grid; gap: 16px; }
@media (max-width: 1100px) { .vx-inicio__rejilla { grid-template-columns: minmax(0, 1fr); } .vx-inicio__lado { position: static; } }
@media (max-width: 640px) { .vx-inicio__cabecera { padding: 24px 20px; border-radius: 18px; min-height: 0; } }

/* Las cifras del día. */
.vx-indicadores { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 12px; }
.vx-indicador { position: relative; display: grid; gap: 4px; min-width: 0; padding: 16px 18px; border: 1px solid var(--vx-linea); border-radius: var(--vx-radio); background: var(--vx-blanco);
  box-shadow: var(--vx-sombra); color: inherit; text-decoration: none; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
a.vx-indicador:hover, a.vx-indicador:focus-visible { transform: translateY(-2px); border-color: var(--vx-oro-claro); box-shadow: var(--vx-sombra-alta); outline: none; }
.vx-indicador__titulo { display: flex; align-items: center; gap: 8px; padding-right: 18px; color: var(--vx-tenue); font-size: .8rem; font-weight: 700; }
.vx-indicador__titulo i { color: var(--vx-oro); }
.vx-indicador__valor { font: 800 1.6rem/1.2 var(--vx-titulos); overflow-wrap: anywhere; }
.vx-indicador__valor small { color: var(--vx-tenue); font-size: .8rem; font-weight: 700; }
.vx-indicador > small { color: var(--vx-tenue); font-size: .8rem; }
.vx-indicador__ir { position: absolute; top: 18px; right: 16px; color: var(--vx-tenue); font-size: .8rem; transition: transform .18s ease; }
a.vx-indicador:hover .vx-indicador__ir { transform: translateX(3px); color: var(--vx-oro); }
.vx-indicador--bien { border-left: 4px solid var(--vx-bien); }
.vx-indicador--aviso { border-left: 4px solid var(--vx-oro-claro); }
.vx-indicador--mal { border-left: 4px solid var(--vx-error); }
.vx-indicador.is-cargando span, .vx-indicador.is-cargando b, .vx-indicador.is-cargando small { display: block; height: 12px; border-radius: 6px;
  background: linear-gradient(90deg, var(--vx-linea-suave), var(--vx-linea), var(--vx-linea-suave)); background-size: 200% 100%; animation: vx-brillo 1.2s linear infinite; }
.vx-indicador.is-cargando span { width: 55%; }
.vx-indicador.is-cargando b { width: 70%; height: 26px; }
.vx-indicador.is-cargando small { width: 40%; }
@keyframes vx-brillo { to { background-position: -200% 0; } }

/* La cuenta, en el lateral del inicio. */
.vx-ficha-cuenta { display: grid; gap: 14px; min-width: 0; }
.vx-inicio__lado { min-width: 0; }
.vx-ficha-cuenta__cabeza { display: flex; align-items: center; gap: 12px; min-width: 0; }
.vx-ficha-cuenta__cabeza > div { display: grid; min-width: 0; }
.vx-ficha-cuenta__cabeza b, .vx-ficha-cuenta__cabeza small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vx-ficha-cuenta__cabeza small { color: var(--vx-tenue); }
.vx-ficha-cuenta__iniciales { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--vx-marino); color: var(--vx-sobre-marino);
  font: 800 1rem var(--vx-titulos); }
.vx-ficha-cuenta__roles { display: flex; flex-wrap: wrap; gap: 6px; }
.vx-ficha-cuenta__roles:empty { display: none; }
.vx-ficha-cuenta__datos { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; margin: 0; font-size: .86rem; }
.vx-ficha-cuenta__datos dt { color: var(--vx-tenue); }
.vx-ficha-cuenta__datos dd { margin: 0; text-align: right; font-weight: 600; }
.vx-ficha-cuenta .vx-aviso { margin: 0; }
.vx-ficha-cuenta .vx-boton { justify-content: center; height: auto; min-height: 40px; white-space: normal; text-align: center; }

.vx-portal { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
@media (max-width: 1000px) { .vx-portal { grid-template-columns: 1fr; } }
.vx-portal h2.vx-seccion { margin: 0 0 12px; font-size: 1rem; font-weight: 800; }

/* ================================================================ escena: el fondo de marca */
/* La imagen de la entrada (Marca › imagen_entrada) bajo un velo del primario; sin imagen, un fondo con los colores
   de la marca. La pone Frontal::escena() en el atributo style (--escena-imagen). El texto encima, en sobre-primario. */

.vx-escena { position: relative; isolation: isolate; overflow: hidden; background: var(--vx-marino); color: var(--vx-sobre-marino); }
.vx-escena::before { content: ''; position: absolute; inset: 0; z-index: -2; background: var(--escena-imagen, none) center / cover no-repeat; }
.vx-escena::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(165deg, color-mix(in srgb, var(--vx-marino) 40%, transparent) 0%, color-mix(in srgb, var(--vx-marino) 78%, transparent) 52%,
    color-mix(in srgb, var(--vx-marino) 95%, transparent) 100%);
}
.vx-escena--sin-imagen::before {
  background: radial-gradient(55% 50% at 88% 8%, color-mix(in srgb, var(--vx-oro-claro) 42%, transparent), transparent 72%),
    radial-gradient(48% 42% at 0% 100%, color-mix(in srgb, var(--vx-oro-claro) 26%, transparent), transparent 72%),
    linear-gradient(140deg, var(--vx-marino-suave), var(--vx-marino) 62%);
}
.vx-escena--sin-imagen::after {
  background-image: radial-gradient(color-mix(in srgb, var(--vx-sobre-marino) 16%, transparent) 1px, transparent 1.5px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(160deg, #000, transparent 75%); mask-image: linear-gradient(160deg, #000, transparent 75%);
}
/* El entorno raíz conserva su violeta, para no confundirlo con el portal. */
.vx-es-raiz .vx-escena { --vx-marino: #1c0f36; --vx-marino-suave: #33186b; --vx-sobre-marino: #fff; --vx-oro-claro: #a78bfa; }

/* ================================================================ entrada */

.vx-entrada { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(420px, .9fr); background: var(--vx-lienzo); }
.vx-entrada__marca { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: 44px clamp(28px, 6vw, 88px) 56px; }
.vx-entrada__firma { display: flex; align-items: center; gap: 12px; font: 800 1.15rem var(--vx-titulos); }
.vx-entrada__firma .vx-logo { max-height: 56px; max-width: 210px; }
.vx-entrada__inicial { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--vx-oro-claro); color: var(--vx-marino);
  font: 800 1.25rem var(--vx-titulos); }
.vx-es-raiz .vx-entrada__inicial { color: #fff; }
.vx-entrada__texto { max-width: 34rem; }
.vx-entrada__etiqueta { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid color-mix(in srgb, var(--vx-sobre-marino) 24%, transparent);
  border-radius: 99px; background: color-mix(in srgb, var(--vx-sobre-marino) 12%, transparent); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.vx-entrada__texto h1 { margin: 16px 0 12px; font-size: clamp(2rem, 3.6vw, 3.1rem); font-weight: 800; line-height: 1.08; text-wrap: balance; }
.vx-entrada__texto p { margin: 0; font-size: 1.05rem; line-height: 1.6; color: color-mix(in srgb, var(--vx-sobre-marino) 84%, transparent); }
.vx-entrada__ventajas { display: grid; gap: 12px; margin: 30px 0 0; padding: 0; list-style: none; }
.vx-entrada__ventajas li { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.vx-entrada__ventajas i { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 11px;
  background: color-mix(in srgb, var(--vx-sobre-marino) 13%, transparent); color: var(--vx-oro-claro); }
.vx-logo { width: auto; max-width: 180px; max-height: 72px; height: auto; object-fit: contain; }
.vx-logo--texto { display: inline-block; max-height: none; font: 800 1.6rem var(--vx-titulos); color: var(--vx-sobre-marino); }
.vx-marca__logo { width: 36px; height: 36px; object-fit: contain; border-radius: 9px; flex: none; }

.vx-entrada__lado { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 22px; min-width: 0; padding: 40px 24px; }
.vx-entrada__tarjeta { width: min(430px, 100%); padding: 34px 32px 30px; border: 1px solid var(--vx-linea); border-radius: 22px; background: var(--vx-blanco);
  box-shadow: var(--vx-sombra-alta); }
.vx-entrada__tarjeta h2 { margin: 0 0 4px; font-size: 1.65rem; font-weight: 800; }
.vx-entrada__tarjeta .vx-entrada__intro { margin: 0 0 22px; color: var(--vx-tenue); }
.vx-entrada__icono { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 16px; border-radius: 15px; background: var(--vx-oro-suave); color: var(--vx-oro); font-size: 1.25rem; }
.vx-entrada .vx-form .vx-boton { height: 48px; justify-content: center; }
.vx-entrada__pie { margin: 0; color: var(--vx-tenue); font-size: .8rem; text-align: center; }
.vx-entrada__otra { margin: 4px 0 0; color: var(--vx-tenue); font-size: .84rem; text-align: center; }

/* Los pasos (entrar → verificar; activar: contraseña → segundo paso → listo). */
.vx-pasos { display: flex; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }
.vx-pasos li { display: flex; flex: 1; flex-direction: column; gap: 7px; min-width: 0; color: var(--vx-tenue); font-size: .74rem; font-weight: 700; }
.vx-pasos li::before { content: ''; height: 4px; border-radius: 99px; background: var(--vx-linea); transition: background .25s ease; }
.vx-pasos li.is-hecho::before, .vx-pasos li.is-actual::before { background: var(--vx-boton); }
.vx-pasos li.is-actual { color: var(--vx-tinta); }

/* La contraseña: verla y el aviso de mayúsculas. */
.vx-clave { position: relative; display: block; }
.vx-form .vx-clave input { width: 100%; padding-right: 48px; }
.vx-clave__ver { position: absolute; top: 50%; right: 5px; display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 9px; background: none;
  color: var(--vx-tenue); transform: translateY(-50%); cursor: pointer; }
.vx-clave__ver:hover, .vx-clave__ver:focus-visible { background: var(--vx-linea-suave); color: var(--vx-tinta); outline: none; }
.vx-mayusculas { color: var(--vx-aviso); font-size: .78rem; font-weight: 600; }

/* El código en seis casillas (el valor, en el campo oculto «codigo»). */
.vx-codigo-campo { display: grid; gap: 8px; }
.vx-codigo-campo__rotulo { color: var(--vx-tenue); font-size: .78rem; font-weight: 700; }
.vx-codigo { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.vx-form .vx-codigo input { width: 100%; min-width: 0; height: 56px; padding: 0; border-radius: 12px; text-align: center; font: 800 1.45rem var(--vx-titulos); caret-color: var(--vx-boton); }
.vx-form .vx-codigo input:not(:placeholder-shown), .vx-codigo input.is-lleno { border-color: color-mix(in srgb, var(--vx-boton) 55%, var(--vx-linea)); }

/* Los requisitos de la contraseña, que se van cumpliendo. */
.vx-requisitos { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; color: var(--vx-tenue); font-size: .82rem; }
.vx-requisitos li { display: flex; align-items: center; gap: 8px; }
.vx-requisitos li i { width: 16px; text-align: center; }
.vx-requisitos li.is-cumple { color: var(--vx-bien); }

@media (max-width: 900px) {
  .vx-entrada { grid-template-columns: minmax(0, 1fr); }
  .vx-entrada__marca { gap: 22px; padding: 24px 20px 30px; }
  .vx-entrada__texto h1 { margin-top: 10px; font-size: 1.7rem; }
  .vx-entrada__texto p { font-size: .95rem; }
  .vx-entrada__ventajas { display: none; }
  .vx-entrada__lado { justify-content: flex-start; padding: 22px 16px 32px; }
  .vx-entrada__tarjeta { padding: 26px 20px 22px; border-radius: 18px; }
}
@media (max-width: 380px) { .vx-codigo { gap: 5px; } .vx-form .vx-codigo input { height: 48px; font-size: 1.2rem; } }

/* ================================================================ sesiones, QR, registro */

.vx-sesiones { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; }
.vx-sesion { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid var(--vx-linea); border-radius: 12px; background: var(--vx-blanco); }
.vx-sesion > i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--vx-linea-suave); color: var(--vx-tenue); }
.vx-sesion div { flex: 1; min-width: 0; font-size: .88rem; }
.vx-sesion small { display: block; color: var(--vx-tenue); font-size: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vx-sesion.is-actual { border-color: var(--vx-oro-claro); background: var(--vx-oro-suave); }
.vx-qr { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; margin-top: 12px; }
.vx-qr img { border: 1px solid var(--vx-linea); border-radius: 12px; background: var(--vx-blanco); }

.vx-registro td:first-child { white-space: nowrap; color: var(--vx-tenue); font-variant-numeric: tabular-nums; }
.vx-registro .vx-accion { font-weight: 600; }
.vx-registro .vx-punto { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--vx-bien); vertical-align: middle; }
.vx-registro .vx-punto--FALLO, .vx-registro .vx-punto--DENEGADO { background: var(--vx-error); }
.vx-detalle td { background: color-mix(in srgb, var(--vx-linea-suave) 45%, var(--vx-blanco)); }
.vx-cambios { display: grid; gap: 4px; margin: 10px 0 0; font-size: .82rem; }
.vx-cambios div { display: grid; grid-template-columns: 150px 1fr 1fr; gap: 10px; padding: 7px 10px; border-radius: 8px; background: var(--vx-blanco); border: 1px solid var(--vx-linea-suave); }
.vx-cambios del { color: var(--vx-error); text-decoration: line-through; overflow-wrap: anywhere; }
.vx-cambios ins { color: var(--vx-bien); text-decoration: none; overflow-wrap: anywhere; }

/* ================================================================ tostadas */

.vx-tostadas { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: grid; gap: 10px; width: min(380px, calc(100% - 36px)); pointer-events: none; }
@keyframes vx-entra { from { opacity: 0; transform: translateY(8px); } }

/* ================================================================ pantallas estrechas */

.vx-filtros input[type=date] { flex: 1 1 140px; }
@media (max-width: 760px) {
  /* Las columnas secundarias se ocultan: queda quién, su estado y las acciones. */
  .vx-tabla .vx-secundaria { display: none; }
  .vx-tabla th, .vx-tabla td { padding-left: 10px; padding-right: 10px; }
  .vx-persona { gap: 9px; }
  .vx-persona small, .vx-persona b { overflow-wrap: anywhere; }
  .vx-persona .vx-avatar { width: 30px; height: 30px; }
  .vx-cabecera { align-items: flex-start; }
  .vx-cifras { grid-template-columns: 1fr 1fr; gap: 10px; }
  .vx-cifra { padding: 12px; gap: 10px; }
  .vx-cifra__icono { width: 34px; height: 34px; }
  .vx-ficha .vx-acciones { width: 100%; }
  .vx-cambios div { grid-template-columns: 1fr; }
}

/* ================================================================ maestro y detalle */

.vx-maestro { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 960px) { .vx-maestro { grid-template-columns: 1fr; } }
.vx-maestro > .vx-bloque { margin: 0; }
.vx-arbol { display: grid; gap: 6px; max-height: calc(100vh - 230px); overflow-y: auto; }
@media (max-width: 960px) { .vx-arbol { max-height: 360px; } }
.vx-arbol details > summary { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 9px; cursor: pointer; list-style: none; font-weight: 700; font-size: .86rem; }
.vx-arbol details > summary::-webkit-details-marker { display: none; }
.vx-arbol details > summary::before { content: '\f054'; font: 900 .6rem 'Font Awesome 6 Free'; color: var(--vx-tenue); transition: transform .15s ease; }
.vx-arbol details[open] > summary::before { transform: rotate(90deg); }
.vx-arbol details details { margin-left: 12px; }
.vx-arbol summary:hover { background: var(--vx-linea-suave); }
.vx-arbol__acciones { margin-left: auto; display: flex; gap: 2px; }
.vx-arbol__acciones button { padding: 3px 6px; border: 0; border-radius: 6px; background: none; color: var(--vx-tenue); cursor: pointer; font-size: .75rem; }
.vx-arbol__acciones button:hover { background: var(--vx-blanco); color: var(--vx-oro); }
.vx-arbol__hoja { display: flex; align-items: center; gap: 9px; width: 100%; margin: 1px 0 1px 26px; padding: 7px 10px; border: 0; border-radius: 9px; background: none;
  color: var(--vx-tinta); font: 500 .86rem 'Inter', sans-serif; text-align: left; cursor: pointer; width: calc(100% - 26px); }
.vx-arbol__hoja:hover { background: var(--vx-linea-suave); }
.vx-arbol__hoja.is-activa { background: var(--vx-oro-suave); color: var(--vx-oro); font-weight: 700; }
.vx-arbol__hoja small { margin-left: auto; color: var(--vx-tenue); font-variant-numeric: tabular-nums; }
.vx-inactivo { opacity: .55; }
.vx-codigo { font: 700 .86rem ui-monospace, 'SFMono-Regular', Menlo, monospace; letter-spacing: .04em; }

/* ================================================================ tarifario */

.vx-precio { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.vx-precio--sin { color: var(--vx-tenue); font-weight: 500; }
.vx-programado { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--vx-oro-suave); color: var(--vx-aviso); font-size: .7rem; font-weight: 700; white-space: nowrap; }
.vx-boton-precio { padding: 4px 8px; margin: -4px -8px; border: 0; border-radius: 8px; background: transparent; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.vx-boton-precio:hover { background: var(--vx-oro-suave); }
.vx-boton-precio:focus-visible { outline: 2px solid var(--vx-oro-vivo); }
.vx-matriz-caja { max-height: 72vh; overflow: auto; border: 1px solid var(--vx-linea); border-radius: var(--vx-radio); background: var(--vx-blanco); box-shadow: var(--vx-sombra); }
.vx-matriz { border-collapse: separate; border-spacing: 0; font-size: .8rem; }
.vx-matriz th, .vx-matriz td { padding: 0; border-right: 1px solid var(--vx-linea-suave); border-bottom: 1px solid var(--vx-linea-suave); text-align: center; }
.vx-matriz thead th { position: sticky; top: 0; z-index: 2; height: 128px; padding: 8px 4px; background: color-mix(in srgb, var(--vx-linea-suave) 45%, var(--vx-blanco)); color: var(--vx-tenue); font-size: .7rem; font-weight: 700; white-space: nowrap; writing-mode: vertical-rl; transform: rotate(180deg); }
.vx-matriz thead th:first-child { left: 0; z-index: 3; height: auto; writing-mode: horizontal-tb; transform: none; text-align: left; padding: 8px 10px; }
.vx-matriz tbody th { position: sticky; left: 0; z-index: 1; padding: 6px 10px; background: color-mix(in srgb, var(--vx-linea-suave) 45%, var(--vx-blanco)); font-weight: 600; text-align: left; white-space: nowrap; }
.vx-matriz small { color: var(--vx-tenue); font-weight: 500; }
.vx-celda { display: block; width: 100%; min-width: 66px; padding: 9px 6px; border: 0; background: transparent; color: var(--vx-tinta); font: inherit; font-variant-numeric: tabular-nums; cursor: pointer; }
.vx-celda:hover { background: var(--vx-oro-suave); }
.vx-celda:focus-visible { outline: 2px solid var(--vx-oro-vivo); outline-offset: -2px; }
.vx-celda--vacia { color: #c6ccd5; }
.vx-celda--simetrica { color: var(--vx-tenue); font-style: italic; }
.vx-celda--diagonal { background: color-mix(in srgb, var(--vx-linea-suave) 45%, var(--vx-blanco)); }
.vx-celda.is-programado::after { content: '•'; margin-left: 3px; color: var(--vx-oro-vivo); }
.vx-leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; color: var(--vx-tenue); font-size: .78rem; }
.vx-leyenda i { font-style: italic; }
.vx-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--vx-linea); font-family: var(--vx-titulos); font-size: 1.25rem; font-weight: 800; }
.vx-total small { color: var(--vx-tenue); font: 500 .8rem 'Inter', system-ui, sans-serif; }
.vx-datos dd.vx-precio { text-align: right; }

/* ================================================================ editor de contenido */

.ed-grupo { grid-column: 1 / -1; margin: 6px 0 4px; padding: 16px 18px 18px; border: 1px solid var(--vx-linea); border-radius: var(--vx-radio-chico); background: var(--vx-blanco); }
.ed-grupo > legend { padding: 0 8px; font-family: var(--vx-titulos); font-size: .95rem; font-weight: 800; }
.ed-grupo .ed-grupo { background: color-mix(in srgb, var(--vx-linea-suave) 45%, var(--vx-blanco)); }
.ed-cuerpo { display: grid; gap: 14px; }
.ed-campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; color: var(--vx-tinta); font-size: .82rem; font-weight: 700; }
.ed-campo.vx-casilla { flex-direction: row; align-items: center; }
.ed-campo.is-mal input, .ed-campo.is-mal textarea, .ed-campo.is-mal .ed-html, .ed-lista.is-mal, .ed-elemento.is-mal { border-color: var(--vx-error); }
.ed-lista { grid-column: 1 / -1; padding: 12px; border: 1px dashed var(--vx-linea); border-radius: var(--vx-radio-chico); }
.ed-lista__cabeza { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ed-lista__cabeza small { color: var(--vx-tenue); }
.ed-lista__cabeza button { margin-left: auto; }
.ed-elementos { display: grid; gap: 10px; }
.ed-elemento { border: 1px solid var(--vx-linea); border-radius: var(--vx-radio-chico); background: color-mix(in srgb, var(--vx-linea-suave) 45%, var(--vx-blanco)); }
.ed-elemento > .ed-cuerpo { padding: 12px; }
.ed-elemento__barra { display: flex; align-items: center; gap: 4px; padding: 4px 8px; border-bottom: 1px solid var(--vx-linea-suave); }
.ed-elemento__barra button { width: 28px; height: 28px; border: 0; border-radius: 6px; background: transparent; color: var(--vx-tenue); cursor: pointer; }
.ed-elemento__barra button:hover { background: var(--vx-blanco); color: var(--vx-tinta); }
.ed-elemento__barra button[data-quitar]:hover { color: var(--vx-error); }
.ed-elemento__numero { margin-right: auto; color: var(--vx-tenue); font-size: .75rem; font-weight: 800; }
.ed-html { border: 1px solid var(--vx-linea); border-radius: var(--vx-radio-chico); background: var(--vx-blanco); }
.ed-html__barra { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-bottom: 1px solid var(--vx-linea-suave); }
.ed-html__barra button { width: 32px; height: 30px; border: 0; border-radius: 6px; background: transparent; color: var(--vx-tinta); cursor: pointer; }
.ed-html__barra button:hover { background: var(--vx-oro-suave); }
.ed-html__texto { min-height: 110px; padding: 10px 12px; color: var(--vx-tinta); font-size: .95rem; font-weight: 400; line-height: 1.55; outline: none; overflow-wrap: anywhere; }
.ed-html--corto .ed-html__texto { min-height: 0; }
.ed-html__texto img { max-width: 220px; height: auto; border-radius: 8px; }
.ed-imagen { display: flex; align-items: center; gap: 12px; }
.ed-imagen__vista { display: grid; place-items: center; width: 120px; height: 80px; overflow: hidden; border: 1px solid var(--vx-linea); border-radius: 8px; background: #f3f1ec; }
.ed-imagen__vista img { width: 100%; height: 100%; object-fit: cover; }
.ed-imagen__vacia { color: #c6ccd5; font-size: 1.4rem; }
.ed-imagen__ruta { padding: 4px; color: var(--vx-tenue); font: 500 .7rem/1.3 monospace; word-break: break-all; }
.ed-imagen__botones { display: flex; gap: 6px; }
.ed-icono { display: flex; align-items: center; gap: 10px; }
.ed-icono > i { width: 22px; color: var(--vx-oro); text-align: center; }
.ed-icono input { flex: 1; }
.ed-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; max-height: 55vh; overflow: auto; }
.ed-galeria__item { display: flex; flex-direction: column; gap: 4px; padding: 6px; border: 1px solid var(--vx-linea); border-radius: 10px; background: var(--vx-blanco); cursor: pointer; text-align: left; }
.ed-galeria__item:hover { border-color: var(--vx-oro-vivo); }
.ed-galeria__item img { width: 100%; height: 90px; object-fit: cover; border-radius: 6px; background: #f3f1ec; }
.ed-galeria__item span { overflow: hidden; color: var(--vx-tenue); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.ed-par { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--vx-linea-suave); }
.ed-par__original { color: var(--vx-tinta); font-size: .86rem; }
.ed-par__original small { display: block; margin-bottom: 4px; color: var(--vx-tenue); font: 500 .7rem monospace; }
.ed-guardar { position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; padding: 12px 0; background: linear-gradient(transparent, var(--vx-lienzo) 30%); }
@media (max-width: 640px) {
  .ed-par { grid-template-columns: 1fr; }
  .ed-grupo { padding: 12px; }
}
.vx-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vx-sugerencias { list-style: none; margin: -6px 0 0; padding: 0; border: 1px solid var(--vx-linea); border-radius: 10px; max-height: 240px; overflow: auto; background: var(--vx-blanco); }
.vx-sugerencias li { padding: 8px 10px; cursor: pointer; border-bottom: 1px solid var(--vx-linea-suave); }
.vx-sugerencias li:hover, .vx-sugerencias li:focus { background: #fff8e6; }
.vx-sugerencias small { color: var(--vx-tenue); }
/* Una línea de tiempo (el registro de un pago…): puntos sobre una raya. */
.vx-linea-tiempo { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--vx-linea); }
.vx-linea-tiempo li { position: relative; padding: 0 0 14px 12px; }
.vx-linea-tiempo li::before { content: ""; position: absolute; left: -25px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--vx-blanco); border: 3px solid var(--vx-oro-vivo, #c78300); }
.vx-linea-tiempo b { display: block; }
.vx-linea-tiempo small { display: block; color: var(--vx-tenue); overflow-wrap: anywhere; }

/* ================================================================ diseño (2026-10-19)
   Una capa común a todos los paneles: campos con un solo diseño en cualquier
   sitio, transiciones y respuesta al tacto, ventanas y avisos que entran,
   pestañas con su raya que se desliza, esqueletos de carga y el pie de las
   listas (cuántas por página). Lo de aquí va con :where() cuando es un
   «por defecto», para que lo propio de cada panel siga mandando. */

:root {
  --vx-curva: cubic-bezier(.2, .8, .2, 1);
  --vx-anillo: 0 0 0 3px color-mix(in srgb, var(--vx-oro-vivo) 22%, transparent);
  --vx-sombra-boton: 0 1px 2px rgba(17, 27, 43, .08), inset 0 1px 0 color-mix(in srgb, var(--vx-sobre-marino) 16%, transparent);
}
.vx-es-raiz { --vx-anillo: 0 0 0 3px rgba(124, 58, 237, .22); }
::selection { background: rgba(244, 173, 39, .3); }
.vx-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- La página entra suave */
@keyframes vx-aparece { from { opacity: 0; transform: translateY(6px); } }
.vx-contenido { animation: vx-aparece .32s var(--vx-curva) both; }

/* --- El menú lateral: scroll fino y discreto; los módulos se despliegan con un pequeño movimiento */
.vx-lateral__menu { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--vx-sobre-marino) 12%, transparent) transparent; overscroll-behavior: contain; }
.vx-lateral__menu:hover { scrollbar-color: color-mix(in srgb, var(--vx-sobre-marino) 26%, transparent) transparent; }
.vx-lateral__menu::-webkit-scrollbar { width: 6px; }
.vx-lateral__menu::-webkit-scrollbar-track { background: transparent; }
.vx-lateral__menu::-webkit-scrollbar-thumb { border-radius: 99px; background: color-mix(in srgb, var(--vx-sobre-marino) 12%, transparent); }
.vx-lateral__menu:hover::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--vx-sobre-marino) 26%, transparent); }
.vx-lateral__enlace { transition: background .15s ease, color .15s ease; }
.vx-lateral__enlace:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--vx-oro-claro); }
@keyframes vx-despliega { from { opacity: 0; transform: translateY(-4px); } }
.vx-modulo[open] > .vx-modulo__secciones { animation: vx-despliega .2s var(--vx-curva); }
/* El punto del módulo en el que se está: sobre la esquina de su icono, fuera de la fila (en la fila,
   con un nombre largo como «Contenido de la tienda», ensanchaba el menú y daba scroll horizontal). */
.vx-modulo > summary { position: relative; }
.vx-modulo.is-actual > summary::after { content: ''; position: absolute; left: 24px; top: 7px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--vx-oro-claro); box-shadow: 0 0 0 2px var(--vx-marino); }
.vx-modulo__cabeza > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Una sección de nombre largo («Existencias y movimientos») se corta con puntos suspensivos, sin ensanchar el menú. */
.vx-modulo__secciones .vx-lateral__enlace { min-width: 0; overflow: hidden; }
.vx-modulo__secciones .vx-lateral__enlace > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.vx-lateral__menu { overflow-x: hidden; }
.vx-plegada .vx-modulo.is-actual > summary::after { display: none; }

/* --- Campos: el mismo diseño en cualquier parte del contenido y de las ventanas */
:where(.vx-contenido, .vx-ventana) :where(input:not([type=checkbox], [type=radio], [type=file], [type=color], [type=range], [type=hidden]), select, textarea) {
  min-height: 40px; padding: 8px 12px; border: 1px solid var(--vx-linea); border-radius: var(--vx-radio-chico); background-color: var(--vx-blanco);
  color: var(--vx-tinta); font: 500 .92rem 'Inter', sans-serif; min-width: 0;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
:where(.vx-contenido, .vx-ventana) :where(textarea) { min-height: 84px; line-height: 1.5; }
:where(.vx-contenido, .vx-ventana) :where(input, textarea)::placeholder { color: #9aa5b5; }
:where(.vx-contenido, .vx-ventana) :where(input:not([type=checkbox], [type=radio]), select, textarea):hover:not(:disabled):not(:focus) { border-color: #d8d4ca; }
:where(.vx-contenido, .vx-ventana) :where(input:not([type=checkbox], [type=radio]), select, textarea):focus { outline: none; border-color: var(--vx-oro-vivo); box-shadow: var(--vx-anillo); }
:where(.vx-contenido, .vx-ventana) :where(input:not([type=checkbox], [type=radio]), select, textarea):disabled { background-color: var(--vx-linea-suave); color: var(--vx-tenue); cursor: not-allowed; }
/* Los desplegables, con su flecha (la del sistema varía de un navegador a otro). */
.vx-contenido select:not([multiple]), .vx-ventana select:not([multiple]), .vx-cantidad select {
  appearance: none; -webkit-appearance: none; padding-right: 34px !important; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b788d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 12px;
}
:where(.vx-contenido, .vx-ventana) :where(input[type=checkbox], input[type=radio]) { width: 16px; height: 16px; accent-color: var(--vx-oro-vivo); cursor: pointer; }
:where(.vx-contenido, .vx-ventana) :where(input[type=search])::-webkit-search-cancel-button { cursor: pointer; }

/* --- Botones: responden al pasar, al pulsar y al teclado */
.vx-boton { box-shadow: var(--vx-sombra-boton); transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .12s var(--vx-curva), filter .15s ease; }
.vx-boton:not(.vx-boton--linea, .vx-boton--suave, .vx-boton--peligro, .vx-boton--peligro-linea):hover { background: var(--vx-boton-hover, var(--vx-oro-vivo)); color: var(--vx-sobre-boton-hover, var(--vx-sobre-oro)); }
.vx-boton:active:not(:disabled) { transform: translateY(1px) scale(.98); }
.vx-boton:focus-visible, .vx-enlace:focus-visible, .vx-pestanas :is(button, a):focus-visible, .vx-paginacion button:focus-visible { outline: none; box-shadow: var(--vx-anillo); }
.vx-boton--linea, .vx-boton--peligro-linea { box-shadow: 0 1px 2px rgba(17, 27, 43, .05); }
.vx-boton--peligro-linea:hover { background: var(--vx-error-suave); border-color: #eeb4ae; }
.vx-boton--suave:hover { background: #ffebc4; }
.vx-enlace:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --- Bloques, cifras y tarjetas: un poco de profundidad y respuesta */
.vx-bloque, .vx-cifra, .vx-tabla-envoltorio { transition: box-shadow .2s ease, border-color .2s ease; }
.vx-cifra:hover { border-color: #dcd8cf; box-shadow: 0 1px 2px rgba(17, 27, 43, .05), 0 14px 30px -22px rgba(17, 27, 43, .5); }
.vx-etiqueta { transition: background .15s ease; }

/* --- Tablas: filas que responden y el pie con cuántas por página */
.vx-tabla tbody tr { transition: background-color .12s ease; }
.vx-tabla tbody tr:hover > td { background-color: color-mix(in srgb, var(--vx-linea-suave) 45%, var(--vx-blanco)); }
.vx-tabla tr.is-pulsable:hover > td { background-color: var(--vx-oro-suave); }
.vx-tabla tr[data-fuera] { display: none; }
.vx-paginacion--tabla { margin-top: 10px; }
.vx-paginacion__info { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.vx-cantidad { display: inline-flex; align-items: center; gap: 8px; color: var(--vx-tenue); font-size: .82rem; font-weight: 600; }
.vx-cantidad select { width: auto; height: 32px; min-height: 32px; padding: 0 28px 0 10px !important; border: 1px solid var(--vx-linea); border-radius: 8px; background-color: var(--vx-blanco); color: var(--vx-tinta);
  font: 600 .82rem 'Inter', sans-serif; background-position: right 9px center; }
.vx-cantidad select:focus { outline: none; border-color: var(--vx-oro-vivo); box-shadow: var(--vx-anillo); }
.vx-paginacion__botones button { transition: background .15s ease, border-color .15s ease, color .15s ease, transform .12s var(--vx-curva); }
.vx-paginacion__botones button:hover:not(:disabled):not(.is-actual) { border-color: #d6d2c8; background: color-mix(in srgb, var(--vx-linea-suave) 45%, var(--vx-blanco)); }
.vx-paginacion__botones button:active:not(:disabled) { transform: scale(.95); }

/* --- Pestañas: sin el scroll de un píxel; la raya de la activa se desliza */
.vx-pestanas { position: relative; overflow-y: hidden; scrollbar-width: none; }
.vx-pestanas::-webkit-scrollbar { display: none; }
.vx-pestanas button, .vx-pestanas a { margin-bottom: 0; border-bottom: 0; transition: color .15s ease; }
.vx-pestanas button.is-activa, .vx-pestanas a.is-activa { font-weight: 700; }
.vx-pestanas:not(:has(.vx-pestanas__raya)) :is(button, a).is-activa { box-shadow: inset 0 -2px 0 var(--vx-oro-vivo); }
.vx-pestanas__raya { position: absolute; left: 0; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--vx-oro-vivo); pointer-events: none;
  transition: transform .28s var(--vx-curva), width .28s var(--vx-curva), opacity .2s ease; }

/* --- Ventanas: entran con fundido y escala sobre un fondo desenfocado */
@keyframes vx-ventana-entra { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes vx-velo-entra { from { opacity: 0; } }
.vx-ventana[open] { animation: vx-ventana-entra .24s var(--vx-curva); }
.vx-ventana::backdrop { background: rgba(13, 23, 39, .45); backdrop-filter: blur(4px); }
.vx-ventana[open]::backdrop { animation: vx-velo-entra .2s ease; }
.vx-menu__lista:not([hidden]) { animation: vx-despliega .16s var(--vx-curva); transform-origin: top right; }

/* --- Avisos: entran deslizando desde la derecha */

/* --- Esqueletos de carga (sustituyen al «Cargando…») */
@keyframes vx-late { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.vx-esqueleto { padding: 18px 20px !important; text-align: left !important; }
li.vx-esqueleto { list-style: none; }
.vx-esqueleto__barra { display: block; height: 12px; margin: 0 0 10px; border-radius: 6px;
  background: linear-gradient(90deg, #efede8 25%, #f7f6f2 50%, #efede8 75%); background-size: 200% 100%; animation: vx-late 1.3s ease-in-out infinite; }
.vx-esqueleto__barra:nth-of-type(2) { width: 82%; }
.vx-esqueleto__barra:nth-of-type(3) { width: 64%; margin-bottom: 0; }

/* --- Quien prefiere menos movimiento, sin él */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* --- Enlaces dentro de tablas y cifras: sin subrayado hasta pasar por encima */
.vx-tabla a:not(.vx-boton), .vx-cifra a { text-decoration: none; font-weight: 600; }
.vx-tabla a:not(.vx-boton):hover, .vx-cifra a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --- Avisos, confirmaciones y cerrar sesión (2026-10-20) ------------------ */
.vx-tostada {
  --vx-tono: var(--vx-bien); --vx-tono-suave: var(--vx-bien-suave);
  position: relative; overflow: hidden; pointer-events: auto;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start;
  padding: 13px 12px 14px 14px; border-radius: 14px; background: var(--vx-blanco); color: var(--vx-tinta);
  border: 1px solid var(--vx-linea); border-left: 4px solid var(--vx-tono);
  box-shadow: 0 18px 40px -22px rgba(17, 27, 43, .55), 0 2px 6px rgba(17, 27, 43, .06);
  font-size: .86rem; animation: vx-tostada-entra .32s var(--vx-curva);
}
.vx-tostada--error { --vx-tono: var(--vx-error); --vx-tono-suave: var(--vx-error-suave); }
.vx-tostada--aviso { --vx-tono: var(--vx-oro-vivo); --vx-tono-suave: var(--vx-oro-suave); }
.vx-tostada__icono { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--vx-tono-suave); color: var(--vx-tono); font-size: .95rem; }
.vx-tostada__texto { display: grid; gap: 2px; padding-top: 1px; }
.vx-tostada__texto b { font-family: var(--vx-titulos); font-size: .88rem; font-weight: 800; }
.vx-tostada__texto span { color: #3d4a5e; line-height: 1.45; overflow-wrap: anywhere; }
.vx-tostada__cerrar { display: grid; place-items: center; width: 28px; height: 28px; margin: -2px -2px 0 0; border: 0; border-radius: 8px; background: none; color: var(--vx-tenue); cursor: pointer; transition: background .15s, color .15s; }
.vx-tostada__cerrar:hover { background: var(--vx-linea-suave); color: var(--vx-tinta); }
.vx-tostada__cerrar:focus-visible { outline: none; box-shadow: var(--vx-anillo); }
.vx-tostada__tiempo { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--vx-tono); opacity: .35; transform-origin: left; animation: vx-tostada-tiempo var(--vx-dura, 4500ms) linear forwards; }
.vx-tostada.is-pausada .vx-tostada__tiempo { animation-play-state: paused; }
.vx-tostada.is-saliendo { animation: vx-tostada-sale .22s ease forwards; }
@keyframes vx-tostada-entra { from { opacity: 0; transform: translateX(28px) scale(.98); } }
@keyframes vx-tostada-sale { to { opacity: 0; transform: translateX(28px); } }
@keyframes vx-tostada-tiempo { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 640px) {
  /* Abajo y a lo ancho: arriba taparía la barra con el menú y «Cerrar sesión». */
  .vx-tostadas { right: 12px; bottom: 12px; width: calc(100% - 24px); }
}

.vx-confirmar { width: min(440px, calc(100% - 32px)); text-align: center; }
.vx-confirmar > div { padding: 28px 26px 22px; }
.vx-confirmar__icono { display: inline-grid; place-items: center; width: 54px; height: 54px; margin-bottom: 14px; border-radius: 50%; background: var(--vx-oro-suave); color: var(--vx-oro-vivo); font-size: 1.35rem; box-shadow: 0 0 0 8px color-mix(in srgb, var(--vx-oro-vivo) 7%, transparent); }
.vx-confirmar--peligro .vx-confirmar__icono { background: var(--vx-error-suave); color: var(--vx-error); box-shadow: 0 0 0 8px rgba(180, 35, 24, .06); }
.vx-confirmar h2 { margin-bottom: 8px; }
.vx-confirmar p { margin: 0 auto; max-width: 34ch; color: var(--vx-tenue); line-height: 1.55; font-size: .9rem; }
.vx-confirmar .vx-form__pie { justify-content: center; margin-top: 22px; gap: 10px; }
.vx-confirmar .vx-form__pie .vx-boton { min-width: 128px; justify-content: center; }

.vx-salir__boton {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0;
  border: 1px solid var(--vx-linea); border-radius: 10px; background: var(--vx-blanco); color: var(--vx-tinta);
  font: 700 .8rem var(--vx-titulos); cursor: pointer; box-shadow: 0 1px 2px rgba(17, 27, 43, .05);
  transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.vx-salir__boton i { color: var(--vx-tenue); font-size: .95rem; transition: color .15s; }
.vx-salir__boton:hover { background: var(--vx-error-suave); border-color: #f2c9c5; }
.vx-salir__boton:hover i { color: var(--vx-error); }
.vx-salir__boton:active { transform: scale(.97); }
.vx-salir__boton:focus-visible { outline: none; box-shadow: var(--vx-anillo); }
@media (prefers-reduced-motion: reduce) {
  .vx-tostada, .vx-tostada.is-saliendo { animation: none; }
  .vx-tostada__tiempo { animation: none; display: none; }
}

/* ------------------------------------------------------------------ marca y empresa (panel de contenido) */
.mc-imagenes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 14px; }
.mc-imagen { display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid var(--vx-linea); border-radius: var(--vx-radio-chico); }
.mc-imagen small { color: var(--vx-tenue); font-size: .78rem; }
.mc-imagen__vista { display: grid; place-items: center; height: 88px; border-radius: 10px; border: 1px dashed var(--vx-linea); }
.mc-imagen__vista img { max-width: 90%; max-height: 64px; object-fit: contain; }
.mc-imagen__vista--clara { background: var(--vx-blanco); }
.mc-imagen__vista--oscura { background: var(--vx-marino); }
.mc-imagen__vista--icono { background: repeating-conic-gradient(var(--vx-linea-suave) 0 25%, var(--vx-blanco) 0 50%) 0 0 / 16px 16px; }
.mc-imagen__vista--icono img { width: 48px; height: 48px; }
.mc-imagen__botones { display: flex; gap: 8px; }
.mc-colores { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 12px 0; }
.mc-color { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--vx-linea); border-radius: var(--vx-radio-chico); }
.mc-color small { display: block; color: var(--vx-tenue); font-size: .76rem; }
.mc-color__elegir { display: flex; gap: 8px; align-items: center; }
.mc-color__elegir input[type=color] { width: 44px; height: 38px; padding: 2px; border: 1px solid var(--vx-linea); border-radius: 8px; background: var(--vx-blanco); cursor: pointer; }
.mc-color__elegir input:not([type=color]) { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, monospace; text-transform: lowercase; }
/* La vista previa: pinta con las variables del tema que el JS pone en #vistaMarca. */
.mc-vista { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.mc-vista__panel, .mc-vista__tienda { overflow: hidden; border: 1px solid var(--vx-linea); border-radius: 12px; min-height: 190px; }
.mc-vista__panel { display: grid; grid-template-columns: 140px 1fr; }
.mc-vista__lateral { display: flex; flex-direction: column; gap: 6px; padding: 12px; background: var(--vx-marino); color: var(--vx-sobre-marino); font-size: .8rem; }
.mc-vista__lateral b { margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-vista__g { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--vx-oro-vivo); color: var(--vx-sobre-oro); font-weight: 800; }
.mc-vista__enlace { padding: 6px 8px; border-radius: 8px; color: color-mix(in srgb, var(--vx-sobre-marino) 72%, transparent); }
.mc-vista__enlace.is-activo { background: color-mix(in srgb, var(--vx-realce) 18%, transparent); color: var(--vx-sobre-marino); box-shadow: inset 3px 0 0 var(--vx-realce); }
.mc-vista__lienzo { padding: 14px; background: var(--vx-lienzo); }
.mc-vista__tarjeta { padding: 14px; border: 1px solid var(--vx-linea); border-radius: 10px; background: var(--vx-blanco); color: var(--vx-tinta); }
.mc-vista__tarjeta p { margin: 4px 0 10px; color: var(--vx-tenue); font-size: .85rem; }
.mc-vista__boton { display: inline-block; padding: 7px 12px; border-radius: 8px; background: var(--vx-oro-vivo); color: var(--vx-sobre-oro); font-weight: 700; font-size: .82rem; }
.mc-vista__boton { background: var(--vx-boton, var(--vx-oro-vivo)); color: var(--vx-sobre-boton, var(--vx-sobre-oro)); }
.mc-vista__boton--tienda { background: var(--marca-boton, var(--ti-oro)); color: var(--marca-sobre-boton, var(--ti-sobre-oro)); }
.mc-vista__boton--tienda.mc-vista__boton--hover { background: var(--marca-boton-hover); color: var(--marca-sobre-boton-hover); }
.mc-vista__enlaces { margin: 10px 0 0; font-size: .85rem; }
.mc-vista__enlaces a { color: var(--marca-enlace); font-weight: 600; text-decoration: underline; }
.mc-vista__enlaces a.mc-vista__enlace--hover { color: var(--marca-enlace-hover); }
.mc-vista__franja, .mc-vista__pie { display: flex; gap: 14px; padding: 8px 14px; background: var(--marca-primario); font-size: .78rem; font-weight: 600; }
.mc-vista__franja { color: var(--marca-cabecera-texto); }
.mc-vista__franja .mc-vista__franja-hover { color: var(--marca-cabecera-hover); }
.mc-vista__pie { color: var(--marca-pie-texto); }
.mc-vista__pie .mc-vista__pie-hover { color: var(--marca-pie-hover); }
.mc-subtitulo { margin: 22px 0 4px; font-size: 1rem; }
.mc-color.is-auto .mc-color__elegir { opacity: .6; }
.mc-color__auto { align-self: flex-start; padding: 2px 9px; border: 1px solid var(--vx-linea); border-radius: 99px; background: var(--vx-blanco); color: var(--vx-tenue); font-size: .72rem; font-weight: 700; cursor: pointer; }
.mc-color.is-auto .mc-color__auto { border-color: var(--vx-oro); background: var(--vx-oro-suave); color: var(--vx-oro); }
.mc-vista__enlace-texto { margin-left: 8px; color: var(--vx-oro); font-weight: 600; font-size: .85rem; }
.mc-vista__cabecera { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--ti-blanco); color: var(--ti-marino); border-bottom: 3px solid var(--ti-oro); }
.mc-vista__cabecera img { height: 26px; max-width: 110px; object-fit: contain; }
.mc-vista__buscador { flex: 1; padding: 6px 10px; border: 1px solid var(--ti-linea); border-radius: 99px; color: var(--ti-tenue); font-size: .78rem; }
.mc-vista__etiqueta { display: inline-block; margin-bottom: 6px; padding: 2px 8px; border-radius: 99px; background: var(--ti-marino); color: var(--ti-sobre-marino); font-size: .7rem; font-weight: 700; }
.ed-miniatura { width: 120px; }
.ed-miniatura img { display: block; width: 104px; height: 52px; object-fit: cover; border-radius: 8px; }

/* Los textos de los avisos: uno por tarjeta, en dos columnas cuando caben */
.vx-rejilla-plantillas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 18px; align-items: start; }
.vx-rejilla-plantillas h2 { margin: 0; font-size: 1.05rem; }
.vx-ventana__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.vx-ventana__cabeza h2 { margin: 0; }
.vx-rejilla-plantillas > form { min-width: 0; }
.vx-rejilla-plantillas [data-ejemplo] { overflow-wrap: anywhere; }
/* El selector de color, fijo a 44 px: la regla general de los campos (ancho completo) lo estiraba y dejaba sin sitio al hexadecimal. */
.mc-color .mc-color__elegir input[type=color] { flex: 0 0 44px; width: 44px; min-width: 44px; }
.mc-color .mc-color__elegir input:not([type=color]) { flex: 1 1 auto; width: auto; }

/* El botón de estado de una fila (activa / parada): se pulsa para cambiarlo, con confirmación. */
.vx-estado { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 6px 0 10px; border: 1px solid var(--vx-linea); border-radius: 99px;
  background: var(--vx-blanco); color: var(--vx-tenue); font: 700 .76rem 'Inter', sans-serif; white-space: nowrap; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease; }
.vx-estado__punto { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.vx-estado__accion { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--vx-linea-suave); font-size: .82rem; }
.vx-estado.is-activo { border-color: color-mix(in srgb, var(--vx-bien) 35%, transparent); background: var(--vx-bien-suave); color: var(--vx-bien); }
.vx-estado.is-activo .vx-estado__accion { background: color-mix(in srgb, var(--vx-bien) 16%, transparent); }
.vx-estado:hover:not(:disabled) { border-color: var(--vx-oro); }
.vx-estado.is-activo:hover:not(:disabled) { border-color: color-mix(in srgb, var(--vx-error) 45%, transparent); background: var(--vx-error-suave); color: var(--vx-error); }
.vx-estado:focus-visible { outline: none; box-shadow: var(--vx-anillo); }
.vx-estado:disabled { opacity: .6; cursor: default; }

/* Las fotos de un producto (panel de la tienda): los campos caben en su tarjeta, sea cual sea su ancho. */
.vx-foto { min-width: 0; margin: 0; padding: 10px; }
.vx-foto label { display: grid; gap: 4px; margin-top: 8px; min-width: 0; }
.vx-foto :is(input, select) { width: 100%; min-width: 0; box-sizing: border-box; }

/* Elegir a alguien de una lista que se busca (un empleado para darle cuenta). */
.vx-candidatos { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; max-height: 40vh; overflow-y: auto; }
.vx-candidatos button { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--vx-linea); border-radius: var(--vx-radio-chico);
  background: var(--vx-blanco); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.vx-candidatos button:hover:not([disabled]) { border-color: var(--vx-boton); }
.vx-candidatos button[disabled] { opacity: .55; cursor: not-allowed; }
.vx-candidatos small { color: var(--vx-tenue); }

/* Activar la cuenta: cómo confirmar al entrar. */
.vx-opciones-acceso { display: grid; gap: 10px; }
.vx-opcion-acceso { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border: 1px solid var(--vx-linea); border-radius: 14px; background: var(--vx-blanco);
  color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.vx-opcion-acceso:hover, .vx-opcion-acceso:focus-visible { border-color: var(--vx-boton); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vx-boton) 16%, transparent); outline: none; }
.vx-opcion-acceso > i { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--vx-oro-suave); color: var(--vx-oro); font-size: 1.1rem; }
.vx-opcion-acceso span { display: grid; gap: 2px; }
.vx-opcion-acceso small { color: var(--vx-tenue); }
.vx-entrada #formAplicacion { margin-top: 18px; }

/* Marca › la entrada de los paneles: la imagen, sus textos y cómo se verá. */
.mc-entrada { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 14px; margin-top: 14px; }
.mc-entrada__textos { display: grid; gap: 12px; align-content: start; }
.mc-entrada__textos label { display: grid; gap: 6px; color: var(--vx-tenue); font-size: .78rem; font-weight: 700; }
.mc-imagen__vista--foto { height: 120px; overflow: hidden; background: var(--vx-linea-suave); }
.mc-imagen__vista--foto img { width: 100%; max-width: none; height: 100%; max-height: none; object-fit: cover; }
.mc-entrada__vista { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); min-height: 230px; overflow: hidden;
  border: 1px solid var(--vx-linea); border-radius: 14px; background: var(--vx-lienzo); }
.mc-entrada__escena { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-width: 0; padding: 56px 20px 20px; }
.mc-entrada__logo { position: absolute; top: 16px; left: 20px; font: 800 .95rem var(--vx-titulos); }
.mc-entrada__logo img { display: block; max-width: 120px; max-height: 30px; object-fit: contain; }
.mc-entrada__escena b { font: 800 1.3rem/1.15 var(--vx-titulos); overflow-wrap: anywhere; }
.mc-entrada__escena small { color: color-mix(in srgb, var(--vx-sobre-marino) 84%, transparent); font-size: .8rem; }
.mc-entrada__tarjeta { display: grid; gap: 9px; align-self: center; justify-self: center; width: min(80%, 220px); padding: 16px; border: 1px solid var(--vx-linea);
  border-radius: 12px; background: var(--vx-blanco); box-shadow: var(--vx-sombra); }
.mc-entrada__tarjeta b { font: 800 .95rem var(--vx-titulos); color: var(--vx-tinta); }
.mc-entrada__tarjeta span { height: 24px; border: 1px solid var(--vx-linea); border-radius: 7px; }
.mc-entrada__tarjeta i { height: 26px; border-radius: 7px; background: var(--vx-boton); }
@media (max-width: 760px) {
  .mc-entrada { grid-template-columns: minmax(0, 1fr); }
  .mc-entrada__vista { grid-template-columns: minmax(0, 1fr); }
  .mc-entrada__tarjeta { margin: 16px 0; }
}

/* Los paneles del inicio: un bloque por grupo, una fila por panel. */
.vx-inicio__grupos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 14px; align-items: start; }
.vx-grupo-paneles { display: grid; gap: 4px; padding: 14px; border: 1px solid var(--vx-linea); border-radius: var(--vx-radio); background: var(--vx-blanco); box-shadow: var(--vx-sombra); }
.vx-grupo-paneles h3 { margin: 2px 6px 6px; color: var(--vx-tenue); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.vx-panel-fila { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px; border-radius: 12px; color: inherit; text-decoration: none; transition: background .15s ease; }
a.vx-panel-fila:hover, a.vx-panel-fila:focus-visible { background: var(--vx-linea-suave); outline: none; }
.vx-panel-fila .vx-tarjeta__icono { width: 42px; height: 42px; border-radius: 12px; flex: none; }
.vx-panel-fila__texto { display: grid; gap: 1px; min-width: 0; flex: 1; }
.vx-panel-fila__texto b { font: 800 .95rem var(--vx-titulos); }
.vx-panel-fila__texto small { color: var(--vx-tenue); font-size: .8rem; line-height: 1.4; }
.vx-panel-fila__ir { color: var(--vx-tenue); font-size: .8rem; transition: transform .15s ease; }
a.vx-panel-fila:hover .vx-panel-fila__ir { transform: translateX(3px); color: var(--vx-oro); }
.vx-panel-fila.is-apagada { opacity: .6; }