/* ═══════════════════════════════════════════════════════════════════════════
   PRESENTACIONES Y LANDINGS (app8) — LA LÍNEA DE LUJO, MOLDE ARIA (2026-09-29)
   ───────────────────────────────────────────────────────────────────────────
   Refresco PRISMA, sólo visual: las funciones, los ids y los eventos no cambian. Es el molde
   de ARIA (app-agentecotizador/public/aria-lujo.css) para una app sin menú a la izquierda:
     · la barra `header.cab-marca` sobre la foto, con el logo, la pastilla del usuario y los
       botones redondos (el del tema es el modelo: círculo de tinta, filete crema, 2,1 rem);
     · una portada con carrusel en cada lista (Presentaciones y Landings), con las pestañas
       en vidrio sobre la foto;
     · los dos constructores como mesas de trabajo: la barra de herramientas en círculos, las
       columnas en tinta y el lienzo —el contenido del cliente— tal cual lo pinta su motor.
   Todo 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 sólo de relleno. Sin
   negrita, nada brilla ni se levanta, una sola sombra (la del modal), velo de foto hasta 45 %.
   Letra: Marcellus en los títulos y Figtree en todo lo demás.

   LO QUE NO SE TOCA: las diapositivas (`.tn-deck-root`, el motor de la maestra, igual en el
   editor, en la miniatura y en el visor público), la vista previa de la landing (su propio
   documento, en el iframe) y la muestra de cada plantilla. Son el trabajo del cliente.

   Esta hoja es la del tema oscuro. El teal es ella misma traducida (app8-lujo-teal.css, de
   5 herramientas/generar-tema-teal.py) y el claro, su gemela (app8-tema-claro.css, de
   generar-tema-claro.py) más los ajustes a mano. Lo que va sobre la foto (la barra y las
   portadas) lleva `data-pz-foto` y sus colores escritos a mano: no cambia con el tema.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{ --c-tinta:#1A2633; --c-hondo:#141D27; --c-hoja:#222E3A; --c-campo:#2A3541;
  --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', system-ui, sans-serif; --c-sombra:0 30px 70px -18px rgba(26,38,51,.62); }

/* LO QUE VA SOBRE LA FOTO LLEVA LAS VARIABLES DEL OSCURO (la tercera de las cuatro capas de
   reference-tema-sobre-foto): los temas las cambian en la raíz y heredarían hasta acá. */
