/* VITRIX · el estilo único · versión 1
   La ropa de todas las pantallas de VITRIX, escrita una sola vez. Esta carpeta (vitrix/) se copia ENTERA y TAL CUAL a la carpeta de
   pantallas de cada sistema; no se cambia en la copia: se cambia en estilo/vitrix/ y se vuelve a copiar. La guía es estilo/LEEME.md.

   · Todo va con clases que empiezan con «vx-»: fuera de html y body no le pone estilo a ninguna etiqueta suelta, para convivir con la hoja
     propia de cada sistema mientras se pasa. (La clase «vx» sola es de antes —el dibujo de la palabra VITRIX— y aquí no se usa.)
   · Corre con la política más estricta de los sistemas (style-src 'self'): nada en línea y nada de otro sitio. Las direcciones son
     relativas a esta hoja.
   · Cortes: 1024 (lo que se toca pasa de 40 a 44 de alto), 900 (el menú del lado pasa a cajón) y 560 (celular).
   · Solo claro: no hay modo oscuro. */

/* ------------------------------------------------------------------ la letra */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(fuentes/poppins-latin-ext-400-normal.woff2) format('woff2');
 unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(fuentes/poppins-latin-400-normal.woff2) format('woff2');
 unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(fuentes/poppins-latin-ext-500-normal.woff2) format('woff2');
 unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(fuentes/poppins-latin-500-normal.woff2) format('woff2');
 unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(fuentes/poppins-latin-ext-600-normal.woff2) format('woff2');
 unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(fuentes/poppins-latin-600-normal.woff2) format('woff2');
 unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(fuentes/poppins-latin-ext-700-normal.woff2) format('woff2');
 unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(fuentes/poppins-latin-700-normal.woff2) format('woff2');
 unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ------------------------------------------------------------------ la base: colores y medidas */
:root{
 --vx-version:1;
 --vx-turquesa:#07899E;          /* el de la marca: adornos, bordes, iconos */
 --vx-turquesa-oscuro:#066F80;   /* letras, enlaces y botón principal */
 --vx-turquesa-mas-oscuro:#055E6C; /* el botón principal con el puntero encima */
 --vx-turquesa-suave:#E6F3F5;    /* lo escogido en el menú, avisos */
 --vx-fucsia:#E21070;            /* el de la marca: contadores, «salir», lo que pide cuidado */
 --vx-fucsia-oscuro:#C40D61;     /* letra fucsia sobre blanco */
 --vx-fucsia-suave:#FCE7F0;
 --vx-tinta:#2B2B2E;
 --vx-gris:#5B5A5D;              /* la letra gris. El gris claro de la muestra no se usa para letra: no llega al contraste mínimo */
 --vx-raya:#E1E6E8;
 --vx-raya-renglon:#EDF1F2;
 --vx-borde:#C4CFD3;             /* el borde de casillas y botones secundarios */
 --vx-fondo:#F1F7F8;             /* la página */
 --vx-tarjeta:#FFFFFF;
 --vx-apagado:#EEF1F2;
 --vx-listo:#19754C;--vx-listo-suave:#E3F4EC;
 --vx-revisar:#7A4F0C;--vx-revisar-suave:#FBEFD9;
 --vx-velo:rgba(43,43,46,.45);
 --vx-sombra:0 8px 28px rgba(0,0,0,.14);
 --vx-letra:'Poppins','Segoe UI',Arial,sans-serif;
 --vx-alto:40px;                 /* botones y casillas: 40 en la compu, 44 de 1024 para abajo */
 --vx-alto-renglon:36px;         /* el renglón del menú: 36 en la compu, 44 de 1024 para abajo */
 --vx-radio:10px;
 --vx-radio-tarjeta:14px;
 --vx-menu-ancho:236px;         /* el menú del lado; con los 26 de separación, el contenido queda 262 más angosto que la ventana */
 --vx-lado:32px;                 /* el relleno a los lados de la barra y de la página */
}
@media(max-width:1024px){:root{--vx-alto:44px;--vx-alto-renglon:44px;}}
@media(max-width:560px){:root{--vx-lado:16px;}}

html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{margin:0;font-family:var(--vx-letra);font-size:14px;line-height:1.5;color:var(--vx-tinta);background:var(--vx-fondo);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;}
/* El fondo «#SOYVITRALOVER»: una capa fija detrás de todo, que no se toca, no se vuelve a pintar al correr la pantalla («will-change» le da su
   propia capa) y no sale al imprimir. El mismo dibujo y la misma fuerza de Mercadeo 0.1.1 y del expediente 6.7.19. */
body::before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;pointer-events:none;will-change:transform;background-image:url(fondo.svg);background-repeat:repeat;background-position:center top;background-size:560px auto;}
@media(max-width:560px){body::before{background-size:392px auto;}}

[class^="vx-"],[class*=" vx-"]{box-sizing:border-box;}
[class^="vx-"]:focus-visible,[class*=" vx-"]:focus-visible{outline:2px solid var(--vx-turquesa-oscuro);outline-offset:2px;}
.vx-oculto,[class^="vx-"][hidden],[class*=" vx-"][hidden]{display:none!important;}
.vx-solo-lector{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}
.vx-icono{flex:none;display:inline-block;vertical-align:middle;}
.vx-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.vx-chico{display:block;margin:0;font-size:12px;font-weight:400;line-height:1.4;color:var(--vx-gris);}
.vx-gris{color:var(--vx-gris);}
.vx-parte{overflow-wrap:anywhere;}
.vx-texto{margin:0 0 10px;font-size:14px;line-height:1.5;color:var(--vx-tinta);}
.vx-sin-correr{overflow:hidden;}

