/* ====== IslaBooks — Design System v2 ====== */ :root{ color-scheme:light; --bg:#f4f6f8; --panel:#ffffff; --ink:#111827; --muted:#6b7280; --line:#dfe3e8; --line2:#f1f3f5; --accent:#0d9488; --accent-soft:#f0fdfa; --accent-hover:#0f766e; --accent-deep:#065f46; --ok:#059669; --warn:#d97706; --danger:#dc2626; /* Aliases/superset usados por algunos módulos (antes quedaban indefinidos) */ --bg2:#eef1f4; --card:#ffffff; --surface:#ffffff; --fg:#111827; --shadow-sm:0 1px 2px rgba(0,0,0,.05); --shadow:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.05); --shadow-md:0 4px 8px -1px rgba(0,0,0,.08),0 2px 4px -2px rgba(0,0,0,.06); --shadow-lg:0 8px 16px -2px rgba(0,0,0,.1),0 4px 8px -2px rgba(0,0,0,.06); --radius:10px; --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; } /* ====== 🌗 MODO OSCURO (v1.19.82) ====== La preferencia (auto/claro/oscuro) se guarda en localStorage 'ib_theme'. Un script inline en index.html resuelve "auto" contra prefers-color-scheme ANTES del primer paint y pone data-theme="dark"|"light" en (sin parpadeo). El CSS solo necesita el bloque [data-theme="dark"]. El color de marca (--accent) lo sigue manejando applyBrandColor() inline (rgba translúcido, funciona en ambos modos). Los PDFs (jsPDF) NO se ven afectados — se generan siempre claros (papel blanco). */ :root[data-theme="dark"]{ color-scheme:dark; --bg:#0d1117; --bg2:#0b0e13; --panel:#161b22; --card:#161b22; --surface:#161b22; --ink:#e6edf3; --fg:#e6edf3; --muted:#9198a1; --line:#2a313c; --line2:#1b212a; --accent:#2dd4bf; --accent-soft:rgba(45,212,191,.12); --accent-hover:#5eead4; --accent-deep:#0d9488; --ok:#34d399; --warn:#fbbf24; --danger:#f87171; --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 1px 3px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.4); --shadow-md:0 4px 8px -1px rgba(0,0,0,.5),0 2px 4px -2px rgba(0,0,0,.4); --shadow-lg:0 8px 16px -2px rgba(0,0,0,.55),0 4px 8px -2px rgba(0,0,0,.45); } /* Overrides de componentes base que tenían blancos/negros hardcoded en su CSS */ :root[data-theme="dark"] .input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea{background:var(--panel);color:var(--ink);border-color:var(--line);} :root[data-theme="dark"] .input::placeholder{color:var(--muted);} :root[data-theme="dark"] .btn-ghost{background:var(--panel);color:var(--ink);border-color:var(--line);} :root[data-theme="dark"] .btn-ghost:hover{background:var(--line2);border-color:var(--line);} :root[data-theme="dark"] .btn-xs{background:var(--panel);color:var(--ink);border-color:var(--line);} :root[data-theme="dark"] .btn-xs:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-hover);} :root[data-theme="dark"] th{color:var(--ink);background:linear-gradient(180deg,#1b212a,#161b22);border-bottom-color:var(--line);} :root[data-theme="dark"] td{color:var(--ink);border-bottom-color:var(--line2);} /* Filas: zebra clara (#fafbfc) y hover verde claro (#f0fdf4) son reglas CSS base que no flippeaban → en dark dejaban "franja blanca". Zebra sutil oscura + hover teal tenue. */ :root[data-theme="dark"] tbody tr:nth-child(even){background:rgba(255,255,255,.035);} :root[data-theme="dark"] tbody tr:hover, :root[data-theme="dark"] tbody tr:nth-child(even):hover{background:rgba(45,212,191,.11);} :root[data-theme="dark"] .btn-danger:hover{background:rgba(248,113,113,.14);border-color:rgba(248,113,113,.4);} :root[data-theme="dark"] ::selection{background:var(--accent-soft);color:var(--accent-hover);} /* Estructura: sidebar (gradiente claro inline), badge de estado y hover del nav */ :root[data-theme="dark"] #appSidebar{background:linear-gradient(180deg,#11161d 0%,#0d1117 100%)!important;} :root[data-theme="dark"] #realServerStatus{background:var(--line2)!important;color:var(--muted)!important;border-color:var(--line)!important;} :root[data-theme="dark"] .nav a:hover:not(.active){background:var(--accent-soft);color:var(--accent-hover);border-color:transparent;} :root[data-theme="dark"] #searchResults{box-shadow:0 4px 12px rgba(0,0,0,.5);} /* Banners hero con gradiente de marca (#0d9488→#065f46): el teal brillante choca en dark. Se oscurece a teal profundo SOLO en .panel (no toca logos/avatares pequeños, que no son .panel y se ven bien vibrantes). Texto blanco sigue legible. */ :root[data-theme="dark"] .panel[style*="linear-gradient"][style*="#0d9488"]{background:linear-gradient(135deg,#0c3b37 0%,#06231d 100%)!important;} /* Pills/badges (.pill-*): fondos claros hardcoded por CLASE (no inline) → la Fase 2 no los atrapa. Versión oscura translúcida conservando el color semántico. El texto usa var(--ok/--warn/--accent) que ya flipan; los demás se aclaran. .pill-pend queda ámbar. */ :root[data-theme="dark"] .pill-ok{background:rgba(52,211,153,.15);border-color:rgba(52,211,153,.35);} :root[data-theme="dark"] .pill-pend{background:rgba(251,191,36,.15);border-color:rgba(251,191,36,.38);} :root[data-theme="dark"] .pill-info{border-color:rgba(45,212,191,.38);} :root[data-theme="dark"] .pill-liab{background:rgba(99,102,241,.18);color:#a5b4fc;border-color:rgba(99,102,241,.4);} :root[data-theme="dark"] .pill-asset{background:rgba(45,212,191,.16);color:#5eead4;border-color:rgba(45,212,191,.4);} :root[data-theme="dark"] .pill-capital{background:rgba(167,139,250,.18);color:#c4b5fd;border-color:rgba(167,139,250,.4);} /* ====== 🌗 FASE 2 (v1.19.82): "islas claras" de estilos inline ====== Remapea por selector de atributo las familias de color hardcoded más usadas en los módulos JS (callouts, badges, texto semántico) a equivalentes legibles en oscuro. Se usa background-color (no background) para NO pisar gradientes inline. El match es substring del atributo style, pero como cada regla cambia una propiedad distinta a donde aparece el hex, el cruce es inofensivo; el caso típico (background:#fef2f2;color:#991b1b) queda perfecto. Centralizado y reversible. */ /* --- Fondos: tintes claros → tintes oscuros translúcidos --- */ :root[data-theme="dark"] [style*="#fef2f2"], :root[data-theme="dark"] [style*="#fee2e2"]{background-color:rgba(248,113,113,.13)!important;} :root[data-theme="dark"] [style*="#fffbeb"], :root[data-theme="dark"] [style*="#fef3c7"], :root[data-theme="dark"] [style*="#fefce8"]{background-color:rgba(251,191,36,.13)!important;} :root[data-theme="dark"] [style*="#fff7ed"], :root[data-theme="dark"] [style*="#ffedd5"], :root[data-theme="dark"] [style*="#ffe4cc"], :root[data-theme="dark"] [style*="#fed7aa"]{background-color:rgba(251,146,60,.14)!important;} :root[data-theme="dark"] [style*="#eff6ff"], :root[data-theme="dark"] [style*="#dbeafe"], :root[data-theme="dark"] [style*="#e0f2fe"]{background-color:rgba(96,165,250,.13)!important;} :root[data-theme="dark"] [style*="#f0fdf4"], :root[data-theme="dark"] [style*="#ecfdf5"], :root[data-theme="dark"] [style*="#dcfce7"], :root[data-theme="dark"] [style*="#f7fee7"], :root[data-theme="dark"] [style*="#ecfccb"]{background-color:rgba(52,211,153,.13)!important;} :root[data-theme="dark"] [style*="#f0fdfa"], :root[data-theme="dark"] [style*="#ccfbf1"]{background-color:rgba(45,212,191,.13)!important;} :root[data-theme="dark"] [style*="#faf5ff"], :root[data-theme="dark"] [style*="#f5f3ff"], :root[data-theme="dark"] [style*="#ede9fe"], :root[data-theme="dark"] [style*="#e9d5ff"]{background-color:rgba(167,139,250,.14)!important;} :root[data-theme="dark"] [style*="#f8fafc"], :root[data-theme="dark"] [style*="#f9fafb"], :root[data-theme="dark"] [style*="#fafbfc"], :root[data-theme="dark"] [style*="#f1f5f9"], :root[data-theme="dark"] [style*="#f3f4f6"]{background-color:var(--line2)!important;} /* Blancos inline (cajas/tarjetas) → panel. :not(img) protege previews de logo sobre blanco. Se evita el "#fff" de 3 dígitos para NO colisionar con #fffbeb (amber). */ :root[data-theme="dark"] [style*="background:white"]:not(img), :root[data-theme="dark"] [style*="background: white"]:not(img), :root[data-theme="dark"] [style*="background:#ffffff"]:not(img), :root[data-theme="dark"] [style*="background-color:white"]:not(img), :root[data-theme="dark"] [style*="background-color:#ffffff"]:not(img){background-color:var(--panel)!important;} /* v1.19.85 — "#fff" de 3 dígitos SIN colisionar con #fffbeb/#fff7ed: solo cuando va seguido de ";" / espacio / fin-de-atributo ($=). Catch de ~17 islas blancas (reports, tarjetas IVU, etc.). #fffbeb NO matchea (no termina en #fff ni tiene "#fff;"). */ :root[data-theme="dark"] [style*="background:#fff;"]:not(img), :root[data-theme="dark"] [style*="background:#fff "]:not(img), :root[data-theme="dark"] [style$="background:#fff"]:not(img), :root[data-theme="dark"] [style*="background-color:#fff;"]:not(img), :root[data-theme="dark"] [style$="background-color:#fff"]:not(img){background-color:var(--panel)!important;} /* Tailwind .bg-white (login card y demás) → panel en oscuro */ :root[data-theme="dark"] .bg-white{background-color:var(--panel)!important;} /* v1.19.86 — Portales cliente/empleado: su contenedor usa un linear-gradient CLARO inline (#f0fdfa→#fff / #f0fdf4→#fff) que los selectores de #fff NO agarran → en dark la página quedaba blanca detrás de las tarjetas oscuras. Forzar el fondo a --bg. */ :root[data-theme="dark"] #clientPortal, :root[data-theme="dark"] #empPortal{background:var(--bg)!important;} /* v1.19.87 — .section-header (barra de "Empleados"/"Talonarios" sobre las tablas de Nómina) usa un gradiente CLARO por CLASE (no inline) → los selectores de #fff no lo agarran → barra blanca en dark. Igualarlo al header de tabla oscuro. */ :root[data-theme="dark"] .section-header{background:linear-gradient(180deg,#1b212a,#161b22)!important;color:var(--ink)!important;} /* --- Gradientes claros inline: background-color NO los pisa (son background-image), así que se usa background:flat !important para matar el gradiente. El selector compuesto [linear-gradient]+[tint] solo cae en gradientes claros, NUNCA en los de marca (#0d9488/#065f46) ni avatares. --- */ :root[data-theme="dark"] [style*="linear-gradient"][style*="#fef2f2"], :root[data-theme="dark"] [style*="linear-gradient"][style*="#fee2e2"], :root[data-theme="dark"] [style*="linear-gradient"][style*="#fff1f2"], :root[data-theme="dark"] [style*="linear-gradient"][style*="#fecaca"]{background:rgba(248,113,113,.13)!important;} :root[data-theme="dark"] [style*="linear-gradient"][style*="#fffbeb"], :root[data-theme="dark"] [style*="linear-gradient"][style*="#fef3c7"], :root[data-theme="dark"] [style*="linear-gradient"][style*="#fefce8"]{background:rgba(251,191,36,.13)!important;} :root[data-theme="dark"] [style*="linear-gradient"][style*="#fff7ed"], :root[data-theme="dark"] [style*="linear-gradient"][style*="#ffedd5"], :root[data-theme="dark"] [style*="linear-gradient"][style*="#ffe4cc"], :root[data-theme="dark"] [style*="linear-gradient"][style*="#fed7aa"]{background:rgba(251,146,60,.14)!important;} :root[data-theme="dark"] [style*="linear-gradient"][style*="#eff6ff"], :root[data-theme="dark"] [style*="linear-gradient"][style*="#dbeafe"], :root[data-theme="dark"] [style*="linear-gradient"][style*="#e0f2fe"]{background:rgba(96,165,250,.13)!important;} :root[data-theme="dark"] [style*="linear-gradient"][style*="#f0fdf4"], :root[data-theme="dark"] [style*="linear-gradient"][style*="#ecfdf5"], :root[data-theme="dark"] [style*="linear-gradient"][style*="#dcfce7"]{background:rgba(52,211,153,.13)!important;} :root[data-theme="dark"] [style*="linear-gradient"][style*="#f0fdfa"], :root[data-theme="dark"] [style*="linear-gradient"][style*="#ccfbf1"]{background:rgba(45,212,191,.13)!important;} :root[data-theme="dark"] [style*="linear-gradient"][style*="#faf5ff"], :root[data-theme="dark"] [style*="linear-gradient"][style*="#f5f3ff"], :root[data-theme="dark"] [style*="linear-gradient"][style*="#ede9fe"]{background:rgba(167,139,250,.14)!important;} :root[data-theme="dark"] [style*="linear-gradient"][style*="#f8fafc"], :root[data-theme="dark"] [style*="linear-gradient"][style*="#f1f5f9"], :root[data-theme="dark"] [style*="linear-gradient"][style*="#f9fafb"], :root[data-theme="dark"] [style*="linear-gradient"][style*="#f3f4f6"], :root[data-theme="dark"] [style*="linear-gradient"][style*="#fafffe"]{background:var(--line2)!important;} /* --- Ronda 2 (auditoría comprehensiva): familias de tinte que faltaban. Fondo sólido y gradiente juntos por familia. --- */ :root[data-theme="dark"] [style*="#fff5f5"], :root[data-theme="dark"] [style*="#fde8e8"]{background-color:rgba(248,113,113,.13)!important;} :root[data-theme="dark"] [style*="linear-gradient"][style*="#fff5f5"], :root[data-theme="dark"] [style*="linear-gradient"][style*="#fde8e8"]{background:rgba(248,113,113,.13)!important;} :root[data-theme="dark"] [style*="#fef9c3"], :root[data-theme="dark"] [style*="#fef08a"]{background-color:rgba(250,204,21,.14)!important;} :root[data-theme="dark"] [style*="linear-gradient"][style*="#fef9c3"], :root[data-theme="dark"] [style*="linear-gradient"][style*="#fef08a"]{background:rgba(250,204,21,.14)!important;} :root[data-theme="dark"] [style*="#ecfeff"], :root[data-theme="dark"] [style*="#f0f9ff"], :root[data-theme="dark"] [style*="#cffafe"]{background-color:rgba(34,211,238,.13)!important;} :root[data-theme="dark"] [style*="linear-gradient"][style*="#ecfeff"], :root[data-theme="dark"] [style*="linear-gradient"][style*="#f0f9ff"]{background:rgba(34,211,238,.13)!important;} :root[data-theme="dark"] [style*="#eef2ff"], :root[data-theme="dark"] [style*="#e0e7ff"]{background-color:rgba(129,140,248,.15)!important;} :root[data-theme="dark"] [style*="linear-gradient"][style*="#eef2ff"], :root[data-theme="dark"] [style*="linear-gradient"][style*="#e0e7ff"]{background:rgba(129,140,248,.15)!important;} :root[data-theme="dark"] [style*="#fce7f3"], :root[data-theme="dark"] [style*="#fbcfe8"]{background-color:rgba(244,114,182,.15)!important;} :root[data-theme="dark"] [style*="linear-gradient"][style*="#fce7f3"], :root[data-theme="dark"] [style*="linear-gradient"][style*="#fbcfe8"]{background:rgba(244,114,182,.15)!important;} :root[data-theme="dark"] [style*="#f3e8ff"]{background-color:rgba(167,139,250,.15)!important;} :root[data-theme="dark"] [style*="linear-gradient"][style*="#f3e8ff"]{background:rgba(167,139,250,.15)!important;} :root[data-theme="dark"] [style*="#fafafa"]{background-color:var(--line2)!important;} :root[data-theme="dark"] [style*="linear-gradient"][style*="#fafafa"]{background:var(--line2)!important;} /* Bordes claros adicionales (amarillo/rosa/cyan) → línea */ :root[data-theme="dark"] [style*="solid #eab308"], :root[data-theme="dark"] [style*="solid #fde047"], :root[data-theme="dark"] [style*="solid #fecdd3"], :root[data-theme="dark"] [style*="solid #a5f3fc"]{border-color:var(--line)!important;} /* --- Texto/iconos semánticos oscuros → tonos claros legibles en oscuro --- */ :root[data-theme="dark"] [style*="color:#dc2626"], :root[data-theme="dark"] [style*="color:#b91c1c"]{color:#f87171!important;} :root[data-theme="dark"] [style*="color:#991b1b"], :root[data-theme="dark"] [style*="color:#7f1d1d"]{color:#fca5a5!important;} :root[data-theme="dark"] [style*="color:#9a3412"], :root[data-theme="dark"] [style*="color:#c2410c"], :root[data-theme="dark"] [style*="color:#7c2d12"]{color:#fdba74!important;} :root[data-theme="dark"] [style*="color:#92400e"], :root[data-theme="dark"] [style*="color:#b45309"]{color:#fcd34d!important;} :root[data-theme="dark"] [style*="color:#78350f"]{color:#fde68a!important;} :root[data-theme="dark"] [style*="color:#2563eb"], :root[data-theme="dark"] [style*="color:#1d4ed8"], :root[data-theme="dark"] [style*="color:#1e40af"], :root[data-theme="dark"] [style*="color:#1e3a8a"]{color:#93c5fd!important;} :root[data-theme="dark"] [style*="color:#065f46"], :root[data-theme="dark"] [style*="color:#115e59"]{color:#6ee7b7!important;} :root[data-theme="dark"] [style*="color:#166534"], :root[data-theme="dark"] [style*="color:#15803d"], :root[data-theme="dark"] [style*="color:#65a30d"], :root[data-theme="dark"] [style*="color:#4d7c0f"]{color:#86efac!important;} :root[data-theme="dark"] [style*="color:#6d28d9"], :root[data-theme="dark"] [style*="color:#7c3aed"]{color:#c4b5fd!important;} /* Grises/slates oscuros (texto) → claros */ :root[data-theme="dark"] [style*="color:#0f172a"], :root[data-theme="dark"] [style*="color:#1e293b"]{color:#e2e8f0!important;} :root[data-theme="dark"] [style*="color:#334155"], :root[data-theme="dark"] [style*="color:#374151"], :root[data-theme="dark"] [style*="color:#475569"]{color:#cbd5e1!important;} :root[data-theme="dark"] [style*="color:#64748b"], :root[data-theme="dark"] [style*="color:#6b7280"]{color:#9aa4b2!important;} /* Teal de marca como texto: subir contraste sobre oscuro */ :root[data-theme="dark"] [style*="color:#0d9488"], :root[data-theme="dark"] [style*="color:#0f766e"]{color:#2dd4bf!important;} /* Bordes/divisores claros → línea oscura ("solid #hex" apunta solo a bordes) */ :root[data-theme="dark"] [style*="solid #e2e8f0"], :root[data-theme="dark"] [style*="solid #e5e7eb"], :root[data-theme="dark"] [style*="solid #cbd5e1"], :root[data-theme="dark"] [style*="solid #d1d5db"], :root[data-theme="dark"] [style*="solid #f1f5f9"]{border-color:var(--line)!important;} /* Transición suave al alternar tema */ html,body,.panel,.input,select,textarea,.btn-ghost,.btn-xs,th,td{transition:background-color .2s ease,border-color .2s ease,color .2s ease;} /* ====== Base ====== */ *{font-family:var(--font);box-sizing:border-box;} html,body{background:var(--bg);color:var(--ink);font-size:15.5px;letter-spacing:-0.01em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;} ::selection{background:var(--accent-soft);color:var(--accent);} /* ====== Panels ====== */ .panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);transition:box-shadow .15s;} .panel:hover{box-shadow:var(--shadow);} /* ====== Buttons ====== */ .btn{background:linear-gradient(135deg,var(--accent) 0%,var(--accent-deep) 100%);color:#fff;padding:.5rem 1.1rem;border-radius:8px;font-weight:700;font-size:.8rem;transition:all .15s;cursor:pointer;border:none;letter-spacing:.01em;box-shadow:0 2px 6px rgba(13,148,136,.25);} .btn:hover{box-shadow:0 4px 12px rgba(13,148,136,.3);transform:translateY(-1px);} .btn:active{transform:translateY(0);box-shadow:0 1px 2px rgba(13,148,136,.15);} .btn-ghost{background:white;color:var(--ink);padding:.45rem .9rem;border-radius:8px;font-size:.8rem;font-weight:600;cursor:pointer;border:1px solid var(--line);transition:all .15s;} .btn-ghost:hover{background:var(--line2);border-color:#cbd5e1;box-shadow:var(--shadow-sm);} .btn-xs{font-size:.74rem;padding:.32rem .65rem;border-radius:6px;background:white;color:#374151;font-weight:600;cursor:pointer;border:1.5px solid var(--line);transition:all .12s;letter-spacing:-.005em;} .btn-xs:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);box-shadow:var(--shadow-sm);transform:translateY(-1px);} .btn-xs-primary{font-size:.74rem;padding:.32rem .75rem;border-radius:6px;background:linear-gradient(135deg,var(--accent),var(--accent-deep));color:#fff;font-weight:700;cursor:pointer;border:none;transition:all .12s;box-shadow:0 2px 4px rgba(13,148,136,.2);} .btn-xs-primary:hover{box-shadow:0 4px 8px rgba(13,148,136,.3);transform:translateY(-1px);} .btn-danger{background:transparent;color:var(--danger);font-size:.78rem;padding:.3rem .5rem;border-radius:6px;cursor:pointer;border:1px solid transparent;transition:.12s;font-weight:600;} .btn-danger:hover{background:#fef2f2;border-color:#fca5a5;} /* v1.19.90 — "un poquito de animación": press TÁCTIL (scale-down al clic/tap, se siente muy bien en móvil) + lift consistente en ghost + micro-feedback en el nav. Las reglas van DESPUÉS de las originales para sobreescribir solo el transform; los demás estilos (sombra/bg) quedan. Se desactiva todo con prefers-reduced-motion (abajo). */ .btn:active{transform:translateY(1px) scale(.97);} .btn-ghost:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm);} .btn-ghost:active,.btn-danger:active{transform:translateY(1px) scale(.97);} .btn-xs:active,.btn-xs-primary:active{transform:translateY(0) scale(.96);} .nav a:active{transform:scale(.985);} .ssn-reveal:active{transform:scale(.94);} @media(prefers-reduced-motion:reduce){ .btn:hover,.btn:active,.btn-ghost:hover,.btn-ghost:active,.btn-xs:hover,.btn-xs:active, .btn-xs-primary:hover,.btn-xs-primary:active,.btn-danger:active,.nav a:active,.ssn-reveal:active{transform:none;} } /* ====== Form elements ====== */ .input,select,textarea{background:#fff;border:1.5px solid var(--line);border-radius:8px;padding:.55rem .75rem;width:100%;font-size:.85rem;color:var(--ink);transition:all .15s;font-weight:500;} .input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);} /* v1.19.99 (#3 a11y) — indicador de foco de TECLADO visible en todo elemento interactivo. :focus-visible solo aparece al navegar con Tab (no al hacer clic con mouse) → cero ruido visual para usuarios de mouse, navegación clara para teclado y lectores de pantalla. Antes solo los inputs tenían foco visible; botones, nav, tabs y pills no mostraban nada. */ a:focus-visible,button:focus-visible,.btn:focus-visible,.btn-ghost:focus-visible, .btn-xs:focus-visible,.nav a:focus-visible,.pill:focus-visible,.tab:focus-visible, [role="button"]:focus-visible,[tabindex]:focus-visible,summary:focus-visible{ outline:2px solid var(--accent);outline-offset:2px; } /* sin doble-anillo: el outline por defecto del navegador solo si NO es foco de teclado */ :focus:not(:focus-visible){outline:none;} .input::placeholder{color:#94a3b8;} label{font-size:.72rem;color:#475569;font-weight:700;text-transform:uppercase;letter-spacing:.06em;display:block;margin-bottom:.35rem;} /* ====== Navigation ====== */ .nav a{display:flex;align-items:center;gap:.5rem;padding:.45rem .7rem;border-radius:8px;color:#4b5563;font-weight:500;font-size:.8rem;transition:all .12s;cursor:pointer;text-decoration:none;border:1px solid transparent;margin:1px 0;position:relative;} .nav a.active{background:linear-gradient(135deg,var(--accent) 0%,var(--accent-deep) 100%);color:#fff;font-weight:700;border-color:transparent;box-shadow:0 2px 8px rgba(13,148,136,.25);letter-spacing:-.005em;} .nav a.active::before{content:'';position:absolute;left:-8px;top:50%;transform:translateY(-50%);width:3px;height:60%;background:var(--accent);border-radius:0 3px 3px 0;} .nav a.active span.text-base{filter:grayscale(1) brightness(10);} .nav a:hover:not(.active){background:#f0fdf4;color:var(--accent-hover);border-color:#d1fae5;font-weight:600;} /* ====== Tables ====== */ table{width:100%;border-collapse:separate;border-spacing:0;} thead{position:sticky;top:0;z-index:1;} th{padding:.7rem .85rem;text-align:left;font-size:.73rem;color:#1e293b;font-weight:700;text-transform:uppercase;letter-spacing:.06em;border-bottom:2px solid var(--line);background:linear-gradient(180deg,#f9fafb,#f1f3f5);} td{padding:.85rem .85rem;border-bottom:1px solid var(--line2);font-size:.88rem;vertical-align:middle;color:#1e293b;} tr:last-child td{border-bottom:none;} tbody tr{transition:background .12s;} tbody tr:hover{background:#f0fdf4;} tbody tr:nth-child(even){background:#fafbfc;} tbody tr:nth-child(even):hover{background:#f0fdf4;} /* ====== Pills / Badges ====== */ .pill{padding:.24rem .7rem;border-radius:999px;font-size:.72rem;font-weight:700;display:inline-block;letter-spacing:.01em;border:1px solid transparent;} .pill-ok{background:#ecfdf5;color:var(--ok);border-color:#a7f3d0;} .pill-pend{background:#fffbeb;color:var(--warn);border-color:#fde68a;} .pill-info{background:var(--accent-soft);color:var(--accent);border-color:#99f6e4;} .pill-liab{background:#e0e7ff;color:#4338ca;border-color:#c7d2fe;} .pill-asset{background:#ccfbf1;color:#0f766e;border-color:#5eead4;} .pill-capital{background:#ede9fe;color:#6d28d9;border-color:#c4b5fd;} /* ====== KPI Cards ====== */ .kpi-label{font-size:.7rem;color:#64748b;text-transform:uppercase;letter-spacing:.07em;font-weight:700;} .kpi-val{font-size:1.85rem;font-weight:800;color:var(--ink);margin-top:.35rem;letter-spacing:-0.03em;line-height:1.1;font-variant-numeric:tabular-nums;} /* v1.19.99 (#3 a11y) — antes #94a3b8 (~2.9:1 sobre blanco, falla WCAG AA). var(--muted) pasa AA y es theme-aware (se aclara en modo oscuro). */ .kpi-sub{font-size:.74rem;color:var(--muted);margin-top:.2rem;font-weight:500;} /* ====== Modal ====== */ .modal-bg{background:rgba(15,23,42,.5);backdrop-filter:blur(8px);} /* v1.19.30 — Modo "esquina": el modal se mueve a la esquina inferior derecha manteniendo su tamaño, y el backdrop se transparenta para que el usuario pueda interactuar con lo que hay detrás (factura física en pantalla, PDF, otra app). Toggle con el botón pin 📌 en el header del modal. Aplica al #modal principal y también a los modales especiales del catálogo (#cfseSearchModal, #accEditModal, #itemModal) — todos toman la clase .modal-corner cuando el usuario clica el pin. */ .modal-corner{ background:transparent!important; backdrop-filter:none!important; pointer-events:none; /* deja pasar clics al fondo */ align-items:flex-end!important; justify-content:flex-end!important; padding:1rem!important; } .modal-corner > .panel{ pointer-events:auto; /* el panel sí recibe clics */ margin:0!important; box-shadow:0 18px 60px rgba(15,23,42,.35)!important; max-height:75vh!important; width:auto!important; min-width:380px; } /* ====== Typography ====== */ h2{font-size:1.5rem;font-weight:800;letter-spacing:-0.03em;color:var(--ink);} h3{font-weight:700;font-size:1.05rem;color:var(--ink);} .page-subtitle{font-size:.82rem;color:#64748b;font-weight:500;margin-top:.15rem;} .section-header{padding:.7rem .9rem;font-size:.82rem;font-weight:700;color:#1e293b;border-bottom:2px solid var(--line);background:linear-gradient(180deg,#f9fafb,#f3f4f6);display:flex;align-items:center;gap:.5rem;} .section-header .section-icon{font-size:1rem;} .logo{width:32px;height:32px;background:linear-gradient(135deg,var(--accent),var(--accent-deep));border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;box-shadow:0 2px 6px rgba(13,148,136,.2);} .divider{height:1px;background:var(--line);margin:1rem 0;} .company-logo{width:32px;height:32px;border-radius:6px;background-size:cover;background-position:center;} .ssn-masked{position:relative;display:inline-flex;align-items:center;gap:.3rem;} .ssn-reveal{background:none;border:none;color:var(--accent);cursor:pointer;padding:0;font-size:.78rem;transition:.1s;font-weight:600;} .ssn-reveal:hover{opacity:.7;} /* ====== Scrollbar ====== */ ::-webkit-scrollbar{width:6px;height:6px;} ::-webkit-scrollbar-track{background:transparent;} ::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px;} ::-webkit-scrollbar-thumb:hover{background:#94a3b8;} /* ====== Mobile Responsive ====== */ /* v1.18.61 — Refactor: sidebar como drawer slide-in, modales fullscreen, login polish, inputs 16px (no iOS zoom), touch targets 44px+ */ /* Tablet/Mobile (≤1024px): sidebar como drawer slide-in (NO barra horizontal apretada) */ @media(max-width:1024px){ #mobileHamburger{display:flex!important;align-items:center;justify-content:center;} #appSidebar{ position:fixed!important; top:0;left:0;bottom:0; width:280px!important; z-index:58; transform:translateX(-100%); transition:transform .25s cubic-bezier(.4,0,.2,1); box-shadow:0 0 30px rgba(0,0,0,.2); border-right:1px solid var(--line)!important; } #appSidebar.mobile-sidebar-open{ transform:translateX(0); } /* Main content full width. v1.19.89 — barra de búsqueda ahora es FIJA (abajo), así que el wrapper no necesita reservar espacio arriba. */ #mainApp>div:last-child{ padding-top:0; } /* Top search bar offset por el botón hamburguesa + STICKY. v1.19.86 — antes la barra de búsqueda scrolleaba y dejaba al botón ☰ flotando solo sobre el contenido (se veía el contenido detrás del botón en Citas/Configuración). Ahora la barra queda fija arriba con fondo sólido (--bg, theme-aware) y el contenido scrollea POR DEBAJO. z-index 44 = justo debajo del hamburger (z-45), que queda sobre la barra. */ /* v1.19.89 — FIJA (antes sticky, que se rompía en Dashboard/Trimestrales y dejaba el ☰ flotando sobre el título al hacer scroll). fixed no depende del contenedor de scroll. */ #mainApp>div>div.px-8{ padding-left:4rem!important; padding-right:1rem!important; padding-top:.5rem!important; padding-bottom:.5rem!important; position:fixed; top:0; left:0; right:0; z-index:44; background:var(--bg); box-shadow:0 1px 0 var(--line); } /* Contenido empieza DEBAJO de la barra fija (≈ input 44px + padding) → el ☰ nunca tapa el título. */ main#view{padding:3.9rem 1rem 1rem 1rem!important;} .grid-cols-4{grid-template-columns:repeat(2,1fr)!important;} .grid-cols-3{grid-template-columns:repeat(2,1fr)!important;} .grid-cols-2{grid-template-columns:1fr!important;} .kpi-val{font-size:1.3rem!important;} h2{font-size:1.2rem!important;} .max-w-2xl{max-width:95vw!important;} } /* Mobile (≤640px): polish adicional — touch targets, login, modales fullscreen */ @media(max-width:640px){ .grid-cols-4,.grid-cols-3{grid-template-columns:1fr 1fr!important;} /* v1.19.86 — tiras KPI con grid INLINE (repeat(N,1fr), sin clase .grid-cols-N) también deben colapsar en móvil; si no, los montos grandes fuerzan desborde horizontal. (3-6 cols) */ [style*="grid-template-columns:repeat(3,1fr)"], [style*="grid-template-columns:repeat(4,1fr)"], [style*="grid-template-columns:repeat(5,1fr)"], [style*="grid-template-columns:repeat(6,1fr)"], [style*="grid-template-columns:repeat(7,1fr)"]{grid-template-columns:repeat(2,1fr)!important;} /* grids inline de 2 columnas (1fr 1fr;) → 1 columna; evita valores cortados (Email, etc.). */ [style*="grid-template-columns:1fr 1fr;"]{grid-template-columns:1fr!important;} /* v1.19.87 — GUARD GLOBAL: el contenido nunca debe scrollear la PÁGINA en horizontal (eso movía todo a la izquierda y dejaba media pantalla negra, ej. Reportes). Las tablas (display:block; overflow-x:auto, arriba) y la barra de tabs de Reportes (.rep-tabs) scrollean POR DENTRO. */ #view{overflow-x:hidden!important;} /* v1.19.89 — guard de desborde a nivel APP (no solo #view): evita que la página entera se corra a la izquierda dejando cards cortados a la derecha (Dashboard, KPIs). */ html,body,#mainApp{max-width:100vw;overflow-x:hidden;} /* Los hijos de un grid traen min-width:auto → si el contenido es ancho, NO encogen y se desbordan (cards cortados). min-width:0 deja que encojan dentro de su columna. */ .grid>*,[style*="display:grid"]>*{min-width:0;} /* Dashboard: apilar los paneles (Revenue/Net Income, Expense Dist./Balance Sheet, Calendario| Próximas Citas) a 1 columna en móvil → el Balance Sheet ya no se corta a la derecha. EXCEPTO el grid del calendario (.grid-cols-7): un calendario SIEMPRE son 7 columnas (los días de la semana) y NO se puede colapsar. */ [data-dash-sec] .grid:not(.grid-cols-7){grid-template-columns:1fr!important;} /* Barra de tabs de Reportes (Transaction Detail/Cash Flow/…) → scroll horizontal propio. */ .rep-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;} .rep-tabs>button{flex-shrink:0;white-space:nowrap;} /* Filas de acción del header (título + botones Exportar/Licencias/+Nuevo…) → envolver en vez de desbordar horizontalmente (movía todo a la izquierda y el ☰ tapaba el título). */ .flex.gap-2{flex-wrap:wrap;} /* Master-detail (lista + ficha: Clientes, Suplidores, Contratistas) → apilar; antes sangraba. */ .cl-split{flex-direction:column!important;height:auto!important;min-height:0!important;} .cl-split>*{width:100%!important;flex:none!important;} /* Calendario + Agenda (Citas) → una sola columna; antes la agenda quedaba espachurrada. */ .cal-split{grid-template-columns:1fr!important;} table{font-size:.82rem;} /* v1.19.87 — Tablas anchas (Transacciones, Facturación, JE, AR…): scroll horizontal en vez de cortar la columna de montos a la derecha. El usuario desliza para ver todas las columnas. */ main table,#view table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;max-width:100%;} th,td{padding:.5rem .4rem;} .panel{border-radius:8px;} /* Login mobile: card generosa, logo más prominente, inputs 16px */ #loginScreen{padding:1rem;} #loginScreen>div{margin:0;max-width:none!important;width:100%!important;padding:2rem 1.5rem!important;} #loginScreen .logo{width:64px!important;height:64px!important;font-size:1.5rem!important;border-radius:16px!important;} /* Inputs en 16px → previene iOS auto-zoom on focus */ .input,select,textarea{font-size:16px!important;padding:.7rem .85rem!important;} /* Touch targets: mínimo 44px alto (Apple/Google guideline) */ .btn{padding:.7rem 1.1rem!important;font-size:.95rem!important;min-height:44px;} .btn-ghost{padding:.65rem .9rem!important;font-size:.88rem!important;min-height:40px;} /* Modales fullscreen en mobile — header sticky, body scroll, footer sticky */ .modal-bg{padding:0!important;} .modal-bg>div{ max-width:100vw!important; width:100vw!important; height:100vh!important; max-height:100vh!important; border-radius:0!important; margin:0!important; display:flex!important; flex-direction:column!important; } /* Hamburger touch-friendly */ #mobileHamburger{width:48px!important;height:48px!important;font-size:1.5rem!important;} /* Tabs scroll horizontal smooth para portales */ #ep_content,#cp_content{padding:.5rem!important;} } /* Smartphone estrecho (≤380px portrait): KPIs 1 col, fuentes más compactas */ @media(max-width:380px){ .grid-cols-4,.grid-cols-3,.grid-cols-2{grid-template-columns:1fr!important;} [style*="grid-template-columns:repeat(3,1fr)"], [style*="grid-template-columns:repeat(4,1fr)"], [style*="grid-template-columns:repeat(5,1fr)"], [style*="grid-template-columns:repeat(6,1fr)"]{grid-template-columns:1fr!important;} .kpi-val{font-size:1.15rem!important;} } /* Portal tabs: scrollbar invisible pero scroll funcional */ .portal-tabs::-webkit-scrollbar{display:none;} .portal-tabs{scrollbar-width:none;-ms-overflow-style:none;} /* Portales en mobile (empleado y cliente) */ @media(max-width:640px){ .ep-container, div[id="cp_content"], div[id="cp_content"]+div{padding:1rem!important;} .ep-container{padding:1rem!important;} /* Portal tabs: padding adecuado para touch */ .portal-tab{padding:.7rem 1rem!important;font-size:.85rem!important;min-height:44px;} /* Tablas en portal: si las hay, hacer text más legible */ .ep-container table,#cp_content table{font-size:.82rem;} /* Cards en portal — más respiración */ .ep-container .panel,#cp_content .panel{padding:.85rem!important;} } /* ====== Print ====== */ @media print{ @page{margin:0.5in;} body{background:#fff!important;font-size:12px!important;} #loginScreen,aside,.btn,.btn-ghost,.btn-xs,.btn-danger,#nav,.no-print{display:none!important;} #mainApp{display:block!important;} main{padding:0!important;} .panel{border:1px solid #ddd!important;box-shadow:none!important;page-break-inside:avoid;} .kpi-val{font-size:1.2rem!important;} } /* ====== Specific Components ====== */ .check-preview{border:2px dashed var(--line);border-radius:12px;padding:2rem;background:#fff;font-family:'Courier New',monospace;} .check-preview .check-line{border-bottom:1px solid #333;min-height:1.5rem;margin-bottom:.5rem;} .security-log{max-height:200px;overflow-y:auto;font-family:monospace;font-size:.75rem;background:var(--line2);padding:.75rem;border-radius:8px;} /* ====== Enhanced Section Group Headers ====== */ .nav-section-header{font-size:.63rem;color:#6b7280;padding:.5rem .65rem .3rem;margin-top:.4rem;letter-spacing:.1em;font-weight:800;text-transform:uppercase;cursor:pointer;user-select:none;display:flex;align-items:center;gap:.35rem;border-bottom:1px solid var(--line2);transition:color .1s;} .nav-section-header:hover{color:var(--accent);} /* =========================================================================== v1.19.48 — App más dinámica (sprint Día 1) Toasts no-bloqueantes + Skeleton loaders + Transiciones suaves =========================================================================== */ /* ====== TOASTS ============================================================ Stack en esquina inferior derecha. Max 3 visibles, los viejos hacen fade-out. Tipos: success (teal) · error (rojo) · info (azul) · warn (ámbar). Animación slide-in suave desde la derecha. Auto-dismiss configurable. ======================================================================== */ .toast-stack{position:fixed;top:1.25rem;right:1.25rem;z-index:10001;display:flex;flex-direction:column;gap:.5rem;pointer-events:none;max-width:380px;} .toast{pointer-events:auto;background:white;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:10px;padding:.7rem .9rem .7rem 1rem;box-shadow:0 8px 24px rgba(15,23,42,.12),0 2px 6px rgba(15,23,42,.05);display:flex;align-items:flex-start;gap:.55rem;font-size:.83rem;line-height:1.4;color:var(--ink);min-width:260px;max-width:380px;animation:toastSlideIn .25s cubic-bezier(.18,.89,.32,1.28) both;transition:transform .2s ease,opacity .2s ease;} .toast.toast-success{border-left-color:#059669;} .toast.toast-success .toast-icon{color:#059669;} .toast.toast-error{border-left-color:#dc2626;} .toast.toast-error .toast-icon{color:#dc2626;} .toast.toast-info{border-left-color:#2563eb;} .toast.toast-info .toast-icon{color:#2563eb;} .toast.toast-warn{border-left-color:#d97706;} .toast.toast-warn .toast-icon{color:#d97706;} .toast-icon{font-size:1.05rem;flex-shrink:0;line-height:1.2;margin-top:1px;} .toast-body{flex:1;color:#1e293b;} .toast-close{cursor:pointer;background:none;border:none;color:#94a3b8;font-size:1.05rem;line-height:1;padding:0 0 0 .3rem;margin:-2px -3px 0 0;flex-shrink:0;transition:color .12s;} .toast-close:hover{color:#475569;} .toast.toast-leaving{animation:toastSlideOut .2s ease-in both;} @keyframes toastSlideIn{ from{transform:translateX(120%);opacity:0;} to{transform:translateX(0);opacity:1;} } @keyframes toastSlideOut{ from{transform:translateX(0);opacity:1;max-height:200px;margin-bottom:.5rem;} to{transform:translateX(120%);opacity:0;max-height:0;margin-bottom:0;padding-top:0;padding-bottom:0;} } @media (prefers-reduced-motion: reduce){ .toast{animation:none;} .toast.toast-leaving{animation:none;opacity:0;} } /* ====== SKELETON LOADERS =================================================== Filas grises animadas (shimmer) que reemplazan "Cargando..." en tablas grandes. CSS-only, sin JS. Uso: .skeleton-line / .skeleton-cell / wrapping rows. ======================================================================== */ .skeleton{display:inline-block;background:linear-gradient(90deg,#e2e8f0 0%,#f1f5f9 50%,#e2e8f0 100%);background-size:200% 100%;border-radius:4px;animation:skeletonShimmer 1.4s ease-in-out infinite;height:.9em;vertical-align:middle;} .skeleton-line{display:block;height:.9em;margin:.35rem 0;border-radius:4px;background:linear-gradient(90deg,#e2e8f0 0%,#f1f5f9 50%,#e2e8f0 100%);background-size:200% 100%;animation:skeletonShimmer 1.4s ease-in-out infinite;} .skeleton-line.w-30{width:30%;} .skeleton-line.w-50{width:50%;} .skeleton-line.w-70{width:70%;} .skeleton-line.w-90{width:90%;} .skeleton-line.w-full{width:100%;} .skeleton-row td{padding:.65rem .7rem;} .skeleton-cell{display:block;height:.85em;background:linear-gradient(90deg,#e2e8f0 0%,#f1f5f9 50%,#e2e8f0 100%);background-size:200% 100%;border-radius:4px;animation:skeletonShimmer 1.4s ease-in-out infinite;} .skeleton-cell.w-25{width:25%;} .skeleton-cell.w-40{width:40%;} .skeleton-cell.w-60{width:60%;} .skeleton-cell.w-80{width:80%;} @keyframes skeletonShimmer{ 0%{background-position:200% 0;} 100%{background-position:-200% 0;} } @media (prefers-reduced-motion: reduce){ .skeleton,.skeleton-line,.skeleton-cell{animation:none;background:#e2e8f0;} } /* ====== TRANSICIONES MODALES Y TABS ======================================== Modal: fade + slight scale al abrir/cerrar. Tabs: fade entre secciones. Solo transform/opacity (NO top/left) para evitar reflow en móvil. ======================================================================== */ #modal{transition:opacity .18s ease;} #modal.hidden{opacity:0;pointer-events:none;} #modal:not(.hidden){opacity:1;} #modal > .panel{transition:transform .22s cubic-bezier(.18,.89,.32,1.28),opacity .18s ease;} #modal.hidden > .panel{transform:scale(.96) translateY(8px);opacity:0;} #modal:not(.hidden) > .panel{transform:scale(1) translateY(0);opacity:1;} /* Custom modals (itemModal, accEditModal, etc.) — clase modal-fade-in se aplica al abrir */ .modal-fade-in{animation:modalFadeIn .22s cubic-bezier(.18,.89,.32,1.28) both;} @keyframes modalFadeIn{ from{opacity:0;transform:scale(.96) translateY(8px);} to{opacity:1;transform:scale(1) translateY(0);} } /* Tabs/secciones: fade al cambiar de sección con go() */ .view-fade-in{animation:viewFadeIn .18s ease-out both;} @keyframes viewFadeIn{ from{opacity:0;transform:translateY(4px);} to{opacity:1;transform:translateY(0);} } @media (prefers-reduced-motion: reduce){ #modal,#modal > .panel,.modal-fade-in,.view-fade-in{transition:none;animation:none;} } /* ====== v1.19.74 — Diálogo de confirmación branded (confirmModal) ====== */ .confirm-modal-bg{position:fixed;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(4px);z-index:100000;display:flex;align-items:center;justify-content:center;padding:1rem;animation:modalFadeIn .15s ease both;} .confirm-modal{background:white;border-radius:14px;box-shadow:0 24px 64px rgba(15,23,42,.32),0 4px 12px rgba(15,23,42,.12);max-width:420px;width:100%;padding:1.4rem 1.5rem;animation:confirmPop .22s cubic-bezier(.18,.89,.32,1.28) both;} .confirm-modal-title{font-size:1rem;font-weight:800;color:var(--ink);margin-bottom:.5rem;letter-spacing:-.01em;} .confirm-modal-msg{font-size:.85rem;color:var(--muted);line-height:1.5;white-space:pre-line;margin-bottom:1.25rem;} .confirm-modal-actions{display:flex;gap:.55rem;justify-content:flex-end;} .confirm-modal .confirm-danger-btn{background:linear-gradient(135deg,#dc2626 0%,#991b1b 100%);box-shadow:0 2px 6px rgba(220,38,38,.28);} .confirm-modal .confirm-danger-btn:hover{box-shadow:0 4px 12px rgba(220,38,38,.34);transform:translateY(-1px);} .confirm-modal-bg.confirm-modal-leaving{opacity:0;transition:opacity .15s ease;} @keyframes confirmPop{from{opacity:0;transform:scale(.94) translateY(6px);}to{opacity:1;transform:scale(1) translateY(0);}} /* ====== v1.19.74 — Micro-interacciones (#2): feedback consistente, identidad intacta ====== */ /* Paneles: lift sutil al hover (refuerza la sensación "viva" del toast). Excluye modales. */ .panel{transition:box-shadow .15s,transform .15s;} .panel:hover{transform:translateY(-1px);} #modal .panel:hover{transform:none;} /* Botones secundarios: mismo micro-feedback que .btn (lift hover + press) para consistencia */ .btn-ghost:hover,.btn-xs:hover,.btn-xs-primary:hover{transform:translateY(-1px);} .btn-ghost:active,.btn-xs:active,.btn-xs-primary:active{transform:translateY(0);} @media (prefers-reduced-motion: reduce){ .confirm-modal-bg,.confirm-modal{animation:none;} .panel,.panel:hover,.btn-ghost,.btn-xs,.btn-xs-primary{transition:none;transform:none;} } /* ====== v1.19.49 — DRAG & DROP líneas de factura (SortableJS) ============= */ .invline-drag-handle:hover{color:var(--accent)!important;} .invline-drag-handle:active{cursor:grabbing!important;color:var(--accent-deep)!important;} /* Ghost: la fila placeholder mientras arrastras — sutil, no llamativa */ .item-row-ghost{opacity:.35;background:var(--accent-soft);border:1px dashed var(--accent);border-radius:6px;} /* Chosen: la fila que el usuario seleccionó (mientras hover el handle) */ .item-row-chosen{background:var(--line2);} /* Dragging: la fila visual que sigue el cursor — sombreada, ligeramente escalada */ .item-row-dragging{box-shadow:0 10px 26px rgba(15,23,42,.16);transform:scale(1.005);background:white;border-radius:8px;cursor:grabbing!important;} .item-row-dragging *{cursor:grabbing!important;} @media (prefers-reduced-motion: reduce){ .item-row-ghost,.item-row-chosen,.item-row-dragging{transition:none;animation:none;} } /* v1.19.51 — DRAG & DROP líneas Journal Entry (mismo patrón que invoice) */ .jeline-drag-handle:hover{color:var(--accent)!important;} .jeline-drag-handle:active{cursor:grabbing!important;color:var(--accent-deep)!important;} .jeline-ghost{opacity:.35;background:var(--accent-soft);border:1px dashed var(--accent);border-radius:6px;} .jeline-chosen{background:var(--line2);} .jeline-dragging{box-shadow:0 10px 26px rgba(15,23,42,.16);transform:scale(1.005);background:white;border-radius:8px;cursor:grabbing!important;} .jeline-dragging *{cursor:grabbing!important;} @media (prefers-reduced-motion: reduce){ .jeline-ghost,.jeline-chosen,.jeline-dragging{transition:none;animation:none;} }