/* ───────────────────────────────────────────────────────────────────────── Sistema visual de COLESAT aplicado al panel. Dos caras: claro por defecto y oscuro cuando Filament pone `.dark` en el . Los tokens cambian; el verde no — es el mismo acento en ambos, y sigue siendo el UNICO. Si se usa para todo deja de significar nada. ───────────────────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@300..600&display=swap'); :root { /* Constantes de marca */ --verde: #0BDB6B; --verde-claro: #34D37A; --verde-10: rgba(11, 219, 107, 0.10); --verde-25: rgba(11, 219, 107, 0.25); --verde-60: rgba(11, 219, 107, 0.60); --curva: cubic-bezier(0.2, 0.9, 0.2, 1); --radio-card: 20px; /* ── Tema claro ── */ --fondo: #FAFAFA; --superficie: rgba(255, 255, 255, 0.90); --superficie-2: rgba(255, 255, 255, 0.72); --linea: rgba(0, 0, 0, 0.09); --etiqueta: #71717A; --tarjeta-bg: rgba(255, 255, 255, 0.75); --sombra-login: 0 24px 70px rgba(0, 0, 0, 0.10); } .dark { /* ── Tema oscuro ── */ --fondo: #0A0A0A; --superficie: rgba(10, 10, 10, 0.93); --superficie-2: rgba(10, 10, 10, 0.85); --linea: rgba(255, 255, 255, 0.08); --etiqueta: #A1A1AA; --tarjeta-bg: rgba(255, 255, 255, 0.02); --sombra-login: 0 24px 70px rgba(0, 0, 0, 0.60); } /* El canvas va detrás; el contenido necesita su propio contexto de apilado. */ .fi-layout, .fi-simple-layout { position: relative; z-index: 1; } /* ── Superficies ──────────────────────────────────────────────────────── */ .fi-main, .fi-sidebar, .fi-topbar { background-color: var(--superficie); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .fi-sidebar { border-right: 1px solid var(--linea); } .fi-topbar { border-bottom: 1px solid var(--linea); } /* Solo las superficies que de verdad son tarjetas. NO se incluye .fi-fo-component-ctn: es el contenedor de los campos de un formulario, y ponerle borde dibuja una caja alrededor de los campos del acceso — las lineas sueltas que rodeaban el formulario. */ .fi-section, .fi-wi-stats-overview-stat, .fi-ta { border: 1px solid var(--linea); border-radius: var(--radio-card); background-color: var(--tarjeta-bg); } /* ── Tipografía ───────────────────────────────────────────────────────── */ /* Geist Mono con cifras tabulares: sin esto los importes de una columna no alinean, porque cada dígito ocupa distinto ancho. */ .fi-wi-stats-overview-stat-value, .fi-in-text-item-label, code, kbd, pre, samp { font-family: 'Geist Mono', ui-monospace, monospace; font-feature-settings: 'tnum'; } /* Etiquetas mono, mayúsculas y muy espaciadas: es la firma tipográfica de COLESAT y lo que más se nota al comparar. */ .fi-section-header-heading, .fi-wi-stats-overview-stat-label, .fi-ta-header-heading, .fi-sidebar-group-label { font-family: 'Geist Mono', ui-monospace, monospace; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.7rem; font-weight: 500; color: var(--etiqueta); } .fi-header-heading { letter-spacing: -0.03em; font-weight: 600; } .fi-wi-stats-overview-stat-value { letter-spacing: -0.02em; } /* ── El verde, solo donde importa ─────────────────────────────────────── */ .fi-sidebar-item-active .fi-sidebar-item-button { background-color: var(--verde-10); border-radius: 12px; } .fi-sidebar-item-active .fi-sidebar-item-label { color: var(--verde); } /* Punto verde junto al elemento activo, como la navegación del sitio. */ .fi-sidebar-item-active .fi-sidebar-item-button::before { content: ''; width: 5px; height: 5px; border-radius: 999px; background: var(--verde); margin-right: 0.6rem; flex: none; animation: puls 1.8s ease-in-out infinite; } /* Botones píldora, como los del sitio. */ .fi-btn { border-radius: 999px; transition: transform 0.35s var(--curva), background 0.3s, color 0.3s; will-change: transform; } .fi-btn:hover { transform: translateY(-1px); } /* ── Selector de empresa ──────────────────────────────────────────────── */ /* Lo más importante de la barra: un contador salta entre clientes y necesita ver de un vistazo en cuál está parado. */ .fi-tenant-menu-trigger { border: 1px solid var(--verde-25); border-radius: 999px; background: var(--verde-10); transition: border-color 0.3s var(--curva); } .fi-tenant-menu-trigger:hover { border-color: var(--verde-60); } /* ── Login y recuperación ─────────────────────────────────────────────── */ .fi-simple-layout { background: transparent !important; } .fi-simple-main { background: var(--superficie-2) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--linea); border-radius: var(--radio-card); box-shadow: var(--sombra-login); } /* ── Animaciones ──────────────────────────────────────────────────────── */ @keyframes puls { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.6); } } /* El sitio hace flotar sus tarjetas con rotación (fl1/fl2/fl3). Aquí NO: son importes, y una tabla de dinero inclinada se lee peor y parece un error de maquetación. El movimiento se reserva para el fondo y el punto del menú. */ @keyframes entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .fi-wi-stats-overview-stat { animation: entra 0.45s var(--curva) both; } .fi-wi-stats-overview-stat:nth-child(2) { animation-delay: 0.05s; } .fi-wi-stats-overview-stat:nth-child(3) { animation-delay: 0.10s; } .fi-wi-stats-overview-stat:nth-child(4) { animation-delay: 0.15s; } /* ── Estado de la conexión con el SAT ───────────────────────────────────── Mismo lenguaje que el resto: curva propia, verde como acento único, sin rotaciones. Lo que se mueve comunica algo — que el SAT todavía no contesta — y se detiene en cuanto deja de ser cierto. Movimiento que no informa es ruido. ───────────────────────────────────────────────────────────────────────── */ .paso-conexion { display: flex; align-items: flex-start; gap: 0.9rem; padding: 1rem 1.1rem; border-radius: 16px; border: 1px solid var(--linea); background: var(--tarjeta-bg); animation: entra 0.45s var(--curva) both; transition: border-color 0.4s var(--curva), background 0.4s var(--curva); } .paso-conexion.paso-conectada { border-color: var(--verde-25); background: var(--verde-10); } .paso-conexion.paso-verificando { border-color: rgba(245, 158, 11, 0.28); } .paso-conexion.paso-fallida { border-color: rgba(239, 68, 68, 0.30); } .paso-marca { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; background: rgba(0, 0, 0, 0.04); color: var(--etiqueta); } .dark .paso-marca { background: rgba(255, 255, 255, 0.05); } .paso-conectada .paso-marca { background: var(--verde-10); color: var(--verde); } .paso-verificando .paso-marca { background: rgba(245, 158, 11, 0.12); color: #F59E0B; } .paso-fallida .paso-marca { background: rgba(239, 68, 68, 0.12); color: #EF4444; } .paso-titulo { font-size: 0.95rem; font-weight: 600; color: var(--etiqueta); } .paso-conectada .paso-titulo { color: var(--verde); } .dark .paso-titulo { color: #E4E4E7; } .dark .paso-conectada .paso-titulo { color: var(--verde); } .paso-detalle { margin-top: 0.2rem; font-size: 0.82rem; line-height: 1.5; color: var(--etiqueta); } /* La palomita se dibuja sola: el trazo entra en el mismo tiempo que la tarjeta, así el "listo" se siente como una consecuencia y no como un icono que aparece. */ .paso-marca svg { width: 1.15rem; height: 1.15rem; } .paso-marca .trazo { stroke-dasharray: 34; stroke-dashoffset: 34; animation: traza 0.55s var(--curva) 0.15s forwards; } @keyframes traza { to { stroke-dashoffset: 0; } } /* Un arco que gira, no un spinner de bootstrap: hereda el color del estado y deja hueco, que es lo que lo hace legible a 2 rem. */ .orbita { width: 1.15rem; height: 1.15rem; border-radius: 999px; border: 2px solid currentColor; border-top-color: transparent; border-right-color: transparent; animation: gira 0.9s linear infinite; } @keyframes gira { to { transform: rotate(360deg); } } /* Barra indeterminada: no finge saber cuánto falta. Recorre y vuelve. */ .barra-progreso { margin-top: 0.7rem; height: 3px; border-radius: 999px; background: rgba(0, 0, 0, 0.06); overflow: hidden; } .dark .barra-progreso { background: rgba(255, 255, 255, 0.07); } .barra-progreso span { display: block; height: 100%; width: 38%; border-radius: 999px; background: linear-gradient(90deg, transparent, var(--verde), transparent); animation: barre 1.5s var(--curva) infinite; } @keyframes barre { 0% { transform: translateX(-100%); } 100% { transform: translateX(320%); } } /* Entrada escalonada para listas de datos. El retraso es corto a propósito: se nota como orden de lectura, no como espera. */ .entra-escalonado > * { animation: entra 0.4s var(--curva) both; } .entra-escalonado > *:nth-child(2) { animation-delay: 0.04s; } .entra-escalonado > *:nth-child(3) { animation-delay: 0.08s; } .entra-escalonado > *:nth-child(4) { animation-delay: 0.12s; } .entra-escalonado > *:nth-child(5) { animation-delay: 0.16s; } .entra-escalonado > *:nth-child(6) { animation-delay: 0.20s; } .entra-escalonado > *:nth-child(7) { animation-delay: 0.24s; } .entra-escalonado > *:nth-child(8) { animation-delay: 0.28s; } /* ── Rejillas de las vistas propias ───────────────────────────────────── */ /* Filament sirve su CSS precompilado y NO escana nuestros blades, asi que las variantes responsive de Tailwind (sm:grid-cols-2 y similares) no existen en la hoja que llega al navegador: se veian a una sola columna. En vez de montar un tema propio con su build, las rejillas que necesitamos se declaran aqui. Si algun dia hace falta Tailwind completo en vistas propias, la via es `php artisan make:filament-theme`. */ .rejilla-datos { display: grid; grid-template-columns: 1fr; gap: 1rem 2rem; } .rejilla-dos { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 640px) { .rejilla-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .rejilla-dos { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1280px) { .rejilla-datos { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ── Tablas ───────────────────────────────────────────────────────────── */ /* Tabla propia (la de proveedores señalados), no la de Filament. Mismo motivo que las rejillas de arriba: Filament sirve su CSS precompilado y no lee nuestras blades, asi que min-w-[42rem] o whitespace-nowrap escritos como clases de Tailwind nunca llegan al navegador — las etiquetas salian cortadas. Se declaran aqui. */ .tabla-propia { width: 100%; min-width: 34rem; border-collapse: collapse; } .tabla-propia .apretado { white-space: nowrap; } .desliza-h { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* La etiqueta del badge de Filament trae .truncate: dentro de una celda estrecha salia como «Definiti…», que es peor que no poner nada. Aqui la columna ya no se comprime (la tabla desliza en horizontal), asi que el recorte sobra. */ .tabla-propia .fi-badge .truncate { overflow: visible; text-overflow: clip; } .fi-ta-ctn { overflow-x: auto; -webkit-overflow-scrolling: touch; } .fi-ta-row { transition: background 0.25s var(--curva); } .fi-ta-row:hover { background: var(--verde-10) !important; } .fi-badge { border-radius: 999px; font-weight: 500; } /* ── Responsive ───────────────────────────────────────────────────────── */ @media (max-width: 768px) { /* El desenfoque en móvil cuesta batería y aporta poco. */ .fi-main, .fi-sidebar, .fi-topbar, .fi-simple-main { backdrop-filter: none; -webkit-backdrop-filter: none; } .fi-main, .fi-sidebar, .fi-topbar { background-color: var(--fondo); } .fi-simple-main { background: var(--fondo) !important; } .fi-wi-stats-overview-stat { min-width: 0; } .fi-section-header-heading { letter-spacing: 0.1em; } } /* ── Aviso de dato fiscal incoherente ─────────────────────────────────── */ /* * Ambar y no rojo: no esta roto, esta mal capturado y tiene arreglo. Y no * verde, que aqui significa «esto lo facturas tu». * * Va en esta hoja porque Filament sirve su CSS precompilado y no lee nuestras * blades: una clase de Tailwind que el panel no use ya no llega al navegador. */ .aviso-incoherencia { display: block; border-left: 3px solid #D97706; border-radius: 0 10px 10px 0; background-color: rgba(217, 119, 6, 0.08); padding: 0.7rem 0.9rem; font-size: 0.8125rem; line-height: 1.45; color: #92400E; } .dark .aviso-incoherencia { background-color: rgba(217, 119, 6, 0.12); color: #FCD34D; } /* ── Accesibilidad ────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { #fondo-animado { opacity: 0.4; } .fi-sidebar-item-active .fi-sidebar-item-button::before { animation: none; } .fi-wi-stats-overview-stat { animation: none; opacity: 1; transform: none; } .paso-conexion, .entra-escalonado > * { animation: none; opacity: 1; transform: none; } /* La palomita se queda dibujada; el arco y la barra sí siguen girando porque son el único indicio de que algo está pasando, pero más lento. */ .paso-marca .trazo { stroke-dashoffset: 0; animation: none; } .orbita { animation-duration: 2.4s; } .barra-progreso span { animation-duration: 3.2s; } .fi-btn:hover { transform: none; } }