/* GENERADO por 5 herramientas/generar-tema-teal.py desde prisma-riel.css — NO SE EDITA A MANO.
   Es la misma hoja con la tinta cambiada por teal (14 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. */
/* ═══════════════════════════════════════════════════════════════════════════
   PRISMA · EL RIEL DE LA CASA — TRES MODOS (2026-09-22)
   ───────────────────────────────────────────────────────────────────────────
   El mismo menú de CIMA para todas las apps con riel lateral (Luis: «que todos los sistemas
   tengan el mismo menú; esto aplica a las que tienen menú lateral —fuera ARIA y CEPAS, que
   tienen otra estructura—»). Tres modos:
     · ABIERTO  (288 px) — identidad arriba, rótulos y contadores.
     · ANGOSTO  (76 px)  — sólo íconos en baldosas de 44 px; el nombre lo dice el globo.
     · OCULTO   (0)      — todo el ancho para el trabajo; vuelve con el botón flotante.
   En pantallas medianas (768–1099 px) el riel es un cajón, y en el celular también: ahí los
   tres modos no aplican. Ver prisma-riel.js. El original vive en accesos/ y se copia tal cual.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Los tres botones ───────────────────────────────────────────────────── */
#riel-colapsar, #riel-ocultar, #riel-mostrar{ display:none; align-items:center; justify-content:center; border-radius:99px; cursor:pointer;
  color:#FFFFFF; transition:border-color 120ms linear, background-color 120ms linear; }
#riel-colapsar, #riel-ocultar{ position:absolute; top:.75rem; z-index:5; width:30px; height:30px;
  background:rgba(13,23,32,.62); border:1px solid rgba(234,223,206,.34); box-shadow:0 8px 20px -12px rgba(13,23,32,.9); }
#riel-ocultar{ left:.75rem; }
#riel-colapsar{ right:.75rem; }
#riel-colapsar:hover, #riel-ocultar:hover{ border-color:#EADFCE; background:rgba(13,23,32,.78); }
#riel-colapsar .material-icons-outlined, #riel-ocultar .material-icons-outlined{ font-size:17px; color:#FFFFFF; }
#riel-mostrar{ position:fixed; top:1rem; left:1rem; z-index:60; width:42px; height:42px; background:rgba(13,23,32,.58);
  border:1px solid rgba(255,255,255,.40); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
#riel-mostrar:hover{ background:#006d82; border-color:#006d82; }
#riel-mostrar:hover[data-pz-foto]{background:#005565;border-color:#005565}
#riel-mostrar .material-icons-outlined{ font-size:20px; color:#FFFFFF; }

/* ── El globo del modo angosto ──────────────────────────────────────────── */
#riel-globo{ position:fixed; z-index:200; pointer-events:none; background:#16242F; color:#FFFFFF;
  border:1px solid rgba(234,223,206,.22); padding:.42rem .72rem; border-radius:.55rem;
  font-size:.76rem; white-space:nowrap; box-shadow:0 10px 26px rgba(0,0,0,.45);
  opacity:0; transform:translateX(-6px); transition:opacity .16s ease, transform .16s ease; }
#riel-globo.visible{ opacity:1; transform:translateX(0); }
#riel-globo::before{ content:''; position:absolute; left:-5px; top:50%; margin-top:-5px;
  border:5px solid transparent; border-right-color:#16242F; }

