/* ========================================================================== GESIO — sistema de diseño (v7.7 — rediseño "Evolución cálida") Identidad: hosteleria de barrio con herramientas serias. Fondo calido tipo papel (Crema Hueso), acento ambar de marca (Ámbar Gesio), cifras en monoespacio como una impresora de tickets. El motivo de "ticket perforado" en las tarjetas de cifras es la firma visual del panel; el plano de mesas con sillas y textura de madera es la firma visual compartida con TPV y camarero. Paleta con nombre (misma paleta, alias legibles para referirse a ella): Crema Hueso #f1ece0 -> --gesio-bg Marrón Café #4a342a -> --gesio-ink / --gesio-text Ámbar Gesio #b5622a -> --gesio-primary (marca, CTA — sin cambios) Verde Salvia #6e7f5c -> --gesio-success (estado Libre) Miel #d9a441 -> --gesio-warning (estado Ocupada / Pendiente cobro) Rojo Teja #b23a2e -> --gesio-danger (alertas, cancelaciones) Gris Piedra #8c8578 -> --gesio-text-muted Nota: el color nunca es el único portador del estado (mesa libre/ocupada/ cobrando). Va siempre acompañado de una trama o icono — ver floorplan.php. ========================================================================== */ :root { /* #a4551f y no el #b5622a de antes: con blanco encima aquel se quedaba en 4,43:1 y no llegaba al 4,5:1 de WCAG AA -- justo en el elemento activo del menú y en la pestaña seleccionada. Mismo color de marca, un peldaño más oscuro. */ --gesio-primary: #a4551f; --gesio-primary-dark: #8a461a; --gesio-primary-soft: #f4e3d3; --gesio-ink: #4a342a; --gesio-ink-soft: #3d2b22; --gesio-ink-line: #5c4436; --gesio-bg: #f1ece0; --gesio-surface: #ffffff; --gesio-surface-soft: #faf7f0; --gesio-text: #4a342a; /* Antes #8c8578: 3,1:1 sobre el fondo, por debajo del 4,5:1 exigido. Y este token rotula precisamente los KPI (HOY, TICKET MEDIO...), la miga de pan y los pies de tarjeta: si no se lee, no se entiende qué es cada número. */ --gesio-text-muted: #63635e; --gesio-border: #e2d8c6; --gesio-success: #6e7f5c; --gesio-success-soft: #e7ebe1; --gesio-warning: #d9a441; --gesio-warning-soft: #fbefda; --gesio-danger: #b23a2e; --gesio-danger-soft: #f8e2de; --gesio-info: #3d6a84; --gesio-info-soft: #e2ebef; --gesio-radius: 14px; --gesio-radius-sm: 9px; --gesio-sidebar-width: 252px; /* Alias con nombre, mismos valores — para legibilidad en el CSS */ --gesio-crema-hueso: #f1ece0; --gesio-marron-cafe: #4a342a; --gesio-ambar-gesio: #b5622a; --gesio-verde-salvia: #6e7f5c; --gesio-miel: #d9a441; --gesio-rojo-teja: #b23a2e; --gesio-gris-piedra: #8c8578; --font-display: 'Space Grotesk', 'Segoe UI Variable Display', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-body: 'Inter', 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; } /* ========================================================================== TEMAS DE COLOR -------------------------------------------------------------------------- Cada negocio elige el suyo en Ajustes → Apariencia; se aplica poniendo data-tema en el . DE DÓNDE SALEN ESTOS COLORES No están elegidos a ojo: son pasos de Radix Colors (MIT), un sistema donde cada escala tiene 12 peldaños y cada peldaño está reservado a un uso concreto -- fondo de página, fondo de tarjeta, borde, color sólido de marca, texto apagado, texto principal. Usar el peldaño que toca es lo que hace que una paleta se vea limpia; mezclar tonos "que pegan" a mano es lo que la ensucia. El reparto aquí es: paso 1 -> superficie de tarjeta paso 9/11 -> color de marca paso 2 -> fondo de la página paso 11 -> texto apagado paso 3 -> tinte suave (insignias) paso 12 -> texto principal paso 6 -> bordes y separadores Para la barra lateral oscura se usa la escala OSCURA del mismo gris, así el negro de la barra tiene el mismo matiz que el resto del tema. CONTRASTE COMPROBADO Todos los pares están medidos contra WCAG AA (4,5:1 para texto normal): texto apagado sobre fondo y sobre tarjeta, y blanco sobre el color de marca. Por eso varios temas usan el paso 11 y no el 9 como color sólido: el 9 de jade o de tomate es precioso pero con texto blanco encima se queda en 3,1:1 y no se lee. LOS COLORES DE ESTADO NO CAMBIAN Verde libre, ámbar ocupada y rojo alerta son iguales en todos los temas, a propósito: el personal los tiene aprendidos y que una mesa "ocupada" fuese de otro color en cada local sería un problema de operativa, no de gusto. ========================================================================== */ /* Opacidad de la ilustración de fondo. Los temas fríos la apagan: una ilustración cálida beige detrás de una interfaz azul o verde no pega, y además hacía que las muescas de las tarjetas se vieran como manchas. */ :root { --gesio-deco: 1; } /* --- NOCHE: oscuro cálido (Radix sandDark + tomate) --- */ :root[data-tema="noche"] { --gesio-primary: #d13415; --gesio-primary-dark: #b82f13; --gesio-primary-soft: #391714; --gesio-ink: #111110; --gesio-ink-soft: #0c0c0b; --gesio-ink-line: #3b3a37; --gesio-bg: #111110; --gesio-surface: #191918; --gesio-surface-soft: #222221; --gesio-text: #eeeeec; --gesio-text-muted: #b5b3ad; --gesio-border: #3b3a37; --gesio-success-soft: #1b2a1c; --gesio-warning-soft: #302008; --gesio-danger-soft: #391714; --gesio-info-soft: #10222d; --gesio-deco: 0; } /* --- GRAFITO: frío y nítido (Radix slate + índigo) --- */ :root[data-tema="grafito"] { --gesio-primary: #3e63dd; --gesio-primary-dark: #3358d4; --gesio-primary-soft: #edf2fe; --gesio-ink: #18191b; --gesio-ink-soft: #111113; --gesio-ink-line: #363a3f; --gesio-bg: #f9f9fb; --gesio-surface: #fcfcfd; --gesio-surface-soft: #f0f0f3; --gesio-text: #1c2024; --gesio-text-muted: #60646c; --gesio-border: #d9d9e0; --gesio-deco: 0; } /* --- JADE: verde fresco (Radix sage + jade) --- */ :root[data-tema="jade"] { --gesio-primary: #208368; --gesio-primary-dark: #1a6b55; --gesio-primary-soft: #e6f7ed; --gesio-ink: #191918; --gesio-ink-soft: #111110; --gesio-ink-line: #3b3a37; --gesio-bg: #f7f9f8; --gesio-surface: #fbfdfc; --gesio-surface-soft: #eef1f0; --gesio-text: #1a211e; --gesio-text-muted: #5f6563; --gesio-border: #d7dad9; --gesio-deco: 0; } /* --- CIRUELA: cálido con carácter (Radix mauve + ciruela) --- */ :root[data-tema="ciruela"] { --gesio-primary: #ab4aba; --gesio-primary-dark: #953ea3; --gesio-primary-soft: #fbebfb; --gesio-ink: #18191b; --gesio-ink-soft: #111113; --gesio-ink-line: #363a3f; --gesio-bg: #faf9fb; --gesio-surface: #fdfcfd; --gesio-surface-soft: #f2eff3; --gesio-text: #211f26; --gesio-text-muted: #65636d; --gesio-border: #dbd8e0; --gesio-deco: 0; } /* --- ARENA: neutro cálido y luminoso (Radix sand + tomate) --- */ :root[data-tema="arena"] { --gesio-primary: #d13415; --gesio-primary-dark: #b82f13; --gesio-primary-soft: #feebe7; --gesio-ink: #191918; --gesio-ink-soft: #111110; --gesio-ink-line: #3b3a37; --gesio-bg: #f9f9f8; --gesio-surface: #fdfdfc; --gesio-surface-soft: #f1f0ef; --gesio-text: #21201c; --gesio-text-muted: #63635e; --gesio-border: #dad9d6; } * { box-sizing: border-box; } body { margin: 0; font-family: var(--font-body); background: var(--gesio-bg); color: var(--gesio-text); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.01em; } a { color: var(--gesio-primary); text-decoration: none; } a:hover { text-decoration: underline; } :focus-visible { outline: 2px solid var(--gesio-primary); outline-offset: 2px; border-radius: 4px; } /* ---------- Login ---------- */ .auth-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; background: radial-gradient(circle at 15% 20%, rgba(181,98,42,.10), transparent 45%), radial-gradient(circle at 85% 80%, rgba(110,127,92,.08), transparent 45%), var(--gesio-bg); } .auth-card { background: var(--gesio-surface); padding: 40px; border-radius: var(--gesio-radius); border: 1px solid var(--gesio-border); box-shadow: 0 20px 44px rgba(74,52,42,0.10); width: 100%; max-width: 380px; } .auth-card h1 { margin: 0 0 4px; font-size: 24px; font-weight: 700; } .auth-card p.subtitle { color: var(--gesio-text-muted); margin: 0 0 24px; font-size: 14px; } /* ---------- Estructura general ---------- */ .app-shell { display: flex; min-height: 100vh; } .sidebar { width: var(--gesio-sidebar-width); background: var(--gesio-ink); color: #e9e2d6; padding: 0 0 20px; flex-shrink: 0; display: flex; flex-direction: column; } /* Marca del negocio, arriba del menú. Es un enlace al inicio del panel: el logo de la esquina es el sitio donde todo el mundo pulsa para volver a casa, y antes aquí no se podía pulsar. */ .sidebar .brand { display: flex; align-items: center; gap: 11px; padding: 18px 16px 16px; margin: 4px 8px 10px; border-radius: 12px; text-decoration: none; border-bottom: 1px solid var(--gesio-ink-line); border-radius: 12px 12px 0 0; } .sidebar .brand:hover { background: rgba(255,255,255,.05); } .sidebar .brand .brand-mark { width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; overflow: hidden; background: linear-gradient(155deg, var(--gesio-primary), #7c4620); display: flex; align-items: center; justify-content: center; font-size: 14.5px; font-weight: 700; color: #fff; font-family: var(--font-display); letter-spacing: .02em; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); } /* Con logo, el cuadro hace de marco: fondo claro para que un logo oscuro no desaparezca sobre el naranja, y la imagen entera dentro sin recortar. */ .sidebar .brand .brand-mark.has-logo { background: #fff; } .sidebar .brand .brand-mark img { width: 100%; height: 100%; object-fit: contain; padding: 3px; } .sidebar .brand .brand-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .sidebar .brand .brand-name { font-family: var(--font-display); font-size: 16.5px; font-weight: 700; color: #fff; letter-spacing: -0.01em; line-height: 1.15; /* Un nombre largo cortaba el menú; aquí se recorta con puntos suspensivos y el nombre completo queda en el title del enlace. */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar .brand .brand-sub { font-size: 11px; color: #a89a83; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar nav { padding: 0 10px; flex: 1; } .sidebar nav a { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 9px; color: #c9bda9; font-size: 13.5px; font-weight: 500; margin-bottom: 1px; } .sidebar nav a .nav-ic { width: 17px; height: 17px; flex-shrink: 0; opacity: .85; } .sidebar nav a:hover { background: rgba(255,255,255,0.06); color: #fff; text-decoration: none; } .sidebar nav a.active { background: var(--gesio-primary); color: #fff; font-weight: 600; } .sidebar nav a.active .nav-ic { opacity: 1; } .sidebar nav .nav-section { padding: 16px 12px 6px; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #8b7d67; font-weight: 600; display: flex; align-items: center; gap: 6px; } .sidebar nav .nav-section:first-child { padding-top: 4px; } /* Grupos de configuración: mismo estilo, matiz más tenue + engranaje. Operación (sin .is-config) queda ligeramente más presente. */ .sidebar nav .nav-section.is-config { color: #776b58; } .sidebar nav .nav-section .cfg-ic { width: 11px; height: 11px; opacity: .55; flex-shrink: 0; } .sidebar nav .nav-section:not(.is-config) { color: #a3927a; } .sidebar nav .nav-quick { padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--gesio-ink-line); } .sidebar nav .nav-quick a { background: rgba(255,255,255,0.03); } /* Separador entre el bloque de Operación y los de configuración */ .sidebar nav .nav-section.first-config { margin-top: 8px; border-top: 1px solid var(--gesio-ink-line); padding-top: 15px; } .sidebar-footer { padding: 12px 16px 0; margin-top: 8px; } .sidebar-support { font-size: 12px; color: #a89a83; background: rgba(255,255,255,.05); border-radius: 10px; padding: 10px 12px; line-height: 1.5; } .main { flex: 1; /* El padding de abajo reserva sitio para el botón flotante del asistente (64px + su margen): antes eran 6px y el perro tapaba la última fila de cualquier gráfico o tabla. */ padding: 26px 34px 104px; max-width: 1280px; margin-inline: auto; /* sin esto el contenido se pegaba a la izquierda y dejaba un hueco muerto en monitores anchos */ } .topbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 22px; } .topbar-title { min-width: 0; } .topbar-crumb { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--gesio-text-muted); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .topbar-crumb .crumb-group { color: var(--gesio-primary); font-weight: 600; } .topbar-crumb .crumb-sep { opacity: .5; } .topbar h1, .topbar h2 { margin: 0; font-size: 23px; font-weight: 700; color: var(--gesio-text); display: flex; align-items: center; gap: 10px; } .topbar .topbar-sub { margin: 3px 0 0; font-size: 13px; color: var(--gesio-text-muted); } .topbar-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; } .user-chip { font-size: 13px; color: var(--gesio-text-muted); display: flex; align-items: center; gap: 9px; flex-shrink: 0; } .user-chip .avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--gesio-primary-soft); color: var(--gesio-primary-dark); font-family: var(--font-display); font-weight: 700; font-size: 12.5px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .user-chip a { color: var(--gesio-text-muted); } .user-chip .u-name { color: var(--gesio-text); font-weight: 600; } /* ---------- Ventana tipo aplicacion: sin scroll de pagina ---------- */ html { height: 100%; } body { height: 100%; overflow: hidden; padding: 0; } /* El panel ocupa exactamente la ventana y cada columna hace su propio scroll. OJO con el aviso de "modo soporte": va por encima de .app-shell, así que si a .app-shell se le fija 100vh la página entera mide 100vh MÁS el alto del aviso -- aparece una segunda barra de desplazamiento y el menú queda cortado por abajo. Por eso el alto se reparte con flex desde el : lo que ocupe el aviso se le descuenta solo al panel, mida lo que mida (y en el móvil ocupa dos líneas). */ body.app-body { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; } body.app-body .app-shell { flex: 1; min-height: 0; height: auto; overflow: hidden; } body.app-body .sidebar, body.app-body .main { height: 100%; } .app-shell { height: 100vh; height: 100dvh; overflow: hidden; } /* La barra de desplazamiento nativa, gris clara sobre marrón oscuro, canta mucho; se tiñe para que se integre. */ .sidebar { height: 100vh; height: 100dvh; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--gesio-ink-line) transparent; } .sidebar::-webkit-scrollbar { width: 8px; } .sidebar::-webkit-scrollbar-track { background: transparent; } .sidebar::-webkit-scrollbar-thumb { background: var(--gesio-ink-line); border-radius: 4px; } .main { height: 100vh; height: 100dvh; overflow-y: auto; overflow-x: hidden; background: var(--gesio-bg); scroll-behavior: smooth; } /* La cabecera se queda arriba al bajar: en un portátil, si no, se pierden el título, el menú de usuario y la ubicación en cuanto scrolleas. El fondo va translúcido con desenfoque en vez de un color plano: encima de la ilustración de fondo, un rectángulo opaco se recortaba y se veía. */ .topbar { position: static; /* La cabecera tapa contenido al hacer scroll; debe ser opaca para que títulos, tablas y avisos no se mezclen visualmente con ella. */ background: var(--gesio-bg); padding: 2px 0 14px; border-bottom: 1px solid var(--gesio-border); box-shadow: 0 5px 12px rgba(74,52,42,.06); } .main > *:last-child { margin-bottom: 24px; } @media (max-width: 820px) { .sidebar { height: 100vh; height: 100dvh; } .main { height: 100vh; height: 100dvh; } } /* ---------- Menu lateral responsive (movil) ---------- */ .nav-toggle { display: none; } .sidebar-backdrop { display: none; } @media (max-width: 820px) { .app-shell { display: block; } .sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: 60; width: 264px; max-width: 84vw; overflow-y: auto; transform: translateX(-100%); transition: transform .25s ease; } .sidebar.open { transform: translateX(0); box-shadow: 10px 0 30px rgba(0,0,0,.35); } .sidebar-backdrop.open { display: block; position: fixed; inset: 0; background: rgba(20,16,10,.5); z-index: 55; } .main { max-width: 100%; padding: 16px 16px 4px; } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--gesio-border); background: var(--gesio-surface); border-radius: 10px; font-size: 18px; cursor: pointer; margin-right: 4px; flex-shrink: 0; color: var(--gesio-text); } .topbar { gap: 8px; padding: 2px 0 12px; } .topbar h1, .topbar h2 { font-size: 18px; } .topbar-actions { width: 100%; justify-content: flex-start; } } /* ---------- Tarjetas ---------- */ .card { background: var(--gesio-surface); border: 1px solid var(--gesio-border); border-radius: var(--gesio-radius); padding: 22px; box-shadow: 0 1px 2px rgba(74,52,42,0.04); margin-bottom: 18px; } .card > strong:first-child, .card > .flex-between:first-child > strong:first-child { font-family: var(--font-display); font-size: 15.5px; font-weight: 600; display: block; color: var(--gesio-text); } .card > .flex-between:first-child > strong:first-child { display: inline; } /* Cabecera de pagina (fuera de las tarjetas) */ .page-header { margin-bottom: 18px; } .page-header .eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--gesio-primary); font-weight: 600; margin-bottom: 4px; } .page-header h1 { margin: 0; font-size: 22px; font-weight: 700; } .page-header p { margin: 4px 0 0; color: var(--gesio-text-muted); font-size: 13.5px; max-width: 62ch; } .section-title { font-family: var(--font-display); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--gesio-text-muted); margin: 22px 0 10px; } .section-title:first-child { margin-top: 0; } /* ---------- KPI / ticket cards (elemento firma) ---------- */ .kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 18px; margin-bottom: 16px; } /* Con cinco KPI, auto-fit dejaba 3+2 en anchos intermedios y la fila de abajo quedaba colgando hacia una tercera columna vacía. A partir de 1180px caben las cinco en una línea, que es como deben leerse. */ @media (min-width: 1180px) { .kpi-row { grid-template-columns: repeat(5, 1fr); } } @media (min-width: 820px) and (max-width: 1179px) { .kpi-row { grid-template-columns: repeat(3, 1fr); } } .kpi-ticket { background: var(--gesio-surface); border: 1px solid var(--gesio-border); border-radius: 12px; padding: 16px 18px 14px; position: relative; /* El troquelado se dibuja DENTRO de la tarjeta, como una línea de puntos bajo el borde superior. Antes eran además dos círculos colocados fuera (left/right: -8px) rellenos de var(--gesio-bg): sobre un color plano colaban, pero detrás hay una ilustración, así que salían como dos discos opacos que no encajaban con nada. Y con 14px de separación entre tarjetas, los círculos de tarjetas vecinas se solapaban y llenaban el canalón de bolitas dobles. Dentro de la tarjeta el efecto se lee igual y no depende de lo que haya detrás. */ background-image: repeating-linear-gradient(90deg, var(--gesio-border) 0 7px, transparent 7px 14px); background-size: 100% 2px; background-repeat: no-repeat; background-position: top 7px left 0; } .kpi-ticket .eyebrow { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--gesio-text-muted); font-weight: 600; margin-bottom: 7px; } .kpi-ticket .value { font-family: var(--font-mono); font-size: 25px; font-weight: 600; color: var(--gesio-text); line-height: 1.1; /* Cifras de ancho fijo y sin espaciado extra: así "0,00 €" y "2.386,20 €" comparten la misma rejilla y la fila no baila. */ font-variant-numeric: tabular-nums; letter-spacing: 0; } .kpi-ticket .foot { font-size: 12px; color: var(--gesio-text-muted); margin-top: 5px; } .kpi-ticket .trend { font-size: 12px; font-weight: 700; margin-top: 6px; } .kpi-ticket .trend.up { color: var(--gesio-success); } .kpi-ticket .trend.down { color: var(--gesio-danger); } /* Compat: tarjetas de estadistica antiguas siguen funcionando */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px; } .stat-card { background: var(--gesio-surface); border: 1px solid var(--gesio-border); border-radius: var(--gesio-radius); padding: 18px 20px; box-shadow: 0 1px 2px rgba(74,52,42,0.04); } .stat-card .value { font-family: var(--font-mono); font-size: 26px; font-weight: 600; } .stat-card .label { font-size: 13px; color: var(--gesio-text-muted); } .stat-card.accent-primary { border-left: 4px solid var(--gesio-primary); } .stat-card.accent-success { border-left: 4px solid var(--gesio-success); } .stat-card.accent-warning { border-left: 4px solid var(--gesio-warning); } .stat-card.accent-danger { border-left: 4px solid var(--gesio-danger); } .stat-card .hint { font-size: 12px; color: var(--gesio-text-muted); margin-top: 4px; } /* ---------- Cuadricula utilitaria ---------- */ .grid { display: grid; gap: 16px; } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .grid-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .grid-cards { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } .grid-tiles { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } .grid-form-3 { grid-template-columns: 2fr 1fr 1fr; } .grid-form-4 { grid-template-columns: 2fr 1fr 1fr 1fr; } @media (max-width: 700px) { .grid-form-3, .grid-form-4 { grid-template-columns: 1fr; } } /* ---------- Botones ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 18px; border-radius: 9px; border: 1px solid transparent; background: var(--gesio-primary); color: #fff; font-family: var(--font-body); font-weight: 600; font-size: 14px; cursor: pointer; transition: background .12s, border-color .12s, transform .05s; } .btn:hover { background: var(--gesio-primary-dark); text-decoration: none; } .btn:active { transform: translateY(1px); } .btn-secondary { background: var(--gesio-surface); color: var(--gesio-text); border-color: var(--gesio-border); } .btn-secondary:hover { background: var(--gesio-surface-soft); border-color: #d6cbb4; } .btn-danger { background: var(--gesio-danger); } .btn-danger:hover { background: #93342a; } .btn-success { background: var(--gesio-success); } .btn-success:hover { background: #566b49; } .btn-sm { padding: 6px 12px; font-size: 12.5px; border-radius: 7px; } .btn-block { width: 100%; } .btn:disabled { opacity: .5; cursor: not-allowed; } /* ---------- Formularios ---------- */ .form-group { margin-bottom: 16px; } .form-group label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--gesio-text); } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--gesio-border); border-radius: 9px; font-size: 14px; font-family: inherit; background: var(--gesio-surface); color: var(--gesio-text); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--gesio-primary); box-shadow: 0 0 0 3px var(--gesio-primary-soft); } input, select, textarea { accent-color: var(--gesio-primary); } /* ---------- Tablas ---------- */ table { width: 100%; border-collapse: collapse; font-size: 13.5px; } th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--gesio-border); } th { color: var(--gesio-text-muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; } tbody tr:hover { background: var(--gesio-surface-soft); } tbody tr:last-child td { border-bottom: none; } /* Tablas que se apilan en móvil: cada fila pasa a ser una mini-tarjeta en vertical (cabecera oculta, cada celda muestra su etiqueta delante) en vez de desbordar o exigir scroll lateral -- la tabla "se pliega", como pide la regla de oro de pantalla. Se activa con class="table-stack" y un data-label en cada . */ @media (max-width: 640px) { table.table-stack thead { display: none; } table.table-stack, table.table-stack tbody, table.table-stack tr, table.table-stack td { display: block; width: 100%; } table.table-stack tr { border: 1px solid var(--gesio-border); border-radius: 10px; margin-bottom: 10px; padding: 4px 12px; background: var(--gesio-surface); } table.table-stack td { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; text-align: right; border-bottom: 1px solid var(--gesio-bg); padding: 8px 0; } table.table-stack td:last-child { border-bottom: none; } table.table-stack td::before { content: attr(data-label); text-align: left; text-transform: uppercase; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; color: var(--gesio-text-muted); flex-shrink: 0; padding-top: 2px; } table.table-stack td[data-label=""]::before, table.table-stack td:not([data-label])::before { content: none; } table.table-stack tfoot { display: block; } table.table-stack tfoot tr { border: none; background: none; padding: 8px 4px 0; } } /* Líneas de factura/albarán: en vez de una tabla rígida de columnas fijas, cada línea es una fila flexible que se pliega sola en pantallas estrechas -- nunca desborda, no hace falta media query aparte. */ .line-items { margin-top: 10px; } .line-item { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; padding: 12px 0; border-bottom: 1px solid var(--gesio-border); } .line-item:last-child { border-bottom: none; } .li-field { display: flex; flex-direction: column; gap: 4px; } .li-field label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--gesio-text-muted); } .li-field input { margin: 0; } .li-desc { flex: 3 1 220px; } .li-qty, .li-price, .li-iva { flex: 1 1 80px; max-width: 130px; } .li-remove { flex-shrink: 0; align-self: flex-end; } .line-items-head { display: none; } @media (min-width: 641px) { /* En pantalla ancha se ve como una tabla de verdad: cabecera visible, una sola fila por línea, sin las etiquetas repetidas de cada campo. */ .line-items-head { display: flex; gap: 10px; padding: 0 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--gesio-text-muted); font-weight: 600; } .line-items-head .lih-desc { flex: 3 1 220px; } .line-items-head .lih-qty, .line-items-head .lih-price, .line-items-head .lih-iva { flex: 1 1 80px; max-width: 130px; } .line-items-head .lih-remove { width: 36px; flex-shrink: 0; } .line-item .li-field label { display: none; } } /* ---------- Insignias ---------- */ .badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 600; } .badge-trial { background: var(--gesio-warning-soft); color: #7a5a1e; } .badge-active { background: var(--gesio-success-soft); color: var(--gesio-success); } .badge-suspended { background: var(--gesio-danger-soft); color: var(--gesio-danger); } .badge-cancelled { background: var(--gesio-border); color: var(--gesio-text-muted); } /* ---------- Alertas ---------- */ .alert { padding: 12px 16px; border-radius: 10px; font-size: 14px; margin-bottom: 18px; border: 1px solid transparent; } .alert-success { background: var(--gesio-success-soft); color: var(--gesio-success); border-color: #d6ddce; } .alert-error { background: var(--gesio-danger-soft); color: var(--gesio-danger); border-color: #eed4cf; } .text-muted { color: var(--gesio-text-muted); } .flex-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; } /* ---------- Estado vacio ---------- */ .empty-state { text-align: center; padding: 34px 20px; color: var(--gesio-text-muted); font-size: 14px; } .empty-state .ic { font-size: 28px; margin-bottom: 8px; opacity: .7; } /* ============ Panel moderno (dashboard) ============ */ .dash-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 22px; } .kpi { background: var(--gesio-surface); border: 1px solid var(--gesio-border); border-radius: 16px; padding: 20px; box-shadow: 0 1px 2px rgba(74,52,42,0.04); transition: box-shadow .2s, transform .2s; } .kpi:hover { box-shadow: 0 10px 26px rgba(74,52,42,0.09); transform: translateY(-2px); } .kpi-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .kpi-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; } .kpi-icon svg { width: 22px; height: 22px; } .kpi-icon.ico-indigo { background: var(--gesio-primary-soft); color: var(--gesio-primary-dark); } .kpi-icon.ico-green { background: var(--gesio-success-soft); color: var(--gesio-success); } .kpi-icon.ico-amber { background: var(--gesio-warning-soft); color: var(--gesio-warning); } .kpi-icon.ico-red { background: var(--gesio-danger-soft); color: var(--gesio-danger); } .kpi-trend { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 20px; } .kpi-trend.up { background: var(--gesio-success-soft); color: var(--gesio-success); } .kpi-trend.flat { background: var(--gesio-border); color: var(--gesio-text-muted); } .kpi-value { font-family: var(--font-mono); font-size: 28px; font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; } .kpi-label { font-size: 13px; color: var(--gesio-text-muted); margin-top: 4px; } .chart-card { background: var(--gesio-surface); border: 1px solid var(--gesio-border); border-radius: 16px; padding: 20px 22px; box-shadow: 0 1px 2px rgba(74,52,42,0.04); } .chart-card .chart-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; } .chart-card h3 { margin: 0; font-size: 15px; font-weight: 700; } .chart-card .sub { font-size: 12px; color: var(--gesio-text-muted); } .chart-wrap { position: relative; width: 100%; } .chart-wrap.h-lg { height: 280px; } .chart-wrap.h-md { height: 240px; } .dash-row { display: grid; gap: 20px; margin-bottom: 20px; } .dash-row.cols-2 { grid-template-columns: 1.7fr 1fr; } .dash-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; } .legend { list-style: none; padding: 0; margin: 12px 0 0; } .legend li { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 5px 0; } .legend .dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; } .legend .lg-name { flex: 1; color: var(--gesio-text); } .legend .lg-val { font-weight: 700; font-family: var(--font-mono); } .mini-bars { display: flex; align-items: flex-end; gap: 8px; height: 120px; margin-top: 12px; } .mini-bars .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; } .mini-bars .bar { width: 100%; max-width: 40px; background: var(--gesio-primary); border-radius: 6px 6px 0 0; min-height: 3px; transition: height .2s; } .mini-bars .bar-val { font-size: 12px; font-weight: 700; margin-bottom: 4px; font-family: var(--font-mono); } .mini-bars .bar-lbl { font-size: 11px; color: var(--gesio-text-muted); margin-top: 6px; } .dist-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .dist-row .dist-label { width: 130px; font-size: 13px; } .dist-row .dist-track { flex: 1; background: var(--gesio-bg); border-radius: 6px; height: 18px; overflow: hidden; } .dist-row .dist-fill { height: 100%; background: var(--gesio-primary); } .dist-row .dist-num { width: 40px; text-align: right; font-size: 13px; font-weight: 700; font-family: var(--font-mono); } .quick-actions { display: flex; flex-wrap: wrap; gap: 10px; } @media (max-width: 900px) { .dash-kpis { grid-template-columns: repeat(2, 1fr); } .dash-row.cols-2, .dash-row.cols-3 { grid-template-columns: 1fr; } } /* ---------- Pestanas (areas / zonas) ---------- */ /* Las pestañas acompañan a la cabecera al bajar: cambiar de "Resumen" a "Tickets" sin volver arriba del todo. El 'top' es el alto aproximado de la cabecera pegada. */ .tab-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; position: sticky; top: 78px; z-index: 7; background: color-mix(in srgb, var(--gesio-bg) 86%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 6px 0; } .tab-pill { padding: 8px 15px; border-radius: 20px; background: var(--gesio-surface); border: 1px solid var(--gesio-border); color: var(--gesio-text); text-decoration: none; font-weight: 600; font-size: 13.5px; cursor: pointer; } .tab-pill.active { background: var(--gesio-primary); color: #fff; border-color: var(--gesio-primary); } .tab-pill:hover { text-decoration: none; border-color: var(--gesio-primary); } /* ---------- Toolbar de acciones ---------- */ /* flex-end y no center: a la izquierda hay bloques de etiqueta+desplegable (más altos) y a la derecha un botón suelto; centrándolo quedaba flotando por encima de la línea de los desplegables. */ .toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 14px; } .toolbar .spacer { flex: 1; } /* ---------- Modo soporte (impersonacion) ---------- */ /* Aviso de "modo soporte". Lleva colores propios y no --gesio-warning: el ámbar de estado con texto blanco daba 2,25:1, el peor contraste de la pantalla justo en el mensaje que más importa leer. Este par da 7,4:1. position/z-index: el fondo decorativo de .main es un pseudo-elemento fixed; aunque va en z-index:-1, se le declara aquí la capa de forma explícita para que ningún cambio futuro en ese fondo lo vuelva a tapar. */ .support-banner { position: relative; z-index: 3; background: #7c4a06; color: #fff; padding: 10px 16px; text-align: center; font-size: 13.5px; font-weight: 500; } .support-banner a { color: #fff; text-decoration: underline; margin-left: 8px; } /* ---------- Kiosco de fichaje ---------- */ .kiosk-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, var(--gesio-ink), #241a14); padding: 20px; } .kiosk-card { background: var(--gesio-surface); border-radius: 20px; padding: 36px; width: 100%; max-width: 360px; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,0.35); } .kiosk-card h1 { margin: 0 0 4px; font-size: 22px; } .kiosk-card p.subtitle { color: var(--gesio-text-muted); margin: 0 0 20px; font-size: 14px; } .pin-display { font-family: var(--font-mono); font-size: 32px; letter-spacing: 10px; background: var(--gesio-bg); border-radius: 10px; padding: 14px; margin-bottom: 20px; min-height: 26px; font-weight: 600; } .pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .pin-pad button { font-size: 22px; padding: 18px 0; border: none; border-radius: 12px; background: var(--gesio-bg); color: var(--gesio-text); cursor: pointer; font-family: var(--font-mono); } .pin-pad button:active { background: var(--gesio-border); } .pin-pad button.pin-clear { background: var(--gesio-danger-soft); color: var(--gesio-danger); } .pin-pad button.pin-submit { background: var(--gesio-primary); color: #fff; } .kiosk-result { margin-top: 18px; font-size: 15px; font-weight: 600; } .kiosk-result.success { color: var(--gesio-success); } .kiosk-result.error { color: var(--gesio-danger); } /* ============================================================ Asistente IA -- burbujas de chat, compartidas por la página completa (asistente.php) y el panel flotante (footer.php). ============================================================ */ .ia-msg { max-width: 80%; padding: 10px 14px; border-radius: 14px; line-height: 1.45; font-size: 14.5px; white-space: pre-wrap; } .ia-u { align-self: flex-end; background: var(--gesio-primary); color: #fff; border-bottom-right-radius: 4px; } .ia-a { align-self: flex-start; background: var(--gesio-bg); color: var(--gesio-text); border-bottom-left-radius: 4px; } .ia-a.ia-pensando { color: var(--gesio-text-muted); font-style: italic; } /* ---- Botón flotante ---- */ .ia-fab { position: fixed; right: 22px; bottom: 22px; z-index: 70; width: 64px; height: 64px; display: block; } .ia-fab:hover { transform: scale(1.06); } .ia-fab-circle { display: block; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; box-shadow: 0 4px 18px rgba(40,30,15,.28), 0 0 0 3px var(--gesio-surface); transition: transform .15s ease; } .ia-fab:hover .ia-fab-circle { transform: scale(1.06); } .ia-fab video { width: 64px; height: 64px; object-fit: cover; display: block; background: var(--gesio-surface); } .ia-fab-dot { position: absolute; top: 0; right: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--gesio-primary); border: 2px solid var(--gesio-surface); } .ia-fab-tip { position: absolute; right: 74px; bottom: 50%; transform: translateY(50%); background: #2a1f18; color: #fff; font-size: 12.5px; font-weight: 700; padding: 7px 12px; border-radius: 8px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s ease; } .ia-fab:hover .ia-fab-tip, .ia-fab:focus-visible .ia-fab-tip { opacity: 1; } @media (prefers-reduced-motion: reduce) { .ia-fab video { display: none; } .ia-fab-circle.ia-fab-circle-fallback { background-size: cover; background-position: center; } } @media (max-width: 640px) { .ia-fab { right: 14px; bottom: 14px; width: 56px; height: 56px; } .ia-fab-circle, .ia-fab video { width: 56px; height: 56px; } .ia-fab-tip { display: none; } } /* ---- Panel flotante del chat ---- */ .ia-panel { position: fixed; right: 22px; bottom: 98px; z-index: 71; width: 380px; max-width: calc(100vw - 32px); height: min(600px, 75vh); background: var(--gesio-surface); border-radius: 16px; box-shadow: 0 14px 42px rgba(40,30,15,.3); display: flex; flex-direction: column; overflow: hidden; opacity: 0; transform: translateY(14px) scale(.97); pointer-events: none; transition: opacity .16s ease, transform .16s ease; } .ia-panel.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .ia-panel-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; flex-shrink: 0; background: linear-gradient(165deg, #3d2b22, #4a342a); color: #fff; } .ia-panel-head img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .ia-panel-head strong { font-size: 14.5px; flex: 1; } .ia-panel-head a { color: rgba(255,255,255,.75); font-size: 12px; text-decoration: none; } .ia-panel-head a:hover { color: #fff; } .ia-panel-close { background: none; border: none; color: #fff; opacity: .8; font-size: 20px; line-height: 1; cursor: pointer; padding: 4px 6px; flex-shrink: 0; } .ia-panel-close:hover { opacity: 1; } .ia-panel-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--gesio-bg); } .ia-panel-empty { margin: auto; text-align: center; color: var(--gesio-text-muted); font-size: 13px; padding: 10px; max-width: 40ch; } .ia-panel-setup { margin: auto; text-align: center; padding: 10px; max-width: 40ch; } .ia-panel-setup p { color: var(--gesio-text-muted); font-size: 13px; margin: 8px 0 14px; } .ia-panel-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--gesio-border); flex-shrink: 0; } .ia-panel-form textarea { flex: 1; resize: none; border: 1px solid var(--gesio-border); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 13.5px; max-height: 84px; } .ia-panel-form button { flex-shrink: 0; align-self: flex-end; } @media (max-width: 640px) { .ia-panel { right: 10px; left: 10px; width: auto; bottom: 82px; height: min(70vh, 560px); } } /* -------------------------------------------------------------------------- Tablas de cifras: las celdas alineadas a la derecha no se parten. A anchos medios (la tarjeta baja a ~320px, algo muy común entre 820 y 1280px) salía "3 / uds." en dos líneas y el € caído a la línea siguiente, y solo en algunas filas -- con lo que las alturas quedaban desiguales y el alineado a la derecha se veía roto. -------------------------------------------------------------------------- */ table td[style*="text-align:right"], table td[style*="text-align: right"], table th[style*="text-align:right"], table th[style*="text-align: right"] { white-space: nowrap; } /* Tarjetas en rejilla: cada una a su altura, sin estirarse a la de la vecina. "Cobros del mes" se estiraba a la altura de "Más vendidos" y quedaba con tres cuartos de tarjeta vacía. */ .grid-2 { align-items: start; } /* -------------------------------------------------------------------------- Títulos de tarjeta. Antes eran , así que la página no tenía estructura navegable: quien usa lector de pantalla no podía saltar de sección en sección. Ahora son encabezados de verdad, con el aspecto que tenían antes para no cambiar nada visualmente. -------------------------------------------------------------------------- */ .card-title { margin: 0 0 2px; font-family: var(--font-display); font-size: 15.5px; font-weight: 700; color: var(--gesio-text); letter-spacing: -0.01em; } /* Miga de pan: era 10,5px, en mayúsculas, con espaciado entre letras y por debajo del contraste mínimo -- cuatro cosas en contra a la vez. Sube de tamaño, pierde el espaciado forzado y toma el color de texto apagado, que ya cumple AA. */ .topbar-crumb { font-size: 12px; letter-spacing: .02em; text-transform: none; color: var(--gesio-text-muted); } /* ========================================================================== SUPERADMIN -------------------------------------------------------------------------- */ /* Entradas del menú que aún no existen. Se dejan a la vista para que se sepa por dónde va el producto, pero apagadas: así nadie pierde tiempo entrando a una pantalla vacía creyendo que hay algo. */ .sidebar nav a.nav-wip { opacity: .45; } .sidebar nav a.nav-wip:hover { opacity: .7; } .nav-pronto { margin-left: auto; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; padding: 2px 6px; border-radius: 999px; border: 1px solid currentColor; opacity: .8; } /* Buscador de negocios en la cabecera. flex:1 con un tope: se queda entre el título y el usuario sin comerse ninguno de los dos. */ .admin-buscar { flex: 1; max-width: 320px; margin: 0 8px; } .admin-buscar input { width: 100%; padding: 8px 13px; font-size: 13.5px; font-family: inherit; color: var(--gesio-text); background: var(--gesio-surface); border: 1px solid var(--gesio-border); border-radius: 999px; } .admin-buscar input:focus { outline: 2px solid var(--gesio-primary); outline-offset: -1px; } /* Chip de usuario: antes era "Nombre · Salir" en texto suelto. */ .user-chip { display: flex; align-items: center; gap: 9px; font-size: 13.5px; } .user-chip .user-avatar { width: 30px; height: 30px; border-radius: 50%; flex: none; background: var(--gesio-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; font-family: var(--font-display); } .user-chip .user-nombre { color: var(--gesio-text); font-weight: 600; } /* Texto solo para lectores de pantalla: la etiqueta del buscador no se ve, pero sin ella el campo se anuncia sin nombre. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @media (max-width: 900px) { /* En pantalla estrecha el buscador estorba más que ayuda y el nombre largo del admin parte la cabecera en dos líneas. */ .admin-buscar { display: none; } .user-chip .user-nombre { display: none; } }