/* ═══════════════════════════════════════════════════════════════════════════
   VIVERO · Reportes — LA LÍNEA DE LUJO (2026-09-21)
   Visión Integral de Ventas por Ejecutivo, Red de clientes y Operadores (app7).
   ───────────────────────────────────────────────────────────────────────────
   El concepto: el vivero, donde crece lo que se siembra. Cada vista abre con una foto de
   vivero (de la semilla al invernadero) y su título en Marcellus; todo lo demás, en tinta,
   dentro del libro de marca: tinta #1A2633, deep #005565, teal #006D82, salvia #7D9B5B
   (sólo relleno), crema #EADFCE y blanco; ocre #8A6A2F y rojo #B3261E como andamiaje.
   Sin negrita ni itálica. Velo de foto de 0 a 45 %. Una sola sombra.
   Se carga DESPUÉS de vivero-aria-lujo.css (la paleta general de Tailwind en tinta).
   ES REVERSIBLE: se borran sus <link>/<script> en index.html.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{ --v-tinta:#1A2633; --v-hondo:#141D27; --v-hoja:#222E3A; --v-deep:#005565; --v-teal:#006D82; --v-salvia:#7D9B5B; --v-crema:#EADFCE;
  --v-crema70:rgba(234,223,206,.70); --v-filete:rgba(234,223,206,.16); --v-filete-s:rgba(234,223,206,.09);
  --v-glare:Marcellus, 'PP Fragment Glare', Georgia, serif; --v-sans:Figtree, 'PP Fragment Sans', Inter, system-ui, sans-serif;
  --v-sombra:0 30px 70px -18px rgba(26,38,51,.62); }

/* ── 1 · Suelo, letra y peso ─────────────────────────────────────────────── */
html.vivero-lujo body{ background:var(--v-tinta) !important; color:var(--v-crema) !important; font-family:var(--v-sans) !important; }
html.vivero-lujo body *{ font-weight:400 !important; font-style:normal !important; }
html.vivero-lujo h1, html.vivero-lujo h2, html.vivero-lujo h3, html.vivero-lujo h4, html.vivero-lujo .font-display{ font-family:var(--v-glare) !important; letter-spacing:.01em !important; }
html.vivero-lujo .font-mono{ font-family:ui-monospace, Menlo, monospace !important; }
#main-app, #main-app > main{ background:var(--v-tinta) !important; }
/* Sin barras de desplazamiento a la vista, en ninguna parte (Luis, 2026-09-30): todo se sigue
   desplazando con la rueda, el dedo o el teclado. */
html.vivero-lujo, html.vivero-lujo *{ scrollbar-width:none; }
html.vivero-lujo ::-webkit-scrollbar{ display:none; }

/* ── 2 · El login: el invernadero ────────────────────────────────────────── */
#login-screen{ background-image:url('fotos/1528029952370-e5f8eda89ee5.webp') !important;
  background-position:center 60% !important; }
#login-screen > .absolute.inset-0{ background:linear-gradient(180deg, rgba(26,38,51,.18) 0%, rgba(26,38,51,.18) 45%, rgba(26,38,51,.45) 100%) !important; }
#login-screen .glass-box{ background:rgba(26,38,51,.45) !important; border:1px solid rgba(255,255,255,.22) !important; border-radius:18px !important;
  box-shadow:var(--v-sombra) !important; backdrop-filter:blur(18px) !important; -webkit-backdrop-filter:blur(18px) !important; max-width:360px !important; }
#login-screen .glass-box > img:not(.viv-marca){ display:none !important; }
#login-screen .viv-marca{ display:block; width:44px; height:44px; margin:0 auto .9rem; }
#login-screen h1{ font-family:var(--v-glare) !important; font-size:2.6rem !important; letter-spacing:.2em !important; padding-left:.2em; line-height:1 !important; color:#FFFFFF !important; text-shadow:none !important; }
#login-screen h1 + p{ margin-top:.7rem !important; margin-bottom:1.6rem !important; font-size:.64rem !important; letter-spacing:.34em !important; color:rgba(255,255,255,.85) !important; }
#login-screen .viv-sigla{ display:block; margin:.2rem 0 1.4rem; font-size:.72rem; line-height:1.45; color:rgba(255,255,255,.80); }
#login-screen .login-input{ background:#FFFFFF !important; color:var(--v-tinta) !important; border-radius:99px !important; border:1px solid transparent !important; }
#login-screen .login-input::placeholder{ color:rgba(26,38,51,.55) !important; opacity:1; }
#login-screen .login-input:focus{ border-color:var(--v-teal) !important; box-shadow:0 0 0 3px rgba(0,109,130,.25) !important; }
#login-screen .material-icons-outlined.text-oro-700, #login-screen form .text-slate-400{ color:var(--v-deep) !important; }
#login-screen button[type=submit]{ background:var(--v-deep) !important; animation:none !important; border-radius:99px !important; letter-spacing:.18em !important;
  box-shadow:none !important; transform:none !important; }
#login-screen button[type=submit]:hover{ background:var(--v-teal) !important; }
#login-screen .text-amber-200, #login-screen .text-amber-300{ color:var(--v-crema) !important; }
#login-screen hr{ border-color:rgba(255,255,255,.22) !important; }

/* ── 3 · El riel ─────────────────────────────────────────────────────────── */
#main-sidebar.bg-oro-insignia{ background:var(--v-hondo) !important; animation:none !important; border-right:1px solid rgba(234,223,206,.10) !important; box-shadow:none !important; }
#main-sidebar > div:first-child{ padding:2rem 1.2rem 1.1rem !important; border-bottom-color:rgba(234,223,206,.10) !important; }
#main-sidebar > div:first-child > .absolute{ display:none; }
#main-sidebar > div:first-child > img:not(.viv-logo){ display:none !important; }
#main-sidebar .viv-logo{ display:block; height:36px; width:auto; margin:0 auto .85rem; }
#main-sidebar h2{ font-family:var(--v-sans) !important; font-size:.66rem !important; letter-spacing:.3em !important; text-transform:uppercase; color:var(--v-crema70) !important; }
#main-sidebar .viv-sigla{ display:block; margin-top:.45rem; font-size:.62rem; line-height:1.4; color:rgba(234,223,206,.55); }
#main-sidebar .user-glass-pill{ background:rgba(234,223,206,.06) !important; border:1px solid var(--v-filete) !important; backdrop-filter:none !important; margin-top:1rem !important; }
#main-sidebar .user-glass-pill .rounded-full.bg-sky-500\/20{ background:var(--v-deep) !important; border-color:transparent !important; }
#display-user-name{ color:var(--v-crema) !important; }
#main-sidebar nav{ padding:1rem .8rem !important; gap:2px !important; }
#main-sidebar .viv-grupo{ display:flex; align-items:center; gap:.7rem; padding:.2rem .95rem .6rem; font-size:.6rem; letter-spacing:.26em; text-transform:uppercase; color:rgba(234,223,206,.62); }
#main-sidebar .viv-grupo::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg, rgba(234,223,206,.16), transparent); }
.sidebar-link{ border-left:0 !important; border-radius:99px !important; padding:.55rem .95rem !important; color:var(--v-crema70) !important;
  transition:background-color 120ms linear, color 120ms linear !important; }
.sidebar-link .material-icons-outlined{ color:var(--v-crema70); text-shadow:none !important; transform:none !important; margin-right:.85rem !important; }
.sidebar-link > span:last-child{ font-size:.84rem !important; letter-spacing:.01em !important; }
.sidebar-link:hover{ background:rgba(234,223,206,.06) !important; color:var(--v-crema) !important; }
.sidebar-link.active{ background:linear-gradient(90deg, rgba(0,109,130,.42), rgba(0,109,130,.10)) !important; color:#FFFFFF !important;
  box-shadow:inset 0 0 0 1px rgba(234,223,206,.10); }
