/* ═══════════════════════════════════════════════════════════════════════════
   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:#1A2633; --c-hondo:#141D27; --c-hoja:#222E3A; --c-campo:#2A3541; --c-deep:#005565; --c-teal:#006D82;
  --c-salvia:#7D9B5B; --c-crema:#EADFCE; --c-crema70:rgba(234,223,206,.70); --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(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(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; }
/* sobre la foto el foco no lleva el anillo teal: sólo el filete de la pastilla se pone blanco */
html.grupales-lujo body .gru-cab :is(input, textarea, select, button):not(#login-screen *):focus-visible{ outline:none !important; box-shadow:none !important; border-color:#FFFFFF !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(234,223,206,.70) !important; opacity:.75; }
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: los cusingos collarejos en grupo sobre una rama con musgo (Unsplash, libre), la misma
   de la tarjeta del Nido. 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%); }
/* SELVA · los cusingos en su rama: la selva honda, el musgo de la rama y el pecho ocre del
   cusingo, que van y vienen de lado a lado como la bandada que se pasa de rama en rama. */
html:not(#_):not(#_) .pl-caja[data-pl="grupales"]{ --pl-grad:linear-gradient(110deg, #1C2B22, #2E4A33, #7D9B5B, #8A6A2F, #4F6749, #1C2B22);
  --pl-tam:320% 100%; --pl-mov:plGrupo 12s ease-in-out infinite alternate; }
@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(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(234,223,206,.66); }
#main-sidebar .gru-pie p + p{ margin-top:.3rem; letter-spacing:.14em; color:rgba(234,223,206,.54); }

/* ── 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; }
/* el nombre de la foto: la pastilla de ARIA y VIVERO, arriba a la derecha (en el celular no cabe) */
.gru-cab__lugar{ position:absolute; top:.85rem; right:clamp(1rem, 2.2vw, 2.25rem); z-index:1; max-width:45%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:var(--c-sans); font-size:.62rem; line-height:1; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.86);
  padding:.35rem .7rem; border-radius:99px; background-color:rgba(26,38,51,.45); pointer-events:none; text-shadow:none; }
.gru-cab__lugar{ transition:opacity .42s cubic-bezier(.22,.9,.24,1); }
.gru-cab__lugar--cambia{ opacity:0; }
.gru-cab__lugar:empty{ display:none; }
@media (max-width:767px){ .gru-cab__lugar{ display:none !important; } }
/* LA LETRA SOBRE LA FOTO SE LEE SOBRE CUALQUIER FOTO: un velo tenue detrás del título (abajo a la
   izquierda, nunca más del 45 % del libro) y una sombra corta en la letra */
.gru-cab__velo-texto{ position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(120% 150% at 0% 100%, rgba(20,29,39,.45) 0%, rgba(20,29,39,.24) 38%, rgba(20,29,39,0) 68%); }
html.grupales-lujo .gru-cab :is(h1, .gru-cab__ceja, h1 + p, .gru-cab__titulo, .gru-cab__cliente){
  text-shadow:0 1px 2px rgba(13,23,32,.80), 0 2px 10px rgba(13,23,32,.55), 0 10px 32px rgba(13,23,32,.45) !important; }
.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){
  /* el bloque del título en dos columnas: la de la izquierda, bajo el botón del menú, lleva la flecha
     de volver centrada con el título y el cliente; la de la derecha, la ceja, el título y el cliente */
  html.grupales-lujo .gru-cab--editor > div:first-of-type{ display:grid !important; grid-template-columns:3.3rem minmax(0,1fr); align-items:center;
    padding-left:0 !important; column-gap:0; }
  html.grupales-lujo .gru-cab--editor > div:first-of-type > .gru-cab__ceja{ grid-column:2; grid-row:1; }
  html.grupales-lujo .gru-cab--editor > div:first-of-type > .gru-cab__titulo{ grid-column:2; grid-row:2; }
  html.grupales-lujo .gru-cab--editor > div:first-of-type > .gru-cab__cliente{ grid-column:2; grid-row:3; }
  html.grupales-lujo .gru-cab--editor > div:first-of-type > .gru-cab__volver{ grid-column:1; grid-row:2 / 4; justify-self:start; margin-left:2px;
    width:34px !important; height:34px !important; padding:0 !important; justify-content:center; }
  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; width:max-content; max-width:100%; margin-bottom:.7rem; font-family:var(--c-sans); font-size:.66rem; letter-spacing:.26em; text-transform:uppercase; color:rgba(255,255,255,.92); 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:.8rem; letter-spacing:.02em; color:rgba(255,255,255,.94); }
