/* GENERADO por 5 herramientas/generar-tema-teal.py desde suelo-lujo.css — NO SE EDITA A MANO.
   Es la misma hoja con la tinta cambiada por teal (15 colores traducidos); cada regla
   traducida lleva su gemela oscura para lo que va sobre la foto ([data-pz-foto]). Lo que
   el teal necesita de más va a mano en su archivo de ajustes. */
/* ═══════════════════════════════════════════════════════════════════════════
   SUELO · Administrador — LA LÍNEA DE LUJO (2026-09-29)
   ───────────────────────────────────────────────────────────────────────────
   El refresco PRISMA de la app 6 (antes «Super Admin»), con el molde de CAMPO, RAÍCES y CEIBA:
   cada vista abre con una foto de Costa Rica (el motor, en suelo-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. Una sola sombra.
   La app venía en negro y rojo («inferno»): el rojo era su color de acción. Acá la acción es
   deep, como en todo PRISMA, y el rojo queda para lo que de verdad es peligro (borrar, revocar,
   producción).
   Sólo apariencia: ninguna regla toca la lógica de permisos, interruptores ni llaves.
   La paleta de Tailwind ya llega en tinta (suelo-tw.js); esta hoja cubre lo que Tailwind no
   pinta: el negro y los grises escritos a mano, y las piezas propias de la app.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{ --c-tinta:#046477; --c-hondo:#03505f; --c-hoja:#005565; --c-campo:#0b6576; --c-deep:#006d82; --c-teal:#006D82;
  --c-salvia:#b7cc9a; --c-crema:#EADFCE; --c-crema70:rgba(255,255,255,.86); --c-filete:rgba(234,223,206,.16);
  --c-filete-s:rgba(234,223,206,.09); --c-glare:Marcellus, 'PP Fragment Glare', Georgia, serif;
  --c-sans:Figtree, 'PP Fragment Sans', Inter, system-ui, sans-serif; --c-sombra:0 30px 70px -18px rgba(4,100,119,.62); }
:root:where([data-pz-foto]){--c-tinta:#1A2633;--c-hondo:#141D27;--c-hoja:#222E3A;--c-campo:#2A3541;--c-deep:#005565;--c-salvia:#7D9B5B;--c-crema70:rgba(234,223,206,.70);--c-sombra:0 30px 70px -18px rgba(26,38,51,.62)}
:root :where([data-pz-foto]){--c-tinta:#1A2633;--c-hondo:#141D27;--c-hoja:#222E3A;--c-campo:#2A3541;--c-deep:#005565;--c-salvia:#7D9B5B;--c-crema70:rgba(234,223,206,.70);--c-sombra:0 30px 70px -18px rgba(26,38,51,.62)}

/* ── 1 · Suelo, letra y peso ─────────────────────────────────────────────── */
html.suelo-lujo body{ background:var(--c-tinta) !important; color:var(--c-crema) !important; font-family:var(--c-sans) !important; }
html.suelo-lujo body *{ font-weight:400 !important; font-style:normal !important; }
html.suelo-lujo h1, html.suelo-lujo h2, html.suelo-lujo h3, html.suelo-lujo h4, html.suelo-lujo .font-display{ font-family:var(--c-glare) !important; letter-spacing:.01em !important; }
html.suelo-lujo .font-mono{ font-family:var(--c-sans) !important; font-variant-numeric:tabular-nums; letter-spacing:0 !important; }
html.suelo-lujo #main-app, html.suelo-lujo #main-app > main, html.suelo-lujo #main-app .view-section{ background:var(--c-tinta) !important; }
html.suelo-lujo:not([data-tema="claro"]){ color-scheme:dark; }
html.suelo-lujo ::selection{ background-color:var(--c-deep); color:#FFFFFF; }

/* ── 2 · Lo que Tailwind no pinta ─────────────────────────────────────────── */
/* el negro y los grises escritos a mano: las hojas son tenues sobre la tinta, las barras transparentes */
html.suelo-lujo main :is(.bg-\[\#111\], .bg-black):is(.rounded-2xl, .rounded-xl){ background-color:rgba(234,223,206,.028) !important; border-color:rgba(234,223,206,.08) !important; border-radius:16px !important; }
html.suelo-lujo main :is(.bg-black, .bg-\[\#111\]):not(.rounded-2xl):not(.rounded-xl):not(thead){ background-color:transparent !important; }
html.suelo-lujo :is(.bg-\[\#1a1a1a\], .bg-\[\#111\]):is(select, input, button, div.flex):not(.sue-cab *){ background-color:var(--c-campo) !important; }
html.suelo-lujo .bg-black\/40, html.suelo-lujo .bg-black\/50{ background-color:rgba(3,80,95,.5) !important; }
html.suelo-lujo .bg-black\/40:where([data-pz-foto]), html.suelo-lujo .bg-black\/50:where([data-pz-foto]){background-color:rgba(20,29,39,.5) !important}
html.suelo-lujo :is([class^="bg-white/"], [class*=" bg-white/"]):not(#login-screen *):not(.sue-cab *){ background-color:rgba(234,223,206,.05) !important; }
html.suelo-lujo :is([class^="border-white/"], [class*=" border-white/"]){ border-color:var(--c-filete-s) !important; }
html.suelo-lujo :is([class^="divide-white/"], [class*=" divide-white/"]) > * + *{ border-color:rgba(234,223,206,.06) !important; }
/* una sola sombra en el producto, la del modal */
html.suelo-lujo :is(.shadow-sm, .shadow-lg, .shadow-inner, .shadow-2xl, [class*="shadow-["]):not(#login-screen *){ box-shadow:none !important; }
html.suelo-lujo :is(.hover\:scale-105, .hover\:scale-110):hover{ transform:none !important; }
/* la acción es deep con letra blanca (la app la traía en rojo); el peligro sigue en rojo */
html.suelo-lujo :is(main, .modal-container) :is(.bg-red-700, .bg-rose-600, .bg-amber-500):not(.peer-checked\:bg-rose-600){
  background-color:var(--c-deep) !important; color:#FFFFFF !important; border-color:var(--c-deep) !important; }
html.suelo-lujo :is(main, .modal-container) :is(.bg-red-700, .bg-rose-600, .bg-amber-500):hover{ background-color:var(--c-teal) !important; }
html.suelo-lujo #btn-confirm-ok{ background:var(--c-deep) !important; border-color:var(--c-deep) !important; color:#FFFFFF !important; border-radius:99px !important; }
html.suelo-lujo #btn-confirm-ok:hover{ background:var(--c-teal) !important; }
/* los campos: la hoja un paso más clara; el foco con anillo doble */
html.suelo-lujo body input:not(#login-screen *):not([type=checkbox]):not([type=radio]):not(.border-0):not(.bg-transparent),
html.suelo-lujo body textarea:not(#login-screen *):not(.border-0),
html.suelo-lujo body select:not(#login-screen *):not(.border-0){
  background-color:var(--c-campo) !important; color:var(--c-crema) !important; border:1px solid var(--c-filete) !important; }
html.suelo-lujo body input:not(#login-screen *):focus-visible, html.suelo-lujo body textarea:not(#login-screen *):focus-visible,
html.suelo-lujo body select:not(#login-screen *):focus-visible, html.suelo-lujo body button:not(#login-screen *):focus-visible{
  outline:2px solid var(--c-teal) !important; box-shadow:0 0 0 4px rgba(234,223,206,.22) !important; }
html.suelo-lujo select option{ background-color:var(--c-hoja); color:var(--c-crema); }
html.suelo-lujo input::placeholder, html.suelo-lujo textarea::placeholder{ color:rgba(255,255,255,.86) !important; opacity:.75; }
html.suelo-lujo input:where([data-pz-foto])::placeholder, html.suelo-lujo textarea:where([data-pz-foto])::placeholder{color:rgba(234,223,206,.70) !important}
html.suelo-lujo input[type=checkbox], html.suelo-lujo input[type=radio]{ accent-color:var(--c-deep); }
html.suelo-lujo input:disabled{ opacity:.55 !important; }
/* los tonos 300–500 son relleno, nunca letra: sobre tinta se leen en crema */
html.suelo-lujo :is(.text-red-300, .text-red-400, .text-red-500, .text-rose-400, .text-rose-500, .text-amber-300, .text-amber-400, .text-amber-500,
  .text-emerald-400, .text-emerald-500, .text-blue-300, .text-blue-400, .text-sky-400, .text-sky-500, .text-red-200, .text-red-100):not(#login-screen *){ color:var(--c-crema) !important; }
/* el rojo como letra de aviso real (borrar, errores) va en crema con su filete rojo donde lo lleve */
/* al 66 % y no al 62: en el tema teal el generador lo lleva a blanco al 86 % (al 76 % quedaba en 4,3:1 sobre las tarjetas) */
html.suelo-lujo :is(.text-slate-500, .text-slate-600):not(#login-screen *){ color:rgba(255,255,255,.86) !important; }
html.suelo-lujo :is(.text-slate-500, .text-slate-600):not(#login-screen *):where([data-pz-foto]){color:rgba(234,223,206,.66) !important}
html.suelo-lujo :is(.text-slate-400):not(#login-screen *){ color:var(--c-crema70) !important; }
html.suelo-lujo :is(.text-slate-200, .text-slate-300):not(#login-screen *){ color:var(--c-crema) !important; }
html.suelo-lujo .text-white:not(#login-screen *):not(.sue-cab *){ color:#FFFFFF !important; }
/* avisos de producción («Esto escribe en el Toursys de PRODUCCIÓN»): ocre de relleno, letra crema */
html.suelo-lujo .bg-amber-500\/10{ background-color:#352F2B !important; border-color:#8A6A2F !important; color:var(--c-crema) !important; }

/* ── 3 · El login: el cráter del Rincón de la Vieja (la estructura es la de prisma-login.css) ── */
#login-screen{ background:#141D27 url('fotos/wm-1ea044cfb5b0.webp') center 50% / cover no-repeat !important; }
#login-screen > .sue-velo{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(26,38,51,.18) 0%, rgba(26,38,51,.18) 45%, rgba(26,38,51,.45) 100%); pointer-events:none; }
/* el botón: la ceniza, el azufre y la tierra volcánica, que se mueven en diagonal, lento */
html:not(#_):not(#_) .pl-caja[data-pl="suelo"]{ --pl-grad:linear-gradient(160deg, #03505f, #3B444C, #8A6A2F, #5E4228, #3B444C, #03505f);
  --pl-tam:260% 260%; --pl-mov:plOleaje 14s cubic-bezier(.45,0,.55,1) infinite alternate; }
html:not(#_):not(#_) .pl-caja[data-pl="suelo"]:where([data-pz-foto]){--pl-grad:linear-gradient(160deg, #141D27, #3B444C, #8A6A2F, #5E4228, #3B444C, #141D27)}
html:not(#_):not(#_) .pl-caja[data-pl="suelo"] :where([data-pz-foto]){--pl-grad:linear-gradient(160deg, #141D27, #3B444C, #8A6A2F, #5E4228, #3B444C, #141D27)}
/* el crédito de la foto (CC BY 2.0 pide el nombre del autor y el enlace a la licencia) */
.sue-credito{ position:absolute; right:14px; bottom:10px; z-index:11; font-family:var(--c-sans); font-size:10px; letter-spacing:.06em;
  color:rgba(255,255,255,.72); text-decoration:none; text-shadow:0 1px 2px rgba(13,23,32,.8); }
.sue-credito:hover{ color:#FFFFFF; text-decoration:underline; }
/* el aviso de la clave temporal: su ícono en crema */
#login-screen .pl-aviso .material-icons-outlined{ color:#EADFCE !important; }
#login-confirm-icon.text-emerald-500{ color:var(--c-salvia) !important; }

/* ── 4 · El riel ─────────────────────────────────────────────────────────── */
#main-sidebar{ background:var(--c-hondo) !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 .sue-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:not(#ui-lang-switcher){ margin-top:1rem !important; width:100%; max-width:13.5rem; }
#display-user-name{ color:var(--c-crema) !important; font-family:var(--c-sans) !important; max-width:120px !important; }
#main-sidebar nav{ padding:1rem .8rem !important; gap:2px !important; }
#main-sidebar .sue-grupo{ display:flex; align-items:center; gap:.7rem; padding:.2rem .95rem .6rem; font-size:.6rem; letter-spacing:.26em; text-transform:uppercase; color:rgba(255,255,255,.76); }
#main-sidebar .sue-grupo:where([data-pz-foto]){color:rgba(234,223,206,.62)}
#main-sidebar .sue-grupo:not(:first-child){ margin-top:.9rem; }
#main-sidebar .sue-grupo::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;
  background:transparent !important; box-shadow:none !important; font-size:.84rem !important; transition:background-color 120ms linear, color 120ms linear !important; }
.sidebar-link .material-icons-outlined{ color:var(--c-crema70) !important; margin-right:.2rem; font-size:20px; flex:none; }
/* el rótulo en una sola línea: mientras el riel se angosta no se parte, se recorta (y en el angosto el riel lo oculta) */
.sidebar-link > span:not(.material-icons-outlined){ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:left; }
.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 !important; }
#main-sidebar > div:last-of-type{ background:transparent !important; border-top-color:rgba(234,223,206,.10) !important; }
/* la salida vive en la píldora de la persona, como en las demás apps: el ícono en crema, blanco al pasar */
#btn-desconectar{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:99px; border:0; background:transparent;
  color:var(--c-crema70); cursor:pointer; transition:color 120ms linear; }
#btn-desconectar:hover{ color:#FFFFFF; }
/* el traductor del pie: el idioma elegido en deep, como en CAMPO */
.lang-btn{ color:var(--c-crema70) !important; }
.lang-btn.active{ background:var(--c-deep) !important; color:#FFFFFF !important; box-shadow:none !important; }

/* ── 5 · La cabecera de cada vista: una foto de Costa Rica, empotrada como en CIMA ──
   Va a sangre y el contenido sigue debajo sobre la tinta. Las dos capas de foto las pone el
   motor (suelo-viaje.js); el velo es el del libro: tinta arriba para la ceja, limpia al medio y
   45 % abajo. */
.sue-cab{ position:relative; isolation:isolate; overflow:hidden; display:flex !important; flex-direction:row !important; flex-wrap:wrap !important;
  justify-content:space-between !important; align-items:flex-end !important; align-content:flex-end; margin:-2rem -2rem 2rem !important;
  padding:2.2rem 2.25rem 1.7rem !important; border:0; border-radius:0; background:var(--c-hondo); gap:1.2rem 1.5rem !important; width:auto !important; flex-shrink:0; }
.sue-cab__fotos{ position:absolute; inset:0; z-index:-2; display:block; }
.sue-cab__foto{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity .62s cubic-bezier(.22,.9,.24,1); }
.sue-cab__foto.activa{ opacity:1; }
.sue-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%); }
.sue-cab > div:first-of-type{ align-self:flex-end; flex:1 0 auto; max-width:100%; }
.sue-cab h1{ white-space:nowrap !important; 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; padding-bottom:.16em !important; margin-bottom:-.16em !important; }
.sue-cab h1 + p{ margin-top:.55rem !important; font-family:var(--c-sans) !important; font-size:.72rem !important; letter-spacing:.2em !important;
  text-transform:uppercase; color:rgba(255,255,255,.80) !important; }
.sue-cab__ceja{ display:block; margin-bottom:.7rem; white-space:nowrap; font-family:var(--c-sans); font-size:.66rem; letter-spacing:.26em; text-transform:uppercase; color:rgba(255,255,255,.80); }
/* la letra sobre la foto lleva una sombra corta de tinta: se lee igual sobre un lagarto al sol que sobre la selva */
.sue-cab :is(h1, h1 + p, .sue-cab__ceja, .sue-cifra){ text-shadow:0 1px 2px rgba(13,23,32,.55), 0 0 18px rgba(13,23,32,.35); }
.sue-cab > div:last-of-type:not(:first-of-type){ display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:.5rem; flex:none; margin-left:auto; width:auto !important; }
/* las vistas sin acciones (Interruptores y Toursys) tienen un solo bloque: el título, en su lugar.
   Con el id delante, porque el riel común pone en `absolute` al último bloque de la cabecera
   (el de las acciones) y aquí el último es el título. */
html:not(#_) .sue-cab > div:only-of-type{ position:static !important; flex:1 1 auto !important; display:block !important; max-width:none !important;
  overflow:visible !important; min-width:0; }
@media (max-width:1099px){
  html:not(#_) .sue-cab > div:only-of-type{ padding-bottom:0 !important; }
  /* la fila del pie es UNA fila: las acciones que la app trae en columna (los conectores sobre las
     pestañas de Llaves; la tabla sobre «Consultar» en D1) se ponen en fila y se deslizan */
  html:not(#_) .sue-cab > div:last-of-type:not(:only-of-type){ flex-direction:row !important; align-items:center !important; justify-content:safe flex-end !important; }
  /* la de Llaves es larga (dos conectores y tres pestañas): ocupa todo el pie y se desliza desde el principio */
  html:not(#_) #view-mcp > .sue-cab > div:last-of-type{ left:1.1rem !important; max-width:none !important; }
  html:not(#_) .sue-cab > div:last-of-type:not(:only-of-type) > div{ flex-wrap:nowrap !important; }
}
@media (max-width:1099px){
  .sue-cab{ flex-wrap:nowrap !important; }
  .sue-cab > div:first-of-type{ flex:0 0 auto !important; }
  html:not(#_) .sue-cab > div:first-of-type:not(:only-of-type){ padding-bottom:3.6rem !important; }
}
@media (max-width:767px){
  html.suelo-lujo .sue-cab h1{ font-size:1.6rem !important; white-space:normal !important; line-height:1.08 !important; text-wrap:balance; }
}
/* Llaves y Puertos lleva dos renglones de acciones (conectores y pestañas): entre la tableta y el
   escritorio mediano no caben debajo del título dentro de los 200px de la foto, y la ceja se salía
   por arriba. Ahí va todo en un renglón y el subtítulo se parte en dos líneas. (Debajo de 1100 la
   cabecera es la columna del riel común, con las acciones al pie en una fila que se desliza.) */
@media (min-width:1100px) and (max-width:1439px){
  html:not(#_) #view-mcp > .sue-cab{ flex-wrap:nowrap !important; }
  html:not(#_) #view-mcp > .sue-cab > div:first-of-type{ flex:1 1 0 !important; min-width:0; padding-bottom:0 !important; }
  html:not(#_) #view-mcp > .sue-cab h1 + p{ white-space:normal !important; line-height:1.6 !important; max-width:32ch; }
}
/* los botones de la cabecera, como pastillas de vidrio sobre la foto; el principal, deep */
.sue-cab button, .sue-cab select{ border-radius:99px !important; background:rgba(4,100,119,.45) !important; color:#FFFFFF !important;
  border:1px solid rgba(255,255,255,.28) !important; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:none !important;
  padding:0 1.05rem !important; height:2.5rem; width:auto !important; min-width:0 !important; transform:none !important; }
.sue-cab button:where([data-pz-foto]), .sue-cab select:where([data-pz-foto]){background:rgba(26,38,51,.45) !important}
.sue-cab button:hover{ border-color:#FFFFFF !important; background:rgba(4,100,119,.62) !important; }
.sue-cab button:hover:where([data-pz-foto]){background:rgba(26,38,51,.62) !important}
.sue-cab button.sue-principal{ background:var(--c-deep) !important; border-color:var(--c-deep) !important; }
.sue-cab button.sue-principal:hover{ background:var(--c-teal) !important; border-color:var(--c-teal) !important; }
.sue-cab button .material-icons-outlined{ font-size:18px !important; color:inherit !important; }
.sue-cab select option{ background:var(--c-hoja); color:var(--c-crema); }
.sue-cab input{ border-radius:99px !important; background:rgba(4,100,119,.55) !important; color:#FFFFFF !important; border:1px solid rgba(255,255,255,.28) !important; height:2.5rem; }
.sue-cab input:where([data-pz-foto]){background:rgba(26,38,51,.55) !important}
.sue-cab input::placeholder{ color:rgba(255,255,255,.7) !important; }
.sue-cab .material-icons-outlined{ color:rgba(255,255,255,.78) !important; }
.sue-cab > div:last-of-type > .relative{ width:18rem; }
/* la cifra de la vista, como en CIMA: lo más grande de la cabecera (la arma suelo-lujo.js) */
.sue-cab > p.sue-cifra{ display:none !important; color:#FFFFFF; }
@media (min-width:1440px){
  .sue-cab > p.sue-cifra:not([hidden]){ display:flex !important; flex-direction:column; align-items:flex-end; gap:.4rem; align-self:flex-end; flex:none; margin:0 0 0 auto; }
  .sue-cab:has(> .sue-cifra:not([hidden])) > div:last-of-type:not(:first-of-type){ margin-left:2.25rem !important; }
}
.sue-cifra__n{ font-family:var(--c-glare); font-size:4.2rem; line-height:.9; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.sue-cifra__rot{ font-family:var(--c-sans); font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.80); }
/* cada vista usa todo el ancho, alineada con el título */
html.suelo-lujo #main-app .view-section{ padding-top:2rem; }
/* Desde 1100px la foto la pinta la franja fija del riel (de 0 a --alto-cab) y la cabecera es
   `sticky`. Chrome la pega al borde del RELLENO de la vista, no al de su ventana: con los 2rem de
   arriba quedaba 32px más abajo que su foto, y el subtítulo caía en el filo (Luis, 2026-09-29:
   «esto está mal»). Su tope se corre lo mismo que el relleno. */
@media (min-width:1100px){ html.riel-con-banda .sue-cab{ top:-2rem !important; } }

/* ── 6 · Las piezas propias de la app ─────────────────────────────────────── */
/* las tablas, como un libro: cabecera en versalitas sobre la tinta honda, filas tenues */
html.suelo-lujo main table{ font-variant-numeric:tabular-nums; }
html.suelo-lujo :is(main, .modal-container) thead, html.suelo-lujo :is(main, .modal-container) thead tr{ background:var(--c-hondo) !important; box-shadow:none !important; }
html.suelo-lujo :is(main, .modal-container) thead th{ background:var(--c-hondo) !important; color:rgba(255,255,255,.86) !important; font-size:.62rem !important;
  letter-spacing:.16em !important; border-bottom:1px solid rgba(234,223,206,.12) !important; border-right-color:transparent !important; }
html.suelo-lujo :is(main, .modal-container) thead th:where([data-pz-foto]){color:rgba(234,223,206,.70) !important}
html.suelo-lujo :is(main, .modal-container) tbody td{ border-color:rgba(234,223,206,.05) !important; }
html.suelo-lujo :is(main, .modal-container) tbody tr{ transition:background-color 120ms linear; }
html.suelo-lujo :is(main, .modal-container) tbody tr:hover{ background-color:rgba(234,223,206,.03) !important; }
html.suelo-lujo main tbody td[colspan]{ color:var(--c-crema70) !important; }
/* los botones de cada fila: círculos con filete; el de borrar y revocar, con su rojo tenue */
html.suelo-lujo main tbody td button{ width:30px !important; height:30px !important; 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; }
html.suelo-lujo main tbody td button:hover{ border-color:rgba(234,223,206,.55) !important; background:rgba(234,223,206,.06) !important; }
html.suelo-lujo main tbody td button:is(.text-rose-500, .text-slate-500){ background:rgba(179,38,30,.20) !important; border-color:rgba(179,38,30,.55) !important; }
html.suelo-lujo main tbody td button:is(.text-rose-500, .text-slate-500):hover{ background:rgba(179,38,30,.45) !important; }
html.suelo-lujo main tbody td button .material-icons-outlined{ font-size:16px !important; color:inherit !important; }
/* el rol de cada persona: pastilla de contorno tenue */
html.suelo-lujo #users-tbody td span.rounded-full{ background:transparent !important; border:1px solid rgba(234,223,206,.22) !important; color:var(--c-crema) !important; letter-spacing:.1em !important; }
/* los estados con la gramática de CIMA: activa en salvia, revocada/neutra en contorno, denegado en rojo */
html:not(#_).suelo-lujo :is(main, .modal-container) tbody span.rounded:is(.bg-emerald-500\/20, .bg-emerald-500\/15){ background:#7D9B5B !important; border-color:#7D9B5B !important;
  color:#1A2633 !important; border-radius:99px !important; letter-spacing:.1em !important; padding:.22rem .7rem !important; }
html:not(#_).suelo-lujo :is(main, .modal-container) tbody span.rounded.bg-white\/5{ background:transparent !important; border:1px solid rgba(234,223,206,.22) !important;
  color:var(--c-crema) !important; border-radius:99px !important; letter-spacing:.1em !important; padding:.22rem .7rem !important; }
html:not(#_).suelo-lujo :is(main, .modal-container) tbody span.rounded.bg-rose-500\/20{ background:#B3261E !important; border-color:#B3261E !important; color:#FFFFFF !important;
  border-radius:99px !important; letter-spacing:.1em !important; padding:.22rem .7rem !important; }
/* los segmentos (Llaves/Puertos/Bitácora, los dos conectores, las pestañas de Toursys y del perfil):
   el segmento de CIMA, un contorno con las opciones adentro y la elegida en deep de relleno */
html:not(#_).suelo-lujo :is(.mcp-tab, .mcp-con, .toursys-tab-btn, .user-tab){ border:0 !important; border-radius:99px !important; box-shadow:none !important;
  background:transparent !important; color:var(--c-crema70) !important; padding:.42rem .95rem !important; font-size:.74rem !important; letter-spacing:.02em !important;
  text-transform:none !important; transition:background-color 120ms linear, color 120ms linear !important; }
html:not(#_).suelo-lujo :is(.mcp-tab, .mcp-con, .toursys-tab-btn, .user-tab):hover{ background:rgba(234,223,206,.06) !important; color:var(--c-crema) !important; }
html:not(#_).suelo-lujo :is(.mcp-tab.active, .mcp-con.active, .toursys-tab-btn.active, .user-tab.text-white){ background:var(--c-deep) !important; color:#FFFFFF !important; }
html:not(#_).suelo-lujo :is(.mcp-tab, .mcp-con, .toursys-tab-btn, .user-tab) .material-icons-outlined{ color:inherit !important; }
html:not(#_).suelo-lujo .sue-segmento{ display:inline-flex !important; gap:2px !important; padding:3px !important; background:transparent !important;
  border:1px solid var(--c-filete) !important; border-radius:99px !important; flex-wrap:wrap; }
html:not(#_).suelo-lujo .sue-cab .sue-segmento{ background:rgba(4,100,119,.45) !important; border-color:rgba(255,255,255,.28) !important;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
html:not(#_).suelo-lujo .sue-cab .sue-segmento:where([data-pz-foto]){background:rgba(26,38,51,.45) !important}
html:not(#_).suelo-lujo .sue-cab :is(.mcp-tab, .mcp-con){ height:auto; color:rgba(255,255,255,.85) !important; }
html:not(#_).suelo-lujo .sue-cab :is(.mcp-tab.active, .mcp-con.active){ background:var(--c-deep) !important; color:#FFFFFF !important; }
/* el interruptor del entorno: apagado en tinta con filete, prendido (producción) en rojo de relleno */
html.suelo-lujo #toggle-powerapps + div{ background-color:rgba(234,223,206,.16) !important; border:1px solid var(--c-filete); }
html.suelo-lujo #toggle-powerapps:checked + div{ background-color:#B3261E !important; }
/* el filete de color de cada tarjeta de Interruptores: deep, rojo u ocre, como relleno fino */
html.suelo-lujo #view-config .absolute.w-1.bg-blue-500{ background:var(--c-teal) !important; }
html.suelo-lujo #view-config .absolute.w-1:is(.bg-rose-600){ background:#B3261E !important; }
html.suelo-lujo #view-config .absolute.w-1.bg-amber-500{ background:#8A6A2F !important; }
html.suelo-lujo #view-config h3{ font-family:var(--c-glare) !important; font-size:1.2rem !important; color:#FFFFFF !important; }
/* el estado de cada dirección de app: configurada en salvia, falta en contorno ocre rayado */
html.suelo-lujo [data-estado-url]{ width:auto !important; min-width:6.5rem; border-radius:99px; padding:.22rem .7rem; letter-spacing:.1em !important; }
html:not(#_):not(#_).suelo-lujo [data-estado-url][data-ok="1"]{ background:#7D9B5B; color:#1A2633 !important; }
html.suelo-lujo [data-estado-url][data-ok="0"]{ color:#EADFCE !important; box-shadow:inset 0 0 0 1px #8A6A2F;
  background-image:repeating-linear-gradient(135deg, rgba(138,106,47,.30) 0 4px, transparent 4px 8px); }
/* los rótulos de las cifras (sin negrita, en versalitas finas) */
html.suelo-lujo :is(.text-\[8px\], .text-\[9px\]).uppercase{ letter-spacing:.16em !important; }
/* la inspección de D1: cada celda editable al pasar, con el foco en teal */
html.suelo-lujo .db-cell:hover{ background:rgba(234,223,206,.05); }
html.suelo-lujo .db-cell:focus-within{ background:rgba(0,109,130,.18); box-shadow:inset 0 0 0 1px var(--c-teal); }
html.suelo-lujo #db-table-container th{ background:var(--c-hondo) !important; color:rgba(255,255,255,.86) !important; }
html.suelo-lujo #db-table-container th:where([data-pz-foto]){color:rgba(234,223,206,.70) !important}
html.suelo-lujo #db-table-container td:first-child{ background:rgba(234,223,206,.03) !important; }
html.suelo-lujo #db-table-container tbody tr:hover{ background:rgba(0,109,130,.12) !important; }
html.suelo-lujo #db-table-container td input{ background:var(--c-hoja) !important; color:#FFFFFF !important; border-color:var(--c-teal) !important; }
/* el aviso de «doble clic para editar»: contorno ocre rayado */
html.suelo-lujo #view-db .text-amber-500.border{ background:transparent !important; box-shadow:inset 0 0 0 1px #8A6A2F; border:0 !important; border-radius:99px !important;
  color:#EADFCE !important; background-image:repeating-linear-gradient(135deg, rgba(138,106,47,.30) 0 4px, transparent 4px 8px) !important; }
/* los paginadores y los botones secundarios: pastillas */
html.suelo-lujo main :is(button.rounded-xl, button.rounded-lg){ border-radius:99px !important; }
html.suelo-lujo main button:disabled{ opacity:.35 !important; }
/* la llave nueva: una hoja salvia tenue */
html.suelo-lujo #mcp-llave-nueva{ background:rgba(125,155,91,.14) !important; border-color:rgba(125,155,91,.55) !important; }
html.suelo-lujo #mcp-llave-valor{ background:var(--c-hondo) !important; color:#FFFFFF !important; }
/* los grupos de puertos: la escritura, con su filete rojo */
html.suelo-lujo #mcp-puertos-lista h3{ font-family:var(--c-sans) !important; font-size:.62rem !important; letter-spacing:.2em !important; color:var(--c-crema70) !important; }

/* los modales: una hoja con el título en Marcellus, el ícono en su disco deep */
html.suelo-lujo .modal-container{ background:rgba(3,80,95,.78) !important; }
html.suelo-lujo .modal-container:where([data-pz-foto]){background:rgba(20,29,39,.78) !important}
html.suelo-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; }
html.suelo-lujo .modal-container > div > :first-child{ background:transparent !important; border-bottom:1px solid var(--c-filete) !important; }
html.suelo-lujo .modal-container > div > :last-child:not(.modal-body-scroll){ background:transparent !important; border-top-color:var(--c-filete) !important; }
html.suelo-lujo .modal-container h3{ font-family:var(--c-glare) !important; font-size:1.35rem !important; text-transform:none !important; letter-spacing:.005em !important; color:#FFFFFF !important; }
html:not(#_) .sue-modal-icono{ width:40px !important; height:40px !important; flex:none; display:inline-flex !important; align-items:center; justify-content:center;
  border-radius:99px !important; background:var(--c-deep) !important; color:#FFFFFF !important; font-size:20px !important; }
html.suelo-lujo .modal-container > div > :first-child button:has(> .material-icons-outlined:only-child){ 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.suelo-lujo .modal-container > div > :first-child button:hover{ border-color:rgba(234,223,206,.55) !important; }
html.suelo-lujo .modal-container button.rounded-xl{ border-radius:99px !important; }
html.suelo-lujo .modal-container label.rounded-xl:hover{ border-color:rgba(234,223,206,.30) !important; }
/* la confirmación */
html.suelo-lujo #confirmation-content{ background:var(--c-hoja) !important; border:1px solid var(--c-filete) !important; border-radius:14px !important; box-shadow:var(--c-sombra) !important; }
html.suelo-lujo #confirmation-content > div:first-child{ background:transparent !important; border-bottom:1px solid var(--c-filete) !important; }
html.suelo-lujo #confirmation-content > div:last-child{ background:transparent !important; border-top-color:var(--c-filete) !important; }
html.suelo-lujo #btn-confirm-cancel{ border:1px solid var(--c-filete) !important; color:var(--c-crema) !important; border-radius:99px !important; }
html.suelo-lujo #confirmation-message .text-5xl{ color:var(--c-crema70) !important; }
html.suelo-lujo #confirmation-message .text-lg{ font-family:var(--c-glare) !important; font-size:1.3rem !important; }

/* la carga: sólo la estrella que gira, con su sombra de tinta; la pantalla no se lava */
#loader{ background:transparent !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
#loader .sue-carga{ width:72px; height:72px; animation:sueGira 4s linear infinite;
  filter:drop-shadow(0 2px 5px rgba(13,23,32,.85)) drop-shadow(0 0 16px rgba(13,23,32,.55)); }
@keyframes sueGira{ to{ transform:rotate(360deg); } }
/* el aviso flotante */
html.suelo-lujo #toast{ border-radius:99px !important; background:var(--c-hoja) !important; color:var(--c-crema) !important; border:1px solid var(--c-filete) !important;
  box-shadow:var(--c-sombra) !important; }
html.suelo-lujo #toast.sue-ok{ border-color:#7D9B5B !important; }
html.suelo-lujo #toast.sue-mal{ background:#3A2429 !important; border-color:rgba(179,38,30,.70) !important; }
html.suelo-lujo #toast-icon{ color:inherit !important; }

/* ── 6b · El pase de lujo: la persona, las opciones, las casillas ───────────── */
/* la persona en la Matriz: sus iniciales en un disco deep, como el sello de una ficha */
.sue-persona{ display:flex; align-items:center; gap:.8rem; min-width:0; }
.sue-inicial{ flex:none; width:34px; height:34px; border-radius:99px; display:inline-flex; align-items:center; justify-content:center; background:var(--c-deep);
  color:#FFFFFF; font-family:var(--c-glare); font-size:.78rem; letter-spacing:.08em; box-shadow:inset 0 0 0 1px rgba(234,223,206,.20); }
/* el modal de la persona: las pestañas sobre la hoja (venían en una franja negra) */
html.suelo-lujo .modal-container > div > .bg-black{ background:transparent !important; border-bottom-color:var(--c-filete) !important; }
/* cada opción es una hoja con filete; marcada, se tiñe de deep */
.sue-opcion{ display:flex; align-items:center; gap:.85rem; padding:.8rem 1rem; border-radius:14px; border:1px solid var(--c-filete-s); background:rgba(234,223,206,.03);
  cursor:pointer; transition:border-color 140ms linear, background-color 140ms linear; }
.sue-opcion:hover{ border-color:rgba(234,223,206,.30); }
.sue-opcion:has(.sue-casilla:checked){ border-color:rgba(0,109,130,.80); background:rgba(0,109,130,.24); }
.sue-opcion:has(.sue-casilla:checked):where([data-pz-foto]){background:rgba(0,85,101,.24)}
/* la app con su nombre PRISMA en Marcellus y su oficio debajo, en ceja */
.sue-app{ display:flex; flex-direction:column; gap:.2rem; line-height:1.1; }
.sue-app > b{ font-family:var(--c-glare); font-size:1.02rem; letter-spacing:.07em; color:#FFFFFF; }
.sue-app > span{ font-size:.57rem; letter-spacing:.2em; text-transform:uppercase; color:var(--c-crema70); }
.sue-opcion__titulo{ font-size:.8rem; color:var(--c-crema); }
.sue-opcion__nota{ margin-top:.2rem; font-size:.66rem; line-height:1.4; color:rgba(255,255,255,.86); }
.sue-opcion__nota:where([data-pz-foto]){color:rgba(234,223,206,.66)}
/* la casilla: redonda, con filete crema; marcada, un disco deep con su palomita que aparece */
html.suelo-lujo :is(input.sue-casilla, #user-modal input[type=checkbox]){ -webkit-appearance:none; appearance:none; flex:none; width:20px; height:20px; margin:0;
  border-radius:99px; border:1.5px solid rgba(234,223,206,.48); background:transparent; cursor:pointer; display:inline-grid; place-content:center;
  transition:background-color 120ms linear, border-color 120ms linear; }
html.suelo-lujo :is(input.sue-casilla, #user-modal input[type=checkbox])::before{ content:""; width:9px; height:5px; border-left:2px solid #FFFFFF;
  border-bottom:2px solid #FFFFFF; transform:translateY(-1px) rotate(-45deg) scale(0); transition:transform 160ms cubic-bezier(.2,.8,.2,1); }
html.suelo-lujo :is(input.sue-casilla, #user-modal input[type=checkbox]):hover{ border-color:rgba(234,223,206,.80); }
html.suelo-lujo :is(input.sue-casilla, #user-modal input[type=checkbox]):checked{ background:var(--c-deep); border-color:var(--c-deep); }
html.suelo-lujo :is(input.sue-casilla, #user-modal input[type=checkbox]):checked::before{ transform:translateY(-1px) rotate(-45deg) scale(1); }
html.suelo-lujo :is(input.sue-casilla, #user-modal input[type=checkbox]):focus-visible{ outline:2px solid var(--c-teal); outline-offset:2px; }
/* Interruptores: la franja del entorno se acuesta arriba de su tarjeta (pruebas en salvia, producción en rojo) */
html.suelo-lujo #decor-powerapps{ inset:0 0 auto 0 !important; width:auto !important; height:2px !important; }
html.suelo-lujo #decor-powerapps.bg-blue-500{ background:var(--c-salvia) !important; }
html.suelo-lujo #decor-powerapps.bg-rose-600{ background:#B3261E !important; }
/* la llave revocada no se apaga a medias (quedaba en 2:1): va entera, con la letra secundaria y su filete REVOCADA */
html.suelo-lujo #mcp-llaves-tbody > tr.opacity-40{ opacity:1 !important; }
html:not(#_):not(#_).suelo-lujo #mcp-llaves-tbody > tr.opacity-40 > td{ color:rgba(255,255,255,.86) !important; }
html:not(#_):not(#_).suelo-lujo #mcp-llaves-tbody > tr.opacity-40 > td:where([data-pz-foto]){color:rgba(234,223,206,.66) !important}
/* el visor D1 sin tabla: una línea en Marcellus */
.sue-vacio{ font-family:var(--c-glare); font-size:1.2rem; letter-spacing:.01em; color:var(--c-crema70); }

/* En el celular el selector de tabla de D1 se acorta para que «Consultar» quede entero en la fila del pie. */
@media (max-width:767px){
  html:not(#_) .sue-cab > div:last-of-type select{ max-width:46vw !important; }
}

/* ── 7 · El celular: las tablas son fichas ─────────────────────────────────── */
@media (max-width:767px){
  /* el botón del menú, arriba a la izquierda y de 42px, como en CAMPO, RAÍCES y CEIBA (en tableta lo pone el riel) */
  #mobile-menu-toggle{ top:1rem !important; left:1rem !important; right:auto !important; bottom:auto !important; width:42px !important; height:42px !important; }
  .sue-cab{ margin:-2rem -1rem 1.3rem !important; }
  html.suelo-lujo .sue-cab > div:last-of-type:not(:first-of-type) > button:not(.sue-segmento *){ font-size:0 !important; gap:0 !important; width:42px !important;
    height:42px !important; padding:0 !important; justify-content:center; }
  html.suelo-lujo .sue-cab > div:last-of-type:not(:first-of-type) > button .material-icons-outlined{ font-size:18px !important; margin:0 !important; }
  .sue-cab > div:last-of-type > .relative{ width:52vw !important; flex:0 1 auto; }
  html.suelo-lujo #main-app .view-section.h-full{ height:auto !important; min-height:100%; }
  html.suelo-lujo #main-app .overflow-hidden:has(table.sue-fichas), html.suelo-lujo #main-app .overflow-x-auto:has(> table.sue-fichas){ overflow:visible !important; }
  table.sue-fichas thead{ display:none; }
  table.sue-fichas, table.sue-fichas tbody{ display:block; width:100%; }
  table.sue-fichas tr{ display:grid; grid-template-columns:1fr 1fr; gap:.55rem .9rem; padding:.9rem 1rem; border-bottom:1px solid var(--c-filete-s); }
  table.sue-fichas td{ display:block; padding:0 !important; border:0 !important; min-width:0; overflow-wrap:anywhere; white-space:normal !important; text-align:left !important; }
  table.sue-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.sue-fichas td:first-child{ grid-column:1 / -1; font-size:.95rem; color:#FFFFFF; }
  table.sue-fichas td:first-child::before, table.sue-fichas td[data-rotulo=""]::before{ display:none; }
  table.sue-fichas td > div{ justify-content:flex-start !important; }
  table.sue-fichas td[colspan]{ grid-column:1 / -1; }
}
@media (prefers-reduced-motion:reduce){ .sue-cab__foto{ transition:none !important; } #loader .sue-carga{ animation:none !important; } }

/* ── 8 · Las barras de desplazamiento: finas, redondas, sin flechas ─────────── */
html.suelo-lujo ::-webkit-scrollbar{ width:10px; height:10px; background:transparent; }
html.suelo-lujo ::-webkit-scrollbar-track, html.suelo-lujo ::-webkit-scrollbar-corner{ background:transparent; }
html.suelo-lujo ::-webkit-scrollbar-thumb{ background-color:rgba(234,223,206,.20); border-radius:99px; border:3px solid transparent; background-clip:padding-box; }
html.suelo-lujo ::-webkit-scrollbar-thumb:hover{ background-color:rgba(234,223,206,.38); }
html.suelo-lujo ::-webkit-scrollbar-button{ display:none; width:0; height:0; }
html.suelo-lujo textarea{ resize:vertical; }