/* ------------------------------------------------------------------ la palabra VITRIX */
.vx-marca{display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;flex:none;min-height:44px;margin:0;padding:0;text-decoration:none;border-radius:8px;color:var(--vx-gris);}
.vx-marca-renglon{display:block;font-size:9.5px;font-weight:400;letter-spacing:.9px;line-height:1.25;color:var(--vx-gris);}
.vx-palabra{display:block;height:40px;width:auto;margin-top:-7px;}
.vx-marca-sola .vx-palabra{margin-top:0;}

/* ------------------------------------------------------------------ la barra de arriba */
.vx-barra{position:relative;z-index:30;display:flex;flex-wrap:wrap;align-items:center;gap:2px 14px;min-height:70px;margin:0;padding:6px var(--vx-lado);background:var(--vx-tarjeta);border-bottom:1px solid var(--vx-raya);color:var(--vx-tinta);font-family:var(--vx-letra);font-size:14px;line-height:1.5;}
.vx-barra-menu{display:none;align-items:center;justify-content:center;flex:none;width:44px;height:44px;margin:0 0 0 -10px;padding:0;border:0;border-radius:11px;background:none;color:var(--vx-turquesa-oscuro);cursor:pointer;font:inherit;}
.vx-barra-menu:hover,.vx-barra-menu[aria-expanded="true"]{background:var(--vx-turquesa-suave);}
.vx-barra-raya{flex:none;width:1px;height:32px;margin:0 4px;background:var(--vx-raya);}
.vx-barra-modulo{flex:0 1 auto;min-width:0;margin:0;font-size:17px;font-weight:600;line-height:1.3;color:var(--vx-tinta);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.vx-barra-corte{display:none;}
.vx-barra-resorte{flex:1 1 0;min-width:0;height:0;margin:0;}
.vx-atajos{display:flex;flex-wrap:wrap;gap:2px 4px;margin:0;padding:0;}
.vx-atajo{position:relative;display:inline-flex;align-items:center;gap:7px;min-height:44px;margin:0;padding:0 10px;border:0;border-radius:11px;background:none;color:var(--vx-tinta);font-family:inherit;font-size:13.5px;font-weight:500;line-height:1.3;text-decoration:none;cursor:pointer;}
.vx-atajo:hover{background:var(--vx-turquesa-suave);color:var(--vx-turquesa-oscuro);}
.vx-quien{min-width:0;margin:0;font-size:12.5px;font-weight:400;line-height:1.4;color:var(--vx-gris);overflow-wrap:anywhere;}
.vx-clave{display:inline-flex;flex:none;}
.vx-tuerca{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:11px;background:none;color:var(--vx-turquesa-oscuro);cursor:pointer;font:inherit;}
.vx-tuerca:hover,.vx-tuerca[aria-expanded="true"]{background:var(--vx-turquesa-suave);}
/* El recuadro de la tuerca abre debajo de ella, pegado a la orilla derecha de la barra: así nunca se sale de la pantalla, esté la tuerca donde esté. */
.vx-pregunta{position:absolute;top:calc(100% - 7px);right:var(--vx-lado);z-index:5;width:min(280px,calc(100% - 32px));margin:0;padding:14px 16px;background:var(--vx-tarjeta);border:1px solid var(--vx-raya);border-radius:14px;box-shadow:var(--vx-sombra);text-align:left;}
.vx-pregunta-texto{margin:0;font-size:15px;font-weight:600;line-height:1.4;color:var(--vx-tinta);}
.vx-pregunta-detalle{margin:2px 0 0;font-size:12.5px;line-height:1.4;color:var(--vx-gris);}
.vx-pregunta-botones{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:12px;}
.vx-salir,.vx-volver{display:inline-flex;align-items:center;flex:none;min-height:44px;margin:0;padding:0;border:0;background:none;font-family:inherit;font-size:12.5px;font-weight:400;line-height:1.3;text-decoration:underline;cursor:pointer;}
.vx-salir{color:var(--vx-fucsia);}
.vx-volver{color:var(--vx-turquesa-oscuro);}

/* ------------------------------------------------------------------ las dos columnas: el menú del lado y el contenido */
.vx-marco{display:grid;grid-template-columns:var(--vx-menu-ancho) minmax(0,1fr);gap:26px;align-items:start;margin:0;padding:22px var(--vx-lado) 44px;}
.vx-marco-solo{grid-template-columns:minmax(0,1fr);}
.vx-contenido{min-width:0;margin:0;padding:0;}

/* ------------------------------------------------------------------ el menú del lado */
.vx-menu{position:sticky;top:22px;max-height:calc(100vh - 44px);overflow-y:auto;margin:0;padding:10px;background:var(--vx-tarjeta);border:1px solid var(--vx-raya);border-radius:var(--vx-radio-tarjeta);font-family:var(--vx-letra);font-size:13.5px;line-height:1.4;color:var(--vx-tinta);}
.vx-menu-cabeza{display:none;align-items:center;justify-content:space-between;gap:10px;margin:0 0 6px;padding:0 0 6px 10px;border-bottom:1px solid var(--vx-raya);font-size:15px;font-weight:600;color:var(--vx-tinta);}
.vx-menu-grupo{margin:0;padding:12px 10px 4px;font-size:10.5px;font-weight:600;letter-spacing:.8px;line-height:1.4;text-transform:uppercase;color:var(--vx-gris);}
.vx-menu-grupo:first-child,.vx-menu-cabeza+.vx-menu-grupo{padding-top:6px;}
.vx-menu-lista{display:flex;flex-direction:column;gap:2px;margin:0;padding:0;list-style:none;}
.vx-menu-lista>li{margin:0;padding:0;list-style:none;}
.vx-menu-renglon{display:flex;align-items:center;gap:10px;width:100%;min-height:var(--vx-alto-renglon);margin:0;padding:4px 10px;border:0;border-radius:var(--vx-radio);background:none;color:var(--vx-tinta);font-family:inherit;font-size:13.5px;font-weight:400;line-height:1.3;text-align:left;text-decoration:none;cursor:pointer;}
.vx-menu-renglon:hover{background:var(--vx-turquesa-suave);color:var(--vx-turquesa-oscuro);}
.vx-menu-renglon.vx-escogido,.vx-menu-renglon[aria-current="page"],.vx-menu-renglon[aria-current="true"]{background:var(--vx-turquesa-suave);color:var(--vx-turquesa-oscuro);font-weight:600;}
.vx-menu-texto{flex:1 1 auto;min-width:0;overflow-wrap:anywhere;}
.vx-contador{display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:20px;height:20px;margin:0 0 0 auto;padding:0 6px;border-radius:10px;background:var(--vx-fucsia);color:#fff;font-size:11.5px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;}
.vx-menu-pie{margin:8px 0 0;padding:10px 10px 4px;border-top:1px solid var(--vx-raya);font-size:12px;line-height:1.5;color:var(--vx-gris);}
.vx-velo{position:fixed;top:0;right:0;bottom:0;left:0;z-index:55;margin:0;padding:0;border:0;background:var(--vx-velo);}

/* ------------------------------------------------------------------ el título de la pantalla */
.vx-cabeza{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;margin:0 0 18px;}
.vx-titulo{margin:0;padding:0;font-size:26px;font-weight:700;line-height:1.2;letter-spacing:0;color:var(--vx-tinta);}
.vx-subtitulo{margin:4px 0 0;padding:0;font-size:13.5px;font-weight:400;line-height:1.5;color:var(--vx-gris);}
.vx-acciones{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:0;}
.vx-seccion{margin:26px 0 10px;padding:0;font-size:16px;font-weight:600;line-height:1.3;letter-spacing:0;color:var(--vx-tinta);}
.vx-miga{margin:0 0 6px;padding:0;font-size:12.5px;line-height:1.5;color:var(--vx-gris);}

/* ------------------------------------------------------------------ botones */
.vx-boton{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--vx-alto);margin:0;padding:0 16px;border:1px solid var(--vx-borde);border-radius:var(--vx-radio);background:var(--vx-tarjeta);color:var(--vx-tinta);font-family:var(--vx-letra);font-size:14px;font-weight:600;line-height:1.2;letter-spacing:0;text-align:center;text-decoration:none;text-transform:none;white-space:nowrap;cursor:pointer;-webkit-appearance:none;appearance:none;}
.vx-boton:hover{background:#F4F8F9;}
.vx-boton-principal{background:var(--vx-turquesa-oscuro);border-color:var(--vx-turquesa-oscuro);color:#fff;}
.vx-boton-principal:hover{background:var(--vx-turquesa-mas-oscuro);border-color:var(--vx-turquesa-mas-oscuro);}
.vx-boton-cuidado{background:var(--vx-tarjeta);border-color:var(--vx-fucsia);color:var(--vx-fucsia-oscuro);}
.vx-boton-cuidado:hover{background:var(--vx-fucsia-suave);}
.vx-boton-chico{min-height:32px;padding:0 12px;font-size:13px;}
.vx-boton-icono{width:var(--vx-alto);min-width:var(--vx-alto);padding:0;}
.vx-boton-ancho{display:flex;width:100%;}
.vx-boton:disabled,.vx-boton[aria-disabled="true"]{background:var(--vx-apagado);border-color:var(--vx-raya);color:var(--vx-gris);cursor:default;}
.vx-boton.vx-ocupado{pointer-events:none;cursor:progress;}
.vx-boton.vx-ocupado::before,.vx-cargando::before{content:"";flex:none;width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;}
/* El que parece enlace: para una acción dentro de un texto o al pie de una tarjeta. */
.vx-boton-enlace,.vx-enlace{display:inline;margin:0;padding:0;border:0;border-radius:4px;background:none;color:var(--vx-turquesa-oscuro);font-family:inherit;font-size:inherit;font-weight:600;line-height:inherit;text-align:left;text-decoration:underline;text-underline-offset:2px;cursor:pointer;}
.vx-boton-enlace:disabled{color:var(--vx-gris);cursor:default;}

/* ------------------------------------------------------------------ casillas */
/* (la clase va dos veces a propósito: así la casilla le gana también a las reglas «input[type=text]» que traen las hojas de los sistemas) */
.vx-campo{display:block;min-width:0;margin:0;padding:0;}
.vx-campo+.vx-campo{margin-top:12px;}
.vx-rotulo{display:block;margin:0 0 4px;padding:0;font-size:12.5px;font-weight:500;line-height:1.4;color:var(--vx-gris);}
.vx-casilla.vx-casilla{display:block;width:100%;min-height:var(--vx-alto);height:var(--vx-alto);margin:0;padding:0 12px;border:1px solid var(--vx-borde);border-radius:var(--vx-radio);background-color:var(--vx-tarjeta);color:var(--vx-tinta);font-family:var(--vx-letra);font-size:14px;font-weight:400;line-height:1.4;letter-spacing:0;text-transform:none;box-shadow:none;-webkit-appearance:none;appearance:none;}
.vx-casilla.vx-casilla::placeholder{color:var(--vx-gris);opacity:1;}
.vx-casilla.vx-casilla:focus{outline:2px solid var(--vx-turquesa-oscuro);outline-offset:1px;border-color:var(--vx-turquesa-oscuro);}
.vx-casilla.vx-casilla:disabled{background-color:#F4F6F7;color:var(--vx-gris);}
.vx-casilla.vx-casilla[aria-invalid="true"]{border-color:var(--vx-fucsia);}
.vx-casilla.vx-casilla-num{text-align:right;font-variant-numeric:tabular-nums;}
textarea.vx-casilla.vx-casilla,.vx-casilla.vx-casilla-larga{height:auto;min-height:88px;padding:9px 12px;line-height:1.5;resize:vertical;}
select.vx-casilla.vx-casilla{padding-right:34px;background-image:linear-gradient(45deg,transparent 50%,var(--vx-gris) 50%),linear-gradient(135deg,var(--vx-gris) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;}
select.vx-casilla.vx-casilla[multiple],select.vx-casilla.vx-casilla[size]:not([size="1"]){height:auto;min-height:110px;padding:6px 8px;background-image:none;}
input[type="file"].vx-casilla.vx-casilla{height:auto;padding:7px 8px;}
.vx-casilla.vx-casilla-corta{display:inline-block;width:auto;}
.vx-ayuda{margin:4px 0 0;padding:0;font-size:12px;line-height:1.4;color:var(--vx-gris);}
.vx-error{margin:4px 0 0;padding:0;font-size:12.5px;font-weight:500;line-height:1.4;color:var(--vx-fucsia-oscuro);}
.vx-error:empty{display:none;}
.vx-listo{margin:4px 0 0;padding:0;font-size:12.5px;font-weight:500;line-height:1.4;color:var(--vx-listo);}
.vx-listo:empty{display:none;}
.vx-puntos{margin:6px 0 0;padding:0 0 0 18px;list-style:disc;}
.vx-puntos>li{margin:2px 0;padding:0;}
/* La casilla de marcar y la opción de una entre varias: el renglón entero se toca. */
.vx-marcar{display:flex;align-items:center;gap:10px;min-height:var(--vx-alto);margin:0;padding:0;font-size:14px;font-weight:400;line-height:1.4;color:var(--vx-tinta);cursor:pointer;}
.vx-marcar>input{flex:none;width:18px;height:18px;margin:0;padding:0;accent-color:var(--vx-turquesa-oscuro);cursor:pointer;}
.vx-grupo-marcar{display:flex;flex-direction:column;gap:0;margin:0;padding:0;border:0;min-width:0;}
.vx-grupo-marcar>legend{margin:0 0 2px;padding:0;font-size:12.5px;font-weight:500;line-height:1.4;color:var(--vx-gris);}
/* El buscador: la casilla con su lupa. */
.vx-buscador{position:relative;display:block;min-width:0;margin:0;padding:0;color:var(--vx-gris);}
.vx-buscador>.vx-icono{position:absolute;top:50%;left:12px;margin-top:-9px;pointer-events:none;}
.vx-buscador>.vx-casilla.vx-casilla{padding-left:38px;}
/* Lo que va encima de una lista: el buscador, los filtros y algún botón, en un renglón. */
.vx-filtros{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 12px;margin:0 0 12px;padding:0;}
.vx-filtros>.vx-buscador,.vx-filtros>.vx-campo{flex:1 1 240px;max-width:420px;}
.vx-filtros>.vx-pildoras{margin:0;}
/* Un formulario: de una columna, o de dos (de una en el celular). */
.vx-formulario{display:grid;grid-template-columns:minmax(0,1fr);gap:14px 18px;margin:0;padding:0;}
.vx-formulario-dos{grid-template-columns:repeat(2,minmax(0,1fr));}
.vx-formulario-tres{grid-template-columns:repeat(3,minmax(0,1fr));}
.vx-formulario-cuatro{grid-template-columns:repeat(4,minmax(0,1fr));}
.vx-formulario>.vx-campo{margin-top:0;}
.vx-formulario>.vx-campo-ancho,.vx-formulario>.vx-formulario-pie{grid-column:1/-1;}
.vx-formulario-pie{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;margin:4px 0 0;padding:0;}

/* ------------------------------------------------------------------ la lista */
.vx-lista-marco{position:relative;max-width:100%;margin:0;padding:0;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;}
.vx-lista{width:100%;margin:0;border:0;border-collapse:collapse;border-spacing:0;background:none;font-family:var(--vx-letra);font-size:14px;line-height:1.5;color:var(--vx-tinta);font-variant-numeric:tabular-nums;}
.vx-lista th{margin:0;padding:10px 12px;border:0;border-bottom:1px solid var(--vx-raya);background:none;color:var(--vx-gris);font-size:12px;font-weight:600;line-height:1.4;letter-spacing:0;text-align:left;text-transform:none;vertical-align:bottom;white-space:nowrap;}
.vx-lista td{margin:0;padding:11px 12px;border:0;border-bottom:1px solid var(--vx-raya-renglon);background:none;font-size:14px;font-weight:400;text-align:left;vertical-align:middle;}
.vx-lista tbody tr:last-child td,.vx-lista tfoot tr:last-child td{border-bottom:0;}
.vx-lista th.vx-num,.vx-lista td.vx-num{text-align:right;}
.vx-lista-enlace{display:inline;margin:0;padding:0;border:0;border-radius:4px;background:none;color:var(--vx-turquesa-oscuro);font-family:inherit;font-size:inherit;font-weight:600;line-height:inherit;text-align:left;text-decoration:underline;text-underline-offset:2px;cursor:pointer;}
.vx-lista .vx-lista-total td{border-top:1px solid var(--vx-raya);border-bottom:0;font-weight:600;}
.vx-lista .vx-lista-acciones{text-align:right;white-space:nowrap;}
.vx-lista .vx-lista-acciones>.vx-boton+.vx-boton{margin-left:8px;}
.vx-lista .vx-entero{white-space:nowrap;}
.vx-lista tr.vx-apagado td{color:var(--vx-gris);}
.vx-lista tr.vx-toca{cursor:pointer;}
.vx-lista tr.vx-toca:hover td,.vx-lista tr.vx-toca:focus-visible td{background:var(--vx-turquesa-suave);}
.vx-vacio{margin:0;padding:26px 16px;font-size:13.5px;line-height:1.5;text-align:center;color:var(--vx-gris);}
.vx-paginas{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin:0;padding:10px 12px 0;border-top:1px solid var(--vx-raya);font-size:12.5px;line-height:1.4;color:var(--vx-gris);}
.vx-paginas-botones{display:flex;gap:8px;margin:0;padding:0;}
/* Los datos de una ficha: el rótulo a la izquierda y el valor a la derecha. */
.vx-datos{margin:0;padding:0;}
.vx-dato{display:flex;justify-content:space-between;gap:16px;margin:0;padding:8px 0;border-bottom:1px solid var(--vx-raya-renglon);font-size:14px;line-height:1.5;}
.vx-dato:last-child{border-bottom:0;}
.vx-dato>dt,.vx-dato-rotulo{margin:0;padding:0;font-weight:400;color:var(--vx-gris);}
.vx-dato>dd,.vx-dato-valor{margin:0;padding:0;font-weight:400;text-align:right;overflow-wrap:anywhere;color:var(--vx-tinta);}

/* ------------------------------------------------------------------ etiquetas y cifras de resumen */
.vx-etiqueta{display:inline-block;margin:0;padding:2px 10px;border-radius:20px;background:var(--vx-apagado);color:var(--vx-gris);font-size:12px;font-weight:600;line-height:1.5;white-space:nowrap;vertical-align:baseline;}
.vx-etiqueta-listo{background:var(--vx-listo-suave);color:var(--vx-listo);}
.vx-etiqueta-revisar{background:var(--vx-revisar-suave);color:var(--vx-revisar);}
.vx-etiqueta-falta{background:var(--vx-fucsia-suave);color:var(--vx-fucsia-oscuro);}
.vx-etiqueta-aviso{background:var(--vx-turquesa-suave);color:var(--vx-turquesa-oscuro);}
.vx-etiqueta-sin-dato{background:var(--vx-apagado);color:var(--vx-gris);}
.vx-etiquetas{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;padding:0;}
.vx-cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0 0 16px;padding:0;}
.vx-cifra{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;min-width:0;margin:0;padding:14px 16px;border:1px solid var(--vx-raya);border-radius:var(--vx-radio-tarjeta);background:var(--vx-tarjeta);color:var(--vx-tinta);font-family:var(--vx-letra);font-size:14px;line-height:1.4;text-align:left;text-decoration:none;}
button.vx-cifra,a.vx-cifra{cursor:pointer;}
button.vx-cifra:hover,a.vx-cifra:hover{border-color:var(--vx-turquesa);}
.vx-cifra-numero{display:block;margin:0;font-size:26px;font-weight:700;line-height:1.15;color:var(--vx-turquesa-oscuro);font-variant-numeric:tabular-nums;overflow-wrap:anywhere;}
.vx-cifra-rotulo{display:block;margin:2px 0 0;font-size:12.5px;font-weight:400;line-height:1.4;color:var(--vx-gris);}
.vx-cifra-cuidado .vx-cifra-numero{color:var(--vx-fucsia-oscuro);}
/* Los filtros de una lista: pastillas que se prenden y se apagan. */
.vx-pildoras{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px;padding:0;}
.vx-pildora{display:inline-flex;align-items:center;justify-content:center;min-height:32px;margin:0;padding:0 14px;border:1px solid var(--vx-borde);border-radius:22px;background:var(--vx-tarjeta);color:var(--vx-tinta);font-family:var(--vx-letra);font-size:13px;font-weight:500;line-height:1.2;white-space:nowrap;cursor:pointer;}
.vx-pildora:hover{background:#F4F8F9;}
.vx-pildora[aria-pressed="true"],.vx-pildora.vx-escogido{background:var(--vx-turquesa-oscuro);border-color:var(--vx-turquesa-oscuro);color:#fff;}

/* ------------------------------------------------------------------ tarjetas */
.vx-tarjeta{min-width:0;margin:0 0 14px;padding:16px 18px;border:1px solid var(--vx-raya);border-radius:var(--vx-radio-tarjeta);background:var(--vx-tarjeta);color:var(--vx-tinta);}
.vx-tarjeta-titulo{margin:0 0 10px;padding:0;font-size:15px;font-weight:600;line-height:1.3;letter-spacing:0;color:var(--vx-tinta);}
.vx-tarjeta-lista{padding:6px 6px 10px;}
.vx-tarjeta-lista>.vx-tarjeta-titulo{margin:10px 12px 4px;}

/* ------------------------------------------------------------------ avisos */
/* La franja a todo lo ancho, debajo de la barra: para saber, por revisar y alerta (la de alerta se lee fuerte). */
.vx-franja{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 12px;margin:0;padding:8px var(--vx-lado);border-bottom:1px solid var(--vx-raya);background:var(--vx-turquesa-suave);color:var(--vx-turquesa-oscuro);font-family:var(--vx-letra);font-size:13px;font-weight:600;line-height:1.4;text-align:center;}
.vx-franja-revisar{background:var(--vx-revisar-suave);color:var(--vx-revisar);}
.vx-franja-alerta{background:var(--vx-fucsia);border-bottom-color:var(--vx-fucsia);color:#fff;letter-spacing:.2px;}
.vx-franja .vx-boton-enlace,.vx-franja .vx-enlace{color:inherit;}
.vx-franja-fija{position:sticky;top:0;z-index:20;}      /* (la que tiene que seguir a la vista al correr la pantalla) */
/* La nota dentro de una pantalla. */
.vx-nota{margin:0 0 14px;padding:10px 14px;border-left:3px solid var(--vx-turquesa);border-radius:0 var(--vx-radio) var(--vx-radio) 0;background:var(--vx-turquesa-suave);color:var(--vx-tinta);font-size:13px;line-height:1.5;}
.vx-nota-revisar{border-left-color:#B7791F;background:var(--vx-revisar-suave);}
.vx-nota-alerta{border-left-color:var(--vx-fucsia);background:var(--vx-fucsia-suave);}
.vx-nota-listo{border-left-color:var(--vx-listo);background:var(--vx-listo-suave);}
.vx-nota-titulo{display:block;margin:0;font-weight:600;}
/* El aviso que sale en una esquina y se va. */
.vx-avisos{position:fixed;right:16px;bottom:16px;z-index:90;display:flex;flex-direction:column;gap:8px;width:min(360px,calc(100vw - 32px));margin:0;padding:0;pointer-events:none;}
.vx-aviso-flotante{display:flex;align-items:flex-start;gap:10px;margin:0;padding:12px 14px;border:1px solid var(--vx-raya);border-left:4px solid var(--vx-turquesa);border-radius:var(--vx-radio);background:var(--vx-tarjeta);box-shadow:var(--vx-sombra);color:var(--vx-tinta);font-family:var(--vx-letra);font-size:13.5px;line-height:1.45;pointer-events:auto;}
.vx-aviso-flotante>.vx-icono{margin-top:1px;color:var(--vx-turquesa-oscuro);}
.vx-avisos-arriba{top:16px;bottom:auto;}
.vx-aviso-texto{flex:1 1 auto;min-width:0;margin:0;overflow-wrap:anywhere;}
.vx-aviso-linea{margin:0;padding:0;}
.vx-aviso-linea+.vx-aviso-linea{margin-top:4px;}
.vx-aviso-listo{border-left-color:var(--vx-listo);}
.vx-aviso-listo>.vx-icono{color:var(--vx-listo);}
.vx-aviso-alerta{border-left-color:var(--vx-fucsia);}
.vx-aviso-alerta>.vx-icono{color:var(--vx-fucsia-oscuro);}
.vx-aviso-cerrar{display:inline-flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;margin:-6px -8px -6px 0;padding:0;border:0;border-radius:8px;background:none;color:var(--vx-gris);cursor:pointer;}
.vx-aviso-cerrar:hover{background:var(--vx-turquesa-suave);color:var(--vx-turquesa-oscuro);}

/* ------------------------------------------------------------------ diálogos: el de en medio y la hoja que entra de lado */
.vx-dialogo,.vx-hoja{box-sizing:border-box;padding:0;border:0;background:var(--vx-tarjeta);color:var(--vx-tinta);font-family:var(--vx-letra);font-size:14px;line-height:1.5;box-shadow:var(--vx-sombra);overflow:hidden;}
.vx-dialogo:not([open]),.vx-hoja:not([open]){display:none;}
.vx-dialogo[open],.vx-hoja[open]{display:flex;flex-direction:column;}
.vx-dialogo{width:min(480px,calc(100vw - 32px));max-width:none;max-height:calc(100vh - 32px);margin:auto;border-radius:var(--vx-radio-tarjeta);}
.vx-dialogo-ancho{width:min(760px,calc(100vw - 32px));}
.vx-dialogo-muy-ancho{width:min(1080px,calc(100vw - 32px));}
.vx-hoja{width:min(560px,100vw);max-width:none;height:100vh;height:100dvh;max-height:none;margin:0 0 0 auto;border-radius:var(--vx-radio-tarjeta) 0 0 var(--vx-radio-tarjeta);}
.vx-hoja.vx-dialogo-ancho{width:min(760px,100vw);}
.vx-dialogo::backdrop,.vx-hoja::backdrop{background:var(--vx-velo);}
.vx-dialogo-suelto{position:fixed;top:50%;left:50%;z-index:80;transform:translate(-50%,-50%);box-shadow:0 0 0 100vmax var(--vx-velo),var(--vx-sombra);}
.vx-dialogo-cabeza{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none;margin:0;padding:14px 12px 10px 20px;}
.vx-dialogo-titulo{margin:0;padding:0;font-size:17px;font-weight:600;line-height:1.3;letter-spacing:0;color:var(--vx-tinta);}
.vx-dialogo-cerrar{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:11px;background:none;color:var(--vx-gris);cursor:pointer;}
.vx-dialogo-cerrar:hover{background:var(--vx-turquesa-suave);color:var(--vx-turquesa-oscuro);}
.vx-dialogo-cuerpo{flex:1 1 auto;min-height:0;margin:0;padding:2px 20px 16px;overflow-y:auto;overscroll-behavior:contain;}
.vx-dialogo-pie{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;flex:none;margin:0;padding:12px 20px 16px;border-top:1px solid var(--vx-raya);}
.vx-dialogo-pie>.vx-error,.vx-dialogo-pie>.vx-listo,.vx-dialogo-pie>.vx-nota{flex:0 0 100%;margin:0;}
.vx-dialogo-cuerpo>.vx-dialogo-titulo{margin:14px 0 10px;}   /* (un diálogo sin cabeza: el título va de primero en el cuerpo) */

/* ------------------------------------------------------------------ pestañas dentro de una sección */
.vx-pestanas{display:flex;gap:4px;margin:0 0 16px;padding:0;border:0;box-shadow:inset 0 -1px 0 var(--vx-raya);overflow-x:auto;-webkit-overflow-scrolling:touch;}
.vx-pestana{display:inline-flex;align-items:center;gap:7px;flex:none;min-height:var(--vx-alto);margin:0;padding:0 14px;border:0;border-bottom:2px solid transparent;border-radius:8px 8px 0 0;background:none;color:var(--vx-gris);font-family:var(--vx-letra);font-size:13.5px;font-weight:500;line-height:1.2;text-decoration:none;white-space:nowrap;cursor:pointer;}
.vx-pestana:hover{color:var(--vx-turquesa-oscuro);}
.vx-pestana[aria-selected="true"],.vx-pestana[aria-current="page"],.vx-pestana.vx-escogido{border-bottom-color:var(--vx-turquesa);color:var(--vx-turquesa-oscuro);font-weight:600;}
.vx-pestana:focus-visible{outline-offset:-2px;}
.vx-pestana-hoja{margin:0;padding:0;}

/* ------------------------------------------------------------------ el ingreso */
.vx-ingreso{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;margin:0;padding:24px 16px;}
.vx-ingreso-tarjeta{width:100%;max-width:400px;margin:0;padding:26px 26px 24px;border:1px solid var(--vx-raya);border-radius:var(--vx-radio-tarjeta);background:var(--vx-tarjeta);}
.vx-ingreso-modulo{margin:2px 0 16px;padding:0;font-size:17px;font-weight:600;line-height:1.3;letter-spacing:0;color:var(--vx-tinta);}
.vx-ingreso-tarjeta .vx-formulario{gap:12px;}
.vx-ingreso-pie{margin:14px 0 0;padding:0;font-size:12.5px;line-height:1.5;color:var(--vx-gris);}

/* ------------------------------------------------------------------ estados: cargando, vacío y «No se pudo abrir» */
.vx-estado{display:flex;flex-direction:column;align-items:center;gap:8px;margin:0;padding:34px 16px;font-size:13.5px;line-height:1.5;text-align:center;color:var(--vx-gris);}
.vx-estado>.vx-icono{color:var(--vx-turquesa);}
.vx-estado-error>.vx-icono{color:var(--vx-fucsia);}
.vx-estado-texto{margin:0;font-size:14px;font-weight:600;color:var(--vx-tinta);}
.vx-estado-detalle{margin:0;max-width:440px;}
.vx-cargando{display:inline-flex;align-items:center;gap:10px;color:var(--vx-gris);}
.vx-cargando::before{width:18px;height:18px;color:var(--vx-turquesa);}

/* ------------------------------------------------------------------ tablet y celular */
@media(max-width:1024px){
 .vx-boton-chico{min-height:44px;}
 .vx-pildora{min-height:44px;}
 .vx-aviso-cerrar{width:44px;height:44px;margin:-10px -10px -10px 0;}
 /* (el nombre de un renglón de la lista: lo que se toca llega a 44 de alto sin mover nada de lugar. El enlace dentro de un texto, «vx-enlace», se queda en su renglón) */
 .vx-lista-enlace{display:inline-block;margin-top:-12px;margin-bottom:-12px;padding-top:12px;padding-bottom:12px;}
 .vx-boton-enlace{display:inline-flex;align-items:center;min-height:44px;}
}
@media(max-width:900px){
 .vx-marco{grid-template-columns:minmax(0,1fr);gap:16px;}
 .vx-menu{position:static;max-height:none;}
 .vx-barra-menu{display:inline-flex;}
 .vx-formulario-tres,.vx-formulario-cuatro{grid-template-columns:repeat(2,minmax(0,1fr));}
 /* El cajón: el menú del lado entra desde la izquierda, encima de un velo. Lo arma VX.cajon (o VX.barra con «menu»). */
 .vx-menu-cajon{position:fixed;top:0;bottom:0;left:0;z-index:60;width:min(300px,86vw);max-height:none;border-width:0 1px 0 0;border-radius:0 var(--vx-radio-tarjeta) var(--vx-radio-tarjeta) 0;box-shadow:var(--vx-sombra);visibility:hidden;transform:translateX(-105%);}
 .vx-menu-cajon.vx-abierto{visibility:visible;transform:none;}
 .vx-menu-cajon .vx-menu-cabeza{display:flex;}
}
@media(min-width:901px){.vx-velo-cajon{display:none!important;}}
@media(max-width:560px){
 .vx-barra{min-height:56px;gap:0 8px;padding-top:6px;padding-bottom:4px;}
 .vx-barra-menu{order:1;margin-left:-8px;}
 .vx-marca{order:2;margin-right:auto;}
 .vx-palabra{height:34px;margin-top:-6px;}
 .vx-clave{order:3;}
 .vx-salir,.vx-volver{order:4;}
 .vx-barra-raya,.vx-barra-resorte{display:none;}
 .vx-barra-corte{display:block;order:5;flex:0 0 100%;height:0;}
 .vx-barra-modulo{order:6;flex:1 1 0;margin:0;padding:0 0 8px;font-size:15px;}
 .vx-quien{order:7;flex:0 1 auto;max-width:62%;padding:0 0 8px;text-align:right;}
 .vx-atajos{order:8;flex:0 0 100%;padding:0 0 4px;margin-left:-10px;}
 .vx-pregunta{top:54px;}
 .vx-marco{padding-top:16px;padding-bottom:32px;}
 .vx-titulo{font-size:22px;}
 .vx-cifra-numero{font-size:22px;}
 .vx-cifra{padding:12px 14px;}
 .vx-casilla.vx-casilla{font-size:16px;}          /* (con menos, el iPhone acerca la pantalla al tocar una casilla) */
 .vx-formulario-dos,.vx-formulario-tres,.vx-formulario-cuatro{grid-template-columns:minmax(0,1fr);}
 /* (en el celular la lista no aprieta sus columnas: cada dato va en un renglón y la lista corre de lado dentro de su marco. Una columna de
    texto largo se deja partir con «vx-parte») */
 .vx-lista-marco>.vx-lista{width:auto;min-width:100%;}
 .vx-lista-marco>.vx-lista th,.vx-lista-marco>.vx-lista td{white-space:nowrap;}
 .vx-lista-marco>.vx-lista .vx-parte{min-width:200px;white-space:normal;}
 .vx-filtros>.vx-buscador,.vx-filtros>.vx-campo{flex-basis:100%;max-width:none;}
 .vx-tarjeta{padding:14px;}
 .vx-tarjeta-lista{padding:4px 2px 8px;}
 .vx-ingreso-tarjeta{padding:22px 18px 20px;}
 .vx-dialogo-cabeza{padding-left:16px;}
 .vx-dialogo-cuerpo{padding-left:16px;padding-right:16px;}
 .vx-dialogo-pie{padding-left:16px;padding-right:16px;}
 .vx-hoja{border-radius:0;}
 .vx-dato{flex-wrap:wrap;gap:0 16px;}
}

/* ------------------------------------------------------------------ movimiento (con «reducir movimiento», ninguno) */
@keyframes vx-gira{to{transform:rotate(360deg);}}
@keyframes vx-entra-lado{from{transform:translateX(40px);opacity:0;}to{transform:none;opacity:1;}}
@keyframes vx-entra{from{transform:translateY(8px);opacity:0;}to{transform:none;opacity:1;}}
@media(prefers-reduced-motion:no-preference){
 .vx-boton.vx-ocupado::before,.vx-cargando::before{animation:vx-gira .8s linear infinite;}
 .vx-hoja[open]{animation:vx-entra-lado .18s ease-out;}
 .vx-dialogo[open],.vx-aviso-flotante{animation:vx-entra .15s ease-out;}
 .vx-menu-cajon{transition:transform .2s ease-out,visibility 0s linear .2s;}
 .vx-menu-cajon.vx-abierto{transition:transform .2s ease-out,visibility 0s;}
}

/* ------------------------------------------------------------------ al imprimir */
/* La barra, el menú, el cajón, los avisos flotantes y el fondo no salen. El estilo no cambia nada más de lo que se imprime (el contenido pasa
   a ocupar el ancho que dejó el menú: sin eso se quedaría en su columna angosta). */
@media print{
 body::before{display:none!important;}
 .vx-dialogo::backdrop,.vx-hoja::backdrop{background:none;}
 .vx-barra,.vx-menu,.vx-velo,.vx-avisos{display:none!important;}
 .vx-marco{display:block;padding:0;}
}