.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(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; 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:hover, .gru-cab select:hover{ border-color:#FFFFFF !important; 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(26,38,51,.55) !important; color:#FFFFFF !important; border:1px solid rgba(255,255,255,.28) !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(234,223,206,.70) !important; font-size:.6rem !important;
  letter-spacing:.1em !important; padding:.85rem .75rem .7rem !important; border-bottom:1px solid rgba(234,223,206,.12) !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(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(20,29,39,.78) !important; z-index:9999995 !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(13,23,32,.78);
  border:1px solid rgba(234,223,206,.34); box-shadow:var(--c-sombra); animation:gruGira 4s linear infinite; }
html.grupales-lujo #loader-msg{ margin-top:1rem !important; padding:.3rem .8rem; border-radius:99px; background:rgba(13,23,32,.78); color:var(--c-crema) !important;
  font-size:.62rem !important; letter-spacing:.24em !important; animation:none !important; }
@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; }
}
/* hasta 1.279 px la tabla cabe entera en su hoja (ahora que la lista se desliza entera, lo que no
   cupiera se derramaría a la derecha): el título pide menos ancho y las celdas, menos aire */
@media (min-width:768px) and (max-width:1279px){
  html.grupales-lujo #lista-tbody td:first-child{ min-width:10.5rem; }
  html.grupales-lujo #view-lista .grp-table :is(th, td){ padding-left:.5rem !important; padding-right:.5rem !important; }
  html.grupales-lujo #view-lista .grp-table th{ letter-spacing:.06em !important; }
}
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:.78; 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; }

/* LOS GRISES 300 COMO LETRA (separadores «·», «+», rótulos del panel de comisiones): en la rampa
   son relleno, así que como letra van en crema tenue */
html.grupales-lujo :is(.text-slate-300, .text-gray-300):not(:where(#print-view *)){ color:var(--c-crema70) !important; }

/* EN EL TEAL la hoja es teal: la letra que en el oscuro es crema de segundo nivel (600–700) baja
   de 4,5:1, igual que las cabeceras de tabla y las pastillas; ahí va en blanco. Estas reglas sólo
   viven en la gemela teal (esta hoja se apaga en ese tema). */
html[data-tema="teal"] :is(.text-slate-600, .text-slate-700, .text-gray-600, .text-gray-700):not(:where(#print-view *)){ color:rgba(255,255,255,.94) !important; }
html[data-tema="teal"] :is(main, .modal-container, .fixed.inset-0) .grp-table th{ color:rgba(255,255,255,.90) !important; }
html[data-tema="teal"] .grp-pill{ color:#FFFFFF !important; }
html[data-tema="teal"] #main-sidebar .gru-pie p{ color:rgba(255,255,255,.72) !important; }
html[data-tema="teal"] #main-sidebar .gru-pie p + p{ color:rgba(255,255,255,.70) !important; }
html:not(#_)[data-tema="teal"] :is(.text-slate-300, .text-gray-300):not(:where(#print-view *)){ color:rgba(255,255,255,.86) !important; }

/* LA LISTA SE DESLIZA ENTERA (Luis, 2026-09-29): al bajar, las cuatro cifras suben y se esconden
   detrás de la cabecera; la fila de títulos de la tabla llega hasta un espacio de la foto y se queda
   ahí, y las filas siguen pasando por debajo. Al volver arriba, las cifras reaparecen. El espacio
   entre la foto y los títulos lo tapa el suelo (la sombra de arriba de cada título), para que las
   filas no se vean pasar por ese hueco. En el celular la lista son fichas y no hay títulos: queda como
   estaba. */
@media (min-width:768px){
  html.grupales-lujo #view-lista.view-section{ height:auto !important; min-height:100%; }
  html.grupales-lujo #view-lista > .gru-cab{ position:sticky !important; top:0; z-index:50; }
  html.grupales-lujo #view-lista > .grp-table-wrap{ overflow:visible !important; flex:none !important; }
  /* bordes separados (con espacio cero, se ve igual): con `collapse` Chrome no pinta la sombra de una celda */
  html.grupales-lujo #view-lista .grp-table{ border-collapse:separate; border-spacing:0; }
  html.grupales-lujo #view-lista .grp-table thead th{ position:sticky; top:calc(var(--alto-cab, 200px) + 14px); z-index:3;
    background:var(--c-tinta) !important; box-shadow:0 -14px 0 var(--c-tinta), 0 1px 0 rgba(234,223,206,.12) !important; }
}

/* 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; }
}