/* PERF-03 AUTO-GENERATED. Rebuild with Build-Erp-Perf03.ps1; do not edit bundles directly. */ /* PERF-03 BEGIN: public/css/moretto-admin-theme.css */ /* * MORETTO ADMIN DESIGN SYSTEM * Tokens centralizados en moretto-ui-system.css (SSOT canónico). */ html, body, .fi-body { color-scheme: light !important; } html { background: var(--moretto-canvas); } .fi-body { background: var(--moretto-canvas) !important; color: var(--moretto-text); font-family: 'Poppins', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; } /* ========================================================= SIDEBAR — graphite, compacta y colapsable ========================================================= */ .fi-sidebar, .fi-sidebar-header { background: var(--moretto-side-bg) !important; } .fi-sidebar { border-right: 1px solid var(--moretto-side-line) !important; box-shadow: none !important; } .fi-sidebar-header { min-height: 4.25rem; border-bottom: 1px solid var(--moretto-side-line) !important; box-shadow: none !important; } .fi-sidebar .fi-logo { width: auto; max-width: 11.5rem; max-height: 2.25rem; object-fit: contain; } .fi-sidebar-nav { padding: .875rem .75rem 1.25rem !important; } .fi-sidebar-nav-groups { gap: .6rem !important; } .fi-sidebar-group { gap: .2rem; padding-block: .1rem; } .fi-sidebar-group-btn { min-height: 2rem; padding: .35rem .625rem !important; border-radius: var(--moretto-radius-sm) !important; transition: background-color .15s ease, color .15s ease; } .fi-sidebar-group.fi-collapsible > .fi-sidebar-group-btn:hover { background: rgb(255 255 255 / .045); } .fi-sidebar-group-label { padding-inline: 0; color: var(--moretto-side-muted) !important; font-size: .625rem !important; font-weight: 700 !important; letter-spacing: .13em !important; line-height: 1.25 !important; text-transform: uppercase; } .fi-sidebar-group-btn .fi-icon, .fi-sidebar-group-collapse-btn { color: var(--moretto-side-muted) !important; } .fi-sidebar-group.fi-active > .fi-sidebar-group-btn .fi-sidebar-group-label { color: #fff !important; } .fi-sidebar-item { position: relative; } .fi-sidebar-item > a, .fi-sidebar-item > button { min-height: 2.625rem; padding-block: .625rem !important; padding-inline: .75rem !important; border-radius: var(--moretto-radius-md) !important; color: var(--moretto-side-item) !important; font-size: .875rem; font-weight: 500; transition: background-color .15s ease, color .15s ease, box-shadow .15s ease; } .fi-sidebar-item .fi-sidebar-item-label, .fi-sidebar-item > a span, .fi-sidebar-item > button span { color: var(--moretto-side-item) !important; } .fi-sidebar-item > a svg, .fi-sidebar-item > button svg { color: var(--moretto-side-muted) !important; transition: color .15s ease; } .fi-sidebar-item > a:hover, .fi-sidebar-item > button:hover { background: var(--moretto-side-hover) !important; color: #fff !important; } .fi-sidebar-item > a:hover .fi-sidebar-item-label, .fi-sidebar-item > button:hover .fi-sidebar-item-label, .fi-sidebar-item > a:hover span, .fi-sidebar-item > button:hover span, .fi-sidebar-item > a:hover svg, .fi-sidebar-item > button:hover svg { color: #fff !important; } .fi-sidebar-item.fi-active > a, .fi-sidebar-item.fi-active > button { background: var(--moretto-side-active-bg) !important; color: var(--moretto-side-active) !important; box-shadow: inset 3px 0 0 var(--moretto-orange) !important; } .fi-sidebar-item.fi-active .fi-sidebar-item-label, .fi-sidebar-item.fi-active > a span, .fi-sidebar-item.fi-active > button span { color: var(--moretto-side-active) !important; font-weight: 600 !important; } .fi-sidebar-item.fi-active > a svg, .fi-sidebar-item.fi-active > button svg { color: var(--moretto-orange) !important; } .fi-sidebar-close-overlay { background: rgb(24 24 24 / .38) !important; } /* ========================================================= TOPBAR — Liquid Glass selectivo El contenido financiero y las tablas permanecen sólidos. ========================================================= */ .fi-topbar-ctn { background: transparent !important; } .fi-topbar { min-height: 4.375rem; background: var(--moretto-glass-bg) !important; border-bottom: 1px solid var(--moretto-glass-border) !important; box-shadow: 0 12px 34px -24px rgb(24 24 27 / .38) !important; -webkit-backdrop-filter: blur(var(--moretto-glass-blur)) saturate(var(--moretto-glass-saturate)); backdrop-filter: blur(var(--moretto-glass-blur)) saturate(var(--moretto-glass-saturate)); } @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .fi-topbar { background: rgb(255 255 255 / .97) !important; } } .fi-topbar button, .fi-topbar a { border-radius: .625rem; } .fi-topbar-item-btn:hover, .fi-topbar button:hover { background: rgb(24 24 27 / .045) !important; } .fi-global-search-field .fi-input-wrp, .fi-topbar .fi-input-wrp { background: rgb(244 245 247 / .88) !important; border-color: rgb(24 24 27 / .08) !important; box-shadow: inset 0 0 0 1px rgb(24 24 27 / .025) !important; } /* ========================================================= ÁREA DE TRABAJO ========================================================= */ .fi-main { width: 100%; max-width: none !important; padding-top: 1.625rem !important; padding-bottom: 3.75rem !important; } /* ========================================================= CABECERA DE PÁGINA · canon único Estructura real: .fi-page-header-main-ctn > .fi-header (breadcrumb · título · subtítulo) + .fi-header-actions-ctn. Tamaño/tipografía/ritmo: tokens --ui-page-header-*. ========================================================= */ .fi-header { margin-bottom: var(--ui-page-header-gap-bottom) !important; } .fi-header-heading { color: var(--moretto-graphite) !important; font-size: var(--ui-page-header-heading-size) !important; font-weight: var(--ui-page-header-heading-weight) !important; letter-spacing: var(--ui-page-header-heading-tracking) !important; line-height: var(--ui-page-header-heading-line-height) !important; } .fi-header-subheading, .fi-breadcrumbs-item, .fi-breadcrumbs-item a { color: var(--moretto-muted) !important; } .fi-breadcrumbs { margin-bottom: var(--ui-page-header-stack-gap) !important; font-size: var(--ui-page-header-breadcrumb-size); } .fi-breadcrumbs-item:last-child, .fi-breadcrumbs-item:last-child a { color: var(--moretto-ink) !important; font-weight: var(--ui-page-header-breadcrumb-weight); } .fi-header-subheading { max-width: var(--ui-page-header-subheading-measure); margin-top: var(--ui-page-header-stack-gap) !important; margin-bottom: 0 !important; font-size: var(--ui-page-header-subheading-size) !important; line-height: var(--ui-page-header-subheading-line-height) !important; } /* Fila de acciones: una sola alineación y wrap sin overflow. El gap lo aporta moretto-admin-actions.css. */ .fi-header-actions-ctn, .fi-page-header-actions { flex-wrap: wrap !important; align-items: center; justify-content: flex-end; gap: var(--ui-page-header-actions-gap) !important; max-width: 100%; min-width: 0; } .fi-header-actions-ctn > .fi-ac, .fi-page-header-actions > .fi-ac { min-width: 0; } @media (min-width: 640px) { /* El mt-7 de breadcrumbs desalineaba el CTA según la página. */ .fi-header-has-breadcrumbs .fi-header-actions-ctn { margin-top: 0 !important; } } /* ========================================================= SECCIONES / CARDS / INFOLISTS ========================================================= */ /* Superficie/card de Sections: ownership único en moretto-admin-components.css. .fi-wi-stats-overview-stat, .fi-simple-main y .fi-wi-chart conservan aquí su superficie porque no son .fi-section ni están en el owner de cards. */ .fi-wi-stats-overview-stat, .fi-simple-main, .fi-wi-chart { background: var(--moretto-surface) !important; border: 1px solid var(--moretto-line) !important; border-radius: var(--moretto-radius-card) !important; box-shadow: var(--moretto-shadow-card) !important; } /* Ocultación funcional del card: excepción documentada. */ .fi-section { overflow: hidden; } /* Composición de Create: solo gap. El padding del contenido vive en el owner de Sections (moretto-admin-components.css / defaults de Filament). */ .fi-body:not([data-moretto-pos]) .fi-resource-create-record-page :is(.fi-section-content, .fi-grid) { gap: 0.5rem 0.72rem !important; } /* Wrapper externo del Section de Filament: sin superficie propia (el surface lo aporta .fi-section) para no anidar cards. */ .fi-sc-section { min-width: 0; } /* Tipografía de section headers: ownership único en moretto-admin-components.css. */ /* ========================================================= DASHBOARD — cards KPI ========================================================= */ .fi-wi-stats-overview-stat { min-height: 6.15rem !important; padding: .92rem 1rem !important; border-radius: 13px !important; background: radial-gradient(circle at 102% -12%, color-mix(in srgb, var(--moretto-accent) 8%, transparent), transparent 7.5rem), linear-gradient(145deg, var(--moretto-surface) 0%, var(--moretto-surface-soft) 100%) !important; box-shadow: 0 1px 0 color-mix(in srgb, var(--moretto-surface) 78%, transparent) inset, var(--moretto-shadow-card) !important; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease !important; } .fi-wi-stats-overview-stat:hover { border-color: color-mix(in srgb, var(--moretto-accent) 20%, var(--moretto-line)) !important; transform: translateY(-1px) !important; } .fi-wi-stats-overview-stat::before { width: 2px !important; height: auto !important; inset: .82rem auto .82rem 0 !important; border-radius: 999px; background: var(--moretto-accent) !important; } .fi-wi-stats-overview-stat-label { color: var(--moretto-muted) !important; font-size: .655rem !important; font-weight: 720 !important; letter-spacing: .075em !important; line-height: 1.15 !important; text-transform: uppercase !important; } .fi-wi-stats-overview-stat-value { color: var(--moretto-ink) !important; font-family: var(--moretto-display) !important; font-size: clamp(1.55rem, 2vw, 1.92rem) !important; font-weight: 690 !important; font-variant-numeric: tabular-nums lining-nums !important; letter-spacing: -.045em !important; line-height: 1.02 !important; } .fi-wi-stats-overview-stat-description { margin-top: .28rem !important; color: var(--moretto-muted) !important; font-size: .72rem !important; line-height: 1.3 !important; } .fi-wi-chart { overflow: hidden; border-radius: var(--moretto-radius-card) !important; } .fi-wi-chart .fi-section-header { min-height: auto !important; } .fi-wi-chart canvas { max-height: 218px !important; } /* ========================================================= TABS — MIGRADO A moretto-admin-components.css Owner canónico del chrome genérico de tabs Filament. ========================================================= */ /* ========================================================= FORMULARIOS — MIGRADO A moretto-control-system-v2.css Owner exclusivo y canónico de inputs, wrappers, selects, textareas, labels, helpers y foco visual único. ========================================================= */ .fi-fo-field-wrp { box-shadow: none !important; } /* ========================================================= BADGES / ESTADOS — MIGRADO A moretto-admin-components.css Owner canónico de la geometría de .fi-badge. ========================================================= */ /* ========================================================= MODALES / DROPDOWNS — MIGRADO A moretto-admin-overlays.css ========================================================= */ /* ========================================================= EMPTY STATES — MIGRADO A moretto-admin-components.css Owner canónico de la geometría, tipografía, color e icono de .fi-empty-state y del empty state de tablas. ========================================================= */ /* ========================================================= LOGIN ========================================================= */ .fi-simple-layout { background: #EFEFF1 !important; } .fi-simple-main { position: relative; background: #fff !important; } .fi-simple-main::before { position: absolute; inset: 0 0 auto; height: 4px; border-radius: var(--moretto-radius-card) var(--moretto-radius-card) 0 0; background: var(--moretto-orange); content: ''; } /* ========================================================= COTIZACIONES — estado protagonista y acción contextual ========================================================= */ .moretto-quotation-priority { border-color: rgb(243 108 33 / .42) !important; box-shadow: inset 4px 0 0 var(--moretto-orange), var(--moretto-shadow-card) !important; } .moretto-quotation-priority .fi-section-header { background: var(--moretto-orange-tint) !important; } .moretto-context-action { box-shadow: none !important; } /* La barra nativa de guardado de producto permanece visible sin ocultar campos. */ .fi-resource-products .fi-sc-actions.fi-sticky .fi-ac { z-index: 25; border: 1px solid var(--moretto-line); } /* ========================================================= RESPONSIVE ========================================================= */ @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .fi-topbar { background: rgb(255 255 255 / .98) !important; } } @media (max-width: 1024px) { .fi-sidebar { box-shadow: 18px 0 45px -28px rgb(0 0 0 / .65) !important; } .fi-main { padding-top: 1.25rem !important; } } @media (max-width: 640px) { .fi-header-heading { font-size: var(--ui-page-header-heading-size-mobile) !important; } .fi-wi-stats-overview-stat { min-height: 8rem !important; } .fi-wi-stats-overview-stat-value { font-size: 2rem !important; } .fi-topbar button, .fi-topbar a { min-width: 2.75rem; min-height: 2.75rem !important; } .fi-resource-view-record-page.fi-resource-quotations { padding-bottom: 4.75rem; } .fi-resource-view-record-page.fi-resource-quotations .moretto-context-action { position: fixed !important; z-index: 24; right: 1rem; bottom: max(1rem, env(safe-area-inset-bottom)); left: 1rem; justify-content: center; width: auto; min-height: 3rem !important; border: 1px solid rgb(24 24 24 / .12); box-shadow: 0 18px 38px -18px rgb(24 24 24 / .65) !important; } .fi-resource-products .fi-sc-actions.fi-sticky .fi-ac { right: 0; bottom: 0; left: 0; margin: 0 !important; padding-bottom: max(1rem, env(safe-area-inset-bottom)); } } /* ========================================================= DASHBOARD EJECUTIVO V2 & AGING STATS — cards ========================================================= */ .moretto-executive-stat, .moretto-aging-stat { min-height: 6.15rem !important; padding: .92rem 1rem !important; border-radius: 13px !important; background: radial-gradient(circle at 102% -12%, color-mix(in srgb, var(--moretto-accent) 8%, transparent), transparent 7.5rem), linear-gradient(145deg, var(--moretto-surface) 0%, var(--moretto-surface-soft) 100%) !important; box-shadow: 0 1px 0 color-mix(in srgb, var(--moretto-surface) 78%, transparent) inset, var(--moretto-shadow-card) !important; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease !important; border: 1px solid var(--moretto-line) !important; position: relative; overflow: hidden; } .moretto-executive-stat:hover, .moretto-aging-stat:hover { border-color: color-mix(in srgb, var(--moretto-accent) 20%, var(--moretto-line)) !important; transform: translateY(-1px) !important; } .moretto-executive-stat::before, .moretto-aging-stat::before { top: .82rem !important; right: auto !important; bottom: .82rem !important; left: 0 !important; width: 2px !important; height: auto !important; border-radius: 999px; content: ''; position: absolute; background: var(--moretto-accent); } .moretto-stat-success::before, .moretto-aging-success::before { background: var(--moretto-success) !important; } .moretto-stat-info::before { background: var(--moretto-info) !important; } .moretto-stat-warning::before, .moretto-aging-warning::before { background: var(--moretto-warning) !important; } .moretto-stat-danger::before, .moretto-stat-alert::before, .moretto-aging-danger::before { background: var(--moretto-danger) !important; } .moretto-executive-stat .fi-wi-stats-overview-stat-label, .moretto-aging-stat .fi-wi-stats-overview-stat-label { color: var(--moretto-muted) !important; font-size: .655rem !important; font-weight: 720 !important; letter-spacing: .075em !important; line-height: 1.15 !important; text-transform: uppercase !important; } .moretto-executive-stat .fi-wi-stats-overview-stat-value, .moretto-aging-stat .fi-wi-stats-overview-stat-value { color: var(--moretto-ink) !important; font-family: var(--moretto-display) !important; font-size: clamp(1.55rem, 2vw, 1.92rem) !important; font-weight: 690 !important; font-variant-numeric: tabular-nums lining-nums !important; letter-spacing: -.045em !important; line-height: 1.02 !important; } .moretto-executive-stat .fi-wi-stats-overview-stat-description, .moretto-aging-stat .fi-wi-stats-overview-stat-description { margin-top: .28rem !important; color: var(--moretto-muted) !important; font-size: .72rem !important; line-height: 1.3 !important; } .fi-in-entry-wrp:has(.fi-in-text) .fi-in-text { font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } .fi-wi-stats-overview-stat:hover, .moretto-executive-stat:hover, .moretto-aging-stat:hover { transform: none !important; } } /* ========================================================= 111.10 — Accesibilidad transversal del panel ========================================================= */ /* ========================================================= PARAMETRIZACIÓN ERP V2 — descubribilidad y navegación ========================================================= */ .moretto-settings-toolbar { display: grid; gap: .75rem; margin-bottom: 1rem; padding: .875rem; border: 1px solid var(--moretto-line-soft); border-radius: var(--moretto-radius-card); background: var(--moretto-surface); box-shadow: var(--moretto-shadow-card); } .moretto-settings-search-wrap { position: relative; } .moretto-settings-search { width: 100%; min-height: 2.75rem; padding: .65rem 2.5rem .65rem .875rem; border: 1px solid var(--moretto-line); border-radius: .625rem; background: #fff; color: var(--moretto-ink); font-size: .875rem; outline: none; transition: border-color .15s ease, box-shadow .15s ease; } .moretto-settings-search:focus { border-color: var(--moretto-orange); box-shadow: 0 0 0 3px var(--moretto-focus-ring); } .moretto-settings-search-clear { position: absolute; top: 50%; right: .5rem; display: none; width: 2rem; height: 2rem; transform: translateY(-50%); border-radius: .5rem; color: var(--moretto-muted); font-size: 1.125rem; line-height: 1; } .moretto-settings-search-clear:hover { background: var(--moretto-soft); color: var(--moretto-ink); } .moretto-settings-search-results { display: none; overflow: hidden; border: 1px solid var(--moretto-line-soft); border-radius: .625rem; background: #fff; } .moretto-settings-result { display: grid; width: 100%; gap: .125rem; padding: .65rem .75rem; border-bottom: 1px solid var(--moretto-line-soft); text-align: left; } .moretto-settings-result:last-child { border-bottom: 0; } .moretto-settings-result:hover, .moretto-settings-result:focus-visible { background: var(--moretto-orange-tint); } .moretto-settings-result-label { color: var(--moretto-ink); font-size: .82rem; font-weight: 700; } .moretto-settings-result-meta, .moretto-settings-summary { color: var(--moretto-muted); font-size: .72rem; } .moretto-settings-mobile-nav { display: none; } .moretto-settings-mobile-nav label { display: block; margin-bottom: .35rem; color: var(--moretto-muted); font-size: .72rem; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; } .moretto-settings-mobile-select { width: 100%; min-height: 2.75rem; padding: .6rem .75rem; border: 1px solid var(--moretto-line); border-radius: .625rem; background: #fff; color: var(--moretto-ink); font-size: .875rem; font-weight: 600; } .moretto-settings-highlight { scroll-margin-top: 7rem; animation: moretto-setting-pulse 1.15s ease-out; } @keyframes moretto-setting-pulse { 0%, 100% { box-shadow: none; } 35% { box-shadow: 0 0 0 4px var(--moretto-orange-tint); } } @media (max-width: 640px) { .moretto-settings-toolbar { position: sticky; top: 4.25rem; z-index: 18; padding: .75rem; background: rgba(255, 255, 255, .96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .moretto-settings-mobile-nav { display: block; } body[data-moretto-settings-toolbar] .fi-tabs { display: none !important; } } /* ========================================================= REFRESH VISUAL — Industrial premium Moretto Personalidad visible sin alterar la arquitectura operativa. ========================================================= */ /* * Refresh Visual Tokens centralizados en moretto-ui-system.css (SSOT). */ .fi-body { background-color: var(--moretto-canvas) !important; background-image: radial-gradient(circle at 78% -8%, rgb(243 108 33 / .105), transparent 28rem), linear-gradient(rgb(24 24 27 / .025) 1px, transparent 1px), linear-gradient(90deg, rgb(24 24 27 / .025) 1px, transparent 1px) !important; background-size: auto, 40px 40px, 40px 40px !important; } .fi-sidebar, .fi-sidebar-header { background: radial-gradient(circle at 18% 4%, rgb(243 108 33 / .14), transparent 13rem), linear-gradient(180deg, #17181A 0%, #101112 100%) !important; } .fi-sidebar-header { position: relative; min-height: 4.5rem; } .fi-sidebar-header::after { position: absolute; right: .75rem; bottom: -1px; left: .75rem; height: 2px; border-radius: 999px; background: linear-gradient(90deg, var(--moretto-orange), rgb(243 108 33 / .16) 42%, transparent 76%); content: ''; pointer-events: none; } .fi-sidebar-nav { scrollbar-color: rgb(243 108 33 / .5) transparent; scrollbar-width: thin; } .fi-sidebar-group-label { color: #B8B8C0 !important; } .fi-sidebar-group.fi-active > .fi-sidebar-group-btn .fi-sidebar-group-label { color: #FFFFFF !important; } .fi-sidebar-item > a, .fi-sidebar-item > button { border: 1px solid transparent; } .fi-sidebar-item > a:hover, .fi-sidebar-item > button:hover { border-color: rgb(255 255 255 / .07); background: linear-gradient(90deg, rgb(255 255 255 / .085), rgb(255 255 255 / .035)) !important; } .fi-sidebar-item.fi-active > a, .fi-sidebar-item.fi-active > button { border-color: rgb(243 108 33 / .26) !important; background: linear-gradient(90deg, rgb(243 108 33 / .24), rgb(243 108 33 / .075)) !important; box-shadow: inset 3px 0 0 var(--moretto-orange), 0 12px 28px -24px rgb(243 108 33 / .8) !important; } .fi-topbar { position: relative; isolation: isolate; min-height: 4.5rem; background: linear-gradient(90deg, rgb(243 108 33 / .12), transparent 24%), var(--moretto-glass-bg) !important; border-bottom-color: var(--moretto-glass-border) !important; box-shadow: 0 1px 0 rgb(255 255 255 / .76) inset, 0 18px 52px -35px rgb(24 24 27 / .62) !important; -webkit-backdrop-filter: blur(var(--moretto-glass-blur)) saturate(var(--moretto-glass-saturate)); backdrop-filter: blur(var(--moretto-glass-blur)) saturate(var(--moretto-glass-saturate)); } .fi-topbar::after { position: absolute; z-index: -1; right: 0; bottom: -1px; left: 0; height: 2px; background: linear-gradient(90deg, var(--moretto-orange), rgb(243 108 33 / .28) 18%, transparent 48%); content: ''; pointer-events: none; } .fi-global-search-field .fi-input-wrp, .fi-topbar .fi-input-wrp { background: rgb(255 255 255 / .66) !important; border-color: rgb(24 24 27 / .12) !important; box-shadow: 0 1px 0 rgb(255 255 255 / .72) inset, 0 10px 26px -24px rgb(24 24 27 / .6) !important; } .fi-main { max-width: 118rem !important; margin-inline: auto; padding-top: 1.75rem !important; padding-inline: clamp(1rem, 2vw, 2rem) !important; } .fi-header-heading { display: inline-block; font-family: var(--moretto-display) !important; } .fi-header-heading::after { display: block; width: var(--ui-page-header-accent-width); height: var(--ui-page-header-accent-height); margin-top: var(--ui-page-header-accent-gap); border-radius: 999px; background: linear-gradient(90deg, var(--moretto-orange), rgb(243 108 33 / .24)); content: ''; } /* Chrome de .fi-section-header y tipografía de su heading: ownership único en moretto-admin-components.css. */ /* TABS — MIGRADO A moretto-admin-components.css (owner canónico de tabs). */ .fi-wi-stats-overview-stat { min-height: 8.25rem !important; background: radial-gradient(circle at 102% -8%, rgb(243 108 33 / .09), transparent 8rem), linear-gradient(145deg, #FFFFFF 0%, #FAFAFB 100%) !important; } .fi-wi-stats-overview-stat-value, .moretto-aging-stat .fi-wi-stats-overview-stat-value { font-family: var(--moretto-display) !important; font-variant-numeric: tabular-nums; } .moretto-executive-stat { min-height: 6.35rem !important; background: radial-gradient(circle at 100% 0%, rgb(243 108 33 / .11), transparent 8rem), linear-gradient(145deg, #FFFFFF 0%, #F8F8F9 100%) !important; } .moretto-stat-warning, .moretto-stat-alert, .moretto-stat-danger { background: radial-gradient(circle at 100% 0%, rgb(196 61 50 / .11), transparent 8rem), linear-gradient(145deg, #FFFFFF 0%, #FFF9F7 100%) !important; } .moretto-executive-stat .fi-wi-stats-overview-stat-value { font-size: clamp(1.8rem, 2.2vw, 2.25rem) !important; } .fi-wi-chart canvas { max-height: 210px; } @media (max-width: 1024px) { .fi-main { padding-inline: 1rem !important; } } @media (max-width: 640px) { .fi-body { background-size: auto, 32px 32px, 32px 32px !important; } .fi-topbar { background: linear-gradient(90deg, rgb(243 108 33 / .11), transparent 42%), rgb(255 255 255 / .91) !important; } .fi-main { padding-top: 1.15rem !important; padding-inline: .75rem !important; } .fi-header-heading::after { width: var(--ui-page-header-accent-width-mobile); margin-top: var(--ui-page-header-accent-gap-mobile); } .fi-wi-stats-overview-stat { min-height: 7.25rem !important; } } /* PERF-03 END: public/css/moretto-admin-theme.css */ /* PERF-03 BEGIN: public/css/moretto-premium-theme.css */ /* ========================================================= MORETTO PRECISION UI — Premium layer Se carga después del theme operativo para poder retirarse sin afectar la lógica del panel ni los Resources. ========================================================= */ /* * Tokens de diseño base centralizados en moretto-ui-system.css (SSOT). * moretto-premium-theme.css consume exclusivamente esos tokens. */ /* ========================================================= MOTION-02 · TRANSICIONES DE CONTEXTO ========================================================= */ @keyframes moretto-navigate-out { to { opacity: .72; transform: translateY(-3px) scale(.998); } } @keyframes moretto-navigate-in { from { opacity: .58; transform: translateY(10px) scale(.996); } } ::view-transition-old(livewire-navigate) { animation: moretto-navigate-out 145ms cubic-bezier(0.4, 0, 1, 1) both; } ::view-transition-new(livewire-navigate) { animation: moretto-navigate-in 250ms cubic-bezier(0.16, 1, 0.3, 1) both; } .fi-modal-window.fi-transition-enter, .fi-modal-window.fi-transition-leave { transition-property: opacity, transform !important; transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important; } .fi-modal-window.fi-transition-enter { transition-duration: 195ms !important; } .fi-modal-window.fi-transition-leave { transition-duration: 145ms !important; } .fi-modal-window.fi-transition-enter-start, .fi-modal-window.fi-transition-leave-end { opacity: 0 !important; transform: translateY(5px) scale(.988) !important; } .fi-modal-window.fi-transition-enter-end, .fi-modal-window.fi-transition-leave-start { opacity: 1 !important; transform: translateY(0) scale(1) !important; } .fi-dropdown-panel { transform-origin: top; transition: opacity 135ms ease, transform 135ms cubic-bezier(0.22, 1, 0.36, 1); } .fi-dropdown-panel.fi-opacity-0 { opacity: 0 !important; transform: translateY(-2px) scale(.985); } .fi-tooltip { transition: opacity 110ms ease, transform 110ms ease; } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } .fi-modal-window, .fi-dropdown-panel, .fi-tooltip { animation: none !important; transition: none !important; transform: none !important; } } html[data-moretto-palette='titanium'] { --moretto-accent: #4C7DFF; --moretto-accent-hover: #3868E8; --moretto-accent-soft: #EDF2FF; --moretto-accent-border: #C7D5FF; --moretto-accent-contrast: #FFFFFF; --moretto-accent-glow: rgb(76 125 255 / .25); } html[data-moretto-palette='emerald'] { --moretto-accent: #20A875; --moretto-accent-hover: #16865C; --moretto-accent-soft: #E9F8F2; --moretto-accent-border: #BDE7D7; --moretto-accent-contrast: #FFFFFF; --moretto-accent-glow: rgb(32 168 117 / .24); } html[data-moretto-palette='royal'] { --moretto-accent: #7C68EE; --moretto-accent-hover: #6551D8; --moretto-accent-soft: #F0EDFF; --moretto-accent-border: #D5CEFF; --moretto-accent-contrast: #FFFFFF; --moretto-accent-glow: rgb(124 104 238 / .24); } html[data-moretto-palette='crimson'] { --moretto-accent: #D75455; --moretto-accent-hover: #B94345; --moretto-accent-soft: #FDEEEE; --moretto-accent-border: #F4C7C8; --moretto-accent-contrast: #FFFFFF; --moretto-accent-glow: rgb(215 84 85 / .24); } html[data-moretto-palette='champagne'] { --moretto-accent: #C99852; --moretto-accent-hover: #A97C3E; --moretto-accent-soft: #FBF4E9; --moretto-accent-border: #EAD7B8; --moretto-accent-contrast: #17181A; --moretto-accent-glow: rgb(201 152 82 / .24); } /* * Tokens Dark mode centralizados en moretto-ui-system.css (SSOT). */ html, body, .fi-body { color-scheme: light !important; } html.dark, html.dark body, html.dark .fi-body { color-scheme: dark !important; } html { background: var(--moretto-canvas) !important; } .fi-body { background: radial-gradient(circle at 76% -12%, color-mix(in srgb, var(--moretto-accent) 5%, transparent), transparent 27rem), var(--moretto-canvas) !important; color: var(--moretto-text) !important; font-family: var(--moretto-display) !important; font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11'; text-rendering: optimizeLegibility; } /* Shell -------------------------------------------------- La barra superior deja de ser una cápsula independiente. En escritorio su tramo izquierdo continúa visualmente el sidebar y el resto conserva el vidrio de forma más sobria. */ .fi-topbar-ctn { padding: 0 !important; background: transparent !important; } .fi-topbar { position: relative; min-height: 4rem !important; overflow: visible !important; border: 0 !important; border-bottom: 1px solid var(--moretto-glass-border) !important; border-radius: 0 !important; background: var(--moretto-glass-bg) !important; box-shadow: 0 1px 0 var(--moretto-glass-highlight) inset, 0 14px 34px -32px rgb(15 23 42 / .52) !important; -webkit-backdrop-filter: blur(24px) saturate(160%) !important; backdrop-filter: blur(24px) saturate(160%) !important; } .fi-topbar::after { display: none !important; } .fi-topbar button, .fi-topbar a { border-radius: .62rem !important; } .fi-global-search-field .fi-input-wrp, .fi-topbar .fi-input-wrp { min-height: 2.38rem !important; border-color: var(--moretto-line) !important; border-radius: .68rem !important; background: color-mix(in srgb, var(--moretto-surface) 78%, transparent) !important; box-shadow: 0 1px 0 color-mix(in srgb, var(--moretto-surface) 66%, transparent) inset !important; } @media (min-width: 64rem) { .fi-body { --moretto-shell-sidebar-width: 15.25rem; } .fi-body[data-moretto-sidebar-collapsed][data-moretto-sidebar-collapsed] { --moretto-shell-sidebar-width: 3.75rem; } .fi-topbar { background: linear-gradient( 90deg, #111316 0, #111316 var(--moretto-shell-sidebar-width), var(--moretto-glass-bg) var(--moretto-shell-sidebar-width), var(--moretto-glass-bg) 100% ) !important; } .fi-topbar::before { position: absolute; top: 0; bottom: 0; left: var(--moretto-shell-sidebar-width); width: 1px; background: color-mix(in srgb, var(--moretto-accent) 24%, var(--moretto-glass-border)); content: ''; pointer-events: none; } .fi-topbar-start { position: relative; z-index: 1; } .fi-topbar-start :is(button, a, .fi-icon) { color: #E7E9ED !important; } .fi-topbar-start :is(button, a):hover { background: rgb(255 255 255 / .075) !important; } .fi-body[data-moretto-sidebar-collapsed][data-moretto-sidebar-collapsed] .fi-topbar-start .fi-logo { display: none !important; } } .fi-sidebar, .fi-sidebar-header { background: radial-gradient(circle at 18% 3%, color-mix(in srgb, var(--moretto-accent) 14%, transparent), transparent 12rem), linear-gradient(180deg, #15171A 0%, #0F1113 100%) !important; } .fi-sidebar-nav { padding: .72rem .65rem 1.2rem !important; } .fi-sidebar-nav-groups { gap: .45rem !important; } .fi-sidebar-group-label { font-size: .59rem !important; letter-spacing: .145em !important; } .fi-sidebar-item > a, .fi-sidebar-item > button { min-height: 2.38rem !important; padding-block: .52rem !important; border-radius: .7rem !important; font-size: .845rem !important; } .fi-sidebar-item.fi-active > a, .fi-sidebar-item.fi-active > button { border-color: color-mix(in srgb, var(--moretto-accent) 32%, transparent) !important; background: linear-gradient(90deg, color-mix(in srgb, var(--moretto-accent) 24%, transparent), color-mix(in srgb, var(--moretto-accent) 7%, transparent)) !important; box-shadow: inset 3px 0 0 var(--moretto-accent), 0 14px 30px -26px var(--moretto-accent) !important; } /* Encabezados editoriales compactos ---------------------- */ .fi-main { padding-top: 1.05rem !important; padding-bottom: 3rem !important; } .fi-header { margin-bottom: .95rem !important; gap: .65rem !important; } .fi-header-heading { color: var(--moretto-ink) !important; font-family: var(--moretto-display) !important; font-size: clamp(1.42rem, 1.9vw, 1.7rem) !important; font-weight: 680 !important; letter-spacing: -.035em !important; line-height: 1.04 !important; } .fi-header-heading::after { width: 2rem !important; height: 2px !important; margin-top: .42rem !important; background: linear-gradient(90deg, var(--moretto-accent), transparent) !important; } .fi-header-subheading { max-width: 62ch !important; margin-top: .18rem !important; color: var(--moretto-muted) !important; font-size: .79rem !important; line-height: 1.38 !important; } .fi-breadcrumbs { margin-bottom: .35rem !important; } .fi-breadcrumbs-item, .fi-breadcrumbs-item a { color: var(--moretto-muted) !important; font-size: .72rem !important; } /* Superficies -------------------------------------------- */ .fi-section, .fi-wi-stats-overview-stat, .fi-simple-main, .fi-wi-chart { border-color: var(--moretto-line) !important; background: var(--moretto-surface) !important; box-shadow: var(--moretto-shadow-card) !important; } .fi-section-header { padding-block: .72rem !important; border-bottom-color: var(--moretto-line-soft) !important; background: linear-gradient(90deg, color-mix(in srgb, var(--moretto-accent) 3.5%, transparent), transparent 38%), var(--moretto-surface-soft) !important; } .fi-section-header-heading { color: var(--moretto-ink) !important; font-family: var(--moretto-display) !important; font-size: .89rem !important; font-weight: 680 !important; letter-spacing: -.015em !important; } .fi-section-header-description { margin-top: .15rem !important; color: var(--moretto-muted) !important; font-size: .73rem !important; line-height: 1.35 !important; } /* KPI: menos altura, más dato ---------------------------- */ .fi-wi-stats-overview-stat, .moretto-executive-stat { min-height: 6.15rem !important; padding: .92rem 1rem !important; border-radius: 13px !important; background: radial-gradient(circle at 102% -12%, color-mix(in srgb, var(--moretto-accent) 8%, transparent), transparent 7.5rem), linear-gradient(145deg, var(--moretto-surface) 0%, var(--moretto-surface-soft) 100%) !important; box-shadow: 0 1px 0 color-mix(in srgb, var(--moretto-surface) 78%, transparent) inset, var(--moretto-shadow-card) !important; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease !important; } .fi-wi-stats-overview-stat:hover, .moretto-executive-stat:hover { border-color: color-mix(in srgb, var(--moretto-accent) 20%, var(--moretto-line)) !important; transform: translateY(-1px) !important; } .fi-wi-stats-overview-stat::before { width: 2px !important; height: auto !important; inset: .82rem auto .82rem 0 !important; border-radius: 999px; background: var(--moretto-accent) !important; } .moretto-executive-stat::before { top: .82rem !important; right: auto !important; bottom: .82rem !important; left: 0 !important; width: 2px !important; height: auto !important; border-radius: 999px; } .moretto-stat-success::before { background: var(--moretto-success) !important; } .moretto-stat-info::before { background: var(--moretto-info) !important; } .moretto-stat-warning::before { background: var(--moretto-warning) !important; } .moretto-stat-danger::before, .moretto-stat-alert::before { background: var(--moretto-danger) !important; } .fi-wi-stats-overview-stat-label, .moretto-executive-stat .fi-wi-stats-overview-stat-label { color: var(--moretto-muted) !important; font-size: .655rem !important; font-weight: 720 !important; letter-spacing: .075em !important; line-height: 1.15 !important; text-transform: uppercase !important; } .fi-wi-stats-overview-stat-value, .moretto-executive-stat .fi-wi-stats-overview-stat-value, .moretto-aging-stat .fi-wi-stats-overview-stat-value { color: var(--moretto-ink) !important; font-family: var(--moretto-display) !important; font-size: clamp(1.55rem, 2vw, 1.92rem) !important; font-weight: 690 !important; font-variant-numeric: tabular-nums lining-nums !important; letter-spacing: -.045em !important; line-height: 1.02 !important; } .fi-wi-stats-overview-stat-description, .moretto-executive-stat .fi-wi-stats-overview-stat-description { margin-top: .28rem !important; color: var(--moretto-muted) !important; font-size: .72rem !important; line-height: 1.3 !important; } /* Gráficos ----------------------------------------------- */ .fi-wi-chart { overflow: hidden; border-radius: var(--moretto-radius-card) !important; } .fi-wi-chart .fi-section-header { min-height: auto !important; } .fi-wi-chart canvas { max-height: 218px !important; } /* Tabs --------------------------------------------------- MIGRADO A moretto-admin-components.css (owner canónico del chrome genérico de tabs Filament). ------------------------------------------------------- */ /* Tablas ------------------------------------------------- MIGRADO A admin-tables.css (Owner exclusivo de tablas Filament). ------------------------------------------------------- */ /* Formularios ------------------------------------------- MIGRADO A moretto-control-system-v2.css (Owner exclusivo de controles de formulario). ------------------------------------------------------- */ /* Empty states ------------------------------------------ MIGRADO A moretto-admin-components.css (owner canónico de la geometría, tipografía, color e icono de los empty states). ------------------------------------------------------- */ /* Dark: neutraliza hardcodes claros del theme V2 -------- */ html.dark .fi-simple-main, html.dark .fi-section, html.dark .fi-wi-stats-overview-stat, html.dark .moretto-executive-stat, html.dark .moretto-aging-stat, html.dark .fi-wi-chart { background-color: var(--moretto-surface) !important; } html.dark .fi-wi-stats-overview-stat, html.dark .moretto-executive-stat { background: radial-gradient(circle at 102% -12%, color-mix(in srgb, var(--moretto-accent) 12%, transparent), transparent 7.5rem), linear-gradient(145deg, var(--moretto-surface-raised) 0%, var(--moretto-surface) 100%) !important; } html.dark .moretto-stat-warning, html.dark .moretto-stat-alert, html.dark .moretto-stat-danger { background: radial-gradient(circle at 102% -12%, rgb(196 61 50 / .15), transparent 7.5rem), linear-gradient(145deg, var(--moretto-surface-raised) 0%, var(--moretto-surface) 100%) !important; } html.dark .fi-section-header { background: var(--moretto-surface-soft) !important; } html.dark .fi-topbar-item-btn:hover, html.dark .fi-topbar button:hover { background: rgb(255 255 255 / .065) !important; } html.dark .fi-simple-layout { background: #0A0C0E !important; } .fi-theme-switcher { display: none !important; } /* Selector de apariencia -------------------------------- */ .moretto-appearance { position: relative; display: flex; align-items: center; } .moretto-appearance-trigger { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.45rem; height: 2.45rem; border: 1px solid transparent; border-radius: .72rem; color: var(--moretto-muted); transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease; } .moretto-appearance-trigger:hover, .moretto-appearance[data-open='true'] .moretto-appearance-trigger { border-color: var(--moretto-line); background: color-mix(in srgb, var(--moretto-surface) 82%, transparent) !important; color: var(--moretto-ink); } .moretto-appearance-trigger svg { width: 1.12rem; height: 1.12rem; } .moretto-appearance-dot { position: absolute; right: .33rem; bottom: .31rem; width: .42rem; height: .42rem; border: 1.5px solid var(--moretto-surface); border-radius: 999px; background: var(--moretto-accent); box-shadow: 0 0 0 1px var(--moretto-accent-glow); } .moretto-appearance-panel { position: absolute; z-index: 90; top: calc(100% + .68rem); right: 0; display: none; width: 18.5rem; padding: .72rem; border: 1px solid var(--moretto-glass-border); border-radius: 1rem; background: var(--moretto-glass-bg-strong); box-shadow: var(--moretto-shadow-float); -webkit-backdrop-filter: blur(26px) saturate(165%); backdrop-filter: blur(26px) saturate(165%); } .moretto-appearance[data-open='true'] .moretto-appearance-panel { display: block; animation: moretto-appearance-in .14s ease-out; } @keyframes moretto-appearance-in { from { opacity: 0; transform: translateY(-4px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } } .moretto-appearance-title { margin: 0; color: var(--moretto-ink); font-size: .76rem; font-weight: 700; letter-spacing: .015em; } .moretto-appearance-caption { margin: .15rem 0 .55rem; color: var(--moretto-muted); font-size: .68rem; line-height: 1.35; } .moretto-theme-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .28rem; padding: .25rem; border: 1px solid var(--moretto-line); border-radius: .72rem; background: color-mix(in srgb, var(--moretto-surface-soft) 86%, transparent); } .moretto-theme-mode { min-height: 2rem; padding: .38rem .45rem; border-radius: .5rem; color: var(--moretto-muted); font-size: .68rem; font-weight: 650; text-align: center; transition: background-color .14s ease, color .14s ease, box-shadow .14s ease; } .fi-topbar .moretto-theme-mode:hover { color: var(--moretto-ink); } .fi-topbar .moretto-theme-mode[aria-pressed='true'] { background: var(--moretto-surface-raised) !important; color: var(--moretto-ink) !important; box-shadow: 0 1px 2px rgb(17 24 39 / .08), 0 1px 0 var(--moretto-glass-highlight) inset; } .moretto-palette-heading { display: flex; align-items: center; justify-content: space-between; margin: .8rem 0 .45rem; } .moretto-palette-heading span:first-child { color: var(--moretto-ink); font-size: .72rem; font-weight: 680; } .moretto-palette-heading span:last-child { color: var(--moretto-muted); font-size: .63rem; } .moretto-palette-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; } .moretto-palette-option { display: flex; align-items: center; gap: .48rem; min-width: 0; min-height: 2.15rem; padding: .4rem .48rem; border: 1px solid var(--moretto-line); border-radius: .62rem; background: color-mix(in srgb, var(--moretto-surface) 74%, transparent) !important; color: var(--moretto-text); font-size: .67rem; font-weight: 620; text-align: left; transition: border-color .14s ease, background-color .14s ease, transform .14s ease; } .fi-topbar .moretto-palette-option:hover { border-color: var(--moretto-line-strong) !important; background: color-mix(in srgb, var(--moretto-accent) 5%, var(--moretto-surface)) !important; transform: translateY(-1px); } .fi-topbar .moretto-palette-option[aria-pressed='true'] { border-color: var(--moretto-accent-border); background: var(--moretto-accent-soft) !important; color: var(--moretto-ink); box-shadow: 0 0 0 2px var(--moretto-accent-glow); } .moretto-palette-swatch { flex: 0 0 auto; width: .72rem; height: .72rem; border: 1px solid rgb(0 0 0 / .08); border-radius: 999px; background: var(--swatch); box-shadow: 0 0 0 2px color-mix(in srgb, var(--swatch) 15%, transparent); } @media (max-width: 1024px) { .fi-topbar-ctn { padding: .45rem .45rem 0 !important; } .fi-topbar { min-height: 3.65rem !important; border-radius: .85rem !important; } .fi-main { padding-top: .85rem !important; } .fi-header-heading { font-size: 1.38rem !important; } } @media (max-width: 640px) { .moretto-appearance-panel { position: fixed; top: 4.65rem; right: .65rem; left: .65rem; width: auto; } .fi-header { margin-bottom: .75rem !important; } .fi-header-subheading { font-size: .76rem !important; } .fi-wi-stats-overview-stat, .moretto-executive-stat { min-height: 5.8rem !important; } } @media (prefers-reduced-motion: reduce) { .moretto-appearance-panel, .moretto-appearance-trigger, .moretto-palette-option, .fi-wi-stats-overview-stat, .moretto-executive-stat { animation: none !important; transition: none !important; } } /* PERF-03 END: public/css/moretto-premium-theme.css */ /* PERF-03 BEGIN: public/css/moretto-ui-system.css */ /* * Moretto UI System v1 * Canon visual: POS aprobado. * * Arquitectura: * 1. Primitives -> valores base. * 2. Semantics -> intención visual light/dark. * 3. Components -> contratos que consumirán los próximos parches. * * Este archivo NO redefine todavía el layout de Filament. UI-02/UI-03 * aplicarán estos contratos al shell y a los componentes globales. */ @font-face { font-family: 'Poppins'; src: url('../fonts/poppins/Poppins-Regular.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; } @font-face { font-family: 'Poppins'; src: url('../fonts/poppins/Poppins-Italic.woff2') format('woff2'); font-style: italic; font-weight: 400; font-display: swap; } @font-face { font-family: 'Poppins'; src: url('../fonts/poppins/Poppins-Medium.woff2') format('woff2'); font-style: normal; font-weight: 500; font-display: swap; } @font-face { font-family: 'Poppins'; src: url('../fonts/poppins/Poppins-MediumItalic.woff2') format('woff2'); font-style: italic; font-weight: 500; font-display: swap; } @font-face { font-family: 'Poppins'; src: url('../fonts/poppins/Poppins-SemiBold.woff2') format('woff2'); font-style: normal; font-weight: 600; font-display: swap; } @font-face { font-family: 'Poppins'; src: url('../fonts/poppins/Poppins-SemiBoldItalic.woff2') format('woff2'); font-style: italic; font-weight: 600; font-display: swap; } @font-face { font-family: 'Poppins'; src: url('../fonts/poppins/Poppins-Bold.woff2') format('woff2'); font-style: normal; font-weight: 700; font-display: swap; } @font-face { font-family: 'Poppins'; src: url('../fonts/poppins/Poppins-BoldItalic.woff2') format('woff2'); font-style: italic; font-weight: 700; font-display: swap; } @font-face { font-family: 'Poppins'; src: url('../fonts/poppins/Poppins-Light.woff2') format('woff2'); font-style: normal; font-weight: 300; font-display: swap; } :root { /* --------------------------------------------------------- 1. Primitives --------------------------------------------------------- */ --mtt-orange-500: #f36c21; --mtt-orange-600: #dc5b14; --mtt-orange-050: #fff1e8; --mtt-neutral-000: #ffffff; --mtt-neutral-025: #fafbfc; --mtt-neutral-050: #f5f6f8; --mtt-neutral-100: #eef0f2; --mtt-neutral-200: #e4e6e9; --mtt-neutral-300: #cfd3d8; --mtt-neutral-500: #696d74; --mtt-neutral-700: #3d4147; --mtt-neutral-900: #18191b; --mtt-neutral-950: #0f1114; --mtt-green-600: #16875d; --mtt-amber-700: #a36c12; --mtt-red-600: #c84545; --mtt-blue-600: #2563eb; --mtt-radius-xs: 0.375rem; --mtt-radius-sm: 0.5rem; --mtt-radius-md: 0.625rem; --mtt-radius-lg: 0.875rem; --mtt-radius-xl: 1rem; --mtt-radius-full: 999px; --mtt-space-1: 0.25rem; --mtt-space-2: 0.5rem; --mtt-space-3: 0.75rem; --mtt-space-4: 1rem; --mtt-space-5: 1.25rem; --mtt-space-6: 1.5rem; --mtt-space-8: 2rem; --mtt-duration-instant: 100ms; --mtt-duration-fast: 140ms; --mtt-duration-standard: 180ms; --mtt-duration-emphasis: 240ms; --mtt-ease-standard: cubic-bezier(.2, .8, .2, 1); --mtt-ease-enter: cubic-bezier(.16, 1, .3, 1); --mtt-ease-exit: cubic-bezier(.4, 0, 1, 1); /* --------------------------------------------------------- 2. Semantic tokens · Light --------------------------------------------------------- */ --ui-font-family: 'Poppins', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --ui-font-weight-regular: 400; --ui-font-weight-medium: 500; --ui-font-weight-bold: 600; /* Controles & campos: tipografía y geometría base */ --ui-control-font-size: 0.75rem; /* 12px - acciones y controles auxiliares */ --ui-control-font-size-sm: 0.75rem; --ui-control-font-weight: 500; --ui-control-font-weight-strong: 700; --ui-field-value-font-size: 0.6875rem; /* 11px - valores de campos */ --ui-field-value-font-weight: 400; --ui-field-label-font-size: 0.6875rem; /* 11px - etiquetas secundarias */ --ui-field-label-font-weight: 600; --ui-field-helper-font-size: 0.5625rem; /* 9px - texto de ayuda terciario */ --ui-field-helper-font-weight: 400; /* Geometría y densidad de campos (SSOT Moretto: 34-36px desktop) */ --ui-field-height: 2.25rem; /* 36px - Desktop estándar Moretto */ --ui-field-height-compact: 2.125rem; /* 34px - Compacto / denso / tablas / filtros */ --ui-field-height-touch: 2.75rem; /* 44px - Touch / mobile */ --ui-control-height: var(--ui-field-height); --ui-control-height-sm: var(--ui-field-height-compact); --ui-control-height-touch: var(--ui-field-height-touch); --ui-control-radius: var(--mtt-radius-md); --ui-control-radius-sm: var(--mtt-radius-sm); --ui-control-radius-round: var(--mtt-radius-full); --ui-control-pad-x: 0.75rem; --ui-control-gap: 0.45rem; /* File uploads / FilePond: geometría común del owner de cargas */ --ui-upload-font-size: 0.625rem; /* 10px - texto principal */ --ui-upload-min-height: 3.75rem; /* 60px - zona de carga compacta */ --ui-upload-icon-size: 1.05rem; /* 16.8px - acciones del item */ /* Cabecera de página · canon único. Solo tamaño, tipografía y ritmo vertical (el color hereda light/dark). Estructura en moretto-admin-theme.css; CTA/secundarias en moretto-admin-actions.css. */ --ui-page-header-heading-size: clamp(1.65rem, 2.4vw, 2rem); --ui-page-header-heading-size-mobile: 1.55rem; --ui-page-header-heading-weight: var(--ui-control-font-weight-strong); --ui-page-header-heading-line-height: 1.15; --ui-page-header-heading-tracking: -0.035em; --ui-page-header-subheading-size: 0.9rem; --ui-page-header-subheading-line-height: 1.55; --ui-page-header-subheading-measure: 66ch; --ui-page-header-breadcrumb-size: 0.75rem; --ui-page-header-breadcrumb-weight: var(--ui-control-font-weight-strong); --ui-page-header-stack-gap: 0.35rem; --ui-page-header-actions-gap: 0.45rem; --ui-page-header-gap-bottom: 1.25rem; --ui-page-header-accent-width: 3rem; --ui-page-header-accent-width-mobile: 2.5rem; --ui-page-header-accent-height: 3px; --ui-page-header-accent-gap: 0.55rem; --ui-page-header-accent-gap-mobile: 0.4rem; /* DEPRECATION CANDIDATE (Legacy): La carcasa de botones ahora es geometricamente estable (transform: none) */ --ui-press-scale: 0.965; /* Microinteracciones de control */ --ui-motion-fast: 110ms; --ui-motion-normal: 160ms; --ui-motion-standard: var(--mtt-duration-standard); --ui-motion-emphasis: var(--mtt-duration-emphasis); --ui-motion-writing: 120ms; --ui-motion-toggle-on: 140ms; --ui-motion-toggle-off: 240ms; --ui-ease-standard: var(--mtt-ease-standard); --ui-ease-enter: var(--mtt-ease-enter); --ui-ease-exit: var(--mtt-ease-exit); --mtt-v2-ease: cubic-bezier(0.2, 0.8, 0.2, 1); --mtt-v2-ease-press: cubic-bezier(0.16, 1, 0.3, 1); /* Marca & Primarios */ --ui-accent: var(--mtt-orange-500); --ui-accent-hover: var(--mtt-orange-600); --ui-accent-soft: var(--mtt-orange-050); --ui-accent-contrast: var(--mtt-neutral-900); --ui-primary: var(--ui-accent); --ui-primary-hover: #E96118; --ui-primary-pressed: #D95712; --ui-primary-text: #FFFFFF; /* Superficies */ --ui-canvas: var(--mtt-neutral-050); --ui-surface: var(--mtt-neutral-000); --ui-surface-soft: var(--mtt-neutral-025); --ui-surface-muted: var(--mtt-neutral-100); --ui-surface-elevated: var(--mtt-neutral-000); --ui-bg: var(--ui-surface); --ui-bg-soft: #F6F8FA; /* Texto & Muted */ --ui-text: #18191B; --ui-text-muted: #667085; --ui-text-subtle: #6d7178; /* Bordes */ --ui-border: #D8DEE8; --ui-border-hover: #BCC5D1; --ui-border-strong: var(--mtt-neutral-300); --ui-input-border: var(--mtt-neutral-300); /* Focus & Accesibilidad */ --ui-focus: #5f646b; --ui-focus-ring: 0 0 0 2px rgba(243, 108, 33, 0.14); --ui-focus-ring-neutral: 0 0 0 2px rgba(24, 25, 27, 0.08); /* Estados semánticos */ --ui-success: var(--mtt-green-600); --ui-success-hover: #15803D; --ui-warning: var(--mtt-amber-700); --ui-warning-hover: #B45309; --ui-danger: var(--mtt-red-600); --ui-danger-hover: #B91C1C; --ui-danger-pressed: #991B1B; --ui-info: var(--mtt-blue-600); --ui-info-hover: #1D4ED8; /* Radios y Sombras */ --ui-radius-control: var(--mtt-radius-md); --ui-radius-card: var(--mtt-radius-lg); --ui-radius-modal: var(--mtt-radius-xl); --ui-shadow-card: 0 1px 2px rgb(24 25 27 / 0.035), 0 12px 30px -26px rgb(24 25 27 / 0.26); --ui-shadow-float: 0 22px 56px -30px rgb(24 25 27 / 0.42); /* Stacking & Z-Index jerarquía Moretto */ --ui-z-base: 0; --ui-z-sticky: 20; --ui-z-dropdown: 50; --ui-z-modal: 60; --ui-z-modal-dropdown: 70; --ui-z-tooltip: 80; --ui-z-notification: 90; /* --------------------------------------------------------- 3. Component contracts --------------------------------------------------------- */ --ui-input-bg: var(--ui-surface-elevated); --ui-input-text: var(--ui-text); --ui-input-placeholder: var(--ui-text-subtle); --ui-input-radius: var(--ui-radius-control); --ui-button-primary-bg: var(--ui-accent); --ui-button-primary-bg-hover: var(--ui-accent-hover); --ui-button-primary-text: var(--mtt-neutral-900); --ui-button-radius: var(--ui-radius-control); --ui-card-bg: var(--ui-surface); --ui-card-border: var(--ui-border); --ui-card-radius: var(--ui-radius-card); --ui-card-shadow: var(--ui-shadow-card); --ui-modal-bg: var(--ui-surface-elevated); --ui-modal-border: var(--ui-border); --ui-modal-radius: var(--ui-radius-modal); --ui-modal-shadow: var(--ui-shadow-float); /* Contrato único de notificaciones / avisos (owner: components + overlays). Todo deriva de tokens que ya conmutan en dark mode. Los colores semánticos (success/warning/danger/info) NO se sobrescriben aquí. */ --ui-notification-bg: var(--ui-surface-elevated); --ui-notification-border: var(--ui-border); --ui-notification-radius: var(--ui-radius-card); --ui-notification-shadow: var(--ui-shadow-float); --ui-notification-text: var(--ui-text); --ui-notification-text-muted: var(--ui-text-muted); --ui-notification-pad-y: 10px; --ui-notification-pad-x: 12px; --ui-notification-gap: 8px; --ui-notification-title-size: 11px; --ui-notification-title-weight: 600; --ui-notification-body-size: 10px; --ui-notification-icon-size: 14px; --ui-notification-close-size: 18px; /* --------------------------------------------------------- Empty state — SSOT de su geometría y tipografía. Consumido por el canon de moretto-admin-components.css (schemas) y por la composición de tabla de admin-tables.css. Light/dark se resuelve con los tokens de superficie y texto. --------------------------------------------------------- */ --ui-empty-state-pad-y: 1.6rem; --ui-empty-state-pad-x: var(--mtt-space-5); --ui-empty-state-pad-y-mobile: 1.25rem; --ui-empty-state-pad-x-mobile: var(--mtt-space-4); --ui-empty-state-gap: 0.5rem; --ui-empty-state-icon-size: 2rem; --ui-empty-state-glyph-size: 1.05rem; --ui-empty-state-heading-size: 0.6875rem; /* 11px - título compacto */ --ui-empty-state-heading-weight: 600; /* peso moderado */ --ui-empty-state-desc-size: 0.625rem; /* 10px - descripción */ --ui-empty-state-desc-gap: 0.25rem; --ui-empty-state-measure: 32rem; /* --------------------------------------------------------- Compatibility bridge Los themes existentes siguen funcionando mientras migramos. --------------------------------------------------------- */ --moretto-display: var(--ui-font-family); --moretto-orange: var(--ui-accent); --moretto-orange-hover: var(--ui-accent-hover); --moretto-orange-strong: #B7470E; --moretto-orange-tint: var(--ui-accent-soft); --moretto-orange-tint-strong: #FFE5D4; --moretto-accent: var(--ui-accent); --moretto-accent-hover: #D95712; --moretto-accent-soft: #FFF0E7; --moretto-accent-border: #F9C6A8; --moretto-accent-contrast: var(--ui-accent-contrast); --moretto-accent-glow: rgb(243 108 33 / 0.24); --moretto-canvas: var(--ui-canvas); --moretto-surface: var(--ui-surface); --moretto-surface-soft: var(--ui-surface-soft); --moretto-surface-muted: var(--ui-surface-muted); --moretto-surface-raised: var(--ui-surface-elevated); --moretto-graphite: #151617; --moretto-graphite-soft: #202124; --moretto-ink: var(--ui-text); --moretto-text: var(--ui-text); --moretto-muted: var(--ui-text-muted); --moretto-subtle: var(--ui-text-subtle); --moretto-on-dark: #F4F4F5; --moretto-line: var(--ui-border); --moretto-line-soft: color-mix(in srgb, var(--ui-border) 72%, transparent); --moretto-line-strong: var(--ui-border-strong); --moretto-focus: var(--ui-accent); --moretto-focus-ring: rgb(243 108 33 / 0.24); --moretto-side-bg: #151617; --moretto-side-line: rgb(255 255 255 / .08); --moretto-side-muted: #A1A1AA; --moretto-side-item: #E4E4E7; --moretto-side-active: #FFFFFF; --moretto-side-hover: rgb(255 255 255 / .065); --moretto-side-active-bg: rgb(243 108 33 / .16); --moretto-glass-bg: rgb(255 255 255 / .74); --moretto-glass-bg-strong: rgb(255 255 255 / .91); --moretto-glass-border: rgb(24 27 32 / .09); --moretto-glass-highlight: rgb(255 255 255 / .86); --moretto-glass-blur: 24px; --moretto-glass-saturate: 175%; --moretto-success: var(--ui-success); --moretto-warning: var(--ui-warning); --moretto-danger: var(--ui-danger); --moretto-info: var(--ui-info); --moretto-radius-xs: 6px; --moretto-radius-sm: 8px; --moretto-radius-md: 10px; --moretto-radius-card: var(--ui-radius-card); --moretto-radius-btn: var(--ui-radius-control); --moretto-shadow-card: var(--ui-shadow-card); --moretto-shadow-float: var(--ui-shadow-float); --moretto-white: var(--moretto-surface); --moretto-soft: var(--moretto-canvas); } html.dark { /* Superficies Dark canónicas */ --ui-canvas: #0f1114; --ui-surface: #15181C; --ui-surface-soft: #191C21; --ui-surface-muted: #20242A; --ui-surface-elevated: #1C2025; --ui-bg: #1A1D23; --ui-bg-soft: #131519; /* Texto & Muted Dark */ --ui-text: #F4F5F7; --ui-text-muted: #94A3B8; --ui-text-subtle: #858b94; /* Bordes Dark */ --ui-border: #333842; --ui-border-hover: #4B5262; --ui-border-strong: #454b54; --ui-input-border: #3a4048; /* Focus Dark */ --ui-focus: #8f969f; --ui-focus-ring: 0 0 0 2px rgba(243, 108, 33, 0.22); --ui-focus-ring-neutral: 0 0 0 2px rgba(255, 255, 255, 0.12); /* Estados semánticos Dark */ --ui-success: #45c990; --ui-warning: #e4aa48; --ui-danger: #ef7676; --ui-accent-soft: rgb(243 108 33 / 0.12); /* Sombras Dark */ --ui-shadow-card: 0 1px 0 rgb(255 255 255 / 0.035) inset, 0 20px 50px -38px rgb(0 0 0 / 0.9); --ui-shadow-float: 0 28px 70px -30px rgb(0 0 0 / 0.92), 0 1px 0 rgb(255 255 255 / 0.08) inset; /* Dark Bridge canónico para compatibilidad completa */ --moretto-canvas: var(--ui-canvas); --moretto-surface: var(--ui-surface); --moretto-surface-soft: var(--ui-surface-soft); --moretto-surface-muted: var(--ui-surface-muted); --moretto-surface-raised: var(--ui-surface-elevated); --moretto-ink: var(--ui-text); --moretto-text: #DADDE2; --moretto-muted: #9EA3AC; --moretto-subtle: #747A84; --moretto-line: rgb(255 255 255 / .095); --moretto-line-soft: rgb(255 255 255 / .065); --moretto-line-strong: rgb(255 255 255 / .14); --moretto-glass-bg: rgb(20 23 27 / .70); --moretto-glass-bg-strong: rgb(24 27 32 / .94); --moretto-glass-border: rgb(255 255 255 / .09); --moretto-glass-highlight: rgb(255 255 255 / .07); --moretto-shadow-card: var(--ui-shadow-card); --moretto-shadow-float: var(--ui-shadow-float); --moretto-accent-soft: color-mix(in srgb, var(--moretto-accent) 18%, transparent); --moretto-accent-border: color-mix(in srgb, var(--moretto-accent) 36%, transparent); } /* Typography contract: Poppins, 600 as standard bold. */ .fi-body, .fi-body :is(button, input, select, textarea) { font-family: var(--ui-font-family) !important; } .fi-body :is( .fi-header-heading, .fi-section-header-heading, .fi-ta-header-heading, .fi-btn, .fi-tabs-item-label, .fi-wi-stats-overview-stat-value, strong, b, .font-bold, .font-extrabold, .font-black ) { font-weight: var(--ui-font-weight-bold) !important; } .fi-body :is(.font-extrabold, .font-black) { font-weight: var(--ui-font-weight-bold) !important; } .fi-body :is( .fi-wi-stats-overview-stat-value, .fi-ta-text-item, input[type='number'] ) { font-variant-numeric: tabular-nums; } /* Restore real light/dark color scheme after the legacy layers. */ html:not(.dark), html:not(.dark) body, html:not(.dark) .fi-body { color-scheme: light !important; } html.dark, html.dark body, html.dark .fi-body { color-scheme: dark !important; } /* Motion contract only: no component animation is enabled in UI-01. */ .fi-body :is(button, a, summary, input, select, textarea) { -webkit-tap-highlight-color: transparent; } /* ========================================================= PALETAS ALTERNATIVAS ========================================================= */ /* Foreground variants preserve contrast while filled controls keep the selected accent. */ .fi-body { --ui-accent-text: color-mix(in srgb, var(--ui-accent) 70%, #000); --ui-chart-accent: var(--ui-accent); } html.dark .fi-body { --ui-accent-text: var(--moretto-user-primary-300, var(--ui-accent)); --ui-chart-accent: var(--ui-accent-text); } /* User accents inherit through the authenticated shell, including sidebar and POS. */ html:is([data-moretto-palette='blue'], [data-moretto-palette='green'], [data-moretto-palette='violet'], [data-moretto-palette='neutral']) .fi-body { --ui-accent: var(--moretto-user-accent); --ui-accent-hover: color-mix(in srgb, var(--ui-accent) 85%, #000); --ui-accent-soft: color-mix(in srgb, var(--ui-accent) 12%, var(--ui-surface)); --ui-accent-contrast: #fff; --ui-primary: var(--ui-accent); --ui-primary-hover: var(--ui-accent-hover); --ui-primary-pressed: color-mix(in srgb, var(--ui-accent) 75%, #000); --ui-primary-text: #fff; --ui-button-primary-bg: var(--ui-accent); --ui-button-primary-bg-hover: var(--ui-accent-hover); --ui-button-primary-text: #fff; --ui-focus: var(--ui-accent); --ui-focus-ring: 0 0 0 2px color-mix(in srgb, var(--ui-accent) 24%, transparent); --moretto-orange: var(--ui-accent); --moretto-orange-hover: var(--ui-accent-hover); --moretto-orange-strong: var(--ui-primary-pressed); --moretto-orange-tint: var(--ui-accent-soft); --moretto-orange-tint-strong: color-mix(in srgb, var(--ui-accent) 24%, var(--ui-surface)); --moretto-accent: var(--ui-accent); --moretto-accent-hover: var(--ui-accent-hover); --moretto-accent-soft: var(--ui-accent-soft); --moretto-accent-border: color-mix(in srgb, var(--ui-accent) 36%, var(--ui-border)); --moretto-accent-contrast: #fff; --moretto-accent-glow: color-mix(in srgb, var(--ui-accent) 24%, transparent); --moretto-focus: var(--ui-accent); --moretto-focus-ring: color-mix(in srgb, var(--ui-accent) 24%, transparent); --primary-50: var(--moretto-user-primary-50); --primary-100: var(--moretto-user-primary-100); --primary-200: var(--moretto-user-primary-200); --primary-300: var(--moretto-user-primary-300); --primary-400: var(--moretto-user-primary-400); --primary-500: var(--moretto-user-primary-500); --primary-600: var(--moretto-user-primary-600); --primary-700: var(--moretto-user-primary-700); --primary-800: var(--moretto-user-primary-800); --primary-900: var(--moretto-user-primary-900); --primary-950: var(--moretto-user-primary-950); } .fi-body .moretto-profile-appearance { font-family: var(--ui-font-family); color: var(--ui-text); } .moretto-appearance-description, .moretto-appearance-status { margin: 0; color: var(--ui-text-muted); font-size: 0.75rem; } .moretto-appearance-groups { display: grid; gap: 1rem; margin-block: 0.75rem; } .moretto-appearance-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; } .moretto-appearance-fieldset legend { margin-bottom: 0.375rem; font-size: 0.75rem; font-weight: 600; } .moretto-appearance-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; max-width: 26rem; } .moretto-appearance-palettes { display: flex; flex-wrap: wrap; gap: 0.5rem; } .moretto-appearance-choice { position: relative; display: inline-flex; justify-content: center; align-items: center; gap: 0.375rem; min-height: 2.25rem; padding: 0.375rem 0.75rem; border: 1px solid var(--ui-border); border-radius: var(--mtt-radius-md, 0.625rem); background: var(--ui-surface); color: var(--ui-text); cursor: pointer; font-size: 0.75rem; font-weight: 500; transition: border-color var(--mtt-duration-fast, 140ms), background-color var(--mtt-duration-fast, 140ms); } .moretto-appearance-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; } .moretto-appearance-choice:has(input:checked) { border-color: var(--ui-accent); background: var(--ui-accent-soft); } .moretto-appearance-choice:has(input:focus-visible) { outline: 2px solid var(--ui-accent); outline-offset: 2px; } .moretto-appearance-choice:hover { border-color: var(--ui-accent); } .moretto-appearance-swatch { width: 1rem; height: 1rem; flex: 0 0 1rem; border-radius: 50%; background: var(--moretto-swatch); } .moretto-appearance-status { min-height: 2em; font-size: 0.6875rem; } .moretto-appearance-status[data-status='error'] { color: var(--ui-danger); } @media (max-width: 40rem) { .moretto-appearance-choice { min-height: 2.75rem; } } @media (prefers-reduced-motion: reduce) { .moretto-appearance-choice { transition: none; } } html[data-moretto-palette='titanium'] { --moretto-accent: #4C7DFF; --moretto-accent-hover: #3868E8; --moretto-accent-soft: #EDF2FF; --moretto-accent-border: #C7D5FF; --moretto-accent-contrast: #FFFFFF; --moretto-accent-glow: rgb(76 125 255 / .25); } html[data-moretto-palette='emerald'] { --moretto-accent: #20A875; --moretto-accent-hover: #16865C; --moretto-accent-soft: #E9F8F2; --moretto-accent-border: #BDE7D7; --moretto-accent-contrast: #FFFFFF; --moretto-accent-glow: rgb(32 168 117 / .24); } html[data-moretto-palette='royal'] { --moretto-accent: #7C68EE; --moretto-accent-hover: #6551D8; --moretto-accent-soft: #F0EDFF; --moretto-accent-border: #D5CEFF; --moretto-accent-contrast: #FFFFFF; --moretto-accent-glow: rgb(124 104 238 / .24); } html[data-moretto-palette='crimson'] { --moretto-accent: #D75455; --moretto-accent-hover: #B94345; --moretto-accent-soft: #FDEEEE; --moretto-accent-border: #F4C7C8; --moretto-accent-contrast: #FFFFFF; --moretto-accent-glow: rgb(215 84 85 / .24); } html[data-moretto-palette='champagne'] { --moretto-accent: #C99852; --moretto-accent-hover: #A97C3E; --moretto-accent-soft: #FBF4E9; --moretto-accent-border: #EAD7B8; --moretto-accent-contrast: #17181A; --moretto-accent-glow: rgb(201 152 82 / .24); } /* Shared numeric typography remains available without a table stylesheet. */ .fi-body[data-moretto-pos] { --mtt-table-ui-disabled: 1; } .fi-body:not([data-moretto-pos]) :is(.fi-pagination, .fi-badge) { font-variant-numeric: tabular-nums; } /* PERF-03 END: public/css/moretto-ui-system.css */ /* PERF-03 BEGIN: public/css/moretto-admin-shell.css */ /* * Moretto Admin Shell v2 * Canon visual: POS aprobado. * Scope: panel administrativo autenticado. El POS conserva su shell dedicado. * * Este archivo modifica únicamente navegación + marco de contenido. * UI-03 aplicará el sistema a formularios, tablas, modales y demás componentes. */ @media (min-width: 64rem) { /* --------------------------------------------------------- Canvas / frame --------------------------------------------------------- */ .fi-body[data-moretto-sidebar]:not([data-moretto-pos]) { background: var(--ui-canvas) !important; background-image: none !important; } .fi-body[data-moretto-sidebar]:not([data-moretto-pos]) .fi-main-ctn, .fi-body[data-moretto-sidebar]:not([data-moretto-pos]) .fi-page, .fi-body[data-moretto-sidebar]:not([data-moretto-pos]) .fi-page-main { min-width: 0; } .fi-body[data-moretto-sidebar]:not([data-moretto-pos]) .fi-main { padding-top: 0.9rem !important; padding-bottom: 1.75rem !important; } /* --------------------------------------------------------- Topbar · derivada de la barra compacta del POS --------------------------------------------------------- */ .fi-body[data-moretto-sidebar]:not([data-moretto-pos]) .fi-topbar-ctn { padding: 0 !important; background: transparent !important; } .fi-body[data-moretto-sidebar]:not([data-moretto-pos]) .fi-topbar { min-height: 3.5rem !important; border: 0 !important; border-bottom: 1px solid rgb(15 23 42 / 0.10) !important; border-radius: 0 !important; background: linear-gradient( 180deg, rgb(255 255 255 / 0.78) 0%, rgb(250 251 252 / 0.70) 58%, rgb(246 248 250 / 0.66) 100% ) !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.92), inset 0 -1px 0 rgb(255 255 255 / 0.30), 0 10px 34px -24px rgb(15 23 42 / 0.38) !important; -webkit-backdrop-filter: blur(22px) saturate(158%) contrast(103%) !important; backdrop-filter: blur(22px) saturate(158%) contrast(103%) !important; } .fi-body[data-moretto-sidebar]:not([data-moretto-pos]) .fi-topbar::before, .fi-body[data-moretto-sidebar]:not([data-moretto-pos]) .fi-topbar::after { display: none !important; } .fi-body[data-moretto-sidebar]:not([data-moretto-pos]) .fi-topbar-start :is(button, a, .fi-icon) { color: var(--ui-text-muted) !important; } .fi-body[data-moretto-sidebar]:not([data-moretto-pos]) .fi-topbar button, .fi-body[data-moretto-sidebar]:not([data-moretto-pos]) .fi-topbar a { border-radius: var(--ui-radius-control) !important; transition: background-color var(--ui-motion-fast) var(--ui-ease-standard), color var(--ui-motion-fast) var(--ui-ease-standard), border-color var(--ui-motion-fast) var(--ui-ease-standard), transform 90ms ease !important; } .fi-body[data-moretto-sidebar]:not([data-moretto-pos]) .fi-topbar :is(button, a):active { transform: translateY(1px); } .fi-body[data-moretto-sidebar]:not([data-moretto-pos]) .fi-topbar :is(.fi-icon-btn, .fi-topbar-item-btn) { min-width: 2.25rem; min-height: 2.25rem; color: var(--ui-text-muted) !important; } .fi-body[data-moretto-sidebar]:not([data-moretto-pos]) .fi-topbar :is(.fi-icon-btn, .fi-topbar-item-btn):hover { background: var(--ui-surface-muted) !important; color: var(--ui-text) !important; } /* Global search: mismo criterio de focus limpio del POS. */ .fi-body[data-moretto-sidebar]:not([data-moretto-pos]) :is(.fi-global-search-field, .fi-topbar) .fi-input-wrp { min-height: 2.3rem !important; border: 1px solid var(--ui-input-border) !important; border-radius: var(--ui-radius-control) !important; background: var(--ui-input-bg) !important; box-shadow: none !important; transition: border-color var(--ui-motion-fast) var(--ui-ease-standard), box-shadow var(--ui-motion-fast) var(--ui-ease-standard), background-color var(--ui-motion-fast) var(--ui-ease-standard) !important; } .fi-body[data-moretto-sidebar]:not([data-moretto-pos]) :is(.fi-global-search-field, .fi-topbar) .fi-input-wrp:focus-within { border-color: var(--ui-focus) !important; box-shadow: 0 0 0 3px var(--ui-focus-ring) !important; background: var(--ui-surface-elevated) !important; } .fi-body[data-moretto-sidebar]:not([data-moretto-pos]) .fi-global-search-field input { color: var(--ui-text) !important; font-weight: 400 !important; } .fi-body[data-moretto-sidebar]:not([data-moretto-pos]) .fi-global-search-field input::placeholder { color: var(--ui-text-subtle) !important; opacity: 1; } /* --------------------------------------------------------- Sidebar · graphite estable, sin gradientes ornamentales --------------------------------------------------------- */ .fi-body[data-moretto-sidebar] .fi-sidebar { background: #121416 !important; background-image: none !important; } .fi-body[data-moretto-sidebar] .fi-sidebar { border-right: 1px solid rgb(255 255 255 / 0.07) !important; box-shadow: none !important; } .fi-body[data-moretto-sidebar] .fi-sidebar-header { display: none !important; } .fi-body[data-moretto-sidebar] .fi-sidebar-nav { padding: 0.65rem 0.55rem 1rem !important; scrollbar-color: rgb(255 255 255 / 0.18) transparent !important; scrollbar-width: thin; } .fi-body[data-moretto-sidebar] .fi-sidebar-nav-groups { gap: 0.42rem !important; } .fi-body[data-moretto-sidebar] .fi-sidebar-group { gap: 0.12rem !important; padding-block: 0 !important; } .fi-body[data-moretto-sidebar] .fi-sidebar-group-btn { min-height: 1.85rem !important; padding: 0.26rem 0.55rem !important; border-radius: 0.5rem !important; background: transparent !important; transition: background-color var(--ui-motion-fast) var(--ui-ease-standard), color var(--ui-motion-fast) var(--ui-ease-standard) !important; } .fi-body[data-moretto-sidebar] .fi-sidebar-group-btn:hover { background: rgb(255 255 255 / 0.045) !important; } .fi-body[data-moretto-sidebar] .fi-sidebar-group-label { color: #92979f !important; font-size: 0.68rem !important; font-weight: 700 !important; letter-spacing: 0.115em !important; line-height: 1.2 !important; text-transform: uppercase; } .fi-body[data-moretto-sidebar] .fi-sidebar-group-btn :is(.fi-icon, .fi-sidebar-group-collapse-btn) { color: #7f858e !important; } .fi-body[data-moretto-sidebar] .fi-sidebar-item > :is(a, button) { min-height: 2.45rem !important; padding: 0.5rem 0.65rem !important; border: 1px solid transparent !important; border-radius: 0.625rem !important; background: transparent !important; box-shadow: none !important; color: #d6d9de !important; font-size: 0.82rem !important; font-weight: 500 !important; transition: background-color var(--ui-motion-fast) var(--ui-ease-standard), border-color var(--ui-motion-fast) var(--ui-ease-standard), color var(--ui-motion-fast) var(--ui-ease-standard), transform 90ms ease !important; } .fi-body[data-moretto-sidebar] .fi-sidebar-item > :is(a, button):active { transform: translateX(1px); } .fi-body[data-moretto-sidebar] .fi-sidebar-item :is(.fi-sidebar-item-label, span) { color: inherit !important; } .fi-body[data-moretto-sidebar] .fi-sidebar-item > :is(a, button) svg { color: #8f959e !important; transition: color var(--ui-motion-fast) var(--ui-ease-standard) !important; } .fi-body[data-moretto-sidebar] .fi-sidebar-item > :is(a, button):hover { border-color: rgb(255 255 255 / 0.035) !important; background: rgb(255 255 255 / 0.055) !important; color: #ffffff !important; } .fi-body[data-moretto-sidebar] .fi-sidebar-item > :is(a, button):hover svg { color: #c7cbd1 !important; } .fi-body[data-moretto-sidebar] .fi-sidebar-item.fi-active > :is(a, button) { border-color: color-mix(in srgb, var(--ui-accent) 18%, transparent) !important; background: color-mix(in srgb, var(--ui-accent) 12%, transparent) !important; box-shadow: inset 2px 0 0 var(--ui-accent) !important; color: #ffffff !important; font-weight: 600 !important; } .fi-body[data-moretto-sidebar] .fi-sidebar-item.fi-active > :is(a, button) svg { color: var(--moretto-user-primary-300, var(--ui-accent)) !important; } .fi-body[data-moretto-sidebar] .fi-sidebar-group.fi-active > .fi-sidebar-group-btn .fi-sidebar-group-label { color: #c6cad0 !important; } /* Collapsed rail: mantiene el lenguaje del rail del POS. */ .fi-body[data-moretto-sidebar-compact][data-moretto-sidebar-compact] .fi-sidebar-nav { padding-inline: var(--moretto-sidebar-nav-inline-padding, 0.55rem) !important; } .fi-body[data-moretto-sidebar-compact][data-moretto-sidebar-compact] .fi-sidebar-item > :is(a, button) { width: calc(var(--moretto-ds03-sidebar-collapsed, 3.75rem) - (2 * var(--moretto-sidebar-nav-inline-padding, 0.55rem))) !important; max-width: calc(var(--moretto-ds03-sidebar-collapsed, 3.75rem) - (2 * var(--moretto-sidebar-nav-inline-padding, 0.55rem))) !important; box-sizing: border-box !important; overflow: hidden !important; justify-content: flex-start; min-height: 2.55rem !important; padding-inline: var(--moretto-sidebar-item-inline-padding, 0.65rem) !important; } .fi-body[data-moretto-sidebar-compact][data-moretto-sidebar-compact] .fi-sidebar-item.fi-active > :is(a, button) { box-shadow: inset 2px 0 0 var(--ui-accent) !important; overflow: hidden !important; } .fi-body[data-moretto-sidebar-expanded][data-moretto-sidebar-expanded] .fi-sidebar-item > :is(a, button) { width: 100% !important; max-width: 100% !important; } } /* ------------------------------------------------------------- Tablet / mobile shell Mantiene los controles de Filament; solo hereda el canon visual. ------------------------------------------------------------- */ @media (max-width: 63.999rem) { .fi-body:not([data-moretto-pos]) .fi-topbar { min-height: 3.5rem !important; border-bottom: 1px solid rgb(15 23 42 / 0.09) !important; background: linear-gradient( 180deg, rgb(255 255 255 / 0.88) 0%, rgb(249 250 251 / 0.82) 100% ) !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.90), 0 8px 26px -22px rgb(15 23 42 / 0.32) !important; -webkit-backdrop-filter: blur(16px) saturate(145%) !important; backdrop-filter: blur(16px) saturate(145%) !important; } .fi-body .fi-sidebar, .fi-body .fi-sidebar-header { background: #121416 !important; background-image: none !important; } .fi-body .fi-sidebar-item.fi-active > :is(a, button) { background: color-mix(in srgb, var(--ui-accent) 12%, transparent) !important; box-shadow: inset 2px 0 0 var(--ui-accent) !important; } .fi-body:not([data-moretto-pos]) .fi-main { padding-top: 0.75rem !important; padding-bottom: 1.25rem !important; } } /* Dark mode: mismas superficies, no una segunda personalidad visual. */ html.dark .fi-body[data-moretto-sidebar]:not([data-moretto-pos]) .fi-topbar, html.dark .fi-body:not([data-moretto-pos]) .fi-topbar { background: linear-gradient( 180deg, rgb(24 27 31 / 0.78) 0%, rgb(17 20 24 / 0.70) 100% ) !important; border-bottom-color: rgb(255 255 255 / 0.09) !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.11), inset 0 -1px 0 rgb(255 255 255 / 0.025), 0 12px 36px -24px rgb(0 0 0 / 0.88) !important; -webkit-backdrop-filter: blur(22px) saturate(150%) contrast(104%) !important; backdrop-filter: blur(22px) saturate(150%) contrast(104%) !important; } html.dark .fi-body[data-moretto-sidebar] .fi-sidebar, html.dark .fi-body .fi-sidebar { background: #0d0f11 !important; } /* ========================================================= PM-12H · CONTENCION REAL DEL AREA PRINCIPAL Filament 5 usa .fi-layout como flex row, .fi-sidebar como item lateral y .fi-main-ctn como item flexible. El item flexible debe calcularse sobre el espacio RESTANTE, no sobre el ancho completo del viewport. ========================================================= */ @media (min-width: 64rem) { .fi-body[data-moretto-sidebar]:not([data-moretto-pos]) .fi-layout { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } .fi-body[data-moretto-sidebar]:not([data-moretto-pos]) .fi-main-ctn { flex: 1 1 0% !important; width: 0 !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; } .fi-body[data-moretto-sidebar]:not([data-moretto-pos]) .fi-main { width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin-inline: 0 !important; box-sizing: border-box !important; } .fi-body[data-moretto-sidebar]:not([data-moretto-pos]) .fi-page, .fi-body[data-moretto-sidebar]:not([data-moretto-pos]) .fi-page-main, .fi-body[data-moretto-sidebar]:not([data-moretto-pos]) .fi-page-header-main-ctn, .fi-body[data-moretto-sidebar]:not([data-moretto-pos]) .fi-page-content { width: 100%; box-sizing: border-box !important; } } /* ========================================================= STACKING CONTEXT: Aislamiento del contenedor principal Garantiza que ningún elemento (filtros, badges, toolbars, tablas, popovers o acciones) escape por encima del sidebar móvil cuando el drawer está abierto. ========================================================= */ @media (max-width: 63.99rem) { .fi-body:not([data-moretto-pos]) .fi-main-ctn { position: relative; z-index: 1; isolation: isolate; } .fi-body[data-moretto-sidebar-open]:not([data-moretto-pos]) .fi-main-ctn, .fi-body[data-moretto-sidebar-open][data-moretto-sidebar-open]:not([data-moretto-pos]) .fi-main-ctn, .fi-main-ctn.fi-main-ctn-sidebar-open { z-index: 0 !important; isolation: isolate !important; } } @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .fi-body:not([data-moretto-pos]) .fi-topbar, .fi-body[data-moretto-sidebar]:not([data-moretto-pos]) .fi-topbar { background: var(--ui-surface) !important; } html.dark .fi-body:not([data-moretto-pos]) .fi-topbar, html.dark .fi-body[data-moretto-sidebar]:not([data-moretto-pos]) .fi-topbar { background: var(--ui-surface) !important; } } /* ========================================================= DS-03.8 · SIDEBAR LENTA + SCROLL INERCIAL VISIBLE --------------------------------------------------------- El rail conserva 3.75rem en el layout y expande a 15.25rem como overlay. El estado visual se controla explícitamente con data-moretto-expanded para desacoplar la animación del montaje/desmontaje de labels que realiza Filament. El wheel se interpola por requestAnimationFrame desde el JS del shell para que el desplazamiento sea lento y continuo. Touch permanece nativo y reduced-motion desactiva el efecto. ========================================================= */ /* Scroll suave para anclas/programático; wheel se interpola en JS. */ html.fi { scroll-behavior: smooth; scroll-padding-top: 4.25rem; scrollbar-color: rgb(100 116 139 / 0.44) transparent; scrollbar-width: thin; } html.fi::-webkit-scrollbar { width: 9px; height: 9px; } html.fi::-webkit-scrollbar-track { background: transparent; } html.fi::-webkit-scrollbar-thumb { min-height: 2.5rem; border: 2px solid transparent; border-radius: 999px; background: rgb(100 116 139 / 0.42); background-clip: padding-box; } html.fi::-webkit-scrollbar-thumb:hover { background: rgb(71 85 105 / 0.62); background-clip: padding-box; } .fi-body:not([data-moretto-pos]) :is( .fi-main, .fi-page, .fi-page-content, .fi-modal-window, .fi-ta-content, .fi-sidebar-nav ) { scroll-behavior: smooth; -webkit-overflow-scrolling: touch; } @media (min-width: 64rem) { .fi-body.fi-body-has-sidebar-collapsible-on-desktop { --moretto-ds03-sidebar-collapsed: 3.75rem; --moretto-ds03-sidebar-expanded: 15.25rem; --moretto-ds03-sidebar-extra: calc( var(--moretto-ds03-sidebar-expanded) - var(--moretto-ds03-sidebar-collapsed) ); --moretto-sidebar-nav-inline-padding: 0.55rem; --moretto-sidebar-item-inline-padding: 0.65rem; --moretto-sidebar-motion: 680ms; --moretto-sidebar-ease: cubic-bezier(0.16, 1, 0.30, 1); } .fi-body.fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar { z-index: 25 !important; flex-shrink: 0 !important; overflow: hidden !important; width: var(--moretto-ds03-sidebar-collapsed) !important; margin-inline-end: 0 !important; border-color: rgb(255 255 255 / 0.07) !important; box-shadow: none !important; transform: translateZ(0); backface-visibility: hidden; transition: width var(--moretto-sidebar-motion) var(--moretto-sidebar-ease), margin-inline-end var(--moretto-sidebar-motion) var(--moretto-sidebar-ease), box-shadow 620ms var(--moretto-sidebar-ease), border-color 520ms var(--moretto-sidebar-ease) !important; will-change: width, margin-inline-end; } .fi-body.fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; background: linear-gradient(90deg, rgb(255 255 255 / 0.018), rgb(255 255 255 / 0.055)); transition: opacity 560ms var(--moretto-sidebar-ease) !important; } .fi-body.fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar[data-moretto-expanded='true']::before { opacity: 1; } .fi-body.fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar > * { position: relative; z-index: 1; } .fi-body.fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar[data-moretto-expanded='true'] { width: var(--moretto-ds03-sidebar-expanded) !important; margin-inline-end: calc(-1 * var(--moretto-ds03-sidebar-extra)) !important; border-color: rgb(255 255 255 / 0.10) !important; box-shadow: 18px 0 34px -24px rgb(15 23 42 / 0.46) !important; } html[dir='rtl'] .fi-body.fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar[data-moretto-expanded='true'] { box-shadow: -18px 0 34px -24px rgb(15 23 42 / 0.46) !important; } html.dark .fi-body.fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar[data-moretto-expanded='true'] { box-shadow: 18px 0 38px -24px rgb(0 0 0 / 0.76) !important; } html[dir='rtl'].dark .fi-body.fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar[data-moretto-expanded='true'] { box-shadow: -18px 0 38px -24px rgb(0 0 0 / 0.76) !important; } /* El scroll de la navegación es independiente del rail y nunca captura wheel global. */ .fi-body.fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar-nav { overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior-y: contain; scrollbar-gutter: stable; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / 0.20) transparent !important; transition: padding-inline var(--moretto-sidebar-motion) var(--moretto-sidebar-ease), opacity 520ms var(--moretto-sidebar-ease) !important; } .fi-body.fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar-nav::-webkit-scrollbar { width: 7px; } .fi-body.fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar-nav::-webkit-scrollbar-track { background: transparent; } .fi-body.fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar-nav::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: rgb(255 255 255 / 0.18); background-clip: padding-box; } .fi-body.fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgb(255 255 255 / 0.30); background-clip: padding-box; } .fi-body.fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar[data-moretto-expanded='false'] .fi-sidebar-nav { padding-inline: var(--moretto-sidebar-nav-inline-padding) !important; } .fi-body.fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar[data-moretto-expanded='true'] .fi-sidebar-nav { padding-inline: var(--moretto-sidebar-nav-inline-padding) !important; } /* * El icono nunca comparte la animación de opacidad del label. * Así permanece visible y estable en el rail compacto. */ .fi-body.fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar-item > :is(a, button) { justify-content: flex-start !important; gap: 0.65rem !important; padding-inline: var(--moretto-sidebar-item-inline-padding) !important; transition: background-color var(--ui-motion-fast) var(--ui-ease-standard), border-color var(--ui-motion-fast) var(--ui-ease-standard), color var(--ui-motion-fast) var(--ui-ease-standard), transform 260ms ease, gap 560ms var(--moretto-sidebar-ease) !important; } .fi-body.fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar-item-icon { flex: 0 0 1.5rem !important; width: 1.5rem !important; min-width: 1.5rem !important; opacity: 1 !important; visibility: visible !important; transform-origin: center; will-change: transform; transition: color 320ms ease, transform 520ms var(--moretto-sidebar-ease) !important; } /* Solo se animan textos/badges; nunca .fi-sidebar-group-items. */ .fi-body.fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar :is( .fi-sidebar-group-label, .fi-sidebar-group-collapse-btn, .fi-sidebar-item-label, .fi-sidebar-item-badge-ctn, .fi-sidebar-database-notifications-btn-label, .fi-sidebar-database-notifications-btn-badge-ctn ) { transform-origin: left center; transition: opacity 430ms var(--moretto-sidebar-ease), transform 560ms var(--moretto-sidebar-ease) !important; will-change: opacity, transform; } .fi-body.fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar[data-moretto-expanded='true'] :is( .fi-sidebar-group-label, .fi-sidebar-group-collapse-btn, .fi-sidebar-item-label, .fi-sidebar-item-badge-ctn, .fi-sidebar-database-notifications-btn-label, .fi-sidebar-database-notifications-btn-badge-ctn ) { transition-delay: 130ms, 95ms !important; } .fi-body.fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar[data-moretto-expanded='false'] :is( .fi-sidebar-group-label, .fi-sidebar-group-collapse-btn, .fi-sidebar-item-label, .fi-sidebar-item-badge-ctn, .fi-sidebar-database-notifications-btn-label, .fi-sidebar-database-notifications-btn-badge-ctn ) { transition-delay: 0ms, 0ms !important; } .fi-body.fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar[data-moretto-expanded='false'] :is( .fi-sidebar-group-label, .fi-sidebar-group-collapse-btn, .fi-sidebar-item-label, .fi-sidebar-item-badge-ctn, .fi-sidebar-database-notifications-btn-label, .fi-sidebar-database-notifications-btn-badge-ctn ) { opacity: 0 !important; transform: translateX(-12px) !important; pointer-events: none !important; } .fi-body.fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar[data-moretto-expanded='true'] :is( .fi-sidebar-group-label, .fi-sidebar-group-collapse-btn, .fi-sidebar-item-label, .fi-sidebar-item-badge-ctn, .fi-sidebar-database-notifications-btn-label, .fi-sidebar-database-notifications-btn-badge-ctn ) { opacity: 1 !important; transform: translateX(0) !important; } .fi-body.fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar-item > :is(a, button):hover .fi-sidebar-item-icon { transform: scale(1.04); } .fi-body.fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar-item.fi-active > :is(a, button) .fi-sidebar-item-icon { transform: scale(1.03); } .fi-body.fi-body-has-sidebar-collapsible-on-desktop:not([data-moretto-pos]) .fi-main-ctn { min-width: 0 !important; } } html[data-moretto-smooth-scroll='off'] { scroll-behavior: auto !important; } @media (prefers-reduced-motion: reduce) { html[data-moretto-smooth-scroll='off'].fi, .fi-body:not([data-moretto-pos]) :is( .fi-main, .fi-page, .fi-page-content, .fi-modal-window, .fi-ta-content, .fi-sidebar-nav ) { scroll-behavior: auto !important; } } @media (min-width: 64rem) and (prefers-reduced-motion: reduce) { html:not([data-moretto-smooth-scroll='on']) .fi-body.fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar, html:not([data-moretto-smooth-scroll='on']) .fi-body.fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar-nav, html:not([data-moretto-smooth-scroll='on']) .fi-body.fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar :is( .fi-sidebar-group, .fi-sidebar-group-btn, .fi-sidebar-group-label, .fi-sidebar-group-collapse-btn, .fi-sidebar-item-label, .fi-sidebar-item-badge-ctn, .fi-sidebar-database-notifications-btn-label, .fi-sidebar-database-notifications-btn-badge-ctn, .fi-sidebar-item-icon ) { transition: none !important; } } /* * Filament reduce globalmente toda transición a .01ms dentro de su capa * `base`. Cuando el usuario activa el modo suave de Moretto, esta excepción * localizada restaura únicamente las duraciones del sidebar. El modo `off` * conserva la reducción de movimiento nativa. */ @media (min-width: 64rem) and (prefers-reduced-motion: reduce) { @layer properties { html[data-moretto-smooth-scroll='on'] .fi-body[data-moretto-sidebar][data-moretto-sidebar] .fi-main-sidebar.fi-sidebar { transition-duration: 280ms, 240ms, 220ms !important; } html[data-moretto-smooth-scroll='on'] .fi-body[data-moretto-sidebar][data-moretto-sidebar] .fi-main-sidebar.fi-sidebar[data-moretto-expanded='true'] { transition-duration: 390ms, 330ms, 300ms !important; } html[data-moretto-smooth-scroll='on'] .fi-body[data-moretto-sidebar][data-moretto-sidebar] .fi-main-sidebar.fi-sidebar :is( .fi-sidebar-group-label, .fi-sidebar-group-collapse-btn, .fi-sidebar-item-label, .fi-sidebar-item-badge-ctn, .fi-sidebar-database-notifications-btn-label, .fi-sidebar-database-notifications-btn-badge-ctn ) { transition-duration: 180ms, 240ms !important; } html[data-moretto-smooth-scroll='on'] .fi-body[data-moretto-sidebar][data-moretto-sidebar] .fi-main-sidebar.fi-sidebar[data-moretto-expanded='true'] :is( .fi-sidebar-group-label, .fi-sidebar-group-collapse-btn, .fi-sidebar-item-label, .fi-sidebar-item-badge-ctn, .fi-sidebar-database-notifications-btn-label, .fi-sidebar-database-notifications-btn-badge-ctn ) { transition-duration: 240ms, 310ms !important; } html[data-moretto-smooth-scroll='on'] .fi-body[data-moretto-sidebar][data-moretto-sidebar] .fi-main-sidebar.fi-sidebar .fi-sidebar-group { transition-duration: 240ms !important; } html[data-moretto-smooth-scroll='on'] .fi-body[data-moretto-sidebar][data-moretto-sidebar] .fi-main-sidebar.fi-sidebar[data-moretto-expanded='true'] .fi-sidebar-group { transition-duration: 310ms !important; } html[data-moretto-smooth-scroll='on'] .fi-body[data-moretto-sidebar][data-moretto-sidebar] .fi-main-sidebar.fi-sidebar .fi-sidebar-group-btn { transition-duration: 240ms, 240ms, 240ms, 180ms, 240ms, 0s !important; } html[data-moretto-smooth-scroll='on'] .fi-body[data-moretto-sidebar][data-moretto-sidebar] .fi-main-sidebar.fi-sidebar[data-moretto-expanded='true'] .fi-sidebar-group-btn { transition-duration: 310ms, 310ms, 310ms, 240ms, 310ms, 0s !important; } } } /* Full smooth mode. With the Moretto preference in `off`, the reduced-motion rules keep these transitions disabled. */ @media (min-width: 64rem) { html[data-moretto-smooth-scroll='on'] .fi-body.fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar { transition: width 680ms cubic-bezier(0.16, 1, 0.30, 1), margin-inline-end 680ms cubic-bezier(0.16, 1, 0.30, 1), box-shadow 620ms cubic-bezier(0.16, 1, 0.30, 1), border-color 520ms cubic-bezier(0.16, 1, 0.30, 1) !important; } html[data-moretto-smooth-scroll='on'] .fi-body.fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar :is( .fi-sidebar-group-label, .fi-sidebar-group-collapse-btn, .fi-sidebar-item-label, .fi-sidebar-item-badge-ctn, .fi-sidebar-database-notifications-btn-label, .fi-sidebar-database-notifications-btn-badge-ctn ) { transition: opacity 430ms cubic-bezier(0.16, 1, 0.30, 1), transform 560ms cubic-bezier(0.16, 1, 0.30, 1) !important; } } /* ========================================================= DS-03.9 · REVEAL REAL DEL SIDEBAR + INERCIA EQUILIBRADA --------------------------------------------------------- El panel mantiene su ancho expandido internamente y conserva un footprint de 3.75rem mediante margen negativo. El rail se revela con clip-path, evitando la carrera de width/clases de Filament y haciendo que la expansión sea realmente visible. ========================================================= */ @media (min-width: 64rem) { .fi-body[data-moretto-sidebar][data-moretto-sidebar] { --moretto-sidebar-reveal-duration: 390ms; --moretto-sidebar-reveal-ease: cubic-bezier(0.22, 1, 0.36, 1); --moretto-sidebar-exit-duration: 280ms; --moretto-sidebar-exit-ease: cubic-bezier(0.4, 0, 1, 1); } .fi-body[data-moretto-sidebar][data-moretto-sidebar] .fi-main-sidebar.fi-sidebar { width: var(--moretto-ds03-sidebar-expanded, 15.25rem) !important; min-width: var(--moretto-ds03-sidebar-expanded, 15.25rem) !important; max-width: var(--moretto-ds03-sidebar-expanded, 15.25rem) !important; margin-inline-end: calc( -1 * ( var(--moretto-ds03-sidebar-expanded, 15.25rem) - var(--moretto-ds03-sidebar-collapsed, 3.75rem) ) ) !important; clip-path: inset( 0 calc(100% - var(--moretto-ds03-sidebar-collapsed, 3.75rem)) 0 0 ); transition: clip-path var(--moretto-sidebar-exit-duration) var(--moretto-sidebar-exit-ease), box-shadow 240ms var(--moretto-sidebar-exit-ease), border-color 220ms var(--moretto-sidebar-exit-ease) !important; will-change: clip-path; } .fi-body[data-moretto-sidebar][data-moretto-sidebar] .fi-main-sidebar.fi-sidebar[data-moretto-expanded='true'] { clip-path: inset(0 0 0 0); transition: clip-path var(--moretto-sidebar-reveal-duration) var(--moretto-sidebar-reveal-ease), box-shadow 330ms var(--moretto-sidebar-reveal-ease), border-color 300ms var(--moretto-sidebar-reveal-ease) !important; } .fi-body[data-moretto-sidebar][data-moretto-sidebar] .fi-main-sidebar.fi-sidebar .fi-sidebar-group { row-gap: 0 !important; transition: row-gap 240ms var(--moretto-sidebar-exit-ease) !important; } .fi-body[data-moretto-sidebar][data-moretto-sidebar] .fi-main-sidebar.fi-sidebar[data-moretto-expanded='true'] .fi-sidebar-group { row-gap: 0.12rem !important; transition: row-gap 310ms var(--moretto-sidebar-reveal-ease) !important; } .fi-body[data-moretto-sidebar][data-moretto-sidebar] .fi-main-sidebar.fi-sidebar .fi-sidebar-group-btn { display: flex !important; box-sizing: border-box; block-size: 0; min-block-size: 0 !important; padding-block: 0 !important; overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(-0.25rem); pointer-events: none; transition: block-size 240ms var(--moretto-sidebar-exit-ease), min-block-size 240ms var(--moretto-sidebar-exit-ease), padding-block 240ms var(--moretto-sidebar-exit-ease), opacity 180ms var(--moretto-sidebar-exit-ease), transform 240ms var(--moretto-sidebar-exit-ease), visibility 0s linear 180ms !important; } .fi-body[data-moretto-sidebar][data-moretto-sidebar] .fi-main-sidebar.fi-sidebar[data-moretto-expanded='true'] .fi-sidebar-group-btn { block-size: 1.85rem; min-block-size: 1.85rem !important; padding-block: 0.26rem !important; opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; transition: block-size 310ms var(--moretto-sidebar-reveal-ease), min-block-size 310ms var(--moretto-sidebar-reveal-ease), padding-block 310ms var(--moretto-sidebar-reveal-ease), opacity 240ms ease-out, transform 310ms var(--moretto-sidebar-reveal-ease), visibility 0s linear 0s !important; } html[dir='rtl'] .fi-body[data-moretto-sidebar][data-moretto-sidebar] .fi-main-sidebar.fi-sidebar { clip-path: inset( 0 0 0 calc(100% - var(--moretto-ds03-sidebar-collapsed, 3.75rem)) ); } html[dir='rtl'] .fi-body[data-moretto-sidebar][data-moretto-sidebar] .fi-main-sidebar.fi-sidebar[data-moretto-expanded='true'] { clip-path: inset(0 0 0 0); } .fi-body[data-moretto-sidebar][data-moretto-sidebar] .fi-main-sidebar.fi-sidebar :is( .fi-sidebar-group-label, .fi-sidebar-group-collapse-btn, .fi-sidebar-item-label, .fi-sidebar-item-badge-ctn, .fi-sidebar-database-notifications-btn-label, .fi-sidebar-database-notifications-btn-badge-ctn ) { transition: opacity 180ms var(--moretto-sidebar-exit-ease), transform 240ms var(--moretto-sidebar-exit-ease) !important; } .fi-body[data-moretto-sidebar][data-moretto-sidebar] .fi-main-sidebar.fi-sidebar[data-moretto-expanded='false'] :is( .fi-sidebar-group-label, .fi-sidebar-group-collapse-btn, .fi-sidebar-item-label, .fi-sidebar-item-badge-ctn, .fi-sidebar-database-notifications-btn-label, .fi-sidebar-database-notifications-btn-badge-ctn ) { opacity: 0 !important; transform: translateX(-8px) !important; transition-delay: 0ms !important; } .fi-body[data-moretto-sidebar][data-moretto-sidebar] .fi-main-sidebar.fi-sidebar[data-moretto-expanded='true'] :is( .fi-sidebar-group-label, .fi-sidebar-group-collapse-btn, .fi-sidebar-item-label, .fi-sidebar-item-badge-ctn, .fi-sidebar-database-notifications-btn-label, .fi-sidebar-database-notifications-btn-badge-ctn ) { opacity: 1 !important; transform: translateX(0) !important; transition: opacity 240ms ease-out, transform 310ms var(--moretto-sidebar-reveal-ease) !important; transition-delay: 85ms !important; } .fi-body[data-moretto-sidebar][data-moretto-sidebar] .fi-main-sidebar.fi-sidebar .fi-sidebar-nav { width: 100% !important; } } @media (min-width: 64rem) and (prefers-reduced-motion: reduce) { html:not([data-moretto-smooth-scroll='on']) .fi-body[data-moretto-sidebar][data-moretto-sidebar] .fi-main-sidebar.fi-sidebar, html:not([data-moretto-smooth-scroll='on']) .fi-body[data-moretto-sidebar][data-moretto-sidebar] .fi-main-sidebar.fi-sidebar .fi-sidebar-nav, html:not([data-moretto-smooth-scroll='on']) .fi-body[data-moretto-sidebar][data-moretto-sidebar] .fi-main-sidebar.fi-sidebar :is( .fi-sidebar-group, .fi-sidebar-group-btn, .fi-sidebar-group-label, .fi-sidebar-group-collapse-btn, .fi-sidebar-item-label, .fi-sidebar-item-badge-ctn, .fi-sidebar-database-notifications-btn-label, .fi-sidebar-database-notifications-btn-badge-ctn, .fi-sidebar-item-icon ) { transition: none !important; } } /* ========================================================================== DS-03.10 · SALIDA SUAVE DEL SIDEBAR Ajusta únicamente el cierre: evita el snap final y sincroniza textos/panel. La apertura, geometría, stacking y comportamiento funcional no cambian. ========================================================================== */ @media (min-width: 64rem) { .fi-body[data-moretto-sidebar][data-moretto-sidebar] { --moretto-sidebar-exit-duration: 380ms; --moretto-sidebar-exit-ease: cubic-bezier(0.22, 1, 0.36, 1); } .fi-body[data-moretto-sidebar][data-moretto-sidebar] .fi-main-sidebar.fi-sidebar[data-moretto-expanded='false'] { clip-path: inset( 0 calc(100% - var(--moretto-ds03-sidebar-collapsed, 3.75rem)) 0 0 ) !important; transition: clip-path var(--moretto-sidebar-exit-duration) var(--moretto-sidebar-exit-ease), box-shadow 320ms var(--moretto-sidebar-exit-ease), border-color 300ms var(--moretto-sidebar-exit-ease) !important; } html[dir='rtl'] .fi-body[data-moretto-sidebar][data-moretto-sidebar] .fi-main-sidebar.fi-sidebar[data-moretto-expanded='false'] { clip-path: inset( 0 0 0 calc(100% - var(--moretto-ds03-sidebar-collapsed, 3.75rem)) ) !important; } .fi-body[data-moretto-sidebar][data-moretto-sidebar] .fi-main-sidebar.fi-sidebar[data-moretto-expanded='false'] :is( .fi-sidebar-group-label, .fi-sidebar-group-collapse-btn, .fi-sidebar-item-label, .fi-sidebar-item-badge-ctn, .fi-sidebar-database-notifications-btn-label, .fi-sidebar-database-notifications-btn-badge-ctn ) { opacity: 0 !important; transform: translateX(-4px) !important; transition: opacity 260ms ease-out, transform 330ms var(--moretto-sidebar-exit-ease) !important; transition-delay: 0ms !important; } .fi-body[data-moretto-sidebar][data-moretto-sidebar] .fi-main-sidebar.fi-sidebar[data-moretto-expanded='false'] .fi-sidebar-group { row-gap: 0 !important; transition: row-gap 320ms var(--moretto-sidebar-exit-ease) !important; } .fi-body[data-moretto-sidebar][data-moretto-sidebar] .fi-main-sidebar.fi-sidebar[data-moretto-expanded='false'] .fi-sidebar-group-btn { block-size: 0; min-block-size: 0 !important; padding-block: 0 !important; opacity: 0; visibility: hidden; transform: translateY(-0.12rem); pointer-events: none; transition: block-size 330ms var(--moretto-sidebar-exit-ease), min-block-size 330ms var(--moretto-sidebar-exit-ease), padding-block 330ms var(--moretto-sidebar-exit-ease), opacity 250ms ease-out, transform 330ms var(--moretto-sidebar-exit-ease), visibility 0s linear 250ms !important; } } /* ========================================================= RESPONSIVE OVERRIDES ========================================================= */ @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .fi-topbar { background: rgb(255 255 255 / .98) !important; } } @media (max-width: 1024px) { .fi-sidebar { box-shadow: 18px 0 45px -28px rgb(0 0 0 / .65) !important; } .fi-main { padding-top: 1.25rem !important; padding-inline: 1rem !important; } .fi-topbar-ctn { padding: .45rem .45rem 0 !important; } .fi-topbar { min-height: 3.65rem !important; border-radius: .85rem !important; } .fi-header-heading { font-size: 1.38rem !important; } } @media (max-width: 640px) { .fi-body { background-size: auto, 32px 32px, 32px 32px !important; } .fi-topbar { background: linear-gradient(90deg, rgb(243 108 33 / .11), transparent 42%), rgb(255 255 255 / .91) !important; } .fi-main { padding-top: 1.15rem !important; padding-inline: .75rem !important; } .fi-header-heading { font-size: 1.55rem !important; } .fi-header-heading::after { width: 2.5rem; margin-top: .4rem; } .fi-topbar button, .fi-topbar a, .fi-tabs-item { min-width: 2.75rem; min-height: 2.75rem !important; } .fi-tabs { padding-bottom: .5rem !important; } .moretto-appearance-panel { position: fixed; top: 4.65rem; right: .65rem; left: .65rem; width: auto; } .fi-header { margin-bottom: .75rem !important; } .fi-header-subheading { font-size: .76rem !important; } } /* PERF-03 END: public/css/moretto-admin-shell.css */ /* PERF-03 BEGIN: public/css/moretto-admin-components.css */ /* * Moretto Admin Components v3 * Canon visual: POS aprobado. * Scope: componentes globales del panel Filament, excepto el POS. * * Objetivo UI-03: * - Unificar controles, tablas, tabs, superficies y feedback. * - Mantener layouts y lógica de cada Resource intactos. * - No introducir animaciones globales que compitan con Livewire. */ /* -------------------------------------------------------------------------- Scope / baseline -------------------------------------------------------------------------- */ .fi-body:not([data-moretto-pos]) { --mtt-control-height: 3.25rem; --mtt-control-height-sm: 2.2rem; --mtt-row-hover: color-mix(in srgb, var(--ui-accent) 3.2%, var(--ui-surface)); --mtt-selected-bg: color-mix(in srgb, var(--ui-accent) 8%, var(--ui-surface)); --mtt-modal-overlay: rgb(15 17 20 / 0.46); } .fi-body:not([data-moretto-pos]) :is( button, input, select, textarea, summary ) { font-family: var(--ui-font-family) !important; } .fi-body:not([data-moretto-pos]) :is( button, a, summary, input, select, textarea ) { -webkit-tap-highlight-color: transparent; } .fi-body:not([data-moretto-pos]) :is( .fi-btn, .fi-tabs-item, .fi-icon-btn, .fi-dropdown-list-item ) { transition: background-color var(--ui-motion-fast) var(--ui-ease-standard), border-color var(--ui-motion-fast) var(--ui-ease-standard), color var(--ui-motion-fast) var(--ui-ease-standard), box-shadow var(--ui-motion-fast) var(--ui-ease-standard), transform 90ms ease !important; } .fi-body:not([data-moretto-pos]) :is( .fi-btn, .fi-tabs-item, .fi-icon-btn, .fi-dropdown-list-item ):active { transform: translateY(1px); } /* -------------------------------------------------------------------------- Sections / cards -------------------------------------------------------------------------- */ .fi-body:not([data-moretto-pos]) :is( .fi-section, .fi-in-entry-wrp, .fi-sc-tabs ) { border: 1px solid var(--ui-card-border) !important; border-radius: var(--ui-card-radius) !important; background: var(--ui-card-bg) !important; background-image: none !important; box-shadow: var(--ui-card-shadow) !important; } .fi-body:not([data-moretto-pos]) .fi-section { overflow: hidden; } .fi-body:not([data-moretto-pos]) .fi-section-header { border-bottom-color: var(--ui-border) !important; background: var(--ui-surface) !important; box-shadow: none !important; } .fi-body:not([data-moretto-pos]) .fi-section-header-heading { color: var(--ui-text) !important; font-weight: 700 !important; letter-spacing: -0.012em; } .fi-body:not([data-moretto-pos]) .fi-section-header-description { color: var(--ui-text-muted) !important; font-weight: 400 !important; } .fi-body:not([data-moretto-pos]) .fi-section-collapse-btn { color: var(--ui-text-muted) !important; border-radius: var(--ui-radius-control) !important; } .fi-body:not([data-moretto-pos]) .fi-section-collapse-btn:hover { color: var(--ui-text) !important; background: var(--ui-surface-muted) !important; } /* -------------------------------------------------------------------------- Forms / inputs — MIGRADO A moretto-control-system-v2.css Owner exclusivo y canónico de inputs, wrappers, selects, textareas, labels, helpers, checkbox, radio y toggle. -------------------------------------------------------------------------- */ .fi-body:not([data-moretto-pos]) .fi-fo-field-wrp { min-width: 0; } /* Fieldsets / builders / repeaters: less nested-card visual noise. */ .fi-body:not([data-moretto-pos]) :is( .fi-fo-repeater-item, .fi-fo-builder-item, .fi-fo-key-value ) { border-color: var(--ui-border) !important; border-radius: var(--ui-radius-card) !important; background: var(--ui-surface-soft) !important; box-shadow: none !important; } /* -------------------------------------------------------------------------- File uploads / FilePond — OWNER CANÓNICO de la geometría de carga. Superficie, altura, padding, borde, radius, tipografía, icono, drag-over/hover, preview y dark mode de `.fi-fo-file-upload` y de su subtree FilePond: `.filepond--root`, `--panel-root`, `--drop-label`, `--item-panel`, `--file-action-button` y `--image-preview`. Excepciones fuera de este owner: moretto-admin-products.css (aspect-ratio, logo/avatar, múltiples archivos) y moretto-admin-financial-transfers.css (comprobante compacto dentro del modal). El color de estado de FilePond (progreso/error) no se sobrescribe. POS excluido con el mismo guard del panel. -------------------------------------------------------------------------- */ .fi-body:not([data-moretto-pos]) .fi-fo-file-upload { gap: var(--ui-control-gap) !important; color: var(--ui-text) !important; font-size: var(--ui-upload-font-size) !important; line-height: 1.25 !important; } .fi-body:not([data-moretto-pos]) .fi-fo-file-upload-error-message { font-size: var(--ui-field-helper-font-size) !important; font-weight: var(--ui-field-helper-font-weight) !important; line-height: 1.2 !important; } /* Zona de carga: una sola superficie, con borde discreto y sin sombra. */ .fi-body:not([data-moretto-pos]) .filepond--root { min-height: var(--ui-upload-min-height) !important; margin: 0 !important; border-radius: var(--ui-radius-control) !important; background: transparent !important; box-shadow: none !important; font-family: inherit !important; } .fi-body:not([data-moretto-pos]) .filepond--panel-root { min-height: var(--ui-upload-min-height) !important; border: 1px dashed var(--ui-border) !important; border-radius: var(--ui-radius-control) !important; background: var(--ui-surface-soft) !important; box-shadow: none !important; } .fi-body:not([data-moretto-pos]) .filepond--drop-label { min-height: var(--ui-upload-min-height) !important; padding: var(--mtt-space-2) var(--mtt-space-3) !important; color: var(--ui-text-muted) !important; font-size: var(--ui-upload-font-size) !important; font-weight: var(--ui-font-weight-regular) !important; line-height: 1.25 !important; } .fi-body:not([data-moretto-pos]) .filepond--drop-label label { color: var(--ui-text-muted) !important; font-size: var(--ui-upload-font-size) !important; font-weight: var(--ui-font-weight-regular) !important; line-height: 1.25 !important; } .fi-body:not([data-moretto-pos]) .filepond--label-action { color: var(--ui-accent) !important; font-size: var(--ui-upload-font-size) !important; font-weight: var(--ui-font-weight-bold) !important; text-decoration: none !important; } /* Items: nombre del archivo en texto principal, estado y peso en helper. */ .fi-body:not([data-moretto-pos]) .filepond--file-info-main { font-size: var(--ui-upload-font-size) !important; line-height: 1.2 !important; } .fi-body:not([data-moretto-pos]) :is( .filepond--file-info-sub, .filepond--file-status-main, .filepond--file-status-sub ) { font-size: var(--ui-field-helper-font-size) !important; line-height: 1.2 !important; } .fi-body:not([data-moretto-pos]) .filepond--item-panel { border-radius: var(--ui-radius-control) !important; box-shadow: none !important; } .fi-body:not([data-moretto-pos]) .filepond--file-action-button { width: var(--ui-upload-icon-size) !important; height: var(--ui-upload-icon-size) !important; border-radius: var(--ui-radius-control-sm) !important; background: var(--ui-surface-muted) !important; color: var(--ui-text) !important; box-shadow: none !important; } .fi-body:not([data-moretto-pos]) .filepond--file-action-button:is(:hover, :focus-visible) { background: var(--ui-surface) !important; color: var(--ui-accent) !important; } /* Preview proporcional; el recorte circular de avatares queda en Filament. */ .fi-body:not([data-moretto-pos]) .filepond--image-preview { border-radius: var(--ui-radius-control) !important; background: var(--ui-surface-muted) !important; object-fit: contain !important; } /* Drag-over / hover / focus: perceptibles y sutiles. */ .fi-body:not([data-moretto-pos]) :is(.filepond--root, .filepond--hopper)[data-hopper-state='drag-over'] .filepond--panel-root { border-color: var(--ui-accent) !important; background: var(--ui-surface-muted) !important; } .fi-body:not([data-moretto-pos]) .filepond--root:focus-within .filepond--panel-root { border-color: var(--ui-accent) !important; box-shadow: var(--ui-focus-ring) !important; } @media (hover: hover) and (pointer: fine) { .fi-body:not([data-moretto-pos]) .filepond--panel-root:hover { border-color: var(--ui-border-hover) !important; background: var(--ui-surface-muted) !important; } } /* -------------------------------------------------------------------------- Buttons / actions -------------------------------------------------------------------------- */ .fi-body:not([data-moretto-pos]) .fi-btn { min-height: var(--mtt-control-height-sm) !important; border-radius: var(--ui-button-radius) !important; border-width: 1px !important; box-shadow: none !important; font-size: 0.78rem !important; font-weight: 700 !important; letter-spacing: -0.005em; } .fi-body:not([data-moretto-pos]) .fi-btn.fi-size-md, .fi-body:not([data-moretto-pos]) .fi-btn:not(.fi-size-sm):not(.fi-size-lg) { padding-inline: 0.9rem !important; } .fi-body:not([data-moretto-pos]) .fi-btn-color-primary { border-color: var(--ui-button-primary-bg) !important; background: var(--ui-button-primary-bg) !important; background-image: none !important; color: var(--ui-button-primary-text) !important; } .fi-body:not([data-moretto-pos]) .fi-btn-color-primary:hover { border-color: var(--ui-button-primary-bg-hover) !important; background: var(--ui-button-primary-bg-hover) !important; } .fi-body:not([data-moretto-pos]) .fi-btn-color-gray { border-color: var(--ui-border) !important; background: var(--ui-surface) !important; background-image: none !important; color: var(--ui-text) !important; } .fi-body:not([data-moretto-pos]) .fi-btn-color-gray:hover { border-color: var(--ui-border-strong) !important; background: var(--ui-surface-muted) !important; } .fi-body:not([data-moretto-pos]) :is( .fi-btn-color-danger, .fi-btn-color-warning, .fi-btn-color-success, .fi-btn-color-info ) { background-image: none !important; box-shadow: none !important; } .fi-body:not([data-moretto-pos]) .fi-icon-btn { border-radius: var(--ui-radius-control) !important; color: var(--ui-text-muted) !important; } .fi-body:not([data-moretto-pos]) .fi-icon-btn:hover { background: var(--ui-surface-muted) !important; color: var(--ui-text) !important; } .fi-body:not([data-moretto-pos]) :is(.fi-btn, .fi-icon-btn):focus-visible { outline: none !important; box-shadow: 0 0 0 3px var(--ui-focus-ring) !important; } .fi-body:not([data-moretto-pos]) .fi-btn[disabled], .fi-body:not([data-moretto-pos]) .fi-btn[aria-disabled="true"] { opacity: 0.48 !important; cursor: not-allowed !important; transform: none !important; } /* -------------------------------------------------------------------------- Tabs / segmented controls — OWNER CANÓNICO del chrome genérico de tabs Filament (.fi-tabs / .fi-tabs-item / .fi-tabs-item-label / .fi-sc-tabs). Aquí viven altura, tipografía, padding, gap, activo, hover/focus, indicador, overflow, separación y dark mode. Excepciones fuera de este owner: moretto-resources.css (wrapping responsive), moretto-admin-shell.css (touch target móvil), y los recursos que conservan distribución/composición propia (moretto-admin-products.css, moretto-admin-quotations.css). -------------------------------------------------------------------------- */ .fi-body:not([data-moretto-pos]) .fi-tabs { display: flex; gap: 0.2rem !important; width: fit-content; max-width: 100%; padding: 0.2rem !important; border: 1px solid var(--ui-border) !important; border-radius: calc(var(--ui-radius-control) + 0.15rem) !important; background: var(--ui-surface-soft) !important; box-shadow: none !important; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .fi-body:not([data-moretto-pos]) .fi-tabs::-webkit-scrollbar { display: none; } .fi-body:not([data-moretto-pos]) .fi-tabs-item { flex: 0 0 auto; min-height: 2.05rem !important; padding: 0.38rem 0.72rem !important; border: 1px solid transparent !important; border-radius: var(--ui-radius-control) !important; background: transparent !important; box-shadow: none !important; color: var(--ui-text-muted) !important; font-size: 0.76rem !important; font-weight: 600 !important; white-space: nowrap; } .fi-body:not([data-moretto-pos]) .fi-tabs-item:hover { background: var(--ui-surface-muted) !important; color: var(--ui-text) !important; } .fi-body:not([data-moretto-pos]) .fi-tabs-item[aria-selected="true"] { border-color: color-mix(in srgb, var(--ui-accent) 30%, var(--ui-border)) !important; background: var(--ui-surface) !important; color: var(--ui-accent) !important; box-shadow: 0 1px 2px rgb(24 25 27 / 0.06) !important; } .fi-body:not([data-moretto-pos]) .fi-tabs-item[aria-selected="true"] :is(.fi-icon, .fi-tabs-item-label) { color: inherit !important; font-weight: 700 !important; } .fi-body:not([data-moretto-pos]) .fi-tabs-item-label { font-size: 0.76rem !important; font-weight: 600 !important; } /* Móvil genérico: formularios y pantallas de edición siguen envolviendo tabs para que ninguna pestaña quede fuera del viewport. Las bandejas/listados usan el status rail app-like definido abajo. */ @media (max-width: 640px) { .fi-body:not([data-moretto-pos]) .fi-tabs { flex-wrap: wrap !important; overflow-x: visible !important; } .fi-body:not([data-moretto-pos]) .fi-tabs-item { flex: 1 1 auto; } /* Status rail canónico para ListRecords: chips compactos, desplazamiento horizontal natural y estado activo inequívoco. */ .fi-body:not([data-moretto-pos]) .fi-resource-list-records-page .fi-tabs { display: flex !important; flex-wrap: nowrap !important; width: 100% !important; max-width: 100% !important; gap: 0.38rem !important; padding: 0.12rem 0 0.28rem !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; overflow-x: auto !important; overflow-y: hidden !important; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; scroll-padding-inline: 0.12rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .fi-body:not([data-moretto-pos]) .fi-resource-list-records-page .fi-tabs::-webkit-scrollbar { display: none; } .fi-body:not([data-moretto-pos]) .fi-resource-list-records-page .fi-tabs-item { flex: 0 0 auto !important; min-height: 2.28rem !important; padding: 0.4rem 0.7rem !important; border: 1px solid var(--ui-border) !important; border-radius: 999px !important; background: var(--ui-surface) !important; color: var(--ui-text-muted) !important; font-size: 0.6875rem !important; font-weight: 600 !important; line-height: 1 !important; box-shadow: 0 1px 2px rgb(15 23 42 / 0.025) !important; scroll-snap-align: start; touch-action: manipulation; } .fi-body:not([data-moretto-pos]) .fi-resource-list-records-page .fi-tabs-item:hover { background: var(--ui-surface-soft) !important; color: var(--ui-text) !important; } .fi-body:not([data-moretto-pos]) .fi-resource-list-records-page .fi-tabs-item[aria-selected="true"] { border-color: color-mix(in srgb, var(--ui-accent) 38%, var(--ui-border)) !important; background: color-mix(in srgb, var(--ui-accent) 8%, var(--ui-surface)) !important; color: var(--ui-accent) !important; box-shadow: none !important; } .fi-body:not([data-moretto-pos]) .fi-resource-list-records-page .fi-tabs-item :is(.fi-icon, svg) { width: 0.9rem !important; height: 0.9rem !important; flex: 0 0 auto; } .fi-body:not([data-moretto-pos]) .fi-resource-list-records-page .fi-tabs-item-label { font-size: 0.6875rem !important; font-weight: 600 !important; line-height: 1 !important; } .fi-body:not([data-moretto-pos]) .fi-resource-list-records-page .fi-tabs-item .fi-badge { min-width: 1.18rem !important; min-height: 1.18rem !important; padding-inline: 0.32rem !important; border-radius: 999px !important; font-size: 0.5625rem !important; line-height: 1 !important; } } /* -------------------------------------------------------------------------- Badges / statuses — OWNER CANÓNICO de la geometría de .fi-badge. Filament (.fi-badge / .fi-badge * / .fi-icon). Aquí viven altura, tipografía, peso, padding, radius, icono, gap, alineación, borde/sombra base y dark mode. Solo el color expresa estado de negocio: vive en los recursos. Excepciones fuera de este owner (conservan color semántico, estado exclusivo, composición especial o badge interactivo): moretto-resources.css (View Record), moretto-admin-price-lists.css (tier-link interactivo), moretto-admin-quotations.css (estado Ahora), moretto-admin-inventory.css (modal de ajuste de stock) y moretto-admin-sales-detail.css (trazas/composición de venta). -------------------------------------------------------------------------- */ .fi-body:not([data-moretto-pos]) .fi-badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.22rem !important; min-height: 1.55rem; padding: 0.2rem 0.5rem !important; border: 1px solid transparent !important; border-radius: var(--mtt-radius-full) !important; box-shadow: none !important; font-size: 0.67rem !important; font-weight: 600 !important; line-height: 1 !important; letter-spacing: 0 !important; vertical-align: middle !important; } .fi-body:not([data-moretto-pos]) .fi-badge * { font-size: inherit !important; line-height: inherit !important; } .fi-body:not([data-moretto-pos]) .fi-badge :is(.fi-icon, svg) { width: 0.85rem !important; height: 0.85rem !important; flex: none !important; } /* -------------------------------------------------------------------------- Modals / Dropdowns — MIGRADO A moretto-admin-overlays.css -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- Notifications / alerts — MOVIDO A moretto-admin-overlays.css (owner exclusivo del shell, padding, radius, borde, sombra, título, cuerpo, icono, cierre, hover y dark de .fi-notification*). -------------------------------------------------------------------------- */ /* Validation / callout surfaces: preserve semantic colors, clean the chrome. */ .fi-body:not([data-moretto-pos]) :is( .fi-sc-callout, .fi-fo-field-wrp-error-message, [role="alert"] ) { box-shadow: none !important; } /* -------------------------------------------------------------------------- Empty states — OWNER CANÓNICO Cubre `fi-empty-state` (schemas, RelationManagers, listas y secciones) y la geometría compartida de `fi-ta-empty-state` (tablas). admin-tables.css conserva solo lo estructural de tabla (min-height y responsive). Icono pequeño y discreto, títulos ~11px, descripción 9-10px, padding corto, centrado limpio, sin gradientes, sombras ni cards internas. Light/dark vía tokens; el CTA/footer se hereda de su owner global. -------------------------------------------------------------------------- */ .fi-body:not([data-moretto-pos]) :is( .fi-empty-state, .fi-ta-empty-state ) { padding: var(--ui-empty-state-pad-y) var(--ui-empty-state-pad-x) !important; background: var(--ui-surface) !important; background-image: none !important; box-shadow: none !important; color: var(--ui-text-muted) !important; text-align: center; } .fi-body:not([data-moretto-pos]) :is( .fi-empty-state-icon-bg, .fi-ta-empty-state-icon-bg ) { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: var(--ui-empty-state-icon-size) !important; height: var(--ui-empty-state-icon-size) !important; padding: 0 !important; margin-block-end: var(--ui-empty-state-gap) !important; border-radius: var(--mtt-radius-full) !important; background: var(--ui-accent-soft) !important; background-image: none !important; color: var(--ui-accent) !important; box-shadow: none !important; } .fi-body:not([data-moretto-pos]) :is( .fi-empty-state-icon-bg, .fi-ta-empty-state-icon-bg ) .fi-icon { width: var(--ui-empty-state-glyph-size) !important; height: var(--ui-empty-state-glyph-size) !important; color: var(--ui-accent) !important; } .fi-body:not([data-moretto-pos]) :is( .fi-empty-state-heading, .fi-ta-empty-state-heading ) { margin-block: 0 !important; color: var(--ui-text) !important; font-size: var(--ui-empty-state-heading-size) !important; font-weight: var(--ui-empty-state-heading-weight) !important; line-height: 1.35 !important; letter-spacing: -0.012em; } .fi-body:not([data-moretto-pos]) :is( .fi-empty-state-description, .fi-ta-empty-state-description ) { max-width: var(--ui-empty-state-measure); margin-block-start: var(--ui-empty-state-desc-gap) !important; margin-inline: auto; color: var(--ui-text-muted) !important; font-size: var(--ui-empty-state-desc-size) !important; font-weight: 400 !important; line-height: 1.5 !important; } /* -------------------------------------------------------------------------- Infolists / read-only detail views -------------------------------------------------------------------------- */ .fi-body:not([data-moretto-pos]) .fi-in-entry-wrp { box-shadow: none !important; } .fi-body:not([data-moretto-pos]) :is( .fi-in-entry-wrp-label, .fi-in-text-entry-label ) { color: var(--ui-text-muted) !important; font-size: 0.68rem !important; font-weight: 600 !important; } .fi-body:not([data-moretto-pos]) :is( .fi-in-entry-wrp-state, .fi-in-text-entry ) { color: var(--ui-text) !important; } /* -------------------------------------------------------------------------- Dark mode refinements -------------------------------------------------------------------------- */ html.dark .fi-body:not([data-moretto-pos]) { --mtt-row-hover: color-mix(in srgb, var(--ui-accent) 5%, var(--ui-surface)); --mtt-selected-bg: color-mix(in srgb, var(--ui-accent) 9%, var(--ui-surface)); --mtt-modal-overlay: rgb(0 0 0 / 0.62); } html.dark .fi-body:not([data-moretto-pos]) .fi-tabs-item[aria-selected="true"] { box-shadow: 0 1px 0 rgb(255 255 255 / 0.035) inset !important; } /* -------------------------------------------------------------------------- Responsive density -------------------------------------------------------------------------- */ @media (max-width: 48rem) { .fi-body:not([data-moretto-pos]) { --mtt-control-height: 2.65rem; --mtt-control-height-sm: 2.45rem; } .fi-body:not([data-moretto-pos]) .fi-btn { min-height: 2.45rem !important; } .fi-body:not([data-moretto-pos]) .fi-tabs-item { min-height: 2.35rem !important; padding-inline: 0.75rem !important; } } /* ========================================================================== UI-03.1 — Refined controls ========================================================================== */ .fi-body:not([data-moretto-pos]) .fi-section:has(div.fi-select-input) { overflow: visible !important; } .fi-body:not([data-moretto-pos]) .fi-input-wrp:has(.fi-select-input) :is(.fi-input-wrp-suffix, .fi-input-wrp-prefix, .fi-icon, svg) { color: var(--ui-text-muted) !important; } .fi-body:not([data-moretto-pos]) input.fi-input[type='number'] { appearance: textfield !important; -moz-appearance: textfield !important; } .fi-body:not([data-moretto-pos]) input.fi-input[type='number']::-webkit-inner-spin-button, .fi-body:not([data-moretto-pos]) input.fi-input[type='number']::-webkit-outer-spin-button { margin: 0 !important; -webkit-appearance: none !important; } /* Primary actions: POS-like CTA, without the heavy outlined-button appearance. */ .fi-body:not([data-moretto-pos]) .fi-btn.fi-btn-color-primary { min-height: 2.5rem !important; padding-inline: 1rem !important; border: 1px solid var(--ui-accent) !important; border-radius: 0.7rem !important; background: var(--ui-accent) !important; color: #fff !important; box-shadow: none !important; font-size: 0.8rem !important; font-weight: 700 !important; letter-spacing: -0.01em !important; transition: background-color var(--ui-motion-fast) var(--ui-ease-standard), border-color var(--ui-motion-fast) var(--ui-ease-standard), transform 110ms var(--ui-ease-standard), box-shadow var(--ui-motion-fast) var(--ui-ease-standard) !important; } @media (hover: hover) and (pointer: fine) { .fi-body:not([data-moretto-pos]) .fi-btn.fi-btn-color-primary:hover { border-color: var(--ui-button-primary-bg-hover) !important; background: var(--ui-button-primary-bg-hover) !important; box-shadow: 0 4px 12px color-mix(in srgb, var(--ui-accent) 16%, transparent) !important; transform: translateY(-1px); } } .fi-body:not([data-moretto-pos]) .fi-btn.fi-btn-color-primary:active { box-shadow: none !important; transform: translateY(0) scale(0.985); } .fi-body:not([data-moretto-pos]) .fi-btn.fi-btn-color-primary:focus-visible { outline: 0 !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-accent) 18%, transparent) !important; } /* Per-page selector: one compact control instead of two nested boxes. */ /* ========================================================================== Botones y acciones — MIGRADO A moretto-admin-actions.css (Owner exclusivo) ========================================================================== */ /* ==========================================================================\n UI-03.3 — Pagination size selector\n One quiet toolbar control. No split-box appearance, no hard divider.\n ========================================================================== */ @media (hover: hover) and (pointer: fine) { } /* ========================================================================== UI-03.4 — Filament records-per-page selector Target the real Filament 5 container directly. The label is plain toolbar copy; only the numeric select is an interactive surface. ========================================================================== */ /* Filament may render the "per page" copy as a span, label or generic child. */ /* ========================================================================== UI-03.5 — Refined actions + records-per-page Canon: stable POS-like controls. No hover movement, no oversized capsule. ========================================================================== */ /* Buttons stay physically stable. Feedback is color/contrast only. */ .fi-body:not([data-moretto-pos]) :is(.fi-btn, .fi-icon-btn) { transform: none !important; transition: background-color 120ms var(--ui-ease-standard), border-color 120ms var(--ui-ease-standard), color 120ms var(--ui-ease-standard), box-shadow 120ms var(--ui-ease-standard) !important; } .fi-body:not([data-moretto-pos]) :is(.fi-btn, .fi-icon-btn):is(:hover, :active, :focus-visible) { transform: none !important; } /* Filament 5 primary CTA: aligned with Control System v2 */ .fi-body:not([data-moretto-pos]) :is( .fi-btn.fi-color-primary, .fi-ac-btn-action.fi-color-primary, .fi-btn.fi-btn-color-primary ) { min-height: var(--mtt-v2-control-height-sm, 2.25rem) !important; padding-inline: 0.85rem !important; border: 1px solid transparent !important; border-radius: var(--mtt-v2-control-radius, 0.625rem) !important; background: var(--ui-accent) !important; background-image: none !important; color: #fff !important; box-shadow: none !important; font-size: var(--mtt-v2-control-font-size-sm, 0.75rem) !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: -0.006em !important; } @media (hover: hover) and (pointer: fine) { .fi-body:not([data-moretto-pos]) :is( .fi-btn.fi-color-primary, .fi-ac-btn-action.fi-color-primary, .fi-btn.fi-btn-color-primary ):hover { border-color: transparent !important; background: var(--ui-accent-hover) !important; color: #fff !important; box-shadow: var(--mtt-v2-shadow-accent, none) !important; transform: none !important; } } .fi-body:not([data-moretto-pos]) :is( .fi-btn.fi-color-primary, .fi-ac-btn-action.fi-color-primary, .fi-btn.fi-btn-color-primary ):active { background: color-mix(in srgb, var(--ui-accent) 88%, #000) !important; box-shadow: none !important; } /* Records per page: sentence-case label + a small independent select. */ @media (hover: hover) and (pointer: fine) { } /* ========================================================== UI-03.6 — Records-per-page, compact native control The outer container must never look like an input. ========================================================== */ /* Keep the label secondary and always after the select. */ /* Only the value is an interactive surface. */ /* Use the wrapper's existing select icon if Filament renders one; keep it subtle. */ @media (hover: hover) and (pointer: fine) { } /* ========================================================== UI-03.7 — Records-per-page powered by Slim Select 4.2 The native select remains the Livewire source of truth. ========================================================== */ /* Native Filament wrapper becomes layout-only once Slim Select is active. */ /* Keep Filament's text as a simple secondary label. */ /* Slim Select main control. */ @media (hover: hover) and (pointer: fine) { } /* Dropdown rendered under document.body by Slim Select. */ /* ========================================================== UI-03.8 — Simple records-per-page selector One label + one compact Moretto select. No capsule wrapper. ========================================================== */ @media (hover: hover) and (pointer: fine) { } /* ==========================================================================\n UI-03.9 — Pagination / Choices.js 11.2.3\n Stable library-backed selector. The original Filament select remains the\n Livewire source of truth; Choices owns presentation only.\n ========================================================================== */ /* Choices root */ @media (hover: hover) and (pointer: fine) { } /* Dropdown */ /* Native fallback if Choices fails to load. */ /* PM-02 · Accessible primary CTA contract El naranja Moretto se conserva. El texto oscuro alcanza AA en el CTA. Esta regla vive en el componente global para no repetir correcciones pantalla por pantalla. */ .fi-body:not([data-moretto-pos]) :is( .fi-btn.fi-color-primary, .fi-ac-btn-action.fi-color-primary, .fi-btn.fi-btn-color-primary ) { --text: var(--ui-button-primary-text) !important; --hover-text: var(--ui-button-primary-text) !important; --dark-text: var(--ui-button-primary-text) !important; --dark-hover-text: var(--ui-button-primary-text) !important; color: var(--ui-button-primary-text) !important; } .fi-body:not([data-moretto-pos]) :is( .fi-btn.fi-color-primary, .fi-ac-btn-action.fi-color-primary, .fi-btn.fi-btn-color-primary ):is(:hover, :active, :focus-visible), .fi-body:not([data-moretto-pos]) :is( .fi-btn.fi-color-primary, .fi-ac-btn-action.fi-color-primary, .fi-btn.fi-btn-color-primary ) > :is(.fi-icon, svg) { color: var(--ui-button-primary-text) !important; } /* ========================================================================== UI-03.11 — Close button motion (modal) El cierre de notificaciones vive en moretto-admin-overlays.css. ========================================================================== */ .fi-body:not([data-moretto-pos]) .fi-modal-close-btn { transition: background-color 160ms var(--ui-ease-standard), border-color 160ms var(--ui-ease-standard), color 160ms var(--ui-ease-standard), box-shadow 180ms var(--ui-ease-standard) !important; } .fi-body:not([data-moretto-pos]) .fi-modal-close-btn :is(svg, .fi-icon) { transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), opacity 140ms ease !important; transform-origin: center !important; } @media (hover: hover) and (pointer: fine) { .fi-body:not([data-moretto-pos]) .fi-modal-close-btn:hover { background: var(--ui-surface-muted) !important; color: var(--ui-text) !important; } .fi-body:not([data-moretto-pos]) .fi-modal-close-btn:hover :is(svg, .fi-icon) { transform: rotate(90deg) scale(1.02) !important; } } /* PERF-03 END: public/css/moretto-admin-components.css */