/* ============================================================ Integra360 Libros · Identidad visual Acento: azul profundo · Modo claro + oscuro ------------------------------------------------------------ Edita SOLO --i360-primary y la escala --i360-blue-* para cambiar el color de marca. Las variables legacy (indigo-*, purple-*) son ALIAS hacia los semánticos — toda la app se repinta automáticamente. La fuente Inter se carga vía en el de cada HTML. ============================================================ */ /* ----- MODO CLARO (por defecto) ----- */ :root, [data-theme="light"] { /* Escala azul profundo de marca */ --i360-blue-50: #E1ECF7; --i360-blue-100: #B9D2EE; --i360-blue-200: #88B2E0; --i360-blue-400: #3D82CC; --i360-blue-600: #15559E; --i360-blue-800: #0C447C; --i360-blue-900: #062E55; /* Acento semántico */ --i360-primary: #15559E; --i360-primary-hover: #0C447C; --i360-primary-bg: #E1ECF7; --i360-primary-text: #0C447C; --i360-on-primary: #FFFFFF; /* Superficies / lienzo / bordes */ --i360-canvas: #F1F1ED; /* fondo de página */ --i360-surface: #FFFFFF; /* cards, modales, sidebar */ --i360-surface-2: #F7F7F4; /* filas hover, surface alterno */ --i360-border: #E2E2DC; /* Texto */ --i360-text: #1F1F1D; --i360-text-muted: #6B6B66; --i360-text-faint: #9A9A93; /* Estados (base + bg + text) */ --i360-success: #15803D; --i360-success-bg: #E3F3E8; --i360-success-text: #105E2E; --i360-warning: #B45309; --i360-warning-bg: #FBEFD8; --i360-warning-text: #8A4108; --i360-danger: #C0322F; --i360-danger-bg: #FBE6E5; --i360-danger-text: #8F211F; --i360-info: var(--i360-primary); --i360-info-bg: var(--i360-primary-bg); --i360-info-text: var(--i360-primary-text); /* Forma */ --i360-radius-sm: 6px; --i360-radius-md: 8px; --i360-radius-lg: 12px; /* Sombras (solo modales/popovers; tarjetas usan border) */ --i360-shadow-sm: 0 1px 2px rgba(0,0,0,0.03), 0 1px 3px rgba(0,0,0,0.05); --i360-shadow-md: 0 4px 6px rgba(0,0,0,0.04), 0 10px 24px rgba(21,85,158,0.06); --i360-shadow-lg: 0 10px 15px rgba(0,0,0,0.05), 0 20px 40px rgba(21,85,158,0.08); --i360-shadow-glow: 0 0 0 1px rgba(21,85,158,0.10), 0 8px 24px rgba(21,85,158,0.12); --i360-shadow-pop: 0 8px 24px rgba(15, 23, 42, 0.12); /* Gradientes (en transición; ideal SOLO para login/marketing) */ --i360-gradient: linear-gradient(135deg, var(--i360-primary) 0%, var(--i360-blue-400) 100%); --i360-gradient-soft: linear-gradient(135deg, rgba(21,85,158,0.08) 0%, rgba(61,130,204,0.08) 100%); /* ---- ALIASES LEGACY → semánticos ---- Mientras Fase B migra HTML/JS, los nombres viejos siguen funcionando y se repintan al azul. */ --i360-indigo-50: var(--i360-primary-bg); --i360-indigo-100: var(--i360-primary-bg); --i360-indigo-200: var(--i360-blue-100); --i360-indigo-300: var(--i360-blue-200); --i360-indigo-500: var(--i360-primary); --i360-indigo-600: var(--i360-primary); --i360-indigo-700: var(--i360-primary-hover); --i360-purple-500: var(--i360-blue-400); --i360-purple-600: var(--i360-primary); --i360-purple-700: var(--i360-primary-hover); } /* ----- MODO OSCURO ----- */ [data-theme="dark"] { --i360-primary: #4A8FD6; --i360-primary-hover: #6BA6E2; --i360-primary-bg: #15335A; --i360-primary-text: #CFE2F5; --i360-on-primary: #FFFFFF; --i360-canvas: #0D0D0F; --i360-surface: #18181C; --i360-surface-2: #202026; --i360-border: #2A2A30; --i360-text: #ECECEC; --i360-text-muted: #9A9AA2; --i360-text-faint: #6A6A72; --i360-success: #3FB873; --i360-success-bg: #14331F; --i360-success-text: #8EE0AE; --i360-warning: #E0A93B; --i360-warning-bg: #3A2A0E; --i360-warning-text: #F2CE84; --i360-danger: #E8706D; --i360-danger-bg: #3A1A19; --i360-danger-text: #F3ABA9; --i360-shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.5); --i360-gradient: linear-gradient(135deg, var(--i360-primary) 0%, var(--i360-blue-200) 100%); --i360-gradient-soft: linear-gradient(135deg, rgba(74,143,214,0.10) 0%, rgba(136,178,224,0.10) 100%); } /* Respeta el tema del SO la primera vez (sin preferencia guardada) */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --i360-primary: #4A8FD6; --i360-primary-hover: #6BA6E2; --i360-primary-bg: #15335A; --i360-primary-text: #CFE2F5; --i360-canvas: #0D0D0F; --i360-surface: #18181C; --i360-surface-2: #202026; --i360-border: #2A2A30; --i360-text: #ECECEC; --i360-text-muted: #9A9AA2; --i360-text-faint: #6A6A72; --i360-success: #3FB873; --i360-success-bg: #14331F; --i360-success-text: #8EE0AE; --i360-warning: #E0A93B; --i360-warning-bg: #3A2A0E; --i360-warning-text: #F2CE84; --i360-danger: #E8706D; --i360-danger-bg: #3A1A19; --i360-danger-text: #F3ABA9; } } /* ----- Base ----- */ * { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } body { color-scheme: light dark; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: var(--i360-canvas); color: var(--i360-text); font-weight: 400; } /* Evita que la página se "salga" al deslizar horizontal con mouse/trackpad. - overflow-x: clip recorta el desbordamiento horizontal SIN crear un contenedor de scroll (no rompe position: sticky del topbar/thead). - overscroll-behavior-x evita el gesto de "atrás/adelante" del navegador y que el scroll de una tabla arrastre la página. */ html, body { overflow-x: clip; overscroll-behavior-x: none; max-width: 100%; } /* El contenido ancho (tablas) se desplaza dentro de su propio contenedor, sin contagiar el scroll a la página. */ .overflow-x-auto, .overflow-auto { overscroll-behavior-x: contain; } /* Atar color-scheme al tema elegido: los controles nativos (input[type=date]/time/number, selects) pintan su valor según color-scheme. Si el tema de la app no coincide con el del SO, el texto de la fecha quedaba invisible. Forzamos a que coincida. */ :root[data-theme="light"] body { color-scheme: light; } :root[data-theme="dark"] body { color-scheme: dark; } /* Respaldo: el valor de los date/time toma el color del texto del tema. El valor se pinta en pseudo-elementos separados (día/mes/año), hay que colorearlos todos o el valor queda gris/invisible. */ .form-input::-webkit-datetime-edit, .form-input::-webkit-datetime-edit-fields-wrapper, .form-input::-webkit-datetime-edit-text, .form-input::-webkit-datetime-edit-year-field, .form-input::-webkit-datetime-edit-month-field, .form-input::-webkit-datetime-edit-day-field, .form-input::-webkit-datetime-edit-hour-field, .form-input::-webkit-datetime-edit-minute-field, .form-input::-webkit-datetime-edit-ampm-field { color: var(--i360-text); } input[type="date"].form-input, input[type="time"].form-input, input[type="datetime-local"].form-input { color: var(--i360-text); } /* El ícono del calendario también debe verse en oscuro. */ [data-theme="dark"] .form-input::-webkit-calendar-picker-indicator { filter: invert(1) opacity(0.7); } /* Tipografía refinada */ h1 { letter-spacing: -0.02em; } h2, h3 { letter-spacing: -0.01em; } /* ---- Fondos ---- */ .gradient-bg { background: radial-gradient(circle at 0% 0%, rgba(79,70,229,0.05) 0%, transparent 50%), radial-gradient(circle at 100% 0%, rgba(124,58,237,0.05) 0%, transparent 50%), linear-gradient(180deg, #FFFFFF 0%, #FAFBFC 100%); background-attachment: fixed; } .gradient-text { background: var(--i360-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ---- Animación de pulso para los indicadores ---- */ .pulse-dot { animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } /* Entrada suave de las cards */ @keyframes slide-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .fade-in { animation: slide-up 0.35s ease-out backwards; } /* ---- Inputs uniformes ---- */ .form-input { width: 100%; padding: 0.7rem 0.9rem; border: 1.5px solid var(--i360-border); border-radius: 0.6rem; background-color: var(--i360-surface); transition: all 0.15s ease; font-size: 0.95rem; color: var(--i360-text); } .form-input::placeholder { color: var(--i360-text-faint); } .form-input:hover { border-color: var(--i360-primary-bg); } .form-input:focus { outline: none; border-color: var(--i360-primary); box-shadow: 0 0 0 4px var(--i360-primary-bg); } /* ============================================================ Tiles (radio + checkbox card style) ============================================================ */ .tile { position: relative; display: block; background: var(--i360-surface); border: 2px solid var(--i360-border); border-radius: 0.85rem; padding: 1rem 1.1rem; cursor: pointer; transition: all 0.18s ease; overflow: hidden; } .tile:hover { border-color: var(--i360-primary); background: var(--i360-primary-bg); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(21,85,158,0.08); } .tile-content { position: relative; z-index: 1; } .tile-title { font-weight: 600; font-size: 0.95rem; color: rgb(17 24 39); line-height: 1.2; margin-bottom: 0.25rem; } .tile-desc { font-size: 0.78rem; color: rgb(107 114 128); line-height: 1.35; } .tile-check { position: absolute; top: 0.6rem; right: 0.7rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--i360-primary); color: #fff; font-size: 0.8rem; font-weight: bold; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0.6); transition: all 0.18s ease; } /* Estado seleccionado (radio y checkbox usan misma regla) */ .tile:has(input:checked) { border-color: var(--i360-primary); background: linear-gradient(135deg, var(--i360-primary-bg), var(--i360-primary-bg)); box-shadow: 0 6px 16px rgba(21,85,158,0.12); } .tile:has(input:checked) .tile-check { opacity: 1; transform: scale(1); } .tile:has(input:focus-visible) { outline: 2px solid var(--i360-primary); outline-offset: 2px; } /* ============================================================ Status de procesamiento (pasos) ============================================================ */ .step-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.65rem 0.9rem; border-radius: 0.55rem; background: var(--i360-surface-2); color: rgb(107 114 128); transition: all 0.2s ease; } .step-row.is-doing { background: var(--i360-primary-bg); color: var(--i360-primary-text); font-weight: 500; } .step-row.is-ok { background: rgb(220 252 231); color: rgb(21 128 61); } .step-row.is-fail { background: rgb(254 226 226); color: rgb(185 28 28); } .step-icon { font-size: 0.95rem; line-height: 1; } /* ============================================================ Detalles varios ============================================================ */ code { font-family: 'SF Mono', 'Monaco', 'Cascadia Code', monospace; font-size: 0.85em; } #empresa-error span:last-child, #login-error { white-space: pre-line; } /* Chips de bloques en el preview */ .chip { display: inline-flex; align-items: center; background: var(--i360-surface); color: var(--i360-primary-text); border: 1px solid var(--i360-primary-bg); border-radius: 999px; padding: 0.2rem 0.7rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; } /* Cards module visuales que se "elevan" en hover */ .module-card { transition: all 0.3s ease; } .module-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,0.06); } /* ---- Spinner robusto (no depende de Tailwind) ---- */ .spinner { width: 28px; height: 28px; border: 3px solid var(--i360-primary-bg); border-top-color: var(--i360-primary); border-radius: 50%; animation: spin 0.8s linear infinite; flex-shrink: 0; } @keyframes spin { to { transform: rotate(360deg); } } /* (.nav-tab del header horizontal legacy: eliminado en Fase D3 junto con renderHeader; toda la navegación vive ahora en el sidebar de renderShell.) */ /* ============================================================ Inputs pequeños (para tablas inline) ============================================================ */ .form-input-sm { padding: 0 0.5rem; font-size: 0.82rem; min-width: 0; height: 34px; line-height: 1.2; box-sizing: border-box; vertical-align: middle; } /* Ocultar spinners de input[type=number] para que las celdas tengan ancho consistente */ .form-input-sm[type=number]::-webkit-outer-spin-button, .form-input-sm[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .form-input-sm[type=number] { -moz-appearance: textfield; appearance: textfield; } /* Selects pequeños — misma altura que los inputs */ select.form-input-sm { padding-right: 1.6rem; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 0.5rem center; background-size: 0.7rem; -webkit-appearance: none; -moz-appearance: none; appearance: none; } /* Selects grandes (.form-input): quitar apariencia nativa para que el texto use el color del tema (macOS pintaba el valor en gris). Se excluyen los listbox (size>1), que deben conservar su lista. */ select.form-input:not([size]), select.form-input[size="1"] { padding-right: 2.2rem; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 0.8rem center; background-size: 0.8rem; -webkit-appearance: none; -moz-appearance: none; appearance: none; } /* ============================================================ Tile compacto (modal de auxiliares) ============================================================ */ .tile.compact { padding: 0.75rem 0.85rem; } .tile.compact .tile-desc { font-size: 0.72rem; } /* ============================================================ Check tag (etiquetas multi-check de auxiliares) ============================================================ */ .check-tag { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.7rem; background: var(--i360-surface-2); border: 1px solid var(--i360-border); border-radius: 0.5rem; cursor: pointer; font-size: 0.82rem; transition: all 0.15s ease; } .check-tag:hover { background: var(--i360-primary-bg); } .check-tag:has(input:checked) { background: var(--i360-primary-bg); border-color: var(--i360-primary); color: var(--i360-primary-text); } .check-tag input { accent-color: var(--i360-primary); } /* ============================================================ Switch toggle (interruptor on/off estilo iOS) ============================================================ */ .switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; } .switch input { opacity: 0; width: 0; height: 0; position: absolute; } .switch-slider { position: absolute; inset: 0; background: #d1d5db; border-radius: 9999px; cursor: pointer; transition: background 0.2s ease; } .switch-slider::before { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: white; border-radius: 9999px; box-shadow: 0 1px 3px rgba(0,0,0,0.18); transition: transform 0.22s ease; } .switch input:checked + .switch-slider { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); } .switch input:checked + .switch-slider::before { transform: translateX(18px); } .switch input:focus-visible + .switch-slider { outline: 2px solid var(--i360-primary); outline-offset: 2px; } /* Bloque de detalle que se oculta cuando el switch maestro está apagado */ .section-card[data-lotes="off"] #lotes-detalle { opacity: 0.45; pointer-events: none; filter: grayscale(0.5); } /* ============================================================ Tile radio (tarjetas seleccionables tipo Apple settings) ============================================================ */ .tile-radio { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0.65rem 0.5rem; border: 1px solid var(--i360-border); border-radius: 0.65rem; background: white; font-size: 0.8rem; font-weight: 500; color: rgb(55 65 81); cursor: pointer; transition: all 0.15s; min-height: 44px; } .tile-radio:hover { border-color: var(--i360-primary); background: rgb(248 250 252); } .tile-radio input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; } .tile-radio:has(input:checked) { border-color: var(--i360-primary); background: var(--i360-primary-bg); color: var(--i360-primary-text); box-shadow: 0 0 0 3px rgba(21,85,158,0.12); } .tile-radio span { line-height: 1.2; } /* ============================================================ Tags (roles del auxiliar en el listado) ============================================================ */ .tag { display: inline-block; padding: 0.1rem 0.55rem; font-size: 0.68rem; font-weight: 600; border-radius: 9999px; letter-spacing: 0.02em; } .tag-cliente { background: #dbeafe; color: #1e40af; } .tag-proveedor { background: #fef3c7; color: #92400e; } .tag-empleado { background: #dcfce7; color: #166534; } .tag-socio { background: #fce7f3; color: #9d174d; } .tag-rel { background: #ede9fe; color: #5b21b6; } .tag-agente { background: #cffafe; color: #155e75; } .tag-especial { background: #fef9c3; color: #854d0e; } /* ============================================================ Badges ============================================================ */ .badge-bank, .badge-pers { display: inline-block; font-size: 0.7rem; font-weight: 600; padding: 0.15rem 0.55rem; border-radius: 9999px; } .badge-bank { background: #ecfeff; color: #0e7490; border: 1px solid #a5f3fc; } .badge-pers { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; } .badge-ok { display: inline-block; font-size: 0.7rem; font-weight: 700; padding: 0.18rem 0.6rem; border-radius: 9999px; background: #dcfce7; color: #15803d; } .badge-warn { display: inline-block; font-size: 0.7rem; font-weight: 700; padding: 0.18rem 0.6rem; border-radius: 9999px; background: #fef9c3; color: #854d0e; } .badge-neutral { display: inline-block; font-size: 0.7rem; font-weight: 700; padding: 0.18rem 0.6rem; border-radius: 9999px; background: #e5e7eb; color: #374151; } /* ============================================================ Tipo cuenta (movimiento / grupo) ============================================================ */ .tipo-mov { display: inline-block; font-size: 0.7rem; padding: 0.1rem 0.5rem; border-radius: 9999px; background: #eef2ff; color: #4338ca; } .tipo-grupo { display: inline-block; font-size: 0.7rem; padding: 0.1rem 0.5rem; border-radius: 9999px; background: #f3f4f6; color: #4b5563; } .row-grupo { background: var(--i360-surface-2); } .row-grupo td { font-weight: 500; } .row-mov { background: var(--i360-surface); } .chip-bloque { display: inline-block; font-size: 0.7rem; font-weight: 600; padding: 0.1rem 0.5rem; border-radius: 9999px; background: #f1f5f9; color: #475569; } /* ============================================================ Filter tabs (auxiliares + reportes) ============================================================ */ .filter-tab, .rep-tab { padding: 0.6rem 1rem; font-size: 0.85rem; color: var(--i360-text-muted); border-bottom: 2px solid transparent; white-space: nowrap; font-weight: 500; transition: all 0.15s ease; } .filter-tab:hover, .rep-tab:hover { color: var(--i360-text); } .filter-tab-active, .rep-tab-active { color: var(--i360-primary-text); border-bottom-color: var(--i360-primary); font-weight: 600; } /* ============================================================ Dropdown de autocomplete genérico (cliente, producto, cuenta) ============================================================ */ .cuenta-dropdown, .dropdown-autocomplete { position: absolute; top: 100%; left: 0; right: 0; background: var(--i360-surface); border: 1px solid var(--i360-border); border-radius: 0.5rem; box-shadow: 0 8px 18px rgba(0,0,0,0.1); max-height: 360px; overflow-y: auto; z-index: 30; margin-top: 2px; } .dropdown-autocomplete.hidden, .cuenta-dropdown.hidden { display: none; } .dropdown-hint { position: sticky; top: 0; background: var(--i360-primary-bg); color: var(--i360-primary-text); font-size: 0.72rem; padding: 0.45rem 0.7rem; border-bottom: 1px solid var(--i360-primary-bg); z-index: 1; } .dropdown-empty { padding: 0.7rem; text-align: center; font-size: 0.8rem; color: rgb(107 114 128); } .cuenta-dropdown.open { display: block; } .dropdown-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.7rem; font-size: 0.82rem; width: 100%; text-align: left; border-bottom: 1px solid var(--i360-surface-2); cursor: pointer; } .dropdown-item:hover { background: var(--i360-primary-bg); } .dropdown-item code { background: var(--i360-surface-2); padding: 0.05rem 0.35rem; border-radius: 3px; font-size: 0.72rem; color: rgb(75 85 99); flex-shrink: 0; } .cuenta-tag { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--i360-primary-bg); border: 1px solid var(--i360-primary); border-radius: 0.45rem; padding: 0.35rem 0.5rem; font-size: 0.82rem; } .cuenta-tag code { background: var(--i360-surface); padding: 0.05rem 0.35rem; border-radius: 3px; font-size: 0.72rem; color: rgb(75 85 99); } /* ============================================================ KPI Cards (Dashboard Vista Gerente) ============================================================ */ .kpi-card { display: block; background: var(--i360-surface); border: 1px solid var(--i360-border); border-radius: var(--i360-radius-lg); padding: 1.15rem 1.3rem; position: relative; overflow: hidden; text-decoration: none; transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; animation: slide-up 0.4s ease-out backwards; } a.kpi-card:hover { border-color: var(--kpi-accent, var(--i360-primary)); transform: translateY(-1px); box-shadow: var(--i360-shadow-md); } /* Barra de acento superior según estado (color de estado por token) */ .kpi-card::before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: var(--kpi-accent, var(--i360-primary)); } .kpi-card[data-state="success"] { --kpi-accent: var(--i360-success); } .kpi-card[data-state="danger"] { --kpi-accent: var(--i360-danger); } .kpi-card[data-state="warning"] { --kpi-accent: var(--i360-warning); } .kpi-card[data-state="neutral"] { --kpi-accent: var(--i360-primary); } .kpi-header { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.7rem; } .kpi-icon { width: 32px; height: 32px; border-radius: 0.5rem; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--kpi-accent, var(--i360-primary)) 14%, var(--i360-surface)); color: var(--kpi-accent, var(--i360-primary)); } .kpi-title { font-size: 0.78rem; font-weight: 500; color: var(--i360-text-muted); } .kpi-value { font-size: 1.7rem; font-weight: 500; color: var(--i360-text); line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .kpi-foot { margin-top: 0.4rem; font-size: 0.74rem; color: var(--i360-text-faint); } .kpi-trend { font-weight: 500; } .kpi-trend.up { color: var(--i360-success); } .kpi-trend.down { color: var(--i360-danger); } .kpi-spark { margin-top: 0.65rem; height: 34px; } .kpi-spark svg { display: block; width: 100%; height: 100%; overflow: visible; } /* Section cards (alertas, tops, chart) */ .section-card { background: var(--i360-surface); border-radius: 1rem; border: 1px solid var(--i360-border); box-shadow: var(--i360-shadow-sm); overflow: hidden; animation: slide-up 0.5s ease-out backwards; } .section-card-header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--i360-border); background: var(--i360-surface-2); } /* Alertas (Dashboard) — solo aparecen si hay algo que atender */ .alert-item { display: flex; align-items: center; gap: 0.85rem; padding: 0.85rem 1.25rem; font-size: 0.85rem; } .alert-item + .alert-item { border-top: 1px solid var(--i360-border); } .alert-ico { width: 32px; height: 32px; border-radius: 0.5rem; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--alert-accent, var(--i360-primary)) 14%, var(--i360-surface)); color: var(--alert-accent, var(--i360-primary)); } .alert-item[data-nivel="danger"] { --alert-accent: var(--i360-danger); } .alert-item[data-nivel="warning"] { --alert-accent: var(--i360-warning); } .alert-item[data-nivel="info"] { --alert-accent: var(--i360-primary); } .alert-text { flex: 1; color: var(--i360-text); } .alert-text strong { font-weight: 500; } .alert-action { font-size: 0.8rem; color: var(--i360-primary); font-weight: 500; text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 0.25rem; } .alert-action:hover { color: var(--i360-primary-hover); } .alert-empty { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 1.75rem 1rem; color: var(--i360-text-muted); font-size: 0.85rem; } .alert-empty .i360-ico { color: var(--i360-success); } /* Top deudores / acreedores */ .top-item { display: flex; align-items: center; justify-content: space-between; padding: 0.7rem 1.25rem; } .top-item + .top-item { border-top: 1px solid var(--i360-border); } .top-item .name { font-weight: 500; color: var(--i360-text); font-size: 0.85rem; } .top-item .meta { font-size: 0.72rem; color: var(--i360-text-faint); margin-top: 0.1rem; } .top-item .amount { font-weight: 500; font-variant-numeric: tabular-nums; font-size: 0.9rem; } .top-empty { padding: 1.5rem 1rem; text-align: center; color: var(--i360-text-faint); font-size: 0.85rem; } /* ============================================================ SHELL: Sidebar + Topbar (identidad i360) ============================================================ */ body.shell { padding-left: 260px; background: var(--i360-canvas); min-height: 100vh; } /* Placeholder de la franja del sidebar: evita el flash negro mientras el JS pinta el menú al navegar de pantalla en pantalla. */ body.shell::before { content: ""; position: fixed; top: 0; left: 0; width: 260px; height: 100vh; background: var(--i360-surface); border-right: 1px solid var(--i360-border); z-index: 0; pointer-events: none; } body.i360-collapsed.shell::before { width: 64px; } @media (max-width: 768px) { body.shell { padding-left: 0; } body.shell::before { display: none; } } /* ---- SIDEBAR ---- */ .i360-sidebar { position: fixed; top: 0; left: 0; width: 260px; height: 100vh; background: var(--i360-surface); border-right: 1px solid var(--i360-border); display: flex; flex-direction: column; z-index: 40; overflow-y: auto; box-shadow: 1px 0 0 rgba(0,0,0,0.02); } .i360-sidebar::-webkit-scrollbar { width: 6px; } .i360-sidebar::-webkit-scrollbar-thumb { background: var(--i360-border); border-radius: 3px; } .i360-sidebar::-webkit-scrollbar-thumb:hover { background: var(--i360-text-faint); } @media (max-width: 768px) { .i360-sidebar { transform: translateX(-100%); transition: transform 0.25s; } .i360-sidebar.open { transform: translateX(0); } } /* Branding del sidebar */ .i360-sidebar-brand { display: flex; align-items: center; gap: 0.7rem; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--i360-border); position: relative; } .i360-sidebar-brand::after { content: ''; position: absolute; bottom: -1px; left: 1.25rem; right: 1.25rem; height: 2px; background: var(--i360-gradient); opacity: 0.18; border-radius: 1px; } .i360-sidebar-brand .logo { width: 38px; height: 38px; background: var(--i360-primary); border-radius: 0.6rem; display: flex; align-items: center; justify-content: center; color: var(--i360-on-primary); font-weight: 700; font-size: 0.72rem; letter-spacing: -0.01em; } .i360-sidebar-brand .name { font-size: 0.88rem; font-weight: 700; color: var(--i360-text); line-height: 1.1; letter-spacing: -0.01em; } .i360-sidebar-brand .lab { font-size: 0.62rem; color: #B45309; font-weight: 500; display: flex; align-items: center; gap: 0.3rem; margin-top: 0.15rem; text-transform: uppercase; letter-spacing: 0.05em; } /* Banner de empresa activa */ .i360-empresa-banner { padding: 0.85rem 1.25rem; background: var(--i360-primary-bg); border-bottom: 1px solid var(--i360-border); position: relative; } .i360-empresa-banner .lbl { font-size: 0.58rem; color: var(--i360-primary); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; } .i360-empresa-banner .name { font-size: 0.85rem; font-weight: 700; color: var(--i360-text); margin-top: 0.2rem; line-height: 1.2; letter-spacing: -0.01em; } .i360-empresa-banner .cambiar { font-size: 0.68rem; color: var(--i360-primary); cursor: pointer; margin-top: 0.3rem; font-weight: 500; display: inline-block; transition: color 0.12s; } .i360-empresa-banner .cambiar:hover { color: var(--i360-primary-hover); } /* Navegación principal */ .i360-nav { flex: 1; padding: 0.6rem 0.5rem; } .i360-mod { list-style: none; margin: 0 0 0.1rem 0; padding: 0; } .i360-mod-header { display: flex; align-items: center; padding: 0.55rem 0.75rem; cursor: pointer; user-select: none; font-size: 0.85rem; color: var(--i360-text-muted); font-weight: 500; border-radius: 0.5rem; transition: all 0.15s ease; position: relative; } .i360-mod-header:hover { background: var(--i360-surface-2); color: var(--i360-text); } .i360-mod-header.active { background: var(--i360-primary-bg); color: var(--i360-primary-text); font-weight: 600; } .i360-mod-header.active::before { content: ''; position: absolute; left: -0.5rem; top: 0.4rem; bottom: 0.4rem; width: 3px; background: var(--i360-gradient); border-radius: 0 2px 2px 0; } .i360-mod.open > .i360-mod-header { color: var(--i360-text); } /* Ícono de línea inline (Lucide), alineado con texto adyacente */ .i360-ico { display: inline-flex; align-items: center; justify-content: center; vertical-align: -0.18em; flex-shrink: 0; } .i360-ico.spin svg { animation: spin 0.8s linear infinite; } /* Input de búsqueda con ícono prefijado */ .input-search { position: relative; display: block; } .input-search > .input-search-ico { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--i360-text-faint); pointer-events: none; } .input-search > .form-input { padding-left: 32px; } .i360-mod-icon { width: 22px; display: inline-flex; align-items: center; justify-content: center; margin-right: 0.65rem; opacity: 0.95; } .i360-mod-icon svg { width: 18px; height: 18px; } .i360-mod-label { flex: 1; } .i360-mod-arrow { display: inline-flex; align-items: center; justify-content: center; color: var(--i360-text-faint); transition: transform 0.2s ease; } .i360-mod-arrow svg { width: 14px; height: 14px; } .i360-mod.open .i360-mod-arrow { transform: rotate(90deg); color: var(--i360-primary); } /* Sub-menu */ .i360-submenu { list-style: none; margin: 0.15rem 0 0.3rem 0; padding: 0; max-height: 0; overflow: hidden; transition: max-height 0.25s ease-out; } .i360-mod.open .i360-submenu { max-height: 600px; } .i360-sub-item { display: flex; align-items: center; padding: 0.42rem 0.75rem 0.42rem 2.6rem; margin: 0.05rem 0; font-size: 0.78rem; color: var(--i360-text-muted); text-decoration: none; border-radius: 0.45rem; position: relative; transition: all 0.12s ease; } .i360-sub-item::before { content: ''; position: absolute; left: 1.45rem; top: 50%; transform: translateY(-50%); width: 4px; height: 4px; background: var(--i360-text-faint); border-radius: 50%; transition: all 0.12s; } .i360-sub-item:hover { background: var(--i360-surface-2); color: var(--i360-text); } .i360-sub-item:hover::before { background: var(--i360-primary); } .i360-sub-item.active { background: var(--i360-primary-bg); color: var(--i360-primary-text); font-weight: 600; } .i360-sub-item.active::before { background: var(--i360-primary); box-shadow: 0 0 0 3px var(--i360-primary-bg); } .i360-sub-item.disabled { color: var(--i360-text-faint); cursor: not-allowed; } .i360-sub-item.disabled::before { background: var(--i360-border); } .i360-sub-item.disabled:hover { background: transparent; color: var(--i360-text-faint); } .i360-sub-item.disabled:hover::before { background: var(--i360-border); } .i360-sub-item.disabled::after { content: 'próx'; margin-left: auto; font-size: 0.55rem; background: var(--i360-surface-2); color: var(--i360-text-faint); padding: 0.1rem 0.4rem; border-radius: 0.3rem; font-style: normal; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } /* Footer del sidebar */ .i360-sidebar-footer { padding: 0.85rem 1.25rem; border-top: 1px solid var(--i360-border); background: var(--i360-surface-2); font-size: 0.7rem; color: var(--i360-text-faint); } /* ---- Encabezado de sección ---- */ .i360-section { padding: 0.7rem 0.85rem 0.3rem; font-size: 0.66rem; font-weight: 500; letter-spacing: 0.04em; color: var(--i360-text-faint); } .i360-nav > .i360-section:first-child { padding-top: 0.25rem; } /* ---- Módulo como link plano (Inicio, Dashboard) ---- */ .i360-mod-header.flat { text-decoration: none; } .i360-mod-header.flat.active { background: var(--i360-primary-bg); color: var(--i360-primary-text); } .i360-mod-header.flat.disabled { cursor: default; color: var(--i360-text-faint); } .i360-mod-header.flat.disabled:hover { background: transparent; } .i360-soon { margin-left: auto; font-size: 0.6rem; color: var(--i360-text-faint); border: 1px solid var(--i360-border); border-radius: 999px; padding: 0.02rem 0.4rem; } .i360-mod-tag { font-size: 0.55rem; background: var(--i360-warning-bg); color: var(--i360-warning-text); padding: 0.05rem 0.3rem; border-radius: 6px; margin-left: 0.3rem; } /* ---- Módulo bloqueado (vendible no contratado) / próximamente (Fase G) ---- */ .i360-mod-header.locked, .i360-mod-header.soon { cursor: default; color: var(--i360-text-faint); } .i360-mod--locked .i360-mod-icon, .i360-mod--soon .i360-mod-icon { opacity: 0.5; } .i360-mod-badge { font-size: 0.55rem; font-weight: 500; white-space: nowrap; padding: 0.05rem 0.4rem; border-radius: 999px; border: 1px solid var(--i360-border); color: var(--i360-text-faint); } .i360-mod-lock { display: inline-flex; color: var(--i360-text-faint); margin-left: 0.35rem; } /* ---- Botón de colapso a riel ---- */ .i360-collapse-btn { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.6rem 1rem; border: none; background: transparent; cursor: pointer; border-top: 1px solid var(--i360-border); color: var(--i360-text-muted); font-size: 0.78rem; font-weight: 500; transition: background 0.15s ease, color 0.15s ease; } .i360-collapse-btn:hover { background: var(--i360-surface-2); color: var(--i360-text); } .i360-collapse-ico { display: inline-flex; } .i360-collapse-ico svg { width: 16px; height: 16px; transform: rotate(180deg); transition: transform 0.2s ease; } /* Botón colapsar arriba (dentro del brand, siempre visible sin scroll) */ .i360-collapse-top { margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; color: var(--i360-text-muted); background: transparent; border: 1px solid transparent; cursor: pointer; transition: all 0.15s ease; } .i360-collapse-top:hover { background: var(--i360-surface-2); color: var(--i360-text); } .i360-collapse-top svg { width: 16px; height: 16px; transform: rotate(180deg); } body.i360-collapsed .i360-collapse-top { display: none; } /* Enlace "volver al módulo" en el topbar */ .i360-back-mod { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8rem; font-weight: 600; color: var(--i360-primary); padding: 3px 8px; border-radius: 8px; text-decoration: none; white-space: nowrap; } .i360-back-mod:hover { background: var(--i360-primary-bg); } .i360-back-mod svg { width: 15px; height: 15px; } /* ============================================================ Modo colapsado a riel (solo escritorio; en móvil = drawer) ============================================================ */ @media (min-width: 769px) { body.i360-collapsed.shell { padding-left: 64px; } body.i360-collapsed .i360-sidebar { width: 64px; overflow: visible; } /* Oculta lo textual, conserva íconos */ body.i360-collapsed .i360-sidebar-brand > div:not(.logo), body.i360-collapsed .i360-empresa-banner, body.i360-collapsed .i360-section, body.i360-collapsed .i360-mod-label, body.i360-collapsed .i360-mod-arrow, body.i360-collapsed .i360-soon, body.i360-collapsed .i360-mod-badge, body.i360-collapsed .i360-mod-lock, body.i360-collapsed .i360-sidebar-footer, body.i360-collapsed .i360-collapse-lbl { display: none; } body.i360-collapsed .i360-sidebar-brand { justify-content: center; padding-left: 0; padding-right: 0; } body.i360-collapsed .i360-mod-header { justify-content: center; padding-left: 0; padding-right: 0; } body.i360-collapsed .i360-mod-icon { margin-right: 0; } body.i360-collapsed .i360-nav { padding: 0.6rem 0.35rem; } body.i360-collapsed .i360-collapse-btn { justify-content: center; } body.i360-collapsed .i360-collapse-ico svg { transform: rotate(0deg); } /* Submenú → flyout al pasar el mouse */ body.i360-collapsed .i360-mod { position: relative; } body.i360-collapsed .i360-submenu { display: none; } body.i360-collapsed .i360-mod:hover > .i360-submenu { display: block; position: absolute; left: 100%; top: 0; min-width: 210px; max-height: none; overflow: visible; background: var(--i360-surface); border: 1px solid var(--i360-border); border-radius: var(--i360-radius-lg); box-shadow: var(--i360-shadow-pop); padding: 0.5rem 0.6rem 0.6rem; z-index: 60; } body.i360-collapsed .i360-mod:hover > .i360-submenu::before { content: attr(data-label); display: block; font-size: 0.7rem; font-weight: 500; color: var(--i360-text-faint); padding: 0 0.4rem 0.35rem; margin-bottom: 0.25rem; border-bottom: 1px solid var(--i360-border); } } /* ---- Trigger de búsqueda (⌘K) en la barra ---- */ .i360-cmdk-trigger { display: flex; align-items: center; gap: 0.5rem; margin: 0.6rem 0.75rem 0.2rem; padding: 0.5rem 0.7rem; width: calc(100% - 1.5rem); background: var(--i360-surface-2); border: 1px solid var(--i360-border); border-radius: 0.6rem; color: var(--i360-text-faint); font-size: 0.8rem; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; } .i360-cmdk-trigger:hover { border-color: var(--i360-primary); color: var(--i360-text-muted); } .i360-cmdk-ico { display: inline-flex; } .i360-cmdk-lbl { flex: 1; text-align: left; } .i360-cmdk-kbd { font-size: 0.62rem; border: 1px solid var(--i360-border); border-radius: 5px; padding: 0.05rem 0.3rem; color: var(--i360-text-faint); } @media (min-width: 769px) { body.i360-collapsed .i360-cmdk-trigger { justify-content: center; margin: 0.6rem 0.35rem 0.2rem; padding: 0.5rem 0; width: auto; } body.i360-collapsed .i360-cmdk-lbl, body.i360-collapsed .i360-cmdk-kbd { display: none; } } /* ---- Paleta de comandos (overlay + panel) ---- */ .i360-cmdk-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(15, 23, 42, 0.45); display: flex; align-items: flex-start; justify-content: center; padding: 12vh 1rem 1rem; } .i360-cmdk-overlay[hidden] { display: none; } .i360-cmdk-panel { width: 100%; max-width: 560px; background: var(--i360-surface); border: 1px solid var(--i360-border); border-radius: var(--i360-radius-lg); box-shadow: var(--i360-shadow-pop); overflow: hidden; } .i360-cmdk-search { display: flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1rem; border-bottom: 1px solid var(--i360-border); } .i360-cmdk-search-ico { display: inline-flex; color: var(--i360-text-faint); } .i360-cmdk-search input { flex: 1; border: none; outline: none; background: transparent; font-size: 0.95rem; color: var(--i360-text); } .i360-cmdk-search input::placeholder { color: var(--i360-text-faint); } .i360-cmdk-list { list-style: none; margin: 0; padding: 0.4rem; max-height: 50vh; overflow-y: auto; } .i360-cmdk-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.7rem; border-radius: 0.5rem; cursor: pointer; } .i360-cmdk-item-ico { display: inline-flex; color: var(--i360-text-muted); } .i360-cmdk-item-label { flex: 1; font-size: 0.88rem; color: var(--i360-text); } .i360-cmdk-item-group { font-size: 0.7rem; color: var(--i360-text-faint); } .i360-cmdk-item.active { background: var(--i360-primary-bg); } .i360-cmdk-item.active .i360-cmdk-item-label { color: var(--i360-primary-text); } .i360-cmdk-item.active .i360-cmdk-item-ico { color: var(--i360-primary); } .i360-cmdk-empty { padding: 1.2rem; text-align: center; color: var(--i360-text-faint); font-size: 0.85rem; } .i360-cmdk-foot { display: flex; gap: 1rem; padding: 0.5rem 1rem; border-top: 1px solid var(--i360-border); font-size: 0.68rem; color: var(--i360-text-faint); } /* ---- Inicio: tiles de módulo (tinte por categoría) + upsell ---- */ .inicio-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; } .inicio-tile { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.1rem 1.2rem; background: color-mix(in srgb, var(--tile-accent) 9%, var(--i360-surface)); border: 1px solid var(--i360-border); border-radius: var(--i360-radius-lg); text-decoration: none; transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .inicio-tile:hover { border-color: var(--tile-accent); transform: translateY(-1px); box-shadow: var(--i360-shadow-md); } .inicio-tile-ico { width: 40px; height: 40px; border-radius: 0.6rem; background: var(--i360-surface); display: inline-flex; align-items: center; justify-content: center; color: var(--tile-accent); box-shadow: 0 1px 2px rgba(0,0,0,0.05); } .inicio-tile-label { font-weight: 500; color: var(--i360-text); } .inicio-tile-desc { font-size: 0.78rem; line-height: 1.3; color: var(--i360-text-muted); } /* Tiles "Amplía": bloqueado (contratable→demo) y próximamente (teaser) */ .inicio-tile--locked, .inicio-tile--soon { background: var(--i360-surface); border-style: dashed; font: inherit; text-align: left; width: 100%; } .inicio-tile--locked { cursor: pointer; } .inicio-tile--soon { cursor: default; } .inicio-tile--locked .inicio-tile-ico, .inicio-tile--soon .inicio-tile-ico { background: var(--i360-surface-2); color: var(--i360-text-faint); box-shadow: none; } .inicio-tile--locked .inicio-tile-label, .inicio-tile--soon .inicio-tile-label { color: var(--i360-text-muted); } .inicio-tile--locked:hover { border-color: var(--i360-primary); transform: none; box-shadow: none; } .inicio-tile--soon:hover { border-color: var(--i360-border); transform: none; box-shadow: none; } .inicio-tile-lock { display: inline-flex; vertical-align: -2px; color: var(--i360-text-faint); } .inicio-tile-badge { align-self: flex-start; font-size: 0.6rem; font-weight: 500; padding: 0.1rem 0.45rem; border-radius: 999px; border: 1px solid var(--i360-border); color: var(--i360-text-faint); } .inicio-upsell { margin-top: 1.5rem; padding: 0.85rem 1.1rem; border: 1px dashed var(--i360-border); border-radius: var(--i360-radius-md); display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 0.85rem; color: var(--i360-text-muted); } .inicio-upsell a { color: var(--i360-primary); font-weight: 500; text-decoration: none; white-space: nowrap; } .inicio-upsell a:hover { color: var(--i360-primary-hover); } /* ---- Demo de módulo bloqueado (Fase G/4b) ---- */ .i360-demo-overlay { position: fixed; inset: 0; z-index: 110; background: rgba(15, 23, 42, 0.5); display: flex; align-items: center; justify-content: center; padding: 1rem; } .i360-demo-overlay[hidden] { display: none; } .i360-demo-panel { width: 100%; max-width: 560px; position: relative; background: var(--i360-surface); border: 1px solid var(--i360-border); border-radius: var(--i360-radius-lg); box-shadow: var(--i360-shadow-pop); padding: 1.5rem; } .i360-demo-close { position: absolute; top: 0.75rem; right: 0.75rem; display: inline-flex; padding: 0.3rem; border: none; background: transparent; color: var(--i360-text-faint); cursor: pointer; border-radius: 0.4rem; } .i360-demo-close:hover { background: var(--i360-surface-2); color: var(--i360-text); } .i360-demo-head { display: flex; align-items: flex-start; gap: 0.9rem; margin-bottom: 1.1rem; padding-right: 1.5rem; } .i360-demo-ico { width: 46px; height: 46px; border-radius: 0.7rem; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--demo-accent) 14%, var(--i360-surface)); color: var(--demo-accent); } .i360-demo-title { font-size: 1.05rem; font-weight: 500; color: var(--i360-text); display: flex; align-items: center; gap: 0.5rem; } .i360-demo-badge { font-size: 0.6rem; font-weight: 500; padding: 0.1rem 0.45rem; border-radius: 999px; border: 1px solid var(--i360-border); color: var(--i360-text-faint); } .i360-demo-pitch { font-size: 0.88rem; color: var(--i360-text-muted); margin-top: 0.25rem; line-height: 1.4; } .i360-demo-body { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin-bottom: 1.2rem; } @media (max-width: 520px) { .i360-demo-body { grid-template-columns: 1fr; } } .i360-demo-bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; } .i360-demo-bullets li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.85rem; color: var(--i360-text); } .i360-demo-bullets li svg { color: var(--i360-success); flex-shrink: 0; margin-top: 1px; } .i360-demo-preview { border: 1px solid var(--i360-border); border-radius: var(--i360-radius-md); background: var(--i360-surface-2); padding: 0.7rem; overflow: hidden; } .i360-demo-pv-bar { display: flex; gap: 0.3rem; margin-bottom: 0.6rem; } .i360-demo-pv-bar span { height: 8px; border-radius: 999px; background: var(--demo-accent); } .i360-demo-pv-bar span:first-child { width: 38%; opacity: 0.9; } .i360-demo-pv-bar span:last-child { width: 20%; opacity: 0.4; } .i360-demo-pv-rows { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.7rem; } .i360-demo-pv-rows i { height: 7px; border-radius: 999px; background: var(--i360-border); } .i360-demo-pv-rows i:nth-child(2) { width: 80%; } .i360-demo-pv-rows i:nth-child(3) { width: 90%; } .i360-demo-pv-rows i:nth-child(4) { width: 70%; } .i360-demo-pv-chart { display: flex; align-items: flex-end; gap: 0.35rem; height: 42px; } .i360-demo-pv-chart b { flex: 1; border-radius: 3px 3px 0 0; background: color-mix(in srgb, var(--demo-accent) 55%, transparent); } .i360-demo-pv-chart b:nth-child(1){height:40%} .i360-demo-pv-chart b:nth-child(2){height:65%} .i360-demo-pv-chart b:nth-child(3){height:50%} .i360-demo-pv-chart b:nth-child(4){height:85%} .i360-demo-pv-chart b:nth-child(5){height:70%} .i360-demo-pv-tag { font-size: 0.6rem; color: var(--i360-text-faint); margin-top: 0.5rem; text-align: center; } .i360-demo-foot { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .i360-demo-note { font-size: 0.75rem; color: var(--i360-text-faint); } .i360-demo-err { flex-basis: 100%; font-size: 0.78rem; color: var(--i360-danger); margin-top: 0.1rem; } .i360-demo-ok { text-align: center; padding: 1rem 0.5rem; } .i360-demo-ok-ico { width: 54px; height: 54px; border-radius: 999px; margin: 0 auto 0.8rem; display: inline-flex; align-items: center; justify-content: center; background: var(--i360-success-bg); color: var(--i360-success); } .i360-demo-ok .i360-demo-title { justify-content: center; } .i360-demo-ok .i360-demo-pitch { margin: 0.4rem 0 1.1rem; } /* ---- TOPBAR ---- */ .i360-topbar { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--i360-surface) 85%, transparent); backdrop-filter: blur(10px) saturate(180%); -webkit-backdrop-filter: blur(10px) saturate(180%); border-bottom: 1px solid var(--i360-border); display: flex; align-items: center; justify-content: space-between; padding: 0.7rem 1.75rem; height: 58px; } .i360-topbar-left { display: flex; align-items: center; gap: 0.75rem; font-size: 0.88rem; color: var(--i360-text); font-weight: 500; } .i360-topbar-right { display: flex; align-items: center; gap: 1rem; font-size: 0.82rem; } .i360-topbar-right span.text-gray-500 { color: var(--i360-text-faint); } .i360-topbar #i360-logout { background: var(--i360-surface-2); color: var(--i360-text-muted); font-weight: 500; padding: 0.35rem 0.8rem; border-radius: 0.45rem; font-size: 0.78rem; transition: all 0.15s; } .i360-topbar #i360-logout:hover { background: var(--i360-danger-bg); color: var(--i360-danger-text); } .i360-topbar .menu-btn { display: none; } @media (max-width: 768px) { .i360-topbar .menu-btn { display: inline-flex; background: var(--i360-gradient); color: white; padding: 0.35rem 0.7rem; border-radius: 0.45rem; border: none; font-size: 0.9rem; } } .i360-content { padding: 1.75rem 1.5rem; max-width: 1600px; margin: 0 auto; } @media (min-width: 768px) { .i360-content { padding: 2rem 2.25rem; } } /* ============================================================ Tabs de Parámetros contables (cnt-tab) ============================================================ */ .cnt-tab { padding: 0.65rem 1rem; font-size: 0.82rem; color: var(--i360-text-muted); border-bottom: 2px solid transparent; white-space: nowrap; font-weight: 500; transition: all 0.15s; } .cnt-tab:hover { color: var(--i360-text); background: var(--i360-surface-2); } .cnt-tab-active { color: var(--i360-primary-text); border-bottom-color: var(--i360-primary); font-weight: 600; background: var(--i360-gradient-soft); } /* ============================================================ Section number (compra form) ============================================================ */ .section-num { display: inline-flex; width: 1.5rem; height: 1.5rem; align-items: center; justify-content: center; background: var(--i360-primary); color: #fff; border-radius: 0.4rem; font-size: 0.75rem; font-weight: 700; } /* ============================================================ Toast ============================================================ */ .toast-in { animation: toast-in 0.25s ease-out; } .toast-out { animation: toast-out 0.3s ease-in forwards; } @keyframes toast-in { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes toast-out { to { transform: translateX(20px); opacity: 0; } } /* ============================================================ Botón de tema en el topbar (Fase A) ============================================================ */ .i360-theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--i360-radius-sm); color: var(--i360-text-muted); background: transparent; border: 1px solid transparent; cursor: pointer; transition: all 0.15s; } .i360-theme-btn:hover { background: var(--i360-surface-2); color: var(--i360-text); border-color: var(--i360-border); } /* ============================================================ Utility classes para Fase B (migración indigo/purple → azul) Reutilizables en todas las pantallas. NO usan gradientes. ============================================================ */ /* --- Botones --- */ .btn-i360-primary { background: var(--i360-primary); color: var(--i360-on-primary); border: 1px solid var(--i360-primary); transition: background 0.15s, border-color 0.15s; } .btn-i360-primary:hover { background: var(--i360-primary-hover); border-color: var(--i360-primary-hover); } .btn-i360-outline { background: var(--i360-surface); color: var(--i360-primary); border: 1px solid var(--i360-primary-bg); transition: all 0.15s; } .btn-i360-outline:hover { background: var(--i360-primary-bg); } .btn-i360-soft { background: var(--i360-surface); color: var(--i360-text); border: 1px solid var(--i360-border); transition: all 0.15s; } .btn-i360-soft:hover { background: var(--i360-surface-2); } /* --- Links --- */ .link-i360 { color: var(--i360-primary); transition: color 0.15s; } .link-i360:hover { color: var(--i360-primary-hover); } /* --- Tags / badges contextuales (módulo Ventas, Compras, etc.) --- */ .tag-i360-accent { background: var(--i360-primary-bg); color: var(--i360-primary-text); } /* --- Cajas de información sutiles --- */ .info-i360 { background: var(--i360-primary-bg); border: 1px solid var(--i360-primary-bg); color: var(--i360-primary-text); } /* --- Superficie con tokens (para reemplazar bg-white) --- */ .surface-i360 { background: var(--i360-surface); } .surface-i360-2 { background: var(--i360-surface-2); } /* --- Texto con tokens --- */ .text-i360 { color: var(--i360-text); } .text-i360-muted { color: var(--i360-text-muted); } .text-i360-faint { color: var(--i360-text-faint); } /* --- Hover row (tablas) --- */ .row-i360-hover:hover { background: var(--i360-primary-bg); } /* --- Badges de estado del workflow de pedidos --- */ /* Mantenemos diferenciación visual con dos tonos: primary-bg (más claro) y una mezcla más profunda. Si querés agregar otro color de marca, se define como nuevo token. */ .badge-i360-programado { background: var(--i360-primary-bg); color: var(--i360-primary); } .badge-i360-facturar { background: var(--i360-primary); color: var(--i360-on-primary); } /* --- Botón seleccionado en modal cambio de estado --- */ .ce-opt-active { background: var(--i360-primary-bg) !important; border-color: var(--i360-primary) !important; color: var(--i360-primary-text); } /* --- Highlight efímero (autocompletado de form) --- */ .ring-i360-pulse { box-shadow: 0 0 0 2px var(--i360-primary-bg), 0 0 0 4px var(--i360-primary); transition: box-shadow 0.2s; } /* --- Toasts con tokens semánticos --- */ .bg-i360-toast-info { background: var(--i360-primary); color: var(--i360-on-primary); } .bg-i360-toast-ok { background: var(--i360-success); color: #FFFFFF; } .bg-i360-toast-error { background: var(--i360-danger); color: #FFFFFF; } /* ============================================================ Dark coherence — fixes globales de patrón (no por pantalla) ============================================================ */ /* (a) Inputs/selects: el utility .bg-white no debe ganarle al token. Selector calificado por elemento → sube especificidad sobre .bg-white. Funciona en claro (surface = blanco) y oscuro (surface = oscuro). */ input.form-input, select.form-input, textarea.form-input { background-color: var(--i360-surface); color: var(--i360-text); } /* (b) Tabs por estado (pedidos/facturas): movidas aquí desde los