@media (min-width:1100px){
  #riel-colapsar, #riel-ocultar{ display:flex; }
  #main-sidebar > div:first-child{ padding-top:3.3rem !important; }   /* aire para los botones, que no pisen el logo */

  /* El viaje entre modos es una animación, no un brinco: el ancho con la curva de la casa,
     la forma de cada baldosa acompañando, y lo que aparece, fundido. */
  #main-sidebar{ transition:width .42s cubic-bezier(.22,.9,.24,1) !important; }
  #main-sidebar .sidebar-link{ transition:width .42s cubic-bezier(.22,.9,.24,1), height .42s cubic-bezier(.22,.9,.24,1),
    padding .42s cubic-bezier(.22,.9,.24,1), border-radius .42s cubic-bezier(.22,.9,.24,1),
    background-color 120ms linear, color 120ms linear !important; }
  @keyframes rielFundir{ from{ opacity:0; } to{ opacity:1; } }
  body.riel-transicion #main-sidebar h2, body.riel-transicion #main-sidebar .user-glass-pill,
  body.riel-transicion #main-sidebar .sidebar-link > span:not(.material-icons-outlined),
  body.riel-transicion #main-sidebar .sidebar-section-label, body.riel-transicion #main-sidebar .viv-grupo,
  body.riel-transicion #main-sidebar .gol-grupo,
  body.riel-transicion #main-sidebar > div:last-of-type{ animation:rielFundir .38s .08s cubic-bezier(.22,.9,.24,1) both; }

  /* ── ANGOSTO: sólo los íconos ─────────────────────────────────────────── */
  body.riel-angosto #main-sidebar{ width:76px !important; min-width:76px !important; max-width:76px !important; }
  body.riel-angosto #riel-colapsar{ left:50% !important; right:auto !important; top:10px !important;
    transform:translateX(-50%) !important; }
  body.riel-angosto #main-sidebar > div:first-child{ padding:3.35rem .5rem .7rem !important; }
  /* En 76 px el logotipo no se lee: en su lugar va la estrella de la marca, como en CIMA. */
  body.riel-angosto #main-sidebar > div:first-child img{ display:none !important; }
  body.riel-angosto #main-sidebar > div:first-child::after{ content:""; display:block; width:32px; height:32px;
    flex:none; margin:0 auto; background:url('marca/estrella-clara.png') no-repeat center center / contain; opacity:.95; }
  body.riel-angosto #main-sidebar h2, body.riel-angosto #main-sidebar #user-pill,
  body.riel-angosto #main-sidebar .user-glass-pill,
  body.riel-angosto #main-sidebar > div:last-of-type{ display:none !important; }
  body.riel-angosto #main-sidebar nav{ padding-left:0 !important; padding-right:0 !important; align-items:center; }
  body.riel-angosto #main-sidebar .sidebar-link{ width:44px !important; height:44px !important; flex:none !important;
    padding:0 !important; border-radius:13px !important; justify-content:center; border-left:0 !important; margin:0 auto 2px !important; }
  body.riel-angosto #main-sidebar .sidebar-link > span:not(.material-icons-outlined){ display:none !important; }
  body.riel-angosto #main-sidebar .sidebar-link .material-icons-outlined{ margin:0 !important; font-size:20px !important; }
  body.riel-angosto #main-sidebar .sidebar-link.active{ background:#006d82 !important; color:#FFFFFF !important;
    box-shadow:none !important; border-left-color:transparent !important; }
body.riel-angosto #main-sidebar .sidebar-link.active[data-pz-foto]{background:#005565 !important}
  /* en vez del rótulo del grupo, un filete corto entre grupos */
  body.riel-angosto #main-sidebar .sidebar-section-label, body.riel-angosto #main-sidebar .viv-grupo,
  body.riel-angosto #main-sidebar .gol-grupo{ font-size:0 !important; padding:0 !important; border:0 !important;
    width:24px; height:1px; flex:none !important; margin:.6rem auto !important; background:rgba(234,223,206,.18); }
  body.riel-angosto #main-sidebar .sidebar-section-label::after, body.riel-angosto #main-sidebar .viv-grupo::after,
  body.riel-angosto #main-sidebar .gol-grupo::after{ display:none !important; }
  /* ocultar el panel entero sólo existe con el riel abierto: en el angosto no cabe sin pisar algo */
  body.riel-angosto #riel-ocultar{ display:none !important; }

  /* ── OCULTO: sin riel ─────────────────────────────────────────────────── */
  body.riel-oculto #main-sidebar{ display:none !important; }
  body.riel-oculto #riel-mostrar{ display:flex; }
  /* el título de cada vista se corre para que el botón flotante no lo pise */
  body.riel-oculto .viv-cab, body.riel-oculto .gol-cab{ padding-left:4.6rem !important; }
}

/* Pantallas medianas: el riel pasa a cajón y los tres modos no aplican */
@media (min-width:768px) and (max-width:1099px){
  #main-sidebar{ position:fixed !important; top:0 !important; bottom:0 !important; left:0 !important; z-index:200 !important;
    transform:translateX(-100%) !important; transition:transform .3s cubic-bezier(.22,.9,.24,1) !important; }
  #main-sidebar:not(.-translate-x-full){ transform:none !important; box-shadow:0 30px 70px -18px rgba(4,100,119,.62) !important; }
