/* ============================================================ TapBox · capa de marca para el panel Filament ============================================================ */ @import url('/fonts/tapbox/tapbox-fuentes.css'); :root { --tb-navy: #20282D; --tb-blue: #2563EB; --tb-display: 'Schibsted Grotesk', 'Inter', system-ui, sans-serif; --tb-mono: 'IBM Plex Mono', ui-monospace, monospace; } .fi-header-heading, .fi-section-header-heading, .fi-section-heading, .fi-modal-heading, .fi-ta-header-heading, .fi-wi-stats-overview-stat-value, .fi-form-section-header-heading { font-family: var(--tb-display) !important; letter-spacing: -0.01em; } .fi-topbar .fi-logo, .fi-sidebar-header .fi-logo { font-family: var(--tb-display); } .fi-btn { border-radius: 0.7rem; } .fi-sidebar-item-active .fi-sidebar-item-button { box-shadow: inset 3px 0 0 0 var(--tb-blue); } .fi-wi-stats-overview-stat-label { font-family: var(--tb-mono); letter-spacing: 0.04em; } .tb-logo-light { display: none !important; } .dark .tb-logo-dark { display: none !important; } .dark .tb-logo-light { display: block !important; } .fi-tabs-item-label { color: #111722; } .dark .fi-tabs-item-label { color: #ffffff; } /* — Inicio: cabecera de bienvenida (hero) — */ .tb-hero { position: relative; overflow: hidden; border-radius: 18px; padding: 30px 32px; color: #fff; background: linear-gradient(168deg, #2A343A 0%, #20282D 62%, #171D21 100%); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 24px 50px -30px rgba(0,0,0,.55); } /* Filo azul superior: firma de marca sin recurrir a degradados de color. */ .tb-hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, #5B8DF7, rgba(91, 141, 247,0)); } .tb-hero__mark { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; } .tb-hero__mark img { height: 28px; width: auto; display: block; } /* X para cerrar el menú lateral (solo móvil; no tapa los logos, va a la derecha) */ .tb-sidebar-close { display: none; } @media (max-width: 1024px) { .tb-sidebar-close { display: inline-flex; align-items: center; justify-content: center; margin-inline-start: auto; flex: none; width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--tb-d-border, #e2e8f0); background: transparent; color: inherit; cursor: pointer; } .tb-sidebar-close:active { transform: scale(.94); } } /* ═══════════════════════════════════════════════════════════════════════ FIRMA DE MARCA: el negocio manda, TapBox firma El panel es del cliente, así que su logo es el que se ve; TapBox queda al lado, más chico y en gris, detrás de una línea fina. La versión anterior ponía las dos marcas del mismo tamaño y con un "Usa" entre medio: el proveedor pesaba más que el dueño de casa, y la frase se leía cortada. ═══════════════════════════════════════════════════════════════════════ */ .tb-brand { display: inline-flex; align-items: center; gap: .7rem; line-height: 1; } /* Logo del negocio: es el protagonista. El fondo blanco con esquinas redondeadas sirve para los logos de tinta oscura, que sobre el tema oscuro desaparecerían. */ .tb-brand__cliente { height: 2.5rem; width: auto; max-width: 150px; display: block; border-radius: 7px; background: #fff; padding: 3px 7px; box-sizing: content-box; } /* La línea fina: separa sin decir nada y aguanta cualquier ancho de logo. */ .tb-brand__linea { width: 1px; height: 2.1rem; background: currentColor; opacity: .17; flex: none; } .tb-brand__firma { display: inline-flex; flex-direction: column; gap: .18rem; } /* "FUNCIONA CON": micro-texto en versalitas. Tiene que leerse, no llamar la atención — por eso va chico, espaciado y apagado. */ .tb-brand__nota { font-family: 'Schibsted Grotesk', 'Inter', ui-sans-serif, sans-serif; font-size: .5625rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; opacity: .5; white-space: nowrap; } .tb-brand__marca { display: inline-flex; align-items: center; gap: .3rem; opacity: .82; } .tb-brand__marca img { height: 1.15rem; width: auto; display: block; } .tb-brand__palabra { font-family: 'Schibsted Grotesk', 'Inter', ui-sans-serif, sans-serif; font-weight: 600; font-size: .9375rem; letter-spacing: -.02em; color: currentColor; } /* Logo del negocio en la barra del celular. Oculto en el computador, donde el menú lateral ya lo muestra fijo; ahí repetirlo sería ruido. El corte es el mismo que usa Filament para plegar el menú (1024px). */ .tb-brand-movil { display: none; } @media (max-width: 1023px) { .tb-brand-movil { display: inline-flex; align-items: center; flex: none; margin-inline-end: .5rem; } .tb-brand-movil img { /* Se mide en vw: en un teléfono angosto el logo cede ancho solo, en vez de dejar el buscador reducido a "Bus". */ height: 1.75rem; width: auto; max-width: min(88px, 23vw); display: block; border-radius: 6px; background: #fff; padding: 2px 5px; box-sizing: content-box; } /* El botón del menú va primero, como en cualquier app: el pulgar lo busca en el borde. El logo se dibuja antes en el HTML, así que se reordena acá. */ .fi-topbar-open-sidebar-btn, .fi-topbar-close-sidebar-btn { order: -1; } /* ── Buscador plegado a lupa ────────────────────────────────────────── En 375px no caben el logo, el buscador y los tres botones: el buscador quedaba reducido a 41px útiles, mostrando "Bu". Plegado a la lupa deja sitio al logo, y al tocarlo se abre con espacio real para escribir. La zona de toque es la ETIQUETA del campo, no el icono: pulsar el icono no enfoca nada (es un SVG decorativo), mientras que una etiqueta enfoca su campo por sí sola, sin una línea de JavaScript. Sigue leyéndose en los lectores de pantalla porque se esconde con sangría, no se elimina. */ /* Filament separa los elementos de la derecha con 1rem (column-gap). Con el buscador plegado a icono, ese hueco a ambos lados lo dejaba flotando lejos del avatar y del resto. En móvil se aprieta la separación. */ .fi-topbar-end { column-gap: .375rem; min-width: 0; } .fi-topbar .fi-global-search-ctn { flex: none; width: 2.25rem; transition: width .2s ease; } /* Desplegado NO se le da un ancho calculado: antes era 100vw menos una medida a ojo, y cuando no calzaba con el ancho real de la barra el campo se montaba encima del avatar. Ahora simplemente se reparte el espacio que sobra, así nunca puede pedir más del que hay. */ .fi-topbar .fi-global-search-ctn:focus-within { flex: 1 1 auto; width: auto; min-width: 0; } /* Y mientras se escribe, el logo del negocio cede su lugar: es lo único prescindible de la barra, y así el campo queda cómodo de verdad. */ .fi-topbar:has(.fi-global-search-ctn:focus-within) .tb-brand-movil, .fi-topbar:has(.fi-global-search-ctn:focus-within) .fi-topbar-start { display: none; } .fi-topbar .fi-global-search-field { position: relative; } .fi-topbar .fi-global-search-field .fi-sr-only { position: absolute; inset: 0; width: auto; height: auto; margin: 0; clip: auto; clip-path: none; overflow: visible; white-space: normal; text-indent: -9999px; cursor: pointer; z-index: 2; } .fi-topbar .fi-global-search-ctn:focus-within .fi-sr-only { display: none; } /* Plegado, el buscador es un ICONO, no una caja. Filament le deja su marco blanco de campo de texto: un cuadrado de 40px alrededor de una lupa de 18 se ve enorme y desalineado con los botones vecinos, que sí son sólo icono. Mientras está plegado se le quita el marco; al enfocarlo vuelve, porque ahí sí es un campo donde se escribe. */ .fi-topbar .fi-global-search-ctn:not(:focus-within) .fi-input-wrp { background: transparent !important; box-shadow: none !important; border-color: transparent !important; min-height: 0; } /* Plegado ocupa exactamente lo que ocupa un botón de icono de la barra, ni un pixel más: antes medía 2,5rem con relleno propio adentro y se veía separado de sus vecinos, como si sobrara aire a su alrededor. */ .fi-topbar .fi-global-search-ctn:not(:focus-within) { width: 2.25rem; } .fi-topbar .fi-global-search-ctn:not(:focus-within) .fi-global-search-field, .fi-topbar .fi-global-search-ctn:not(:focus-within) .fi-input-wrp, .fi-topbar .fi-global-search-ctn:not(:focus-within) .fi-input-wrp-content-ctn { display: flex; align-items: center; justify-content: center; width: 100%; height: 2.25rem; padding: 0 !important; margin: 0 !important; gap: 0 !important; } /* La lupa, del tamaño y color de los demás iconos de la barra. */ .fi-topbar .fi-global-search-ctn:not(:focus-within) .fi-input-wrp-prefix { padding: 0 !important; margin: 0 !important; flex: none; } .fi-topbar .fi-global-search-ctn:not(:focus-within) .fi-input-wrp svg { width: 1.25rem; height: 1.25rem; } /* Plegado no hay dónde escribir: el campo no debe reservar ancho. */ .fi-topbar .fi-global-search-ctn:not(:focus-within) .fi-input { width: 0 !important; min-width: 0 !important; padding: 0 !important; } } /* El avatar se dejaba aplastar cuando la barra iba justa de ancho: en el teléfono llegó a medir 13px y se montaba con el botón de tema. */ .fi-topbar .fi-user-menu { flex: none; } /* Sin logo del negocio no hay a quién cederle el lugar: TapBox va completo. */ .tb-brand--solo img { height: 2.6rem; width: auto; display: block; } .tb-brand__palabra--grande { font-size: 1.45rem; } .tb-hero__word { font-family: var(--tb-display); font-weight: 600; font-size: 20px; letter-spacing: -.02em; line-height: 1; } .tb-hero__word .b { color: #5B8DF7; } .tb-hero__greet { font-family: var(--tb-display); font-weight: 600; font-size: clamp(28px, 4vw, 40px); letter-spacing: -.03em; line-height: 1.05; } .tb-hero__greet b { color: #5B8DF7; font-weight: 600; } .tb-hero__bottom { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: 26px; } .tb-quickgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 12px; flex: 1 1 100%; } .tb-quick { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 16px; border-radius: 12px; font-family: var(--tb-display); font-size: 14.5px; font-weight: 500; letter-spacing: -.01em; text-decoration: none; color: #fff; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); transition: transform .18s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease; } .tb-quick:hover { background: rgba(91, 141, 247,.14); border-color: rgba(91, 141, 247,.55); transform: translateY(-2px); box-shadow: none; color: #C8EAD9; } .tb-quick:active { transform: translateY(-1px); } .tb-quick svg { width: 20px; height: 20px; } .tb-hero__clock { flex: none; margin-left: auto; text-align: right; line-height: 1.15; } .tb-hero__date { font-family: var(--tb-mono); font-size: 11px; text-transform: capitalize; color: rgba(255,255,255,.9); letter-spacing: .3px; } .tb-hero__time { font-family: var(--tb-mono); font-size: 15px; font-weight: 500; color: #fff; letter-spacing: .5px; margin-top: 1px; } @media (max-width: 760px) { .tb-quickgrid { grid-template-columns: 1fr; } } /* — Texto más nítido (HD) en todo el panel — */ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* — Tema claro/oscuro: botón aparte en el topbar; el menú del avatar queda solo con "Cerrar sesión" — */ .fi-dropdown-list:has(.fi-theme-switcher) { display: none !important; } .tb-theme-trigger { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border: 0; background: transparent; border-radius: .5rem; color: #6b7280; cursor: pointer; transition: background .15s, color .15s; margin-inline-end: .25rem; } .tb-theme-trigger svg { width: 1.3rem; height: 1.3rem; } .tb-theme-trigger:hover { background: rgba(0,0,0,.05); color: #374151; } .dark .tb-theme-trigger { color: #A1A1A6; } .dark .tb-theme-trigger:hover { background: rgba(255,255,255,.08); color: #E5E5EA; } /* — Reloj (fecha + hora) en la barra superior — */ .tb-clock { display: none; align-items: center; font-family: var(--tb-mono); font-size: 12.5px; letter-spacing: .2px; color: #6b7280; text-transform: capitalize; white-space: nowrap; margin-inline-end: .85rem; } .dark .tb-clock { color: #A1A1A6; } @media (min-width: 768px) { .tb-clock { display: inline-flex; } } /* — Iconos del menú lateral: identidad azul de marca. Inactivos en un azul apagado; hover en el azul de marca; el activo conserva el color de marca que aplica Filament. Claro y oscuro. — */ .fi-sidebar-item:not(.fi-active) .fi-sidebar-item-icon { color: #4F6E8C !important; transition: color .15s; } /* El azul fijo se fue a `--primary`: ver «el realce es del color de la persona». */ .dark .fi-sidebar-item:not(.fi-active) .fi-sidebar-item-icon { color: #9FB8CE !important; } /* ═══════════════════════════════════════════════════════════════════════ MODO OSCURO "PRO" — solo .dark Estilo iOS: fondo negro real + tarjetas gris elevado (#1c1c1e) + bordes neutros sutiles. Jerarquía por elevación, como Ajustes de iPhone. ═══════════════════════════════════════════════════════════════════════ */ :root { --tb-d-bg:#000000; --tb-d-surface:#1C1C1E; --tb-d-card:#2C2C2E; --tb-d-sunken:#3A3A3C; --tb-d-border:rgba(255,255,255,.09); --tb-d-border-strong:rgba(255,255,255,.15); } /* Fondo general de la app */ .dark, .dark body, .dark .fi-body { background-color: var(--tb-d-bg) !important; } /* Barra lateral y superior: un pelo más claras que el fondo + borde frío */ .dark .fi-sidebar { background-color: var(--tb-d-surface) !important; border-inline-end: 1px solid var(--tb-d-border) !important; } .dark .fi-topbar { background-color: rgba(0,0,0,.8) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--tb-d-border) !important; } /* Tarjetas / secciones / KPIs / tablas: superficie elevada, borde definido y sombra sutil. OJO: el contenedor real de tabla es .fi-ta-ctn (no .fi-ta). */ .dark .fi-section, .dark .fi-wi-stats-overview-stat, .dark .fi-ta-ctn { background-color: var(--tb-d-card) !important; } .dark .fi-section, .dark .fi-wi-stats-overview-stat, .dark .fi-ta-ctn { border: 1px solid var(--tb-d-border) !important; box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px -16px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.03) !important; } /* Todas las superficies internas de la tabla heredan el color de la tarjeta: así no aparecen "manchones" por header/celdas con otro tono. La separación del encabezado queda dada por su borde inferior propio de Filament. */ .dark .fi-ta, .dark .fi-ta-header, .dark .fi-ta-header-cell, .dark .fi-ta-row, .dark .fi-ta-cell, .dark .fi-ta-header-ctn { background-color: transparent !important; } /* Campos (inputs, selects, búsqueda, paginación): el color va en el WRAPPER redondeado (.fi-input-wrp) y el elemento interno queda transparente. Así el fondo respeta las esquinas y no asoman cuadrados. Un borde frío definido los delimita en cualquier superficie (incluida la barra superior). */ .dark .fi-input-wrp { background-color: var(--tb-d-sunken) !important; box-shadow: inset 0 0 0 1px var(--tb-d-border-strong) !important; } .dark .fi-input-wrp:has(:focus) { box-shadow: inset 0 0 0 1px #2563EB, 0 0 0 2px rgba(37, 99, 235,.25) !important; } .dark .fi-input-wrp:has([aria-invalid="true"]) { box-shadow: inset 0 0 0 1px #FF453A !important; /* conserva el ring de error */ } .dark .fi-input, .dark .fi-select-input { background-color: transparent !important; } /* Modales, popovers y dropdowns: misma superficie iOS gris (no el slate/navy por defecto de Filament). Cubre las ventanas de "registrar atención", subir vacuna/documento, confirmaciones, menús, etc. */ .dark .fi-modal-window, .dark .fi-dropdown-panel { background-color: var(--tb-d-card) !important; border: 1px solid var(--tb-d-border) !important; box-shadow: 0 24px 60px -12px rgba(0,0,0,.65) !important; } .dark .fi-modal-header, .dark .fi-modal-content, .dark .fi-modal-footer { background-color: transparent !important; } /* Secciones/inputs dentro del modal heredan la superficie del propio modal para que no aparezca un "card dentro del card" con otro tono. */ .dark .fi-modal-window .fi-section { background-color: transparent !important; box-shadow: none !important; border: 0 !important; } /* ═══════════════════════════════════════════════════════════════════════ LOGIN (página simple): SIN card. Contenido directo sobre el fondo (logo, TapBox, "Entre a su cuenta", correo*, contraseña*, olvidó, recordarme, entrar). ═══════════════════════════════════════════════════════════════════════ */ .fi-simple-main { background: transparent !important; border: 0 !important; box-shadow: none !important; padding-inline: 0 !important; } .dark .fi-simple-main { background: transparent !important; } /* Placeholders visibles (ya no hay card que dé contraste). */ .fi-simple-main .fi-input::placeholder { color: #6b7280 !important; opacity: 1; } .dark .fi-simple-main .fi-input::placeholder { color: #9a9aa0 !important; opacity: 1; } /* Campos con borde definido sobre el fondo. */ .fi-simple-main .fi-input-wrp { background-color: #ffffff !important; box-shadow: inset 0 0 0 1px #cbd2dc !important; } .dark .fi-simple-main .fi-input-wrp { background-color: var(--tb-d-sunken) !important; box-shadow: inset 0 0 0 1px var(--tb-d-border-strong) !important; } /* Check "Recordarme" con recuadro notorio. */ .fi-simple-main .fi-checkbox-input { border: 2px solid #9aa3af !important; background-color: #ffffff !important; } .dark .fi-simple-main .fi-checkbox-input { border: 2px solid #6b7280 !important; background-color: transparent !important; } .fi-simple-main .fi-checkbox-input:checked { background-color: #2563EB !important; border-color: #2563EB !important; } /* Todo el contenido del login centrado vertical, sin scroll, adaptable a cualquier alto de pantalla (dvh evita el salto por las barras del móvil). */ .fi-simple-layout { min-height: 100vh !important; min-height: 100dvh !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding-block: 1.5rem !important; padding-inline: 1.75rem !important; /* aire a ambos lados */ } /* El «sin scroll» es SÓLO para el login. * * Filament usa esta misma plantilla simple para el PERFIL, que es mucho más * largo: bloquear el desplazamiento ahí dejaba el bloque de verificación en * dos pasos fuera de alcance, sin forma de llegar a él. * * Se distinguen por el menú de usuario: el perfil lo tiene (hay sesión * iniciada), el login no. El perfil además arranca arriba en vez de centrado, * porque centrar algo más alto que la pantalla recorta justamente el comienzo. */ body:not(:has(.fi-user-menu)) .fi-simple-layout { overflow: hidden !important; } body:not(:has(.fi-user-menu)):has(.fi-simple-layout) { overflow: hidden; } body:has(.fi-user-menu) .fi-simple-layout { justify-content: flex-start !important; overflow-y: auto !important; } /* * CUANDO LA PANTALLA ES MÁS BAJA QUE EL FORMULARIO. * * Con la pantalla fija (`html.tb-fija`, ver partials/pantalla-fija) el * documento ya no se desplaza, así que el `overflow:hidden` de arriba dejaba * el login sin salida: medido en un viewport de 380px de alto, la caja * arrancaba en -155px y no había forma de llegar al logo ni al primer campo. * Pasa de verdad en un teléfono en horizontal, y sobre todo con el teclado * abierto, que es justo lo que esto viene a arreglar. * * Dos correcciones que van juntas: * * · El contenido puede desplazarse POR DENTRO. `contain` corta el rebote en * el borde, así que se sigue sin ver la franja del navegador por detrás. * · Se centra con márgenes automáticas y no sólo con `justify-content`: el * centrado por alineación recorta el COMIENZO cuando el contenido no cabe; * las márgenes automáticas centran igual y ceden cuando falta espacio. */ html.tb-fija .fi-simple-layout { overflow-y: auto !important; overscroll-behavior: contain; /* * `flex-start` + margen automática, y no `center` a secas. * * Las márgenes automáticas sólo reparten espacio SOBRANTE: si el contenido * es más alto que la pantalla se resuelven en cero, y ahí manda el * `justify-content`. Con `center`, ese caso recorta el comienzo —medido: * la caja arrancaba en -155px, sin forma de llegar al logo ni al primer * campo—. Con `flex-start` de base, la margen automática centra mientras * quepa y cede en cuanto deja de caber. */ justify-content: flex-start !important; } html.tb-fija .fi-simple-layout > * { margin-block: auto !important; } /* * NADA CAMBIA DE TAMAÑO AL ABRIRSE EL TECLADO. * * Hubo acá un modo «compacto» que encogía el logo, el título y los espacios * cuando el alto útil bajaba: estaba mal. Al tocar un campo, la pantalla se * reacomodaba bajo el dedo y la marca se achicaba justo cuando la persona * escribe su contraseña — el momento en que ver la marca importa más. * * En la APK no pasa porque el teclado se DIBUJA ENCIMA: la maqueta conserva su * alto y el navegador sólo corre la vista para dejar visible el campo. Es la * conducta nativa, y es la que se replica acá midiendo `innerHeight` —el alto * de la maqueta— y no `visualViewport`, que es el alto libre y se encoge con * el teclado. Ver partials/pantalla-fija. */ /* Y el aire entre campos se reparte más justo. */ /* * Los espacios entre bloques bajan de 24px a 8-12. Es el recorte que más * rinde y el que menos se nota: separar el título de los campos con 24px es * una decisión de pantalla grande, no una necesidad de lectura. */ /* Botón "Entrar" / "Enviar email": azul de marca (como el Box del logo). */ .fi-simple-main .fi-btn { background: #2563EB !important; border: 0 !important; color: #fff !important; font-weight: 600 !important; letter-spacing: .01em !important; border-radius: 0.7rem !important; padding-block: 0.8rem !important; box-shadow: none !important; transition: background .15s ease, transform .08s ease; } .fi-simple-main .fi-btn:hover { background: #1D4FD0 !important; box-shadow: none !important; } .fi-simple-main .fi-btn:active { transform: translateY(1px); box-shadow: none !important; } .dark .fi-simple-main .fi-btn { background: #2563EB !important; } .dark .fi-simple-main .fi-btn:hover { background: #2563EB !important; } /* Notificaciones premium (línea del correo de reset): tarjeta clara/oscura con esquinas suaves y sombra cuidada. El acento de color lo da el ícono (azul en el aviso de "correo registrado"). */ .fi-no-notification { border-radius: 14px !important; border: 1px solid #E2E8F0 !important; box-shadow: 0 16px 40px -12px rgba(15,26,46,.22) !important; } .dark .fi-no-notification { background-color: #242426 !important; border-color: #2f2f31 !important; box-shadow: 0 20px 50px -14px rgba(0,0,0,.6) !important; } .fi-no-notification .fi-no-notification-title, .fi-no-notification h3 { font-weight: 700 !important; letter-spacing: -.01em; } /* Bloqueo de zoom por gesto (doble-tap) + sin retardo de toque. El pinch-zoom lo bloquea el meta viewport; esto complementa en el resto de la app. */ html { touch-action: manipulation; -webkit-text-size-adjust: 100%; } /* ═══════════════════════════════════════════════════════════════════════ NITIDEZ "HD" — texto, iconos y detalles (app + central) ═══════════════════════════════════════════════════════════════════════ */ /* 1+2) Suavizado de fuentes: texto más limpio y nítido en todo el panel. antialiased afina el trazo (menos "gordo") en pantallas Retina/OLED. */ .fi-body, .fi-body *, .fi-sidebar, .fi-topbar, .fi-modal { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* 1) Panel lateral: texto e iconos más nítidos y con mejor contraste. */ .fi-sidebar-item-label { font-weight: 500; letter-spacing: -0.005em; } .dark .fi-sidebar-item-label { color: #eaeaec !important; } .dark .fi-sidebar-item:not(.fi-active) .fi-sidebar-item-icon { color: #b7bec8 !important; } .dark .fi-sidebar-group-label { color: #9b9ba1 !important; letter-spacing: .02em; } /* SVG de iconos con render de máxima precisión (bordes limpios). */ .fi-sidebar-item-icon svg, .fi-btn svg, .fi-ta-actions svg { shape-rendering: geometricPrecision; } /* 2) Encabezados y textos generales: contraste alto en oscuro. */ .dark .fi-header-heading, .dark .fi-section-heading, .dark .fi-ta-header-heading { color: #FFFFFF !important; } .dark .fi-ta-text, .dark .fi-ta-cell, .dark .fi-in-text { color: #E5E5EA; } /* 3) REDONDEO GLOBAL de todos los cards (todas las plantillas, app + central): KPIs, secciones, tablas y widgets. El tile de KPI (fi-wi-stats-overview-stat) es el que salía con esquinas en punta. */ .fi-wi-stats-overview-stat, .fi-section, .fi-ta-ctn, .fi-wi > .fi-section, .fi-fo-tabs { border-radius: 0.9rem !important; } .fi-wi-stats-overview-stat { overflow: hidden; } /* 4) Fecha/hora, placeholders y buscadores: texto nítido y placeholder legible. */ .dark .fi-input, .dark .fi-select-input { color: #FFFFFF !important; } .dark .fi-input::placeholder, .dark .fi-select-input::placeholder { color: #8a8a8e !important; opacity: 1; } .dark .fi-ta-search-field .fi-input { color: #FFFFFF !important; } /* Conmutador de tema flotante en el login (sin topbar). Oculto por defecto; solo aparece en las páginas simples (login) de cualquier panel. */ .tb-login-theme { display: none; } body:has(.fi-simple-layout) .tb-login-theme, body:has(.fi-simple-page) .tb-login-theme, body:has(.fi-simple-main) .tb-login-theme { display: block; position: fixed; top: 1rem; inset-inline-end: 1rem; z-index: 50; } /* Perfil también es una página simple, pero AHÍ SÍ hay avatar de usuario, y Filament lo fija arriba a la derecha: el conmutador flotante caía justo encima y los dos círculos se pisaban. Cuando conviven, el tema se corre a la izquierda del avatar y queda una separación real entre ambos. avatar: 2rem de ancho + 1rem de margen al borde, más 0.5rem de aire y el 0.25rem que el propio botón lleva de margen a la derecha. */ body:has(.fi-simple-page):has(.fi-user-menu) .tb-login-theme, body:has(.fi-simple-main):has(.fi-user-menu) .tb-login-theme { inset-inline-end: 4.25rem; } /* Flecha "Volver" del Perfil: arriba a la izquierda, en el mismo tono discreto que el resto de los controles de la barra. */ .tb-profile-back { position: fixed; top: 1rem; inset-inline-start: 1rem; z-index: 50; } .tb-profile-back button { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .7rem .4rem .5rem; border: 0; border-radius: .5rem; background: transparent; color: #6b7280; cursor: pointer; font: inherit; font-size: .875rem; transition: background .15s, color .15s; } .tb-profile-back svg { width: 1.15rem; height: 1.15rem; } .tb-profile-back button:hover { background: rgba(0,0,0,.05); color: #374151; } .dark .tb-profile-back button { color: #A1A1A6; } .dark .tb-profile-back button:hover { background: rgba(255,255,255,.08); color: #E5E5EA; } /* En el topbar el avatar y el conmutador quedaban pegados, sin un pixel entre ellos: el fondo del botón de tema al pasar el mouse tocaba el borde del círculo de iniciales. */ .fi-topbar .fi-user-menu { margin-inline-end: .5rem; } /* ═══════════════════════════════════════════════════════════════════════ FICHAS COMPACTAS (estilo CRM/B2B). Solo secciones marcadas con .tb-crm (p. ej. ficha de cliente). No afecta al resto de formularios. ═══════════════════════════════════════════════════════════════════════ */ /* Medido sobre el DOM real antes de tocar nada: cabecera 14×20, contenido 18×20, título 16px, etiquetas 14px, separación entre tarjetas 24px. Todo generoso; se veía espacioso y de plantilla. Acá se aprieta y se le da jerarquía. */ /* — Tarjeta — */ .tb-crm .fi-section { border-radius: 12px !important; box-shadow: 0 1px 2px rgba(16, 24, 40, .04) !important; } .dark .tb-crm .fi-section { box-shadow: none !important; } /* — Cabecera: más baja, con una línea que la separa del contenido — */ .tb-crm .fi-section-header { padding: .7rem .95rem !important; border-bottom: 1px solid rgba(16, 24, 40, .07); gap: .55rem !important; } .dark .tb-crm .fi-section-header { border-bottom-color: rgba(255, 255, 255, .07); } /* Título de sección: etiqueta, no encabezado de página. */ .tb-crm .fi-section-header-heading { font-size: .875rem !important; font-weight: 600 !important; letter-spacing: -.01em; } .tb-crm .fi-section-header-description { font-size: .75rem !important; margin-top: .1rem; } /* El icono va en una pastilla azul: da identidad y ancla la vista. */ .tb-crm .fi-section-header > svg { width: 1.85rem !important; height: 1.85rem !important; padding: .35rem; border-radius: 8px; color: #2563EB; background: #E8EFFE; box-sizing: border-box; flex: none; } .dark .tb-crm .fi-section-header > svg { color: #0A84FF; background: rgba(10, 132, 255, .12); } /* — Contenido: menos aire — */ .tb-crm .fi-section-content { padding: .85rem .95rem !important; } .tb-crm .fi-grid { gap: .6rem .8rem !important; } .tb-crm .fi-fo-field-wrp { gap: .3rem !important; } /* — Etiquetas de campo: pequeñas y apagadas; el dato es el protagonista — */ .tb-crm .fi-fo-field-label-content { font-size: .75rem !important; font-weight: 500 !important; letter-spacing: .01em; color: rgb(100 116 139); } .dark .tb-crm .fi-fo-field-label-content { color: rgb(161 161 166); } /* — Campos — */ .tb-crm .fi-input-wrp { border-radius: 9px !important; } .tb-crm .fi-input, .tb-crm .fi-select-input { padding-block: .35rem !important; font-size: .8125rem !important; } .tb-crm .fi-fo-field-hint, .tb-crm .fi-fo-field-helper-text { font-size: .7rem !important; } /* Foco: sólo el borde de marca (regla general .fi-input-wrp:focus-within), sin halo. */ .tb-crm .fi-input-wrp:focus-within { outline: none; } /* — Separación entre tarjetas apiladas: 24px era demasiado — */ .fi-fo .fi-sc > .fi-sc-component + .fi-sc-component, .fi-sc-has-gap { gap: .85rem !important; } /* — Barra de acciones fija abajo: los botones quedan siempre a mano y la página deja de terminar en un vacío enorme. — */ .fi-fo-actions-ctn, .fi-page-content > form > .fi-ac { position: sticky; bottom: 0; z-index: 10; margin-top: 1rem; padding: .75rem 0; background: linear-gradient(to top, var(--tb-page-bg, #f8fafc) 72%, transparent); } .dark .fi-fo-actions-ctn, .dark .fi-page-content > form > .fi-ac { background: linear-gradient(to top, #000 72%, transparent); } /* ═══════════════════════════════════════════════════════════════════════ QUOTE BUILDER (Central → Crear/Editar cotización) · 3 columnas compactas ═══════════════════════════════════════════════════════════════════════ */ /* Contenedor: ancho amplio pero acotado y centrado (nada pegado a la izq.) */ .tb-qb { max-width: 1600px; margin-inline: auto; width: 100%; gap: 1rem !important; } /* Barra lateral sticky */ @media (min-width: 1024px) { .tb-sticky { position: sticky; top: 1rem; } } /* Cards compactas del builder */ .tb-qb-card .fi-section-content { padding: 15px 16px !important; } .tb-qb-card .fi-section-header { padding: 13px 16px !important; } .tb-qb .fi-grid { gap: .55rem .7rem !important; } /* Inputs 34–38px y labels chicos */ .tb-qb .fi-input, .tb-qb .fi-select-input { padding-block: .4rem !important; } .tb-qb .fi-fo-field-label-content { font-size: .8rem !important; } /* Resumen ejecutivo (derecha) */ .tb-quote-sum { margin-top: 2px; } .tb-quote-sum__div { border-top: 1px dashed #e5e7eb; margin: 8px 0; } .dark .tb-quote-sum__div { border-color: var(--tb-d-border); } .tb-quote-sum__total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; padding: 14px 16px; border-radius: 12px; background: #eaf2fd; color: #20282D; } .dark .tb-quote-sum__total { background: rgba(10, 132, 255, .18); color: #FFFFFF; } .tb-quote-sum__total span:first-child { font-size: 13px; font-weight: 600; color: #2563EB; } .dark .tb-quote-sum__total span:first-child { color: #0A84FF; } .tb-quote-sum__total span:last-child { font-size: 22px; font-weight: 800; letter-spacing: -.5px; font-variant-numeric: tabular-nums; white-space: nowrap; } .tb-quote-sum > div { white-space: nowrap; } .tb-quote-sum > div > span:first-child { white-space: normal; } /* Módulos como tarjetas compactas (~90px), grilla 2 col */ .tb-modules .fi-fo-checkbox-list-option, .tb-modules label:has(> input[type="checkbox"]) { border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px 14px; min-height: 88px; transition: border-color .12s, background .12s, box-shadow .12s; cursor: pointer; } .dark .tb-modules .fi-fo-checkbox-list-option, .dark .tb-modules label:has(> input[type="checkbox"]) { border-color: var(--tb-d-border); background: var(--tb-d-card); } .tb-modules .fi-fo-checkbox-list-option:hover, .tb-modules label:has(> input[type="checkbox"]):hover { border-color: #2563EB; box-shadow: 0 2px 12px -6px rgba(37, 99, 235,.5); } .tb-modules .fi-fo-checkbox-list-option:has(:checked), .tb-modules label:has(> input[type="checkbox"]:checked) { border-color: #2563EB; background: #eaf2fd; } .dark .tb-modules .fi-fo-checkbox-list-option:has(:checked), .dark .tb-modules label:has(> input[type="checkbox"]:checked) { background: rgba(10, 132, 255, .18); border-color: #2563EB; } .tb-modules .fi-fo-checkbox-list { gap: .55rem !important; } /* ── Cabecera de identidad (ficha de cliente/paciente) ── */ .tb-idcard { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 0.9rem; background: #ffffff; border: 1px solid #e5e7eb; box-shadow: 0 1px 2px rgba(15,26,46,.05); } .dark .tb-idcard { background: var(--tb-d-card); border-color: var(--tb-d-border); box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px -16px rgba(0,0,0,.6); } .tb-idcard__avatar { flex: none; width: 52px; height: 52px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; letter-spacing: .3px; background: #e8f0fe; color: #2563EB; } .dark .tb-idcard__avatar { background: rgba(37, 99, 235,.18); color: #0A84FF; } .tb-idcard__main { min-width: 0; } .tb-idcard__name { font-size: 19px; font-weight: 700; line-height: 1.15; color: #20282D; } .dark .tb-idcard__name { color: #FFFFFF; } .tb-idcard__meta { margin-top: 3px; font-size: 13px; color: #64748b; } .dark .tb-idcard__meta { color: #9aa0aa; } .tb-idcard__badge { margin-inline-start: auto; flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #16a34a; background: rgba(22,163,74,.10); border: 1px solid rgba(22,163,74,.25); } .dark .tb-idcard__badge { color: #30D158; } .tb-idcard__badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } /* Avatar con foto (ficha de mascota) */ .tb-idcard__avatar--img { padding: 0; overflow: hidden; background: #e8f0fe; } .tb-idcard__avatar--img img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Badge de dueño (azul, sin punto) */ .tb-idcard__badge--owner { color: #2563EB; background: rgba(37, 99, 235,.10); border-color: rgba(37, 99, 235,.25); } .dark .tb-idcard__badge--owner { color: #0A84FF; } .tb-idcard__badge--owner::before { display: none; } /* ── Botón escribir tarjeta NFC ── */ .tb-nfc__btn { display: inline-flex; align-items: center; gap: 8px; background: #2563EB; color: #fff; border: 0; border-radius: 10px; padding: 10px 16px; font-weight: 700; font-size: 14px; cursor: pointer; } .tb-nfc__btn:disabled { opacity: .6; cursor: progress; } .tb-nfc__btn:hover:not(:disabled) { background: #1D4FD0; } .tb-nfc__status { margin-top: 8px; font-size: 13px; color: #94a3b8; } .tb-nfc__status.is-ok { color: #16a34a; font-weight: 600; } .tb-nfc__hint { font-size: 13px; color: #94a3b8; } /* ═══════════════════════════════════════════════════════════════════════ APP INSTALADA (TWA/PWA): sin "tap-to-search" ni menú de selección de Chrome en textos no editables. Solo aplica en modo standalone (no en el navegador). ═══════════════════════════════════════════════════════════════════════ */ @media (display-mode: standalone) { body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } input, textarea, select, [contenteditable="true"], .fi-input, .fi-select-input { -webkit-user-select: text !important; user-select: text !important; } } /* ═══════════════════════════════════════════════════════════════════════ RESPONSIVE (móvil / tablet / iPad) · App + Central ═══════════════════════════════════════════════════════════════════════ */ /* Ningún card debe provocar scroll horizontal del cuerpo */ .fi-section, .tb-idcard, .tb-hero, .tb-qb, .tb-qb-card { max-width: 100%; } /* Tablet e inferior (≤ 1024px, incluye iPad) */ @media (max-width: 1024px) { .tb-hero { padding: 22px 22px; } .tb-hero__bottom { gap: 18px; margin-top: 20px; } /* Quote builder: todo apilado a una columna, resumen debajo */ .tb-sticky { position: static !important; } } /* Móvil / tablet chico (≤ 768px) */ @media (max-width: 768px) { .tb-hero { padding: 18px 16px; border-radius: 14px; } .tb-quickgrid { grid-template-columns: repeat(2, 1fr); flex-basis: 100%; } .tb-idcard { flex-wrap: wrap; padding: 14px 16px; gap: 12px; } .tb-idcard__badge { margin-inline-start: 0; } .tb-qb-card .fi-section-content { padding: 13px 14px !important; } /* Inputs cómodos al tacto (evita zoom en iOS con < 16px) */ .fi-input, .fi-select-input { font-size: 16px !important; } } /* Teléfono (≤ 480px) */ @media (max-width: 480px) { .tb-quickgrid { grid-template-columns: 1fr; } .tb-hero__greet { font-size: 26px; } .tb-idcard__avatar { width: 46px; height: 46px; font-size: 16px; } .tb-idcard__name { font-size: 17px; } } /* — Marca del panel: "Tap" en tinta, "Next" en azul — El tono del "Box" cambia según el fondo: sobre claro necesita el azul oscuro (#2563EB da 5.6 de contraste); sobre el tema oscuro, el aclarado. */ /* ── Marca de Central ──────────────────────────────────────────────────── El logotipo completo (imagen) y, al lado, la palabra «Central» que dice en qué panel estás. La palabra «PaperNext» ya no se escribe: viene dentro del logotipo, y tenerla dos veces era tenerla desincronizada. */ .tb-marca { display: inline-flex; align-items: center; gap: 10px; } .tb-marca .tb-marca-img { height: 2.1rem; width: auto; display: block; flex: none; } .tb-marca .tb-marca-img--oscura { display: none; } .dark .tb-marca .tb-marca-img--clara { display: none; } .dark .tb-marca .tb-marca-img--oscura { display: block; } /* Separador entre el logotipo y «Central», del mismo peso que el filo del panel. */ .tb-marca__sub::before { content: ""; display: inline-block; width: 1px; height: 1.05rem; background: var(--pn-filo-2, rgba(0,0,0,.12)); margin-inline-end: 10px; vertical-align: -.2rem; } .tb-marca__tx { font-family: var(--tb-display, 'Schibsted Grotesk', Inter, sans-serif); font-weight: 700; font-size: 1.06rem; letter-spacing: -.02em; line-height: 1; color: #20282D; white-space: nowrap; } .tb-marca__b { color: #2563EB; } .tb-marca__sub { font-weight: 600; font-size: .95rem; color: var(--pn-tinta-2); letter-spacing: -.01em; } /* El avión sólo aparece en el acceso; en el panel manda el logotipo completo. */ .tb-marca .tb-marca-img--simbolo { display: none; } /* ── MARCA DE CENTRAL EN EL ACCESO ───────────────────────────────────── Apilada y centrada: el avión arriba, «Central» debajo. Con el logotipo apaisado más la palabra al costado, el bloque medía 260px de ancho y se leía como un encabezado de barra metido en una tarjeta de 420. El separador vertical se quita: entre dos cosas apiladas, una línea de pie no separa nada —se lee como un subrayado suelto. */ .fi-simple-main .tb-marca { flex-direction: column; gap: .5rem; width: 100%; justify-content: center; } .fi-simple-main .tb-marca .tb-marca-img--palabra { display: none; } .fi-simple-main .tb-marca .tb-marca-img--simbolo { display: block; height: 4.1rem; } .fi-simple-main .tb-marca .tb-marca-img--simbolo.tb-marca-img--oscura { display: none; } .dark .fi-simple-main .tb-marca .tb-marca-img--simbolo.tb-marca-img--clara { display: none; } .dark .fi-simple-main .tb-marca .tb-marca-img--simbolo.tb-marca-img--oscura { display: block; } .fi-simple-main .tb-marca__sub { font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .55; } .fi-simple-main .tb-marca__sub::before { content: none; } .dark .tb-marca__tx { color: #FBF9ED; } .dark .tb-marca__b { color: #0A84FF; } /* — El "Box" del logotipo del panel — Sobre fondo claro necesita el azul oscuro (5.6 de contraste); sobre el tema oscuro, el aclarado. Va por clase y no como color fijo en línea para que pueda cambiar con el tema. El !important es deliberado: Filament pinta la marca con currentColor heredado de la barra, y sin esto el "Box" sale negro en ambos temas. */ .tb-box, .fi-topbar .tb-box, .fi-sidebar .tb-box { color: #2563EB !important; } .dark .tb-box, .dark .fi-topbar .tb-box, .dark .fi-sidebar .tb-box { color: #0A84FF !important; } /* ══════════════════════════════════════════════════════════════════════ SÓLO ESCRITORIO (≥768px) Todo lo que sigue existe para una sola cosa: que en una FILA de formulario el desplegable, el campo de texto y el selector de fecha midan igual y su texto quede a la misma altura. En móvil no hay filas — cada campo va a ancho completo, uno debajo del otro — así que nada de esto hace falta ahí. Y sí hace daño: el desplegable no nativo dibuja su PANEL DE OPCIONES dentro de la misma caja, así que cualquier altura o ancho impuesto lo aplasta. Eso descuadró «Existencias» de Inventario en el teléfono cuatro veces seguidas («otro» partido letra por letra, etiquetas encabalgadas). Si vuelve a aparecer un descuadre de formulario SÓLO en móvil, la causa está acá adentro y la respuesta es acotar, no agregar otra regla. ══════════════════════════════════════════════════════════════════════ */ @media (min-width: 768px) { /* — Formularios: campos parejos y sin texto cortado — Los desplegables de Filament traen su propio control y quedaban más altos que los campos de texto de al lado, con la fila desalineada. Y cuando el campo era angosto, el valor se partía en dos líneas o se recortaba. OJO: la clase del contenedor de campo es .fi-fo-field, NO .fi-fo-field-wrp. Una versión anterior de este bloque usaba -wrp y por eso no hacía nada: verificado midiendo el DOM real (select 50px, texto 38px, fecha 36px). */ .fi-fo-field .fi-input-wrp { min-height: 2.625rem; } /* Altura fija e idéntica para los tres controles que conviven en una fila. */ .fi-fo-field .fi-input-wrp.fi-fo-select, .fi-fo-field .fi-input-wrp.fi-fo-text-input, .fi-fo-field .fi-input-wrp.fi-fo-date-time-picker { height: 2.625rem; } /* EXCEPCIÓN · desplegables de selección múltiple. La regla de arriba emparejó las filas del formulario de citas, pero le impuso altura fija a TODOS los desplegables. Uno de selección múltiple pinta un distintivo por cada valor elegido y necesita crecer: con 13 módulos, la segunda fila de distintivos se salía de la caja y tapaba el texto de ayuda. Se reconocen por el contenedor de distintivos que Filament sólo usa ahí. */ .fi-fo-field .fi-input-wrp.fi-fo-select:has(.fi-select-input-value-badges-ctn) { height: auto; min-height: 2.625rem; } /* Los distintivos fluyen en varias líneas, con aire entre ellos. */ .fi-fo-field .fi-select-input-value-badges-ctn { display: flex; flex-wrap: wrap; gap: .3rem; padding-block: .35rem; min-width: 0; } /* Un valor largo no debe empujar la caja a lo ancho ni cortarse a la mitad. */ .fi-fo-field .fi-select-input-value-badges-ctn > * { max-width: 100%; } /* El control interno de un múltiple tampoco se estira a una altura fija. */ .fi-fo-field .fi-fo-select:has(.fi-select-input-value-badges-ctn) > *, .fi-fo-field .fi-fo-select:has(.fi-select-input-value-badges-ctn) button { height: auto; min-height: 2.625rem; } /* El control interno estira hasta la caja en vez de imponer su propia altura. * * CUIDADO CON `.fi-select-input`: en el desplegable NO NATIVO esa clase NO está * en el control, sino en el
contenedor donde el JavaScript de Filament * dibuja el widget completo — el PANEL DE OPCIONES incluido (ver * vendor/filament/forms/.../select.blade.php, línea 216). Darle `height:100%` * lo mete entero dentro de 2,6 rem: la lista queda aplastada, las etiquetas se * encabalgan y una opción como «Otro…» se parte letra por letra en vertical. * Se vio al editar una unidad en Inventario, y se confirmó volcando el DOM real. * * Por eso: el