/* ═══════════════════════════════════════════════════════════════════════
   estilo-30.css · EL LENGUAJE DE LA PAGINA NUEVA, DENTRO DE OHOS (encargo 1003)
   Code · 19-oct-2026 · corrida 547 · v9.79.0

   Eduardo, 19-oct: «las mejoras que tambien hagas en el sitio, debes tambien de
   reflejarlas en la interfaz real como la de los hoteles y apps de owners etc.
   por ejemplo el uso de colores luces en los fondos (que se ven muy bien) etc.
   todo debe corresponderse». La fuente es la portada aprobada (encargo 1008):
   sus tokens --oh-* son LOS MISMOS que declara public/index.html; si uno cambia,
   cambian los dos.

   SOLO PIEL. Ni una regla de esta hoja cambia que se ve o quien lo ve; cambia
   como se ve. Carga AL FINAL de todas las hojas, para ganar por orden y no por
   !important (salvo donde la hoja de origen ya lo usaba).

   QUE TOCA, Y POR QUE ASI:
   1. La barra lateral del marco de operacion (recepcion: .ohlat) y la del
      tablero (gerencia y operador: body.ohc-on .ohc-lat):
      noche #0B1C24 con las tres luces de la portada (teal, azul, oro al 18 %).
      Las luces son degradados FIJOS en el fondo y un solo resplandor que flota
      en un pseudo-elemento: con movimiento reducido el resplandor se queda
      quieto y el fondo sigue igual. El logo blanco sobre #0B1C24: 17.6:1.
   2. Botones de pildora (.ohb, .btn) y tarjetas de radio 24 con sombra suave
      (.ohc, .ohfr, .ohhero). No cambia ni un color de boton: el contraste es
      el que ya estaba medido (ronda 3).
   3. La portada de carga (#oharranca) se pinta en la cabeza de
      sistema/index.html, no aqui: tiene que verse ANTES de que llegue esta hoja.
   4. La app de propietarios: luces DORADAS suaves sobre su papel. El texto
      sigue siendo tinta sobre claro (15.6:1): la luz no toca el contraste.
   5. La puerta de entrada (html.ohpuertaent): su navy pasa a la noche con
      luces y rejilla; la tarjeta blanca del formulario queda como estaba.
   6. El pie de version: chip con punto vivo, como el de la portada.
   El encabezado de las pantallas viejas (header) conserva el degradado de su
   TEMA (encargo 562, es preferencia de la persona) y solo gana la luz encima.
   ═══════════════════════════════════════════════════════════════════════ */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/IBMPlexMono-500-latin.woff2) format('woff2')}
:root{
 --oh-noche:#0B1C24;--oh-teal:#13707F;--oh-azul:#2A4F8A;--oh-oro:#B8862B;--oh-agua:#7FD0D8;--oh-vivo:#3DD6A0;
 --oh-radio:24px;--oh-pildora:999px;
 --oh-sombra:0 1px 0 rgba(21,35,45,.04),0 12px 32px rgba(21,35,45,.06);
 --oh-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
 /* las luces, como fondo fijo (no se mueven: el movimiento va aparte) */
 --oh-luces:radial-gradient(70% 38% at 100% 0%,rgba(19,112,127,.62),rgba(19,112,127,0) 70%),
            radial-gradient(80% 40% at 0% 100%,rgba(42,79,138,.55),rgba(42,79,138,0) 70%),
            radial-gradient(45% 25% at 45% 55%,rgba(184,134,43,.18),rgba(184,134,43,0) 70%);
 --oh-rejilla:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
 /* el marco de operacion toma los radios nuevos de aqui */
 --o-radio:var(--oh-radio);
 --o-sombra:var(--oh-sombra);
}
@keyframes ohFlota{from{transform:translate(0,0) scale(1)}to{transform:translate(40px,30px) scale(1.12)}}

/* 1 · la barra lateral, de dia y de noche (siempre es oscura) */
body.ohm-opera .ohlat,
:where(html:not(.oh-dia)) body.ohm-opera .ohlat,
:where(html.oh-noche) body.ohm-opera .ohlat,
body.ohc-on .ohc-lat{
 background-color:var(--oh-noche);background-image:var(--oh-luces);overflow:hidden;isolation:isolate}