#main-sidebar:not(.-translate-x-full)[data-pz-foto]{box-shadow:0 30px 70px -18px rgba(26,38,51,.62) !important}
  #mobile-menu-toggle{ display:flex !important; top:1rem !important; left:1rem !important; right:auto !important; width:42px !important; height:42px !important; }
  #mobile-sidebar-overlay:not(.hidden){ display:block !important; opacity:1 !important; }
  #main-sidebar > div:first-child{ padding-top:4.6rem !important; }
  .viv-cab, .gol-cab{ padding-top:4.4rem !important; }
}
@media (max-width:1099px){
  #riel-colapsar, #riel-ocultar, #riel-mostrar, #riel-globo{ display:none !important; }
  body.riel-angosto #main-sidebar{ width:18rem !important; }
}

@media (prefers-reduced-motion:reduce){
  #main-sidebar, #main-sidebar .sidebar-link{ transition:none !important; }
  body.riel-transicion *{ animation:none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LA FOTO A SANGRE, POR DETRÁS DEL RIEL (como en CIMA) — Luis, 2026-09-22
   ───────────────────────────────────────────────────────────────────────────
   La cabecera de cada vista ya trae su foto; el riel la cortaba. Ahora esa foto se refleja
   en una banda que cruza la pantalla de borde a borde y queda POR DEBAJO del menú: en esa
   franja el riel es transparente, así que la foto pasa por detrás del logo y del nombre, y
   la tinta del menú empieza EXACTAMENTE donde termina la foto. Una sombra a la izquierda
   deja notar que el panel está ahí, sin desenfocar nada. La cabecera de la app se queda
   arriba (sticky) para que las dos mitades no se desalineen al desplazar.
   ═══════════════════════════════════════════════════════════════════════════ */
#riel-banda{ display:none; }
.riel-banda__foto{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0;
  transform:scale(1.04); transition:opacity 1.2s cubic-bezier(.22,.9,.24,1), transform 10s linear; }
.riel-banda__foto.activa{ opacity:1; transform:scale(1); }
.riel-banda__velo{ position:absolute; inset:0; 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%); }

@media (min-width:1100px){
  /* La banda va POR ENCIMA del contenido —que se desliza por debajo, como en CIMA— y por
     debajo del texto de la cabecera y del riel. Sin esto, al desplazar, las filas de la tabla
     se veían a través de la cabecera (Luis, 2026-09-22: «hay un error, revisá bien»). */
  html.riel-con-banda #riel-banda{ display:block; position:fixed; top:0; left:0; right:0; height:var(--alto-cab,200px);
    z-index:40; overflow:hidden; pointer-events:none; background-color:#141D27; }
  /* la sombra de la izquierda: fondo para el logo, sin tocar la nitidez de la foto */
  html.riel-con-banda #riel-banda::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(90deg, rgba(20,29,39,.78) 0, rgba(20,29,39,.52) 190px, rgba(20,29,39,.18) 330px, rgba(20,29,39,0) 480px); }
  /* el filete de luz que cierra la franja, de borde a borde */
  html.riel-con-banda #riel-banda::before{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; z-index:2;
    background:linear-gradient(90deg, rgba(234,223,206,.30), rgba(234,223,206,.10) 45%, rgba(234,223,206,.26)); }

  /* La cabecera de la app: su foto la pone la banda, y ella se queda arriba con su texto. */
  html.riel-con-banda .viv-cab, html.riel-con-banda .gol-cab{ position:sticky !important; top:0; z-index:50;
    background:transparent !important; margin-bottom:2rem !important; }
  html.riel-con-banda .viv-cab__foto, html.riel-con-banda .gol-cab__foto,
  html.riel-con-banda .viv-cab__velo, html.riel-con-banda .gol-cab__velo{ display:none !important; }


  /* El riel: transparente en la franja, tinta sólida debajo, con su canto y su sombra. */
  html.riel-con-banda #main-sidebar{ background-color:transparent !important; border-right-color:transparent !important;
    background-image:linear-gradient(180deg, rgba(3,80,95,0) 0, rgba(3,80,95,0) var(--alto-cab), #03505f var(--alto-cab)) !important;
    box-shadow:10px 0 26px -10px rgba(13,23,32,.85), 1px 0 0 rgba(234,223,206,.12) !important; }
html.riel-con-banda #main-sidebar[data-pz-foto]{background-image:linear-gradient(180deg, rgba(20,29,39,0) 0, rgba(20,29,39,0) var(--alto-cab), #141D27 var(--alto-cab)) !important}
  html.riel-con-banda #main-sidebar::before, html.riel-con-banda #main-sidebar::after{
    -webkit-mask-image:linear-gradient(180deg, transparent 0, transparent var(--alto-cab), #000 calc(var(--alto-cab) + 56px));
            mask-image:linear-gradient(180deg, transparent 0, transparent var(--alto-cab), #000 calc(var(--alto-cab) + 56px)); }
  /* la identidad vive DENTRO de la franja y termina justo en la línea */
  html.riel-con-banda #main-sidebar > div:first-child{ height:var(--alto-cab); display:flex; flex-direction:column;
    justify-content:center; padding:3.2rem 1.25rem 1rem !important; border-bottom:0 !important; }
  html.riel-con-banda #main-sidebar > div:first-child > div:first-child{ display:none; }   /* el halo borroso sobra sobre la foto */
  html.riel-con-banda #main-sidebar h2{ text-shadow:0 1px 2px rgba(13,23,32,.55), 0 10px 30px rgba(13,23,32,.45) !important; }
  html.riel-con-banda #main-sidebar > div:first-child img{ filter:drop-shadow(0 2px 7px rgba(13,23,32,.7)) !important; }
  /* El nombre del usuario, en blanco sobre la foto. El vestido de la pastilla va más abajo,
     fuera de este bloque, porque vale a cualquier ancho. */
  html.riel-con-banda #main-sidebar .user-glass-pill span{ color:#FFFFFF !important; }

  /* Angosto: la identidad sigue dentro de la franja (la estrella en vez del logotipo), y sus
     piezas caen en la MISMA posición exacta que en CIMA (Luis, 2026-09-22: «la flecha de
     expandir y la estrella deben estar en la misma posición exacta en todas las apps»):
     la flecha a 10 px del borde y la estrella a 54 px, centradas las dos. */
  html.riel-con-banda body.riel-angosto #main-sidebar > div:first-child{ height:var(--alto-cab);
    padding:54px .5rem 1.1rem !important; justify-content:flex-start !important; }
}

