/* ========================================================= kui base — reset Ver: app/docs/css.md para documentación completa. ========================================================= */ *, *::before, *::after { box-sizing: border-box; padding: 0; } * { user-select: none; -webkit-tap-highlight-color: transparent; /*transition: all 0.3s ease 0s;*/ } html, body {height: 100%; overflow: hidden;} html { /* Base 16px: 1rem = 16px para edición predecible */ font-size: 16px; scrollbar-width: thin; scrollbar-color: rgb(var(--c-primary)) transparent; scroll-behavior: smooth; } body { font-family: var(--font-family-base); background: rgb(var(--c-background)); color: rgb(var(--c-text)); -webkit-font-smoothing: antialiased; overflow-x: hidden; margin: 0; } [x-cloak] { display: none !important; } .transition-fade { /*transition-property: opacity; transition-duration: 250ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);*/ /*transform: translateY(0);*/ opacity: 1; } ::-webkit-scrollbar { width: .5rem; height: .5rem; background-color: var(--c-background); } ::-webkit-scrollbar-thumb { border-radius: .5rem; box-shadow: inset 0 0 6px rgba(0, 0, 0, .1); /*border: 1px solid var(--c-background);*/ background-color: rgb(var(--c-primary)); } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); } ::-webkit-scrollbar-corner { background-color: var(--c-background); } @media (max-width: 768px) { ::-webkit-scrollbar { width: .2rem; height: .2rem; } } /* ======================================== ELEMENTOS BASE - ENLACES ======================================== */ a { color: rgba(var(--c-primary), .75); text-decoration: none; } a:hover, a:focus { color: rgba(var(--c-primary), 1); text-decoration: none; outline: none; } a:not([href]):not([class]), a:not([href]):not([class]):hover { color: inherit; text-decoration: none; } a:active { color: var(--c-secondary); } a[disabled], a.disabled { pointer-events: none; color: var(--c-light); text-decoration: none; cursor: default; } hr { border: 1px solid rgb(var(--c-primary), .5); margin: 1rem 0; } /* ========================================================= Transición SPA (Swup) — patrón oficial: Swup añade `is-animating` a durante la transición. ========================================================= */ .transition-fade { transition: opacity 0.2s ease; opacity: 1; } html.is-animating .transition-fade { opacity: 0; } .d-none { display: none !important; } .d-inline { display: inline !important; } .d-inline-block{ display: inline-block !important; } .d-block { display: block !important; } .d-flex { display: flex !important; } .d-inline-flex { display: inline-flex !important; } .d-grid { display: grid !important; } .card { display: flex; flex-direction: column; border-radius: 0.5rem; box-shadow: 0 2px 4px rgba(0,0,0,0.05); overflow: hidden; } .card-hover:hover { transform: translateY(-0.125rem); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12); transition: all 0.3s ease; } .card-header, .card-footer { padding: var(--padding, 1rem) var(--padding, 1rem) 0; font-weight: 500; } .card-footer { padding: 0 var(--padding, 1rem) var(--padding, 1rem); border-bottom: none; } .card-body { padding: 0 var(--padding, 1rem); flex: 1; } .card-primary { border-color: var(--c-primary); } .card-secondary { border-color: var(--c-secondary); } .bento-card { position: relative; background: rgba(var(--g-c, var(--c-background))); transition: transform .3s ease, box-shadow .3s ease; border: 1px solid rgba(var(--g-c, var(--c-text)), .15); border-radius: 1rem; box-shadow: 0 .5rem 1rem .5rem rgba(var(--c-background), .5); } .bento-card:hover { border-color: rgba(var(--c-secondary), .65); /*transform: translateY(-2px);*/ } .bento-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.04), transparent 70%); opacity: 0; transition: opacity 0.4s; pointer-events: none; border-radius: inherit; } .bento-card:hover::before { opacity: 1; } @media (max-width: 768px) { .bento-card { background: unset; backdrop-filter: unset; -webkit-backdrop-filter: unset; transition: unset; border: unset; border-radius: unset; box-shadow: unset; } } .mini-card { position: relative; --padding: .5rem; --background: var(--kui-surface); --border: 1px solid var(--kui-border); --border-radius: var(--kui-radius-card); } .mini-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: red; transform: scaleX(0); transition: transform 0.3s ease; } .mini-card.success { --mc-background: var(--kui-red-soft); --mc-color: var(--kui-red); } .mini-card.warning { --mc-background: var(--sl-color-red-300); --mc-color: var(--kui-red); } .mini-card.info { --mc-background: var(--sl-color-cyan-500); --mc-color: var(--kui-red); } .mini-card.danger { --mc-background: var(--sl-color-red-300); --mc-color: var(--kui-red); } .glass-card { --g-c: var(--c-background); background: rgba(var(--g-c, var(--c-background)), .65); backdrop-filter: blur(1rem); -webkit-backdrop-filter: blur(1rem); border: 1px solid rgba(var(--g-c, var(--c-background)), 0.3); overflow: hidden; } .badge { display: flex; align-items: center; justify-content: center; padding: .15rem .25rem; font-size: .65rem; font-weight: 600; border-radius: .5rem; color: var(--sl-color-neutral-900); } .badge.primary { background-color: var(--c-primary); } .badge.secondary { background-color: var(--c-secondary); } .badge.tertiary { background-color: var(--c-tertiary); } .badge.success { background-color: var(--sl-color-warning-500); } .badge.danger { background-color: var(--sl-color-danger-500); } .badge.warning { background-color: var(--sl-color-warning-500); } .badge.info { background-color: var(--sl-color-warning-500); } .badge.upper { position: absolute; top: .25rem; right: .25rem; z-index: 1; } sl-button { -webkit-tap-highlight-color: transparent; } sl-switch { -webkit-tap-highlight-color: transparent; } sl-radio-button { -webkit-tap-highlight-color: transparent; } /* Chrome / Edge */ /*::-webkit-scrollbar-button { display: none; width: 0; height: 0; } ::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment { display: none; } ::-webkit-scrollbar-button:single-button { display: none; }*/ /* sl-drawer::part(panel) { background: #111827; color: #fff; } sl-drawer::part(header), sl-drawer::part(footer) { background: #1f2937; } sl-drawer::part(title) { color: #60a5fa; } sl-drawer::part(close-button) { color: #fff; } sl-drawer::part(close-button):hover { color: #60a5fa; }*/ .btn { display: inline-block; padding: 0.5rem 1rem; border: none; border-radius: 0.375rem; text-decoration: none; text-align: center; vertical-align: middle; background-color: transparent; color: rgb(var(--c-text)); cursor: pointer; font-family: var(--body-font-family); font-size: 1rem; overflow: hidden; font-weight: 500; line-height: 1; } /* Variantes de color */ .btn-primary { background-color: rgb(var(--c-primary)) !important; border-color: rgb(var(--c-primary)) !important; } .btn-secondary { background-color: rgb(var(--c-secondary)); border-color: rgb(var(--c-secondary)); } .btn-success { background-color: rgb(var(--c-success)); border-color: rgb(var(--c-success)); } .btn-danger { background-color: rgb(var(--c-danger)); border-color: rgb(var(--c-danger)); } .btn-warning { background-color: rgb(var(--c-warning)); border-color: rgb(var(--c-warning)); color: #000; } .btn-info { background-color: rgb(var(--c-info)); border-color: rgb(var(--c-info)); } .btn-light { background-color: rgb(var(--c-light)); border-color: rgb(var(--c-light)); color: #000; } .btn-dark { background-color: rgb(var(--c-dark)); border-color: rgb(var(--c-dark)); } /* Botones contorneados (outline) */ .btn-outline { border: 1px solid rgb(var(--c-text)); } .btn-outline-primary { color: rgb(var(--c-primary)); background-color: transparent; border-color: rgb(var(--c-primary)); } .btn-outline-secondary { color: rgb(var(--c-secondary)); background-color: transparent; border-color: var(--c-secondary); } .btn-outline-tertiary { color: var(--c-tertiary); background-color: transparent; border-color: var(--c-tertiary); } .btn-outline-success { color: var(--c-success); background-color: transparent; border-color: var(--c-success); } .btn-outline-danger { color: var(--c-danger); background-color: transparent; border-color: var(--c-danger); } .btn-outline-warning { color: var(--c-warning); background-color: transparent; border-color: var(--c-warning); } .btn-outline-info { color: var(--c-info); background-color: transparent; border-color: var(--c-info); } .btn-outline-light { color: var(--c-light); background-color: transparent; border-color: var(--c-light); } .btn-outline-dark { color: var(--c-dark); background-color: transparent; border-color: var(--c-dark); } .btn-outline-primary:hover { background-color: rgb(var(--c-primary)); color: #fff; } .btn-outline-secondary:hover { background-color: rgb(var(--c-secondary)); color: #fff; } .btn-outline-success:hover { background-color: rgb(var(--c-success)); color: #fff; } .btn-outline-danger:hover { background-color: rgb(var(--c-danger)); color: #fff; } .btn-outline-warning:hover { background-color: rgb(var(--c-warning)); color: #000; } .btn-outline-info:hover { background-color: rgb(var(--c-info)); color: #fff; } .btn-outline-light:hover { background-color: rgb(var(--c-light)); color: #000; } .btn-outline-dark:hover { background-color: rgb(var(--c-dark)); color: #fff; } /* Tamaños */ .btn-sm { padding: 0.25rem 0.5rem; font-size: 0.875rem; border-radius: 0.25rem; } .btn-lg { padding: 0.5rem 1rem; font-size: 1.25rem; border-radius: 0.5rem; } /* Bloque completo */ .btn-block { display: block; width: 100%; } /* Variantes de color */ .btn-primary:hover { background-color: rgba(var(--c-primary), 0.75); } .btn-secondary:hover { background-color: rgba(var(--c-secondary), 0.75); } .btn-tertiary:hover { background-color: rgba(var(--c-tertiary), 0.75); } .btn.active { background: rgb(var(--c-primary), .1); } .btn:hover, .btn:focus-visible {/*filter: brightness(80%);*/ outline: none; } .btn:active { transform: scale(0.97); } .btn:disabled { opacity: 0.6; pointer-events: none; } .btn:hover { background-color: rgb(var(--c-text), .15); } .btn>.tki { vertical-align: middle; } .bento { background-image: linear-gradient(to right, rgba(var(--c-primary)) 0%, rgba(var(--c-secondary)) 51%); transition: all 0.3s ease 0s !important; background-size: 200% auto; } .bento:hover { background: linear-gradient(to right, rgba(var(--c-primary)) 0%, rgba(var(--c-secondary)) 81%); } .auth-form { padding: 1rem; text-align: initial; } .auth-form>.header>.title { font-size: 1.5rem; } .auth-form>.header>.steps { gap: 1rem; } .auth-form>.header>.steps>.step { flex: 1; } .auth-form>.header>.steps>.step>.icon { font-size: 1.5rem; } .auth-form>.header>.steps>.step>.title { display: none; } .auth-form>.header>.steps>.step:not(:last-child)::after { width: 1rem; } .auth-form>.header>.bar { margin: 0 1rem; } .auth-form>.forms { min-height: 8rem; } .auth-form>.buttons { margin: 1rem 0 0; } .auth-form>.buttons>.btn { font-size: .8rem; gap: .25rem; } ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: red; border-radius: 99px; } ::-webkit-scrollbar-thumb:hover { background: red; } /* ======================================== UTILIDADES TIPOGRÁFICAS ======================================== */ /* Alineación de texto */ .text-start { text-align: left !important; } .text-center { text-align: center !important; } .text-end { text-align: right !important; } .text-justify { text-align: justify !important; } /* Transformación de texto */ .text-lowercase { text-transform: lowercase !important; } .text-uppercase { text-transform: uppercase !important; } .text-capitalize { text-transform: capitalize !important; } /* Peso y estilo de fuente */ .fw-light { font-weight: 300 !important; } .fw-normal { font-weight: 400 !important; } .fw-medium { font-weight: 500 !important; } .fw-bold { font-weight: 700 !important; } .fw-bolder { font-weight: 900 !important; } .fst-italic { font-style: italic !important; } .fst-normal { font-style: normal !important; } /* Truncamiento de texto */ .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Tamaños de fuente */ .fs-1 { font-size: 2.5rem; } .fs-2 { font-size: 2rem; } .fs-3 { font-size: 1.75rem; } .fs-4 { font-size: 1.5rem; } .fs-5 { font-size: 1.25rem; } .fs-6 { font-size: 1rem; } .fs-7 { font-size: .85rem; } .fs-8 { font-size: .7rem; } .fs-9 { font-size: .55rem; } /* Colores de texto */ /* Brand */ .brand { width: auto; max-width: 15rem; margin: auto; } .brand.brand-h { aspect-ratio: 3 / 1; } .brand.brand-v { aspect-ratio: 1 / 1; } .brand.icon { width: unset; aspect-ratio: 1 / 1; } .sl-theme-dark .brand-h-p { content: url("/static/logo/brand-h-s.png"); } .sl-theme-dark .brand-h-s { content: url("/static/logo/brand-h-p.png"); } .sl-theme-dark .brand-h-w { content: url("/static/logo/brand-h-b.png"); } .sl-theme-dark .brand-h-b { content: url("/static/logo/brand-h-w.png"); } .sl-theme-dark .brand-v-p { content: url("/static/logo/brand-v-s.png"); } .sl-theme-dark .brand-v-s { content: url("/static/logo/brand-v-s.png"); } .sl-theme-dark .brand-v-w { content: url("/static/logo/brand-v-b.png"); } .sl-theme-dark .brand-v-b { content: url("/static/logo/brand-v-w.png"); } sl-input { /*--sl-input-border-color: rgb(var(--c-primary), 0.35);*/ --sl-input-border-color-hover: rgb(var(--c-primary), 0.6); /*--sl-input-border-color-focus: rgb(var(--c-primary));*/ --sl-input-focus-ring-color: rgb(var(--c-primary), 0.25); }