/*
* OneIoT se ve como lo que es: un tablero.
*
* La hoja se escribe entera desde el principio en vez de copiarse de OneAccount
* o de GastroSquad. Es la misma decisión que se tomó allá y por el mismo motivo:
* en GastroSquad ocho pantallas nacieron copiando el CSS de su vecina y
* acabaron con cuatro anchos distintos para la misma tarjeta.
*
* Tres zonas con la misma piel y distinta densidad: el sitio público respira,
* el panel del cliente aprovecha el ancho, y `/admin` es una tabla detrás de
* otra. La clase va en el `body` (`zona-website`, `zona-dashboard`, `zona-admin`).
*/
:root {
color-scheme: light dark;
--tinta: #0f172a;
--tinta-suave: #64748b;
--fondo: #f8fafc;
--papel: #ffffff;
--borde: #e2e8f0;
--acento: #0f766e;
--acento-claro: #ccfbf1;
/* El texto SOBRE el acento. Blanco en claro; en oscuro el acento es un turquesa
luminoso y el blanco encima se lee a 1,9:1 — ahí va casi negro. */
--sobre-acento: #ffffff;
--bueno: #16a34a;
--malo: #dc2626;
--atencion: #d97706;
--sombra: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px rgba(15, 23, 42, .07);
--radio: 14px;
/* Los bloques de una automatización, con los colores de MacroDroid en versión
fina (`_dev_docs/34` §6): Cuando, Solo si, Entonces, las ramas y Si algo falla. */
--auto-cuando: #e11d48;
--auto-solo-si: #059669;
--auto-entonces: #2563eb;
--auto-si: #7c3aed;
--auto-falla: #d97706;
}
/*
* EL TEMA TIENE TRES ESTADOS, NO DOS.
*
* sin elegir → manda el sistema (`prefers-color-scheme`)
* claro → claro aunque el sistema esté en oscuro
* oscuro → oscuro aunque el sistema esté en claro
*
* Por eso el bloque del sistema lleva `:not([data-tema="claro"])` y hay uno
* aparte para la elección explícita. Con solo la consulta de medios, el
* interruptor no podría ganarle al sistema en una de las dos direcciones — y un
* interruptor que a veces no hace nada es peor que no tenerlo.
*
* `data-tema` lo pone un guion en el `` ANTES de pintar. Si se pusiera al
* final, la pantalla daría un fogonazo blanco en cada carga para quien lo tiene
* en oscuro.
*/
@media (prefers-color-scheme: dark) {
:root:not([data-tema="claro"]) {
--tinta: #e2e8f0;
--tinta-suave: #94a3b8;
--fondo: #0b1120;
--papel: #111827;
--borde: #1f2937;
--acento: #2dd4bf;
--acento-claro: #134e4a;
--sobre-acento: #042f2e;
--sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .45);
--auto-cuando: #fb7185;
--auto-solo-si: #34d399;
--auto-entonces: #60a5fa;
--auto-si: #a78bfa;
--auto-falla: #fbbf24;
}
}
:root[data-tema="oscuro"] {
color-scheme: dark;
--tinta: #e2e8f0;
--tinta-suave: #94a3b8;
--fondo: #0b1120;
--papel: #111827;
--borde: #1f2937;
--acento: #2dd4bf;
--acento-claro: #134e4a;
--sobre-acento: #042f2e;
--sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .45);
--auto-cuando: #fb7185;
--auto-solo-si: #34d399;
--auto-entonces: #60a5fa;
--auto-si: #a78bfa;
--auto-falla: #fbbf24;
}
:root[data-tema="claro"] { color-scheme: light; }
/*
* LO PRIMERO, Y NO ES ESTÉTICA: QUE `hidden` OCULTE.
*
* El navegador trae `[hidden] { display: none }`, pero es una regla de baja
* especificidad: cualquier `.mi-caja { display: flex }` **la gana**, y el
* elemento se queda a la vista con el atributo puesto.
*
* Esto ya rompió cuatro cosas en la app —el aviso rojo de «sin conexión»
* permanente, el de versión nueva siempre encendido, el teclado del PIN abierto
* sobre la pantalla de pared y la caja de foto vacía— y se arregló ahí. Y volvió
* a morder en la tienda: la galería enseñaba **todas las fotos a la vez**, porque
* la regla estaba en `app.css` y la zona pública **no carga `app.css`**.
*
* Por eso vive aquí, en la hoja que carga todo el mundo. Arreglar una regla
* general en la hoja de una zona es arreglarla para esa zona y dejarla rota en
* las otras tres.
*
* `!important` a conciencia: es la única forma de que una regla de un atributo
* le gane a una de clase, y `hidden` significa oculto o no significa nada.
*/
[hidden] { display: none !important; }
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
background: var(--fondo);
color: var(--tinta);
line-height: 1.6;
}
h1, h2, h3 { font-family: Outfit, Inter, system-ui, sans-serif; line-height: 1.2; margin: 0 0 .5rem; }
h1 { font-size: 1.9rem; }
h2 { font-size: 1.35rem; margin-top: 0; }
h3 { font-size: 1.05rem; }
/*
* LOS ENLACES NO SE SUBRAYAN AL PASAR EL RATÓN.
*
* El subrayado del navegador es de 1970 y aquí hace daño de verdad: en este
* producto casi todo lo que se toca es un `` —la tarjeta de un sitio, el
* botón «Añadir», una fila de equipo—, y verlos subrayarse uno a uno al pasar
* por encima hace que una pantalla se vea improvisada por muy bien que funcione
* lo de abajo.
*
* Lo que se pierde con esto es la señal de «esto es un enlace» para quien no
* distingue el color. Se devuelve de otra forma: lo que se pulsa tiene forma de
* botón, y lo que es enlace de texto cambia de color y de fondo al pasar — que
* es una señal más, no una menos.
*/
a { color: var(--acento); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: none; }
code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9em; }
pre { background: var(--fondo); border: 1px solid var(--borde); border-radius: 8px; padding: .75rem; overflow-x: auto; font-size: .8rem; }
/* ── La barra ─────────────────────────────────────────────────────────── */
.barra {
display: flex; align-items: center; gap: 1.5rem;
padding: .85rem 1.5rem;
background: var(--papel);
border-bottom: 1px solid var(--borde);
position: sticky; top: 0; z-index: 20;
}
.marca { display: flex; align-items: center; gap: .5rem; font-family: Outfit, sans-serif; font-weight: 800; color: var(--tinta); }
.marca:hover { text-decoration: none; }
.marca-icono { font-size: 1.2rem; }
.barra-plegable { flex: 1; display: flex; align-items: center; gap: 1rem; min-width: 0; }
.barra-nav { display: flex; gap: .25rem .85rem; flex-wrap: wrap; font-size: .92rem; }
.barra-acciones { flex: none; }
.barra-nav a { color: var(--tinta-suave); padding: .2rem 0; border-bottom: 2px solid transparent; }
.barra-nav a:hover { color: var(--acento); text-decoration: none; }
/* Dónde se está, sin que haya que leer la dirección. */
.barra-nav a[aria-current="page"] { color: var(--tinta); border-bottom-color: var(--acento); }
.barra-acciones { margin-left: auto; display: flex; align-items: center; gap: .75rem; }
.barra .conexion { order: 3; }
.barra-menu { display: none; }
/*
* EL «?» DE ESTA PANTALLA. Un círculo de 36 px que se toca como uno de 44: el
* `::before` agranda el área de toque sin agrandar el dibujo. Va el último en la
* barra del ordenador y junto al «Menú» en el teléfono.
*/
.boton-ayuda {
order: 4; flex: none; position: relative;
display: inline-grid; place-items: center;
width: 2.25rem; height: 2.25rem; border-radius: 50%;
border: 1px solid var(--borde); background: var(--papel); color: var(--tinta-suave);
transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.boton-ayuda::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; }
.boton-ayuda svg { width: 1.25rem; height: 1.25rem; }
.boton-ayuda:hover { color: var(--acento); border-color: var(--acento); background: color-mix(in srgb, var(--acento) 8%, var(--papel)); text-decoration: none; }
.boton-ayuda:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
/*
* El punto de la conexión. Está en la barra y no escondido en una esquina
* porque es la única diferencia visible entre «no está pasando nada» y «esta
* pantalla dejó de recibir hace diez minutos».
*/
.boton-barra { padding: .45rem .85rem; font-size: .85rem; white-space: nowrap; }
/* Donde ya estás no vuelve a pedir el clic: se apaga y deja de parecer una
invitación. */
.boton-barra[aria-current="page"] { opacity: .55; pointer-events: none; }
.conexion { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--tinta-suave); }
.conexion .punto { width: .55rem; height: .55rem; border-radius: 50%; background: var(--tinta-suave); }
.conexion-conectado .punto { background: var(--bueno); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bueno) 20%, transparent); }
.conexion-sospechoso .punto { background: var(--atencion); }
.conexion-caido .punto, .conexion-sin-sesion .punto { background: var(--malo); }
/* ── El marco ─────────────────────────────────────────────────────────── */
.marco { flex: 1; width: 100%; max-width: 78rem; margin: 0 auto; padding: 2rem 1.25rem 3rem; }
.zona-website .marco { max-width: 68rem; }
.marco-centrado { display: grid; place-items: center; min-height: 60vh; }
.marco-centrado .tarjeta { max-width: 32rem; }
.bloque { margin-top: 2.5rem; }
.centrado { text-align: center; }
.derecha { text-align: right; }
.apagado { color: var(--tinta-suave); }
/* EN LA HOJA COMÚN Y NO EN `app.css`, QUE ES DONDE ESTABA.
Veinte vistas de `/admin` escriben `p.apagado.pequeno`, y `/admin` **no carga
`app.css`** —solo lo hace el panel—. Así que en todo el panel del staff esa
clase no hacía nada y esos textos salían del tamaño normal. Es el mismo caso
que `[hidden]`: una regla en la hoja que no carga la zona que la usa. */
.pequeno { font-size: .78rem; }
.malo { color: var(--malo); font-weight: 600; }
.entrada { font-size: 1.05rem; color: var(--tinta-suave); max-width: 46rem; }
.antetitulo { text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; color: var(--acento); font-weight: 600; margin: 0; }
.cabecera-pagina { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
/* ── Piezas ───────────────────────────────────────────────────────────── */
.tarjeta { background: var(--papel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.25rem; box-shadow: var(--sombra); }
.tarjeta-ancha { grid-column: 1 / -1; }
.tarjeta-enlace { display: block; color: inherit; }
.tarjeta-enlace:hover { text-decoration: none; border-color: var(--acento); }
.tarjeta-mala { border-color: var(--malo); }
.tarjeta-error { text-align: center; }
.codigo { font-family: Outfit, sans-serif; font-size: 3rem; font-weight: 800; color: var(--tinta-suave); margin: 0; }
.vacio { text-align: center; padding: 3rem 1rem; color: var(--tinta-suave); border: 1px dashed var(--borde); border-radius: var(--radio); }
.rejilla-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1.25rem; }
.rejilla-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.25rem; }
.rejilla-pareja { align-items: stretch; }
.rejilla-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.rejilla-metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1rem; }
.cifra { text-align: center; }
.cifra-numero { display: block; font-family: Outfit, sans-serif; font-size: 2rem; font-weight: 800; }
.cifra-etiqueta { font-size: .8rem; color: var(--tinta-suave); }
.cifra-mala .cifra-numero { color: var(--malo); }
.cifra-atencion .cifra-numero { color: var(--atencion); }
/* La tarjeta de un equipo se retiró el 15/10/2026: ahora es una fila (`_fila-equipo.pug`, al final de esta hoja). */
.metrica { display: flex; flex-direction: column; }
.metrica-valor { font-family: Outfit, sans-serif; font-size: 1.6rem; font-weight: 700; line-height: 1; }
.metrica-unidad { font-size: .8rem; color: var(--tinta-suave); }
.metrica-etiqueta { font-size: .72rem; color: var(--tinta-suave); }
.metrica-grande { text-align: center; }
.metrica-grande .metrica-valor { font-size: 2.2rem; display: block; margin: .25rem 0; }
.punto { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: var(--tinta-suave); flex: none; }
.punto.en-linea {
background: var(--bueno);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--bueno) 20%, transparent);
animation: latido-vivo 2.6s ease-in-out infinite;
}
/* Late el halo, no el punto: agrandar el punto mueve el texto de al lado en las
tarjetas donde comparte renglón, y un renglón que se mueve se lee como un
fallo de dibujo. */
@keyframes latido-vivo {
0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--bueno) 20%, transparent); }
50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--bueno) 6%, transparent); }
}
.punto.callado { background: var(--tinta-suave); }
.grafica { width: 100%; height: 220px; background: var(--papel); border: 1px solid var(--borde); border-radius: var(--radio); }
.grafica[hidden] { display: none; }
/* Las pastillas que eligen qué medida enseña la gráfica: 44 px de toque. */
.pastillas { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .6rem; }
.pastilla { min-height: 44px; padding: .4rem .9rem; border-radius: 999px; border: 1px solid var(--borde); background: var(--papel); color: var(--tinta-suave); font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; }
.pastilla[aria-pressed="true"] { border-color: var(--acento); color: var(--acento); background: color-mix(in srgb, var(--acento) 10%, var(--papel)); }
.pastilla:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
/* ── Formularios ──────────────────────────────────────────────────────── */
label { display: block; font-size: .85rem; color: var(--tinta-suave); margin-bottom: .75rem; }
input, select, textarea {
width: 100%; margin-top: .25rem; padding: .55rem .7rem;
border: 1px solid var(--borde); border-radius: 9px;
background: var(--fondo); color: var(--tinta);
font: inherit; font-size: .92rem;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--acento); outline-offset: 1px; }
textarea { font-family: ui-monospace, Menlo, monospace; font-size: .82rem; }
.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0 1rem; }
.formulario-linea { display: flex; gap: .75rem; align-items: flex-end; flex-wrap: wrap; margin-top: .75rem; }
.formulario-linea label { margin-bottom: 0; }
.linea-cantidad { display: flex; align-items: center; gap: .5rem; }
.linea-cantidad input[type="number"] { width: 4.5rem; }
.linea-check { display: flex; align-items: center; gap: .5rem; }
.linea-check input { width: auto; }
.boton {
display: inline-block; padding: .6rem 1.1rem;
background: var(--acento); color: var(--sobre-acento); border: 1px solid var(--acento);
border-radius: 9px; font: inherit; font-weight: 600; font-size: .92rem;
cursor: pointer; text-align: center;
}
/* `a.boton` y no solo `.boton`, y esto NO es un adorno de especificidad:
`.boton` sola pierde contra cualquier regla de `` que ponga un color —y
había una—, así que el texto blanco se volvía tinta oscura sobre verde y el
botón dejaba de leerse. Un botón que no se lee es un botón que no existe. */
a.boton, button.boton { color: var(--sobre-acento); }
a.boton-suave, button.boton-suave { color: var(--acento); }
a.boton-peligro, button.boton-peligro { color: #fff; }
.boton:hover { text-decoration: none; filter: brightness(1.08); }
.boton:disabled { opacity: .5; cursor: not-allowed; }
.boton-suave { background: transparent; color: var(--acento); }
.boton-peligro { background: var(--malo); border-color: var(--malo); color: #fff; }
.boton-grande { padding: .8rem 1.6rem; font-size: 1rem; }
/* El botón pequeño de una cabecera. Sigue midiendo 44 px de alto de verdad
—el ancho se puede recortar, el área del pulgar no— y por eso el relleno
vertical es menor pero el `min-height` no baja. */
/*
* VOLVER — un control, no una frase con una flecha delante.
*
* Era `← Controles` en texto plano, y ahí hay tres cosas mal a la vez: se lee
* como parte del contenido y no como algo que se pulsa, no tiene área de toque
* —una línea de 20 px de alto en un teléfono se falla— y el `←` es un carácter,
* así que cambia de forma según la fuente que tenga cada aparato.
*
* La flecha se dibuja con dos bordes girados: escala con el texto, es del color
* que sea y se mueve al pasar por encima, que es la señal de «esto va a algún
* sitio». Y va en las cuatro zonas: volver es lo mismo en todas.
*/
.volver {
display: inline-flex; align-items: center; gap: .5rem;
min-height: 44px; padding: .4rem .95rem .4rem .8rem;
border: 1px solid var(--borde); border-radius: 999px;
background: var(--papel); color: var(--tinta-suave);
font: inherit; font-size: .88rem; font-weight: 600;
text-decoration: none; cursor: pointer;
transition: color .14s ease, border-color .14s ease, background-color .14s ease;
}
.volver::before {
content: ''; flex: none; width: .42em; height: .42em;
border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
transform: rotate(45deg);
transition: transform .14s ease;
}
.volver:hover, .volver:focus-visible {
color: var(--acento); border-color: var(--acento); background: var(--acento-claro);
}
.volver:hover::before { transform: rotate(45deg) translate(2px, -2px); }
@media (prefers-reduced-motion: reduce) {
.volver, .volver::before { transition: none; }
.volver:hover::before { transform: rotate(45deg); }
}
/*
* EL TERCER NIVEL: EL BOTÓN NEUTRO (clase `boton-fantasma`, por historia).
*
* En la barra había dos botones —uno lleno, uno de contorno— y al lado «Mi
* panel» y «Salir». La jerarquía es correcta: **quien ya es cliente sabe dónde
* entra, y el botón lleno es para quien todavía no lo es**.
*
* Pero se le dio forma SIN FONDO NI BORDE («la misma caja, transparente»), y
* una caja transparente no se ve: en claro y en oscuro seguía pareciendo texto
* pelado al lado de dos botones. El dueño lo pidió cuatro veces. Ahora tiene
* cuerpo: un relleno gris y un borde que se ven en los dos temas —la tinta
* mezclada con el papel, así que se adapta solo— y la tinta de verdad, no la
* suave. Pesa menos que los de la marca porque es gris, no porque no se vea:
*
* lleno (marca) → contorno (marca) → neutro (gris, con cuerpo)
*
* `los-botones-se-ven-botones` lo mide en el navegador, en claro y en oscuro.
*/
.boton-fantasma {
background: color-mix(in srgb, var(--tinta) 7%, var(--papel));
border-color: color-mix(in srgb, var(--tinta) 24%, var(--papel));
color: var(--tinta);
}
a.boton-fantasma, button.boton-fantasma { color: var(--tinta); }
.boton-fantasma:hover, .boton-fantasma:focus-visible {
background: color-mix(in srgb, var(--acento) 12%, var(--papel));
border-color: var(--acento);
color: var(--acento);
filter: none;
}
.boton-chico {
padding: .35rem .8rem; font-size: .85rem;
min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
}
.boton.encendido { box-shadow: inset 0 0 0 2px #fff; }
/* Encendido en un botón suave: el color de la marca, no un borde blanco que en
un fondo claro no se ve. */
.boton-suave.encendido { background: color-mix(in srgb, var(--acento) 14%, var(--papel)); border-color: var(--acento); color: var(--acento); box-shadow: none; }
.boton-estado { font-weight: 500; opacity: .8; }
.fila-botones { display: flex; gap: .6rem; flex-wrap: wrap; }
/* EL ENLACE DE TEXTO — el que de verdad es una acción escrita, no una tarjeta.
Tiene área de toque (44 px de alto real) y responde con fondo, no con
subrayado: lo mismo que hace un botón, que es lo que es. */
.enlace {
background: none; border: 0; font: inherit; font-weight: 600;
color: var(--acento); cursor: pointer; text-decoration: none;
display: inline-flex; align-items: center; min-height: 44px;
padding: .35rem .55rem; margin: 0 -.55rem; border-radius: 8px;
}
a.enlace, button.enlace { color: var(--acento); }
.enlace:hover, .enlace:focus-visible { text-decoration: none; background: var(--acento-claro); }
/* Dentro de un párrafo no puede medir 44 px de alto: ahí abriría un hueco en
mitad del texto. Es una palabra dentro de una frase, no una acción suelta. */
p .enlace, li .enlace { min-height: 0; padding: 0; margin: 0; display: inline; }
/* ── LAS MODALES ─────────────────────────────────────────────────────────
*
* Un `