/* * Overlay de estilo "premium" para todo el sistema, con soporte de * modo claro/oscuro via [data-pt-theme] en . * Se carga DESPUES de los CSS de Tabler/Sneat/Bootstrap para poder * refinar look & feel sin tocar ningun HTML, JS ni clase que la app * use para funcionar (el toggle es un anadido independiente). */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap'); :root{ --pt-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --pt-radius: 12px; --pt-radius-sm: 8px; --pt-shadow: 0 2px 10px rgba(15, 23, 42, 0.06); --pt-shadow-hover: 0 8px 24px rgba(15, 23, 42, 0.10); --pt-border: rgba(15, 23, 42, 0.08); --pt-accent: #4f46e5; --pt-accent-dark: #4338ca; /* tema oscuro (por defecto) */ --pt-page-bg: #1c2536; --pt-page-bg-2: #232d42; --pt-page-text: #f1f5f9; --pt-card-border: transparent; } :root[data-pt-theme="light"]{ --pt-page-bg: #eef1f8; --pt-page-bg-2: #e4e9f5; --pt-page-text: #1e293b; --pt-card-border: rgba(15, 23, 42, .08); --pt-shadow: 0 2px 10px rgba(15, 23, 42, 0.05); } body{ font-family: var(--pt-font); letter-spacing: .1px; transition: background-color .25s ease, color .25s ease; } h1, h2, h3, h4, h5, h6, .page-title, .card-title{ font-family: var(--pt-font); font-weight: 700; letter-spacing: -.2px; } /* ---- Fondo oscuro general: variable, con leve degradado premium ---- */ /* El navbar de marca (logo + menu) se mantiene siempre oscuro a proposito, como franja de marca (patron comun en dashboards premium: Linear, Vercel). Solo el lienzo general (.page.bg-dark) cambia con el tema. */ .page.bg-dark{ background: linear-gradient(160deg, var(--pt-page-bg), var(--pt-page-bg-2)) !important; transition: background-color .25s ease; } .page.bg-dark.text-light, .page.bg-dark .text-light, .page.bg-dark .text-white{ color: var(--pt-page-text) !important; transition: color .25s ease; } [data-pt-theme="light"] .card.bg-gray-900{ background: #ffffff !important; color: var(--pt-page-text) !important; } /* .page-header trae un degradado oscuro puesto inline en el HTML; hay que ganarle con !important en modo claro */ [data-pt-theme="light"] .page-header{ background: linear-gradient(90deg, var(--pt-page-bg) 0%, var(--pt-page-bg-2) 100%) !important; } [data-pt-theme="light"] .page-header .text-white, [data-pt-theme="light"] .page-header .text-light{ color: var(--pt-page-text) !important; } /* ---- Tarjetas: elevacion via sombra, borde solo visible en modo claro ---- */ .card{ border-radius: var(--pt-radius) !important; border: 1px solid var(--pt-card-border) !important; box-shadow: var(--pt-shadow); transition: box-shadow .2s ease, border-color .25s ease; } .card:hover{ box-shadow: var(--pt-shadow-hover); } .card-body{ padding: 1.4rem 1.6rem; } .card-header{ border-top-left-radius: var(--pt-radius) !important; border-top-right-radius: var(--pt-radius) !important; font-weight: 600; } /* ---- Botones ---- */ .btn{ border-radius: var(--pt-radius-sm) !important; font-weight: 600; letter-spacing: .1px; transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; } .btn:hover{ transform: translateY(-1px); filter: brightness(1.03); } .btn:active{ transform: translateY(0); } .btn-primary{ background: linear-gradient(135deg, var(--pt-accent), var(--pt-accent-dark)); border-color: transparent; box-shadow: 0 4px 14px rgba(79, 70, 229, .28); } /* ---- Formularios ---- */ .form-control, .form-select, .dataTables_wrapper input, .select2-selection{ border-radius: var(--pt-radius-sm) !important; border-color: var(--pt-border); transition: border-color .15s ease, box-shadow .15s ease; } .form-control:focus, .form-select:focus{ border-color: var(--pt-accent); box-shadow: 0 0 0 .2rem rgba(79, 70, 229, .12); } .form-label{ font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #64748b; } /* ---- Tablas ---- */ table.dataTable, .table{ border-radius: var(--pt-radius-sm); overflow: hidden; } .table thead th{ font-weight: 700; text-transform: uppercase; font-size: .72rem; letter-spacing: .04em; color: #64748b; border-bottom-width: 1px !important; } .table tbody tr{ transition: background-color .12s ease; } .table tbody tr:hover{ background-color: rgba(79, 70, 229, .035); } /* ---- Navegacion ---- */ .navbar, .app-sidebar, .menu, .layout-menu{ box-shadow: var(--pt-shadow); } .nav-link, .menu-link{ border-radius: var(--pt-radius-sm); transition: background-color .15s ease, color .15s ease; } /* ---- Badges / pills ---- */ .badge{ border-radius: 999px; font-weight: 600; letter-spacing: .02em; } /* ---- Modales / dropdowns / alertas (Swal) ---- */ .modal-content, .dropdown-menu, .swal2-popup{ border-radius: var(--pt-radius) !important; border: 1px solid var(--pt-border); box-shadow: var(--pt-shadow-hover) !important; } .modal-header{ padding: 1.25rem 1.75rem; border-bottom: 1px solid var(--pt-border); } .modal-body{ padding: 1.75rem !important; } .modal-title{ font-weight: 700; font-size: 1.1rem; } .modal-footer{ padding: 1rem 1.75rem !important; } .pt-modal-icon{ width: 38px; height: 38px; border-radius: 10px; background: rgba(79, 70, 229, .1); color: var(--pt-accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .pt-upload-box{ border: 1px dashed var(--pt-border); border-radius: var(--pt-radius-sm); padding: 1rem; height: 100%; transition: border-color .15s ease, background-color .15s ease; } .pt-upload-box:hover{ border-color: var(--pt-accent); background: rgba(79, 70, 229, .03); } .modal-backdrop.show{ opacity: .45 !important; } .modal-backdrop{ backdrop-filter: blur(2px); } .modal-body .breadcrumb{ background: #f8fafc; border: 1px solid var(--pt-border); border-radius: var(--pt-radius-sm); padding: .5rem .75rem; margin-bottom: 0; } .modal-body .alert-info{ background: rgba(79, 70, 229, .07); border: 1px solid rgba(79, 70, 229, .18); border-radius: var(--pt-radius-sm); color: #4338ca; } /* ---- Panel de arbol de carpetas: placeholder cuando esta vacio ---- */ #tree_folders:empty::before{ content: "Sin carpetas todavia"; display: block; padding: 1.5rem .5rem; text-align: center; color: #94a3b8; font-size: .85rem; } /* ---- Scrollbar ---- */ ::-webkit-scrollbar{ width: 10px; height: 10px; } ::-webkit-scrollbar-track{ background: transparent; } ::-webkit-scrollbar-thumb{ background: rgba(15, 23, 42, .15); border-radius: 999px; } ::-webkit-scrollbar-thumb:hover{ background: rgba(15, 23, 42, .28); } /* ---- Boton flotante de cambio de tema ---- */ #pt-theme-toggle{ position: fixed; bottom: 22px; right: 22px; z-index: 2000; width: 50px; height: 50px; border-radius: 50%; border: none; background: linear-gradient(135deg, var(--pt-accent), var(--pt-accent-dark)); color: #fff; box-shadow: 0 10px 26px rgba(15, 23, 42, .28); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; } #pt-theme-toggle:hover{ transform: translateY(-2px) scale(1.04); box-shadow: 0 14px 30px rgba(15, 23, 42, .34); } #pt-theme-toggle:active{ transform: translateY(0) scale(.97); }