[data-pz-foto], [data-pz-foto] *{ --c-tinta:#1A2633; --c-hondo:#141D27; --c-hoja:#222E3A; --c-campo:#2A3541; --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); }

/* ── 1 · EL SUELO, LA LETRA Y EL PESO ────────────────────────────────────── */
html.a8-lujo body{ background:var(--c-tinta); color:var(--c-crema); font-family:var(--c-sans); -webkit-tap-highlight-color:transparent; }
html.a8-lujo body :not(.tn-deck-root *):not(.template-card-preview){ font-weight:400 !important; font-style:normal !important; }
html.a8-lujo :is(h1, h2, h3, h4, .font-display):not(.tn-deck-root *){ font-family:var(--c-glare) !important; letter-spacing:.01em !important; }
html.a8-lujo:not([data-tema="claro"]){ color-scheme:dark; }
html.a8-lujo ::selection{ background-color:#005565; color:#FFFFFF; }
html.a8-lujo *{ scrollbar-width:thin; scrollbar-color:rgba(234,223,206,.16) transparent; }
html.a8-lujo ::-webkit-scrollbar{ width:6px; height:6px; }
html.a8-lujo ::-webkit-scrollbar-track{ background:transparent; }
html.a8-lujo ::-webkit-scrollbar-thumb{ background:rgba(234,223,206,.16); border-radius:10px; }
html.a8-lujo ::-webkit-scrollbar-thumb:hover{ background:rgba(234,223,206,.30); }
html.a8-lujo #main-app{ background:var(--c-tinta); }

/* Las vistas: cada una entra con un fundido, sin subir (nada se levanta). */
.view-section{ display:none; animation:a8Entra .32s ease; }
.view-section.active{ display:flex; flex-direction:column; }
@keyframes a8Entra{ from{ opacity:0; } to{ opacity:1; } }
.line-clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ── 2 · LO QUE TAILWIND NO PINTA (la capa general de ARIA, CAMPO y RAÍCES) ── */
/* lo que era blanco es la hoja: tinta un paso más clara */
html.a8-lujo .bg-white.bg-white:not(.pl-pantalla *):not(.tn-deck-root *){ background-color:var(--c-hoja); }
html.a8-lujo :is([class^="bg-white/"], [class*=" bg-white/"]):not(.pl-pantalla *){ background-color:rgba(234,223,206,.05) !important; }
html.a8-lujo :is([class^="hover:bg-white/"], [class*=" hover:bg-white/"]):hover{ background-color:rgba(234,223,206,.10) !important; }
html.a8-lujo :is([class^="border-white/"], [class*=" border-white/"]){ border-color:var(--c-filete) !important; }
html.a8-lujo :is([class^="bg-black/"], [class*=" bg-black/"]):not(.media-item *):not(#lp-fotos *){ background-color:rgba(20,29,39,.55) !important; }
/* una sola sombra en el producto, la del modal */
html.a8-lujo :is(.shadow-sm, .shadow, .shadow-md, .shadow-lg, .shadow-xl):not(.tn-deck-root *){ box-shadow:none !important; }
html.a8-lujo :is(.hover\:scale-105, .active\:scale-95, .active\:scale-\[0\.98\]):not(.tn-deck-root *){ transform:none !important; }
/* los campos: la hoja un paso más clara; el foco con anillo doble */
html.a8-lujo body input:not(.pl-pantalla *):not(.a8-portada__buscar):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not(.border-0):not(.bg-transparent),
html.a8-lujo body textarea:not(.pl-pantalla *):not(.border-0):not(.bg-transparent),
html.a8-lujo body select:not(.pl-pantalla *):not(.border-0):not(.bg-transparent){
  background-color:var(--c-campo) !important; color:var(--c-crema) !important; border:1px solid var(--c-filete) !important; border-radius:9px !important; box-shadow:none !important; }
html.a8-lujo body :is(input, textarea, select, button):not(.pl-pantalla *):focus-visible{
  outline:2px solid #006D82 !important; outline-offset:0; box-shadow:0 0 0 4px rgba(234,223,206,.22) !important; }
html.a8-lujo select option{ background-color:var(--c-hoja); color:var(--c-crema); }
html.a8-lujo :is(input, textarea)::placeholder{ color:rgba(234,223,206,.70) !important; opacity:.75; }
html.a8-lujo :is(input[type=checkbox], input[type=radio]){ accent-color:#005565; }
html.a8-lujo input[type="file"]::file-selector-button{ background-color:#005565; color:#FFFFFF; border:0; border-radius:99px; padding:.35rem .8rem; }
html.a8-lujo input[type=color]{ border-color:var(--c-filete) !important; background-color:var(--c-campo) !important; }
html.a8-lujo code{ background:rgba(234,223,206,.08) !important; color:var(--c-crema); border-radius:6px; }
/* los colores propios de la app son el libro: como relleno se quedan; como letra sobre tinta
   el teal no se lee (2,56:1) y la salvia es sólo relleno, así que van en crema */
html.a8-lujo .bg-tnteal:not(.tn-deck-root *){ background-color:#005565 !important; color:#FFFFFF !important; }
html.a8-lujo .hover\:bg-tntealdeep:hover, html.a8-lujo .bg-tnteal:hover:not(.tn-deck-root *){ background-color:#006D82 !important; }
html.a8-lujo .bg-tntealdeep{ background-color:#005565 !important; color:#FFFFFF !important; }
html.a8-lujo :is(.text-tnteal, .text-tntealdeep, .text-tnsage, .hover\:text-tnteal:hover, .hover\:text-tntealdeep:hover):not(.tn-deck-root *){ color:var(--c-crema) !important; }
html.a8-lujo :is(.text-tnteal, .text-tnsage).material-icons-outlined{ color:var(--c-crema70) !important; }
html.a8-lujo :is(.bg-tnteal\/5, .bg-tnteal\/10, .hover\:bg-tnteal\/5:hover, .hover\:bg-tnteal\/10:hover){ background-color:rgba(0,109,130,.20) !important; }
html.a8-lujo :is(.border-tnteal\/40, .border-tnteal\/50, .hover\:border-tnteal:hover){ border-color:rgba(0,109,130,.75) !important; }
html.a8-lujo .bg-tnsage\/20{ background-color:rgba(125,155,91,.30) !important; }
html.a8-lujo :is(.hover\:text-rose-500, .hover\:text-red-400, .hover\:text-red-300, .hover\:text-red-600):hover{ color:#FFFFFF !important; background-color:#B3261E !important; }
/* los neutros claros usados como letra (los de la mesa oscura de antes) */
html.a8-lujo :is(.text-slate-200, .text-slate-300):not(.tn-deck-root *){ color:var(--c-crema) !important; }
html.a8-lujo .text-white\/70, html.a8-lujo .text-white\/60{ color:var(--c-crema70); }

/* ── 3 · EL LOGIN (la estructura es la de prisma-login.css) ──────────────────
   El amanecer sobre la cordillera de Talamanca, fijo y exclusivo de esta app (Luis,
   2026-09-25). El botón sale de la foto: el cielo teal, la cordillera deep, el verde del
   bosque y el sol que asoma, que sube despacio como el amanecer. */
#login-screen{ background-image:url('fotos/1677476320188-493d77f8d1db.webp') !important; background-size:cover !important; background-position:center 55% !important; }
#login-screen > .pl-velo{ 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%); }
html:not(#_):not(#_) .pl-caja[data-pl="presentaciones"]{ --pl-grad:linear-gradient(180deg, #006D82 0%, #005565 30%, #4F6749 58%, #8A6A2F 78%, #005565 100%);
  --pl-tam:100% 320%; --pl-mov:plAmanecer 10s ease-in-out infinite alternate; }
@keyframes plAmanecer{ from{ background-position:50% 100%; } to{ background-position:50% 0%; } }
/* HASTA QUE HAYA NOMBRE: «Presentaciones» es más largo que los nombres de cuatro a seis letras
   para los que se midió el login (CIMA, ARIA, CAMPO). Se achica sólo acá; con el nombre
   aprobado esta regla se va. */
html:not(#_):not(#_) .pl-caja[data-pl="presentaciones"] .pl-nombre{ font-size:27px !important; letter-spacing:.1em !important; padding-left:.1em !important; }
#login-temp-change-section{ display:flex; flex-direction:column; gap:12px; }
#login-temp-change-section.hidden{ display:none; }

/* ── 4 · LA BARRA DE ARRIBA: EL LOGO, EL USUARIO Y LOS BOTONES REDONDOS ──────
   Es la de ARIA (`header.cab-marca`). Sobre la portada va transparente, encima de la foto
   (`cab-sobre-foto`); cuando la foto se va —al bajar por la lista o dentro de un
   constructor— se vuelve sólida. `data-pz-foto`: nada de esto cambia con el tema; lo único
   que cambia es el color de la barra sólida (app8-tema-claro-ajustes.css y app8-tema-teal.css). */
html.a8-lujo header.cab-marca{ position:relative; z-index:30; flex:none; padding:10px 22px; color:#EADFCE;
  background-color:rgba(26,38,51,.94); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(234,223,206,.10); transition:background-color .35s ease, border-color .35s ease; }
html.a8-lujo header.cab-marca.cab-sobre-foto{ background-color:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom-color:transparent; }
/* en las dos listas la barra va ENCIMA de la portada: la foto sube detrás de ella */
html.a8-lujo #main-app:has(> #view-dashboard.active, > #view-landings.active) > header.cab-marca{ position:absolute; top:0; left:0; right:0; }
html.a8-lujo .cab-marca__fila{ display:flex; align-items:center; gap:14px; min-height:2.6rem; }
html.a8-lujo header.cab-marca img.logo-marca{ display:block; height:34px; width:auto; flex:none; }
html.a8-lujo header.cab-marca.cab-sobre-foto img.logo-marca{ filter:drop-shadow(0 1px 6px rgba(10,16,22,.45)); }
html.a8-lujo .cab-marca__nombre{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; margin:0; }
html.a8-lujo .cab-marca__acc{ margin-left:auto; display:flex; align-items:center; gap:10px; }
html.a8-lujo .cab-marca__tema{ display:inline-flex; }
/* LOS BOTONES DE LA FILA, TODOS COMO EL DEL TEMA (§4.3 del PLAN): círculo de tinta al 62 %,
   filete crema al 34 %, ícono blanco de 16 px, 2,1 rem. La pastilla del usuario, del mismo
   alto y con el mismo vidrio. */
html.a8-lujo header.cab-marca :is(.bt-cab, .pz-tema-btn, .ses){ height:2.1rem; border-radius:99px; box-sizing:border-box;
  background-color:rgba(13,23,32,.62); border:1px solid rgba(234,223,206,.34); color:#FFFFFF; box-shadow:none;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
html.a8-lujo header.cab-marca :is(.bt-cab, .pz-tema-btn){ width:2.1rem; padding:0; display:inline-flex; align-items:center; justify-content:center; flex:none; cursor:pointer;
  transition:background-color 120ms linear, border-color 120ms linear; }
html.a8-lujo header.cab-marca :is(.bt-cab, .pz-tema-btn):hover{ background-color:rgba(13,23,32,.75); border-color:#EADFCE; }
html.a8-lujo header.cab-marca :is(.bt-cab, .pz-tema-btn) .material-icons-outlined{ font-size:16px; line-height:1; color:#FFFFFF; }
html.a8-lujo header.cab-marca .ses{ display:inline-flex; align-items:center; gap:8px; padding:0 14px 0 4px; min-width:0; }
html.a8-lujo header.cab-marca .ses__disco{ width:1.55rem; height:1.55rem; border-radius:99px; flex:none; display:inline-flex; align-items:center; justify-content:center;
  font-size:14px; background:rgba(0,109,130,.30); border:1px solid rgba(0,109,130,.50); color:#FFFFFF; }
html.a8-lujo header.cab-marca .ses__yo{ font:400 12.5px/1 var(--c-sans); color:#FFFFFF; white-space:nowrap; max-width:170px; overflow:hidden; text-overflow:ellipsis; }

/* ── 5 · LA PORTADA DE CADA LISTA: UNA FOTO DE COSTA RICA ────────────────────
   Va a sangre, de borde a borde y pegada arriba (la barra va encima); abajo, el título en
   Marcellus con su ceja y, a la derecha, las pestañas y la acción de la vista en vidrio. Las
   dos capas de foto las pone el motor (app8-viaje.js). El velo es el del libro: tinta arriba
   para la barra, limpia al medio y 45 % abajo. Mientras no haya fotos aprobadas, la tinta. */
.a8-vista{ padding:0 !important; }
.a8-portada{ position:relative; isolation:isolate; overflow:hidden; flex:none; display:flex; align-items:flex-end;
  min-height:300px; padding:92px 40px 30px; background:#141D27; color:#EADFCE; }
.a8-portada__fotos{ position:absolute; inset:0; z-index:-2; }
.a8-portada__foto{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity .62s cubic-bezier(.22,.9,.24,1); }
.a8-portada__foto.activa{ opacity:1; }
.a8-portada__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) 30%, rgba(26,38,51,0) 45%, rgba(26,38,51,.45) 100%); }
.a8-portada__lugar{ position:absolute; right:40px; top:78px; font:400 9.5px/1 var(--c-sans); letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.80); }
.a8-portada__lugar:empty{ display:none; }
.a8-portada__in{ width:100%; display:flex; align-items:flex-end; justify-content:space-between; gap:18px 28px; flex-wrap:wrap; }
.a8-portada__tit{ min-width:0; }
.a8-portada__ceja{ display:block; margin-bottom:.7rem; font:400 .66rem/1.2 var(--c-sans); letter-spacing:.26em; text-transform:uppercase; color:rgba(255,255,255,.80); }
html.a8-lujo .a8-portada h1, html.a8-lujo .a8-portada h2{ margin:0; font-family:var(--c-glare) !important; font-size:clamp(2.1rem, 3.2vw, 3rem) !important; line-height:1.05 !important;
  letter-spacing:-.005em !important; color:#FFFFFF !important; }
.a8-portada__cifra{ margin:.75rem 0 0; font:400 .72rem/1.3 var(--c-sans); letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.80); }
.a8-portada__cifra b{ font-family:var(--c-glare); font-size:1.15rem; letter-spacing:.02em; color:#FFFFFF; margin-right:.35rem; text-transform:none; vertical-align:-1px; }
.a8-portada__cifra[hidden]{ display:none; }
.a8-portada__acc{ display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap; }
/* las pestañas: una pastilla de vidrio; la elegida, crema llena con la letra en tinta (como
   el idioma de ARIA) */
.a8-portada__pestanas{ display:inline-flex; align-items:center; gap:2px; padding:3px; border-radius:99px;
  background:rgba(13,23,32,.62); border:1px solid rgba(234,223,206,.34); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
html.a8-lujo .a8-portada__pestanas .tab-a8{ height:calc(2.1rem - 8px); padding:0 16px; margin:0; border:0; border-radius:99px; background:transparent;
  font:400 12px/1 var(--c-sans); letter-spacing:.06em; color:rgba(255,255,255,.85); cursor:pointer; transition:background-color 120ms linear, color 120ms linear; }
html.a8-lujo .a8-portada__pestanas .tab-a8:hover{ color:#FFFFFF; background:rgba(255,255,255,.10); }
html.a8-lujo .a8-portada__pestanas .tab-a8.active{ background:#EADFCE; color:#1A2633; }
/* la acción de la vista y el buscador, en el mismo vidrio */
html.a8-lujo .a8-portada__bt{ display:inline-flex; align-items:center; gap:8px; height:2.1rem; padding:0 16px 0 12px; border-radius:99px; cursor:pointer;
  background:rgba(0,85,101,.85); border:1px solid rgba(255,255,255,.34); color:#FFFFFF; font:400 12px/1 var(--c-sans); letter-spacing:.06em; white-space:nowrap;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition:background-color 120ms linear, border-color 120ms linear; }
html.a8-lujo .a8-portada__bt:hover{ background:#006D82; border-color:#FFFFFF; }
html.a8-lujo .a8-portada__bt .material-icons-outlined{ font-size:16px; color:#FFFFFF; }
html.a8-lujo .a8-portada input.a8-portada__buscar{ height:2.1rem; width:14rem; padding:0 14px 0 34px !important; border-radius:99px !important;
  background:rgba(13,23,32,.62) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.6'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4.5 4.5'/%3E%3C/svg%3E") no-repeat 12px 50% / 15px !important;
  border:1px solid rgba(234,223,206,.34) !important; color:#FFFFFF !important; font:400 12.5px/1 var(--c-sans); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
html.a8-lujo .a8-portada input.a8-portada__buscar::placeholder{ color:rgba(255,255,255,.72) !important; opacity:1; }
html.a8-lujo .a8-portada input.a8-portada__buscar:focus{ outline:none !important; border-color:#FFFFFF !important; box-shadow:none !important; }
/* el contenido de la lista, debajo de la portada */
.a8-cuerpo{ padding:32px 40px 48px; }

/* ── 6 · LAS TARJETAS: PRESENTACIONES Y LANDINGS ─────────────────────────────
   Hojas quietas sobre la tinta: nada se levanta; al pasar, el filete se enciende. La
   portada de cada presentación es deep con la estrella (una portada no cambia con el tema). */
.deck-card, html.a8-lujo #lp-lista > article{ background:var(--c-hoja) !important; border:1px solid var(--c-filete-s) !important; border-radius:14px !important;
  overflow:hidden; box-shadow:none !important; transition:border-color 160ms linear; }
.deck-card:hover, html.a8-lujo #lp-lista > article:hover{ border-color:rgba(234,223,206,.34) !important; }
.deck-card-thumb{ aspect-ratio:16/9; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg, #005565 0%, #1A2633 78%); }
.deck-card-thumb .deck-card-estrella{ width:46px; height:46px; opacity:.34; }
.status-pill{ font:400 9.5px/1 var(--c-sans); text-transform:uppercase; letter-spacing:.16em; padding:5px 10px; border-radius:99px; }
.status-Borrador{ background:rgba(13,23,32,.55); color:#FFFFFF; border:1px solid rgba(234,223,206,.34); }
.status-Publicada{ background:#7D9B5B; color:#1A2633; }
html.a8-lujo .deck-card h3, html.a8-lujo #lp-lista > article h3{ font-family:var(--c-glare) !important; font-size:1.22rem !important; line-height:1.2 !important; color:#FFFFFF !important; }
.deck-card .p-4{ padding:18px 18px 16px !important; }
html.a8-lujo .deck-card p.text-xs{ margin-top:4px; font-size:12.5px; color:var(--c-crema70) !important; }
html.a8-lujo .deck-card p.text-\[10px\]{ font-size:10.5px; letter-spacing:.08em; color:rgba(234,223,206,.55) !important; }
.deck-card-acc{ display:flex; align-items:center; gap:6px; margin-top:16px; }
/* la acción de la tarjeta es editar: deep lleno; lo demás, círculos con filete (el nombre va en el globo) */
.deck-card-editar{ display:inline-flex; align-items:center; gap:6px; height:2.1rem; padding:0 16px 0 12px; margin-right:auto; border-radius:99px; border:0; cursor:pointer;
  background:#005565; color:#FFFFFF; font:400 12px/1 var(--c-sans); letter-spacing:.06em; transition:background-color 120ms linear; }
.deck-card-editar:hover{ background:#006D82; }
.deck-card-circ{ width:2.1rem; height:2.1rem; flex:none; display:inline-flex; align-items:center; justify-content:center; border-radius:99px; cursor:pointer;
  background:transparent; border:1px solid var(--c-filete); color:var(--c-crema); transition:border-color 120ms linear, color 120ms linear, background-color 120ms linear; }
.deck-card-circ:hover{ border-color:rgba(234,223,206,.70); color:#FFFFFF; }
.deck-card-circ--borrar:hover{ background:#B3261E; border-color:#B3261E; }
:is(.deck-card-editar, .deck-card-circ) .material-icons-outlined{ font-size:16px; line-height:1; }
/* la landing: título, estado y el pie de acciones en círculos */
html.a8-lujo #lp-lista > article > .p-4{ padding:20px 20px 16px !important; }
html.a8-lujo #lp-lista > article p.text-xs{ font-size:12.5px; line-height:1.45; color:var(--c-crema70) !important; }
html.a8-lujo #lp-lista > article p.text-\[11px\]{ font-size:10.5px; letter-spacing:.08em; color:rgba(234,223,206,.55) !important; }
html.a8-lujo #lp-lista > article h3 + span{ font:400 9.5px/1 var(--c-sans) !important; letter-spacing:.16em !important; padding:5px 10px !important; border-radius:99px !important; }
html.a8-lujo #lp-lista > article h3 + span.bg-tnsage\/20{ background:#7D9B5B !important; color:#1A2633 !important; }
html.a8-lujo #lp-lista > article h3 + span.bg-slate-100{ background:transparent !important; color:var(--c-crema70) !important; border:1px solid var(--c-filete); }
html.a8-lujo #lp-lista > article > div:last-child{ background:transparent !important; border-top:1px solid var(--c-filete-s) !important; padding:10px 14px !important; gap:6px !important; }
html.a8-lujo #lp-lista > article > div:last-child > button:first-child{ flex:none; height:2.1rem; padding:0 16px !important; border-radius:99px !important; background:#005565 !important;
  color:#FFFFFF !important; font-size:12px; letter-spacing:.06em; text-align:center; margin-right:auto; }
html.a8-lujo #lp-lista > article > div:last-child > button:first-child:hover{ background:#006D82 !important; }
html.a8-lujo #lp-lista > article > div:last-child > button:not(:first-child){ width:2.1rem; height:2.1rem; padding:0 !important; border-radius:99px !important; display:inline-flex;
  align-items:center; justify-content:center; background:transparent !important; border:1px solid var(--c-filete); color:var(--c-crema) !important; }
html.a8-lujo #lp-lista > article > div:last-child > button:not(:first-child):hover{ border-color:rgba(234,223,206,.70); color:#FFFFFF !important; }
html.a8-lujo #lp-lista > article > div:last-child > button:last-child:hover{ background:#B3261E !important; border-color:#B3261E; }
html.a8-lujo #lp-lista > article > div:last-child .material-icons-outlined{ font-size:16px !important; }
/* sin nada que mostrar */
html.a8-lujo #dashboard-empty{ background:transparent !important; border:1px dashed var(--c-filete) !important; border-radius:14px !important; }
html.a8-lujo #dashboard-empty p:first-of-type{ font-family:var(--c-glare); font-size:1.5rem; color:#FFFFFF !important; }
html.a8-lujo #dashboard-empty .material-icons-outlined, html.a8-lujo #lp-lista > .col-span-full .material-icons-outlined{ color:var(--c-crema70) !important; }

/* ── 7 · LOS BOTONES DE LA APP: PASTILLAS ────────────────────────────────── */
.insp-action-btn{ width:100%; min-height:2.1rem; padding:0 12px; border-radius:99px; font:400 12px/1.1 var(--c-sans); letter-spacing:.03em; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:6px; transition:background-color 120ms linear, border-color 120ms linear, color 120ms linear;
  border:1px solid transparent; }
html.a8-lujo .insp-action-btn.bg-white\/10, html.a8-lujo .insp-action-btn.bg-white\/5{ background-color:transparent !important; border-color:var(--c-filete) !important; color:var(--c-crema) !important; }
html.a8-lujo .insp-action-btn.bg-white\/10:hover, html.a8-lujo .insp-action-btn.bg-white\/5:hover{ border-color:rgba(234,223,206,.70) !important; color:#FFFFFF !important; background-color:rgba(234,223,206,.05) !important; }
html.a8-lujo .insp-action-btn.bg-red-500\/10{ background-color:transparent !important; border-color:var(--c-filete) !important; color:var(--c-crema70) !important; }
html.a8-lujo .insp-action-btn.bg-red-500\/10:hover{ background-color:#B3261E !important; border-color:#B3261E !important; color:#FFFFFF !important; }
html.a8-lujo .insp-action-btn .material-icons-outlined{ font-size:15px !important; }
/* los botones de Tailwind en los modales y en las columnas: pastillas */
html.a8-lujo :is(.modal-container, #lp-aside-bloques, #lp-aside-props) button:is(.rounded-xl, .rounded-lg):not(.lp-vista-btn):not(.text-left):not(.aspect-square){ border-radius:99px !important; }
html.a8-lujo .modal-container button.bg-tnteal{ padding-left:1.1rem; padding-right:1.1rem; letter-spacing:.08em !important; }

/* ── 8 · EL CONSTRUCTOR DE PRESENTACIONES ────────────────────────────────── */
/* la barra de herramientas: la hoja, y cada herramienta un círculo (como la barra de ARIA:
   «círculos sin texto, también en escritorio»; el nombre va en el globo del ratón). Guardar
   y Publicar llevan su nombre: son las dos acciones que cierran el trabajo. */
html.a8-lujo :is(#view-editor, #view-landing-editor) > .mc-barra-fila{ background:var(--c-hoja) !important; background-image:none !important; animation:none !important;
  border-bottom:1px solid var(--c-filete-s) !important; box-shadow:none !important; padding:10px 18px !important; gap:10px !important; color:var(--c-crema) !important; }
html.a8-lujo :is(#view-editor, #view-landing-editor) > .mc-barra-fila button{ height:2.1rem; min-width:2.1rem; padding:0 14px !important; border-radius:99px !important;
  display:inline-flex; align-items:center; justify-content:center; gap:6px; flex:none; background:transparent !important; border:1px solid var(--c-filete) !important;
  color:var(--c-crema) !important; font:400 12px/1 var(--c-sans) !important; letter-spacing:.04em !important; text-transform:none !important; box-shadow:none !important;
  transition:background-color 120ms linear, border-color 120ms linear, color 120ms linear; }
html.a8-lujo :is(#view-editor, #view-landing-editor) > .mc-barra-fila button:hover:not(:disabled){ border-color:rgba(234,223,206,.70) !important; color:#FFFFFF !important; }
html.a8-lujo :is(#view-editor, #view-landing-editor) > .mc-barra-fila button .material-icons-outlined{ font-size:16px !important; line-height:1; }
html.a8-lujo :is(#view-editor, #view-landing-editor) > .mc-barra-fila :is(.tb-sec, #undo-btn, #redo-btn, button[title="Volver"]){ width:2.1rem; padding:0 !important; }
html.a8-lujo :is(#view-editor, #view-landing-editor) > .mc-barra-fila .tb-lbl{ display:none !important; }
html.a8-lujo :is(#view-editor, #view-landing-editor) > .mc-barra-fila button:disabled{ opacity:.35; cursor:not-allowed; }
/* lo encendido (En vivo) y la acción principal (Publicar): deep lleno */
html.a8-lujo :is(#view-editor, #view-landing-editor) > .mc-barra-fila :is(button.bg-tnteal, #editor-publish-btn.bg-tnsage, #lp-btn-publicar){
  background:#005565 !important; border-color:#005565 !important; color:#FFFFFF !important; }
html.a8-lujo :is(#view-editor, #view-landing-editor) > .mc-barra-fila :is(button.bg-tnteal, #editor-publish-btn.bg-tnsage, #lp-btn-publicar):hover{ background:#006D82 !important; border-color:#006D82 !important; }
html.a8-lujo :is(#editor-publish-btn, #lp-btn-publicar){ letter-spacing:.1em !important; text-transform:uppercase !important; font-size:11px !important; }
/* el modo Claude: su nombre, en una pastilla; puesto, deep */
.mc-toggle .mc-chispa{ font-size:12px; line-height:1; color:var(--c-crema70); }
html.a8-lujo .modo-claude :is(#view-editor, #view-landing-editor) > .mc-barra-fila .mc-toggle{ background:#005565 !important; border-color:#005565 !important; color:#FFFFFF !important; }
.modo-claude .mc-toggle .mc-chispa{ color:#FFFFFF; }
/* los dos grupos de pastillas (escritorio / móvil y los idiomas): el elegido en crema */
html.a8-lujo #view-landing-editor .mc-barra > .bg-black\/25, html.a8-lujo #lp-idiomas-pills{ background:transparent !important; border:1px solid var(--c-filete); border-radius:99px !important; padding:2px !important; gap:2px; }
html.a8-lujo #view-landing-editor > .mc-barra-fila .lp-vista-btn{ height:calc(2.1rem - 6px) !important; min-width:calc(2.1rem - 6px) !important; border:0 !important; padding:0 10px !important; color:var(--c-crema70) !important; }
html.a8-lujo #view-landing-editor > .mc-barra-fila .lp-vista-btn.active{ background:var(--c-crema) !important; color:var(--c-tinta) !important; }
html.a8-lujo #view-landing-editor > .mc-barra-fila :is(#lp-btn-esc, #lp-btn-mov){ width:calc(2.1rem - 6px); padding:0 !important; }
/* el título y el cliente, como texto: Marcellus, sin caja hasta que se escriben */
html.a8-lujo :is(#editor-titulo-input, #lp-titulo){ background:transparent !important; border:0 !important; border-bottom:1px solid transparent !important; border-radius:0 !important;
  font-family:var(--c-glare) !important; font-size:18px !important; color:#FFFFFF !important; padding:2px 2px !important; }
html.a8-lujo #editor-cliente-input{ background:transparent !important; border:0 !important; border-bottom:1px solid transparent !important; border-radius:0 !important;
  font-size:12.5px !important; color:var(--c-crema70) !important; }
html.a8-lujo :is(#editor-titulo-input, #lp-titulo, #editor-cliente-input):is(:hover, :focus){ border-bottom-color:var(--c-filete) !important; outline:none !important; box-shadow:none !important; }
html.a8-lujo #view-editor > .mc-barra-fila > .border-l{ border-left-color:var(--c-filete-s) !important; }
html.a8-lujo #lp-estado{ font:400 9.5px/1 var(--c-sans) !important; letter-spacing:.16em !important; padding:5px 10px !important; border-radius:99px; background:transparent !important;
  border:1px solid var(--c-filete); color:var(--c-crema70); }
html.a8-lujo #lp-estado.bg-tnsage{ background:#7D9B5B !important; border-color:#7D9B5B; color:#1A2633 !important; }

.editor-shell{ display:flex; height:100%; overflow:hidden; }
/* el riel de diapositivas */
.slide-rail{ width:170px; flex-shrink:0; background:var(--c-tinta); border-right:1px solid var(--c-filete-s); overflow-y:auto; padding:14px 12px; }
.slide-thumb{ position:relative; width:100%; aspect-ratio:16/9; border-radius:9px; overflow:hidden; border:2px solid transparent; cursor:pointer; margin-bottom:12px;
  background:var(--c-hondo); transition:border-color .15s ease; }
.slide-thumb:hover{ border-color:rgba(234,223,206,.34); }
.slide-thumb.active{ border-color:#006D82; box-shadow:0 0 0 3px rgba(0,109,130,.35); }
.slide-thumb .thumb-num{ position:absolute; top:5px; left:6px; font:400 9px/1 var(--c-sans); letter-spacing:.04em; color:#FFFFFF; background:rgba(13,23,32,.62);
  padding:3px 7px; border-radius:99px; z-index:5; }
.slide-thumb .thumb-del{ position:absolute; top:4px; right:6px; z-index:6; width:18px; height:18px; border-radius:99px; background:rgba(13,23,32,.72); color:#FFFFFF;
  display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .15s ease; }
.slide-thumb:hover .thumb-del{ opacity:1; }
.add-slide-btn{ width:100%; aspect-ratio:16/9; border-radius:9px; border:1px dashed rgba(234,223,206,.26); color:var(--c-crema70); display:flex; flex-direction:column;
  align-items:center; justify-content:center; cursor:pointer; transition:border-color .15s ease, color .15s ease; gap:2px; }
.add-slide-btn:hover{ border-color:var(--c-crema); color:#FFFFFF; }
/* la mesa: el lienzo sobre tinta honda, con su filete para que no se confunda con ella */
.canvas-stage{ flex-grow:1; background:var(--c-hondo); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; padding:28px; }
.canvas-stage-inner{ position:relative; width:100%; height:100%; }
/* el marco del motor pinta negro alrededor de la diapositiva (en el visor público es el
   telón); en la mesa del editor ese marco es la mesa misma */
:is(.canvas-stage-inner, .slide-thumb) .tn-slide-wrap{ background:transparent !important; }
.canvas-stage-inner .tn-canvas{ box-shadow:0 0 0 1px rgba(234,223,206,.18), 0 25px 70px rgba(13,23,32,.65) !important; }
/* el inspector */
.inspector-panel{ width:290px; flex-shrink:0; background:var(--c-hoja); border-left:1px solid var(--c-filete-s); overflow-y:auto; padding:18px 16px; color:var(--c-crema); }
.insp-label{ display:block; margin-bottom:9px; font:400 9.5px/1.2 var(--c-sans); text-transform:uppercase; letter-spacing:.22em; color:var(--c-crema70); }
.insp-section{ margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid var(--c-filete-s); }
.insp-row{ display:flex; gap:8px; margin-bottom:8px; }
.insp-btn{ flex:1; padding:8px; border-radius:9px; background:transparent; border:1px solid var(--c-filete); color:var(--c-crema); font-size:16px; cursor:pointer;
  transition:border-color .15s ease, background-color .15s ease; display:flex; align-items:center; justify-content:center; }
.insp-btn:hover{ border-color:rgba(234,223,206,.70); }
.insp-btn.active{ background:#005565; color:#FFFFFF; border-color:#005565; }
.insp-input{ width:100%; background:var(--c-campo); border:1px solid var(--c-filete); color:var(--c-crema); border-radius:9px; padding:7px 10px; font-size:12px; }
.insp-input:focus{ outline:none; border-color:var(--c-crema); }
input[type=range].insp-slider{ -webkit-appearance:none; appearance:none; width:100%; height:3px; border-radius:99px; background:var(--c-filete); margin:6px 0; }
input[type=range].insp-slider::-webkit-slider-thumb{ -webkit-appearance:none; width:14px; height:14px; border-radius:99px; background:var(--c-crema); cursor:pointer; border:2px solid var(--c-hoja); }
input[type=range].insp-slider::-moz-range-thumb{ width:14px; height:14px; border-radius:99px; background:var(--c-crema); cursor:pointer; border:2px solid var(--c-hoja); }
.insp-slider-label{ display:flex; justify-content:space-between; font-size:10.5px; color:var(--c-crema70); margin-top:8px; }
select.insp-input option{ background:var(--c-hoja); }
html.a8-lujo .inspector-panel .text-white{ color:#FFFFFF !important; }
html.a8-lujo .inspector-panel :is(.text-slate-400, .text-slate-500){ color:var(--c-crema70) !important; }
.swatch{ width:26px; height:26px; border-radius:99px; border:2px solid rgba(234,223,206,.26); cursor:pointer; flex-shrink:0; padding:0; }
.swatch.active{ border-color:var(--c-crema); box-shadow:0 0 0 2px #005565; }
/* la selección sobre el lienzo: herramientas del editor, en rellenos del libro */
.tn-editor-selection{ position:absolute; border:1.5px dashed #7D9B5B; pointer-events:none; z-index:40; }
.tn-handle{ position:absolute; width:12px; height:12px; background:#7D9B5B; border:1.5px solid #1A2633; border-radius:3px; pointer-events:auto; z-index:41; }
.tn-handle-nw{ left:-6px; top:-6px; cursor:nwse-resize; } .tn-handle-n{ left:50%; top:-6px; margin-left:-6px; cursor:ns-resize; }
.tn-handle-ne{ right:-6px; top:-6px; cursor:nesw-resize; } .tn-handle-e{ right:-6px; top:50%; margin-top:-6px; cursor:ew-resize; }
.tn-handle-se{ right:-6px; bottom:-6px; cursor:nwse-resize; } .tn-handle-s{ left:50%; bottom:-6px; margin-left:-6px; cursor:ns-resize; }
.tn-handle-sw{ left:-6px; bottom:-6px; cursor:nesw-resize; } .tn-handle-w{ left:-6px; top:50%; margin-top:-6px; cursor:ew-resize; }
.tn-el[data-el-type]{ cursor:grab; }
.tn-el[data-el-type]:active{ cursor:grabbing; }
.tn-el.tn-editing{ outline:2px solid #006D82; cursor:text; }
.tn-handle-rotate{ position:absolute; width:13px; height:13px; background:#006D82; border:1.5px solid #1A2633; border-radius:99px; pointer-events:auto; z-index:42; left:50%; top:-32px; margin-left:-6.5px; cursor:grab; }
.tn-rotate-stem{ position:absolute; left:50%; top:-24px; width:1px; height:24px; background:rgba(125,155,91,.6); pointer-events:none; z-index:41; }
.tn-editor-selection.multi{ border-color:#006D82; }
.tn-marquee{ position:absolute; border:1.5px dashed #006D82; background:rgba(0,109,130,.12); pointer-events:none; z-index:39; }
/* la guía de ajuste: roja del libro, visible sobre cualquier diapositiva */
.tn-snap-guide{ position:absolute; background:#B3261E; pointer-events:none; z-index:45; }
.tn-snap-guide-v{ top:0; bottom:0; width:1px; }
.tn-snap-guide-h{ left:0; right:0; height:1px; }
.tn-canvas-dragover{ outline:3px dashed #7D9B5B; outline-offset:-3px; }
/* la barra flotante de formato de texto */
#text-toolbar{ position:absolute; display:none; background:var(--c-hoja); border:1px solid var(--c-filete); border-radius:99px; padding:4px 6px; box-shadow:var(--c-sombra); z-index:60; gap:2px; align-items:center; }
#text-toolbar.visible{ display:flex; }
#text-toolbar button{ width:28px; height:28px; border-radius:99px; color:var(--c-crema); display:flex; align-items:center; justify-content:center; font-size:13px; cursor:pointer; }
#text-toolbar button:hover{ background:rgba(234,223,206,.08); }
#text-toolbar button.active{ background:#005565; color:#FFFFFF; }
#text-toolbar .tt-sep{ width:1px; height:18px; background:var(--c-filete); margin:0 3px; }
#text-toolbar input[type=color]{ width:24px; height:24px; border:none; padding:0; background:none; cursor:pointer; border-radius:99px; overflow:hidden; }
/* las capas */
.layer-row{ display:flex; align-items:center; gap:6px; padding:6px 8px; border-radius:9px; background:rgba(234,223,206,.03); margin-bottom:4px; cursor:pointer; border:1px solid transparent; }
.layer-row:hover{ background:rgba(234,223,206,.07); }
.layer-row.active{ border-color:#006D82; background:rgba(0,109,130,.20); }
.layer-row .layer-icon{ font-size:15px; color:var(--c-crema70); flex-shrink:0; }
.layer-shape-swatch{ width:14px; height:14px; flex-shrink:0; background:#7D9B5B; }
.layer-row .layer-name{ flex-grow:1; font-size:11.5px; color:var(--c-crema); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.layer-row .layer-action{ color:rgba(234,223,206,.45); flex-shrink:0; }
.layer-row .layer-action:hover{ color:#FFFFFF; }
/* el color completo, la orientación, la IA y los selectores de elementos */
.color-picker-row{ display:flex; align-items:center; gap:8px; margin-top:8px; }
.color-picker-row input[type=color]{ width:34px; height:34px; border:none; padding:0; background:none; cursor:pointer; border-radius:9px; overflow:hidden; flex-shrink:0; }
.color-picker-row input[type=text]{ flex-grow:1; }
.format-toggle{ display:flex; gap:8px; margin-bottom:16px; }
.format-toggle button{ flex:1; padding:12px; border-radius:14px; background:transparent; border:1px solid var(--c-filete); color:var(--c-crema70); display:flex; flex-direction:column;
  align-items:center; gap:6px; cursor:pointer; transition:border-color .15s ease, color .15s ease; }
.format-toggle button.active{ border-color:var(--c-crema); color:#FFFFFF; background:rgba(0,109,130,.20); }
.format-toggle .fmt-icon{ width:26px; height:18px; border:1.5px solid currentColor; border-radius:2px; }
.format-toggle button[data-fmt="vertical"] .fmt-icon{ width:18px; height:26px; }
.ai-example-chip{ display:inline-block; padding:5px 12px; border-radius:99px; background:transparent; color:var(--c-crema); font-size:11px; cursor:pointer; margin:3px 4px 0 0; border:1px solid var(--c-filete); }
.ai-example-chip:hover{ border-color:rgba(234,223,206,.70); color:#FFFFFF; }
.ornament-category-pill{ padding:5px 12px; border-radius:99px; background:transparent; color:var(--c-crema70); font-size:11px; cursor:pointer; border:1px solid var(--c-filete); white-space:nowrap; }
.ornament-category-pill:hover{ color:var(--c-crema); border-color:rgba(234,223,206,.45); }
.ornament-category-pill.active{ background:#005565; color:#FFFFFF; border-color:#005565; }
.icon-pick-btn{ aspect-ratio:1; border-radius:9px; background:rgba(234,223,206,.03); border:1px solid var(--c-filete-s); color:var(--c-crema); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background-color .15s ease, border-color .15s ease; }
.icon-pick-btn:hover{ background:#005565; color:#FFFFFF; border-color:#005565; }
.ornament-pick-btn{ aspect-ratio:1; border-radius:14px; background:rgba(234,223,206,.03); border:1px solid var(--c-filete-s); color:var(--c-crema); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; cursor:pointer; padding:14px; transition:border-color .15s ease; }
.ornament-pick-btn:hover{ border-color:rgba(234,223,206,.55); }
.ornament-pick-btn svg{ width:60%; height:60%; }
.ornament-pick-btn span{ font-size:9px; text-transform:uppercase; letter-spacing:.12em; color:var(--c-crema70); }
.shape-pick-btn{ aspect-ratio:1; border-radius:14px; background:rgba(234,223,206,.03); border:1px solid var(--c-filete-s); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; cursor:pointer; padding:12px; transition:border-color .15s ease; }
.shape-pick-btn:hover{ border-color:rgba(234,223,206,.55); }
.shape-pick-preview{ width:52%; height:52%; }
.shape-pick-btn span{ font-size:8.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--c-crema70); text-align:center; }
/* las plantillas de arranque: la muestra es de la plantilla; el rótulo, de la app */
.template-card{ border-radius:14px; overflow:hidden; cursor:pointer; border:1px solid var(--c-filete); transition:border-color .15s ease; text-align:left; }
.template-card:hover{ border-color:rgba(234,223,206,.55); }
.template-card.active{ border-color:#006D82; box-shadow:0 0 0 2px rgba(0,109,130,.4); }
.template-card-preview{ height:80px; display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-size:11px; letter-spacing:.05em; }
.template-card-label{ padding:9px 11px; background:var(--c-tinta); }
.template-card-label b{ display:block; font-size:11.5px; color:var(--c-crema); }
.template-card-label span{ font-size:9.5px; color:var(--c-crema70); }

/* ── 9 · LA LIBRERÍA DE FOTOS: EL FOCO ──────────────────────────────────────
   La foto que se toca cobra vida y las demás se apagan (feedback-efectos-hover). Sin marcos
   ni reflejos; sin acercamiento, porque aquí se trabaja. */
.media-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:10px; }
.media-item{ position:relative; aspect-ratio:1; border-radius:9px; overflow:hidden; cursor:pointer; border:0; background:var(--c-hondo); }
.media-item img{ width:100%; height:100%; object-fit:cover; display:block; transition:filter .4s ease; }
.media-grid:hover .media-item:not(:hover) img, #lp-fotos:hover > *:not(:hover) img{ filter:brightness(.58) saturate(.55); }
.media-item .media-del{ position:absolute; top:5px; right:5px; width:22px; height:22px; border-radius:99px; background:rgba(13,23,32,.72); color:#FFFFFF; display:flex;
  align-items:center; justify-content:center; opacity:0; transition:opacity .15s ease; }
.media-item:hover .media-del{ opacity:1; }
.media-item .media-del:hover{ background:#B3261E; }
/* EL NOMBRE de la foto es lo que se le pega a Claude en el chat (mediaName): la URL de descarga
   vence en horas y el nombre no. Siempre visible, también en pantallas táctiles. */
.media-item .media-name{ position:absolute; left:0; right:0; bottom:0; display:flex; align-items:center; gap:4px; padding:14px 4px 4px 7px;
  background:linear-gradient(to bottom, transparent, rgba(13,23,32,.88)); }
.media-item .media-name-txt{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:ui-monospace,Consolas,monospace; font-size:9px; color:#EADFCE; }
.media-item .media-copy{ flex-shrink:0; width:24px; height:24px; border-radius:99px; background:rgba(255,255,255,.14); color:#FFFFFF; display:flex; align-items:center; justify-content:center; border:0; cursor:pointer; transition:background-color .15s ease; }
.media-item .media-copy:hover{ background:#005565; }
.media-item.media-nueva{ box-shadow:inset 0 0 0 2px #7D9B5B; }
.media-item .media-badge-nueva{ position:absolute; top:5px; left:5px; background:#7D9B5B; color:#1A2633; font-size:9px; letter-spacing:.1em; padding:2px 8px; border-radius:99px; text-transform:uppercase; }
.media-upload-zone{ border:1px dashed rgba(234,223,206,.26); border-radius:14px; padding:22px; text-align:center; cursor:pointer; transition:border-color .15s ease, background-color .15s ease; }
.media-upload-zone:hover, .media-upload-zone.dragover{ border-color:var(--c-crema); background:rgba(234,223,206,.04); }
html.a8-lujo #lp-fotos > *{ border-radius:9px !important; overflow:hidden; }
html.a8-lujo #lp-fotos img{ transition:filter .4s ease; }

/* ── 10 · EL CONSTRUCTOR DE LANDINGS ─────────────────────────────────────── */
/* el constructor ocupa lo que queda bajo la barra, no el alto entero: con `h-full` medía la
   pantalla más la barra, y al elegir un bloque la página entera se corría hacia arriba */
html.a8-lujo #view-landing-editor{ height:auto !important; flex:1 1 0%; min-height:0; }
html.a8-lujo #lp-cuerpo{ background:var(--c-hondo) !important; }
html.a8-lujo :is(#lp-aside-bloques, #lp-aside-props){ background:var(--c-hoja) !important; border-color:var(--c-filete-s) !important; }
html.a8-lujo :is(#lp-aside-bloques .lp-bloques-cab, #lp-props-cab){ border-bottom-color:var(--c-filete-s) !important; padding-top:12px !important; padding-bottom:12px !important; }
html.a8-lujo :is(.lp-bloques-rotulo, #lp-props-cab > span){ font:400 9.5px/1.2 var(--c-sans) !important; letter-spacing:.22em !important; color:var(--c-crema70) !important; }
html.a8-lujo .lp-bloques-cab button{ width:2.1rem !important; height:2.1rem !important; border-radius:99px !important; background:#005565 !important; }
html.a8-lujo .lp-bloques-cab button:hover{ background:#006D82 !important; }
html.a8-lujo .lp-bloque{ border-radius:9px !important; }
html.a8-lujo .lp-bloque:hover{ background:rgba(234,223,206,.05) !important; }
html.a8-lujo .lp-bloque.border-tnteal\/40{ background:rgba(0,109,130,.24) !important; border-color:rgba(0,109,130,.75) !important; }
html.a8-lujo .lp-bloque p.text-\[12px\]{ font-size:12.5px; color:var(--c-crema) !important; }
html.a8-lujo .lp-bloque p.text-\[10px\]{ color:rgba(234,223,206,.55) !important; }
html.a8-lujo .lp-bloque button{ border-radius:99px !important; }
html.a8-lujo #lp-escenario{ background:transparent; }
html.a8-lujo #lp-marco{ background:#FFFFFF !important; border-radius:9px !important; box-shadow:0 0 0 1px rgba(234,223,206,.18), 0 25px 70px rgba(13,23,32,.65) !important; }
/* las propiedades */
html.a8-lujo #lp-props-cab p.text-\[12px\]{ font-family:var(--c-glare); font-size:15px; color:#FFFFFF !important; }
html.a8-lujo #lp-props label.text-\[11px\], html.a8-lujo #lp-props summary.text-\[11px\], html.a8-lujo #lp-props .text-\[11px\].font-bold{ color:var(--c-crema) !important; }
html.a8-lujo #lp-props .lp-grupo > summary{ font:400 9.5px/1.2 var(--c-sans) !important; letter-spacing:.22em !important; color:var(--c-crema70) !important; }
html.a8-lujo #lp-props :is(details, div).border{ border-color:var(--c-filete-s) !important; }
html.a8-lujo #lp-props details.bg-white{ background:rgba(234,223,206,.03) !important; }
html.a8-lujo #lp-props .border-dashed{ border-color:rgba(234,223,206,.26) !important; }
.lp-grupo summary::-webkit-details-marker{ display:none; }
.lp-grupo > summary::before{ content:'▸'; display:inline-block; margin-right:6px; transition:transform .2s ease; }
.lp-grupo[open] > summary::before{ transform:rotate(90deg); }
.lp-vista-btn{ color:rgba(234,223,206,.70); transition:background-color .2s ease, color .2s ease; }
.lp-vista-btn.active{ background:#EADFCE; color:#1A2633; }

/* ── 11 · EL MODO CLAUDE ─────────────────────────────────────────────────────
   Disposición compacta para trabajar con la app en el panel angosto del chat: una sola barra
   de íconos, columna izquierda mínima y el panel de propiedades FLOTANDO encima (empujar le
   robaría ancho a la vista previa, que es lo que manda). Sólo cambia la disposición. */
.mc-toggle{ white-space:nowrap; }
.mc-fab, .mc-cerrar{ display:none; }
/* Dentro de un editor, el encabezado de la app no aporta: el editor ya tiene su propia barra
   con «volver». Es alto que se le devuelve al lienzo. */
.modo-claude #main-app:has(#view-editor.active) > header, .modo-claude #main-app:has(#view-landing-editor.active) > header{ display:none; }
.modo-claude .mc-barra{ flex-wrap:nowrap !important; gap:4px !important; }
.modo-claude .mc-barra-fila{ flex-wrap:nowrap !important; padding-top:6px !important; padding-bottom:6px !important; }
/* presentaciones */
.modo-claude #editor-titulo-input{ width:9.5rem; min-width:0; }
.modo-claude #editor-cliente-input{ width:6.5rem; min-width:0; }
.modo-claude .slide-rail{ width:92px; padding:10px 8px; }
.modo-claude .slide-thumb{ margin-bottom:8px; border-radius:7px; }
.modo-claude .add-slide-btn{ border-radius:7px; font-size:0; }
.modo-claude .canvas-stage{ padding:18px; background-image:radial-gradient(rgba(234,223,206,.08) 1px, transparent 1px); background-size:18px 18px; }
.modo-claude .editor-shell{ position:relative; }
.modo-claude .inspector-panel{ position:absolute; top:12px; right:12px; bottom:12px; width:300px; max-width:calc(100% - 120px); z-index:40; border-radius:14px; border:1px solid var(--c-filete);
  box-shadow:var(--c-sombra); transform:translateX(calc(100% + 24px)); opacity:0; pointer-events:none; transition:transform .22s ease, opacity .18s ease; padding-top:40px; }
.modo-claude .mc-abierto .inspector-panel{ transform:none; opacity:1; pointer-events:auto; }
.modo-claude .editor-shell .mc-cerrar{ position:absolute; top:20px; right:20px; z-index:41; }
.modo-claude .editor-shell.mc-abierto .mc-cerrar{ display:flex; }
.modo-claude .editor-shell .mc-fab{ display:flex; position:absolute; top:14px; right:14px; z-index:39; }
.modo-claude .editor-shell.mc-abierto .mc-fab{ display:none; }
.mc-cerrar{ width:2.1rem; height:2.1rem; border-radius:99px; align-items:center; justify-content:center; background:transparent; border:1px solid var(--c-filete); color:var(--c-crema); }
.mc-cerrar:hover{ border-color:rgba(234,223,206,.70); color:#FFFFFF; }
.mc-fab{ align-items:center; gap:6px; height:2.1rem; padding:0 14px; border-radius:99px; font-size:12px; letter-spacing:.04em; background:var(--c-hoja); color:var(--c-crema);
  border:1px solid var(--c-filete); box-shadow:var(--c-sombra); }
.mc-fab:hover{ border-color:rgba(234,223,206,.70); color:#FFFFFF; }
/* landings */
.modo-claude #lp-titulo{ width:10rem; }
.modo-claude #lp-cuerpo{ position:relative; overflow:hidden; background-image:radial-gradient(rgba(234,223,206,.08) 1px, transparent 1px) !important; background-size:18px 18px; }
.modo-claude #lp-aside-bloques{ position:absolute; left:0; top:0; bottom:0; width:56px !important; z-index:30; overflow:hidden; transition:width .2s ease, box-shadow .2s ease; }
.modo-claude #lp-aside-bloques:hover{ width:250px !important; box-shadow:var(--c-sombra); }
.modo-claude #lp-aside-bloques:not(:hover) .lp-bloque > div,
.modo-claude #lp-aside-bloques:not(:hover) .lp-bloques-rotulo,
.modo-claude #lp-aside-bloques:not(:hover) #lp-bloques > :not(.lp-bloque){ display:none; }
.modo-claude #lp-aside-bloques:not(:hover) .lp-bloques-cab{ justify-content:center; padding-left:0; padding-right:0; }
.modo-claude #lp-aside-bloques:not(:hover) .lp-bloque{ justify-content:center; padding-left:0; padding-right:0; }
.modo-claude #lp-escenario{ padding:14px 14px 14px 70px; }
.modo-claude #lp-aside-props{ position:absolute; top:12px; right:12px; bottom:12px; width:310px !important; max-width:calc(100% - 90px); z-index:35; border:1px solid var(--c-filete) !important;
  border-radius:14px; box-shadow:var(--c-sombra); overflow:hidden; transform:translateX(calc(100% + 24px)); opacity:0; pointer-events:none; transition:transform .22s ease, opacity .18s ease; }
.modo-claude #lp-cuerpo.mc-abierto #lp-aside-props{ transform:none; opacity:1; pointer-events:auto; }
.modo-claude #lp-cuerpo .mc-cerrar{ display:flex; position:absolute; top:8px; right:8px; z-index:2; }
.modo-claude #lp-props-cab{ padding-right:48px; }
.modo-claude #lp-cuerpo .mc-fab{ display:flex; position:absolute; top:14px; right:14px; z-index:34; }
.modo-claude #lp-cuerpo.mc-abierto .mc-fab{ display:none; }

/* ── 12 · LOS MODALES: HOJAS CON EL TÍTULO EN MARCELLUS ──────────────────────
   Sin la barra de color de antes: la franja del título es la misma hoja, con su filete. */
.modal-container{ position:fixed; inset:0; background-color:rgba(20,29,39,.78); z-index:999; display:flex; align-items:center; justify-content:center; padding:1rem;
  opacity:0; transition:opacity .3s ease; pointer-events:none; }
.modal-container.visible{ opacity:1; pointer-events:auto; }
html.a8-lujo .modal-container > div{ background-color: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); }
.a8-modal__cab{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px 14px 22px; background:var(--c-hoja); border-bottom:1px solid var(--c-filete-s); }
html.a8-lujo .a8-modal__cab h3{ display:flex; align-items:center; gap:10px; margin:0; font-family:var(--c-glare) !important; font-size:1.35rem !important; line-height:1.2; color:#FFFFFF !important; letter-spacing:.005em !important; }
html.a8-lujo .a8-modal__cab h3 .material-icons-outlined{ font-size:20px; color:var(--c-crema70); }
html.a8-lujo .a8-modal__cab p{ color:var(--c-crema70) !important; }
html.a8-lujo .a8-modal__cab button{ width:2.1rem; height:2.1rem; padding:0 !important; border-radius:99px !important; display:inline-flex; align-items:center; justify-content:center;
  background:transparent !important; border:1px solid var(--c-filete); color:var(--c-crema) !important; }
html.a8-lujo .a8-modal__cab button:hover{ border-color:rgba(234,223,206,.70); color:#FFFFFF !important; }
html.a8-lujo .a8-modal__cab button .material-icons-outlined{ font-size:17px !important; color:inherit; }
/* los pies y las cajas de los modales */
html.a8-lujo .modal-container .bg-slate-50{ background-color:transparent !important; }
html.a8-lujo .modal-container :is(.border-t, .border-b):not(.a8-modal__cab){ border-color:var(--c-filete-s) !important; }
html.a8-lujo .modal-container .text-slate-700, html.a8-lujo .modal-container .text-slate-600{ color:var(--c-crema) !important; }
html.a8-lujo .modal-container :is(.text-slate-400, .text-slate-500){ color:var(--c-crema70) !important; }
html.a8-lujo #confirmation-message{ font-size:14px; line-height:1.55; color:var(--c-crema) !important; }
html.a8-lujo :is(#btn-confirm-ok, .modal-container button.bg-tnteal){ background:#005565 !important; border-color:#005565 !important; color:#FFFFFF !important; border-radius:99px !important; }
html.a8-lujo :is(#btn-confirm-ok, .modal-container button.bg-tnteal):hover{ background:#006D82 !important; }
html.a8-lujo #btn-confirm-cancel{ background:transparent !important; border:1px solid var(--c-filete) !important; color:var(--c-crema) !important; border-radius:99px !important; }
html.a8-lujo #btn-confirm-cancel:hover{ border-color:rgba(234,223,206,.70) !important; color:#FFFFFF !important; }
/* las plantillas de landing */
html.a8-lujo #lp-plantillas > button{ border-radius:14px !important; border-color:var(--c-filete) !important; }
html.a8-lujo #lp-plantillas > button:hover{ border-color:rgba(234,223,206,.55) !important; background:rgba(234,223,206,.03) !important; }
html.a8-lujo #lp-plantillas h4{ font-family:var(--c-glare) !important; font-size:1.05rem; color:#FFFFFF !important; }
/* la paleta de bloques */
html.a8-lujo #lp-paleta > button{ border-radius:14px !important; border-color:var(--c-filete) !important; }
html.a8-lujo #lp-paleta > button:hover{ border-color:rgba(234,223,206,.55) !important; background:rgba(234,223,206,.03) !important; }

/* ── 13 · LA CARGA Y LOS AVISOS ──────────────────────────────────────────── */
/* sin velo: la pantalla no se lava; sólo la estrella gira en su disco de tinta. El velo sigue
   ahí, transparente, para que no se pueda tocar nada mientras carga. */
html.a8-lujo #loader{ background:transparent !important; backdrop-filter:none !important; }
html.a8-lujo #loader .a8-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:0 30px 70px -18px rgba(26,38,51,.62); animation:a8Gira 4s linear infinite; }
html.a8-lujo #loader-msg{ margin-top:14px; padding:5px 12px; border-radius:99px; background:rgba(13,23,32,.78); font:400 10px/1 var(--c-sans); letter-spacing:.22em; text-transform:uppercase;
  color:#EADFCE !important; animation:none !important; }
@keyframes a8Gira{ to{ transform:rotate(360deg); } }
html.a8-lujo #toast{ border-radius:99px !important; border:1px solid rgba(234,223,206,.22) !important; box-shadow:0 30px 70px -18px rgba(13,23,32,.62) !important;
  font:400 12.5px/1.3 var(--c-sans) !important; letter-spacing:.01em; color:#FFFFFF !important; padding:.7rem 1.2rem !important; }

/* ── 14 · LOS TAMAÑOS ────────────────────────────────────────────────────── */
@media (max-width:1099px){
  .a8-portada{ padding-left:28px; padding-right:28px; }
  .a8-cuerpo{ padding:26px 28px 40px; }
  .a8-portada__lugar{ right:28px; }
}
@media (max-width:767px){
  html.a8-lujo header.cab-marca{ padding:8px 14px; }
  html.a8-lujo header.cab-marca img.logo-marca{ height:26px; }
  html.a8-lujo header.cab-marca .ses{ width:2.1rem; padding:0; justify-content:center; }
  html.a8-lujo header.cab-marca .ses__yo{ display:none; }
  .a8-portada{ min-height:250px; padding:78px 16px 20px; }
  .a8-portada__in{ gap:14px; }
  .a8-portada__acc{ width:100%; justify-content:flex-start; }
  html.a8-lujo .a8-portada h1, html.a8-lujo .a8-portada h2{ font-size:2rem !important; }
  html.a8-lujo .a8-portada input.a8-portada__buscar{ width:100%; flex:1 1 100%; order:3; }
  .a8-portada__lugar{ top:62px; right:16px; }
  .a8-cuerpo{ padding:20px 16px 32px; }
  /* en el celular las barras de los constructores bajan a dos renglones en vez de salirse */
  html.a8-lujo :is(#view-editor, #view-landing-editor) > .mc-barra-fila{ flex-wrap:wrap !important; padding:8px 10px !important; gap:6px !important; }
  html.a8-lujo #view-landing-editor > .mc-barra-fila .mc-barra{ flex-wrap:wrap !important; }
}
@media (prefers-reduced-motion:reduce){
  .a8-portada__foto{ transition:opacity .2s linear; }
  html.a8-lujo #loader .a8-carga{ animation:none; }
  .view-section{ animation:none; }
}