.sidebar-link.active .material-icons-outlined, .sidebar-link:hover .material-icons-outlined{ color:#FFFFFF; }
#main-sidebar > div:last-child{ background:transparent !important; backdrop-filter:none !important; border-top-color:rgba(234,223,206,.10) !important; padding:1rem 1.1rem 1.1rem !important; }
#ui-lang-switcher{ background:rgba(234,223,206,.06) !important; border:1px solid var(--v-filete) !important; }
.lang-btn{ color:var(--v-crema70) !important; }
.lang-btn.active{ background:var(--v-deep) !important; color:#FFFFFF !important; box-shadow:none !important; }
#mobile-menu-toggle{ background:rgba(26,38,51,.45) !important; animation:none !important; border:1px solid rgba(255,255,255,.28) !important;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:none !important; }

/* ── 4 · La cabecera de cada vista: una foto de vivero, empotrada como en CIMA ──
   Va a sangre —de borde a borde, pegada arriba, sin recuadro— y el contenido sigue debajo
   sobre la tinta. El velo del libro: tinta arriba para la ceja, limpia al medio y 45 % abajo. */
.viv-cab{ position:relative; isolation:isolate; overflow:hidden; min-height:232px; margin:-2rem -2rem 2rem !important;
  padding:2.2rem 2.25rem 1.7rem !important; align-items:flex-end !important; border:0; border-radius:0; background:var(--v-hondo); gap:1.2rem 1.5rem !important; }
/* dos capas de foto que se funden una en la otra; la activa además se acerca muy despacio */
.viv-cab__foto{ position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center; opacity:0; transform:scale(1.06);
  transition:opacity 1.6s cubic-bezier(.22,.9,.24,1), transform 10s linear; }
.viv-cab__foto.activa{ opacity:1; transform:scale(1); }
.viv-cab__velo{ position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(26,38,51,.45) 0%, rgba(26,38,51,.12) 38%, rgba(26,38,51,0) 45%, rgba(26,38,51,.45) 100%); }
.viv-cab > div:first-of-type{ align-self:flex-end; }
.viv-cab__ceja{ display:block; margin-bottom:.7rem; font-family:var(--v-sans); font-size:.66rem; letter-spacing:.26em; text-transform:uppercase; color:rgba(255,255,255,.80); }
.viv-cab h1{ font-family:var(--v-glare) !important; font-size:2.9rem !important; line-height:1.05 !important; color:#FFFFFF !important; letter-spacing:-.005em !important; text-wrap:balance; }
.viv-cab h1 + p{ margin-top:.55rem !important; font-size:.9rem !important; line-height:1.45 !important; letter-spacing:.01em !important; text-transform:none !important;
  color:rgba(255,255,255,.80) !important; max-width:62ch; }
/* los botones de la cabecera, como pastillas de vidrio sobre la foto (igual que en CIMA) */
.viv-cab button, .viv-cab select, .viv-cab a.px-4{ border-radius:99px !important; background:rgba(26,38,51,.45) !important; color:#FFFFFF !important;
  border:1px solid rgba(255,255,255,.28) !important; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:none !important; padding:.55rem 1.05rem !important; }
.viv-cab button:hover{ border-color:#FFFFFF !important; }
.viv-cab select option{ background:#222E3A; color:#EADFCE; }
.viv-cab input{ border-radius:99px !important; background:rgba(26,38,51,.55) !important; color:#FFFFFF !important; border:1px solid rgba(255,255,255,.28) !important; }
.viv-cab input::placeholder{ color:rgba(255,255,255,.7) !important; }
.viv-cab .material-icons-outlined{ color:inherit !important; }
.view-section > button:first-child{ position:relative; z-index:2; }

/* ── 4b · Ventas y embudo (se mudó de CIMA) ─────────────────────────────── */
.viv-fuente{ margin:-.8rem 0 1.4rem; font-size:.74rem; color:var(--v-crema70); }
.viv-met-cab{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin:0 0 .6rem; }
.viv-met-ventana{ font-size:.7rem; color:var(--v-crema70); font-variant-numeric:tabular-nums; }
.viv-met-rejilla{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:.8rem; margin-bottom:.4rem; }
.viv-met{ position:relative; background:var(--v-hoja); border:1px solid var(--v-filete); border-radius:14px; padding:1.1rem 1.2rem 1.1rem 1.35rem; }
.viv-met::before{ content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:0 3px 3px 0; background:#ACA8A0; }
.viv-met--en::before{ background:#7D9B5B; } .viv-met--bajo::before{ background:#B3261E; } .viv-met--sobre::before{ background:#B8904F; }
.viv-met--neutro::before{ background:#006D82; } .viv-met--apagado::before{ background:rgba(234,223,206,.22); }
.viv-met__cab{ display:flex; align-items:flex-start; justify-content:space-between; gap:.6rem; }
.viv-met__cab h4{ margin:0; font-family:var(--v-sans) !important; font-size:.84rem !important; line-height:1.35; color:var(--v-crema) !important; letter-spacing:.01em !important; }
.viv-met-estado{ flex-shrink:0; padding:.15rem .55rem; border-radius:99px; font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--v-crema);
  background:rgba(234,223,206,.08); }
.viv-met-estado--en{ background:rgba(125,155,91,.34); } .viv-met-estado--bajo{ background:rgba(179,38,30,.40); }
.viv-met-estado--sobre{ background:rgba(138,106,47,.48); } .viv-met-estado--neutro{ background:rgba(0,109,130,.40); }
html.vivero-lujo .viv-met__valor{ margin:.45rem 0 .1rem; font-family:var(--v-sans); font-size:2.3rem; line-height:1.05; font-weight:300 !important; color:#FFFFFF;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.viv-met--apagado .viv-met__valor{ color:var(--v-crema70); }
.viv-met__u{ font-size:.9rem; color:var(--v-crema70); }
.viv-met__pie{ font-size:.76rem; color:var(--v-crema70); font-variant-numeric:tabular-nums; }
.viv-met-nota{ margin-top:.55rem; font-size:.72rem; line-height:1.5; color:var(--v-crema70); }
.viv-met-rot{ color:var(--v-crema); }
.viv-met-chip{ display:inline-block; margin-top:.4rem; padding:.12rem .55rem; border-radius:99px; border:1px solid var(--v-filete); font-size:.64rem; color:var(--v-crema70); }
.viv-met-aviso{ margin-top:.6rem; padding:.45rem .7rem; border-radius:9px; background:rgba(138,106,47,.28); font-size:.72rem; line-height:1.45; color:var(--v-crema); }
.viv-ab-gana td{ color:#FFFFFF !important; background:rgba(125,155,91,.14); }
.viv-ficha{ width:100%; max-width:56rem; max-height:88vh; overflow-y:auto; background:var(--v-hoja); border:1px solid var(--v-filete); border-radius:14px;
  box-shadow:var(--v-sombra); padding:1.6rem 1.8rem; }
.viv-ficha__cab{ display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; flex-wrap:wrap; margin-bottom:1.2rem; }
.viv-ficha__cab h3{ margin:0; font-size:1.6rem !important; color:#FFFFFF !important; }
.viv-ficha__cab p{ margin-top:.2rem; font-size:.7rem; color:var(--v-crema70); }
.viv-ficha__acc{ display:flex; gap:.5rem; }
.viv-ficha__acc button{ display:inline-flex; align-items:center; gap:.35rem; padding:.5rem 1rem; border-radius:99px; border:1px solid var(--v-filete); color:var(--v-crema); background:transparent; cursor:pointer; }
.viv-ficha__acc button:first-child{ background:var(--v-deep); border-color:var(--v-deep); color:#FFFFFF; }
.viv-ficha__cols{ columns:2 20rem; column-gap:1.6rem; font-size:.84rem; line-height:1.55; color:var(--v-crema); }
.viv-ficha__bloque{ break-inside:avoid; margin-bottom:1rem; }
.viv-ficha__bloque h4{ margin:0 0 .3rem; font-family:var(--v-sans) !important; font-size:.62rem !important; letter-spacing:.24em !important; text-transform:uppercase; color:#7D9B5B !important; }
.viv-ficha__bloque ul, .viv-ficha__bloque ol{ padding-left:1.1rem; }
@media print{
  body > *:not(#vemFichaCaja){ display:none !important; }
  #vemFichaCaja{ position:static !important; background:none !important; display:block !important; opacity:1 !important; }
  .viv-ficha{ max-height:none; overflow:visible; box-shadow:none; border:0; background:#FFFFFF; }
  .viv-ficha *{ color:#1A2633 !important; }
  .no-imprimir{ display:none !important; }
}

/* ── 5 · Las piezas del panel, en tinta ──────────────────────────────────── */
.input-field{ background:rgba(234,223,206,.05) !important; border:1px solid var(--v-filete) !important; color:var(--v-crema) !important; border-radius:9px; }
.input-field:focus{ border-color:var(--v-teal) !important; box-shadow:0 0 0 3px rgba(0,109,130,.25) !important; }
.fin-stat-card, .fin-table-wrap, .fin-desglose, .fin-ms-panel{ background:var(--v-hoja) !important; border:1px solid var(--v-filete) !important; box-shadow:none !important; }
.fin-table-wrap, .fin-desglose, .fin-stat-card{ border-radius:14px !important; }
.fin-ms-panel{ box-shadow:var(--v-sombra) !important; }
.fin-stat-label{ color:var(--v-crema70) !important; letter-spacing:.2em !important; }
.fin-stat-value{ color:#FFFFFF !important; }
.fin-table th{ background:#26323E !important; color:var(--v-crema70) !important; letter-spacing:.16em !important; border-bottom:1px solid var(--v-filete) !important; }
.fin-table td{ border-bottom:1px solid var(--v-filete-s) !important; color:var(--v-crema); }
.fin-table tr.fin-row-clickable:hover, .fin-table tbody tr:hover{ background:rgba(234,223,206,.04) !important; }
.fin-sticky-bar{ background:var(--v-tinta) !important; }
.fin-section-label{ color:var(--v-crema70) !important; letter-spacing:.24em !important; }
.fin-section-label::after{ background:linear-gradient(90deg, var(--v-filete), transparent) !important; }
.fin-iva-table th{ color:var(--v-crema70) !important; }
.fin-iva-table td{ color:var(--v-crema) !important; border-top-color:var(--v-filete-s) !important; }
.fin-iva-table tr.fin-iva-total td{ color:#FFFFFF !important; border-top-color:var(--v-filete) !important; }
.fin-desglose-head{ border-bottom-color:var(--v-filete) !important; color:var(--v-crema70) !important; background:transparent !important; }
.fin-desglose-row{ border-bottom-color:var(--v-filete-s) !important; }
.fin-desglose-row > span:first-child{ color:var(--v-crema70) !important; }
.fin-desglose-row > span:last-child{ color:var(--v-crema) !important; }
.fin-desglose-row.fin-desglose-total{ background:rgba(234,223,206,.05) !important; border-top-color:var(--v-filete) !important; }
.fin-desglose-row.fin-desglose-total > span{ color:#FFFFFF !important; }
.fin-desglose-nota{ color:var(--v-crema70) !important; }
.fin-cell-money{ color:var(--v-crema) !important; }
.fin-cell-money small, .fin-cell-money small b{ color:var(--v-crema70) !important; }
.fin-bar{ background:rgba(234,223,206,.08) !important; }
.fin-bar > i{ background:var(--acc, #006D82) !important; }
/* pastillas de estado: rellenos de marca con letra crema */
.fin-badge, .fin-pct-badge, .fin-conf-badge, .fin-delta{ border-radius:99px !important; letter-spacing:.08em !important; }
.fin-badge-costo, .fin-delta-down{ background:rgba(179,38,30,.38) !important; color:var(--v-crema) !important; }
.fin-badge-utilidad_pura, .fin-badge-pagado, .fin-delta-up{ background:rgba(125,155,91,.34) !important; color:var(--v-crema) !important; }
.fin-badge-comision, .fin-pct-badge, .fin-conf-badge{ background:rgba(0,109,130,.40) !important; color:var(--v-crema) !important; }
.fin-badge-provision, .fin-badge-parcial{ background:rgba(138,106,47,.45) !important; color:var(--v-crema) !important; }
.fin-badge-pendiente, .fin-delta-flat{ background:rgba(234,223,206,.08) !important; color:var(--v-crema70) !important; }
.fin-combo-header{ background:rgba(125,155,91,.10) !important; }
/* pestañas y botones: pastillas */
.fin-tabs{ background:rgba(234,223,206,.05) !important; border:1px solid var(--v-filete-s); border-radius:99px !important; padding:3px !important; }
.fin-tab{ border-radius:99px !important; color:var(--v-crema70) !important; letter-spacing:.04em; }
.fin-tab:hover{ background:rgba(234,223,206,.06) !important; color:var(--v-crema) !important; }
.fin-tab.active{ background:var(--v-deep) !important; color:#FFFFFF !important; border-color:transparent !important; box-shadow:none !important; }
.fin-btn-excel{ border-radius:99px !important; background:transparent !important; color:var(--v-crema) !important; border:1px solid var(--v-filete) !important; }
.fin-btn-excel:hover{ border-color:var(--v-crema70) !important; background:rgba(234,223,206,.05) !important; }
.fin-vacio{ color:var(--v-crema70) !important; }
.fin-vacio .material-icons-outlined{ color:rgba(234,223,206,.28) !important; }
.fin-evid-thumb, .fin-evid-thumb-more{ border-color:var(--v-tinta) !important; background:var(--v-hoja) !important; color:var(--v-crema) !important; box-shadow:none !important; }
#fin-lightbox{ background:rgba(20,29,39,.97) !important; }
.lb-close-v:hover{ color:var(--v-crema) !important; }
/* los botones de Tailwind con relleno de acción: pastillas deep */
html.vivero-lujo main button.rounded-xl, html.vivero-lujo main a.rounded-xl{ border-radius:99px !important; }
html.vivero-lujo .shadow-sm, html.vivero-lujo .shadow, html.vivero-lujo .shadow-md, html.vivero-lujo .shadow-lg{ box-shadow:none !important; }
html.vivero-lujo .hover\:scale-105:hover, html.vivero-lujo .hover\:scale-110:hover{ transform:none !important; }

/* EL BOTÓN DE LA DEPURACIÓN, hermano del del tema en la fila de accesos (2026-09-30). Lleva la
   clase del botón del tema, así que mide y se viste igual sin escribir nada acá. Solo existe para
   quien tiene el permiso: la app pone `con-depuracion` en el <body>.
   Con el riel angosto van UNO DEBAJO DEL OTRO, a su tamaño de siempre (Luis, 2026-09-30: «no
   uno al lado del otro… como son dos hay suficiente espacio»). El del tema queda arriba, en la
   misma coordenada que tiene para quien no ve este botón.
   Solo desde 1100px, que es donde el riel angosto existe (prisma-riel.css): por debajo el menú
   es el cajón entero aunque el <body> conserve `riel-angosto`, y ahí van lado a lado bajo el
   nombre, como con el riel abierto. */
#fin-depuracion-btn{ display:none; }
body.con-depuracion #fin-depuracion-btn{ display:inline-flex; }
@media (min-width:1100px){
  body.riel-angosto.con-depuracion .pz-accesos{ flex-direction:column; }
  body.riel-angosto.con-depuracion #fin-depuracion-btn{ order:2; }
}
/* La tabla de la ventana de depuración se desliza de lado en el celular (la base de
   `.fin-table-wrap` recorta): sin esto el motivo y el botón de devolver quedaban fuera. */
#fin-depuracion-modal .fin-table-wrap{ overflow-x:auto !important; }

/* los modales y el aviso */
.modal-container{ background:rgba(20,29,39,.78) !important; }
#confirmation-content{ background:var(--v-hoja) !important; border:1px solid var(--v-filete) !important; box-shadow:var(--v-sombra) !important; border-radius:14px !important; }
#confirmation-content > div:first-child.bg-oro-insignia, .modal-container .bg-oro-insignia{ background:transparent !important; animation:none !important; border-bottom:1px solid var(--v-filete) !important; }
/* Los botones de relleno del cuerpo de una ventana (2026-09-30). La regla de arriba es para la
   FRANJA del título, que no lleva relleno, pero por clase alcanzaba también a los botones
   `bg-oro-insignia` de adentro: quedaban sin fondo y, en claro, con la letra blanca sobre el
   papel. Van en deep, como el de confirmar. */
.modal-container button.bg-oro-insignia{ background:var(--v-deep) !important; border-bottom:0 !important; border-radius:99px !important; }
#confirmation-content h3{ font-family:var(--v-glare) !important; font-size:1.35rem !important; }
#btn-confirm-ok{ background:var(--v-deep) !important; border-radius:99px !important; box-shadow:none !important; letter-spacing:.14em !important; }
#toast{ border-radius:99px !important; box-shadow:var(--v-sombra) !important; }
#loader{ background:rgba(20,29,39,.94) !important; }
#loader img{ display:none; }
#loader .viv-carga{ width:54px; height:54px; animation:vivGira 4s linear infinite; }
@keyframes vivGira{ to{ transform:rotate(360deg); } }
#loader p{ color:var(--v-crema70) !important; letter-spacing:.3em !important; }

/* ── 6 · El celular ──────────────────────────────────────────────────────── */
@media (max-width:767px){
  .viv-cab{ min-height:200px; padding:4.2rem 1.1rem 1.2rem !important; margin:-1rem -1rem 1.3rem !important; }
  .viv-cab{ align-items:stretch !important; justify-content:flex-end !important; }   /* en columna: todo a la izquierda */
  .viv-cab > div{ width:100%; justify-content:flex-start !important; }
  .viv-cab h1{ font-size:2rem !important; }
  .viv-cab h1 + p{ font-size:.82rem !important; }
  #main-app > main > .view-section{ padding-top:1rem !important; }
  #mobile-menu-toggle{ top:1rem !important; left:1rem !important; right:auto !important; width:42px !important; height:42px !important; }   /* a la izquierda, donde sale el menú */
  #main-sidebar > div:first-child{ padding-top:4.6rem !important; }   /* aire para el botón, que queda encima del menú abierto */
  /* las tablas, fichas de dos columnas: sin deslizar de lado */
  table.viv-fichas thead{ display:none; }
  table.viv-fichas, table.viv-fichas tbody{ display:block; width:100%; }
  table.viv-fichas tr{ display:grid; grid-template-columns:1fr 1fr; gap:.55rem .9rem; padding:.9rem 1rem; border-bottom:1px solid var(--v-filete-s); }
  table.viv-fichas td{ display:block; padding:0 !important; border:0 !important; min-width:0; overflow-wrap:anywhere; }
  table.viv-fichas td::before{ content:attr(data-rotulo); display:block; margin-bottom:.15rem; font-size:.56rem; letter-spacing:.18em; text-transform:uppercase; color:var(--v-crema70); }
  table.viv-fichas td:first-child{ grid-column:1 / -1; font-size:.95rem; color:#FFFFFF; }
  table.viv-fichas td:first-child::before{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .viv-cab__foto{ transition:none !important; transform:none !important; } #loader .viv-carga{ animation:none !important; }
}

/* El riel, pieza por pieza como el de VIVERO (el modelo): el nombre en versalitas finas, el
   ícono de la persona en blanco dentro de su círculo, y el pie en crema tenue. */
#main-app #main-sidebar h2, #main-app #main-sidebar h2.font-display{ font-family:Figtree, 'PP Fragment Sans', Inter, system-ui, sans-serif !important; font-size:.66rem !important;
  letter-spacing:.3em !important; text-transform:uppercase !important; color:rgba(234,223,206,.70) !important; }
#main-sidebar .user-glass-pill .rounded-full .material-icons-outlined{ color:#FFFFFF !important; }
#main-sidebar > div:last-child p{ color:rgba(234,223,206,.55) !important; letter-spacing:.3em !important; }
#main-sidebar > div:last-child p + p{ letter-spacing:.02em !important; text-transform:none !important; }

/* ── 20 · El refresco: más suave, que no canse (Luis) ───────────────────────
   Todas las secciones. Menos marcos y menos contraste entre bloques: las tarjetas son hojas
   tenues sobre la tinta, sin la barra de color a la izquierda (el color queda en su ícono);
   los rótulos con menos tracking; ninguna letra mono (las cifras en Figtree, parejas); las
   tablas como un libro, sin cabecera en bloque, y la de reservas cabe sin deslizar de lado. */
html.vivero-lujo .font-mono{ font-family:var(--v-sans) !important; font-variant-numeric:tabular-nums; letter-spacing:0 !important; }
html.vivero-lujo .fin-stat-card, html.vivero-lujo .fin-desglose{ background:rgba(234,223,206,.028) !important; border-color:rgba(234,223,206,.08) !important; border-radius:16px !important; }
html.vivero-lujo .fin-stat-label{ letter-spacing:.12em !important; }
html.vivero-lujo .fin-section-label{ letter-spacing:.14em !important; }
/* los desgloses: filas con aire y sin rayas duras; el total apenas marcado */
html.vivero-lujo .fin-desglose-head{ letter-spacing:.12em !important; border-bottom-color:rgba(234,223,206,.08) !important; }
html.vivero-lujo .fin-desglose-row{ border-bottom-color:rgba(234,223,206,.05) !important; }
html.vivero-lujo .fin-desglose-row.fin-desglose-total{ background:transparent !important; border-top-color:rgba(234,223,206,.14) !important; }
/* las tablas, como un libro: sin fondo, cabecera sin bloque, cifras parejas */
html.vivero-lujo .fin-table-wrap{ background:transparent !important; border-color:rgba(234,223,206,.08) !important; }
html.vivero-lujo .fin-table th{ background:var(--v-tinta) !important; letter-spacing:.08em !important; font-size:.6rem !important; line-height:1.35;
  color:rgba(234,223,206,.55) !important; border-bottom-color:rgba(234,223,206,.12) !important; padding:.8rem .6rem .7rem !important; }
html.vivero-lujo .fin-table td{ border-bottom-color:rgba(234,223,206,.05) !important; padding:.75rem .6rem !important; }
html.vivero-lujo .fin-table tbody tr:nth-child(even){ background:transparent !important; }
html.vivero-lujo .fin-table tbody tr:hover{ background:rgba(234,223,206,.03) !important; }
html.vivero-lujo .fin-cell-money small{ font-size:.66rem !important; color:rgba(234,223,206,.45) !important; }
/* botones: sin el tracking ancho que heredaban; el de Excel, una pastilla limpia */
html.vivero-lujo main button{ letter-spacing:.02em !important; }
html.vivero-lujo .fin-btn-excel{ display:inline-flex !important; align-items:center; gap:.35rem; padding:.4rem .9rem !important; font-size:.72rem !important; }
html.vivero-lujo .fin-btn-excel:hover{ border-color:rgba(234,223,206,.34) !important; background:rgba(234,223,206,.05) !important; }
/* el degradado azul de los botones de sincronizar: fuera de marca → deep */
html.vivero-lujo main .bg-oro-insignia{ background:var(--v-deep) !important; background-image:none !important; animation:none !important; box-shadow:none !important; }

/* ── 21 · EL RESUMEN GENERAL Y EL DETALLE DE UNA RESERVA, COMO TABLERO (Luis, 2026-09-30) ──────
   La maqueta que Luis aprobó (0 proyecto/maquetas/vivero-resumen): los filtros arriba; la venta
   en grande con utilidad, costo y comisiones; «Dónde está la plata» en tres rieles; lo que pide
   atención; mes a mes; lo que viene; y la tabla. El detalle: la reserva sobre la foto, su ficha,
   el ciclo de cada servicio y el itinerario por día del viaje, con su evidencia.
   Todo lee estas variables, puestas en las dos vistas: el teal y el claro sólo las cambian. */
#view-resumen, #view-bk-detalle, #view-ventas, #view-ventas-proveedor, #view-cotizaciones, #view-comisiones-nuba, #view-comisiones-virtuoso, #view-actualizacion-proveedores{
  --vr-f:#FFFFFF; --vr-tx:var(--v-crema); --vr-tx70:var(--v-crema70); --vr-tx55:rgba(234,223,206,.55);
  --vr-filete:rgba(234,223,206,.16); --vr-filete-s:rgba(234,223,206,.08); --vr-pista:rgba(234,223,206,.09);
  --vr-hoja:rgba(234,223,206,.028); --vr-hoja-borde:rgba(234,223,206,.09);
  --vr-entra:var(--v-salvia); --vr-sale:#2A93A8; --vr-fact:rgba(234,223,206,.55);
  --vr-rojo-f:rgba(179,38,30,.42); --vr-ocre-f:rgba(138,106,47,.55); --vr-entra-f:rgba(125,155,91,.30);
  --vr-ev:#26323E; }
html[data-tema="teal"] #view-resumen, html[data-tema="teal"] #view-bk-detalle, html[data-tema="teal"] #view-ventas, html[data-tema="teal"] #view-ventas-proveedor, html[data-tema="teal"] #view-cotizaciones, html[data-tema="teal"] #view-comisiones-nuba, html[data-tema="teal"] #view-comisiones-virtuoso, html[data-tema="teal"] #view-actualizacion-proveedores{
  --vr-tx55:rgba(255,255,255,.70); --vr-filete:rgba(234,223,206,.22); --vr-filete-s:rgba(234,223,206,.12);
  --vr-pista:rgba(255,255,255,.13); --vr-hoja:rgba(255,255,255,.05); --vr-hoja-borde:rgba(234,223,206,.16);
  --vr-sale:#EADFCE; --vr-fact:rgba(255,255,255,.5); --vr-rojo-f:rgba(179,38,30,.60); --vr-ocre-f:rgba(138,106,47,.70);
  --vr-entra-f:rgba(183,204,154,.28); --vr-ev:#0A5A6A; }
#view-resumen > section, #view-ventas > section, #view-ventas-proveedor > section, #view-cotizaciones > section, #view-comisiones-nuba > section, #view-comisiones-virtuoso > section, #view-actualizacion-proveedores > section, #view-bk-detalle #fin-bk-detalle-content > section{ margin-top:1.4rem; }
.vr-rot{ font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--vr-tx70); }
.vr-nota{ display:block; font-size:.74rem; color:var(--vr-tx55); }
.vr-num{ font-variant-numeric:tabular-nums; }
.vr-f{ color:var(--vr-f); }
.vr-der{ text-align:right !important; }
.vr-entra{ background:var(--vr-entra); } .vr-sale{ background:var(--vr-sale); } .vr-fact{ background:var(--vr-fact); }
.vr-hoja{ background:var(--vr-hoja); border:1px solid var(--vr-hoja-borde); border-radius:16px; padding:1.5rem 1.6rem; }
.vr-sec-cab{ display:flex; justify-content:space-between; align-items:flex-end; gap:1rem 2rem; flex-wrap:wrap; margin-bottom:1.3rem; }
.vr-sec-cab h2, .vr-rieles h2, .vd-ficha h2{ font-size:1.45rem !important; line-height:1.15; color:var(--vr-f) !important; }
.vr-sec-cab p{ margin-top:.3rem; font-size:.8rem; color:var(--vr-tx70); max-width:68ch; }
.vr-cifra-xl{ font-family:var(--v-glare); font-size:4.4rem; line-height:1; color:var(--vr-f); letter-spacing:-.015em; margin:.35rem 0 .5rem; }
.vr-cifra-xl small, .vr-cifra-l small{ font-size:.42em; color:var(--vr-tx55); letter-spacing:0; margin-left:.04em; }
.vr-cifra-l{ font-family:var(--v-glare); font-size:2rem; line-height:1.05; color:var(--vr-f); margin:.35rem 0 .3rem; }
.vr-cifra-m{ font-family:var(--v-glare); font-size:1.45rem; line-height:1.1; color:var(--vr-f); margin:.3rem 0 .15rem; }
.vr-marca{ display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:.55rem; vertical-align:1px; }
.vr-marca--rojo{ background:#B3261E; } .vr-marca--ocre{ background:#8A6A2F; } .vr-marca--tinta{ background:var(--vr-fact); }

/* los filtros, arriba: mandan sobre todo lo de abajo */
.vr-filtros{ position:sticky; top:0; z-index:25; display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; margin:-2rem -2rem 0; padding:.85rem 2rem;
  background:var(--v-tinta); border-bottom:1px solid var(--vr-filete-s); }
/* con la cabecera fija (el riel con banda, desde 1100px: prisma-riel.css) los filtros se quedan
   justo debajo de ella; por debajo la cabecera se va con la página y ellos quedan arriba */
@media (min-width:1100px){ html.riel-con-banda .vr-filtros, html.riel-con-banda .vd-fila--cab{ top:var(--alto-cab, 200px); } }
.vr-pz, .vr-filtros .relative > button{ display:inline-flex !important; align-items:center; gap:.5rem; padding:.45rem .95rem !important; border-radius:99px !important;
  border:1px solid var(--vr-filete) !important; background:transparent !important; font-size:.8rem !important; color:var(--vr-tx) !important; white-space:nowrap; }
.vr-filtros .relative > button .fin-pct-badge{ background:var(--vr-pista) !important; color:var(--vr-tx) !important; }
.vr-filtros .relative > button .material-icons-outlined, .vr-pz .material-icons-outlined{ font-size:16px !important; color:var(--vr-tx55); }
.vr-pz .vr-rot{ font-size:.56rem; }
.vr-pz input[type=date]{ background:transparent; border:0; outline:none; color:var(--vr-tx); font:inherit; font-size:.8rem; color-scheme:dark; }
html[data-tema="claro"] .vr-pz input[type=date]{ color-scheme:light; }
select.vr-pz{ appearance:none; -webkit-appearance:none; padding-right:1.1rem !important; cursor:pointer; }
select.vr-pz option{ background:#222E3A; color:#EADFCE; }
.vr-pz--quitar{ border-color:transparent !important; color:var(--vr-tx70) !important; cursor:pointer; }
.vr-flecha{ color:var(--vr-tx55); }
.vr-filtros__al{ margin-left:auto; font-size:.72rem; color:var(--vr-tx55); }
.vr-filtros__al strong{ color:var(--vr-tx70); }

/* el panorama: la venta a la izquierda, la plata a la derecha */
.vr-panorama{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:1.4rem; align-items:stretch; }
.vr-pan{ padding:.6rem .2rem 0; display:flex; flex-direction:column; }
.vr-pan__sub{ font-size:.9rem; color:var(--vr-tx70); }
.vr-trio{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); margin-top:1.6rem; border-top:1px solid var(--vr-filete-s); }
.vr-trio > div{ padding:1rem 1rem 0 0; min-width:0; }
.vr-trio > div + div{ padding-left:1rem; border-left:1px solid var(--vr-filete-s); }
.vr-trio dd.vr-nota{ font-size:.7rem; }
.vr-estados{ margin-top:1.8rem; padding-top:1.2rem; border-top:1px solid var(--vr-filete-s); }
.vr-estados__barra{ display:flex; gap:3px; height:8px; margin-top:.7rem; }
.vr-estados__barra i{ display:block; border-radius:99px; min-width:4px; }
.vr-estados i.ter{ background:var(--vr-fact); } .vr-estados i.cur{ background:var(--vr-entra); } .vr-estados i.pro{ background:var(--vr-sale); }
.vr-estados__ley{ display:flex; gap:1.2rem; flex-wrap:wrap; margin-top:.6rem; font-size:.76rem; color:var(--vr-tx70); }
.vr-estados__ley i{ display:inline-block; width:8px; height:8px; border-radius:99px; margin-right:.45rem; }
.vr-estados__ley .vr-num{ color:var(--vr-f); margin-right:.25rem; }
.vr-rieles h2{ margin-bottom:1.2rem; }
.vr-riel + .vr-riel{ margin-top:1.25rem; }
.vr-riel__cab{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.5rem; }
.vr-riel__pct{ font-family:var(--v-glare); font-size:1.7rem; line-height:1; color:var(--vr-f); }
.vr-riel__pct small{ font-size:.55em; color:var(--vr-tx55); }
.vr-pista{ height:10px; border-radius:99px; background:var(--vr-pista); overflow:hidden; }
.vr-pista i{ display:block; height:100%; border-radius:99px; }
.vr-riel__pie{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:.5rem; font-size:.78rem; color:var(--vr-tx70); }
.vr-riel__pie .vr-num{ color:var(--vr-f); }
.vr-caja{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1.5rem; padding-top:1.2rem; border-top:1px solid var(--vr-filete-s); }
.vr-caja > div{ display:flex; flex-direction:column; gap:.15rem; }
.vr-caja__n{ font-family:var(--v-glare); font-size:1.35rem; color:var(--vr-f); }

/* lo que pide atención: una sola hoja partida en tres; cada una filtra la tabla */
.vr-atencion{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); padding:0; }
.vr-at{ padding:1.4rem 1.6rem; transition:opacity 160ms linear; }
.vr-at + .vr-at{ border-left:1px solid var(--vr-hoja-borde); }
/* el foco (Luis): sólo se apagan las demás cuando el mouse está sobre una pieza, nunca en el aire entre ellas */
.vr-atencion:has(.vr-at:hover) .vr-at:not(:hover){ opacity:.5; }
.vr-at .vr-nota{ font-size:.78rem; color:var(--vr-tx70); max-width:36ch; }
.vr-ver{ display:inline-block; margin-top:.8rem; padding:0; background:none; border:0; border-bottom:1px solid var(--vr-filete); font-size:.76rem; color:var(--vr-f); cursor:pointer; }
.vr-ver:hover{ border-bottom-color:var(--vr-f); }

/* mes a mes */
.vr-ley{ display:flex; gap:1rem; font-size:.74rem; color:var(--vr-tx70); }
.vr-ley i{ display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:.4rem; vertical-align:-1px; }
.vr-ley i.vr-falta{ background:var(--vr-pista); }
.vr-grafico{ position:relative; height:280px; margin-left:3.2rem; }
.vr-guias{ position:absolute; inset:0 0 34px 0; pointer-events:none; }
.vr-guia{ position:absolute; left:0; right:0; border-top:1px dashed var(--vr-filete-s); }
.vr-guia em{ position:absolute; left:-3.2rem; top:-.55rem; width:2.8rem; text-align:right; font-size:.64rem; color:var(--vr-tx55); font-variant-numeric:tabular-nums; }
.vr-meses{ position:absolute; inset:0; display:flex; align-items:stretch; gap:4px; }
.vr-mes{ position:relative; flex:1 1 0; display:flex; flex-direction:column; padding-bottom:16px; outline:none; transition:opacity 140ms linear; min-width:0; }
.vr-meses:has(.vr-mes:hover, .vr-mes:focus) .vr-mes:not(:hover):not(:focus){ opacity:.42; }
.vr-mes__barras{ flex:1; display:flex; align-items:flex-end; justify-content:center; gap:2px; border-bottom:1px solid var(--vr-filete); }
.vr-barra{ position:relative; width:42%; max-width:14px; border-radius:4px 4px 0 0; background:var(--vr-pista); overflow:hidden; }
.vr-barra i{ position:absolute; left:0; right:0; bottom:0; }
.vr-barra--venta i{ background:var(--vr-entra); } .vr-barra--costo i{ background:var(--vr-sale); }
.vr-mes--futuro .vr-barra{ background:transparent; box-shadow:inset 0 0 0 1px var(--vr-filete); }
.vr-mes__et{ height:18px; padding-top:5px; font-size:.64rem; text-align:center; color:var(--vr-tx55); }
.vr-mes__anio{ position:absolute; left:50%; bottom:0; transform:translateX(-50%); font-size:.6rem; letter-spacing:.1em; color:var(--vr-tx70); }
.vr-hoy{ position:relative; flex:0 0 1px; margin:0 3px 34px; background:var(--vr-f); opacity:.55; }
.vr-hoy span{ position:absolute; top:-2px; left:6px; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--vr-f); white-space:nowrap; }
.vr-corte{ flex:0 0 14px; margin-bottom:34px; background:repeating-linear-gradient(135deg, transparent 0 4px, var(--vr-filete-s) 4px 5px); }
.vr-globo{ position:absolute; z-index:3; bottom:calc(100% - 30px); left:50%; transform:translateX(-50%); display:none; flex-direction:column; gap:.1rem;
  min-width:180px; padding:.7rem .85rem; border-radius:9px; background:#222E3A; border:1px solid rgba(234,223,206,.16); color:#EADFCE; font-size:.72rem;
  box-shadow:var(--v-sombra); pointer-events:none; }
.vr-globo > span{ display:flex; justify-content:space-between; gap:.8rem; }
.vr-globo__t{ margin-bottom:.25rem; color:#FFFFFF; }
.vr-mes:hover .vr-globo, .vr-mes:focus .vr-globo{ display:flex; }
.vr-mes:nth-child(-n+4) .vr-globo{ left:0; transform:none; }
.vr-mes:nth-last-child(-n+4) .vr-globo{ left:auto; right:0; transform:none; }

/* lo que viene: una fila por plazo, las dos barras en la misma escala */
.vr-tramos{ border-top:1px solid var(--vr-filete); }
.vr-tramo{ display:grid; grid-template-columns:190px minmax(0,1fr) 190px; gap:1.6rem; align-items:center; padding:1rem 0; border-bottom:1px solid var(--vr-filete-s); transition:opacity 140ms linear; }
.vr-tramos:has(.vr-tramo--dato:hover) .vr-tramo--dato:not(:hover){ opacity:.5; }
.vr-tramo--cab{ padding:.7rem 0; }
.vr-tramo--cab .vr-rot:last-child, .vr-tramo__dif{ text-align:right; }
.vr-tramo__nom{ display:block; font-size:.95rem; color:var(--vr-f); }
.vr-tramo__b{ display:grid; grid-template-columns:52px minmax(0,1fr) 92px; gap:.8rem; align-items:center; }
.vr-tramo__b + .vr-tramo__b{ margin-top:.45rem; }
.vr-tramo__et{ font-size:.72rem; color:var(--vr-tx55); }
.vr-tramo__b .vr-pista i{ min-width:3px; }
.vr-tramo__b .vr-num{ text-align:right; font-size:.86rem; color:var(--vr-f); }
.vr-tramo__dif .vr-num{ display:block; font-family:var(--v-glare); font-size:1.3rem; color:var(--vr-f); }
.vr-tramo--tot{ border-bottom:0; border-top:1px solid var(--vr-filete); }
.vr-tramo__tot{ display:flex; gap:1.6rem; flex-wrap:wrap; font-size:.8rem; color:var(--vr-tx70); }
.vr-tramo__tot i{ display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:.4rem; vertical-align:-1px; }
.vr-tramo__tot .vr-num{ font-family:var(--v-glare); font-size:1.15rem; margin-left:.35rem; color:var(--vr-f); }

/* la tabla, como un libro */
.vr-reservas__acc{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.vr-buscar{ display:inline-flex; align-items:center; gap:.5rem; min-width:280px; padding:.45rem 1rem; border-radius:99px; border:1px solid var(--vr-filete); color:var(--vr-tx55); }
.vr-buscar input{ flex:1; min-width:0; background:transparent; border:0; outline:none; font:inherit; font-size:.8rem; color:var(--vr-tx); }
.vr-buscar input::placeholder{ color:var(--vr-tx55); }
.vr-chip{ display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .5rem .4rem .9rem; border-radius:99px; background:var(--vr-pista); font-size:.76rem; color:var(--vr-tx); }
.vr-chip button{ display:inline-flex; background:none; border:0; color:var(--vr-tx70); cursor:pointer; padding:0; }
.vr-tabla-caja{ border-top:1px solid var(--vr-filete); }
.vr-tabla{ width:100%; border-collapse:collapse; }
.vr-tabla th{ padding:.8rem .7rem; text-align:left; font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--vr-tx70); border-bottom:1px solid var(--vr-filete); white-space:nowrap; }
.vr-tabla th .material-icons-outlined{ font-size:13px; vertical-align:middle; }
/* la regla de las cabeceras de ARIA (vivero-aria-lujo.css) les ponía fondo, un filete teal y una
   letra que no existe —var(--sans)—, que caía a 16 px: las de los tableros llevan la suya */
html.aria-lujo.aria-lujo.aria-lujo :is(.vr-tabla, .vs-rank) thead th{ font:400 .6rem/1.35 var(--v-sans) !important; letter-spacing:.16em !important;
  background:transparent !important; color:var(--vr-tx70) !important; border-bottom-color:var(--vr-filete) !important; padding-top:.8rem !important; }
.vr-orden{ cursor:pointer; user-select:none; }
.vr-tabla td{ padding:.95rem .7rem; border-bottom:1px solid var(--vr-filete-s); vertical-align:top; font-size:.84rem; color:var(--vr-tx); }
.vr-tabla tbody tr{ cursor:pointer; transition:opacity 140ms linear; }
.vr-tabla tbody:has(tr:hover) tr:not(:hover){ opacity:.5; }
.vr-res__nom{ display:block; color:var(--vr-f); max-width:34ch; }
.vr-tabla small{ display:block; margin-top:.15rem; font-size:.72rem; color:var(--vr-tx55); }
.vr-viaje{ display:block; white-space:nowrap; }
.vr-estado, .vr-alerta{ display:inline-block; margin:.35rem .3rem 0 0; padding:.1rem .55rem; border-radius:99px; font-size:.64rem; letter-spacing:.06em; }
.vr-estado--ter{ color:var(--vr-tx70); background:var(--vr-pista); }
.vr-estado--cur{ color:var(--vr-tx); background:var(--vr-entra-f); }
.vr-estado--pro{ color:var(--vr-tx); box-shadow:inset 0 0 0 1px var(--vr-filete); }
.vr-alerta--rojo{ background:var(--vr-rojo-f); color:var(--vr-tx); }
.vr-mini{ min-width:120px; }
.vr-mini .fin-bar{ height:6px !important; margin:.35rem 0 0 !important; background:var(--vr-pista) !important; }
.vr-mini .fin-bar > i{ background:var(--acc) !important; }
.vr-mini__txt{ display:block; margin-top:.35rem; font-size:.72rem; color:var(--vr-tx); }
.vr-mini__txt small{ display:inline; margin:0; }
.vr-solo-cel{ display:none; }
.vr-vacio{ padding:2.5rem 1rem !important; text-align:center; color:var(--vr-tx55) !important; }

/* ── el detalle de una reserva ── */
#view-bk-detalle .viv-cab h1{ font-size:3.4rem !important; }
.vd-panorama{ grid-template-columns:minmax(0,7fr) minmax(0,4fr); }
.vd-panorama .vr-cifra-xl{ font-size:3.8rem; }
.vd-rieles{ margin-top:1.6rem; }
.vd-aviso{ margin-top:1.3rem; padding:.7rem .9rem; border-radius:9px; background:var(--vr-ocre-f); font-size:.8rem; color:var(--vr-tx); }
.vd-aviso .vr-num{ color:var(--vr-f); }
.vd-ficha h2{ margin-bottom:1rem; }
.vd-ficha dl{ display:grid; grid-template-columns:1fr 1fr; gap:.95rem 1.2rem; }
.vd-ficha dl > div:first-child{ grid-column:1 / -1; }
.vd-ficha dd{ margin-top:.2rem; font-size:.86rem; color:var(--vr-f); overflow-wrap:anywhere; }
.vd-conts{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:2rem; }
.vd-cont__n{ display:flex; align-items:baseline; gap:.4rem; }
.vd-cont__n .vr-nota{ display:inline; font-size:.8rem; }
.vd-segs{ display:flex; gap:3px; margin-top:.5rem; }
.vd-segs i{ flex:1; height:8px; border-radius:2px; background:var(--vr-pista); }
.vd-itin{ --cols:minmax(0,1fr) 170px 150px 96px 124px 104px 104px; }
.vd-fila{ display:grid; grid-template-columns:var(--cols); gap:1rem; align-items:start; padding:.95rem .9rem; border-bottom:1px solid var(--vr-filete-s); transition:opacity 140ms linear; }
.vd-fila--cab{ position:sticky; top:0; z-index:25; padding:.7rem .9rem; background:var(--v-tinta); border-bottom:1px solid var(--vr-filete); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--vr-tx70); }
.vd-itin:has(.vd-fila:not(.vd-fila--cab):hover) .vd-fila:not(.vd-fila--cab):not(:hover){ opacity:.5; }
.vd-fila > div{ display:flex; flex-direction:column; align-items:flex-start; gap:.4rem; min-width:0; font-size:.84rem; color:var(--vr-tx); }
.vd-fila > div.vr-der{ align-items:flex-end; }
/* el paso y su evidencia, en un mismo renglón mientras quepan */
.vd-fila > div:nth-child(-n+5):not(.vd-fila__serv){ flex-direction:row; flex-wrap:wrap; align-items:center; gap:.35rem; }
.vd-fila--cancelada .vd-fila__nom{ text-decoration:line-through; text-decoration-color:var(--vr-tx55); }
.vd-fila__serv{ flex-direction:row !important; gap:.7rem !important; }
.vd-fila__serv > .material-icons-outlined{ font-size:19px; color:var(--vr-tx55); padding-top:.1rem; }
.vd-fila__nom{ color:var(--vr-f); font-size:.88rem; }
.vd-fila__prov{ font-size:.74rem; color:var(--vr-tx70); margin-top:.1rem; }
.vd-fila__prov em{ display:inline-block; margin-left:.4rem; padding:0 .45rem; border-radius:99px; background:var(--vr-pista); font-size:.66rem; }
.vd-fila__nota{ grid-column:1 / -1; display:flex; gap:.45rem; margin:-.3rem 0 0 calc(19px + .7rem); font-size:.74rem; color:var(--vr-tx70); max-width:96ch; }
.vd-fila__nota .material-icons-outlined{ font-size:15px; color:var(--vr-tx55); }
.vd-conf{ padding:.12rem .55rem; border-radius:99px; background:var(--vr-pista); color:var(--vr-f); font-size:.78rem; font-variant-numeric:tabular-nums; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vd-est{ display:inline-flex; align-items:center; gap:.4rem; font-size:.78rem; color:var(--vr-tx55); }
.vd-est::before{ content:""; flex-shrink:0; width:8px; height:8px; border-radius:99px; box-shadow:inset 0 0 0 1.5px var(--vr-filete); }
.vd-est--si{ color:var(--vr-tx); } .vd-est--si::before{ background:var(--vr-entra); box-shadow:none; }
.vd-est--parcial{ color:var(--vr-tx); } .vd-est--parcial::before{ background:#8A6A2F; box-shadow:none; }
.vd-est--no{ color:var(--vr-tx); } .vd-est--no::before{ background:#B3261E; box-shadow:none; }
.vd-est small{ display:block; font-size:.68rem; color:var(--vr-tx55); }
.vd-nada{ color:var(--vr-tx55); }
:is(#view-bk-detalle, #view-cotizaciones) .fin-evid-stack{ padding:0; min-height:0; }
:is(#view-bk-detalle, #view-cotizaciones) :is(.fin-evid-thumb, .fin-evid-thumb-more){ width:34px !important; height:34px !important; border-radius:8px !important; margin-left:-10px;
  background:var(--vr-ev) !important; border:2px solid var(--v-tinta) !important; color:var(--vr-tx70) !important; }
:is(#view-bk-detalle, #view-cotizaciones) .fin-evid-stack .fin-evid-thumb:first-child{ margin-left:0; }
:is(#view-bk-detalle, #view-cotizaciones) .fin-evid-thumb > div{ background:transparent !important; color:var(--vr-tx70) !important; }
:is(#view-bk-detalle, #view-cotizaciones) .fin-evid-thumb:hover{ transform:none !important; box-shadow:none !important; border-color:var(--vr-filete) !important; }
.vd-dia{ border-bottom:1px solid var(--vr-filete); }
.vd-dia__cab{ display:grid; grid-template-columns:56px minmax(0,1fr) auto; gap:1rem; align-items:center; padding:1.3rem .9rem .7rem; }
.vd-dia__n{ font-family:var(--v-glare); font-size:2.3rem; line-height:1; color:var(--vr-f); text-align:center; }
.vd-dia__n .vr-rot{ display:block; margin-bottom:.2rem; font-family:var(--v-sans); font-size:.56rem; line-height:1; }
.vd-dia__n .material-icons-outlined{ font-size:28px; color:var(--vr-tx55); }
.vd-dia__cuando{ display:flex; flex-direction:column; gap:.1rem; }
.vd-dia__fecha{ font-family:var(--v-glare); font-size:1.2rem; color:var(--vr-f); }
.vd-dia__plata{ display:flex; align-items:baseline; gap:.4rem; font-size:.84rem; color:var(--vr-f); }
.vd-dia__plata .vr-nota{ display:inline; margin-left:.8rem; }
.vd-totales{ padding:1rem .9rem 0; font-size:.84rem; }
.vd-totales > div{ display:grid; grid-template-columns:minmax(0,1fr) 104px 104px; gap:1rem; padding:.3rem 0; color:var(--vr-tx70); }
.vd-totales > div .vr-num{ text-align:right; }
.vd-totales__fin{ color:var(--vr-f) !important; }
.vd-totales .vr-nota{ margin-top:.4rem; }
.vd-plegables{ display:flex; flex-direction:column; gap:.7rem; }
.vd-plegables details{ background:var(--vr-hoja); border:1px solid var(--vr-hoja-borde); border-radius:14px; }
.vd-plegables summary{ display:flex; align-items:center; gap:.8rem; padding:1.1rem 1.4rem; cursor:pointer; list-style:none; color:var(--vr-f); font-family:var(--v-glare); font-size:1.15rem; }
.vd-plegables summary::-webkit-details-marker{ display:none; }
.vd-plegables summary .vr-nota{ display:inline; margin-left:auto; font-family:var(--v-sans); }
.vd-plegables summary .material-icons-outlined{ color:var(--vr-tx55); }
.vd-flecha{ transition:transform 160ms linear; }
.vd-plegables details[open] .vd-flecha{ transform:rotate(180deg); }
.vd-pleg{ padding:1.1rem 1.4rem 1.4rem; border-top:1px solid var(--vr-filete-s); }
.vd-pleg > .vr-nota{ margin-top:.8rem; max-width:90ch; }
.vd-pleg--notas{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1.6rem; }
.vd-pleg--notas p + p{ margin-top:.5rem; font-size:.82rem; line-height:1.55; color:var(--vr-tx); white-space:pre-line; overflow-wrap:anywhere; }
.vd-mini-tabla{ width:100%; border-collapse:collapse; font-size:.84rem; }
.vd-mini-tabla th{ padding:.55rem .6rem; text-align:left; font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--vr-tx70); border-bottom:1px solid var(--vr-filete); }
.vd-mini-tabla td{ padding:.7rem .6rem; border-bottom:1px solid var(--vr-filete-s); vertical-align:middle; color:var(--vr-tx); }
.vd-mini-tabla__tot td{ color:var(--vr-f); border-bottom:0; border-top:1px solid var(--vr-filete); }

/* el itinerario pasa a fichas cuando su caja ya no alcanza para las siete columnas */
.vd-itin{ container:vditin / inline-size; }
@container vditin (max-width:1100px){
  /* cada servicio: el nombre con su costo y su venta, y debajo los cuatro pasos en un renglón */
  .vd-fila{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:.5rem 1rem; padding:.85rem .9rem; }
  .vd-fila__serv{ grid-column:1 / 4; grid-row:1 / span 2; }
  .vd-fila > div:nth-child(6){ grid-column:4; grid-row:1; } .vd-fila > div:nth-child(7){ grid-column:4; grid-row:2; }
  .vd-fila > div:nth-child(6), .vd-fila > div:nth-child(7){ flex-direction:row; align-items:baseline; justify-content:flex-end; gap:.35rem; }
  .vd-fila > div:nth-child(7), .vd-fila > div:nth-child(7) .vr-num{ color:var(--vr-tx70); font-size:.76rem; }
  .vd-fila > div:nth-child(6)::before{ content:"Costo"; } .vd-fila > div:nth-child(7)::before{ content:"Venta"; }
  .vd-fila > div:nth-child(6)::before, .vd-fila > div:nth-child(7)::before{ font-size:.54rem; letter-spacing:.12em; text-transform:uppercase; color:var(--vr-tx55); }
  /* los cuatro pasos llevan su rótulo una sola vez, arriba del itinerario, y no en cada servicio */
  .vd-fila--cab{ font-size:.54rem; letter-spacing:.12em; }
  .vd-fila--cab > span:nth-child(1), .vd-fila--cab > span:nth-child(6), .vd-fila--cab > span:nth-child(7){ display:none; }
  .vd-fila--cab > span{ grid-row:1; }
  .vd-fila__nota{ margin-left:0; }
}
/* La tabla del resumen pasa a fichas cuando SU caja no alcanza para las ocho columnas (con el riel
   abierto eso pasa ya en un escritorio de 1280): cada reserva, dos renglones —el nombre, el viaje y
   la venta; el cobro, el pago y la utilidad—, con la oficina y los pasajeros junto a su número. Así
   no se desliza de lado ni cada línea crece hacia abajo. */
.vr-tabla-caja{ container:vrtabla / inline-size; }
@container vrtabla (max-width:1100px){
  .vr-tabla thead{ display:none; }
  .vr-tabla, .vr-tabla tbody{ display:block; }
  .vr-tabla tr{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,.8fr); grid-template-areas:"nom viaje venta" "cobro pago util"; gap:.45rem 1.2rem; padding:.85rem 0; border-bottom:1px solid var(--vr-filete-s); }
  .vr-tabla tr:has(.vr-vacio){ display:block; }
  .vr-tabla td{ display:block; padding:0 !important; border:0 !important; min-width:0; font-size:.8rem; }
  .vr-tabla td:nth-child(1){ grid-area:nom; } .vr-tabla td:nth-child(3){ grid-area:viaje; }
  .vr-tabla td:nth-child(4){ grid-area:venta; color:var(--vr-f); }
  .vr-tabla td:nth-child(5){ grid-area:cobro; } .vr-tabla td:nth-child(6){ grid-area:pago; } .vr-tabla td:nth-child(7){ grid-area:util; }
  .vr-tabla td:nth-child(2), .vr-tabla td:nth-child(8){ display:none; }
  .vr-tabla td:nth-child(1) small{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .vr-tabla td:nth-child(3) small{ display:inline; }
  .vr-tabla td:nth-child(7) small{ display:inline; margin-left:.35rem; }
  .vr-viaje{ display:inline; margin-right:.2rem; }
  .vr-estado, .vr-alerta{ margin:.2rem .3rem 0 0; }
  .vr-solo-cel{ display:inline; }
  .vr-tabla td:nth-child(5)::before{ content:"Cobro"; } .vr-tabla td:nth-child(6)::before{ content:"Pago"; }
  .vr-tabla td:nth-child(5)::before, .vr-tabla td:nth-child(6)::before{ display:block; font-size:.54rem; letter-spacing:.14em; text-transform:uppercase; color:var(--vr-tx55); }
  .vr-mini{ min-width:0; }
  .vr-mini .fin-bar{ margin-top:.25rem !important; }
  .vr-mini__txt{ margin-top:.2rem; font-size:.68rem; }
}
@media (max-width:1099px){
  .vr-panorama, .vd-panorama{ grid-template-columns:minmax(0,1fr); }
  .vd-ficha dl{ grid-template-columns:repeat(4, minmax(0,1fr)); }
  .vd-ficha dl > div:first-child{ grid-column:span 2; }
  .vr-tramo{ grid-template-columns:minmax(0,1fr) auto; gap:.7rem 1rem; }
  .vr-tramo__barras, .vr-tramo__tot{ grid-column:1 / -1; grid-row:2; }
  .vr-tramo--cab{ display:none; }
}
/* EL CELULAR (Luis: «se tiene que ajustar perfecto: nada extremadamente grande ni listas con
   líneas súper altas»). Las cifras bajan un escalón, cada bloque se aprieta a renglones, la tabla
   es una ficha de tres renglones y cada servicio del itinerario, una de tres. */
@media (max-width:767px){
  /* la cabecera: los botones, sólo con su ícono; el subtítulo, en dos renglones */
  #view-resumen .viv-cab button, #view-bk-detalle .viv-cab button{ font-size:0 !important; gap:0 !important; width:40px; height:40px; padding:0 !important; justify-content:center; }
  #view-resumen .viv-cab button .material-icons-outlined, #view-bk-detalle .viv-cab button .material-icons-outlined{ font-size:19px !important; }
  #view-bk-detalle .viv-cab h1{ font-size:1.9rem !important; }
  .vr-filtros{ position:static; margin:-1.3rem -1rem 0; padding:.6rem 1rem; flex-wrap:nowrap; overflow-x:auto; }
  .vr-filtros__al{ display:none; }
  .vr-pz, .vr-filtros .relative > button{ padding:.4rem .8rem !important; font-size:.76rem !important; }
  #view-resumen > section, #view-ventas > section, #view-ventas-proveedor > section, #view-cotizaciones > section, #view-comisiones-nuba > section, #view-comisiones-virtuoso > section, #view-actualizacion-proveedores > section, #view-bk-detalle #fin-bk-detalle-content > section{ margin-top:1rem; }
  .vr-cifra-xl{ font-size:2.6rem; margin:.2rem 0 .3rem; } .vd-panorama .vr-cifra-xl{ font-size:2.4rem; }
  .vr-cifra-l{ font-size:1.5rem; } .vr-cifra-m{ font-size:1.15rem; margin:0; }
  .vr-pan__sub{ font-size:.82rem; }
  .vr-sec-cab{ margin-bottom:.9rem; }
  .vr-sec-cab h2, .vr-rieles h2, .vd-ficha h2{ font-size:1.2rem !important; }
  .vr-sec-cab p{ font-size:.76rem; }
  .vr-hoja{ padding:1.1rem 1rem; border-radius:14px; }
  .vr-atencion{ padding:0; grid-template-columns:minmax(0,1fr); }
  .vr-at + .vr-at{ border-left:0; border-top:1px solid var(--vr-hoja-borde); }
  /* utilidad, costo y comisiones: un renglón cada una, la cifra a la derecha */
  .vr-trio{ grid-template-columns:minmax(0,1fr); margin-top:.9rem; }
  .vr-trio > div + div{ padding-left:0; border-left:0; border-top:1px solid var(--vr-filete-s); }
  .vr-trio > div{ display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:1rem; align-items:center; padding:.55rem 0; }
  .vr-trio dt{ grid-column:1; } .vr-trio dd.vr-nota{ grid-column:1; }
  .vr-trio dd.vr-cifra-m{ grid-column:2; grid-row:1 / span 2; }
  .vr-estados{ margin-top:.9rem; padding-top:.9rem; }
  .vr-rieles h2{ margin-bottom:.9rem; }
  .vr-riel + .vr-riel{ margin-top:.9rem; }
  .vr-riel__pct{ font-size:1.3rem; } .vr-pista{ height:8px; } .vr-riel__pie{ font-size:.74rem; margin-top:.35rem; }
  .vr-caja{ gap:.8rem; margin-top:1rem; padding-top:.9rem; }
  .vr-caja .vr-rot{ font-size:.54rem; letter-spacing:.1em; }
  .vr-caja__n{ font-size:1.15rem; }
  /* lo que pide atención: tres renglones con la cifra a la derecha */
  .vr-at{ display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:1rem; align-items:baseline; padding:.85rem 1rem; }
  .vr-at .vr-rot{ grid-column:1; }
  .vr-at .vr-cifra-l{ grid-column:2; grid-row:1; margin:0; font-size:1.25rem; }
  .vr-at .vr-nota{ grid-column:1 / -1; max-width:none; margin-top:.2rem; font-size:.74rem; }
  .vr-ver{ grid-column:1 / -1; justify-self:start; margin-top:.4rem; }
  /* mes a mes */
  .vr-ley{ gap:.7rem; font-size:.7rem; }
  .vr-grafico{ margin-left:0; height:200px; }
  .vr-guia em{ left:0; top:-1rem; width:auto; text-align:left; }
  .vr-meses{ gap:1px; }
  .vr-barra{ width:40%; border-radius:2px 2px 0 0; }
  .vr-mes__et{ font-size:0; }
  .vr-mes:nth-child(3n+1) .vr-mes__et{ font-size:.58rem; }
  .vr-globo{ display:none !important; }
  /* lo que viene */
  .vr-tramo{ padding:.75rem 0; gap:.5rem 1rem; }
  .vr-tramo__nom{ font-size:.88rem; }
  .vr-tramo__dif .vr-num{ font-size:1.1rem; }
  .vr-tramo__b{ grid-template-columns:44px minmax(0,1fr) 84px; }
  .vr-tramo__b + .vr-tramo__b{ margin-top:.3rem; }
  .vr-tramo__tot{ gap:1rem; } .vr-tramo__tot .vr-num{ font-size:1rem; }
  /* la tabla: en el celular, la ficha de tres renglones */
  .vr-reservas__acc{ width:100%; } .vr-buscar{ min-width:0; flex:1; }
  .vr-tabla tr{ grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); grid-template-areas:"nom venta" "viaje util" "cobro pago"; gap:.35rem 1rem; padding:.8rem 0; }
  .vr-tabla td:nth-child(4){ font-size:.88rem; }
  /* el detalle */
  .vd-rieles{ margin-top:1rem; }
  .vd-aviso{ margin-top:1rem; font-size:.76rem; }
  .vd-ficha dl{ grid-template-columns:1fr 1fr; gap:.7rem 1rem; }
  .vd-ficha dl > div:first-child{ grid-column:1 / -1; }
  .vd-conts{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:.9rem; }
  .vd-conts .vr-rot{ font-size:.54rem; letter-spacing:.1em; }
  .vd-cont__n .vr-cifra-l{ font-size:1.35rem; }
  .vd-segs{ gap:1px; } .vd-segs i{ height:6px; }
  .vd-dia__cab{ grid-template-columns:40px minmax(0,1fr); gap:.2rem .8rem; padding:1rem 0 .4rem; }
  .vd-dia__n{ font-size:1.7rem; } .vd-dia__fecha{ font-size:1.05rem; }
  .vd-dia__plata{ grid-column:2; font-size:.78rem; }
  .vd-dia__plata .vr-nota:first-child{ margin-left:0; }
  /* el itinerario (sus fichas las arma el bloque de su caja): más apretado */
  .vd-fila{ gap:.5rem .6rem; padding:.8rem 0; }
  .vd-fila--cab{ padding:.55rem 0; font-size:.5rem; letter-spacing:.1em; }
  .vd-fila > div:nth-child(6), .vd-fila > div:nth-child(7){ gap:.3rem; font-size:.8rem; }
  .vd-fila > div:nth-child(7), .vd-fila > div:nth-child(7) .vr-num{ font-size:.72rem; }
  .vd-fila__nom{ font-size:.84rem; }
  .vd-conf{ font-size:.7rem; padding:.08rem .45rem; }
  .vd-est{ font-size:.72rem; gap:.3rem; }
  :is(#view-bk-detalle, #view-cotizaciones) :is(.fin-evid-thumb, .fin-evid-thumb-more){ width:24px !important; height:24px !important; margin-left:-8px; border-radius:6px !important; }
  :is(#view-bk-detalle, #view-cotizaciones) .fin-evid-thumb .material-icons-outlined{ font-size:14px !important; }
  .vd-fila__nota{ font-size:.7rem; }
  .vd-totales{ padding:1rem 0 0; font-size:.78rem; }
  .vd-totales > div{ grid-template-columns:minmax(0,1fr) auto auto; gap:.8rem; }
  .vd-pleg--notas{ grid-template-columns:minmax(0,1fr); gap:1rem; }
  .vd-pleg{ padding:1rem; } .vd-plegables summary{ padding:.9rem 1rem; flex-wrap:wrap; font-size:1.05rem; }
  .vd-plegables summary .vr-nota{ margin-left:0; flex-basis:100%; order:3; }
  .vd-mini-tabla{ font-size:.76rem; }
  .vd-mini-tabla th, .vd-mini-tabla td{ padding:.5rem .35rem; }
}
/* ── 22 · EL REPORTE DE VENTAS, EN LA LÍNEA DEL RESUMEN (Luis, 2026-09-30) ──────────────────
   «Una extensión aún más detallada del general, enfocada en las ventas»: las mismas piezas del
   tablero (sección 21) y, además, la venta por dentro, quién vende, por dónde entra y a quién. */
.vs-eje{ display:inline-flex; padding:3px; border-radius:99px; border:1px solid var(--vr-filete); }
.vs-eje button{ padding:.35rem .85rem; border-radius:99px; background:transparent; border:0; font-size:.76rem; color:var(--vr-tx70); cursor:pointer; white-space:nowrap; }
.vs-eje button.activo{ background:var(--v-deep); color:#FFFFFF; }
/* en teal, el deep se pierde sobre el suelo teal: el botón activo va en crema con letra teal */
html[data-tema="teal"] .vs-eje button.activo{ background:#EADFCE; color:#046477; }
/* la venta por dentro: de cada venta, cuánto es costo, cuánto utilidad y cuánto impuestos */
.vs-compo{ display:flex; gap:2px; height:14px; border-radius:99px; overflow:hidden; }
.vs-compo i{ display:block; min-width:3px; }
.vs-costo{ background:var(--vr-fact); }
.vs-compo-ley{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1rem; margin:.9rem 0 1.5rem; }
.vs-compo-ley > div{ display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.vs-compo-ley .vr-rot i{ display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:.45rem; }
.vs-n{ font-family:var(--v-glare); font-size:1.3rem; color:var(--vr-f); }
/* mes a mes: la barra es la venta; abajo, la utilidad */
.vs-barra{ width:55%; max-width:22px; background:var(--vr-sale); }
.vs-barra i{ background:var(--vr-entra); }
.vr-mes--futuro .vs-barra{ background:transparent; box-shadow:inset 0 0 0 1px var(--vr-sale); }
/* las tablas de posiciones */
.vs-rank-caja{ border-top:1px solid var(--vr-filete); container:vsrank / inline-size; }
.vs-rank{ width:100%; border-collapse:collapse; }
.vs-rank th{ padding:.75rem .6rem; text-align:left; font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--vr-tx70); border-bottom:1px solid var(--vr-filete); white-space:nowrap; }
.vs-rank td{ padding:.75rem .6rem; border-bottom:1px solid var(--vr-filete-s); vertical-align:middle; font-size:.84rem; color:var(--vr-tx); }
.vs-rank td:first-child{ width:38%; }
.vs-rank--corto td:first-child{ width:auto; }
.vs-rank tbody tr{ transition:opacity 140ms linear; }
.vs-rank tbody:has(tr:hover) tr:not(:hover){ opacity:.5; }
.vs-rank td small{ display:block; margin-top:.1rem; font-size:.7rem; color:var(--vr-tx55); }
.vs-nom{ display:flex; justify-content:space-between; align-items:baseline; gap:.8rem; color:var(--vr-f); }
.vs-nom small{ display:inline !important; margin:0 !important; }
.vs-rank .fin-bar{ height:6px !important; margin-top:.4rem !important; background:var(--vr-pista) !important; }
.vs-rank .fin-bar > i{ background:var(--vr-sale) !important; }
/* un margen negativo: el rojo sólo de relleno, como manda el libro */
.vs-rojo{ display:inline-block !important; width:max-content; padding:0 .45rem; border-radius:99px; background:var(--vr-rojo-f); color:var(--vr-tx) !important; }
/* el viaje típico: cuatro cifras en dos por dos, bajo las de la venta */
.vs-tipico{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:.9rem 1.2rem; margin-top:1.2rem; padding-top:1rem; border-top:1px solid var(--vr-filete-s); }
.vs-tipico__tit{ grid-column:1 / -1; }
.vs-tipico__rot{ font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--vr-tx55); }
/* dónde se vende: el mapa de ARIA con la venta de cada ecosistema, y su tabla al lado */
.vs-mapa-sec{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:1.6rem; align-items:start; }
/* la tabla del mapa se queda tabla (no pasa a fichas) y más apretada */
@media (min-width:768px){
  .vs-mapa-sec .vs-rank-caja{ container-type:normal; }
  .vs-mapa-sec .vs-rank td{ padding:.5rem .6rem; }
}
.vs-mapa svg{ display:block; width:100%; height:auto; max-height:520px; overflow:visible; }
.vs-prov{ fill:var(--vr-hoja); stroke:var(--vr-filete); stroke-width:.9; }
.vs-punto{ cursor:pointer; outline:none; transition:opacity 160ms linear; }
.vs-punto.vacio{ cursor:default; }
.vs-punto circle.halo{ fill:var(--vr-pista); opacity:0; transition:opacity 160ms linear; }
.vs-punto circle.nucleo{ fill:var(--vr-sale); stroke:var(--v-tinta); stroke-width:1.5; }
.vs-punto.vacio circle.nucleo{ fill:var(--vr-filete); }
.vs-punto text{ font:400 11px var(--v-sans); letter-spacing:.12em; text-transform:uppercase; fill:var(--vr-tx70); }
.vs-punto:hover circle.halo, .vs-punto:focus circle.halo{ opacity:1; }
.vs-punto:hover text{ fill:var(--vr-f); }
.vs-mapa svg:has(.vs-punto:not(.vacio):hover) .vs-punto:not(:hover){ opacity:.35; }
/* las salidas: la línea de tiempo de ARIA, en clave de vivero. Cada reserva es un tallo que sale
   del suelo en su día de salida, con su brote arriba; el alto es su venta (Luis: los puntos
   apilados se veían extraños y tapaban reservas; así se ven todas). */
.vs-rio-scroll{ overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; border-top:1px solid var(--vr-filete); }
.vs-rio{ position:relative; height:236px; }
.vs-rio__meses{ position:absolute; inset:0; display:flex; }
.vs-rio__mes{ flex:1; padding:.7rem .7rem 0; border-left:1px solid var(--vr-filete-s); }
.vs-rio__mes:first-child{ border-left:0; }
.vs-rio__mes span{ display:block; font-family:var(--v-glare); font-size:1.1rem; line-height:1; color:var(--vr-tx70); text-transform:capitalize; white-space:nowrap; }
.vs-rio__mes span em{ font-style:normal; font-size:.62em; letter-spacing:.06em; color:var(--vr-tx55); }
.vs-rio__mes small{ display:block; margin-top:.3rem; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--vr-tx55); }
.vs-rio__linea{ position:absolute; left:0; right:0; bottom:28px; height:1px; background:var(--vr-filete); }
.vs-rio__hoy{ position:absolute; top:52px; bottom:6px; width:1px; background:var(--vr-f); opacity:.6; }
.vs-rio__hoy span{ position:absolute; bottom:0; left:6px; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--vr-f); white-space:nowrap; }
.vs-tallo{ position:absolute; bottom:28px; width:10px; margin-left:-5px; padding:0; background:none; border:0; cursor:pointer; outline:none; transition:opacity 140ms linear; }
.vs-tallo::before{ content:""; position:absolute; left:50%; top:4px; bottom:0; width:2px; margin-left:-1px; border-radius:1px; background:currentColor; opacity:.5; }
.vs-tallo i{ position:absolute; top:0; left:50%; width:7px; height:7px; margin-left:-3.5px; border-radius:50%; background:currentColor; transition:transform 140ms linear; }
.vs-tallo--ter{ color:var(--vr-fact); } .vs-tallo--cur{ color:var(--vr-entra); } .vs-tallo--pro{ color:var(--vr-sale); }
.vs-rio:has(.vs-tallo:hover, .vs-tallo:focus-visible) .vs-tallo:not(:hover):not(:focus-visible){ opacity:.28; }
.vs-tallo:hover, .vs-tallo:focus-visible{ z-index:3; }
.vs-tallo:hover::before, .vs-tallo:focus-visible::before{ opacity:1; }
.vs-tallo:hover i, .vs-tallo:focus-visible i{ transform:scale(1.6); }
.vs-tallo::after{ content:attr(data-globo); position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%); display:none; padding:.4rem .65rem; border-radius:9px;
  background:#222E3A; border:1px solid rgba(234,223,206,.16); color:#EADFCE; font-size:.7rem; white-space:nowrap; pointer-events:none; }
.vs-tallo:hover::after, .vs-tallo:focus-visible::after{ display:block; }
.vr-ley i.vs-ter{ background:var(--vr-fact); }
/* oficina, canal y punto de venta: una fila de tres */
.vs-tres{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1.4rem; align-items:start; }
.vs-tres .vr-hoja{ padding:1.2rem 1.3rem .9rem; }
.vs-tres .vr-sec-cab{ margin-bottom:.7rem; }
.vs-tres .fin-btn-excel{ padding:.35rem .6rem !important; }
/* una fila de posiciones se abre en sus reservas */
.vs-fila{ cursor:pointer; outline:none; }
.vs-rank tbody:has(tr:hover) tr.vs-sub{ opacity:1; }
.vs-sub > td{ padding:0 0 .9rem !important; }
.vs-lista{ display:flex; flex-direction:column; border-left:2px solid var(--vr-entra); margin-left:.2rem; }
.vs-res{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:.3rem 1.2rem; align-items:baseline; padding:.55rem .8rem; background:none; border:0;
  border-bottom:1px solid var(--vr-filete-s); text-align:left; cursor:pointer; color:var(--vr-tx); font:inherit; font-size:.8rem; }
.vs-res:last-child{ border-bottom:0; }
.vs-res:hover{ background:var(--vr-hoja); }
.vs-res__nom{ color:var(--vr-f); min-width:0; }
.vs-res__nom small, .vs-res__plata small{ display:block; margin-top:.1rem; font-size:.7rem; color:var(--vr-tx55); }
.vs-res__fecha{ white-space:nowrap; color:var(--vr-tx70); }
.vs-res__plata{ text-align:right; }
/* una tabla de posiciones angosta: el nombre con su barra arriba y las cifras en un renglón */
@container vsrank (max-width:720px){
  .vs-rank thead{ display:none; }
  .vs-rank, .vs-rank tbody{ display:block; }
  .vs-rank tr{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.2rem 1.1rem; padding:.7rem 0; border-bottom:1px solid var(--vr-filete-s); }
  .vs-rank tr:has(.vr-vacio){ display:block; }
  .vs-rank td{ display:block; padding:0; border:0; width:auto !important; text-align:left !important; font-size:.78rem; }
  .vs-rank td:first-child{ flex-basis:100%; margin-bottom:.25rem; font-size:.84rem; }
  .vs-rank td small{ display:inline; margin-left:.3rem; }
  /* las reservas que se abren dentro de una fila conservan sus dos renglones */
  .vs-rank .vs-res small{ display:block; margin-left:0; }
  .vs-rank td:not(:first-child)::before{ content:attr(data-rot); margin-right:.35rem; font-size:.54rem; letter-spacing:.12em; text-transform:uppercase; color:var(--vr-tx55); }
  /* angosta, lo que decide: la venta, la utilidad y las reservas; pax, venta por reserva y por cobrar quedan en
     la tabla ancha y en el Excel */
  .vs-rank td[data-rot="Pax"], .vs-rank td[data-rot="Por reserva"], .vs-rank td[data-rot="Por cobrar"]{ display:none; }
  .vs-rank td[data-rot="Venta"]{ color:var(--vr-f); }
  .vs-rank td[data-rot="Venta"]::before{ display:none; }
  .vs-rank td[data-rot="Reservas"]{ order:3; }
  .vs-rank td[data-rot="Reservas"]::before{ display:none; }
  /* «1 reserva», «2 reservas»: la palabra la pone cada tabla en data-unidad */
  .vs-rank td[data-rot="Reservas"]::after{ content:" " attr(data-unidad); color:var(--vr-tx55); }
}
@media (max-width:1099px){
  .vs-mapa-sec{ grid-template-columns:minmax(0,1fr); }
  .vs-mapa svg{ max-height:420px; margin:0 auto; }
  .vs-tres{ grid-template-columns:minmax(0,1fr); gap:1rem; }
}
@media (max-width:767px){
  #view-ventas .viv-cab button{ font-size:0 !important; gap:0 !important; width:40px; height:40px; padding:0 !important; justify-content:center; }
  #view-ventas .viv-cab button .material-icons-outlined{ font-size:19px !important; }
  .vs-eje button{ padding:.3rem .7rem; font-size:.72rem; }
  /* la venta por dentro: una línea por parte, la cifra a la derecha */
  .vs-compo-ley{ grid-template-columns:minmax(0,1fr); gap:.55rem; margin:.8rem 0 1.1rem; }
  .vs-tipico .vr-cifra-m{ font-size:1.05rem; }
  .vs-punto text{ font-size:13px; }
  .vs-res{ grid-template-columns:minmax(0,1fr) auto; }
  .vs-res__fecha{ grid-column:1; grid-row:2; font-size:.72rem; }
  .vs-res__plata{ grid-row:1 / span 2; grid-column:2; }
  .vs-compo-ley > div{ display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:1rem; align-items:center; }
  .vs-compo-ley .vr-nota{ grid-column:1; font-size:.7rem; }
  .vs-n{ grid-column:2; grid-row:1 / span 2; font-size:1.1rem; }
}
/* ── 23 · EL REPORTE DE PROVEEDORES, EN LA LÍNEA DEL RESUMEN (Luis, 2026-10-01) ─────────────
   «Saber todo de proveedores, para negociar con ellos»: las piezas del tablero (secciones 21 y 22)
   con el costo como eje; además, qué se compra por familia, lo que hay que pagar, la ficha de cada
   proveedor y el cuadre con el Resumen General. */
/* qué se compra: cinco familias, con los rellenos del libro */
.vp-c1{ background:var(--vr-sale); } .vp-c2{ background:var(--vr-entra); } .vp-c3{ background:var(--vr-fact); }
.vp-c4{ background:#8A6A2F; } .vp-c5{ background:var(--vr-filete); }
.vp-compo__tit{ margin:1.5rem 0 .6rem; }
/* mes a mes: una sola barra por mes, lo comprado llena hasta lo pagado */
.vp-barra{ width:55%; max-width:22px; }
/* lo que hay que pagar: lo que ya se dio y no se ha pagado, en rojo de relleno */
.vp-vencido{ background:#B3261E; }
.vp-tramo .vr-pista i{ min-width:3px; }
.vp-tramo .vr-tramo__dif .vr-ver{ margin-top:.25rem; }
@media (min-width:1100px){
  .vp-tramo{ grid-template-columns:230px minmax(0,1fr) 170px; }
  .vp-tramo.vr-tramo--tot{ grid-template-columns:minmax(0,1fr) 170px; }
}
/* lo pagado de más a un proveedor */
.vp-favor{ display:inline-block; padding:0 .45rem; border-radius:99px; background:var(--vr-entra-f); color:var(--vr-tx); }
.vp-aldia{ color:var(--vr-tx55); }
/* la ficha de un proveedor: sus datos, qué se le compra y sus reservas */
.vp-ficha__datos{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem 1.2rem; margin:1rem 0 1.1rem; }
.vp-ficha__datos dd{ margin-top:.15rem; font-size:.82rem; color:var(--vr-f); overflow-wrap:anywhere; }
.vp-ficha__tit{ margin:1.1rem 0 .3rem; }
.vp-ficha__nota{ margin-top:.6rem; }
.vp-mini{ font-size:.8rem; }
.vp-mini__fila{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.15rem 1rem; align-items:baseline; padding:.5rem 0; border-bottom:1px solid var(--vr-filete-s); color:var(--vr-tx); }
.vp-mini__fila > span:not(:first-child){ text-align:right; }
.vp-mini__fila > span:nth-child(2), .vp-mini__cab > span:nth-child(n+2){ display:none; }
.vp-mini__fila > span:nth-child(3){ grid-column:1; grid-row:2; text-align:left; font-size:.72rem; color:var(--vr-tx55); }
.vp-mini__fila > span:nth-child(4){ grid-column:2; grid-row:1; }
.vp-mini__fila > span:nth-child(5){ grid-column:2; grid-row:2; font-size:.72rem; }
.vp-mini__fila > span:first-child{ color:var(--vr-f); }
.vp-mini__cab{ padding-top:0; font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; border-bottom-color:var(--vr-filete); }
.vp-mini__cab, .vp-mini__cab > span:first-child{ color:var(--vr-tx70); }
/* el cuadre con el Resumen General */
.vp-cuadre{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 2.4rem; }
.vp-cuadre__fila{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:.75rem 0; border-bottom:1px solid var(--vr-filete-s); font-size:.88rem; color:var(--vr-f); }
.vp-cuadre__fila > .vr-num{ font-family:var(--v-glare); font-size:1.3rem; white-space:nowrap; }
.vp-cuadre__fila small{ display:block; margin-top:.1rem; font-size:.72rem; color:var(--vr-tx55); }
.vp-cuadre__fila--sub{ padding:.5rem 0 .5rem 1rem; font-size:.8rem; color:var(--vr-tx70); }
.vp-cuadre__fila--sub > .vr-num{ font-family:inherit; font-size:.9rem; color:var(--vr-tx); }
.vp-cuadre__expl{ max-width:90ch; margin-bottom:.6rem; font-size:.78rem; }
/* una tabla de proveedores angosta: lo comprado, lo pagado y lo que se debe; las demás cifras quedan en la ancha y en el Excel */
@container vsrank (max-width:720px){
  .vp-rank td[data-rot="Servicios"], .vp-rank td[data-rot="Lo que se compra"], .vp-rank td[data-rot="Proveedores"], .vp-rank td[data-rot="Unidades"]{ display:none; }
  .vp-rank td[data-rot="Comprado"]{ color:var(--vr-f); }
  .vp-rank td[data-rot="Comprado"]::before{ display:none; }
}
@media (max-width:1099px){
  .vp-cuadre{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:767px){
  #view-ventas-proveedor .viv-cab button{ font-size:0 !important; gap:0 !important; width:40px; height:40px; padding:0 !important; justify-content:center; }
  #view-ventas-proveedor .viv-cab button .material-icons-outlined{ font-size:19px !important; }
  .vp-ficha__datos{ gap:.6rem 1rem; }
  .vp-cuadre__fila > .vr-num{ font-size:1.1rem; }
}
/* ── 24 · EL REPORTE PARA CONTABILIDAD, UN HISTORIAL COMO EL DE ARIA (Luis, 2026-10-01) ─────────
   Las reservas con sus cuentas de papeles y, al abrir una, su historial servicio por servicio con
   la misma lectura que ARIA: el punto salvia es hecho, el ocre a medias y el hueco pendiente. */
/* los papeles: cuatro cifras que filtran la lista */
.vc-cifras{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); border-top:1px solid var(--vr-filete); }
.vc-cifra{ display:flex; flex-direction:column; gap:.15rem; padding:1.1rem 1.2rem 1rem 0; background:none; border:0; text-align:left; cursor:pointer; color:var(--vr-tx); font:inherit; transition:opacity 140ms linear; }
.vc-cifra + .vc-cifra{ padding-left:1.2rem; border-left:1px solid var(--vr-filete-s); }
.vc-cifras:has(.vc-cifra:hover) .vc-cifra:not(:hover){ opacity:.5; }
.vc-cifra .vr-cifra-l small{ font-size:.5em; color:var(--vr-tx55); }
.vc-cifra__ver{ margin-top:.5rem; align-self:flex-start; border-bottom:1px solid var(--vr-filete); font-size:.74rem; color:var(--vr-f); }
/* la lista: cada cuenta con su punto */
.vc-tabla td:first-child{ width:30%; }
.vc-cuenta{ display:inline-flex; align-items:center; gap:.45rem; white-space:nowrap; }
.vc-cuenta::before, .vc-ley span::before, .vc-hi__estado > div::before{ content:""; flex:none; width:7px; height:7px; border-radius:50%; box-sizing:border-box; }
:is(.vc-cuenta, .vc-ley span, .vc-hi__estado > div)[data-k="ok"]::before{ background:var(--v-salvia); }
:is(.vc-cuenta, .vc-ley span, .vc-hi__estado > div)[data-k="medio"]::before{ background:#8A6A2F; }
:is(.vc-cuenta, .vc-ley span, .vc-hi__estado > div)[data-k="no"]::before{ border:1px solid var(--vr-tx55); }
:is(.vc-cuenta, .vc-hi__estado > div)[data-k="na"]::before{ display:none; }
.vc-sin{ color:var(--vr-tx55); }
/* el historial de una reserva */
.vc-hist{ margin-top:1.2rem; container:vsrank / inline-size; }
.vc-hist__cab{ display:flex; justify-content:space-between; align-items:center; gap:.6rem 1.4rem; flex-wrap:wrap; margin-bottom:.6rem; }
.vc-hist__cab .vr-ver{ margin-top:0; }
.vc-ley{ display:flex; gap:1rem; margin:0; font-size:.72rem; color:var(--vr-tx55); }
.vc-ley span{ display:inline-flex; align-items:center; gap:.45rem; }
.vc-hi{ display:grid; grid-template-columns:minmax(0,1.5fr) 96px minmax(180px,1.1fr) repeat(3, minmax(0,.8fr)); gap:1rem; align-items:center; padding:.85rem .2rem; border-bottom:1px solid var(--vr-filete-s); }
.vc-hi--cab{ padding:.2rem .2rem .55rem; border-bottom-color:var(--vr-filete); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--vr-tx70); }
.vc-hi--cancelado .vc-hi__quien b{ text-decoration:line-through; text-decoration-color:var(--vr-tx55); }
.vc-hi__quien{ display:flex; flex-direction:column; gap:.1rem; min-width:0; }
.vc-hi__quien b{ font-weight:400; font-family:var(--v-glare); font-size:1rem; color:var(--vr-f); }
.vc-hi__quien small{ font-size:.74rem; color:var(--vr-tx70); }
.vc-hi__quien small:last-child{ color:var(--vr-tx55); }
.vc-hi__costo{ font-family:var(--v-glare); font-size:1rem; color:var(--vr-f); }
.vc-hi__estado{ display:grid; gap:.3rem; margin:0; }
.vc-hi__estado > div{ display:flex; align-items:center; gap:.45rem; min-width:0; }
.vc-hi__estado dt{ flex:none; width:52px; font-size:.56rem; letter-spacing:.14em; text-transform:uppercase; color:var(--vr-tx55); }
.vc-hi__estado dd{ min-width:0; margin:0; font-size:.78rem; color:var(--vr-f); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vc-hi__estado [data-k="no"] dd, .vc-hi__estado [data-k="na"] dd{ color:var(--vr-tx55); }
.vc-hi__estado [title]{ cursor:help; }
.vc-num{ font-variant-numeric:tabular-nums; letter-spacing:.03em; }
.vc-vacio{ font-size:.74rem; color:var(--vr-tx55); }
@container vsrank (max-width:720px){
  .vc-tabla td:first-child{ width:auto; }
  .vc-tabla td[data-rot="Servicios"], .vc-tabla td[data-rot="Viaje"] small{ display:none; }
  /* el viaje, debajo del nombre y sin rótulo: la fecha se explica sola */
  .vc-tabla td[data-rot="Viaje"]{ flex-basis:100%; margin-top:-.35rem; color:var(--vr-tx70); }
  .vc-tabla td[data-rot="Viaje"]::before{ display:none; }
  .vc-tabla td[data-rot="Pagado"] small{ display:none; }
}
@container vsrank (max-width:900px){
  /* el historial angosto: quién y cuánto arriba, el estado debajo y cada pila en su renglón */
  .vc-hi--cab{ display:none; }
  .vc-hi{ grid-template-columns:minmax(0,1fr) auto; gap:.5rem 1rem; }
  .vc-hi__quien{ grid-column:1; } .vc-hi__costo{ grid-column:2; grid-row:1; justify-self:end; }
  .vc-hi__estado{ grid-column:1 / -1; }
  .vc-hi > [data-rot]:not(.vc-hi__costo, .vc-hi__estado){ grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:30px; }
  .vc-hi > [data-rot]:not(.vc-hi__costo, .vc-hi__estado)::before{ content:attr(data-rot); font-size:.56rem; letter-spacing:.14em; text-transform:uppercase; color:var(--vr-tx55); }
}
@media (max-width:1099px){
  .vc-cifras{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .vc-cifra:nth-child(3){ padding-left:0; border-left:0; }
  .vc-cifra:nth-child(n+3){ border-top:1px solid var(--vr-filete-s); }
}
@media (max-width:767px){
  #view-cotizaciones .viv-cab button{ font-size:0 !important; gap:0 !important; width:40px; height:40px; padding:0 !important; justify-content:center; }
  #view-cotizaciones .viv-cab button .material-icons-outlined{ font-size:19px !important; }
  .vc-cifra{ padding:.8rem .8rem .8rem 0; }
  .vc-cifra + .vc-cifra{ padding-left:.8rem; }
  .vc-cifra:nth-child(3){ padding-left:0; }
}
/* buscar un proveedor y su ficha de costado: las cuentas bancarias primero, en su propio bloque */
.vc-prov-res{ border-left:0; margin-left:0; border-top:1px solid var(--vr-filete); }
.vc-prov{ padding:0; background:none; border:0; border-bottom:1px solid var(--vr-filete); text-align:left; cursor:pointer; font-family:var(--v-glare); font-size:1rem; color:var(--vr-f); }
.vc-prov:hover{ border-bottom-color:var(--vr-f); }
.vc-ficha{ position:fixed; inset:0; z-index:9000; }
.vc-ficha[hidden]{ display:none; }
.vc-ficha__velo{ position:absolute; inset:0; background:rgba(10,16,22,.55); }
.vc-ficha__hoja{ position:absolute; top:0; right:0; bottom:0; width:min(560px, 100%); overflow-y:auto; padding:2rem 2rem 2.5rem; background:var(--v-tinta); border-left:1px solid var(--vr-filete); box-shadow:var(--v-sombra); }
html[data-tema="teal"] .vc-ficha__hoja{ background:#046477; }
html[data-tema="claro"] .vc-ficha__hoja:not([data-pz-foto]){ background:#F6F3ED; }
body.vc-ficha-abierta{ overflow:hidden; }
.vc-ficha__cerrar{ position:absolute; top:1rem; right:1rem; display:inline-flex; padding:.35rem; background:none; border:1px solid var(--vr-filete); border-radius:99px; color:var(--vr-tx70); cursor:pointer; }
.vc-ficha__tit{ margin:.3rem 2.5rem .25rem 0; font-size:1.8rem !important; line-height:1.1; color:var(--vr-f) !important; }
.vc-ficha__una{ margin-top:1.4rem; padding-top:1.2rem; border-top:1px solid var(--vr-filete); }
.vc-ficha__sub{ margin-bottom:.8rem; font-family:var(--v-glare); font-size:1.05rem; color:var(--vr-f); }
.vc-ficha__datos{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem 1.2rem; margin:0 0 1.2rem; }
.vc-ficha__datos dd{ margin-top:.15rem; font-size:.82rem; color:var(--vr-f); overflow-wrap:anywhere; }
.vc-ficha__banco{ padding:1rem 1.1rem; border-radius:12px; background:var(--vr-hoja); border:1px solid var(--vr-hoja-borde); }
.vc-ficha__banco-cab{ display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:.5rem; }
.vc-ficha__banco-cab .vr-rot{ display:inline-flex; align-items:center; gap:.45rem; }
.vc-ficha__banco-cab .material-icons-outlined{ font-size:16px; color:var(--vr-entra); }
.vc-ficha__bloque{ margin-top:1.1rem; }
.vc-ficha__txt{ margin-top:.35rem; font-size:.84rem; line-height:1.6; color:var(--vr-tx); white-space:pre-wrap; overflow-wrap:anywhere; }
/* la lista de servicios de costado del Reporte de Proveedores */
.vr-lado__acc{ display:flex; justify-content:flex-end; margin:.8rem 0 .4rem; }
.vr-lado__lista{ border-left:0; margin-left:0; border-top:1px solid var(--vr-filete); }
.vr-lado__lista .vs-res__nom small + small{ margin-top:0; }
.vr-lado__volver{ display:inline-flex; align-items:center; gap:.35rem; margin:0 0 1rem; }
.vr-lado__volver .material-icons-outlined{ font-size:15px; }
.vc-ficha__hoja--ancha{ width:min(1040px, 100%); }
.vc-ficha__en{ margin-left:.4rem; padding:0 .4rem; border-radius:99px; background:var(--vr-pista); font-size:.9em; letter-spacing:.04em; text-transform:none; }
@media (max-width:767px){
  .vc-ficha__hoja{ padding:1.4rem 1.1rem 2rem; }
  .vc-ficha__tit{ font-size:1.4rem !important; }
}
/* ── 25 · LOS REPORTES DE COMISIONES NUBA Y VIRTUOSO (Luis, 2026-10-01) ─────────────────────────
   El panorama de lo que corresponde contra lo que trae Toursys, lo que pide atención al costado, y
   las reservas como el Excel de contabilidad. */
.vk-panorama{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); }
.vk-atencion{ grid-template-columns:minmax(0,1fr); }
.vk-atencion .vr-at + .vr-at{ border-left:0; border-top:1px solid var(--vr-hoja-borde); }
.vk-tabla td:first-child{ width:26%; }
.vk-sin{ font-size:.76rem; color:var(--vr-tx55); }
.vk-tabla th{ white-space:normal; }
/* por agencia Virtuoso: la que no tiene agencia asignada, marcada; y el editor de la equivalencia */
.vk-sinag{ display:inline-block; margin-left:.4rem; padding:0 .5rem; border-radius:99px; background:var(--vr-ocre-f); font-size:.68rem; color:var(--vr-tx); }
.vk-ag-editor{ border-top:1px solid var(--vr-filete); }
.vk-ag-fila{ display:grid; grid-template-columns:minmax(0,1.6fr) 120px 90px; gap:.6rem .8rem; align-items:end; padding:.9rem 0; border-bottom:1px solid var(--vr-filete-s); }
.vk-ag-fila .vk-ag-cliente, .vk-ag-fila .vk-ag-acc{ grid-column:1 / -1; }
.vk-lado__tit{ margin:1.4rem 0 .5rem; }
.vk-ag-fila:last-child{ border-bottom:0; }
.vk-ag-cliente{ display:flex; flex-direction:column; gap:.1rem; min-width:0; color:var(--vr-f); font-size:.84rem; }
.vk-ag-cliente b{ font-weight:400; }
.vk-ag-cliente small{ font-size:.7rem; color:var(--vr-tx55); }
.vk-ag-fila label{ display:flex; flex-direction:column; gap:.25rem; min-width:0; }
.vk-ag-fila input{ width:100%; padding:.4rem .7rem; border-radius:9px; border:1px solid var(--vr-filete); background:transparent; color:var(--vr-tx); font:inherit; font-size:.8rem; outline:none; }
.vk-ag-fila input:focus{ border-color:var(--vr-entra); }
.vk-ag-acc{ display:flex; align-items:center; gap:.8rem; }
.vk-ag-acc .vr-ver{ margin-top:0; }
/* Agencias y clientes, de costado: el alta de un cliente arriba y todas las equivalencias debajo */
.vk-panel__nueva .vk-ag-cliente{ gap:.25rem; }
.vk-panel__clientes{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:.4rem; margin:0; padding:0; list-style:none; }
.vk-panel__clientes li{ display:inline-flex; align-items:center; gap:.35rem; padding:.15rem .3rem .15rem .7rem; border-radius:99px; border:1px solid var(--vr-filete); font-size:.76rem; color:var(--vr-tx); }
.vk-panel__clientes small{ color:var(--vr-tx55); font-size:.68rem; }
.vk-panel__clientes button{ display:inline-flex; padding:.15rem; border:0; border-radius:99px; background:none; color:var(--vr-tx55); cursor:pointer; }
.vk-panel__clientes button:hover{ color:var(--vr-tx); background:var(--vr-filete-s); }
.vk-panel__clientes .material-icons-outlined{ font-size:14px; }
@media (max-width:900px){
  .vk-ag-fila{ grid-template-columns:1fr 1fr; }
  .vk-ag-fila label:first-of-type, .vk-panel__nueva label:nth-of-type(2){ grid-column:1 / -1; }
}
@container vsrank (max-width:720px){
  .vk-tabla td[data-rot="Agente"], .vk-tabla td[data-rot="Viaje"] small{ display:none; }
  .vk-tabla td[data-rot="Viaje"]{ flex-basis:100%; margin-top:-.35rem; color:var(--vr-tx70); }
  .vk-tabla td[data-rot="Viaje"]::before{ display:none; }
}
@media (max-width:1099px){ .vk-panorama{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:767px){
  :is(#view-comisiones-nuba, #view-comisiones-virtuoso, #view-actualizacion-proveedores) .viv-cab button{ font-size:0 !important; gap:0 !important; width:40px; height:40px; padding:0 !important; justify-content:center; }
  :is(#view-comisiones-nuba, #view-comisiones-virtuoso, #view-actualizacion-proveedores) .viv-cab button .material-icons-outlined{ font-size:19px !important; }
}
/* ── 26 · ACTUALIZACIÓN DE PROVEEDORES, EN LA LÍNEA DE LOS DEMÁS (Luis, 2026-10-02) ───────────
   «Nunca lo llevamos al nivel de las demás secciones»: las piezas del tablero sobre las carpetas
   de CIMA. El diagnóstico de cada carpeta lleva su color en la barra de «Cómo están» y en su
   pastilla; la pastilla va en relleno, nunca en letra de color (el rojo, sólo de relleno). */
.ap-e-sync{ background:var(--vr-entra); } .ap-e-adel{ background:var(--vr-sale); }
.ap-e-pend{ background:#8A6A2F; } .ap-e-miss{ background:var(--vr-fact); }
.ap-diag{ display:inline-block; padding:.05rem .55rem; border-radius:99px; font-size:.72rem; white-space:nowrap; color:var(--vr-tx); }
.ap-e-sync-f{ background:var(--vr-entra-f); } .ap-e-adel-f{ background:var(--vr-pista); box-shadow:inset 0 0 0 1px var(--vr-filete); }
.ap-e-pend-f{ background:var(--vr-ocre-f); } .ap-e-miss-f{ background:var(--vr-pista); color:var(--vr-tx70); }
/* un año atrasado o un contrato pendiente: en relleno ocre, como la pastilla */
.ap-atras{ display:inline-block; padding:0 .4rem; border-radius:99px; background:var(--vr-ocre-f); color:var(--vr-tx); }
.ap-nada{ color:var(--vr-tx55); }
.vr-trio .vr-ver{ margin-top:.35rem; }
/* cuándo vence: la cifra es un conteo */
.ap-tramo .vr-pista i{ min-width:3px; }
.ap-tramo .vr-tramo__dif .vr-ver{ margin-top:.25rem; }
@media (min-width:1100px){ .ap-tramo{ grid-template-columns:230px minmax(0,1fr) 170px; } }
/* la tabla de las carpetas: angosta, el estado y los años arriba; el resto, a la ficha */
.ap-rank td:first-child{ width:30%; }
@container vsrank (max-width:720px){
  .ap-rank td[data-rot="Estado"]::before, .ap-rank td[data-rot="Tarifario"], .ap-rank td[data-rot="Contrato"]{ display:none; }
}
/* la ficha de costado */
.ap-ficha__est{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem .7rem; margin:.4rem 0 1.3rem; }
.ap-ficha__est .vr-nota{ font-size:.8rem; }
.ap-carpeta{ display:inline-flex !important; align-items:center; gap:.4rem; text-decoration:none; }
.ap-en{ display:inline; margin-left:.4rem; font-family:var(--v-sans); }
.ap-srv{ cursor:default; }
.ap-srv:hover{ background:none; }

@media (prefers-reduced-motion:reduce){ .vc-cifra, .vr-at, .vr-mes, .vr-tramo, .vr-tabla tbody tr, .vs-rank tbody tr, .vs-punto, .vs-tallo, .vs-tallo i, .vd-fila, .vd-flecha{ transition:none !important; } }