/* ── TODO LO QUE VA SOBRE LA FOTO SE LEE SOBRE CUALQUIER FOTO ───────────────────────────
   Luis, 2026-09-22: «en VIVERO y GOLFITO debe hacerse lo mismo de darle más contraste a los
   textos de los encabezados». El velo del libro no se toca —sigue entre 0 y 45 %—: lo que se
   refuerza es la letra, con una sombra corta que la despega de la imagen. La hereda todo el
   texto de la cabecera; los botones y campos, que ya tienen su propio fondo, la devuelven. */
.viv-cab, .gol-cab{ text-shadow:0 1px 2px rgba(13,23,32,.55), 0 10px 30px rgba(13,23,32,.45); }
.viv-cab button, .gol-cab button, .viv-cab select, .gol-cab select, .viv-cab input, .gol-cab input,
.viv-cab a.px-4, .gol-cab a.px-4, .viv-cab .etq, .gol-cab .etq{ text-shadow:none !important; }
#main-sidebar > div:first-child h2{ text-shadow:0 1px 2px rgba(13,23,32,.55), 0 10px 30px rgba(13,23,32,.45); }
#main-sidebar > div:first-child img{ filter:drop-shadow(0 2px 7px rgba(13,23,32,.7)); }

/* ── UNA SOLA ALTURA DE FOTO PARA TODAS LAS APPS (Luis, 2026-09-22) ─────────────────────
   «Bajale un poquito la altura de la imagen en VIVERO y que sea exactamente igual en todas
   las apps.» 200 px, el mismo número en CIMA, VIVERO y Golfito. */
/* La misma escalera de alturas en todas las apps, a cualquier tamaño de pantalla (Luis,
   2026-09-22: «deben ser milimétricamente igual… pero varía si la pantalla es más pequeña»).
   Un solo número, declarado una sola vez: 200 px de tableta para arriba, 176 en el celular.
   El contenido de la cabecera se apoya abajo, así que el alto fijo no le quita nada. */
