/* * Verona — tema visual inspirado en PrimeVue Verona/Aura. * * Activacion: todas las reglas estan bajo html.verona-active (la clase la pone * el script inline del ). Asi, si el plugin se desactiva, nada aplica. * * Layout: * - sidebar : position fixed, columna izquierda * - topbar : sticky, primera fila de la columna de contenido * - body : padding-left = ancho del sidebar (deja la columna de contenido) */ /* ==================================================================== * 1) TOKENS * ==================================================================== */ :root { --v-surface-0: #ffffff; --v-surface-50: #f8fafc; --v-surface-100:#f1f5f9; --v-surface-200:#e2e8f0; --v-surface-300:#cbd5e1; --v-surface-400:#94a3b8; --v-surface-500:#64748b; --v-surface-600:#475569; --v-surface-700:#334155; --v-surface-800:#1e293b; --v-surface-900:#0f172a; --v-surface-950:#020617; --v-primary-50: #eef2ff; --v-primary-100: #e0e7ff; --v-primary-200: #c7d2fe; --v-primary-400: #818cf8; --v-primary: #6366f1; --v-primary-600: #4f46e5; --v-primary-700: #4338ca; --v-bg: var(--v-surface-100); --v-surface: var(--v-surface-0); --v-surface-alt: var(--v-surface-50); --v-border: var(--v-surface-200); --v-border-soft: var(--v-surface-100); --v-text: var(--v-surface-800); --v-text-strong: var(--v-surface-900); --v-text-muted: var(--v-surface-500); --v-text-subtle: var(--v-surface-400); --v-topbar-bg: var(--v-surface-0); --v-primary-soft: var(--v-primary-50); /* SIDEBAR (modo claro = azul oscuro, contenido claro) */ --v-sidebar-bg: #18233f; /* navy oscuro */ --v-sidebar-text: #9aa6c4; --v-sidebar-text-hover:#ffffff; --v-sidebar-hover: rgba(255,255,255,.07); --v-sidebar-active-bg: rgba(129,140,248,.22); --v-sidebar-active-tx: #c7d2fe; --v-sidebar-muted: #6b7799; --v-sidebar-border: rgba(255,255,255,.08); --v-sidebar-logo-tx: #ffffff; --v-sidebar-scroll: rgba(255,255,255,.16); --v-success: #22c55e; --v-warning: #f59e0b; --v-danger: #ef4444; --v-info: #3b82f6; --v-sidebar-w: 280px; --v-sidebar-w-collapsed: 78px; --v-topbar-h: 64px; --v-radius: 12px; --v-radius-sm: 8px; --v-radius-lg: 16px; --v-shadow-sm: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06); --v-shadow: 0 2px 8px rgba(15,23,42,.06), 0 4px 16px rgba(15,23,42,.05); --v-shadow-lg: 0 10px 40px rgba(15,23,42,.12), 0 4px 12px rgba(15,23,42,.06); --v-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --v-ease: cubic-bezier(.4,0,.2,1); } /* ====== MODO OSCURO: paleta DRACULA ====== */ html.verona-dark { /* Dracula: bg #282a36 · current-line #44475a · fg #f8f8f2 · comment #6272a4 · purple #bd93f9 · pink #ff79c6 · green #50fa7b · cyan #8be9fd · orange #ffb86c · red #ff5555 · yellow #f1fa8c */ --v-bg: #21222c; --v-surface: #282a36; --v-surface-alt: #343746; --v-border: #44475a; --v-border-soft: #343746; --v-text: #f8f8f2; --v-text-strong: #ffffff; --v-text-muted: #a8adca; --v-text-subtle: #6272a4; --v-primary: #bd93f9; /* purple */ --v-primary-600: #a87ff0; --v-primary-700: #9580d6; --v-primary-soft: rgba(189,147,249,.18); --v-success: #50fa7b; --v-warning: #ffb86c; --v-danger: #ff5555; --v-info: #8be9fd; --v-topbar-bg: #282a36; --v-sidebar-bg: #21222c; --v-sidebar-text: #b8bdd9; --v-sidebar-text-hover:#f8f8f2; --v-sidebar-hover: rgba(255,255,255,.05); --v-sidebar-active-bg: rgba(189,147,249,.20); --v-sidebar-active-tx: #bd93f9; --v-sidebar-muted: #6272a4; --v-sidebar-border: #343746; --v-sidebar-logo-tx: #f8f8f2; --v-sidebar-scroll: rgba(255,255,255,.14); --v-shadow-sm: 0 1px 2px rgba(0,0,0,.35); --v-shadow: 0 2px 8px rgba(0,0,0,.45); --v-shadow-lg: 0 16px 48px rgba(0,0,0,.6); } /* ==================================================================== * 2) LAYOUT * ==================================================================== */ html.verona-active body { margin: 0; padding-left: var(--v-sidebar-w); font-family: var(--v-font); background: var(--v-bg) !important; color: var(--v-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: padding-left .25s var(--v-ease); } html.verona-active.verona-collapsed body { padding-left: var(--v-sidebar-w-collapsed); } /* neutraliza el bg-light de los templates hijos */ html.verona-active .bg-light { background: transparent !important; } .verona-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--v-sidebar-w); background: var(--v-sidebar-bg); border-right: 1px solid var(--v-sidebar-border); z-index: 1000; display: flex; flex-direction: column; transition: width .25s var(--v-ease), transform .25s var(--v-ease); } .verona-topbar { position: sticky; top: 0; height: var(--v-topbar-h); background: var(--v-topbar-bg); border-bottom: 1px solid var(--v-border); z-index: 900; display: flex; align-items: center; } /* contenedor de mensajes/contenido */ html.verona-active .verona-content { padding-top: .5rem; } html.verona-active .verona-content:empty { display: none; } .verona-overlay { position: fixed; inset: 0; background: rgba(2,6,23,.5); backdrop-filter: blur(2px); z-index: 999; opacity: 0; pointer-events: none; transition: opacity .25s var(--v-ease); } /* padding general del contenido FS */ html.verona-active .container-fluid { padding-left: 1.5rem; padding-right: 1.5rem; } /* ==================================================================== * 3) SIDEBAR * ==================================================================== */ .vsidebar-inner { display: flex; flex-direction: column; height: 100%; overflow: hidden; } .vsidebar-brand { height: var(--v-topbar-h); display: flex; align-items: center; padding: 0 1.25rem; border-bottom: 1px solid var(--v-sidebar-border); flex-shrink: 0; } .vsidebar-logo { display: flex; align-items: center; gap: .75rem; text-decoration: none; overflow: hidden; white-space: nowrap; } .vsidebar-logo-mark { width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; background: linear-gradient(135deg, var(--v-primary), var(--v-primary-700)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; box-shadow: 0 4px 12px rgba(0,0,0,.25); } .vsidebar-logo-text { font-weight: 700; font-size: 1.05rem; color: var(--v-sidebar-logo-tx); letter-spacing: -.01em; } .vsidebar-nav { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 1rem .75rem 2rem; } .vsidebar-nav::-webkit-scrollbar { width: 8px; } .vsidebar-nav::-webkit-scrollbar-thumb { background: var(--v-sidebar-scroll); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; } .vsidebar-section { margin-bottom: 2px; } .vsidebar-section-toggle, .vsidebar-item { width: 100%; display: flex; align-items: center; gap: .8rem; padding: .65rem .8rem; border: none; background: transparent; color: var(--v-sidebar-text); border-radius: var(--v-radius-sm); font-family: inherit; font-size: .9rem; font-weight: 500; cursor: pointer; text-decoration: none; text-align: left; transition: background .15s var(--v-ease), color .15s var(--v-ease); white-space: nowrap; } .vsidebar-section-toggle:hover, .vsidebar-item:hover { background: var(--v-sidebar-hover); color: var(--v-sidebar-text-hover); } .vsidebar-section-toggle:hover .vsidebar-ico, .vsidebar-item:hover .vsidebar-ico { color: var(--v-sidebar-text-hover); } .vsidebar-section-toggle.active, .vsidebar-item.active { color: var(--v-sidebar-active-tx); background: var(--v-sidebar-active-bg); } .vsidebar-section-toggle.active .vsidebar-ico, .vsidebar-item.active .vsidebar-ico { color: var(--v-sidebar-active-tx); } .vsidebar-ico { width: 20px; flex-shrink: 0; font-size: 1rem; text-align: center; color: var(--v-sidebar-muted); transition: color .15s var(--v-ease); } .vsidebar-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; } .vsidebar-caret { font-size: .75rem; color: var(--v-sidebar-muted); transition: transform .2s var(--v-ease); } .vsidebar-caret.open { transform: rotate(180deg); } .vsidebar-children { padding: 2px 0 4px .9rem; margin-left: .65rem; border-left: 1.5px solid var(--v-sidebar-border); overflow: hidden; } .vsidebar-children[data-collapsed] { display: none; } .vsidebar-child { display: flex; align-items: center; gap: .65rem; padding: .5rem .7rem; color: var(--v-sidebar-text); border-radius: var(--v-radius-sm); font-size: .85rem; font-weight: 500; text-decoration: none; transition: background .15s var(--v-ease), color .15s var(--v-ease); white-space: nowrap; } .vsidebar-child:hover { background: var(--v-sidebar-hover); color: var(--v-sidebar-text-hover); } .vsidebar-child.active { color: var(--v-sidebar-active-tx); background: var(--v-sidebar-active-bg); font-weight: 600; } .vsidebar-child-ico { width: 16px; flex-shrink: 0; font-size: .8rem; text-align: center; color: var(--v-sidebar-muted); } .vsidebar-child.active .vsidebar-child-ico { color: var(--v-sidebar-active-tx); } .vsidebar-subgroup { margin: .35rem 0; } .vsidebar-subgroup-title { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--v-sidebar-muted); padding: .4rem .7rem .2rem; } /* ==================================================================== * 4) TOPBAR * ==================================================================== */ .vtopbar-inner { width: 100%; height: 100%; display: flex; align-items: center; gap: 1rem; padding: 0 1.5rem; } .vtopbar-left { display: flex; align-items: center; gap: 1rem; min-width: 0; } .vtopbar-btn { width: 40px; height: 40px; flex-shrink: 0; border: none; background: transparent; color: var(--v-text-muted); border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; text-decoration: none; transition: background .15s var(--v-ease), color .15s var(--v-ease); } .vtopbar-btn:hover { background: var(--v-surface-100); color: var(--v-text-strong); } html.verona-dark .vtopbar-btn:hover { background: var(--v-surface-800); } .vtopbar-crumb { display: flex; align-items: center; gap: .55rem; font-size: .9rem; color: var(--v-text-muted); min-width: 0; } .vtopbar-crumb-home { color: var(--v-text-subtle); } .vtopbar-crumb-sep { font-size: .7rem; color: var(--v-text-subtle); } .vtopbar-crumb-current { color: var(--v-text-strong); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vtopbar-search { flex: 0 1 380px; margin-left: auto; display: flex; align-items: center; gap: .6rem; background: var(--v-surface-100); border: 1px solid transparent; border-radius: 10px; padding: 0 .85rem; height: 40px; transition: border-color .15s var(--v-ease), background .15s var(--v-ease); } .vtopbar-search:focus-within { background: var(--v-surface); border-color: var(--v-primary); box-shadow: 0 0 0 3px var(--v-primary-soft); } html.verona-dark .vtopbar-search { background: var(--v-surface-800); } .vtopbar-search i { color: var(--v-text-subtle); font-size: .9rem; } .vtopbar-search input { flex: 1 1 auto; border: none; background: transparent; outline: none; color: var(--v-text); font-family: inherit; font-size: .88rem; } .vtopbar-search input::placeholder { color: var(--v-text-subtle); } .vtopbar-right { display: flex; align-items: center; gap: .35rem; } .vtopbar-hamburger { display: flex; } .vtopbar-user { position: relative; display: flex; align-items: center; gap: .6rem; padding: .3rem .6rem .3rem .35rem; border-radius: 99px; cursor: pointer; margin-left: .35rem; transition: background .15s var(--v-ease); } .vtopbar-user:hover { background: var(--v-surface-100); } html.verona-dark .vtopbar-user:hover { background: var(--v-surface-800); } .vtopbar-avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--v-primary), var(--v-primary-700)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: .85rem; flex-shrink: 0; } .vtopbar-username { font-size: .88rem; font-weight: 600; color: var(--v-text-strong); } .vtopbar-user > .pi { font-size: .75rem; color: var(--v-text-subtle); } .vtopbar-usermenu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 210px; background: var(--v-surface); border: 1px solid var(--v-border); border-radius: var(--v-radius); box-shadow: var(--v-shadow-lg); padding: .4rem; z-index: 1200; } .vtopbar-usermenu-item { display: flex; align-items: center; gap: .65rem; padding: .6rem .7rem; color: var(--v-text); border-radius: var(--v-radius-sm); font-size: .87rem; font-weight: 500; text-decoration: none; transition: background .12s var(--v-ease); } .vtopbar-usermenu-item:hover { background: var(--v-surface-100); color: var(--v-text-strong); } html.verona-dark .vtopbar-usermenu-item:hover { background: var(--v-surface-800); } .vtopbar-usermenu-item.danger { color: var(--v-danger); } .vtopbar-usermenu-item.danger:hover { background: rgba(239,68,68,.1); } .vtopbar-usermenu-item .pi { font-size: .9rem; width: 18px; text-align: center; } .vtopbar-usermenu-sep { height: 1px; background: var(--v-border); margin: .35rem .3rem; } .vtopbar-btn.vactive { background: var(--v-primary-soft); color: var(--v-primary); } /* ---- Calculadora ---- */ .vcalc { position: fixed; top: calc(var(--v-topbar-h) + 8px); right: 1rem; z-index: 1300; width: 280px; background: var(--v-surface); border: 1px solid var(--v-border); border-radius: var(--v-radius); box-shadow: var(--v-shadow-lg); overflow: hidden; animation: vcalcIn .15s var(--v-ease); } @keyframes vcalcIn { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } } .vcalc-head { display: flex; align-items: center; justify-content: space-between; padding: .7rem .9rem; border-bottom: 1px solid var(--v-border); font-size: .85rem; font-weight: 600; color: var(--v-text-strong); } .vcalc-head i { color: var(--v-primary); margin-right: .35rem; } .vcalc-close { border: none; background: transparent; color: var(--v-text-muted); font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 .25rem; border-radius: 6px; } .vcalc-close:hover { background: var(--v-bg-hover, var(--v-surface-alt)); color: var(--v-text-strong); } .vcalc-display { padding: 1rem .9rem .8rem; text-align: right; background: var(--v-surface-alt); border-bottom: 1px solid var(--v-border); } .vcalc-expr { font-size: .8rem; color: var(--v-text-subtle); min-height: 1.1em; font-family: var(--v-font-mono); } .vcalc-result { font-size: 1.9rem; font-weight: 700; color: var(--v-text-strong); font-family: var(--v-font-mono); overflow: hidden; text-overflow: ellipsis; letter-spacing: -.01em; } .vcalc-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--v-border); } .vcalc-key { border: none; background: var(--v-surface); color: var(--v-text-strong); font-family: inherit; font-size: 1.1rem; font-weight: 500; padding: .85rem 0; cursor: pointer; transition: background .12s var(--v-ease); } .vcalc-key:hover { background: var(--v-surface-alt); } .vcalc-key:active { background: var(--v-border); } .vcalc-key.fn { color: var(--v-text-muted); font-weight: 600; } .vcalc-key.op { color: var(--v-primary); font-weight: 700; } .vcalc-key.eq { background: var(--v-primary); color: var(--v-primary-contrast, #fff); font-weight: 700; } .vcalc-key.eq:hover { background: var(--v-primary-600); } @media (max-width: 575px) { .vcalc { right: .5rem; left: .5rem; width: auto; } } /* ==================================================================== * 5) COLAPSADO + MOBILE * ==================================================================== */ html.verona-collapsed .verona-sidebar { width: var(--v-sidebar-w-collapsed); } html.verona-collapsed .vsidebar-logo-text, html.verona-collapsed .vsidebar-label, html.verona-collapsed .vsidebar-caret, html.verona-collapsed .vsidebar-subgroup-title { display: none; } html.verona-collapsed .vsidebar-children { margin-left: 0; padding-left: 0; border-left: none; } html.verona-collapsed .vsidebar-section-toggle, html.verona-collapsed .vsidebar-item, html.verona-collapsed .vsidebar-child { justify-content: center; padding: .65rem; } html.verona-collapsed .vsidebar-brand { justify-content: center; padding: 0; } @media (max-width: 991px) { html.verona-active body { padding-left: 0; } .verona-sidebar { transform: translateX(-100%); } html.verona-mobile-open .verona-sidebar { transform: translateX(0); box-shadow: var(--v-shadow-lg); } html.verona-mobile-open .verona-overlay { opacity: 1; pointer-events: auto; } .vtopbar-search { flex-basis: 200px; } .vtopbar-username { display: none; } } @media (max-width: 575px) { .vtopbar-crumb { display: none; } .vtopbar-search { flex-basis: 140px; } } /* ==================================================================== * 6) RESTYLE DEL CONTENIDO FS (scoped a html.verona-active) * ==================================================================== */ html.verona-active .card { background: var(--v-surface); border: 1px solid var(--v-border); border-radius: var(--v-radius); box-shadow: var(--v-shadow-sm); } html.verona-active .card-header { background: transparent; border-bottom: 1px solid var(--v-border); font-weight: 600; color: var(--v-text-strong); padding: 1rem 1.25rem; } html.verona-active .card-body { color: var(--v-text); } html.verona-active .card-footer { background: var(--v-surface-alt); border-top: 1px solid var(--v-border); } html.verona-active h1, html.verona-active h2, html.verona-active h3, html.verona-active h4, html.verona-active h5, html.verona-active h6 { color: var(--v-text-strong); } html.verona-active .btn { border-radius: var(--v-radius-sm); font-weight: 600; font-size: .875rem; transition: all .15s var(--v-ease); } html.verona-active .btn-primary { background: var(--v-primary); border-color: var(--v-primary); color: #fff; } html.verona-active .btn-primary:hover, html.verona-active .btn-primary:focus { background: var(--v-primary-600); border-color: var(--v-primary-600); box-shadow: 0 4px 12px rgba(99,102,241,.3); } html.verona-active .btn-secondary { background: var(--v-surface-100); border-color: var(--v-border); color: var(--v-text); } html.verona-dark .btn-secondary { background: var(--v-surface-800) !important; } html.verona-active .btn-success { background: var(--v-success); border-color: var(--v-success); } html.verona-active .btn-danger { background: var(--v-danger); border-color: var(--v-danger); } html.verona-active .btn-warning { background: var(--v-warning); border-color: var(--v-warning); } html.verona-active .btn-info { background: var(--v-info); border-color: var(--v-info); } html.verona-active .btn-outline-secondary { border-color: var(--v-border); color: var(--v-text-muted); } html.verona-active .btn-outline-secondary:hover { background: var(--v-surface-100); color: var(--v-text-strong); } html.verona-active .form-control, html.verona-active .form-select { background: var(--v-surface); border: 1px solid var(--v-border); color: var(--v-text); border-radius: var(--v-radius-sm); font-size: .88rem; } html.verona-active .form-control:focus, html.verona-active .form-select:focus { border-color: var(--v-primary); box-shadow: 0 0 0 3px var(--v-primary-soft); background: var(--v-surface); color: var(--v-text); } html.verona-active .form-control::placeholder { color: var(--v-text-subtle); } html.verona-active .input-group-text { background: var(--v-surface-100); border-color: var(--v-border); color: var(--v-text-muted); } html.verona-active label, html.verona-active .form-label { color: var(--v-text-muted); font-weight: 500; } html.verona-active .table { color: var(--v-text); } html.verona-active .table > thead th { background: var(--v-surface-alt); color: var(--v-text-muted); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; border-color: var(--v-border); } html.verona-active .table > tbody td { border-color: var(--v-border-soft); vertical-align: middle; } html.verona-active .table-hover > tbody > tr:hover > * { background: var(--v-surface-100); } html.verona-dark .table-hover > tbody > tr:hover > * { background: var(--v-surface-800); } html.verona-active .table-striped > tbody > tr:nth-of-type(odd) > * { background: var(--v-surface-alt); } html.verona-active .nav-tabs { border-bottom-color: var(--v-border); } html.verona-active .nav-tabs .nav-link { color: var(--v-text-muted); border: none; border-bottom: 2px solid transparent; font-weight: 600; font-size: .88rem; } html.verona-active .nav-tabs .nav-link:hover { color: var(--v-text-strong); border-color: transparent; } html.verona-active .nav-tabs .nav-link.active { color: var(--v-primary); background: transparent; border-bottom-color: var(--v-primary); } html.verona-active .page-link { color: var(--v-text-muted); border-color: var(--v-border); background: var(--v-surface); } html.verona-active .page-link:hover { background: var(--v-surface-100); color: var(--v-text-strong); } html.verona-active .page-item.active .page-link { background: var(--v-primary); border-color: var(--v-primary); } html.verona-active .badge.bg-success { background: rgba(34,197,94,.15) !important; color: #16a34a; } html.verona-active .badge.bg-danger { background: rgba(239,68,68,.15) !important; color: #dc2626; } html.verona-active .badge.bg-warning { background: rgba(245,158,11,.18) !important; color: #d97706; } html.verona-active .badge.bg-info { background: rgba(59,130,246,.15) !important; color: #2563eb; } html.verona-active .badge.bg-primary { background: var(--v-primary-soft) !important; color: var(--v-primary); } html.verona-active .dropdown-menu { background: var(--v-surface); border: 1px solid var(--v-border); border-radius: var(--v-radius); box-shadow: var(--v-shadow-lg); } html.verona-active .dropdown-item { color: var(--v-text); border-radius: var(--v-radius-sm); } html.verona-active .dropdown-item:hover { background: var(--v-surface-100); color: var(--v-text-strong); } html.verona-dark .dropdown-item:hover { background: var(--v-surface-800); } html.verona-active .alert { border-radius: var(--v-radius); border: none; border-left: 4px solid; } html.verona-active .alert-success { background: rgba(34,197,94,.1); border-left-color: var(--v-success); color: #15803d; } html.verona-active .alert-danger { background: rgba(239,68,68,.1); border-left-color: var(--v-danger); color: #b91c1c; } html.verona-active .alert-warning { background: rgba(245,158,11,.1); border-left-color: var(--v-warning); color: #b45309; } html.verona-active .alert-info { background: rgba(59,130,246,.1); border-left-color: var(--v-info); color: #1d4ed8; } /* ==================================================================== * 7) TRANSICIONES * ==================================================================== */ .vexpand-enter-active, .vexpand-leave-active { transition: max-height .25s var(--v-ease), opacity .2s var(--v-ease); max-height: 800px; overflow: hidden; } .vexpand-enter-from, .vexpand-leave-to { max-height: 0; opacity: 0; } .vfade-enter-active, .vfade-leave-active { transition: opacity .15s var(--v-ease), transform .15s var(--v-ease); } .vfade-enter-from, .vfade-leave-to { opacity: 0; transform: translateY(-6px); } html.verona-active .pace .pace-progress { background: var(--v-primary) !important; } /* ==================================================================== * 8) DASHBOARD * ==================================================================== */ .v-dash { padding-top: .5rem; padding-bottom: 2rem; } .v-dash-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; } .v-dash-title { font-size: 1.6rem; font-weight: 700; color: var(--v-text-strong); margin: 0; letter-spacing: -.02em; } .v-dash-sub { color: var(--v-text-muted); margin: .2rem 0 0; font-size: .9rem; } .v-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; margin-bottom: 1.1rem; } .v-kpi { background: var(--v-surface); border: 1px solid var(--v-border); border-radius: var(--v-radius); box-shadow: var(--v-shadow-sm); padding: 1.25rem; display: flex; align-items: center; gap: 1rem; transition: transform .15s var(--v-ease), box-shadow .15s var(--v-ease); } .v-kpi:hover { transform: translateY(-2px); box-shadow: var(--v-shadow); } .v-kpi-ico { width: 52px; height: 52px; flex-shrink: 0; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: #fff; background: var(--c, var(--v-primary)); box-shadow: 0 6px 16px color-mix(in srgb, var(--c, var(--v-primary)) 40%, transparent); } .v-kpi-body { min-width: 0; } .v-kpi-label { font-size: .78rem; font-weight: 600; color: var(--v-text-muted); text-transform: uppercase; letter-spacing: .04em; } .v-kpi-value { font-size: 1.5rem; font-weight: 700; color: var(--v-text-strong); line-height: 1.2; margin: .15rem 0; letter-spacing: -.01em; } .v-kpi-delta { font-size: .78rem; font-weight: 600; display: flex; align-items: center; gap: .3rem; } .v-kpi-delta.up { color: var(--v-success); } .v-kpi-delta.down { color: var(--v-danger); } .v-kpi-delta.muted { color: var(--v-text-subtle); font-weight: 500; } .v-row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.1rem; margin-bottom: 1.1rem; } .v-col-12 { grid-column: span 12; } .v-col-8 { grid-column: span 8; } .v-col-6 { grid-column: span 6; } .v-col-4 { grid-column: span 4; } .v-card { background: var(--v-surface) !important; border: 1px solid var(--v-border) !important; border-radius: var(--v-radius) !important; box-shadow: var(--v-shadow-sm) !important; overflow: hidden; height: 100%; } .v-card-head { display: flex; align-items: baseline; justify-content: space-between; padding: 1.1rem 1.25rem .25rem; gap: .5rem; } .v-card-head h3 { font-size: 1.02rem; font-weight: 700; color: var(--v-text-strong); margin: 0; } .v-card-sub { font-size: .78rem; color: var(--v-text-subtle); } .v-card-link { font-size: .82rem; font-weight: 600; color: var(--v-primary); text-decoration: none; } .v-card-link:hover { text-decoration: underline; } .v-card-body { padding: 1rem 1.25rem 1.25rem; } .v-card-body.v-center { display: flex; align-items: center; justify-content: center; } .v-card-body.v-p0 { padding: .25rem 0 0; } .v-recent { width: 100%; border-collapse: collapse; font-size: .85rem; } .v-recent tr { border-top: 1px solid var(--v-border-soft); cursor: pointer; transition: background .12s var(--v-ease); } .v-recent tr:hover { background: var(--v-surface-alt); } .v-recent td { padding: .7rem 1.25rem; vertical-align: middle; } .v-recent-code { font-weight: 600; color: var(--v-text-strong); } .v-recent-client { font-size: .76rem; color: var(--v-text-muted); } .v-recent-date { color: var(--v-text-muted); white-space: nowrap; } .v-recent-total { font-weight: 700; color: var(--v-text-strong); text-align: right; white-space: nowrap; } .v-empty { text-align: center; color: var(--v-text-subtle); padding: 2rem; } .v-pill { font-size: .72rem; font-weight: 700; padding: .25rem .6rem; border-radius: 99px; white-space: nowrap; } .v-pill-ok { background: rgba(34,197,94,.15); color: #16a34a; } .v-pill-warn { background: rgba(245,158,11,.18); color: #d97706; } /* ---- Documentos pendientes ---- */ .v-docs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-bottom: 1.5rem; } .v-doc { display: flex; align-items: center; gap: 1rem; padding: 1.15rem 1.25rem; background: var(--v-surface); border: 1px solid var(--v-border-soft); border-radius: 16px; text-decoration: none; transition: transform .15s var(--v-ease), box-shadow .15s var(--v-ease), border-color .15s var(--v-ease); } .v-doc:hover { transform: translateY(-3px); box-shadow: var(--v-shadow); border-color: color-mix(in srgb, var(--c) 45%, var(--v-border-soft)); } .v-doc-ico { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 1.3rem; color: #fff; background: var(--c); box-shadow: 0 6px 16px color-mix(in srgb, var(--c) 38%, transparent); } .v-doc-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .2rem; } .v-doc-top { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; } .v-doc-num { font-size: 1.7rem; font-weight: 800; line-height: 1; color: var(--v-text-strong); } .v-doc-label { font-size: .85rem; font-weight: 600; color: var(--v-text-muted); } .v-doc-imp { font-size: .82rem; font-weight: 600; color: var(--v-text-subtle); } .v-doc-arrow { flex: 0 0 auto; color: var(--v-text-subtle); font-size: .85rem; transition: transform .15s var(--v-ease), color .15s var(--v-ease); } .v-doc:hover .v-doc-arrow { transform: translateX(3px); color: var(--c); } @media (max-width: 991px) { .v-docs-grid { grid-template-columns: 1fr; } } @media (max-width: 1200px) { .v-kpi-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 991px) { .v-col-8, .v-col-6, .v-col-4 { grid-column: span 12; } } @media (max-width: 575px) { .v-kpi-grid { grid-template-columns: 1fr; } } /* ---- Formulario de configuracion ---- */ .v-field { margin-bottom: 1.5rem; } .v-field:last-child { margin-bottom: 0; } .v-field-label { display: block; font-size: .82rem; font-weight: 600; color: var(--v-text); margin-bottom: .55rem; } .v-field-inline { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; } .v-field-hint { font-size: .76rem; color: var(--v-text-subtle); } .v-color { width: 3rem; height: 2.4rem; border: 1px solid var(--v-border); border-radius: var(--v-radius-sm); cursor: pointer; padding: 2px; background: var(--v-surface); } .v-field-inline code { font-family: var(--v-font-mono); font-size: .8rem; color: var(--v-text-muted); background: var(--v-surface-alt); padding: .25rem .5rem; border-radius: var(--v-radius-sm); } .v-swatches { display: flex; gap: .5rem; margin-top: .7rem; flex-wrap: wrap; } .v-swatch { width: 28px; height: 28px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; transition: transform .12s var(--v-ease); } .v-swatch:hover { transform: scale(1.12); border-color: var(--v-text-subtle); } /* ---- Favicon ---- */ .v-favicon { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; } .v-favicon-preview { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 12px; border: 1px solid var(--v-border); background: var(--v-surface-alt); display: grid; place-items: center; overflow: hidden; } .v-favicon-preview img { width: 100%; height: 100%; object-fit: contain; } .v-favicon-preview i { color: var(--v-text-subtle); font-size: 1.4rem; } .v-favicon-controls { flex: 1 1 240px; display: flex; flex-direction: column; gap: .5rem; min-width: 0; } .v-file { font-size: .82rem; color: var(--v-text-muted); border: 1px dashed var(--v-border); border-radius: var(--v-radius-sm); padding: .5rem .6rem; background: var(--v-surface); width: 100%; } .v-favicon-remove { margin-top: .15rem; } .v-pills { display: flex; gap: .5rem; flex-wrap: wrap; } .v-pill-radio { display: inline-flex; align-items: center; padding: .5rem 1rem; border: 1px solid var(--v-border); border-radius: 99px; font-size: .85rem; font-weight: 600; color: var(--v-text-muted); cursor: pointer; transition: all .15s var(--v-ease); user-select: none; } .v-pill-radio input { display: none; } .v-pill-radio:hover { border-color: var(--v-primary); color: var(--v-text); } .v-pill-radio.active { background: var(--v-primary); border-color: var(--v-primary); color: #fff; } .v-switch { display: flex; align-items: center; gap: .7rem; padding: .6rem 0; cursor: pointer; font-size: .87rem; color: var(--v-text); border-bottom: 1px solid var(--v-border-soft); } .v-switch:last-child { border-bottom: none; } .v-switch input { width: 1.05rem; height: 1.05rem; accent-color: var(--v-primary); cursor: pointer; } /* ---- Multiselección de estados (filtros del dashboard) ---- */ .v-estados { display: flex; flex-wrap: wrap; gap: .5rem; margin: .4rem 0 .2rem; } .v-chk { display: inline-flex; align-items: center; gap: .45rem; border: 1.5px solid var(--v-border); border-radius: 99px; padding: .35rem .8rem; cursor: pointer; font-size: .83rem; color: var(--v-text); background: var(--v-surface); transition: all .15s var(--v-ease); user-select: none; } .v-chk:hover { border-color: var(--v-primary); } .v-chk input { accent-color: var(--v-primary); cursor: pointer; margin: 0; } .v-chk:has(input:checked) { border-color: var(--v-primary); background: var(--v-primary-soft); color: var(--v-text-strong); font-weight: 600; } .v-form-actions { display: flex; justify-content: flex-end; margin-top: 1.25rem; } /* ---- Selector de estilo de login (full-width, previews grandes) ---- */ .vlogin-styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.1rem; } .vlogin-style-opt { display: flex; flex-direction: column; gap: .65rem; border: 2px solid var(--v-border); border-radius: var(--v-radius); padding: .65rem; cursor: pointer; transition: all .15s var(--v-ease); background: var(--v-surface); } .vlogin-style-opt:hover { border-color: var(--v-primary); transform: translateY(-2px); } .vlogin-style-opt.active { border-color: var(--v-primary); box-shadow: 0 0 0 3px var(--v-primary-soft); } .vlogin-style-opt input { display: none; } .vlogin-style-meta { display: flex; flex-direction: column; padding: 0 .2rem .15rem; position: relative; } .vlogin-style-meta strong { font-size: .9rem; color: var(--v-text-strong); } .vlogin-style-meta small { font-size: .74rem; color: var(--v-text-subtle); } .vlogin-style-badge { position: absolute; top: 0; right: 0; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #fff; background: var(--v-primary); padding: .1rem .45rem; border-radius: 99px; } .vlogin-thumb { position: relative; display: flex; height: 132px; border-radius: 11px; overflow: hidden; border: 1px solid var(--v-border-soft); background: #eef1f6; } .vlogin-thumb .vlt-brand { display: none; } .vlogin-thumb .vlt-form { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; } .vlt-card { width: 62%; background: #fff; border-radius: 8px; padding: 11px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 6px 14px rgba(15,23,42,.14); position: relative; } .vlt-bar { display: none; gap: 3px; margin: -4px -4px 4px; } .vlt-bar i { width: 6px; height: 6px; border-radius: 50%; background: #cbd5e1; display: inline-block; } .vlt-dot { width: 20px; height: 20px; border-radius: 6px; background: var(--v-primary); margin: 0 auto 3px; } .vlt-line { height: 7px; border-radius: 4px; background: #e2e8f0; } .vlt-line.short { width: 58%; } .vlt-btn { height: 11px; border-radius: 4px; background: var(--v-primary); margin-top: 3px; } /* 1 Split */ .vlogin-thumb-1 .vlt-brand { display: block; flex: 0 0 44%; background: linear-gradient(140deg, var(--v-primary), var(--v-primary-700)); } .vlogin-thumb-1 .vlt-form { background: #fff; } .vlogin-thumb-1 .vlt-card { box-shadow: none; width: 78%; } /* 2 Aurora */ .vlogin-thumb-2 { background: radial-gradient(70px 45px at 18% 10%, rgba(124,58,237,.8), transparent), radial-gradient(70px 45px at 82% 22%, rgba(59,130,246,.7), transparent), radial-gradient(70px 50px at 50% 100%, rgba(236,72,153,.6), transparent), #0c0a1d; } .vlogin-thumb-2 .vlt-card { background: rgba(255,255,255,.14); backdrop-filter: blur(4px); } .vlogin-thumb-2 .vlt-line { background: rgba(255,255,255,.3); } /* 3 Minimal */ .vlogin-thumb-3 { background: #fff; } .vlogin-thumb-3 .vlt-card { box-shadow: none; background: transparent; } .vlogin-thumb-3::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--v-primary), var(--v-primary-700)); } /* 4 Dracula */ .vlogin-thumb-4 { background: radial-gradient(120px 60px at 50% -20%, #2a2c3d, #21222c); } .vlogin-thumb-4 .vlt-card { background: #282a36; } .vlogin-thumb-4 .vlt-line { background: #44475a; } .vlogin-thumb-4 .vlt-dot, .vlogin-thumb-4 .vlt-btn { background: #bd93f9; } /* 5 Windows 11 — lock (avatar + pills) */ .vlogin-thumb-5 { background: radial-gradient(90% 80% at 60% 35%, #2b6fb3, #16335c 70%, #0e2340); } .vlogin-thumb-5 .vlt-form { flex-direction: column; gap: 5px; } .vlogin-thumb-5 .vlt-card { background: transparent; box-shadow: none; align-items: center; width: 70%; } .vlogin-thumb-5 .vlt-bar, .vlogin-thumb-5 .vlt-btn { display: none; } .vlogin-thumb-5 .vlt-dot { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.25); border: 1px solid rgba(255,255,255,.5); } .vlogin-thumb-5 .vlt-line { width: 100%; height: 9px; border-radius: 3px; background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.3); } .vlogin-thumb-5 .vlt-line.short { width: 100%; } /* 6 Linux — GNOME/Debian (avatar + entry sobre wallpaper) */ .vlogin-thumb-6 { background: radial-gradient(70% 60% at 25% 20%, rgba(16,140,120,.55), transparent 60%), radial-gradient(60% 60% at 80% 80%, rgba(20,90,130,.5), transparent 60%), linear-gradient(135deg, #0b2a2c, #0a141c); } .vlogin-thumb-6 .vlt-form { flex-direction: column; gap: 5px; } .vlogin-thumb-6 .vlt-card { background: transparent; box-shadow: none; align-items: center; width: 66%; } .vlogin-thumb-6 .vlt-bar, .vlogin-thumb-6 .vlt-btn { display: none; } .vlogin-thumb-6 .vlt-dot { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.22); border: 2px solid rgba(255,255,255,.4); } .vlogin-thumb-6 .vlt-line { width: 100%; height: 9px; border-radius: 5px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); } .vlogin-thumb-6 .vlt-line.short { width: 100%; } /* 7 Hacker — consola Matrix */ .vlogin-thumb-7 { background: #000; } .vlogin-thumb-7 .vlt-card { background: rgba(0,8,0,.85); border: 1px solid #00ff66; box-shadow: 0 0 18px rgba(0,255,102,.45); padding-top: 5px; width: 74%; } .vlogin-thumb-7 .vlt-bar { display: flex; } .vlogin-thumb-7 .vlt-bar i { background: transparent; border: 1px solid #00ff66; } .vlogin-thumb-7 .vlt-line { background: rgba(0,255,102,.3); height: 5px; } .vlogin-thumb-7 .vlt-dot { display: none; } .vlogin-thumb-7 .vlt-btn { background: transparent; border: 1px solid #00ff66; } /* 8 Cyberpunk */ .vlogin-thumb-8 { background: radial-gradient(60px 40px at 20% 10%, rgba(255,46,136,.4), transparent), radial-gradient(60px 40px at 85% 90%, rgba(0,240,255,.4), transparent), #0a0a14; } .vlogin-thumb-8 .vlt-card { background: rgba(13,13,26,.85); border: 1px solid rgba(0,240,255,.5); box-shadow: 0 0 16px rgba(0,240,255,.3); } .vlogin-thumb-8 .vlt-line { background: rgba(0,240,255,.2); } .vlogin-thumb-8 .vlt-dot { background: linear-gradient(135deg,#ff2e88,#00f0ff); } .vlogin-thumb-8 .vlt-btn { background: #ff2e88; } /* 9 macOS — lock (avatar + pill, wallpaper colorido) */ .vlogin-thumb-9 { background: linear-gradient(150deg, #ff7a59, #e0457b 30%, #8a3fff 55%, #3b6ef5 80%, #00c2ff); } .vlogin-thumb-9 .vlt-form { flex-direction: column; gap: 5px; } .vlogin-thumb-9 .vlt-card { background: transparent; box-shadow: none; align-items: center; width: 64%; } .vlogin-thumb-9 .vlt-bar, .vlogin-thumb-9 .vlt-line.short, .vlogin-thumb-9 .vlt-btn { display: none; } .vlogin-thumb-9 .vlt-dot { width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.3); border: 2px solid rgba(255,255,255,.6); } .vlogin-thumb-9 .vlt-line { width: 100%; height: 10px; border-radius: 99px; background: rgba(255,255,255,.3); border: 1px solid rgba(255,255,255,.45); } /* 10 Corporativo */ .vlogin-thumb-10 { background: linear-gradient(135deg, #0b1f3a, #14315a); background-image: linear-gradient(135deg, #0b1f3a, #14315a), linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: cover, 14px 14px, 14px 14px; } .vlogin-thumb-10 .vlt-dot, .vlogin-thumb-10 .vlt-btn { background: #2563eb; } @media (max-width: 600px) { .vlogin-styles { grid-template-columns: repeat(2, 1fr); } }