/* GENERADO por 5 herramientas/generar-tema-teal.py desde grupales-lujo.css — NO SE EDITA A MANO.
   Es la misma hoja con la tinta cambiada por teal (16 colores traducidos); cada regla
   traducida lleva su gemela oscura para lo que va sobre la foto ([data-pz-foto]). Lo que
   el teal necesita de más va a mano en su archivo de ajustes. */
/* ═══════════════════════════════════════════════════════════════════════════
   COTIZACIONES GRUPALES — LA LÍNEA DE LUJO (2026-09-29)
   ───────────────────────────────────────────────────────────────────────────
   El molde de CIMA, en su versión para apps con Tailwind (CAMPO y RAÍCES). Las funciones y
   la estructura de la app no cambian: esta hoja sólo viste lo que ya hay.
   El concepto: la ventana al país. Cada vista abre con una foto de Costa Rica (el motor de
   ARIA y CIMA, en grupales-viaje.js) 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.
   La paleta de Tailwind ya llega en tinta (grupales-tw.js); esta hoja cubre lo que Tailwind
   no pinta: el blanco, las clases propias de la app (`grp-*`) y los colores escritos a mano.

   EL DOCUMENTO DEL CLIENTE ES PAPEL: `#print-view` es la hoja que ve el cliente, la que se
   imprime y de la que sale el PDF. Se arma con estilos en línea y NINGUNA regla de acá la toca
   (todas las generales lo excluyen): alrededor de la hoja cambia todo; la hoja, nada.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{ --c-tinta:#046477; --c-hondo:#03505f; --c-hoja:#005565; --c-campo:#0b6576; --c-deep:#006d82; --c-teal:#006D82;
  --c-salvia:#b7cc9a; --c-crema:#EADFCE; --c-crema70:rgba(255,255,255,.86); --c-filete:rgba(234,223,206,.16);
  --c-filete-s:rgba(234,223,206,.09); --c-glare:Marcellus, 'PP Fragment Glare', Georgia, serif;
  --c-sans:Figtree, 'PP Fragment Sans', Inter, system-ui, sans-serif; --c-sombra:0 30px 70px -18px rgba(4,100,119,.62); }
:root:where([data-pz-foto]){--c-tinta:#1A2633;--c-hondo:#141D27;--c-hoja:#222E3A;--c-campo:#2A3541;--c-deep:#005565;--c-salvia:#7D9B5B;--c-crema70:rgba(234,223,206,.70);--c-sombra:0 30px 70px -18px rgba(26,38,51,.62)}
:root :where([data-pz-foto]){--c-tinta:#1A2633;--c-hondo:#141D27;--c-hoja:#222E3A;--c-campo:#2A3541;--c-deep:#005565;--c-salvia:#7D9B5B;--c-crema70:rgba(234,223,206,.70);--c-sombra:0 30px 70px -18px rgba(26,38,51,.62)}

/* ── 1 · Suelo, letra y peso ─────────────────────────────────────────────── */
html.grupales-lujo body{ background:var(--c-tinta) !important; color:var(--c-crema) !important; font-family:var(--c-sans) !important; }
html.grupales-lujo body *:not(:where(#print-view, #print-view *)){ font-weight:400 !important; font-style:normal !important; }
html.grupales-lujo :is(h1, h2, h3, h4, .font-display):not(:where(#print-view *)){ font-family:var(--c-glare) !important; letter-spacing:.01em !important; }
html.grupales-lujo .font-mono:not(:where(#print-view *)){ font-family:var(--c-sans) !important; font-variant-numeric:tabular-nums; letter-spacing:0 !important; }
html.grupales-lujo #main-app, html.grupales-lujo #main-app > main, html.grupales-lujo #main-app .view-section,
html.grupales-lujo #main-app .grp-page{ background:var(--c-tinta) !important; }
/* los controles nativos (el calendario de los campos de fecha, las barras) en claro sobre tinta */
html.grupales-lujo:not([data-tema="claro"]){ color-scheme:dark; }
html.grupales-lujo ::selection{ background-color:var(--c-deep); color:#FFFFFF; }
html.grupales-lujo ::-webkit-scrollbar-thumb{ background:rgba(234,223,206,.16); }
html.grupales-lujo ::-webkit-scrollbar-thumb:hover{ background:rgba(234,223,206,.28); }

/* ── 2 · Lo que Tailwind no pinta (la capa general de ARIA, como en CAMPO) ── */
/* lo que era blanco es la hoja: tinta un paso más clara */
html.grupales-lujo .bg-white.bg-white:not(#login-screen *):not(#print-view){ background-color:var(--c-hoja); }
html.grupales-lujo :is([class^="bg-white/"], [class*=" bg-white/"]):not(#login-screen *):not(.gru-cab *){ background-color:rgba(234,223,206,.05) !important; }
html.grupales-lujo .bg-black\/80, html.grupales-lujo .bg-black\/90{ background-color:rgba(3,80,95,.78) !important; }
html.grupales-lujo .bg-black\/80:where([data-pz-foto]), html.grupales-lujo .bg-black\/90:where([data-pz-foto]){background-color:rgba(20,29,39,.78) !important}
/* una sola sombra en el producto, la del modal: todo lo demás se eleva por material */
html.grupales-lujo .shadow-sm.shadow-sm, html.grupales-lujo .shadow.shadow, html.grupales-lujo .shadow-md.shadow-md,
html.grupales-lujo .shadow-lg.shadow-lg, html.grupales-lujo .shadow-xl.shadow-xl, html.grupales-lujo .shadow-inner.shadow-inner{ box-shadow:none; }
html.grupales-lujo .shadow-2xl:not(#login-screen *){ box-shadow:var(--c-sombra) !important; }
html.grupales-lujo :is(.hover\:scale-105, .hover\:scale-110, .hover\:scale-\[1\.02\]):hover{ transform:none !important; }
/* el relleno de acción es deep, con letra blanca; al pasar, teal */
html.grupales-lujo :is(.bg-tnteal, .grp-btn-primary):not(#login-screen *){ background-color:var(--c-deep) !important; background-image:none !important; color:#FFFFFF !important;
  border-color:var(--c-deep) !important; box-shadow:none !important; }
html.grupales-lujo :is(.bg-tnteal, .grp-btn-primary):not(#login-screen *):hover{ background-color:var(--c-teal) !important; border-color:var(--c-teal) !important; }
html.grupales-lujo :is([class^="bg-red-5"], [class*=" bg-red-5"], [class^="bg-red-6"], [class*=" bg-red-6"]){ background-color:#B3261E !important; color:#FFFFFF !important; }
html.grupales-lujo .bg-tnnavy{ background-color:var(--c-hondo) !important; }
/* el degradado animado de la app de antes (sage → navy → deep): fuera de marca → sin barra */
html.grupales-lujo .bg-ruta-insignia{ background:transparent !important; background-image:none !important; animation:none !important; box-shadow:none !important; }
/* la letra de las familias de la app: el teal como letra sobre tinta no se lee (2,56:1) */
html.grupales-lujo :is(.text-tnteal, .text-tntealdeep, .text-tnnavy, .text-tnsage):not(:where(#print-view *)){ color:var(--c-crema) !important; }
html.grupales-lujo :is(.hover\:text-tnteal, .hover\:text-tntealdeep):hover{ color:#FFFFFF !important; }
html.grupales-lujo .hover\:border-tnteal:hover, html.grupales-lujo .focus\:border-tnteal:focus{ border-color:var(--c-teal) !important; }
html.grupales-lujo .text-\[\#ede1cf\]\/75, html.grupales-lujo .hover\:text-\[\#ede1cf\]:hover{ color:var(--c-crema) !important; }
/* los campos: la hoja un paso más clara; el foco con anillo doble */
html.grupales-lujo body input:not(#login-screen *):not(.gru-cab *):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not(.grp-input:not(.border)):not(.toolbar-color-input),
html.grupales-lujo body textarea:not(#login-screen *):not(.grp-input:not(.border)),
html.grupales-lujo body select:not(#login-screen *):not(.gru-cab *):not(.grp-input:not(.border)){
  background-color:var(--c-campo) !important; color:var(--c-crema) !important; border-color:var(--c-filete) !important; }
/* los campos de las tablas: sin caja hasta que se tocan, como en la app de antes */
html.grupales-lujo .grp-input:not(.border){ background:transparent !important; color:var(--c-crema) !important; border-color:transparent !important; }
html.grupales-lujo .grp-input:not(.border):hover{ border-color:var(--c-filete) !important; }
html.grupales-lujo .grp-input:not(.border):focus{ background:var(--c-campo) !important; border-color:var(--c-teal) !important; box-shadow:0 0 0 2px rgba(0,109,130,.25) !important; }
html.grupales-lujo .grp-input:disabled, html.grupales-lujo input:disabled, html.grupales-lujo select:disabled, html.grupales-lujo textarea:disabled{ opacity:.6; cursor:not-allowed; }
html.grupales-lujo body :is(input, textarea, select, button):not(#login-screen *):focus-visible{
  outline:2px solid var(--c-teal) !important; box-shadow:0 0 0 4px rgba(234,223,206,.22) !important; }
html.grupales-lujo select option{ background-color:var(--c-hoja); color:var(--c-crema); }
html.grupales-lujo input::placeholder, html.grupales-lujo textarea::placeholder{ color:rgba(255,255,255,.86) !important; opacity:.75; }
html.grupales-lujo input:where([data-pz-foto])::placeholder, html.grupales-lujo textarea:where([data-pz-foto])::placeholder{color:rgba(234,223,206,.70) !important}
html.grupales-lujo input[type=checkbox], html.grupales-lujo input[type=radio]{ accent-color:var(--c-deep); }
html.grupales-lujo input[type=number]::-webkit-inner-spin-button, html.grupales-lujo input[type=number]::-webkit-outer-spin-button{ opacity:.5; }
/* avisos: el ocre de sistema, sólo de relleno; la letra, crema */
html.grupales-lujo :is([class^="bg-amber-50"], [class*=" bg-amber-50"], [class^="bg-yellow-50"], [class*=" bg-yellow-50"]){ background-color:#352F2B !important; border-color:#8A6A2F !important; color:var(--c-crema); }
html.grupales-lujo :is([class^="bg-red-50"], [class*=" bg-red-50"], [class^="bg-rose-50"], [class*=" bg-rose-50"]){ background-color:#3A2429 !important; border-color:rgba(179,38,30,.5) !important; }
/* los tonos 300–500 son relleno, nunca letra: sobre tinta se leen en crema */
html.grupales-lujo :is([class^="text-sky-"], [class*=" text-sky-"], [class^="text-amber-"], [class*=" text-amber-"],
  [class^="text-red-4"], [class*=" text-red-4"], [class^="text-red-5"], [class*=" text-red-5"],
  [class^="text-emerald-"], [class*=" text-emerald-"], [class^="text-green-"], [class*=" text-green-"]):not(:where(#print-view *)){ color:var(--c-crema) !important; }

/* ── 3 · El login (la estructura es la de prisma-login.css) ─────────────────
   La foto de hoy se queda hasta que la sesión de fotos traiga la nueva; el velo es el del libro. */
#login-screen::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(26,38,51,.18) 0%, rgba(26,38,51,.18) 45%, rgba(26,38,51,.45) 100%); }
/* GRUPALES · el botón de su login: el deep del mar y el salvia del bosque, que van y vienen como
   un grupo que camina junto (provisional hasta la foto nueva: el degradado sale de la foto). */
html:not(#_):not(#_) .pl-caja[data-pl="grupales"]{ --pl-grad:linear-gradient(120deg, #0E3A4A, #006d82, #4F6749, #b7cc9a, #006d82, #0E3A4A);
  --pl-tam:320% 100%; --pl-mov:plGrupo 12s ease-in-out infinite alternate; }
html:not(#_):not(#_) .pl-caja[data-pl="grupales"]:where([data-pz-foto]){--pl-grad:linear-gradient(120deg, #0E3A4A, #005565, #4F6749, #7D9B5B, #005565, #0E3A4A)}
html:not(#_):not(#_) .pl-caja[data-pl="grupales"] :where([data-pz-foto]){--pl-grad:linear-gradient(120deg, #0E3A4A, #005565, #4F6749, #7D9B5B, #005565, #0E3A4A)}
@keyframes plGrupo{ from{ background-position:0% 50%; } to{ background-position:100% 50%; } }

/* ── 4 · El riel ─────────────────────────────────────────────────────────── */
#main-sidebar{ background:var(--c-hondo) !important; animation:none !important; border-right:1px solid rgba(234,223,206,.10) !important; box-shadow:none !important; }
#main-sidebar > div:first-child{ border-bottom-color:rgba(234,223,206,.10) !important; }
#main-sidebar .gru-logo{ display:block; height:36px; width:auto; margin:0 auto .85rem; }
#main-sidebar h2{ font-family:var(--c-sans) !important; font-size:.66rem !important; letter-spacing:.3em !important; text-transform:uppercase; color:var(--c-crema70) !important; }
#main-sidebar .user-glass-pill{ margin-top:1rem !important; }
#display-user-name{ color:var(--c-crema) !important; }
/* el disco de la persona: deep, como el de ARIA */
#user-pill .rounded-full.w-6.h-6:not(button){ background:var(--c-deep) !important; border-color:rgba(234,223,206,.22) !important; }
#main-sidebar nav{ padding:1rem .8rem !important; gap:2px !important; scrollbar-width:none; }
#main-sidebar nav::-webkit-scrollbar{ display:none; }
#main-sidebar .sidebar-section-label{ display:flex; align-items:center; gap:.7rem; padding:.2rem .95rem .6rem !important; font-size:.6rem !important; letter-spacing:.26em !important;
  text-transform:uppercase; color:rgba(255,255,255,.76) !important; }
#main-sidebar .sidebar-section-label:where([data-pz-foto]){color:rgba(234,223,206,.62) !important}
#main-sidebar .sidebar-section-label.hidden{ display:none; }
#main-sidebar .sidebar-section-label:not(:first-child){ margin-top:.9rem; }
#main-sidebar .sidebar-section-label::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg, rgba(234,223,206,.16), transparent); }
.sidebar-link{ border:0 !important; border-radius:99px !important; padding:.55rem .95rem !important; margin:0 !important; color:var(--c-crema70) !important;
  backdrop-filter:none !important; transition:background-color 120ms linear, color 120ms linear !important; }
.sidebar-link .material-icons-outlined{ color:var(--c-crema70); text-shadow:none !important; transform:none !important; margin-right:.85rem !important; }
.sidebar-link > span:not(.material-icons-outlined){ font-size:.84rem !important; letter-spacing:.01em !important; }
.sidebar-link:hover{ background:rgba(234,223,206,.06) !important; color:var(--c-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) !important; }
.sidebar-link.active .material-icons-outlined, .sidebar-link:hover .material-icons-outlined{ color:#FFFFFF; }
#main-sidebar > div:last-of-type{ background:transparent !important; backdrop-filter:none !important; border-top-color:rgba(234,223,206,.10) !important; }
#main-sidebar .gru-pie p{ font-size:.58rem; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.76); }
#main-sidebar .gru-pie p:where([data-pz-foto]){color:rgba(234,223,206,.45)}
#main-sidebar .gru-pie p + p{ margin-top:.3rem; letter-spacing:.14em; color:rgba(234,223,206,.32); }

/* ── 5 · La cabecera de cada vista: una foto de Costa Rica, empotrada como en CIMA ──
   Va a sangre —de borde a borde, pegada arriba, sin recuadro— y el contenido sigue debajo
   sobre la tinta. Las dos capas de foto las pone el motor (grupales-viaje.js); el velo es el
   del libro: tinta arriba para la ceja, limpia al medio y 45 % abajo. */
.gru-cab{ position:relative; isolation:isolate; overflow:hidden; display:flex !important; flex-direction:row; flex-wrap:wrap;
  justify-content:space-between; align-items:flex-end; align-content:flex-end; margin:-2rem -2rem 2rem;
  padding:2.2rem 2.25rem 1.7rem; border:0; border-radius:0; background:var(--c-hondo); gap:1.2rem 1.5rem; width:auto; color:#FFFFFF; }
.gru-cab__fotos{ position:absolute; inset:0; z-index:-2; display:block; }
.gru-cab__foto{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0;
  transition:opacity .62s cubic-bezier(.22,.9,.24,1); }
.gru-cab__foto.activa{ opacity:1; }
.gru-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%); }
/* el título en un renglón, entero: si no cabe al lado de los botones, los botones bajan debajo */
.gru-cab > div:first-of-type{ align-self:flex-end; flex:1 0 auto; max-width:100%; min-width:0; }
.gru-cab h1{ white-space:nowrap; }
@media (max-width:1099px){
  .gru-cab{ flex-wrap:nowrap; }
  .gru-cab > div:first-of-type{ flex:0 0 auto !important; }
}
/* en tableta y celular la fila del editor tiene más botones de los que caben: se desliza desde el
   primero (con `flex-end` los de la izquierda quedaban fuera de alcance); si caben, el margen la
   corre a la derecha */
@media (max-width:1099px){
  html.grupales-lujo .gru-cab--editor > div:last-of-type{ justify-content:flex-start !important; flex-wrap:nowrap !important; }
  html.grupales-lujo .gru-cab--editor > div:last-of-type > :first-child{ margin-left:auto; }
}
/* en el celular la foto mide 176 px: el título baja un punto para caber con su ceja, y si aun así
   no cabe, pasa a dos renglones en vez de cortarse */
@media (max-width:767px){ html.grupales-lujo .view-section > .gru-cab h1{ font-size:1.3rem !important; white-space:normal !important; line-height:1.08 !important; text-wrap:balance; } }
/* sin botones (Configuración), el bloque del título no les guarda el renglón de abajo */
@media (max-width:1099px){ html.grupales-lujo .gru-cab:has(> div:last-of-type:empty) > div:first-of-type{ padding-bottom:0 !important; } }
.gru-cab__ceja{ display:block; margin-bottom:.7rem; font-family:var(--c-sans); font-size:.66rem; letter-spacing:.26em; text-transform:uppercase; color:rgba(255,255,255,.80); white-space:nowrap; }
html.grupales-lujo .gru-cab h1{ margin:0; font-family:var(--c-glare) !important; font-size:clamp(2.1rem, 3.1vw, 2.9rem) !important; line-height:1.05 !important; color:#FFFFFF !important;
  letter-spacing:-.005em !important; }
.gru-cab h1 + p{ margin-top:.55rem; font-size:.78rem; letter-spacing:.02em; color:rgba(255,255,255,.82); }
.gru-cab > div:last-of-type{ display:flex; align-items:center; flex-wrap:nowrap; justify-content:flex-end; gap:.5rem; flex:none; margin-left:auto; }
.gru-cab > div:last-of-type > .relative{ width:18rem; }
.gru-cab > div:last-of-type > .relative > .material-icons-outlined{ color:rgba(255,255,255,.75); z-index:1; }
/* los botones de la cabecera, como pastillas de vidrio sobre la foto (igual que en CIMA y CAMPO) */
.gru-cab button, .gru-cab select{ display:inline-flex; align-items:center; gap:.4rem; border-radius:99px !important; background:rgba(4,100,119,.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; font-size:.78rem !important; letter-spacing:.02em; line-height:1.2; cursor:pointer; transition:border-color 120ms linear, background-color 120ms linear; }
.gru-cab button:where([data-pz-foto]), .gru-cab select:where([data-pz-foto]){background:rgba(26,38,51,.45) !important}
.gru-cab button:hover, .gru-cab select:hover{ border-color:#FFFFFF !important; background:rgba(4,100,119,.62) !important; }
.gru-cab button:hover:where([data-pz-foto]), .gru-cab select:hover:where([data-pz-foto]){background:rgba(26,38,51,.62) !important}
.gru-cab button .material-icons-outlined{ font-size:18px !important; }
.gru-cab select{ -webkit-appearance:none; appearance:none; padding-right:1.05rem !important; }
.gru-cab select option{ background:var(--c-hoja); color:var(--c-crema); }
.gru-cab .material-icons-outlined{ color:inherit; }
/* el relleno de acción sobre la foto: Nueva, Guardar y «En vivo» encendido */
.gru-cab :is(.gru-primario, .grp-btn-primary){ background:var(--c-deep) !important; border-color:var(--c-deep) !important; }
.gru-cab :is(.gru-primario, .grp-btn-primary):hover{ background:var(--c-teal) !important; border-color:var(--c-teal) !important; }
.gru-cab input{ border-radius:99px !important; background:rgba(4,100,119,.55) !important; color:#FFFFFF !important; border:1px solid rgba(255,255,255,.28) !important; }
.gru-cab input:where([data-pz-foto]){background:rgba(26,38,51,.55) !important}
.gru-cab input::placeholder{ color:rgba(255,255,255,.7) !important; opacity:1; }
/* LA CABECERA DEL EDITOR: el título de la cotización ES el título de la vista. Se escribe sobre
   la foto, en Marcellus, sin caja; el filete de abajo aparece al pasar y queda al escribir. */
html.grupales-lujo .gru-cab .gru-cab__titulo{ display:block; width:100%; max-width:none !important; margin:0; padding:0 0 .15rem !important; background:transparent !important;
  border:0 !important; border-bottom:1px solid transparent !important; border-radius:0 !important; box-shadow:none !important; outline:none !important;
  font-family:var(--c-glare) !important; font-size:clamp(1.9rem, 2.7vw, 2.6rem) !important; line-height:1.1 !important; color:#FFFFFF !important; letter-spacing:-.005em; }
html.grupales-lujo .gru-cab .gru-cab__titulo:hover{ border-bottom-color:rgba(255,255,255,.34) !important; }
html.grupales-lujo .gru-cab .gru-cab__titulo:focus{ border-bottom-color:#FFFFFF !important; }
.gru-cab__cliente{ display:flex; align-items:center; gap:.4rem; margin-top:.55rem; }
.gru-cab__cliente > .material-icons-outlined{ font-size:16px; color:rgba(255,255,255,.8); }
html.grupales-lujo .gru-cab .gru-cab__cliente input{ width:16rem; max-width:60vw !important; padding:.1rem 0 !important; background:transparent !important; border:0 !important;
  border-bottom:1px solid transparent !important; border-radius:0 !important; box-shadow:none !important; outline:none !important; font-size:.86rem; color:rgba(255,255,255,.9) !important; }
html.grupales-lujo .gru-cab .gru-cab__cliente input:hover{ border-bottom-color:rgba(255,255,255,.34) !important; }
html.grupales-lujo .gru-cab .gru-cab__cliente input:focus{ border-bottom-color:#FFFFFF !important; }
.gru-cab__cliente .grp-pill{ margin-left:.4rem; }
.gru-cab--editor{ margin:0; }
.gru-cab--editor > div:last-of-type{ flex-wrap:wrap; row-gap:.45rem; max-width:100%; }
/* en el editor los botones son círculos con su globo (el `title`): con el riel abierto no caben
   con su rótulo al lado del título. Guardar conserva el suyo. En pantallas anchas vuelven todos. */
@media (max-width:1599px){
  .gru-cab--editor > div:last-of-type > button:not(.gru-primario){ width:36px; height:36px; padding:0 !important; justify-content:center; }
  .gru-cab--editor > div:last-of-type > button:not(.gru-primario) .gru-rotulo{ display:none; }
}
/* el marco de la vista: la cabecera empieza donde empieza la vista */
.gru-intro{ margin:0 0 1.2rem; max-width:48rem; font-size:.8rem; line-height:1.55; color:var(--c-crema70); }

/* ── 6 · Las piezas propias de la app, en tinta ─────────────────────────── */
/* las hojas del contenido: tenues sobre la tinta, sin sombra */
html.grupales-lujo :is(.grp-card, .grp-stat){ background:rgba(234,223,206,.028) !important; border:1px solid rgba(234,223,206,.08) !important; border-radius:16px !important; box-shadow:none !important; }
html.grupales-lujo .grp-card.bg-slate-50{ background:rgba(234,223,206,.045) !important; }
html.grupales-lujo .grp-card:hover{ box-shadow:none !important; }
/* EL TABLERO: las cifras grandes en Marcellus, como en CIMA; un punto de relleno dice qué cuenta */
html.grupales-lujo .grp-stat{ padding:1.05rem 1.2rem 1.1rem !important; }
html.grupales-lujo .grp-stat-label{ display:flex; align-items:center; gap:.55rem; font-size:.6rem !important; letter-spacing:.24em !important; color:var(--c-crema70) !important; }
html.grupales-lujo .grp-stat-label::before{ content:""; width:7px; height:7px; flex:none; border-radius:99px; background:rgba(234,223,206,.34); }
html.grupales-lujo .grp-stat:has(#stat-total) .grp-stat-label::before{ background:var(--c-crema); }
html.grupales-lujo .grp-stat:has(#stat-enviada) .grp-stat-label::before{ background:var(--c-teal); }
html.grupales-lujo .grp-stat:has(#stat-aprobada) .grp-stat-label::before{ background:var(--c-salvia); }
/* el título de cada hoja («Datos generales», «Resultados»…): Marcellus, en su tamaño */
html.grupales-lujo main .grp-card h3.uppercase{ text-transform:none !important; font-size:1.25rem !important; letter-spacing:.005em !important; color:#FFFFFF !important; }
html.grupales-lujo main .grp-card h3.uppercase > .material-icons-outlined{ font-size:18px !important; color:var(--c-crema70) !important; }
html.grupales-lujo .grp-stat-value{ margin-top:.45rem !important; font-family:var(--c-glare) !important; font-size:2.35rem !important; line-height:1 !important; color:#FFFFFF !important;
  font-variant-numeric:lining-nums tabular-nums; }
/* los rótulos de cada grupo de campos: versalitas finas */
html.grupales-lujo .grp-section-label{ font-size:.6rem !important; letter-spacing:.24em !important; color:var(--c-crema70) !important; opacity:1 !important; }
/* las tablas, como un libro: sin fondo, la cabecera sin bloque, las cifras parejas */
html.grupales-lujo .grp-table-wrap{ background:transparent !important; border:1px solid rgba(234,223,206,.08) !important; border-radius:16px !important; }
html.grupales-lujo .grp-table{ font-variant-numeric:tabular-nums; font-size:.8rem !important; }
html.grupales-lujo :is(main, .modal-container, .fixed.inset-0) .grp-table th{ background:transparent !important; color:rgba(255,255,255,.76) !important; font-size:.6rem !important;
  letter-spacing:.1em !important; padding:.85rem .75rem .7rem !important; border-bottom:1px solid rgba(234,223,206,.12) !important; }
html.grupales-lujo :is(main, .modal-container, .fixed.inset-0) .grp-table th:where([data-pz-foto]){color:rgba(234,223,206,.55) !important}
/* la cabecera que se queda pegada al deslizar (Financiero) sí lleva el fondo de su hoja */
html.grupales-lujo .modal-container .grp-table-sticky-head th{ background:var(--c-hoja) !important; }
html.grupales-lujo .grp-table td{ border-bottom-color:rgba(234,223,206,.05) !important; }
html.grupales-lujo .grp-table tbody tr:nth-child(even) td{ background:transparent !important; }
html.grupales-lujo .grp-table tr td{ transition:background-color 120ms linear; }
html.grupales-lujo .grp-table tbody tr:hover td{ background:rgba(234,223,206,.03) !important; }
html.grupales-lujo .grp-table-sticky-head thead th{ box-shadow:0 1px 0 rgba(234,223,206,.12) !important; }
/* los campos de las tablas que se editan no se aplastan: si no caben, la tabla se desliza de lado */
html.grupales-lujo .grp-table td > input.grp-input:not([type=number]):not([type=checkbox]){ min-width:8.5rem; }
html.grupales-lujo .grp-table td > select.grp-input{ min-width:11rem; }
html.grupales-lujo .grp-table td > input.grp-input[type=number]{ min-width:4.8rem; }
/* el aviso de tabla vacía, con aire (sólo ése: los rótulos de día también ocupan toda la fila) */
html.grupales-lujo .grp-table td[colspan].text-center{ color:var(--c-crema70) !important; padding:3rem 1rem !important; }
/* los botones de cada fila: círculos con filete; el de borrar, con su relleno rojo tenue */
html.grupales-lujo :is(main, .modal-container) tbody td button:not(.grp-btn-primary){ width:28px; height:28px; padding:0 !important; border-radius:99px !important; display:inline-flex !important;
  align-items:center; justify-content:center; background:transparent !important; border:1px solid rgba(234,223,206,.16) !important; color:var(--c-crema) !important;
  box-shadow:none !important; vertical-align:middle; margin:0 .1rem; }
html.grupales-lujo :is(main, .modal-container) tbody td button:not(.grp-btn-primary):hover{ border-color:rgba(234,223,206,.55) !important; background:rgba(234,223,206,.06) !important; color:#FFFFFF !important; }
html.grupales-lujo :is(main, .modal-container) tbody td button[onclick*="eliminar"]{ background:rgba(179,38,30,.26) !important; border-color:rgba(179,38,30,.55) !important; }
html.grupales-lujo :is(main, .modal-container) tbody td button[onclick*="eliminar"]:hover{ background:rgba(179,38,30,.45) !important; }
html.grupales-lujo :is(main, .modal-container) tbody td button .material-icons-outlined{ font-size:16px !important; color:inherit !important; }
/* las pastillas de estado: rellenos suaves, letra crema, versalitas finas */
html.grupales-lujo .grp-pill{ border-radius:99px !important; letter-spacing:.1em !important; padding:.22rem .65rem !important; color:var(--c-crema) !important; font-size:.6rem !important; }
html.grupales-lujo .grp-pill-borrador{ background:rgba(234,223,206,.10) !important; }
html.grupales-lujo .grp-pill-enviada{ background:rgba(0,109,130,.42) !important; }
html.grupales-lujo .grp-pill-aprobada, html.grupales-lujo .grp-pill-persona{ background:rgba(125,155,91,.34) !important; }
html.grupales-lujo .grp-pill-rechazada{ background:rgba(179,38,30,.42) !important; }
html.grupales-lujo .grp-pill-convertida{ background:var(--c-deep) !important; color:#FFFFFF !important; }
html.grupales-lujo .grp-pill-grupal{ background:rgba(0,109,130,.30) !important; }
html.grupales-lujo .grp-pill-unidad{ background:rgba(138,106,47,.42) !important; }
/* EN EL TEAL el suelo ya es teal: el relleno teal de «Enviada» y el punto del tablero se pierden
   en él, así que ahí van en el teal hondo y en el teal claro de la casa. Estas dos reglas sólo
   viven en la gemela teal (esta hoja se apaga en ese tema). */
html[data-tema="teal"] .grp-pill-enviada{ background:rgba(1,47,56,.55) !important; }
html[data-tema="teal"] .grp-stat:has(#stat-enviada) .grp-stat-label::before{ background:#9CCFD9 !important; }
/* las pestañas: pastillas; la elegida, deep */
html.grupales-lujo .grp-tab{ border-radius:99px !important; padding:.5rem 1.05rem !important; font-size:.76rem !important; letter-spacing:.02em !important; color:var(--c-crema70) !important;
  background:transparent !important; border:1px solid var(--c-filete) !important; transition:border-color 120ms linear, color 120ms linear; }
html.grupales-lujo .grp-tab:hover{ color:var(--c-crema) !important; border-color:rgba(234,223,206,.34) !important; }
html.grupales-lujo .grp-tab.active{ background:var(--c-deep) !important; color:#FFFFFF !important; border-color:var(--c-deep) !important; }
html.grupales-lujo #financiero-modal .inline-flex.bg-slate-100{ background:transparent !important; padding:0 !important; gap:.4rem !important; }
/* las opciones de la cotización: pestañas de libro, la elegida con su filete teal */
html.grupales-lujo .grp-opcion-tab{ font-size:.82rem !important; color:var(--c-crema70) !important; border-radius:12px 12px 0 0 !important; }
html.grupales-lujo .grp-opcion-tab:hover{ color:#FFFFFF !important; }
html.grupales-lujo .grp-opcion-tab.active{ background:rgba(234,223,206,.028) !important; color:#FFFFFF !important; border-color:rgba(234,223,206,.08) !important;
  border-bottom-color:transparent !important; box-shadow:none !important; font-family:var(--c-glare) !important; font-size:1rem !important; }
html.grupales-lujo .grp-opcion-tab.active::after{ background:var(--c-teal) !important; }
/* los días y sus líneas */
html.grupales-lujo .grp-dia-card{ background:rgba(234,223,206,.028) !important; border-color:rgba(234,223,206,.08) !important; border-radius:16px !important; }
html.grupales-lujo .grp-dia-header{ background:rgba(234,223,206,.035) !important; border-radius:16px 16px 0 0 !important; }
html.grupales-lujo .grp-linea-row{ background:rgba(234,223,206,.025) !important; border-color:rgba(234,223,206,.08) !important; border-radius:12px !important; }
html.grupales-lujo .grp-linea-row.grp-linea-warn{ background:rgba(138,106,47,.20) !important; border-color:rgba(138,106,47,.75) !important; }
/* los botones de agregar (filete punteado): la misma pastilla */
html.grupales-lujo main button.border-dashed{ border-radius:99px !important; border-color:rgba(234,223,206,.22) !important; color:var(--c-crema70) !important; }
html.grupales-lujo main button.border-dashed:hover{ border-color:var(--c-teal) !important; color:#FFFFFF !important; }
/* los botones de Tailwind: pastillas */
html.grupales-lujo :is(main, .modal-container) :is(button, a).rounded-xl, html.grupales-lujo :is(main, .modal-container) button.rounded-lg{ border-radius:99px !important; }
/* los botones-tarjeta de varias líneas (Nueva opción): la esquina de las hojas, no la pastilla */
html.grupales-lujo :is(main, .modal-container) button.rounded-xl.text-left{ border-radius:14px !important; }
html.grupales-lujo :is(main, .modal-container) button{ letter-spacing:.02em !important; }
html.grupales-lujo main :is(.border-slate-100, .border-slate-200, .border-slate-300, .border-gray-200):not(input):not(select):not(textarea):not(button){ border-color:rgba(234,223,206,.08) !important; }

/* el desglose del financiero: la barra y sus puntos, en los rellenos del libro —costo en crema
   tenue, utilidad en salvia, comisiones en ocre, impuestos en teal— */
html.grupales-lujo #financiero-body [style*="background:#6b7280"]{ background:rgba(234,223,206,.34) !important; }
html.grupales-lujo #financiero-body [style*="background:#4d6337"]{ background:var(--c-salvia) !important; }
html.grupales-lujo #financiero-body [style*="background:#c2650a"]{ background:#8A6A2F !important; }
html.grupales-lujo #financiero-body [style*="background:#94a3b8"]{ background:var(--c-teal) !important; }
html.grupales-lujo #financiero-body .bg-slate-100{ background:rgba(234,223,206,.06) !important; }
/* y el punto de cada cifra del desglose, con el mismo relleno de su tramo de la barra */
html.grupales-lujo #financiero-body .grp-stat-label:has(+ [style*="#006D82"])::before{ background:var(--c-teal); }
html.grupales-lujo #financiero-body .grp-stat-label:has(+ [style*="#4d6337"])::before{ background:var(--c-salvia); }
html.grupales-lujo #financiero-body .grp-stat-label:has(+ [style*="#c2650a"])::before{ background:#8A6A2F; }

/* ── 7 · Los modales, la carga y el aviso ─────────────────────────────── */
.modal-container, #confirmation-modal{ background:rgba(3,80,95,.78) !important; }
.modal-container:where([data-pz-foto]), #confirmation-modal:where([data-pz-foto]){background:rgba(20,29,39,.78) !important}
html.grupales-lujo .modal-container > div{ background:var(--c-hoja) !important; border:1px solid var(--c-filete) !important; border-radius:18px !important; box-shadow:var(--c-sombra) !important; color:var(--c-crema); }
/* el título: sin la barra de color, en Marcellus, con su filete abajo */
html.grupales-lujo :is(.modal-container, .fixed.inset-0) > div > .bg-ruta-insignia:first-child{ border-bottom:1px solid var(--c-filete) !important; padding-top:1.15rem !important; padding-bottom:1.05rem !important; }
html.grupales-lujo :is(.modal-container, .fixed.inset-0) h3:not(:where(#print-view *)){ font-family:var(--c-glare) !important; font-size:1.35rem !important; letter-spacing:.005em !important; color:#FFFFFF !important; }
html.grupales-lujo .modal-container > div > .bg-ruta-insignia:first-child h3 > .material-icons-outlined:first-child{
  width:38px; height:38px; flex:none; display:inline-flex !important; align-items:center; justify-content:center; border-radius:99px;
  background:var(--c-deep); color:#FFFFFF !important; font-size:19px !important; margin-right:.3rem; }
html.grupales-lujo .modal-container > div > .bg-ruta-insignia:first-child button:not(select){ width:34px; height:34px; border-radius:99px !important; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(234,223,206,.16) !important; color:var(--c-crema) !important; background:transparent !important; padding:0 !important; }
html.grupales-lujo .modal-container > div > .bg-ruta-insignia:first-child button:not(select):hover{ border-color:rgba(234,223,206,.55) !important; }
html.grupales-lujo .modal-container > div > .bg-ruta-insignia:first-child button .material-icons-outlined{ font-size:18px !important; }
/* el pie de la confirmación, sin su franja gris */
html.grupales-lujo #confirmation-modal > div > div:last-child{ background:transparent !important; border-top-color:var(--c-filete) !important; }
#btn-confirm-ok{ border-radius:99px !important; letter-spacing:.14em !important; }
#btn-confirm-cancel{ background:transparent !important; border-color:var(--c-filete) !important; color:var(--c-crema) !important; border-radius:99px !important; }
#btn-confirm-cancel:hover{ border-color:rgba(234,223,206,.55) !important; }
/* el panel de comisiones: era la ventana oscura de App1; queda en la tinta de la casa */
html.grupales-lujo #comisiones-form-body, html.grupales-lujo #financiero-body{ background:var(--c-hoja) !important; }
html.grupales-lujo #comisiones-modal > div :is(.bg-gray-900, .bg-gray-800){ background-color:rgba(234,223,206,.03) !important; }
html.grupales-lujo #comisiones-modal :is(.border-gray-700, .border-gray-600, .border-slate-700){ border-color:var(--c-filete) !important; }
html.grupales-lujo .param-toggle-btn{ background:var(--c-campo) !important; border-color:var(--c-filete) !important; color:var(--c-crema70) !important; border-radius:14px !important; }
/* las flechitas de los números: las del tema oscuro, sin invertir (la app las invertía para su gris) */
html.grupales-lujo .param-input-dark::-webkit-inner-spin-button, html.grupales-lujo .param-input-dark::-webkit-outer-spin-button{ filter:none !important; }
html.grupales-lujo .param-toggle-btn.active{ background:var(--c-deep) !important; border-color:var(--c-deep) !important; color:#FFFFFF !important; box-shadow:none !important; }
html.grupales-lujo .param-input-dark{ background:var(--c-campo) !important; border-color:var(--c-filete) !important; color:var(--c-crema) !important; }
html.grupales-lujo .param-input-dark:disabled, html.grupales-lujo .param-input-group-addon, html.grupales-lujo .param-output-dark{ background:var(--c-hondo) !important; border-color:var(--c-filete) !important; }
html.grupales-lujo .param-input-group{ border-color:var(--c-filete) !important; }
html.grupales-lujo .param-input-group-addon{ color:var(--c-crema70) !important; }
html.grupales-lujo .param-output-dark{ color:#FFFFFF !important; }
/* la ventana de los textos en inglés, que la app arma en el momento: el mismo velo y la misma hoja */
/* su `z-[80]` la dejaba debajo del riel (z 200) y de la banda de la foto: va al nivel de los otros modales */
html.grupales-lujo #textos-ingles-modal{ background-color:rgba(3,80,95,.78) !important; z-index:9999995 !important; }
html.grupales-lujo #textos-ingles-modal:where([data-pz-foto]){background-color:rgba(20,29,39,.78) !important}
html.grupales-lujo #textos-ingles-modal > div{ background:var(--c-hoja) !important; border:1px solid var(--c-filete) !important; border-radius:18px !important; box-shadow:var(--c-sombra) !important; }
html.grupales-lujo #textos-ingles-modal .border-slate-100{ border-color:var(--c-filete) !important; }
html.grupales-lujo #textos-ingles-modal [data-cerrar]:not(.grp-btn-primary){ width:34px; height:34px; border-radius:99px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(234,223,206,.16); padding:0 !important; }
/* el aviso: una pastilla de la hoja, con su filete */
html.grupales-lujo #toast{ background:var(--c-hoja) !important; color:var(--c-crema) !important; border-color:var(--c-filete) !important; border-radius:99px !important; box-shadow:var(--c-sombra) !important; }
/* la carga: la estrella que gira en su disco de tinta; la pantalla no se lava */
html.grupales-lujo #loader{ background:transparent !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
#loader .gru-carga{ width:64px; height:64px; padding:13px; border-radius:99px; background:rgba(2,62,74,.78);
  border:1px solid rgba(234,223,206,.34); box-shadow:var(--c-sombra); animation:gruGira 4s linear infinite; }
#loader .gru-carga:where([data-pz-foto]){background:rgba(13,23,32,.78)}
html.grupales-lujo #loader-msg{ margin-top:1rem !important; padding:.3rem .8rem; border-radius:99px; background:rgba(2,62,74,.78); color:var(--c-crema) !important;
  font-size:.62rem !important; letter-spacing:.24em !important; animation:none !important; }
html.grupales-lujo #loader-msg:where([data-pz-foto]){background:rgba(13,23,32,.78)}
@keyframes gruGira{ to{ transform:rotate(360deg); } }

/* ── 8 · La vista del cliente: el escritorio en tinta, la hoja en papel ── */
html.grupales-lujo #print-view-overlay{ background:var(--c-hondo) !important; }
html.grupales-lujo #print-view-overlay > div:first-child{ background:var(--c-hondo) !important; border-bottom:1px solid var(--c-filete); box-shadow:none !important; }
html.grupales-lujo #print-view-overlay > div:first-child > div:first-child > span{ font-family:var(--c-glare); font-size:1.15rem !important; color:#FFFFFF; }
html.grupales-lujo #print-view-overlay > div:first-child button{ border-radius:99px !important; border:1px solid var(--c-filete); }
html.grupales-lujo #print-view-overlay > div:first-child button:hover{ border-color:rgba(234,223,206,.55); }
html.grupales-lujo #pv-filtros-panel{ background:var(--c-hondo) !important; border-color:rgba(234,223,206,.10) !important; }
html.grupales-lujo #pv-filtros-panel > div:first-child{ background:var(--c-hondo) !important; border-bottom:1px solid rgba(234,223,206,.10); box-shadow:none !important; }
html.grupales-lujo #pv-filtros-panel > div:first-child h3{ font-family:var(--c-sans) !important; font-size:.62rem !important; letter-spacing:.3em !important; color:var(--c-crema70) !important; }
html.grupales-lujo #pv-filtros-panel label, html.grupales-lujo #pv-filtros-panel p.uppercase{ letter-spacing:.2em !important; color:var(--c-crema70) !important; }
html.grupales-lujo #pv-filtros-panel .border-slate-200{ border-color:var(--c-filete) !important; }
html.grupales-lujo #print-view-overlay .bg-slate-200{ background:var(--c-tinta) !important; }
html.grupales-lujo #pv-editor-toolbar{ background:var(--c-hoja) !important; border-color:var(--c-filete) !important; }
html.grupales-lujo #pv-editor-toolbar .bg-slate-200{ background:var(--c-filete) !important; }
html.grupales-lujo .toolbar-btn, html.grupales-lujo .toolbar-color-wrap{ color:var(--c-crema70) !important; border-radius:99px !important; }
html.grupales-lujo .toolbar-btn:hover, html.grupales-lujo .toolbar-color-wrap:hover{ background:rgba(234,223,206,.08) !important; color:#FFFFFF !important; }
html.grupales-lujo .toolbar-btn-active{ background:var(--c-deep) !important; color:#FFFFFF !important; }
html.grupales-lujo #pv-panel-reopen-btn{ background:var(--c-deep) !important; }
/* la hoja: papel, con el filete de la casa en vez de la sombra. Lo que hereda (la letra y su
   color) es el de la app de antes, no el del cuerpo en tinta: un documento editado a mano puede
   traer texto sin estilo propio, y así sale igual en pantalla, en la impresión y en el PDF.
   El color va como respaldo de un var() sin definir a propósito: así los generadores de los
   temas no lo traducen (la hoja es papel en los tres temas). */
html.grupales-lujo #print-view{ box-shadow:0 0 0 1px rgba(234,223,206,.12) !important;
  color:var(--papel-letra, #1F2937) !important; font-family:'Inter', sans-serif !important; }

/* ── 10 · LA ELEVACIÓN (Luis, 2026-09-29: «más luxury, más elegante, todo») ──────────────
   El nivel de CIMA: lo más grande de cada pantalla es una cifra; las tablas son un libro; los
   rótulos, versalitas finas con su filete; cada vista entra de abajo hacia arriba, bloque por
   bloque. Sigue dentro del libro de marca: nada brilla, nada se levanta, sin negrita. */

/* LA BARRA ENTRE LA FOTO Y EL EDITOR: el riel le da 2 rem de aire a la cabecera, y en el editor
   —cuyo contenido se desliza en su propia caja— ese aire quedaba como una franja de tinta. */
html.riel-con-banda #view-editor > .gru-cab{ margin-bottom:0 !important; }
html.grupales-lujo #view-editor > .overflow-y-auto{ padding-top:2rem !important; }
/* los títulos reales son largos: el del editor baja un punto y, si no cabe, termina en «…» */
html.grupales-lujo .gru-cab .gru-cab__titulo{ font-size:clamp(1.7rem, 2.2vw, 2.3rem) !important; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }

/* EL TABLERO: las cifras madre en una sola hoja, divididas por filetes (como en CIMA) */
html.grupales-lujo .grid:has(> .grp-stat){ gap:0 !important; background:rgba(234,223,206,.028); border:1px solid rgba(234,223,206,.08); border-radius:16px; overflow:hidden; }
html.grupales-lujo .grid > .grp-stat{ background:transparent !important; border:0 !important; border-radius:0 !important; padding:1.5rem 1.7rem 1.55rem !important; }
html.grupales-lujo .grid > .grp-stat + .grp-stat{ border-left:1px solid rgba(234,223,206,.10) !important; }
html.grupales-lujo .grp-stat-value{ font-size:3.1rem !important; letter-spacing:-.02em !important; margin-top:.75rem !important; }
/* el cero de Marcellus es un círculo perfecto: solo se lee como la letra «O». Una cifra que
   empieza en cero va en la letra de texto, ligera (grupales-lujo.js le pone la clase) */
html.grupales-lujo .grp-stat-value.gru-cero{ font-family:var(--c-sans) !important; font-weight:300 !important; letter-spacing:-.03em !important; }
html.grupales-lujo #financiero-body .grp-stat-value{ font-size:2.2rem !important; }
@media (max-width:767px){
  html.grupales-lujo .grid > .grp-stat + .grp-stat{ border-left:0 !important; }
  html.grupales-lujo .grid > .grp-stat:nth-child(even){ border-left:1px solid rgba(234,223,206,.10) !important; }
  html.grupales-lujo .grid > .grp-stat:nth-child(n+3){ border-top:1px solid rgba(234,223,206,.10) !important; }
  html.grupales-lujo .grid > .grp-stat{ padding:1.1rem 1.15rem 1.15rem !important; }
}

/* LA LISTA, COMO UN LIBRO: el título de cada cotización en Marcellus; el cliente en versalitas;
   las fechas en un renglón; las acciones tenues hasta que se pasa por la fila */
@media (min-width:768px){
  html.grupales-lujo #lista-tbody td{ padding-top:1.05rem !important; padding-bottom:1.05rem !important; }
  /* el título se lleva un tercio del ancho: con la tabla repartida a partes iguales bajaba a cuatro renglones */
  html.grupales-lujo #lista-tbody td:first-child{ width:34%; min-width:15rem; }
}
html.grupales-lujo #lista-tbody td:first-child > div:first-child{ font-family:var(--c-glare) !important; font-size:1.02rem !important; line-height:1.3 !important; color:#FFFFFF !important; letter-spacing:.005em; }
html.grupales-lujo #lista-tbody td:first-child > div + div{ margin-top:.35rem; font-size:.58rem !important; letter-spacing:.2em; text-transform:uppercase; color:var(--c-crema70) !important; }
html.grupales-lujo #lista-tbody td:nth-child(2){ color:var(--c-crema) !important; }
html.grupales-lujo #lista-tbody td:nth-child(3), html.grupales-lujo #lista-tbody td:nth-child(6){ font-variant-numeric:tabular-nums; color:var(--c-crema70) !important; }
html.grupales-lujo #lista-tbody td:nth-child(4){ color:var(--c-crema70) !important; }
@media (min-width:1280px){ html.grupales-lujo #lista-tbody td:nth-child(3){ white-space:nowrap; } }
html.grupales-lujo #lista-tbody td:last-child button{ opacity:.55; transition:opacity 120ms linear, border-color 120ms linear, background-color 120ms linear !important; }
html.grupales-lujo #lista-tbody tr:hover td:last-child button, html.grupales-lujo #lista-tbody td:last-child button:focus-visible{ opacity:1; }
@media (hover:none){ html.grupales-lujo #lista-tbody td:last-child button{ opacity:1; } }

/* LOS RÓTULOS: versalitas finas en crema tenue; los de grupo, con su filete (como el riel) */
html.grupales-lujo main :is(label.uppercase, label[class*="uppercase"]){ font-size:.58rem !important; letter-spacing:.18em !important; color:var(--c-crema70) !important; }
html.grupales-lujo main :is(.grp-linea-row, .grp-dia-card) span.text-\[9px\]{ font-size:.56rem !important; letter-spacing:.16em !important; text-transform:uppercase; color:var(--c-crema70) !important; }
html.grupales-lujo .grp-section-label{ display:flex; align-items:center; gap:.8rem; margin-bottom:.9rem !important; margin-top:.4rem; }
html.grupales-lujo .grp-section-label::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg, rgba(234,223,206,.16), transparent); }
html.grupales-lujo main .grp-card{ padding:1.6rem 1.75rem !important; }
html.grupales-lujo main .grp-card h3.uppercase{ margin-bottom:1.3rem !important; }

/* LOS DÍAS: el nombre del día en Marcellus, el calendario en su disco deep */
html.grupales-lujo .grp-dia-header{ padding:1rem 1.2rem !important; border-bottom:1px solid rgba(234,223,206,.07); }
html.grupales-lujo .grp-dia-header > .material-icons-outlined:first-child{ width:32px; height:32px; flex:none; display:inline-flex; align-items:center; justify-content:center;
  border-radius:99px; background:var(--c-deep); color:#FFFFFF !important; font-size:16px !important; }
html.grupales-lujo .grp-dia-header > input.grp-input{ font-family:var(--c-glare) !important; font-size:1.2rem !important; color:#FFFFFF !important; }
/* la cabeza del día en un renglón: el selector de vista traía el ancho completo de `.grp-input`
   y bajaba solo a otra fila, con el contador y el borrar en una tercera */
html.grupales-lujo .grp-dia-header > select.grp-input{ width:auto !important; flex:none; border:1px solid var(--c-filete) !important; border-radius:99px !important; padding:.35rem 2rem .35rem .85rem !important; }
html.grupales-lujo .grp-dia-header > span.text-\[10\.5px\]{ font-size:.58rem !important; letter-spacing:.18em; text-transform:uppercase; color:var(--c-crema70) !important; }
html.grupales-lujo .grp-dia-card > div:not(.grp-dia-header){ padding:1rem 1.2rem 1.2rem !important; }
html.grupales-lujo .grp-linea-row{ padding:1rem 1.1rem !important; }
/* las cifras de los resultados: parejas y, las de total, en blanco */
html.grupales-lujo main .grp-table td.tabular-nums{ font-size:.86rem; }
html.grupales-lujo main .grp-table td:is(.font-bold, .font-black){ color:#FFFFFF !important; }

/* los resultados: cada día, un rótulo en Marcellus con su filete; el total, una cifra */
html.grupales-lujo main .grp-table td[colspan].font-black{ font-family:var(--c-glare) !important; font-size:1.1rem !important; color:#FFFFFF !important;
  padding-top:1.7rem !important; padding-bottom:.55rem !important; border-bottom:1px solid rgba(234,223,206,.12) !important; background:transparent !important; }
html.grupales-lujo main .grp-table tr.font-black td{ padding-top:1rem !important; border-top:1px solid rgba(234,223,206,.30) !important; color:#FFFFFF !important; }
html.grupales-lujo main .grp-table tr.font-black td:first-child{ font-size:.62rem !important; letter-spacing:.22em; text-transform:uppercase; color:var(--c-crema70) !important; }
html.grupales-lujo main .grp-table tr.font-black td.tabular-nums{ font-family:var(--c-glare) !important; font-size:1.35rem !important; letter-spacing:-.01em; }

/* LA ENTRADA DE CADA VISTA: primero la cabecera, después el contenido, de a 55 ms */
@keyframes gruEntra{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
html.grupales-lujo .view-section{ animation:none !important; }
html.grupales-lujo .view-section.active > *{ animation:gruEntra .52s cubic-bezier(.16,.84,.32,1) both; }
html.grupales-lujo .view-section.active > :nth-child(2){ animation-delay:.07s; }
html.grupales-lujo .view-section.active > :nth-child(3){ animation-delay:.12s; }
html.grupales-lujo .view-section.active > :nth-child(n+4){ animation-delay:.17s; }
@media (prefers-reduced-motion:reduce){ html.grupales-lujo .view-section.active > *{ animation:none !important; } }

/* ── 9 · El celular ──────────────────────────────────────────────────────── */
@media (max-width:767px){
  .gru-cab{ margin:-1rem -1rem 1.3rem; }
  .gru-cab--editor{ margin:0; }
  #mobile-menu-toggle{ top:1rem !important; left:1rem !important; right:auto !important; bottom:auto !important; width:42px !important; height:42px !important; }
  /* la fila de botones de la cabecera: los botones con texto quedan en su ícono (el nombre sigue en su globo) */
  html.grupales-lujo .gru-cab > div:last-of-type{ left:1.1rem !important; max-width:none !important; }
  html.grupales-lujo .gru-cab > div:last-of-type > button{ gap:0 !important; width:34px !important; height:34px !important; padding:0 !important; justify-content:center; flex:none; }
  html.grupales-lujo .gru-cab > div:last-of-type > button .gru-rotulo{ display:none !important; }
  .gru-cab > div:last-of-type > .relative{ width:auto !important; flex:1 1 auto; min-width:0; }
  .gru-cab > div:last-of-type > select{ flex:none; }
  html.grupales-lujo .gru-cab .gru-cab__titulo{ font-size:1.4rem !important; }
  /* las cifras del tablero, dos por fila */
  html.grupales-lujo .grp-stat-value{ font-size:1.9rem !important; }
  /* las fichas corren con la página, no dentro de una caja con su propio desplazamiento */
  html.grupales-lujo #main-app .view-section.h-full{ height:auto !important; min-height:100%; }
  html.grupales-lujo #main-app .grp-table-wrap:has(> table.gru-fichas){ overflow:visible !important; flex:none !important; }
  /* las tablas, fichas de dos columnas: sin deslizar de lado */
  table.gru-fichas thead{ display:none; }
  table.gru-fichas, table.gru-fichas tbody{ display:block; width:100%; }
  table.gru-fichas tr{ display:grid; grid-template-columns:1fr 1fr; gap:.55rem .9rem; padding:.9rem 1rem; border-bottom:1px solid var(--c-filete-s); }
  table.gru-fichas td{ display:block; padding:0 !important; border:0 !important; min-width:0; overflow-wrap:anywhere; background:transparent !important; }
  table.gru-fichas td::before{ content:attr(data-rotulo); display:block; margin-bottom:.15rem; font-size:.56rem; letter-spacing:.18em; text-transform:uppercase; color:var(--c-crema70); }
  table.gru-fichas td:first-child{ grid-column:1 / -1; font-size:.95rem; color:#FFFFFF; }
  table.gru-fichas td:first-child::before{ display:none; }
  table.gru-fichas td[colspan]{ grid-column:1 / -1; }
  table.gru-fichas td[colspan]::before{ display:none; }
  table.gru-fichas td{ text-align:left !important; }
  table.gru-fichas td:last-child{ grid-column:1 / -1; }
}
@media (prefers-reduced-motion:reduce){
  .gru-cab__foto{ transition:none !important; } #loader .gru-carga{ animation:none !important; }
}