:root{ --alto-foto:200px; }
@media (max-width:767px){ :root{ --alto-foto:176px; } }
.viv-cab, .gol-cab{ min-height:var(--alto-foto) !important; }
@media (min-width:768px){ .viv-cab, .gol-cab{ height:var(--alto-foto) !important; } }
/* ── LOS ENCABEZADOS DEL CELULAR: TODOS DEL MISMO ALTO (Luis, 2026-09-22) ───────────────
   «La altura de la imagen tiene que ser igual en absolutamente todas las secciones.» En el
   celular la cabecera también mide la franja: el título abajo a la izquierda y los botones
   al pie, en una sola fila que se desliza si hace falta. */
@media (max-width:1099px){
  /* En el celular la cabecera es una columna: lo que la apoya abajo es `justify-content`, no
     `align-items` —por eso el antetítulo se iba arriba y chocaba con el botón del menú. */
  .viv-cab, .gol-cab{ position:relative; height:var(--alto-foto) !important; min-height:var(--alto-foto) !important;
    overflow:hidden !important; padding:1rem 1.1rem .95rem !important;
    flex-direction:column !important; justify-content:flex-end !important; align-items:stretch !important; }
  .viv-cab h1, .gol-cab h1{ font-size:2rem !important; }
  .viv-cab h1 + p, .gol-cab h1 + p, .viv-cab p, .gol-cab p{ font-size:.8rem !important;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  /* si la sección trae botones, el subtítulo va en una línea: así el bloque baja y el
     antetítulo no queda pegado al filo de la foto */
  .viv-cab:has(> div:last-of-type button) h1 + p, .gol-cab:has(> div:last-of-type button) h1 + p,
  .viv-cab:has(> div:last-of-type input) p, .gol-cab:has(> div:last-of-type input) p{ -webkit-line-clamp:1; }
  .viv-cab > div:last-of-type, .gol-cab > div:last-of-type{ position:absolute !important; right:1.1rem; bottom:.9rem;
    left:auto; width:auto !important; display:flex !important; flex-wrap:nowrap !important; gap:.4rem; max-width:68vw;
    overflow-x:auto; scrollbar-width:none; justify-content:flex-end; }
  /* el buscador de Golfito no se come la fila: deja sitio al botón */
  .gol-cab input, .viv-cab input{ max-width:44vw !important; }
  .viv-cab > div:last-of-type::-webkit-scrollbar, .gol-cab > div:last-of-type::-webkit-scrollbar{ display:none; }
  .viv-cab > div:last-of-type > *, .gol-cab > div:last-of-type > *{ flex:none; }
  .viv-cab > div:last-of-type .btn, .gol-cab > div:last-of-type .btn,
  .viv-cab > div:last-of-type button, .gol-cab > div:last-of-type button{ padding:.4rem .8rem !important; font-size:.72rem !important; }
  /* el título le deja el sitio a los botones, y a la izquierda le deja pasar al botón del
     menú, que flota en la esquina (antes el antetítulo quedaba debajo de él) */
  /* `align-self:flex-end` viene de cuando la cabecera era una fila (ahí alineaba abajo); en
     columna empuja el bloque a la DERECHA y en tableta el título salía corrido. */
  .viv-cab > div:first-of-type, .gol-cab > div:first-of-type{ align-self:stretch !important; width:auto !important;
    padding-bottom:2.7rem; padding-left:3.3rem; }
  .viv-cab__ceja, .gol-cab__ceja{ display:block; }
}

/* El botón del cajón (celular y tableta) también va sobre la foto: mismo contraste. */
#mobile-menu-toggle{ background:rgba(13,23,32,.62) !important; border:1px solid rgba(234,223,206,.42) !important;
  color:#FFFFFF !important; box-shadow:0 8px 20px -10px rgba(13,23,32,.95) !important;
  z-index:60 !important; }   /* por encima de la banda de la foto, que va en la 40 */
#mobile-menu-toggle:hover{ background:rgba(13,23,32,.78) !important; border-color:#EADFCE !important; }

/* ── EL MENÚ EN EL CELULAR Y LA TABLETA: vidrio ahumado sobre la página ─────────────────
   Luis, 2026-09-22: «en modo móvil el efecto translúcido del menú también debe seguir
   existiendo, y debe estar bien alineado». En el cajón no hay riel angosto ni franja: la
   identidad ocupa lo que necesita y el botón de colapsar no aparece. */
