/* ============================================================ LA SALA S.D.D. · Tokens de marca ============================================================ */ *,*::before,*::after{box-sizing:border-box} input,select,textarea,button{font-family:inherit} /* --------------------------------------------------------------- Campos de fecha y hora en iOS Safari les da un ancho intrínseco propio que ignora al contenedor y los desborda, sobre todo dentro de grid o flex. Estas cuatro reglas juntas son las que lo resuelven: quitar la apariencia nativa, forzar el ancho, permitir que encojan (min-width:0) y contar el padding dentro del ancho. --------------------------------------------------------------- */ input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"]{ -webkit-appearance:none; appearance:none; width:100%; max-width:100%; min-width:0; box-sizing:border-box; text-align:left; } /* El icono del calendario/reloj no debe empujar el campo */ input[type="date"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator{ margin-left:auto;padding-left:4px;flex:none; } /* iOS mete un contenedor interno que también desborda */ input[type="date"]::-webkit-date-and-time-value, input[type="time"]::-webkit-date-and-time-value{ text-align:left;margin:0;min-width:0; } /* Nada debe salirse por los lados en móvil */ input,select,textarea{max-width:100%;box-sizing:border-box} :root{ /* Verde de la casa. Sustituye al turquesa anterior (#7FC8BC). Los nombres de las variables se conservan para no tocar 130+ usos; lo que cambió es el valor. OJO: --teal ahora es MUY oscuro, así que lo que va encima de él debe ir en crema, no en tinta. */ --teal:#052D09; --teal-600:#0E5A19; --teal-050:#E8F1E7; --teal-deep:#0A3F0E; --cream:#F3EEE2; --paper:#FBF9F3; --paper-2:#F7F2E7; --ink:#1B1815; --ink-70:#4B453C; --ink-40:#8A8272; --gold:#E3A857; --gold-600:#C98A34; --gold-050:#FBF1DE; --rose:#D96A6A; --rose-050:#F8E3E3; --line:#E7E0CF; --line-2:#EFE9DA; --ok:#3E9E7A; --bad:#C4553F; --warn:#D9922C; --radius:16px; --radius-lg:22px; --radius-sm:11px; --shadow-sm:0 1px 2px rgba(27,24,21,.06),0 2px 8px rgba(27,24,21,.05); --shadow:0 6px 24px rgba(27,24,21,.10); --shadow-lg:0 18px 50px rgba(27,24,21,.16); --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; --font-head:'Archivo','Inter',sans-serif; --font-block:'Anton','Archivo',sans-serif; --font-serif:'Playfair Display',Georgia,serif; /* La sombra en modo noche no puede ser negra sobre negro. Se declara aquí para que las reglas la usen sin saber en qué tema están. */ --sombra-carta:var(--shadow); /* ------------------------------------------------------------ SUPERFICIES QUE SON OSCURAS SIEMPRE ------------------------------------------------------------ El menú lateral y la barra superior son negros POR MARCA, no porque el tema sea claro. Si usan `--ink` como fondo, al pasar a modo noche la tinta se vuelve crema y el menú entero se blanquea, mientras sus textos —escritos en claro y fijos— se quedan ilegibles sobre él. Estos tokens NO cambian con el tema. Lo que es negro por decisión de diseño sigue siendo negro de noche; lo que era blanco porque «es el papel» es lo único que se invierte. ------------------------------------------------------------ */ --marca-fondo:#1B1815; --marca-fondo-2:#252019; --marca-tinta:#D8D2C4; --marca-tinta-viva:#FFFFFF; /* Texto sobre los fondos pálidos de aviso. ------------------------------------------------------------ `--gold-600` se usaba como tinta sobre `--gold-050` y daba 2.6:1 de contraste —por debajo del 3:1 que hace falta para texto pequeño—. El chip «Pendiente» llevaba tiempo siendo difícil de leer en modo claro, y nadie lo había medido. Este token es solo para eso: texto ámbar sobre papel ámbar. El `--gold-600` sigue existiendo para bordes y otros usos donde el contraste no es el problema. */ --ambar-tinta:#7A4F0C; } /* ================================================================== MODO NOCHE ================================================================== La app se usa de pie, a las dos de la mañana, en un lugar a media luz. El fondo crema a pantalla completa deslumbra y arruina la visión nocturna de quien está en la puerta: cada vez que levanta la vista del iPad tarda unos segundos en volver a ver la fila. No es un tema «bonito»: es una condición de trabajo. CÓMO SE HACE ------------------------------------------------------------------ Redefiniendo los mismos tokens, no escribiendo estilos aparte. El portal entero ya pinta con `--cream`, `--paper`, `--ink`: cambiando lo que valen, cambia todo a la vez y no hay una sola pantalla que se quede a medias. Un tema oscuro escrito regla por regla siempre deja rincones claros que aparecen semanas después. LO QUE NO SE INVIERTE ------------------------------------------------------------------ El dorado y el verde de la casa. Son la marca y siguen significando lo mismo —dorado es «esto es lo importante», verde es «esto está bien»—. Lo que cambia es el papel sobre el que se imprimen. Los rojos y ámbares de estado se aclaran un poco: los mismos tonos sobre fondo oscuro pierden contraste y un aviso que no se ve no avisa. ================================================================== */ html[data-tema="noche"]{ /* El papel se vuelve carbón. No negro puro: el negro absoluto sobre una pantalla OLED hace que los bordes de las tarjetas vibren, y además no deja sitio para distinguir un nivel de otro. */ --cream:#14130F; --paper:#1C1A16; --paper-2:#24211C; /* La tinta se invierte, pero no a blanco puro: quema igual que el crema quemaba antes, solo que al revés. */ --ink:#EDE8DC; --ink-70:#B5AE9E; --ink-40:#8A8272; /* El verde de la casa sube de brillo: #052D09 sobre carbón es invisible. El claro se vuelve un verde apagado que sigue leyéndose como «lo de la casa». */ --teal:#0B4A12; /* `--teal-600` y `--teal-deep` son, en 60+ reglas, el TEXTO que va encima de `--teal-050`. Con los valores del tema claro serían verde oscuro sobre verde oscuro: el chip «Confirmada» dejaba de verse por completo. Aquí suben de brillo hasta ser legibles sobre el pálido oscuro. Y `--teal-deep` se aclara MÁS que `--teal-600` aunque en el tema claro sea al revés: lo que importa no es cuál es más oscuro sino que los dos contrasten con el fondo sobre el que se imprimen. */ --teal-600:#6FC47E; --teal-050:#16301A; --teal-deep:#93D9A0; /* El dorado casi no cambia: es lo único que tiene que brillar. */ --gold:#E8B364; /* Mismo caso: `--gold-600` es el texto de los avisos ámbar. */ --gold-600:#E6B872; --gold-050:#2E2519; --rose:#E38585; --rose-050:#33201F; --line:#332F28; --line-2:#2A2721; --ok:#4FB48E; --bad:#E0705A; --warn:#E5A63F; /* Las sombras negras desaparecen sobre carbón. Lo que separa una tarjeta del fondo pasa a ser un borde tenue y un fondo más claro, no una sombra. */ --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 4px 18px rgba(0,0,0,.45); --shadow-lg:0 18px 50px rgba(0,0,0,.55); /* En modo noche el negro de marca se aclara un punto: el mismo #1B1815 sobre un fondo carbón casi idéntico haría desaparecer el borde entre el menú y el contenido. */ --marca-fondo:#100F0C; --marca-fondo-2:#1A1813; /* De noche el ámbar sube: sobre el pálido oscuro, el tono del tema claro desaparece. */ --ambar-tinta:#EEC17C; color-scheme:dark; } /* Los campos nativos —fechas, selectores— los dibuja el sistema y siguen saliendo blancos si no se le avisa. `color-scheme` arriba hace la mitad; esto termina de igualarlos. */ html[data-tema="noche"] input, html[data-tema="noche"] select, html[data-tema="noche"] textarea{ background:var(--paper-2);color:var(--ink);border-color:var(--line); } /* El cambio se anima para que no dé un latigazo: pasar de crema a carbón de golpe es exactamente el deslumbre que se quiere evitar, solo que al revés. */ html{transition:background-color .5s ease} body{transition:background-color .5s ease,color .5s ease} @media (prefers-reduced-motion:reduce){ html,body{transition:none} } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;font-family:var(--font-body);color:var(--ink); background:var(--cream);line-height:1.5;-webkit-font-smoothing:antialiased; } a{color:inherit} img{max-width:100%;display:block} button{font-family:inherit;cursor:pointer} :focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:6px} /* Logo bloque estilo letrero */ .brand-block{font-family:var(--font-block);line-height:.82;letter-spacing:1px;text-transform:uppercase} .brand-block .big{display:block;font-size:clamp(38px,7vw,72px);color:var(--gold); text-shadow:5px 5px 0 var(--ink);} .brand-block .sdd{display:block;font-family:var(--font-block);letter-spacing:.42em; font-size:clamp(15px,2.4vw,22px);color:var(--gold);text-shadow:2.5px 2.5px 0 var(--ink); margin-top:.35em;padding-left:.42em} /* Logotipo por imagen (PNG con transparencia) ------------------------------------------------------------ CADA MEDIDA LLEVA UN TOPE DE ALTO, y ésa es la parte que importa. Antes solo se decía el ancho, porque el logo de la casa es horizontal y el alto salía solo. Con PAXLive el logo lo sube cada recinto y puede ser CUADRADO: a 320 px de ancho, un cuadrado mide 320 px de alto y se come el encabezado entero —o la barra lateral, que acababa con un bloque de 160 px antes del primer renglón del menú—. `width` se queda como estaba para que un logo ancho siga llegando a su medida completa. Cuando el alto se pasa del tope, el navegador respeta la proporción y encoge el ancho solo: un cuadrado acaba de 140 × 140 en el hero y uno panorámico sigue de 320 de ancho. No hay que preguntarle al recinto de qué forma es su logo. */ .brand-logo{display:block;height:auto;width:auto;max-width:100%;object-fit:contain} .brand-logo.hero{width:min(320px,72vw);max-height:140px;margin:4px auto 0} .brand-logo.lg{width:230px;max-height:104px;margin:0 auto} /* `margin:0 auto` como en `.lg`. ------------------------------------------------------------ `.brand-logo` es `display:block` con ancho fijo, así que el `text-align:center` del contenedor NO lo centra: un bloque de 185px se queda pegado a la izquierda. Las tres pantallas que lo usan lo estaban resolviendo cada una por su lado —una con un en inline-block, otra con un style suelto, y la de gestionar sin nada, con el logo descuadrado—. Se arregla en el sitio donde estaba el problema. */ .brand-logo.md{width:185px;max-height:84px;margin:0 auto} /* `sm` es la de la barra lateral del panel. 72 px es lo que ocupaba el rótulo de texto que había antes, así que el menú arranca a la misma altura de siempre venga el logo como venga. */ .brand-logo.sm{width:160px;max-height:72px} /* ============================================================ EL HUECO DEL NOTCH · lo que dejó la marquesina ------------------------------------------------------------ Aquí vivía la cinta de frases. Se quitó del sitio público, pero NO se puede quitar sin más: era ella la que reservaba el espacio de la barra de estado del teléfono. Instalado como app, este portal declara `apple-mobile-web-app-status-bar-style: black-translucent`, que hace que la página empiece DEBAJO del reloj y la batería. La cinta llevaba `padding-top: env(safe-area-inset-top)` y absorbía ese hueco; sin ella, el encabezado verde subiría hasta quedar tapado por la hora. Así que el hueco se muda al `body` — pero SOLO al del sitio público, y de ahí la clase. `brand.css` la carga también el panel, y `admin.css` ya reserva ese hueco por su cuenta en la barra superior. Una regla suelta sobre `body` le sumaría el espacio DOS veces y bajaría todo el panel en un iPhone instalado: un hueco vacío arriba que nadie sabría de dónde salió. En un navegador normal `env(safe-area-inset-top)` vale 0 y esta línea no hace nada: solo se nota en el teléfono instalado, que es donde hacía falta. El `@keyframes ticker` y las clases `.ticker` se fueron con ella: no los usaba nadie más. */ body.pub{padding-top:env(safe-area-inset-top)} /* Botones */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; border:none;border-radius:999px;padding:14px 26px;font-weight:800;font-size:15px; transition:transform .12s ease,box-shadow .12s ease,background .12s ease;text-decoration:none} .btn:active{transform:translateY(1px)} .btn-gold{background:var(--gold);color:var(--ink);box-shadow:0 4px 0 var(--gold-600)} .btn-gold:hover{background:#EDB466} .btn-ink{background:var(--ink);color:var(--cream)} .btn-ink:hover{background:#2a251f} .btn-teal{background:var(--teal);color:var(--cream);box-shadow:0 4px 0 #021A05} .btn-ghost{background:transparent;color:var(--ink);border:2px solid var(--ink)} .btn-ghost:hover{background:var(--ink);color:var(--cream)} .btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none} .btn-lg{padding:16px 32px;font-size:16px} .btn-block{width:100%} /* El atributo hidden debe ganarle a los display: de .btn y compañía */ [hidden]{display:none !important} /* Chips */ .chip{border:2px solid var(--line);background:var(--paper);border-radius:999px; padding:9px 16px;font-weight:700;font-size:14px;color:var(--ink-70);transition:all .12s} .chip:hover{border-color:var(--ink-40)} .chip.on{border-color:var(--ink);background:var(--ink);color:var(--cream)} .chip:disabled,.chip[disabled]{cursor:not-allowed;opacity:.5;filter:grayscale(1)} .chip:disabled:hover,.chip[disabled]:hover{border-color:var(--line)} .chip.on:disabled,.chip.on[disabled]{background:var(--ink-40);border-color:var(--ink-40); color:var(--cream);opacity:.65;filter:none} /* Toast */ .toast-wrap{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:9999; display:flex;flex-direction:column;gap:10px;align-items:center} .toast{background:var(--ink);color:var(--cream);padding:13px 20px;border-radius:12px; font-weight:600;font-size:14px;box-shadow:var(--shadow-lg);max-width:90vw; animation:toastIn .25s ease} .toast.ok{background:var(--ok)} .toast.bad{background:var(--bad)} @keyframes toastIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} /* ================================================================== Que escribir NO haga zoom ================================================================== Safari en iPhone acerca la pantalla automáticamente cuando enfocas un campo cuya letra mide menos de 16px. No es un capricho del navegador: da por hecho que si el texto es pequeño hay que agrandarlo para poder teclear. El problema no es el acercamiento en sí, es que NO se deshace solo: escribes un nombre en el buscador, cierras el teclado y la app se queda desplazada y cortada por la derecha. En medio de un servicio, eso obliga a pellizcar la pantalla para volver a ver el panel completo, y pasa cada vez que alguien busca algo. POR QUÉ AQUÍ Y NO EN EL VIEWPORT ------------------------------------------------------------------ La forma corta de arreglarlo es `maximum-scale=1, user-scalable=no` en la etiqueta viewport. Eso mata también el acercamiento CON LOS DEDOS, y aquí hace falta de verdad: el plano del salón tiene cincuenta mesas con nombres en letra chica y se lee acercándose. Además deja sin recurso a quien no ve bien, que es una razón de peso por sí sola. Los 16px solo mandan en pantallas de teléfono. En escritorio los controles siguen con su tamaño de siempre, porque ahí el problema no existe y una caja de 16px se ve desproporcionada al lado del resto. ================================================================== */ @media(max-width:820px){ /* Los `:not()` no son adorno: suben el peso del selector lo justo para ganarle a las reglas que fijan 13px o 14px —`.inp`, `.sel`, `.ct-txt`, `.map-toolbar .sel`— y que viven en admin.css y mapa.css, que cargan después de este archivo. Sin ellos la regla se escribía pero no se aplicaba a los desplegables ni a las cajas de texto, y el zoom seguía ahí. Medido campo por campo en el navegador, no supuesto. */ input:not([type=checkbox]):not([type=radio]):not([type=range]), select:not([hidden]):not([multiple]), textarea:not([hidden]), .inp, .sel{font-size:16px} /* Los dos campos que son grandes a propósito y hay que dejar en paz. ------------------------------------------------------------------ El importe del cobro y el contador de personas se teclean mirando la cifra, no el teclado, y se revisan en voz alta antes de guardar. La regla de arriba los habría bajado a 16px y justo ahí un número mal leído cuesta dinero. Van con `!important` y no subiéndoles el peso con selectores más largos porque la regla de arriba lleva tres `:not()` y ganarle limpiamente exige encadenar cosas que no significan nada —un `:not([disabled])` puesto solo para sumar peso—. Dos líneas explícitas se entienden; un selector retorcido, no. */ .nr-money .inp{font-size:19px !important} .ac-num .inp{font-size:18px !important} }