/* Kred — capa de tema global (claro/oscuro) sobre Tailwind. Cargar DESPUÉS de tailwind.css. El tema se fija con data-theme en . */ :root { --accent:#059669; --accent-hover:#047857; color-scheme:light; } :root[data-theme="dark"] { color-scheme:dark; } /* Tipografía de marca */ .font-sans { font-family:"Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; } .font-mono { font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; } /* Transición suave al cambiar de tema */ body, .bg-white, header, footer, .border-slate-200, .border-slate-300 { transition: background-color .18s ease, border-color .18s ease, color .18s ease; } /* ===================== MODO OSCURO ===================== */ :root[data-theme="dark"] body { background:#020617 !important; color:#e2e8f0; } /* Fondos */ :root[data-theme="dark"] .bg-white { background-color:#0f172a !important; } :root[data-theme="dark"] .bg-white\/80 { background-color:rgba(15,23,42,.85) !important; } :root[data-theme="dark"] .bg-slate-50 { background-color:#0b1220 !important; } :root[data-theme="dark"] .bg-slate-100 { background-color:#131c2e !important; } :root[data-theme="dark"] .bg-slate-200 { background-color:#1e293b !important; } :root[data-theme="dark"] .bg-slate-900 { background-color:#1e293b !important; } :root[data-theme="dark"] .bg-slate-700 { background-color:#334155 !important; } :root[data-theme="dark"] .hover\:bg-slate-700:hover { background-color:#475569 !important; } /* Texto */ :root[data-theme="dark"] .text-slate-900 { color:#f1f5f9 !important; } :root[data-theme="dark"] .text-slate-800 { color:#e2e8f0 !important; } :root[data-theme="dark"] .text-slate-700 { color:#cbd5e1 !important; } :root[data-theme="dark"] .text-slate-600 { color:#9fb0c3 !important; } :root[data-theme="dark"] .text-slate-500 { color:#94a3b8 !important; } :root[data-theme="dark"] .text-slate-400 { color:#7186a0 !important; } :root[data-theme="dark"] .text-slate-300 { color:#64748b !important; } :root[data-theme="dark"] .hover\:text-slate-900:hover { color:#f1f5f9 !important; } :root[data-theme="dark"] .hover\:text-slate-800:hover { color:#e2e8f0 !important; } :root[data-theme="dark"] .hover\:text-slate-600:hover { color:#cbd5e1 !important; } /* Bordes */ :root[data-theme="dark"] .border-slate-200 { border-color:#1e293b !important; } :root[data-theme="dark"] .border-slate-200\/80 { border-color:#1e293b !important; } :root[data-theme="dark"] .border-slate-300 { border-color:#334155 !important; } :root[data-theme="dark"] .border-slate-100 { border-color:#172033 !important; } :root[data-theme="dark"] .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color:#1e293b !important; } /* Emerald (acento) */ :root[data-theme="dark"] .text-emerald-600, :root[data-theme="dark"] .text-emerald-700 { color:#34d399 !important; } :root[data-theme="dark"] .text-emerald-800 { color:#6ee7b7 !important; } :root[data-theme="dark"] .bg-emerald-50 { background-color:#052e24 !important; } :root[data-theme="dark"] .bg-emerald-100 { background-color:#0b3b2e !important; } :root[data-theme="dark"] .border-emerald-200 { border-color:#134e3a !important; } :root[data-theme="dark"] .border-emerald-300 { border-color:#166e4a !important; } /* Ámbar */ :root[data-theme="dark"] .bg-amber-50 { background-color:#3a2c07 !important; } :root[data-theme="dark"] .text-amber-800, :root[data-theme="dark"] .text-amber-900 { color:#fcd34d !important; } :root[data-theme="dark"] .border-amber-200 { border-color:#5b4708 !important; } /* Rojo / rosa */ :root[data-theme="dark"] .bg-red-50, :root[data-theme="dark"] .bg-rose-50 { background-color:#3f1120 !important; } :root[data-theme="dark"] .text-red-600, :root[data-theme="dark"] .text-red-700, :root[data-theme="dark"] .text-red-800, :root[data-theme="dark"] .text-rose-700 { color:#fca5a5 !important; } :root[data-theme="dark"] .border-red-200, :root[data-theme="dark"] .border-rose-200 { border-color:#7f1d2e !important; } /* Variantes con opacidad (translúcidas) — que no se vean gris/blancas en oscuro */ :root[data-theme="dark"] .bg-white\/70 { background-color:rgba(15,23,42,.7) !important; } :root[data-theme="dark"] .bg-white\/60 { background-color:rgba(15,23,42,.6) !important; } :root[data-theme="dark"] .bg-slate-50\/70 { background-color:rgba(11,18,32,.7) !important; } :root[data-theme="dark"] .bg-slate-200\/60 { background-color:rgba(30,41,59,.6) !important; } :root[data-theme="dark"] .bg-emerald-50\/40, :root[data-theme="dark"] .bg-emerald-50\/50, :root[data-theme="dark"] .bg-emerald-50\/60 { background-color:rgba(5,46,36,.55) !important; } :root[data-theme="dark"] .bg-emerald-100\/50, :root[data-theme="dark"] .bg-emerald-100\/60 { background-color:rgba(11,59,46,.55) !important; } :root[data-theme="dark"] .bg-red-50\/50 { background-color:rgba(63,17,32,.55) !important; } :root[data-theme="dark"] .bg-amber-50\/50 { background-color:rgba(58,44,7,.55) !important; } :root[data-theme="dark"] .hover\:bg-emerald-50\/30:hover, :root[data-theme="dark"] .hover\:bg-emerald-50\/40:hover { background-color:rgba(5,46,36,.5) !important; } :root[data-theme="dark"] .hover\:bg-amber-50\/40:hover { background-color:rgba(58,44,7,.5) !important; } /* Sombras un poco más marcadas en oscuro */ :root[data-theme="dark"] .shadow-sm { box-shadow:0 1px 2px rgba(0,0,0,.4) !important; } :root[data-theme="dark"] .shadow { box-shadow:0 2px 8px rgba(0,0,0,.45) !important; } /* Botón de tema (claro/oscuro) */ .theme-toggle { display:grid; place-items:center; width:34px; height:34px; border-radius:9px; cursor:pointer; font-size:15px; line-height:1; background:transparent; border:1px solid #e2e8f0; color:#64748b; transition:border-color .15s, color .15s; } .theme-toggle:hover { color:#0f172a; border-color:#cbd5e1; } :root[data-theme="dark"] .theme-toggle { border-color:#1e293b; color:#94a3b8; } :root[data-theme="dark"] .theme-toggle:hover { color:#f1f5f9; border-color:#334155; } /* Rings claros que quedaban brillantes en oscuro (p.ej. el check de "listo") */ :root[data-theme="dark"] .ring-emerald-50 { --tw-ring-color:rgba(5,46,36,.8) !important; } :root[data-theme="dark"] .ring-emerald-100 { --tw-ring-color:rgba(11,59,46,.85) !important; } :root[data-theme="dark"] .ring-slate-200 { --tw-ring-color:#1e293b !important; } :root[data-theme="dark"] .ring-slate-500 { --tw-ring-color:#475569 !important; } /* Verde/borde muy oscuros o muy claros que no se leían bien en oscuro */ :root[data-theme="dark"] .text-emerald-900 { color:#6ee7b7 !important; } :root[data-theme="dark"] .border-emerald-100 { border-color:#134e3a !important; } :root[data-theme="dark"] .border-slate-500 { border-color:#475569 !important; } :root[data-theme="dark"] .border-slate-700 { border-color:#334155 !important; } /* ===== Barra principal: enlaces, estado activo, separadores, menú de cuenta ===== */ .mainnav{ display:flex; flex-wrap:nowrap; align-items:center; justify-content:flex-end; gap:9px 14px; } .mainnav-center{ flex:1 1 auto; justify-content:center; min-width:0; } .mainnav-right{ flex:1 1 auto; justify-content:flex-end; min-width:0; } .site-header-row{ flex-wrap:nowrap; } @media (min-width:640px){ .mainnav{ gap:10px 18px; } } /* Pantallas chicas: todo en una sola fila, separaciones mas compactas */ @media (max-width:560px){ .mainnav{ gap:7px 11px; } } @media (max-width:360px){ .mainnav{ gap:6px 9px; } } .nav-link{ font-weight:500; color:#475569; text-decoration:none; white-space:nowrap; transition:color .15s; } .nav-link:hover{ color:#0f172a; } :root[data-theme="dark"] .nav-link{ color:#9fb0c3; } :root[data-theme="dark"] .nav-link:hover{ color:#f1f5f9; } .nav-active{ color:#047857 !important; font-weight:700; } :root[data-theme="dark"] .nav-active{ color:#34d399 !important; } .nav-tool{ border:1px solid #e2e8f0; border-radius:8px; padding:5px 10px; } .nav-tool:hover{ border-color:#cbd5e1; } :root[data-theme="dark"] .nav-tool{ border-color:#1e293b; } :root[data-theme="dark"] .nav-tool:hover{ border-color:#334155; } .nav-sep{ width:1px; height:18px; background:#e2e8f0; display:inline-block; flex:none; } :root[data-theme="dark"] .nav-sep{ background:#1e293b; } .acct{ position:relative; } .acct-btn{ display:flex; align-items:center; gap:5px; background:transparent; cursor:pointer; border:1px solid #e2e8f0; border-radius:9px; padding:4px 6px; color:#64748b; transition:border-color .15s, color .15s; } .acct-btn:hover{ border-color:#cbd5e1; color:#0f172a; } .acct-ini{ width:22px; height:22px; border-radius:6px; background:#059669; color:#fff; display:grid; place-items:center; font-size:11px; font-weight:800; } .acct-caret{ width:14px; height:14px; } :root[data-theme="dark"] .acct-btn{ border-color:#1e293b; color:#94a3b8; } :root[data-theme="dark"] .acct-btn:hover{ border-color:#334155; color:#f1f5f9; } :root[data-theme="dark"] .acct-ini{ background:#10b981; } .acct-menu{ position:absolute; right:0; top:calc(100% + 8px); min-width:210px; z-index:50; background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:6px; box-shadow:0 14px 34px -14px rgba(15,23,42,.3); } .acct-menu[hidden]{ display:none; } .acct-email{ font-size:12px; color:#64748b; padding:6px 10px 8px; margin-bottom:4px; border-bottom:1px solid #eef2f6; word-break:break-all; } .acct-item{ display:block; width:100%; text-align:left; background:transparent; border:0; cursor:pointer; padding:8px 10px; border-radius:8px; font-size:13.5px; font-weight:600; color:#334155; text-decoration:none; font-family:inherit; } .acct-item:hover{ background:#f1f5f9; color:#0f172a; } .acct-on{ color:#047857; } .acct-danger{ color:#e11d48; } .acct-danger:hover{ background:#fff1f3; color:#e11d48; } :root[data-theme="dark"] .acct-menu{ background:#0f172a; border-color:#1e293b; box-shadow:0 20px 44px -20px rgba(0,0,0,.7); } :root[data-theme="dark"] .acct-email{ color:#94a3b8; border-color:#1e293b; } :root[data-theme="dark"] .acct-item{ color:#cbd5e1; } :root[data-theme="dark"] .acct-item:hover{ background:#1e293b; color:#f1f5f9; } :root[data-theme="dark"] .acct-on{ color:#34d399; } :root[data-theme="dark"] .acct-danger{ color:#fb7185; } :root[data-theme="dark"] .acct-danger:hover{ background:#3a1220; color:#fb7185; } /* Foco accesible en acento */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } /* Toggle de tema flotante (esquina inferior derecha, fuera del mainbar) */ .theme-fab{ position:fixed; right:16px; bottom:16px; z-index:50; background:#fff; box-shadow:0 6px 18px -6px rgba(15,23,42,.3); } :root[data-theme="dark"] .theme-fab{ background:#0f172a; } /* Verificar RUT: en la barra en desktop, en el menu en movil (mantiene una fila) */ .nav-solo-desktop{ display:none; } @media (min-width:561px){ .nav-solo-desktop{ display:inline-block; } .acct-solo-movil{ display:none; } } /* ===== Indicador de estado de verificacion SII (Ficha) ===== */ .verif-badge{ display:inline-flex; align-items:center; gap:6px; padding:5px 11px 5px 9px; border-radius:999px; font-size:12.5px; font-weight:700; line-height:1; text-decoration:none; border:1px solid transparent; white-space:nowrap; transition:background-color .15s, border-color .15s; } .verif-badge svg{ width:15px; height:15px; flex:none; } .verif-ok{ background:#ecfdf5; color:#047857; border-color:#a7f3d0; } .verif-ok:hover{ background:#d1fae5; border-color:#6ee7b7; } .verif-pending{ background:#fffbeb; color:#b45309; border-color:#fde68a; } .verif-pending:hover{ background:#fef3c7; border-color:#fcd34d; } :root[data-theme="dark"] .verif-ok{ background:#052e2b; color:#34d399; border-color:#134e3a; } :root[data-theme="dark"] .verif-ok:hover{ background:#063a35; } :root[data-theme="dark"] .verif-pending{ background:#3a2a09; color:#fbbf24; border-color:#78500f; } :root[data-theme="dark"] .verif-pending:hover{ background:#4a360c; }