@media (max-width:1099px){
  /* En el cajón, lo mismo que en escritorio: la foto se ve por detrás de la franja y de la
     línea para abajo, tinta sólida. Sin desenfoque, que ensucia la foto. */
  html.riel-con-banda #main-sidebar{ background-color:transparent !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
    background-image:linear-gradient(180deg, rgba(3,80,95,0) 0, rgba(3,80,95,0) var(--alto-cab, var(--alto-foto)), #03505f var(--alto-cab, var(--alto-foto))) !important;
    box-shadow:8px 0 34px rgba(0,0,0,.5) !important; border-right:1px solid rgba(234,223,206,.12) !important; }
html.riel-con-banda #main-sidebar[data-pz-foto]{background-image:linear-gradient(180deg, rgba(20,29,39,0) 0, rgba(20,29,39,0) var(--alto-cab, var(--alto-foto)), #141D27 var(--alto-cab, var(--alto-foto))) !important}
  html.riel-con-banda #main-sidebar > div:first-child{ background:linear-gradient(90deg, rgba(3,80,95,.78) 0, rgba(3,80,95,.52) 60%, rgba(3,80,95,.34) 100%) !important; }
html.riel-con-banda #main-sidebar > div:first-child[data-pz-foto]{background:linear-gradient(90deg, rgba(20,29,39,.78) 0, rgba(20,29,39,.52) 60%, rgba(20,29,39,.34) 100%) !important}
  /* La línea del menú muere donde muere la foto, también en el cajón (Luis, 2026-09-22). */
  #main-sidebar > div:first-child{ height:var(--alto-cab, var(--alto-foto)) !important; padding:1.1rem 1.25rem !important;
    display:flex; flex-direction:column; justify-content:center !important; }
  #main-sidebar > div:first-child::after{ display:none !important; }
}

/* ── Con el cajón abierto, la página se calla ───────────────────────────────────────────
   Los títulos de la cabecera y el botón del menú se apagan mientras el cajón está afuera,
   para que el texto del menú se lea limpio sobre la foto (Luis, 2026-09-22). */