body.ohm-opera .ohlat::before,body.ohc-on .ohc-lat::before{content:"";position:absolute;width:320px;height:320px;border-radius:50%;
 background:var(--oh-teal);filter:blur(80px);opacity:.5;top:-120px;left:-60px;z-index:-1;pointer-events:none;
 animation:ohFlota 18s ease-in-out infinite alternate}
body.ohm-opera .ohlat::after,body.ohc-on .ohc-lat::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
 background-image:var(--oh-rejilla);background-size:44px 44px;
 -webkit-mask-image:linear-gradient(180deg,#000,transparent 55%);mask-image:linear-gradient(180deg,#000,transparent 55%)}

/* el encabezado de las pantallas viejas: el degradado del tema, mas la luz */
header{background-image:radial-gradient(60% 140% at 100% 0%,rgba(19,112,127,.45),rgba(19,112,127,0) 70%),radial-gradient(40% 120% at 30% 100%,rgba(184,134,43,.12),rgba(184,134,43,0) 70%),var(--gnavy)}

/* las cifras oscuras del tablero (operador y gerencia) llevan la misma luz */
.ohc-navy{background-color:var(--oh-noche) !important;background-image:radial-gradient(90% 80% at 100% 0%,rgba(19,112,127,.55),rgba(19,112,127,0) 70%) !important}

/* 2 · pildoras y tarjetas */
.ohb,.btn,.ohtelb{border-radius:var(--oh-pildora)}
.ohb-t{border-radius:8px}
.ohc,.ohfr,.ohhero,.ohc-tile{border-radius:var(--oh-radio);box-shadow:var(--oh-sombra)}
:where(html.oh-noche) .ohc,:where(html.oh-noche) .ohfr{box-shadow:none}

/* 4 · la app de propietarios: luces doradas suaves sobre el papel */
html:has(body.pc-on),body.pc-on{
 background-color:#F6F5EF !important;
 background-image:radial-gradient(70% 34% at 100% 0%,rgba(242,221,176,.85),rgba(242,221,176,0) 70%),
                  radial-gradient(60% 30% at 0% 35%,rgba(233,220,194,.6),rgba(233,220,194,0) 70%) !important;
 background-attachment:fixed !important;background-repeat:no-repeat !important}
body.pc-on::before{content:"";position:fixed;width:300px;height:300px;border-radius:50%;background:#E9C77B;
 filter:blur(90px);opacity:.28;top:-110px;right:-80px;z-index:-1;pointer-events:none;animation:ohFlota 22s ease-in-out infinite alternate}

/* 5 · la puerta de entrada (html.ohpuertaent, .ent): ya era de noche; gana
      las luces y la rejilla. La tarjeta blanca del formulario no se toca. */
html.ohpuertaent,html.ohpuertaent body,html.ohpuertaent .ent{
 background-color:var(--oh-noche);background-image:var(--oh-luces),var(--oh-rejilla);
 background-size:auto,auto,auto,56px 56px,56px 56px}
html.ohpuertaent #main{background:transparent}
html.ohpuertaent .ent{background-attachment:fixed}

/* 6 · el pie de version: chip con punto vivo */
.pie .ver{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;
 padding:4px 14px;border-radius:var(--oh-pildora);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
 font-family:var(--oh-mono);letter-spacing:.04em}
.pie .ver::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--oh-vivo);
 box-shadow:0 0 0 4px rgba(61,214,160,.18);flex:none}

@media (prefers-reduced-motion:reduce){
 body.ohm-opera .ohlat::before,body.ohc-on .ohc-lat::before,body.pc-on::before{animation:none}
}

/* LAS LISTAS DESPLEGABLES, UNA SOLA FORMA EN TODO EL SISTEMA (Eduardo, 19-oct-2026:
   la flecha de «octubre de 2026» en el calendario quedaba pegada al borde). La flecha
   del navegador se pinta a 2 o 3 px del filo y cada navegador la pone distinta; aqui se
   dibuja una sola, con el mismo aire que el texto tiene a la izquierda. Va con
   !important porque varias listas declaran «background:» completo, que borraria la
   flecha. Las listas de varias filas (multiple/size) se quedan como estan. */
html select:not([multiple]):not([size]){
  -webkit-appearance:none !important;appearance:none !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236B7A85' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;background-position:right 16px center !important;
  background-size:12px 8px !important;padding-right:44px !important}
html select:not([multiple]):not([size])::-ms-expand{display:none}