@media (max-width:1099px){
  .viv-cab h1, .gol-cab h1, .viv-cab h1 + p, .gol-cab h1 + p, .viv-cab__ceja, .gol-cab__ceja,
  .viv-cab > div, .gol-cab > div, #mobile-menu-toggle{ transition:opacity .22s ease, visibility .22s ease; }
  body:has(#main-sidebar:not(.-translate-x-full)) .viv-cab h1,
  body:has(#main-sidebar:not(.-translate-x-full)) .gol-cab h1,
  body:has(#main-sidebar:not(.-translate-x-full)) .viv-cab h1 + p,
  body:has(#main-sidebar:not(.-translate-x-full)) .gol-cab h1 + p,
  body:has(#main-sidebar:not(.-translate-x-full)) .viv-cab__ceja,
  body:has(#main-sidebar:not(.-translate-x-full)) .gol-cab__ceja,
  body:has(#main-sidebar:not(.-translate-x-full)) .viv-cab > div,
  body:has(#main-sidebar:not(.-translate-x-full)) .gol-cab > div,
  body:has(#main-sidebar:not(.-translate-x-full)) #mobile-menu-toggle{ opacity:0 !important; visibility:hidden !important; }
  /* el velo del fondo, tenue como el de CIMA (no el negro al 80 % de antes) */
  #mobile-sidebar-overlay{ background:rgba(13,23,32,.55) !important; backdrop-filter:blur(2px) !important;
    -webkit-backdrop-filter:blur(2px) !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAS MEDIDAS DE CIMA, PARA TODAS (Luis, 2026-09-23)
   ───────────────────────────────────────────────────────────────────────────
   «VIVERO y consecuentemente Golfito no tienen la barra de menú con las mismas dimensiones que
   CIMA; en VIVERO lo de abajo, donde está el traductor, es más alto. Y en CIMA lo del menú que
   está sobre la imagen está acomodado diferente para que no se salga el botón de abajo del
   nombre del usuario. Debe acomodarse exactamente igual, milimétricamente, en todos los modos.»

   Las medidas NO se inventaron: se leyeron del CIMA que está publicado, midiendo el estilo ya
   calculado de cada pieza. Lo que salió:

                              CIMA        VIVERO      de más
     el pie, alto             121 px      163 px      +42
       · su padding            16 px       24 px      +16
       · margen sobre ES/EN     0 px       16 px      +16
       · la píldora ES/EN      39 px       42 px       +3
       · margen de créditos    16 px       24 px       +8
     la franja de identidad   200 px      200 px        0   (el alto ya estaba igual)
       · su padding       16.8/20/11.2  51.2/20/16    +34 arriba

   Ese padding de arriba es el que apretaba el botón que va bajo el nombre: en CIMA el contenido
   arranca 34 px más arriba y por eso le cabe todo sin salirse. Los dos números de 16,8 y 11,2
   son 1,05rem y 0,7rem con la raíz de estas apps; se escriben en píxeles para que no dependan
   de la raíz, que no es la misma en todas.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── LA FRANJA DE IDENTIDAD ─────────────────────────────────────────────────────────────── */
#main-sidebar > div:first-child{
  padding:16.8px 20px 11.2px !important; }
html.riel-con-banda #main-sidebar > div:first-child{
  padding:16.8px 20px 11.2px !important; }

/* ── EL PIE ─────────────────────────────────────────────────────────────────────────────── */
#main-sidebar > div:last-of-type{
  padding:16px !important; }
/* la píldora del idioma: sin margen arriba y de 39 px, como la de CIMA */
#main-sidebar > div:last-of-type > div:first-child{
  margin-top:0 !important;
  padding:4px !important;
  /* 39 px clavados. Con padding de 4 y el filete de 0,8 daba 40, y Luis pidió milimétrico:
     un píxel de más es un píxel de más. Se fija la altura y el contenido se centra dentro. */
  height:39px !important; min-height:39px !important;
  box-sizing:border-box !important;
  display:flex !important; align-items:center !important; }
#main-sidebar > div:last-of-type .lang-btn{
  height:30px !important; padding-top:0 !important; padding-bottom:0 !important;
  font-size:11.2px !important; line-height:1 !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important; }
/* el bloque de créditos: 16 px de separación, no 24 */
#main-sidebar > div:last-of-type > div:last-child{
  margin-top:16px !important; }

/* Con el riel angosto el pie NO se encoge: se va. Ya lo decía una regla de más arriba
   —`body.riel-angosto … { display:none }`— que hasta hoy no alcanzaba a nada, porque estaba
   escrita con `div:last-child` y el menú termina con los dos botones de colapsar y ocultar, así
   que ningún div es el último hijo. Al corregirla a `last-of-type` volvió a hacer su trabajo.
   Por eso acá no se le pone padding: sería pelearle a esa regla. */

/* ── EL TRADUCTOR, CON LA FORMA DE CIMA (Luis, 2026-09-23) ───────────────────────────────────
   «El botón del traductor no se ve bien.» Medido: el botón activo salía con `border-radius:0`,
   o sea un rectángulo metido dentro de una pastilla redondeada — de ahí las esquinas que
   asomaban y ese aspecto de recorte. El contenedor sí era una pastilla; el botón, no.
   Se le da el mismo canto entero que tiene en CIMA, en los dos temas y en las tres apps. */
#main-sidebar > div:last-of-type .lang-btn{
  border-radius:999px !important;
  border:0 !important; }
/* El contenedor es de vidrio sobre el color del pie, no una caja de tinta: sobre el teal del
   tema claro una pastilla oscura se lee como un agujero. */
#main-sidebar > div:last-of-type #ui-lang-switcher,
#main-sidebar > div:last-of-type > div:first-child{
  background:rgba(234,223,206,.08) !important;
  border:1px solid rgba(234,223,206,.18) !important;
  box-shadow:none !important; }

/* ── EL ÍCONO DE LA PERSONA, EL DE GOLFITO (Luis, 2026-09-23) ────────────────────────────────
   «El primero es Golfito y es el que me gusta; VIVERO debe ser igual, tanto en el oscuro como
   en el claro.»
   Medido en Golfito: un círculo de 24 px con el DEEP de la casa sólido —rgb(0,85,101)— y el
   ícono adentro a 13 px. VIVERO lo traía más grande y, en el tema claro, con un degradado que
   le había puesto yo en su momento. Se unifica al de Golfito, que es el que él eligió, y se
   declara acá —en el módulo compartido— para que no vuelvan a separarse.
   Va sin `[data-tema]`: es el mismo en los dos temas, que es justamente lo que se pidió. */
#main-sidebar .user-glass-pill .bg-sky-500\/20,
#main-sidebar .user-glass-pill [class*="rounded-full"]:not(button){
  width:24px !important; height:24px !important;
  flex:none !important;
  background-color:#006d82 !important;
  background-image:none !important;
  border-radius:9999px !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important; }
#main-sidebar .user-glass-pill .bg-sky-500\/20[data-pz-foto], #main-sidebar .user-glass-pill [class*="rounded-full"]:not(button)[data-pz-foto]{background-color:#005565 !important}
#main-sidebar .user-glass-pill .bg-sky-500\/20 .material-icons-outlined,
#main-sidebar .user-glass-pill [class*="rounded-full"]:not(button) .material-icons-outlined{
  font-size:13px !important; line-height:1 !important; color:#FFFFFF !important; }

/* El muñequito de la píldora va BLANCO en los dos temas (Luis, 2026-09-23: «lo diferente es el
   color del ícono como tal»). En claro se lo comía la regla que pone en crema todo lo que va
   sobre la fotografía; pero éste no está sobre la foto, está dentro de un círculo de deep, y
   ahí lo que se lee es el blanco. Lleva el id del menú para ganarle a esa regla general. */
#main-sidebar .user-glass-pill .bg-sky-500\/20 .material-icons-outlined,
#main-sidebar .user-glass-pill [class*="rounded-full"]:not(button) .material-icons-outlined,
#main-sidebar .user-glass-pill [class*="rounded-full"]:not(button) span{
  color:#FFFFFF !important; }

/* El idioma ACTIVO tiene que distinguirse también en el tema oscuro (Luis, 2026-09-23: «en modo
   oscuro el botón de este interruptor no se ve»). Al darle el canto redondo y quitarle el borde
   quedó sin nada que lo separara del inactivo: los dos se leían igual dentro de la pastilla.
   Se le devuelve el relleno claro que usa VIVERO —blanco al 15%, que sobre tinta se ve sin
   gritar— y su sombra interior. El tema claro tiene el suyo aparte, en deep. */
/* EL IDIOMA ACTIVO, EN EL DEEP DE LA CASA (Luis: «este botón no es del color correcto»).
   Venía con un blanco al 15%, que sobre tinta se lee como un gris de sistema y no dice nada.
   El «seleccionado» de este ecosistema ya tiene color y es el deep — el mismo que marca la
   entrada activa del menú, dos dedos más arriba—. Se usa ése, en los DOS temas, para que el
   botón signifique lo mismo en toda la pantalla. */
#main-sidebar > div:last-of-type .lang-btn.active{
  background:#00455A !important;
  color:#FFFFFF !important;
  box-shadow:0 2px 10px -4px rgba(6,12,18,.7) !important; }
#main-sidebar > div:last-of-type .lang-btn:not(.active){
  background:transparent !important;
  color:rgba(234,223,206,.72) !important; }

/* ── LA PASTILLA DEL USUARIO, VESTIDA COMO LOS BOTONES REDONDOS (Luis, 2026-09-25) ─────────
   «que no tenga la misma transparencia que tiene ahorita, sino la de los demás botones de esa
   sección, los circulares, que son más oscuritos, para que se note más y no se pierda entre
   las fotos». En crema al 6 % desaparecía sobre follaje claro; ahora es tinta al 62 % con
   filete crema al 34 % y la misma sombra corta que los botones de colapsar y ocultar. Igual en
   CIMA (cima-lujo.css), GOLFITO y VIVERO.
   Sólo la del usuario: el ES/EN del pie comparte la clase y no va sobre la foto. En el tema
   claro sólo cuando va sobre fotografía (`data-pz-foto`); fuera de ella manda el tema. */
html:not([data-tema="claro"]) #main-sidebar .user-glass-pill:not(#ui-lang-switcher),
html[data-tema="claro"] #main-sidebar .user-glass-pill[data-pz-foto]:not(#ui-lang-switcher){
  background:rgba(13,23,32,.62) !important; border:1px solid rgba(234,223,206,.34) !important;
  box-shadow:0 8px 20px -12px rgba(13,23,32,.9) !important; backdrop-filter:none !important; }