/* * Olthany Manager · UI/UX 2O · public.css * Archivo generado de forma determinista por tools/build-ui-assets.php. * No editar directamente: modifica los archivos fuente y recompila. */ /* source: assets/css/variables.css */ :root{ /* COLORES PRINCIPALES */ --color-primary:#1856F2; --color-primary-light:#839FFF; --color-primary-hover:#1548CC; --color-success:#22C55E; --color-success-hover:#16A34A; --color-warning:#F59E0B; --color-warning-hover:#D97706; --color-danger:#EF4444; --color-danger-hover:#DC2626; --color-info:#0EA5E9; --color-info-hover:#0284C7; --color-orange:#F97316; --color-orange-hover:#EA580C; /* NEUTROS */ --color-black:#1A1A1A; --color-white:#FFFFFF; --color-background:#F5F5F6; --color-text:#1A1A1A; --color-text-muted:#6B7280; --color-gray-100:#F3F4F6; --color-gray-200:#E5E7EB; --color-gray-300:#D1D5DB; --color-gray-400:#9CA3AF; --color-gray-500:#6B7280; --color-gray-600:#4B5563; --color-gray-700:#374151; /* FONDOS */ --color-surface:#FFFFFF; --color-surface-hover:#EDEDF0; --color-primary-bg:#EDEDF0; --color-success-bg:#DCFCE7; --color-warning-bg:#FEF3C7; --color-danger-bg:#FEE2E2; --color-info-bg:#E0F2FE; --color-orange-bg:#FFEDD5; /* BORDES */ --color-border:#E5E7EB; --color-border-light:rgba(15,23,42,.05); --color-border-soft:rgba(15,23,42,.06); /* TIPOGRAFÍA */ --font-title:"Montserrat",sans-serif; --font-body:"Inter",sans-serif; /* ESPACIADO */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; /* DISTRIBUCIÓN */ --sidebar-width:260px; --navbar-height:72px; /* RADIOS */ --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:20px; --radius-round:999px; /* TRANSICIONES */ --transition-fast:.18s ease; --transition:.25s ease; /* SOMBRAS */ --shadow-sm:0 2px 8px rgba(15,23,42,.05); --shadow-md:0 8px 20px rgba(15,23,42,.08); --shadow-lg:0 18px 40px rgba(15,23,42,.12); } /* ========================================================= LENGUAJE VISUAL OLTHANY · FUNDACIÓN CANÓNICA Contrato de migracion: - Estos tokens no sustituyen variables heredadas todavía. - Los componentes los adoptaran de forma progresiva. - Claro y oscuro comparten los mismos nombres semanticos. ========================================================= */ :root { /* Color · superficies y contenido */ --color-bg-app:#f7f8fa; --color-bg-surface:#ffffff; --color-bg-subtle:#f3f4f6; --color-bg-elevated:#ffffff; --color-bg-hover:#f0f2f5; --color-bg-disabled:#eef0f3; --color-fg:#16181d; --color-fg-muted:#5f6570; --color-fg-subtle:#858b96; --color-fg-disabled:#a8adb6; --color-border-subtle:#e7e9ed; --color-border-default:#dfe2e7; --color-border-control:#d3d7de; --color-overlay:rgba(15,18,24,.48); /* Color · identidad y foco */ --color-accent-fg:#0f55d9; --color-accent-emphasis:#1463f3; --color-accent-hover:#0f56dc; --color-accent-muted:#f0f1f3; --color-accent-border:#b8d0ff; --color-focus:#2b6ff7; --color-on-emphasis:#ffffff; --color-control-selected-bg:#16181d; --color-control-selected-fg:#ffffff; --color-control-selected-hover:#30333a; --color-control-checked-bg:#1856F2; --color-control-checked-fg:#ffffff; --color-control-checked-hover:#1856F2; /* Color · estados semanticos */ --color-success-fg:#18794e; --color-success-surface:#edf9f3; --color-success-border:#b7e4cc; --color-warning-fg:#8a5a00; --color-warning-surface:#fff8e6; --color-warning-border:#efd38a; --color-danger-fg:#c43131; --color-danger-surface:#fff1f1; --color-danger-border:#efb8b8; --color-info-fg:#1769aa; --color-info-surface:#eef7ff; --color-info-border:#b8daf5; /* Tipografia */ --font-size-xs:.75rem; --font-size-sm:.8125rem; --font-size-md:.875rem; --font-size-lg:1rem; --font-size-xl:1.125rem; --font-size-2xl:1.5rem; --font-size-3xl:2rem; --font-weight-regular:400; --font-weight-medium:500; --font-weight-semibold:600; --font-weight-bold:700; /* Espaciado */ --space-2xs:.25rem; --space-xs:.375rem; --space-sm:.5rem; --space-md:.75rem; --space-lg:1rem; --space-xl:1.25rem; --space-2xl:1.5rem; --space-3xl:2rem; --space-4xl:2.5rem; --space-5xl:3rem; /* Geometria */ --radius-control:.5rem; --radius-surface:.625rem; --radius-elevated:.75rem; --radius-shell:1rem; --radius-full:999px; --control-height-compact:2rem; --control-height-default:2.25rem; --control-height-large:2.5rem; --control-height-touch:2.75rem; --icon-size-default:1rem; --icon-size-navigation:1.125rem; /* Elevacion */ --shadow-subtle:0 1px 2px rgba(15,18,24,.05); --shadow-floating:0 8px 24px rgba(15,18,24,.10); --shadow-overlay:0 18px 48px rgba(15,18,24,.16); /* Movimiento */ --motion-duration-fast:120ms; --motion-duration-standard:180ms; --motion-duration-slow:240ms; --motion-ease-standard:cubic-bezier(.2,.8,.2,1); /* Capas */ --z-sticky:100; --z-dropdown:300; --z-popover:400; --z-overlay:500; --z-modal:600; --z-toast:700; --z-command:800; } .dark-mode, [data-theme="dark"], [data-public-theme="dark"] { --color-bg-app:#101216; --color-bg-surface:#15181d; --color-bg-subtle:#1a1e24; --color-bg-elevated:#1d2128; --color-bg-hover:#22272f; --color-bg-disabled:#20242a; --color-fg:#f1f3f5; --color-fg-muted:#aeb4bd; --color-fg-subtle:#838b96; --color-fg-disabled:#666e79; --color-border-subtle:#252a32; --color-border-default:#2c323b; --color-border-control:#383f49; --color-overlay:rgba(0,0,0,.62); --color-accent-fg:#7eaeff; --color-accent-emphasis:#1e6be0; --color-accent-hover:#2471e5; --color-accent-muted:#252529; --color-accent-border:#315b9d; --color-focus:#6ea4ff; --color-on-emphasis:#ffffff; --color-control-selected-bg:#f1f3f5; --color-control-selected-fg:#101216; --color-control-selected-hover:#dfe2e7; --color-control-checked-bg:#1856F2; --color-control-checked-fg:#ffffff; --color-control-checked-hover:#1856F2; --color-success-fg:#72d6a2; --color-success-surface:#132b21; --color-success-border:#275a43; --color-warning-fg:#efc66a; --color-warning-surface:#302610; --color-warning-border:#655022; --color-danger-fg:#ff8b8b; --color-danger-surface:#35191b; --color-danger-border:#713237; --color-info-fg:#81c7ff; --color-info-surface:#14283a; --color-info-border:#2c5877; --shadow-subtle:0 1px 2px rgba(0,0,0,.24); --shadow-floating:0 10px 28px rgba(0,0,0,.32); --shadow-overlay:0 20px 56px rgba(0,0,0,.44); } /* FINAL-GLOBAL-COLOR-CORRECTION-01 · convergencia semántica compartida. Manager, sitio público y autenticación usan la misma familia cromática neutral; identidad, foco, selección y estados conservan sus tokens funcionales. */ body[data-ui-page="app"], body[data-ui-page="landing"], body.auth-page { --color-primary: #1856F2; --color-primary-light: #1856F2; --color-primary-hover: #1548CC; --color-info: #1856F2; --color-info-hover: #1548CC; --color-bg-app: #F5F5F6; --color-bg-surface: #FFFFFF; --color-bg-subtle: #F4F4F5; --color-bg-elevated: #FFFFFF; --color-bg-hover: #EDEDF0; --color-bg-disabled: #EBEBEE; --color-bg-input: #FFFFFF; --color-bg-control-hover: #F1F1F3; --color-fg: #171719; --color-fg-muted: #62626B; --color-fg-subtle: #85858E; --color-fg-disabled: #A2A2AA; --color-border-subtle: #E8E8EB; --color-border-default: #DEDEE3; --color-border-control: #CFCFD6; --color-accent-fg: #1856F2; --color-accent-emphasis: #1856F2; --color-accent-hover: #1548CC; --color-accent-muted: #EDEDF0; --color-accent-border: rgba(24,86,242,.52); --color-focus: #1856F2; --color-control-selected-bg: #171719; --color-control-selected-fg: #FFFFFF; --color-control-selected-hover: #2B2B2F; --color-control-checked-bg: #1856F2; --color-control-checked-fg: #FFFFFF; --color-control-checked-hover: #1856F2; --color-info-fg: #1856F2; --color-info-surface: rgba(24,86,242,.08); --color-info-border: rgba(24,86,242,.28); --color-background: var(--color-bg-app); --color-surface: var(--color-bg-surface); --color-surface-hover: var(--color-bg-hover); --color-text: var(--color-fg); --color-text-muted: var(--color-fg-muted); --color-border: var(--color-border-default); --color-border-light: var(--color-border-subtle); --color-border-soft: var(--color-border-subtle); --color-primary-bg: var(--color-accent-muted); } body[data-ui-page="app"].dark-mode, [data-public-theme="dark"] body[data-ui-page="landing"], body.auth-page.dark-mode { --color-bg-app: #0B0B0C; --color-bg-surface: #151516; --color-bg-subtle: #1C1C1F; --color-bg-elevated: #202024; --color-bg-hover: #252529; --color-bg-disabled: #222225; --color-bg-input: #101011; --color-bg-control-hover: #1A1A1C; --color-fg: #F5F5F6; --color-fg-muted: #B0B0B7; --color-fg-subtle: #85858F; --color-fg-disabled: #5F5F66; --color-border-subtle: #242428; --color-border-default: #303035; --color-border-control: #3D3D44; --color-accent-fg: #1856F2; --color-accent-emphasis: #1856F2; --color-accent-hover: #1548CC; --color-accent-muted: #252529; --color-accent-border: rgba(24,86,242,.68); --color-focus: #1856F2; --color-control-selected-bg: #F5F5F6; --color-control-selected-fg: #0B0B0C; --color-control-selected-hover: #DEDEE3; --color-control-checked-bg: #1856F2; --color-control-checked-fg: #FFFFFF; --color-control-checked-hover: #1856F2; --color-success-surface: rgba(34,197,94,.10); --color-success-border: rgba(34,197,94,.28); --color-warning-surface: rgba(234,179,8,.10); --color-warning-border: rgba(234,179,8,.28); --color-danger-surface: rgba(239,68,68,.10); --color-danger-border: rgba(239,68,68,.30); --color-info-fg: #1856F2; --color-info-surface: rgba(24,86,242,.12); --color-info-border: rgba(24,86,242,.34); --shadow-subtle: none; --shadow-floating: 0 10px 28px rgba(0,0,0,.34); --shadow-overlay: 0 24px 64px rgba(0,0,0,.52); --color-background: var(--color-bg-app); --color-surface: var(--color-bg-surface); --color-surface-hover: var(--color-bg-hover); --color-text: var(--color-fg); --color-text-muted: var(--color-fg-muted); --color-border: var(--color-border-default); --color-border-light: var(--color-border-subtle); --color-border-soft: var(--color-border-subtle); --color-gray-100: var(--color-bg-subtle); --color-gray-200: var(--color-border-subtle); --color-gray-300: var(--color-border-default); --color-gray-400: var(--color-fg-subtle); --color-gray-500: var(--color-fg-muted); --color-gray-600: var(--color-fg-muted); --color-gray-700: var(--color-fg); --color-primary-bg: var(--color-accent-muted); } /* source: assets/css/reset.css */ /* REINICIO */ *, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body{ min-height:100vh; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } img, picture, svg, video, canvas{ display:block; max-width:100%; } button, input, textarea, select{ font:inherit; } button{ cursor:pointer; background:none; border:none; } a{ color:inherit; text-decoration:none; } ul, ol{ list-style:none; } table{ border-collapse:collapse; border-spacing:0; } textarea{ resize:vertical; } :focus{ outline:none; } /* source: assets/css/base.css */ /* BASE */ html{ font-size:16px; scroll-behavior:smooth; } body{ font-family:var(--font-body); font-size:15px; font-weight:500; line-height:1.6; color:var(--color-text); background:var(--color-background); text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } /* TYPOGRAPHY */ h1, h2, h3, h4, h5, h6{ margin:0; font-family:var(--font-title); color:var(--color-black); line-height:1.2; letter-spacing:-0.02em; } h1{ font-size:2.25rem; font-weight:700; } h2{ font-size:1.75rem; font-weight:700; } h3{ font-size:1.35rem; font-weight:600; } h4{ font-size:1.15rem; font-weight:600; } h5{ font-size:1rem; font-weight:600; } h6{ font-size:.9rem; font-weight:600; } p{ margin:0; color:var(--color-text); line-height:1.7; } small{ font-size:.85rem; font-weight:500; color:var(--color-gray-500); } strong{ font-weight:600; } /* TEXT */ .text-title{ font-size:15px; font-weight:600; color:var(--color-black); line-height:1.35; } .text-subtitle{ margin-top:2px; font-size:14px; font-weight:500; color:var(--color-text); line-height:1.45; } .text-muted{ font-size:13px; font-weight:500; color:var(--color-gray-500); } .text-caption{ font-size:12px; font-weight:500; color:var(--color-gray-500); text-transform:uppercase; letter-spacing:.04em; } .text-label{ font-size:13px; font-weight:600; color:var(--color-black); } /* LINKS */ a{ color:inherit; text-decoration:none; transition:var(--transition-fast); } /* MEDIA */ img{ display:block; max-width:100%; height:auto; } /* ACCESIBILIDAD GLOBAL */ .skip-link{ position:fixed; top:12px; left:12px; z-index:9999; padding:10px 14px; border-radius:10px; background:var(--color-primary); color:var(--color-white); font-weight:700; box-shadow:var(--shadow-lg); transform:translateY(-160%); } .skip-link:focus{ transform:translateY(0); } .visually-hidden{ position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; } :where( a, button, input, select, textarea, [tabindex]:not([tabindex="-1"]) ):focus-visible{ outline:3px solid rgba(24,86,242,.35); outline-offset:3px; } .main-content:focus{ outline:none; } @media(prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; } } /* source: assets/css/layout.css */ /* BARRA LATERAL */ .sidebar{ position:fixed; top:0; left:0; bottom:0; z-index:1100; width:var(--sidebar-width); height:100dvh; padding:20px; display:flex; flex-direction:column; gap:var(--space-6); overflow:hidden; border-right:1px solid var(--color-border); background:var(--color-white); transition: width var(--motion-duration-standard) var(--motion-ease-standard), transform var(--motion-duration-slow) var(--motion-ease-standard), box-shadow var(--motion-duration-slow) var(--motion-ease-standard); } .sidebar__header{ position:relative; min-height:72px; padding-bottom:var(--space-5); display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--color-border); } .sidebar__logo{ width:100%; display:flex; align-items:center; justify-content:center; } .sidebar__logo-image{ width:60px; max-width:100%; height:auto; display:block; object-fit:contain; } .sidebar__toggle.btn{ flex:0 0 auto; } /* NAVEGACIÓN LATERAL */ .sidebar__nav{ flex:1; min-height:0; display:flex; flex-direction:column; gap:var(--space-2); overflow-x:hidden; overflow-y:auto; overscroll-behavior-y:contain; scrollbar-width:none; -ms-overflow-style:none; } .sidebar__nav::-webkit-scrollbar{ width:0; height:0; } .sidebar__item{ min-height:48px; padding:0 var(--space-4); display:flex; align-items:center; gap:var(--space-3); flex-shrink:0; border-radius:var(--radius-md); color:var(--color-gray-600); font-size:.94rem; font-weight:600; transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease; } .sidebar__item:hover{ color:var(--color-primary); background:var(--color-surface-hover); transform:none; } .sidebar__item--active{ color:var(--color-white); background:var(--color-primary); box-shadow: 0 8px 22px rgba(24,86,242,.20); } .sidebar__item--active:hover{ color:var(--color-white); background:var(--color-primary); transform:none; } .sidebar__item .icon{ width:19px; height:19px; } /* USUARIO EN BARRA LATERAL */ .sidebar__user{ position:relative; margin-top:auto; padding-top:var(--space-4); flex-shrink:0; border-top:1px solid var(--color-border); } .sidebar-user__button{ width:100%; padding:12px; display:flex; align-items:center; gap:var(--space-3); border:none; border-radius:var(--radius-lg); background:transparent; cursor:pointer; transition: background .18s ease; } .sidebar-user__button:hover{ background:var(--color-surface-hover); } .sidebar-user__avatar{ width:42px; height:42px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border-radius:50%; color:var(--color-white); background:var(--color-primary); font-size:1rem; font-weight:700; } .sidebar-user__info{ flex:1; min-width:0; display:flex; flex-direction:column; overflow:hidden; text-align:left; } .sidebar-user__info strong{ overflow:hidden; color:var(--color-text); font-size:.92rem; text-overflow:ellipsis; white-space:nowrap; } .sidebar-user__info small{ margin-top:2px; color:var(--color-gray-500); font-size:.78rem; } .sidebar-user__button>.icon{ width:18px; height:18px; color:var(--color-gray-500); transition: transform .2s ease; } .sidebar__user--open .sidebar-user__button>.icon{ transform:rotate(180deg); } .sidebar-user__dropdown{ position:absolute; left:0; bottom:calc(100% + 10px); z-index:100; width:100%; padding:8px; visibility:hidden; opacity:0; border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-white); box-shadow:var(--shadow-lg); transform:translateY(8px); transition: opacity .18s ease, visibility .18s ease, transform .18s ease; } .sidebar-user__dropdown a{ height:42px; padding:0 12px; display:flex; align-items:center; gap:12px; border-radius:var(--radius-md); color:var(--color-text); font-size:.9rem; transition: background .18s ease, color .18s ease; } .sidebar-user__dropdown a:hover{ color:var(--color-primary); background:var(--color-surface-hover); } .sidebar-user__dropdown a:last-child{ color:var(--color-danger); } .sidebar-user__dropdown a:last-child:hover{ color:var(--color-danger); background:var(--color-danger-bg); } .sidebar__user--open .sidebar-user__dropdown{ visibility:visible; opacity:1; transform:none; } .sidebar-overlay{ position:fixed; inset:0; z-index:1050; width:100%; height:100%; padding:0; visibility:hidden; opacity:0; border:0; background:rgba(15,23,42,.48); backdrop-filter:blur(2px); cursor:pointer; pointer-events:none; transition: opacity .24s ease, visibility .24s ease; } .sidebar-overlay--show{ visibility:visible; opacity:1; pointer-events:auto; } /* APP */ .app{ --sidebar-collapsed-width:72px; min-height:100vh; display:flex; overflow-x:clip; background:var(--color-background); } .app__content{ width:calc(100% - var(--sidebar-width)); min-width:0; min-height:100vh; margin-left:var(--sidebar-width); display:flex; flex:1; flex-direction:column; transition: width var(--motion-duration-standard) var(--motion-ease-standard), margin-left var(--motion-duration-standard) var(--motion-ease-standard); } @media(min-width:993px){ .sidebar.sidebar--collapsed{ width:var(--sidebar-collapsed-width); padding-inline:14px; overflow:visible; } .sidebar.sidebar--collapsed ~ .app__content{ width:calc(100% - var(--sidebar-collapsed-width)); margin-left:var(--sidebar-collapsed-width); } } /* BARRA SUPERIOR */ .navbar{ position:sticky; top:0; z-index:100; width:100%; min-height:80px; padding:0 36px; display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid var(--color-border); background:rgba(255,255,255,.88); backdrop-filter:blur(18px); } .navbar__left, .navbar__right{ min-width:0; display:flex; align-items:center; gap:var(--space-5); } .navbar__left{ flex:1; } .navbar__right{ flex-shrink:0; } .navbar__title{ min-width:0; margin:0; overflow:hidden; color:var(--color-text); font-family:var(--font-title); font-size:1.55rem; font-weight:700; letter-spacing:-.02em; text-overflow:ellipsis; white-space:nowrap; } .navbar-menu-button{ width:42px; height:42px; padding:0; display:none; align-items:center; justify-content:center; flex:0 0 42px; border:1px solid var(--color-border); border-radius:12px; color:var(--color-text); background:var(--color-white); cursor:pointer; transition: background .18s ease, border-color .18s ease, color .18s ease; } .navbar-menu-button:hover{ border-color:var(--color-primary); color:var(--color-primary); background:var(--color-surface-hover); } .navbar-menu-button:focus-visible{ outline:none; box-shadow: 0 0 0 4px rgba(24,86,242,.12); } .navbar-menu-button .icon{ width:20px; height:20px; } .user-placeholder{ min-width:140px; height:46px; padding:0 var(--space-5); display:flex; align-items:center; justify-content:center; border:1px solid var(--color-border); border-radius:999px; color:var(--color-gray-500); background:var(--color-white); font-size:.9rem; font-weight:600; transition: background .18s ease, border-color .18s ease, transform .18s ease; } .user-placeholder:hover{ border-color:var(--color-primary); background:var(--color-surface-hover); transform:translateY(-1px); } /* CONTENIDO */ .main-content{ width:100%; min-width:0; padding:40px; display:flex; flex:1; flex-direction:column; gap:var(--space-7); } /* MODO OSCURO */ .dark-mode .navbar{ background:rgba(15,23,42,.86); } .dark-mode .sidebar-overlay{ background:rgba(2,6,23,.68); } /* ADAPTACIÓN A DISTINTAS PANTALLAS */ @media(max-width:1200px){ .navbar{ padding:0 28px; } .main-content{ padding:32px; } } @media(max-width:992px){ body.sidebar-open{ overflow:hidden; touch-action:none; } .sidebar{ width:min(86vw,320px); transform:translateX(-105%); box-shadow:none; } .sidebar--open{ transform:none; box-shadow: 20px 0 50px rgba(15,23,42,.20); } .navbar-menu-button{ display:flex; } .sidebar__toggle.btn.btn-icon{ width:40px; height:40px; min-height:40px; } .app__content{ width:100%; margin-left:0; } .navbar{ min-height:72px; padding:0 22px; } .main-content{ padding:26px; } } @media(max-width:768px){ .navbar{ min-height:68px; padding:0 18px; gap:14px; } .navbar__left, .navbar__right{ gap:12px; } .navbar__title{ font-size:1.28rem; } .user-placeholder{ min-width:auto; height:40px; padding:0 14px; } .main-content{ padding:20px; gap:24px; } } @media(max-width:576px){ .navbar{ padding:0 14px; } .navbar-menu-button{ width:40px; height:40px; flex-basis:40px; } .navbar__title{ font-size:1.15rem; } .user-placeholder{ display:none; } .main-content{ padding:16px 14px 24px; gap:20px; } } @media(hover:none){ .sidebar__item:hover, .user-placeholder:hover{ transform:none; } } @media(prefers-reduced-motion:reduce){ .sidebar, .app__content, .sidebar-overlay, .sidebar-user__dropdown{ transition:none; } } /* source: assets/css/components.css */ /* BOTONES · AUTORIDAD CANÓNICA C1A */ .btn{ box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; gap:6px; height:var(--control-height-default); padding-inline:14px; border:1px solid transparent; border-radius:var(--radius-control); background:transparent; color:var(--color-fg); box-shadow:none; font-family:var(--font-body); font-size:14px; font-weight:500; line-height:20px; letter-spacing:0; text-align:center; text-decoration:none; white-space:nowrap; cursor:pointer; user-select:none; vertical-align:middle; transition: background-color var(--motion-duration-fast) var(--motion-ease-standard), border-color var(--motion-duration-fast) var(--motion-ease-standard), color var(--motion-duration-fast) var(--motion-ease-standard); } .btn-primary{ background:var(--color-accent-emphasis); color:var(--color-on-emphasis); --btn-loading-color:var(--color-on-emphasis); } .btn-primary:hover:not(:disabled):not([aria-disabled="true"]){ background:var(--color-accent-hover); } .btn-primary:active:not(:disabled):not([aria-disabled="true"]){ background:color-mix(in srgb, var(--color-accent-hover) 88%, var(--color-fg) 12%); border-color:color-mix(in srgb, var(--color-accent-hover) 76%, var(--color-fg) 24%); } .btn-secondary{ background:var(--color-bg-surface); color:var(--color-fg); border-color:var(--color-border-control); --btn-loading-color:var(--color-fg); } .btn-secondary:hover:not(:disabled):not([aria-disabled="true"]){ background:var(--color-bg-hover); border-color:var(--color-border-default); } .btn-secondary:active:not(:disabled):not([aria-disabled="true"]){ background:color-mix(in srgb, var(--color-bg-hover) 86%, var(--color-fg) 14%); border-color:var(--color-border-default); } .btn-ghost{ background:transparent; color:var(--color-fg); border-color:transparent; --btn-loading-color:var(--color-fg); } .btn-ghost:hover:not(:disabled):not([aria-disabled="true"]){ background:var(--color-bg-hover); } .btn-ghost:active:not(:disabled):not([aria-disabled="true"]){ background:color-mix(in srgb, var(--color-bg-hover) 84%, var(--color-fg) 16%); color:var(--color-fg); } .btn-danger{ background:var(--color-danger-surface); color:var(--color-danger-fg); border-color:var(--color-danger-border); --btn-loading-color:var(--color-danger-fg); } .btn-danger:hover:not(:disabled):not([aria-disabled="true"]){ background:color-mix(in srgb, var(--color-danger-surface) 82%, var(--color-danger-fg) 18%); border-color:var(--color-danger-fg); } .btn-danger:active:not(:disabled):not([aria-disabled="true"]){ background:color-mix(in srgb, var(--color-danger-surface) 72%, var(--color-danger-fg) 28%); border-color:var(--color-danger-fg); color:var(--color-danger-fg); } .btn:focus-visible{ outline:2px solid var(--color-focus); outline-offset:2px; box-shadow:none; } .btn:disabled, .btn[aria-disabled="true"]{ background:var(--color-bg-disabled); color:var(--color-fg-disabled); border-color:var(--color-border-subtle); cursor:not-allowed; opacity:1; box-shadow:none; --btn-loading-color:var(--color-fg-disabled); } .btn[aria-disabled="true"]{ pointer-events:none; } .btn-sm{ height:var(--control-height-compact); padding-inline:10px; gap:5px; border-radius:var(--radius-control); font-size:13px; line-height:16px; } .btn-lg{ height:var(--control-height-large); padding-inline:16px; gap:7px; border-radius:var(--radius-control); font-size:14px; line-height:20px; } .btn :is(.icon,svg){ width:16px; height:16px; flex:none; color:currentColor; transition:none; transform:none; } .btn-sm :is(.icon,svg){ width:14px; height:14px; } .btn-lg :is(.icon,svg){ width:18px; height:18px; } .btn.btn--loading, .btn[aria-busy="true"]{ position:relative; cursor:progress; color:transparent; text-shadow:none; --btn-loading-size:14px; } .btn-sm.btn--loading, .btn-sm[aria-busy="true"]{ --btn-loading-size:12px; } .btn-lg.btn--loading, .btn-lg[aria-busy="true"]{ --btn-loading-size:16px; } .btn.btn--loading :is(.icon,svg), .btn[aria-busy="true"] :is(.icon,svg){ opacity:0; } .btn.btn--loading::after, .btn[aria-busy="true"]::after{ content:""; position:absolute; inset-block-start:50%; inset-inline-start:50%; box-sizing:border-box; width:var(--btn-loading-size); height:var(--btn-loading-size); margin-block-start:calc(var(--btn-loading-size) / -2); margin-inline-start:calc(var(--btn-loading-size) / -2); border:2px solid var(--btn-loading-color, var(--color-fg)); border-inline-end-color:transparent; border-radius:50%; pointer-events:none; animation:button-loading-spin .7s linear infinite; } @keyframes button-loading-spin{ to{transform:rotate(360deg);} } @media (max-width:760px), (pointer:coarse){ .btn{ min-height:var(--control-height-touch); } } @media (prefers-reduced-motion:reduce){ .btn{ transition:none; } .btn[aria-busy="true"]::after{ animation:none; border-inline-end-color:var(--btn-loading-color, var(--color-fg)); opacity:.55; } } /* VARIANTES HEREDADAS DE BOTÓN · SOLO COLORES HASTA C1C */ /* TARJETA */ .card{ background:var(--color-white); border:1px solid rgba(15,23,42,.06); border-radius:20px; overflow:hidden; box-shadow: 0 2px 6px rgba(15,23,42,.03), 0 10px 30px rgba(15,23,42,.05); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; } .card:hover{ transform:translateY(-2px); border-color:rgba(24,86,242,.10); box-shadow: 0 8px 20px rgba(15,23,42,.06), 0 20px 40px rgba(15,23,42,.08); } .card__header{ display:flex; align-items:center; justify-content:space-between; padding:22px 28px; border-bottom:1px solid var(--color-border); background:#FCFDFE; } .card__title{ margin:0; font-family:var(--font-title); font-size:1.12rem; font-weight:700; letter-spacing:-.02em; color:var(--color-black); } .card__body{ padding:28px; } /* PÁGINA */ .page-header{ display:flex; justify-content:space-between; align-items:flex-end; gap:var(--space-6); margin-bottom:var(--space-7); } .page-header__content{ display:flex; flex-direction:column; gap:10px; } .page-header__actions{ display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:var(--space-3); flex-shrink:0; } .page-eyebrow{ display:inline-flex; align-items:center; width:max-content; padding:6px 12px; border-radius:999px; background:rgba(24,86,242,.08); color:var(--color-primary); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; } .page-title{ margin:0; font-family:var(--font-title); font-size:2.3rem; font-weight:700; letter-spacing:-.03em; color:var(--color-black); } .page-description{ margin:0; max-width:620px; color:var(--color-gray-500); font-size:.95rem; font-weight:500; line-height:1.7; } /* PANEL PRINCIPAL */ .dashboard{ display: flex; flex-direction: column; gap: var(--space-6); } .stats{ display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); } .stat-card{ padding: var(--space-5); } .stat-card__title{ display: block; margin-bottom: var(--space-3); font-size: .9rem; color: var(--color-gray-500); } .stat-card__value{ font-family: var(--font-title); font-size: 2rem; color: var(--color-primary); } .dashboard-grid{ display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-4); } /* FORMULARIO */ .form-group{ display:flex; flex-direction:column; gap:10px; } .form-label{ display:flex; align-items:center; gap:8px; font-size:.92rem; font-weight:650; letter-spacing:.01em; color:var(--color-title); } .form-control{ width:100%; height:52px; padding:0 16px; border:1px solid rgba(15,23,42,.08); border-radius:16px; background: linear-gradient( 180deg, rgba(255,255,255,.98), rgba(248,250,252,.96) ); color:var(--color-text); font-family:var(--font-body); font-size:.95rem; font-weight:500; box-shadow: inset 0 1px 1px rgba(255,255,255,.75), 0 1px 3px rgba(15,23,42,.03); transition: border-color .22s, background .22s, box-shadow .22s, transform .22s; } .form-control::placeholder{ color:var(--color-text-muted); font-weight:500; opacity:.9; } .form-control:hover{ border-color:rgba(24,86,242,.22); background:#FFFFFF; } .form-control:focus{ outline:none; border-color:var(--color-primary); background:#FFFFFF; transform:translateY(-1px); box-shadow: 0 0 0 4px rgba(24,86,242,.10), 0 8px 22px rgba(24,86,242,.10); } .form-control:disabled{ opacity:.7; cursor:not-allowed; background:#F8FAFC; } .form-control:read-only{ background:#F8FAFC; } .form-actions{ display:flex; align-items:center; justify-content:flex-start; gap:16px; margin-top:30px; } .form-section{ margin-bottom:32px; } .form-section:last-child{ margin-bottom:0; } .form-section__title{ display:flex; align-items:center; gap:10px; margin:0 0 22px; padding-bottom:14px; border-bottom:1px solid var(--color-border); font-family:var(--font-title); font-size:1.08rem; font-weight:700; color:var(--color-title); } .form-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; } .form-grid--full{ grid-column:1 / -1; } textarea.form-control{ min-height:130px; height:auto; padding:14px 16px; line-height:1.7; resize:vertical; } select.form-control{ cursor:pointer; padding-right:42px; appearance:none; background-image: linear-gradient( 45deg, transparent 50%, var(--color-text-muted) 50% ), linear-gradient( 135deg, var(--color-text-muted) 50%, transparent 50% ); background-position: calc(100% - 20px) calc(50% - 2px), calc(100% - 15px) calc(50% - 2px); background-size:6px 6px; background-repeat:no-repeat; } input[type="date"].form-control, input[type="datetime-local"].form-control, input[type="time"].form-control{ cursor:pointer; } input[type="file"].form-control{ padding:10px 14px; cursor:pointer; } input[type="file"].form-control::file-selector-button{ margin-right:14px; padding:8px 14px; border:none; border-radius:10px; background:var(--color-primary); color:#FFFFFF; font-weight:600; cursor:pointer; transition:.2s; } input[type="file"].form-control::file-selector-button:hover{ filter:brightness(.95); } @media(max-width:768px){ .form-grid{ grid-template-columns:1fr; } } /* BARRA DE HERRAMIENTAS DE TABLA */ .table-toolbar{ display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:22px; } .table-toolbar__left{ flex:1; } .table-toolbar__right{ display:flex; gap:12px; } /* BÚSQUEDA DE TABLA */ .table-search::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; } .table-search::-ms-clear{ display:none; } .table-search-group{ position:relative; width:340px; } .table-search{ width:100%; height:46px; padding:0 90px 0 16px; border:1px solid var(--color-border); border-radius:12px; background:var(--color-white); transition:.2s; } .table-search:focus{ outline:none; border-color:var(--color-primary); box-shadow:0 0 0 3px rgba(24,86,242,.12); } .table-search-button{ position:absolute; top:50%; right:8px; transform:translateY(-50%); width:34px; height:34px; display:flex; align-items:center; justify-content:center; border:none; border-radius:10px; background:transparent; cursor:pointer; font-size:15px; transition:all .18s ease; } .table-search-button:hover{ background:var(--color-gray-100); } .table-search-clear{ position:absolute; top:50%; right:46px; transform:translateY(-50%); width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:50%; text-decoration:none; font-size:14px; font-weight:700; color:var(--color-gray-500); transition:all .18s ease; } .table-search-clear:hover{ background:var(--color-gray-100); color:var(--color-danger); transform:translateY(-50%) scale(1.08); } /* TABLA */ .table-container{ overflow:auto; background:var(--color-white); border:1px solid var(--color-border-soft); border-radius:20px; } .table{ width:100%; border-collapse:separate; border-spacing:0; } .table thead{ background:var(--color-surface); } .table th{ padding:18px 22px; text-align:left; white-space:nowrap; font-family:var(--font-title); font-size:.76rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--color-text-muted); border-bottom:1px solid var(--color-border); } .table td{ padding:18px 22px; vertical-align:middle; white-space:nowrap; border-bottom:1px solid var(--color-border-light); color:var(--color-text); } .table tbody tr td:last-child:not(.table-empty){ width:70px; text-align:right; } .table th:nth-child(4), .table td:nth-child(4), .table th:nth-child(5), .table td:nth-child(5){ width:170px; text-align:center; } .table th:nth-child(6), .table td:nth-child(6){ width:140px; } .table tbody tr{ transition: background .18s ease, transform .18s ease; } .table tbody tr:hover{ background:var(--color-surface-hover); } .table tbody tr:last-child td{ border-bottom:none; } /* TABLA DEL PANEL PRINCIPAL */ .table--dashboard{ table-layout:fixed; } .table--dashboard th:nth-child(1), .table--dashboard td:nth-child(1){ width:25% !important; } .table--dashboard th:nth-child(2), .table--dashboard td:nth-child(2){ width:25% !important; } .table--dashboard th:nth-child(3), .table--dashboard td:nth-child(3){ width:25% !important; text-align:center; } .table--dashboard th:nth-child(4), .table--dashboard td:nth-child(4){ width:25% !important; text-align:center; } /* TABLA COMPACTA */ .table--compact th:last-child, .table--compact td:last-child{ width:70px; text-align:right; } .table-col-sm{ width:100px; } .table-col-md{ width:150px; } .table-col-lg{ width:220px; } .table-col-center{ text-align:center !important; } .table-col-right{ text-align:right !important; } /* Si la columna es centrada y contiene un badge */ .table--compact td.table-col-center .table-cell{ align-items:center; } /* CELDA DE TABLA */ .table-cell{ display:flex; flex-direction:column; justify-content:center; gap:5px; } .table-cell--badge{ display:flex; justify-content:center; align-items:center; min-width:90px; } .table-primary{ font-size:.96rem; font-weight:700; color:var(--color-text); line-height:1.35; } .table-secondary{ font-size:.82rem; font-weight:500; color:var(--color-text-muted); line-height:1.45; } .table-number{ color:var(--color-primary); font-weight:700; letter-spacing:.03em; } .table-empty{ padding:40px 24px !important; text-align:left !important; color:var(--color-gray-500); } /* BADGES */ .badge{ display:inline-flex; align-items:center; justify-content:center; min-width:84px; height:30px; padding:0 14px; border-radius:999px; font-size:.78rem; font-weight:700; letter-spacing:.02em; white-space:nowrap; transition:all .18s ease; } .badge--primary{ background:rgba(24,86,242,.10); color:var(--color-primary); } .badge--secondary{ background:var(--color-gray-100); color:var(--color-gray-600); } .badge--success{ background:rgba(34,197,94,.10); color:var(--color-success); } .badge--warning{ background:rgba(245,158,11,.12); color:var(--color-warning); } .badge--danger{ background:rgba(239,68,68,.10); color:var(--color-danger); } /* ACCIONES DE TABLA */ .table-actions{ display:flex; align-items:center; justify-content:flex-end; gap:var(--space-2); } .action-btn{ width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-white); color:var(--color-text); cursor:pointer; transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; } .action-btn:hover{ background:var(--color-surface-hover); border-color:var(--color-primary); color:var(--color-primary); transform:translateY(-1px); } .action-btn:active{ transform:translateY(0); } /* ACTION MENU */ .action-menu{ position:relative; display:inline-block; } .action-menu__button{ width:38px; height:38px; display:flex; align-items:center; justify-content:center; border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-white); color:var(--color-text); cursor:pointer; transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; } .action-menu__button:hover{ background:var(--color-surface-hover); border-color:var(--color-primary); color:var(--color-primary); transform:translateY(-1px); } .action-menu__button:active{ transform:translateY(0); } .action-menu__dropdown{ position:absolute; top:calc(100% + 8px); right:0; min-width:190px; padding:var(--space-2); background:var(--color-white); border:1px solid var(--color-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); display:none; overflow:hidden; z-index:1000; } .action-menu.active .action-menu__dropdown{ display:block; } .action-menu__item{ display:flex; align-items:center; gap:var(--space-3); width:100%; padding:12px 14px; border:none; outline:none; background:transparent; appearance:none; -webkit-appearance:none; text-align:left; cursor:pointer; font:inherit; font-size:.92rem; font-weight:500; color:var(--color-text); text-decoration:none; border-radius:var(--radius-md); transition: background .18s ease, color .18s ease; } .action-menu__item:hover{ background:var(--color-surface-hover); color:var(--color-text); } .action-menu__item--danger{ color:var(--color-danger) !important; } .action-menu__item--danger:hover{ background:var(--color-danger-bg); color:var(--color-danger) !important; } .action-menu__item--success{ color: var(--color-success); } .action-menu__item--success:hover{ background: rgba(34, 197, 94, .08); color: var(--color-success); } .action-menu__divider{ height:1px; margin:var(--space-2) 0; background:var(--color-border); } /* MODAL */ .modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; padding:var(--space-6); z-index:999; } .modal--show{ display:flex; } .modal__overlay{ position:absolute; inset:0; background:rgba(15,23,42,.45); backdrop-filter:blur(4px); } .modal__content{ position:relative; width:100%; max-width:440px; background:var(--color-white); border:1px solid var(--color-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); overflow:hidden; z-index:2; animation:modalIn .18s ease; } .modal__header{ display:flex; align-items:center; justify-content:space-between; padding:var(--space-5); border-bottom:1px solid var(--color-border); background:var(--color-surface); } .modal__title{ margin:0; font-family:var(--font-title); font-size:1.15rem; font-weight:700; color:var(--color-text); } .modal__body{ padding:var(--space-5); color:var(--color-text); line-height:1.65; } .modal__footer{ display:flex; justify-content:flex-end; gap:var(--space-3); padding:var(--space-5); border-top:1px solid var(--color-border); background:var(--color-surface); } @keyframes modalIn{ from{ opacity:0; transform:translateY(8px) scale(.98); } to{ opacity:1; transform:translateY(0) scale(1); } } /* ICONS */ .icon{ width:18px; height:18px; flex-shrink:0; color:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle; transition: transform .18s ease, color .18s ease, opacity .18s ease; } button:not(.btn):hover .icon, a:not(.btn):hover .icon{ transform:scale(1.08); } button:not(.btn):active .icon, a:not(.btn):active .icon{ transform:scale(.94); } .icon--sm{ width:16px; height:16px; } .icon--lg{ width:22px; height:22px; } .icon--xl{ width:26px; height:26px; } /* SHOW */ .show-layout{ display:flex; flex-direction:column; } .show-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; } .show-info{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; } .show-info--4{ grid-template-columns:repeat(4,1fr); } .show-label{ display:block; margin-bottom:6px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--color-gray-500); } .show-value{ margin:0; font-size:15px; font-weight:600; color:var(--color-black); } .show-text{ margin:0; line-height:1.8; color:var(--color-text); } .show-total{ display:flex; justify-content:flex-end; align-items:center; gap:16px; margin-top:24px; padding-top:24px; border-top:1px solid var(--color-border); font-size:1.1rem; font-weight:700; } .show-total strong{ font-family:var(--font-title); font-size:1.45rem; color:var(--color-primary); } /* ESTADO VACÍO */ .empty-state{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-4); padding:56px 32px; text-align:center; } .empty-state__icon{ width:64px; height:64px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--color-surface); color:var(--color-primary); } .empty-state__title{ margin:0; font-family:var(--font-title); font-size:1.15rem; font-weight:700; color:var(--color-text); } .empty-state__text{ max-width:420px; margin:0; color:var(--color-text-muted); line-height:1.7; } .empty-state__actions{ display:flex; gap:var(--space-3); margin-top:var(--space-2); } /* ESTADO VACÍO */ .empty-state{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-4); padding:56px 32px; text-align:center; } .empty-state__icon{ width:64px; height:64px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--color-surface); color:var(--color-primary); } .empty-state__title{ margin:0; font-family:var(--font-title); font-size:1.15rem; font-weight:700; color:var(--color-text); } .empty-state__text{ max-width:420px; margin:0; color:var(--color-text-muted); line-height:1.7; } .empty-state__actions{ display:flex; gap:var(--space-3); margin-top:var(--space-2); } /* TARJETA ESTADÍSTICA */ .stat-card{ display:flex; flex-direction:column; gap:var(--space-4); padding:var(--space-5); } .stat-card__header{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); } .stat-card__title{ margin:0; font-size:.85rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--color-text-muted); } .stat-card__icon{ width:42px; height:42px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-md); background:var(--color-surface); color:var(--color-primary); } .stat-card__value{ margin:0; font-family:var(--font-title); font-size:2rem; font-weight:700; line-height:1; color:var(--color-text); } .stat-card__footer{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); } .stat-card__description{ font-size:.9rem; color:var(--color-text-muted); } .stat-card__trend{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; font-size:.78rem; font-weight:700; } .stat-card__trend--success{ background:var(--color-success-bg); color:var(--color-success); } .stat-card__trend--warning{ background:var(--color-warning-bg); color:var(--color-warning); } .stat-card__trend--danger{ background:var(--color-danger-bg); color:var(--color-danger); } /* TARJETA MÉTRICA */ .metric-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-5); margin-bottom:var(--space-6); } .metric-card{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-5); min-height:150px; padding:var(--space-5); } .metric-card__content{ display:flex; flex-direction:column; gap:var(--space-2); flex:1; min-width:0; overflow:hidden; } .metric-card__label{ margin:0; font-size:.80rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--color-text-muted); } .metric-card__value{ margin:4px 0; font-family:var(--font-title); font-size:1.8rem; font-weight:700; line-height:1.1; white-space:nowrap; } .metric-card__description{ margin-top:auto; font-size:.90rem; line-height:1.6; color:var(--color-text-muted); } .metric-card__icon{ width:58px; height:58px; min-width:58px; min-height:58px; flex:0 0 58px; display:flex; align-items:center; justify-content:center; margin-left:var(--space-3); border-radius:var(--radius-lg); } /* PRINCIPAL */ .metric-card--primary{ border-left:5px solid var(--color-primary); } .metric-card--primary .metric-card__icon{ background:rgba(24,86,242,.10); color:var(--color-primary); } .metric-card--primary .metric-card__value{ color:var(--color-primary); } /* ÉXITO */ .metric-card--success{ border-left:5px solid var(--color-success); } .metric-card--success .metric-card__icon{ background:var(--color-success-bg); color:var(--color-success); } .metric-card--success .metric-card__value{ color:var(--color-success); } /* ADVERTENCIA */ .metric-card--warning{ border-left:5px solid var(--color-warning); } .metric-card--warning .metric-card__icon{ background:var(--color-warning-bg); color:var(--color-warning); } .metric-card--warning .metric-card__value{ color:var(--color-warning); } /* PELIGRO */ .metric-card--danger{ border-left:5px solid var(--color-danger); } .metric-card--danger .metric-card__icon{ background:var(--color-danger-bg); color:var(--color-danger); } .metric-card--danger .metric-card__value{ color:var(--color-danger); } /* AMOUNTS */ .amount-positive{ color:var(--color-success); } .amount-negative{ color:var(--color-danger); } .amount-neutral{ color:var(--color-primary); } /* ADAPTACIÓN A DISTINTAS PANTALLAS */ @media(max-width:1200px){ .metric-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:768px){ .metric-grid{ grid-template-columns:1fr; } } /* TARJETA INFORMATIVA */ .info-list{ display:grid; gap:var(--space-5); } .info-list--2{ grid-template-columns:repeat(2,1fr); } .info-list--3{ grid-template-columns:repeat(3,1fr); } .info-list--4{ grid-template-columns:repeat(4,1fr); } .info-item{ display:flex; flex-direction:column; gap:8px; } .info-item__label{ font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--color-text-muted); } .info-item__value{ font-size:1rem; font-weight:600; color:var(--color-text); line-height:1.45; word-break:break-word; } /* PANEL PRINCIPAL */ .dashboard-actions{ display:flex; flex-direction:column; gap:var(--space-3); } /* ACTIVITY */ .activity-list{ display:flex; flex-direction:column; gap:18px; } .activity-item{ display:flex; align-items:center; gap:16px; padding-bottom:18px; border-bottom:1px solid var(--color-border); } .activity-item:last-child{ padding-bottom:0; border-bottom:none; } .activity-item__icon{ width:42px; height:42px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--color-primary); color:var(--color-white); flex-shrink:0; } .activity-item__content{ flex:1; line-height:1.5; } .activity-item__content small{ color:var(--color-text-muted); } /* ALERTS */ .alert{ --alert-color:var(--color-primary); --alert-bg:rgba(24,86,242,.06); --alert-border:rgba(24,86,242,.16); position:relative; display:flex; align-items:flex-start; gap:18px; padding:18px 22px; margin-bottom:24px; overflow:hidden; border:1px solid var(--alert-border); border-left:4px solid var(--alert-color); border-radius:18px; background:var(--alert-bg); backdrop-filter:blur(18px); color:var(--alert-color); box-shadow: 0 10px 20px rgba(15,23,42,.04), 0 18px 42px rgba(15,23,42,.08); transition: transform .22s, box-shadow .22s, border-color .22s; } .alert:hover{ transform:translateY(-2px); box-shadow: 0 16px 28px rgba(15,23,42,.06), 0 24px 50px rgba(15,23,42,.10); } .alert::before{ content:""; position:absolute; inset:0; background: linear-gradient( 180deg, rgba(255,255,255,.28), transparent 55% ); pointer-events:none; } .alert__icon{ width:46px; height:46px; display:flex; align-items:center; justify-content:center; flex-shrink:0; border-radius:16px; background: color-mix( in srgb, var(--alert-color) 10%, transparent ); color:var(--alert-color); } .alert__content{ flex:1; min-width:0; } .alert__title{ margin:0 0 5px; font-family:var(--font-title); font-size:1rem; font-weight:700; color:inherit; } .alert__text{ margin:0; color:var(--color-text); line-height:1.75; } .alert__list{ margin:0; padding-left:18px; line-height:1.75; color:var(--color-text); } .alert__list li+li{ margin-top:4px; } .alert--success{ --alert-color:var(--color-success); --alert-bg:var(--color-success-bg); --alert-border:rgba(34,197,94,.20); } .alert--danger{ --alert-color:var(--color-danger); --alert-bg:var(--color-danger-bg); --alert-border:rgba(239,68,68,.20); } .alert--warning{ --alert-color:var(--color-warning); --alert-bg:var(--color-warning-bg); --alert-border:rgba(245,158,11,.22); } .alert--info{ --alert-color:var(--color-primary); --alert-bg:rgba(24,86,242,.06); --alert-border:rgba(24,86,242,.20); } /* AVISO EMERGENTE */ .toast-container{ position:fixed; top:24px; right:24px; display:flex; flex-direction:column; gap:16px; width:min(420px,calc(100vw - 32px)); z-index:9999; pointer-events:none; } .toast{ --toast-color:var(--color-primary); --toast-bg:rgba(255,255,255,.94); position:relative; display:flex; align-items:flex-start; gap:18px; padding:18px 22px; overflow:hidden; border:1px solid rgba(255,255,255,.45); border-left:4px solid var(--toast-color); border-radius:20px; background:var(--toast-bg); backdrop-filter:blur(18px); box-shadow: 0 10px 20px rgba(15,23,42,.05), 0 20px 50px rgba(15,23,42,.10); pointer-events:auto; animation:toastIn .32s cubic-bezier(.22,1,.36,1); transition: transform .22s, box-shadow .22s, border-color .22s; } .toast:hover{ transform: translateY(-2px); box-shadow: 0 18px 30px rgba(15,23,42,.08), 0 28px 60px rgba(15,23,42,.12); } .toast::before{ content:""; position:absolute; inset:0; background: linear-gradient( 180deg, rgba(255,255,255,.34), transparent 55% ); pointer-events:none; } .toast__icon{ width:46px; height:46px; display:flex; align-items:center; justify-content:center; flex-shrink:0; border-radius:16px; background: color-mix( in srgb, var(--toast-color) 10%, transparent ); color:var(--toast-color); } .toast__content{ flex:1; min-width:0; } .toast__title{ margin:0 0 5px; font-size:1rem; font-weight:700; color:var(--color-title); } .toast__text{ margin:0; color:var(--color-text); line-height:1.7; word-break:break-word; } .toast__close{ display:flex; align-items:center; justify-content:center; width:34px; height:34px; border:none; border-radius:12px; background:transparent; color:var(--color-text-muted); cursor:pointer; transition: background .2s, color .2s, transform .2s; } .toast__close:hover{ background:rgba(0,0,0,.05); color:var(--toast-color); transform:rotate(90deg); } .toast__progress{ position:absolute; left:0; bottom:0; width:100%; height:4px; background:var(--toast-color); opacity:.92; transform-origin:left; } .toast--success{ --toast-color:var(--color-success); } .toast--danger{ --toast-color:var(--color-danger); } .toast--warning{ --toast-color:var(--color-warning); } .toast--info{ --toast-color:var(--color-primary); } .toast-hide{ animation:toastOut .24s forwards; } @keyframes toastIn{ from{ opacity:0; transform: translateX(24px) translateY(-6px) scale(.96); } to{ opacity:1; transform:none; } } @keyframes toastOut{ to{ opacity:0; transform: translateX(40px) scale(.96); } } @media(max-width:640px){ .toast-container{ top:16px; right:16px; left:16px; width:auto; } .toast{ width:100%; } } /* FILTROS DE REPORTES */ .report-filters{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--space-5); margin-bottom:var(--space-6); } .report-filters .form-group{ flex:1; min-width:220px; } .report-actions{ display:flex; gap:var(--space-3); margin-left:auto; } /* CHART */ .chart-card{ display:flex; flex-direction:column; gap:var(--space-5); } .chart{ position:relative; width:100%; height:340px; padding:var(--space-5); overflow-x:auto; overflow-y:hidden; border:1px solid var(--color-border); border-radius:20px; background:var(--color-white); overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; } .chart-grid{ position:absolute; top:var(--space-5); bottom:var(--space-5); left:var(--space-5); width:calc(100% - (var(--space-5) * 2)); min-width:720px; display:flex; flex-direction:column; justify-content:space-between; pointer-events:none; } .chart-grid span{ border-top:1px dashed var(--color-border); } .chart-bars{ position:absolute; top:var(--space-5); bottom:var(--space-5); left:var(--space-5); width:calc(100% - (var(--space-5) * 2)); min-width:720px; height:calc(100% - (var(--space-5) * 2)); display:flex; align-items:flex-end; justify-content:space-evenly; gap:24px; } .chart-bar{ flex:1; max-width:80px; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; } .chart-bar__value{ width:48px; min-height:8px; background:var(--color-primary); border-radius:12px 12px 0 0; transition:.25s; } .chart-bar:hover .chart-bar__value{ background:var(--color-primary-hover); transform:translateY(-2px); } .chart-bar__label{ margin-top:12px; font-size:.82rem; font-weight:600; text-align:center; } .chart-legend{ display:flex; align-items:center; gap:var(--space-5); flex-wrap:wrap; } .chart-legend__item{ display:flex; align-items:center; gap:var(--space-2); font-size:.9rem; color:var(--color-text-muted); } .chart-legend__color{ width:12px; height:12px; border-radius:50%; background:var(--color-primary); } .switch{ width:56px; height:30px; border:none; border-radius:999px; background:#d1d5db; cursor:pointer; position:relative; transition:.25s; } .switch::before{ content:""; position:absolute; width:24px; height:24px; border-radius:50%; background:#fff; top:3px; left:3px; transition:.25s; } .switch--active{ background:var(--color-primary); } .switch--active::before{ transform:translateX(26px); } /* MODO OSCURO */ .dark-mode{ /* COLORES BASE */ --color-background:#08111D; --color-white:#111B2D; --color-black:#F8FAFC; --color-text:#EAF2FC; --color-text-muted:#91A7C1; /* SUPERFICIES */ --color-surface:#162234; --color-surface-hover:#1C2B42; /* BORDES */ --color-border:#26384F; --color-border-light:#304560; --color-border-soft:#1C2B40; /* GRISES */ --color-gray-100:#162334; --color-gray-200:#1F3046; --color-gray-300:#2C425C; --color-gray-400:#7087A3; --color-gray-500:#8FA6C0; --color-gray-600:#C3D3E5; --color-gray-700:#EEF5FC; /* FONDOS */ --color-primary-bg:rgba(24,86,242,.18); --color-success-bg:rgba(34,197,94,.16); --color-warning-bg:rgba(245,158,11,.16); --color-danger-bg:rgba(239,68,68,.16); --color-info-bg:rgba(14,165,233,.16); --color-orange-bg:rgba(249,115,22,.16); /* SOMBRAS */ --shadow-sm: 0 8px 22px rgba(0,0,0,.22); --shadow-md: 0 18px 45px rgba(0,0,0,.30); --shadow-lg: 0 30px 80px rgba(0,0,0,.42); } .dark-mode body{ background: radial-gradient(circle at top,#16345D 0%,#0C1828 35%,#08111D 100%); color:var(--color-text); } /* BARRA LATERAL */ .dark-mode .sidebar{ background: linear-gradient( 180deg, #0D1727, #0A1423 ); border-right:1px solid var(--color-border); box-shadow: 12px 0 45px rgba(0,0,0,.35); } .dark-mode .sidebar__logo{ color:#FFFFFF; } .dark-mode .sidebar__item{ color:#B8CCE2; border-radius:14px; transition:.22s; } .dark-mode .sidebar__item:hover{ background:#1B2B42; color:#FFFFFF; transform:translateX(4px); } .dark-mode .sidebar__item--active{ background: linear-gradient( 135deg, #1856F2, #3B82F6 ); color:#FFFFFF; box-shadow: 0 12px 30px rgba(24,86,242,.35); } /* BARRA SUPERIOR */ .dark-mode .navbar{ background:rgba(13,23,39,.90); backdrop-filter:blur(18px); border-bottom:1px solid var(--color-border); } .dark-mode .navbar__title{ color:#F8FAFC; } /* PÁGINA */ .dark-mode .page-title{ color:#FFFFFF; } .dark-mode .page-description{ color:#9CB1C8; } .dark-mode .page-eyebrow{ background:rgba(24,86,242,.16); color:#8FBCFF; } /* TARJETAS */ .dark-mode .card{ background: linear-gradient( 180deg, #162234, #101B2C ); border:1px solid var(--color-border); box-shadow: 0 10px 30px rgba(0,0,0,.24), 0 35px 80px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.04); } .dark-mode .card:hover{ border-color:#365173; transform:translateY(-3px); box-shadow: 0 18px 42px rgba(0,0,0,.30), 0 45px 90px rgba(0,0,0,.25), inset 0 1px rgba(255,255,255,.05); } .dark-mode .card__header{ background: linear-gradient( 180deg, #1A2940, #162335 ); border-bottom:1px solid var(--color-border); } .dark-mode .card__title{ color:#F8FAFC; } /* PANEL PRINCIPAL */ .dark-mode .dashboard{ color:var(--color-text); } /* TARJETAS MÉTRICAS */ .dark-mode .metric-card{ background: linear-gradient( 180deg, #162334, #111B2D ); } .dark-mode .metric-card__label{ color:#8CA5BF; } .dark-mode .metric-card__description{ color:#97AEC7; } .dark-mode .metric-card__value{ color:#FFFFFF; } .dark-mode .metric-card__icon{ box-shadow: inset 0 1px rgba(255,255,255,.05); } /* PRINCIPAL */ .dark-mode .metric-card--primary{ border-left-color:#2E7DFF; } /* ÉXITO */ .dark-mode .metric-card--success{ border-left-color:#22C55E; } /* ADVERTENCIA */ .dark-mode .metric-card--warning{ border-left-color:#F59E0B; } /* PELIGRO */ .dark-mode .metric-card--danger{ border-left-color:#EF4444; } /* TARJETAS ESTADÍSTICAS */ .dark-mode .stat-card{ background:transparent; } .dark-mode .stat-card__title{ color:#8CA5BF; } .dark-mode .stat-card__description{ color:#9CB2C9; } .dark-mode .stat-card__value{ color:#FFFFFF; } .dark-mode .stat-card__icon{ background:#1A2C46; color:#69A6FF; box-shadow: inset 0 1px rgba(255,255,255,.05); } .dark-mode .stat-card__trend{ border:1px solid rgba(255,255,255,.05); } /* FORMULARIO */ .dark-mode .form-label{ color:#F8FAFC; } .dark-mode .form-control{ border-color:rgba(148,163,184,.14); background: linear-gradient( 180deg, #1A2A3F, #152437 ); color:#F8FAFC; box-shadow: inset 0 1px 1px rgba(255,255,255,.03), 0 1px 3px rgba(0,0,0,.22); } .dark-mode .form-control::placeholder{ color:#8FA5BE; opacity:1; } .dark-mode .form-control:hover{ border-color:rgba(24,86,242,.45); background: linear-gradient( 180deg, #1C2E45, #17283D ); } .dark-mode .form-control:focus{ border-color:var(--color-primary); background: linear-gradient( 180deg, #20334D, #1A2C42 ); box-shadow: 0 0 0 4px rgba(24,86,242,.18), 0 10px 26px rgba(24,86,242,.16); } .dark-mode .form-control:disabled{ background:#142132; color:#89A0B7; border-color:rgba(148,163,184,.10); } .dark-mode .form-control:read-only{ background:#142132; } .dark-mode .form-section__title{ color:#F8FAFC; border-bottom-color:rgba(148,163,184,.14); } .dark-mode select.form-control{ background-image: linear-gradient( 45deg, transparent 50%, #8FA5BE 50% ), linear-gradient( 135deg, #8FA5BE 50%, transparent 50% ), linear-gradient( 180deg, #1A2A3F, #152437 ); } .dark-mode input[type="file"].form-control{ background: linear-gradient( 180deg, #1A2A3F, #152437 ); } .dark-mode input[type="file"].form-control::file-selector-button{ background:var(--color-primary); color:#FFFFFF; } .dark-mode input[type="file"].form-control::file-selector-button:hover{ filter:brightness(1.08); } /* BÚSQUEDA DE TABLA */ .dark-mode .table-search{ background:#101B2B; border:1px solid var(--color-border); color:#F8FAFC; } .dark-mode .table-search:focus{ border-color:var(--color-primary); } .dark-mode .table-search-button{ color:#9FB2C8; } .dark-mode .table-search-button:hover{ background:#203149; color:#FFF; } .dark-mode .table-search-clear{ color:#91A6BE; } .dark-mode .table-search-clear:hover{ background:#203149; color:#EF4444; } /* BOTÓN DE ACCIÓN */ .dark-mode .action-btn{ background:#162233; border:1px solid #334A67; color:#C6D7EA; } .dark-mode .action-btn:hover{ background:#21344D; border-color:var(--color-primary); color:#FFF; } /* ACTION MENU */ .dark-mode .action-menu{ position:relative; display:inline-block; } .dark-mode .action-menu__button{ width:38px; height:38px; display:flex; align-items:center; justify-content:center; border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-white); color:var(--color-text); cursor:pointer; transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; } .dark-mode .action-menu__button:hover{ background:var(--color-surface-hover); border-color:var(--color-primary); color:var(--color-primary); transform:translateY(-1px); } .dark-mode .action-menu__button:active{ transform:translateY(0); } .dark-mode .action-menu__dropdown{ position:absolute; top:calc(100% + 8px); right:0; min-width:190px; padding:var(--space-2); background:var(--color-white); border:1px solid var(--color-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); display:none; overflow:hidden; z-index:1000; } .dark-mode .action-menu.active .action-menu__dropdown{ display:block; } .dark-mode .action-menu__item{ display:flex; align-items:center; gap:var(--space-3); width:100%; padding:12px 14px; border:none; outline:none; background:transparent; appearance:none; -webkit-appearance:none; text-align:left; cursor:pointer; font:inherit; font-size:.92rem; font-weight:500; color:var(--color-text); text-decoration:none; border-radius:var(--radius-md); transition: background .18s ease, color .18s ease; } .dark-mode .action-menu__item:hover{ background:var(--color-surface-hover); color:var(--color-text); } .dark-mode .action-menu__item--danger{ color:var(--color-danger) !important; } .dark-mode .action-menu__item--danger:hover{ background:var(--color-danger-bg); color:var(--color-danger) !important; } .dark-mode .action-menu__item--success{ color: var(--color-success); } .dark-mode .action-menu__item--success:hover{ background: rgba(34, 197, 94, .08); color: var(--color-success); } .dark-mode .action-menu__divider{ height:1px; margin:var(--space-2) 0; background:var(--color-border); } /* MODAL */ .dark-mode .modal__overlay{ background:var(--color-overlay); } .dark-mode .modal__content{ background:var(--color-bg-elevated); border:1px solid var(--color-border-default); box-shadow: 0 35px 90px rgba(0,0,0,.50); } .dark-mode .modal__header{ background:var(--color-bg-elevated); border-bottom:1px solid var(--color-border-subtle); } .dark-mode .modal__footer{ background:var(--color-bg-elevated); border-top:1px solid var(--color-border-subtle); } .dark-mode .modal__title{ color:var(--color-fg); } .dark-mode .modal__body{ color:#DCE7F5; } /* SHOW */ .dark-mode .show-label{ color:#8FA7C1; } .dark-mode .show-value{ color:#F8FAFC; } .dark-mode .show-text{ color:#D7E4F2; } .dark-mode .show-total{ border-top:1px solid var(--color-border); } .dark-mode .show-total strong{ color:#6FAEFF; } /* TARJETA INFORMATIVA */ .dark-mode .info-item__label{ color:#8FA7C1; } .dark-mode .info-item__value{ color:#F8FAFC; } /* ESTADO VACÍO */ .dark-mode .empty-state__icon{ background:#1B2B42; color:#6AA7FF; } .dark-mode .empty-state__title{ color:#FFFFFF; } .dark-mode .empty-state__text{ color:#9DB2C8; } /* ACTIVITY */ .dark-mode .activity-item{ border-bottom:1px solid var(--color-border); } .dark-mode .activity-item__icon{ background: linear-gradient( 135deg, var(--color-primary), #4F8DFF ); box-shadow: 0 8px 20px rgba(24,86,242,.30); } .dark-mode .activity-item__content{ color:#EAF2FB; } .dark-mode .activity-item__content small{ color:#94AAC3; } /* ALERTS */ .dark-mode .alert{ border-top-color:rgba(255,255,255,.08); border-right-color:rgba(255,255,255,.08); border-bottom-color:rgba(255,255,255,.08); box-shadow: 0 10px 20px rgba(0,0,0,.22), 0 18px 42px rgba(0,0,0,.38); } .dark-mode .alert::before{ background: linear-gradient( 180deg, rgba(255,255,255,.05), transparent 55% ); } .dark-mode .alert__text, .dark-mode .alert__list{ color:#C8D6E5; } .dark-mode .alert--success{ --alert-bg:rgba(34,197,94,.12); --alert-border:rgba(34,197,94,.24); } .dark-mode .alert--danger{ --alert-bg:rgba(239,68,68,.12); --alert-border:rgba(239,68,68,.24); } .dark-mode .alert--warning{ --alert-bg:rgba(245,158,11,.12); --alert-border:rgba(245,158,11,.26); } .dark-mode .alert--info{ --alert-bg:rgba(24,86,242,.12); --alert-border:rgba(24,86,242,.24); } /* AVISO EMERGENTE */ .dark-mode .toast{ --toast-bg:var(--color-bg-elevated); border-top-color:var(--color-border-default); border-right-color:var(--color-border-default); border-bottom-color:var(--color-border-default); box-shadow: 0 10px 20px rgba(0,0,0,.24), 0 20px 50px rgba(0,0,0,.42); } .dark-mode .toast::before{ background: linear-gradient( 180deg, rgba(255,255,255,.05), transparent 55% ); } .dark-mode .toast__title{ color:var(--color-fg); } .dark-mode .toast__text{ color:var(--color-fg-muted); } .dark-mode .toast__close{ color:var(--color-fg-muted); } .dark-mode .toast__close:hover{ background:rgba(255,255,255,.06); color:var(--toast-color); } /* CHART */ .dark-mode .chart{ background: linear-gradient( 180deg, #162334, #101B2B ); border:1px solid var(--color-border); } .dark-mode .chart-grid span{ border-top:1px dashed #31465F; } .dark-mode .chart-bar__value{ box-shadow: 0 0 18px rgba(24,86,242,.18); } .dark-mode .chart-bar__label{ color:#A9BED4; } .dark-mode .chart-legend__item{ color:#A8BDD4; } /* SWITCH */ .dark-mode .switch{ background:#314760; } .dark-mode .switch::before{ background:#FFFFFF; } .dark-mode .switch--active{ background:var(--color-primary); } /* SCROLLBAR */ .dark-mode ::-webkit-scrollbar{ width:12px; height:12px; } .dark-mode ::-webkit-scrollbar-track{ background:#08111D; } .dark-mode ::-webkit-scrollbar-thumb{ background: linear-gradient( 180deg, #365171, #28415D ); border-radius:999px; border:2px solid #08111D; } .dark-mode ::-webkit-scrollbar-thumb:hover{ background: linear-gradient( 180deg, #497096, #365171 ); } /* SELECTION */ .dark-mode ::selection{ background:rgba(24,86,242,.30); color:#FFFFFF; } /* LINKS */ .dark-mode a:not(.btn){ color:#ffffff; } .dark-mode a:not(.btn):hover{ color:#ffffff; } /* HORIZONTAL RULE */ .dark-mode hr{ border:none; border-top:1px solid var(--color-border); } /* TRANSITIONS */ .dark-mode *:not(.btn):not(.btn *){ transition: background-color .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease; } /* BARRA DE HERRAMIENTAS DE TABLA */ .dark-mode .table-toolbar{ color:var(--color-text); } /* CELDA DE TABLA */ .dark-mode .table-cell{ color:var(--color-text); } .dark-mode .table-primary{ color:#FFFFFF; } .dark-mode .table-secondary{ color:#9DB2C8; } .dark-mode .table-number{ color:#76AFFF; } .dark-mode .table-empty{ color:#91A6BE; } /* PANEL PRINCIPAL */ .dark-mode .dashboard-grid{ color:var(--color-text); } .dark-mode .dashboard-actions{ color:var(--color-text); } /* FILTROS DE REPORTES */ .dark-mode .report-actions{ border-top-color:var(--color-border); } /* AMOUNTS */ .dark-mode .amount-positive{ color:#4ADE80; } .dark-mode .amount-negative{ color:#F87171; } .dark-mode .amount-neutral{ color:#7CB5FF; } /* ENCABEZADO DE PÁGINA */ .dark-mode .page-header{ color:var(--color-text); } .dark-mode .page-header__content{ color:var(--color-text); } .dark-mode .page-header__actions{ color:var(--color-text); } /* LISTA INFORMATIVA */ .dark-mode .info-list{ color:var(--color-text); } /* CUADRÍCULA DE FORMULARIO */ .dark-mode .form-grid{ color:var(--color-text); } /* CONTENEDOR DE TABLA */ .dark-mode .table-container{ box-shadow: inset 0 1px rgba(255,255,255,.03), 0 15px 35px rgba(0,0,0,.18); } /* DROPDOWNS */ .dark-mode .sidebar-user__dropdown{ background: linear-gradient( 180deg, #172436, #111C2D ); border:1px solid var(--color-border); box-shadow: 0 25px 60px rgba(0,0,0,.45); } .dark-mode .sidebar-user__dropdown a{ color:#D8E5F3; } .dark-mode .sidebar-user__dropdown a:hover{ background:#22344C; color:#FFFFFF; } /* ACTION MENU */ .dark-mode .action-menu.active .action-menu__button{ background:#22344B; border-color:#4A6C93; } /* MODAL */ .dark-mode .modal--show{ backdrop-filter:blur(4px); } /* VACÍO */ .dark-mode .table-empty{ background:transparent; } /* TEXT */ .dark-mode strong{ color:#FFFFFF; } .dark-mode b{ color:#FFFFFF; } .dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode h4, .dark-mode h5, .dark-mode h6{ color:#FFFFFF; } .dark-mode p{ color:#D8E5F2; } .dark-mode small{ color:#94AAC3; } /* BORDERS */ .dark-mode .show-total, .dark-mode .activity-item, .dark-mode .form-section__title{ border-color:var(--color-border); } /* FOCO */ .dark-mode *:not(.btn):not(.btn *):focus-visible{ outline:none; box-shadow: 0 0 0 3px rgba(24,86,242,.20); } /* CHART */ .dark-mode .chart-bar:hover .chart-bar__value{ filter:brightness(1.08); } .dark-mode .chart-legend__color{ box-shadow: 0 0 12px rgba(24,86,242,.30); } /* BADGES */ .dark-mode .badge{ backdrop-filter:blur(8px); } .dark-mode .badge--primary{ border-color:rgba(24,86,242,.28); } .dark-mode .badge--success{ border-color:rgba(34,197,94,.24); } .dark-mode .badge--warning{ border-color:rgba(245,158,11,.24); } .dark-mode .badge--danger{ border-color:rgba(239,68,68,.24); } .dark-mode .badge--secondary{ border-color:#344A66; } /* DISABLED */ .dark-mode input:disabled, .dark-mode textarea:disabled, .dark-mode select:disabled, .dark-mode button:not(.btn):disabled{ opacity:.55; cursor:not-allowed; } /* READONLY */ .dark-mode input[readonly], .dark-mode textarea[readonly]{ background:#0C1726; } /* AUTOFILL */ .dark-mode input:-webkit-autofill, .dark-mode input:-webkit-autofill:hover, .dark-mode input:-webkit-autofill:focus{ -webkit-box-shadow: 0 0 0 1000px #0F1A2B inset; -webkit-text-fill-color:#F8FAFC; } /* FECHA */ .dark-mode input[type="date"]{ color:#F8FAFC; } .dark-mode input[type="date"]::-webkit-calendar-picker-indicator{ filter:invert(1); opacity:.85; } /* NUMBER */ .dark-mode input[type="number"]{ color:#F8FAFC; } /* SELECTOR */ .dark-mode select option{ background:#132033; color:#F8FAFC; } /* HR */ .dark-mode hr{ border-top:1px solid var(--color-border); } /* CODE */ .dark-mode code{ background:#1A2A40; color:#7DB5FF; padding:2px 6px; border-radius:6px; } /* PRE */ .dark-mode pre{ background:#0D1727; border:1px solid var(--color-border); } /* LINKS */ .dark-mode a:not(.btn){ transition:.18s; } .dark-mode a:not(.btn):hover{ text-decoration:none; } /* IMAGES */ .dark-mode img{ opacity:.98; } /* TABLA */ .dark-mode .table tbody tr{ position:relative; } .dark-mode .table tbody tr:hover{ box-shadow: inset 3px 0 0 var(--color-primary); } /* TARJETA */ .dark-mode .card{ position:relative; overflow:hidden; } .dark-mode .card::before{ content:""; position:absolute; top:0; left:0; right:0; height:1px; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.08), transparent ); } /* MODAL */ .dark-mode .modal__content::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; border:1px solid rgba(255,255,255,.03); } /* AVISO EMERGENTE */ .dark-mode .toast::before{ content:""; position:absolute; left:0; top:0; width:100%; height:1px; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.08), transparent ); } /* SELECTION */ .dark-mode ::selection{ background:rgba(24,86,242,.30); color:#FFFFFF; } /* SCROLLBAR */ .dark-mode ::-webkit-scrollbar{ width:12px; height:12px; } .dark-mode ::-webkit-scrollbar-track{ background:#08111D; } .dark-mode ::-webkit-scrollbar-thumb{ background: linear-gradient( 180deg, #45637F, #2D445F ); border-radius:999px; border:2px solid #08111D; } .dark-mode ::-webkit-scrollbar-thumb:hover{ background: linear-gradient( 180deg, #5E82A6, #44627F ); } /* FOCO */ .dark-mode *:not(.btn):not(.btn *):focus-visible{ outline:none; box-shadow: 0 0 0 3px rgba(24,86,242,.22); } /* TRANSITIONS */ .dark-mode *:not(.btn):not(.btn *){ transition: background-color .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease, transform .22s ease; } /* ICONS */ .dark-mode .action-menu__item i, .dark-mode .action-menu__item svg{ color:inherit; } /* BOTÓN DE ÉXITO */ /* BOTÓN DE ADVERTENCIA */ /* BOTÓN INFORMATIVO */ /* BOTÓN DE EXPORTACIÓN */ /* BOTÓN DE IMPORTACIÓN */ /* BOTÓN DE BÚSQUEDA */ /* BOTÓN DE FILTRO */ /* BOTÓN DE LIMPIEZA */ /* BOTÓN DE IMPRESIÓN */ /* BOTÓN DE ACTUALIZACIÓN */ /* BOTÓN DE GUARDADO */ /* BOTÓN DE EDICIÓN */ /* BOTÓN DE VISTA */ /* BOTÓN DE PAGO */ /* BOTÓN DE ORDEN */ /* BOTÓN DE COTIZACIÓN */ /* BOTÓN DE REPARACIÓN */ /* LOGIN */ .auth-page{ --auth-primary:var(--color-primary,#1856F2); --auth-primary-hover:var(--color-primary-hover,#1249D4); --auth-title:var(--color-title,#111827); --auth-text:var(--color-text,#334155); --auth-muted:var(--color-text-muted,#7B8494); --auth-border:#DDE3EC; --auth-surface:#FFFFFF; --auth-page:#F5F7FB; min-height:100vh; margin:0; color:var(--auth-text); background:var(--auth-page); font-family:var(--font-body,Inter,sans-serif); } .auth-page *, .auth-page *::before, .auth-page *::after{ box-sizing:border-box; } .auth-page [hidden]{ display:none !important; } .auth-layout{ min-height:100vh; padding:28px; display:flex; align-items:center; justify-content:center; } .auth-shell{ width:min(1040px,100%); min-height:610px; display:grid; grid-template-columns:minmax(0,42%) minmax(0,58%); overflow:hidden; border:1px solid rgba(15,23,42,.07); border-radius:24px; background:var(--auth-surface); box-shadow: 0 24px 60px rgba(37,50,90,.12); } .auth-brand-panel{ position:relative; min-width:0; padding:34px; display:flex; flex-direction:column; overflow:hidden; color:#FFFFFF; background: linear-gradient( 145deg, #202024 0%, #18181B 48%, #111113 100% ); } .auth-brand-panel::after{ content:""; position:absolute; right:-110px; bottom:-120px; width:300px; height:300px; border-radius:50%; background:rgba(255,255,255,.10); } .auth-brand, .auth-brand-panel__content, .auth-brand-panel__footer{ position:relative; z-index:1; } .auth-brand{ display:flex; align-items:center; gap:13px; } .auth-logo{ width:52px; height:52px; flex:0 0 52px; display:flex; align-items:center; justify-content:center; border-radius:15px; background:#FFFFFF; box-shadow: 0 10px 24px rgba(18,30,104,.18); } .auth-logo img{ width:36px; height:36px; object-fit:contain; } .auth-brand__text{ min-width:0; display:flex; flex-direction:column; gap:3px; } .auth-brand__text strong{ font-family:var(--font-title,Montserrat,sans-serif); font-size:1rem; font-weight:700; letter-spacing:-.02em; color:#FFFFFF; } .auth-brand__text small{ font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.68); } .auth-brand-panel__content{ max-width:330px; margin:auto 0; } .auth-brand-panel__eyebrow{ display:block; margin-bottom:12px; font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.68); } .auth-brand-panel h2{ margin:0; font-family:var(--font-title,Montserrat,sans-serif); font-size:clamp(2rem,3vw,2.7rem); font-weight:700; line-height:1.1; letter-spacing:-.045em; color:#FFFFFF; } .auth-brand-panel p{ margin:18px 0 0; font-size:.92rem; line-height:1.7; color:rgba(255,255,255,.74); } .auth-brand-panel__footer{ display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:.75rem; color:rgba(255,255,255,.66); } .auth-system-status{ display:inline-flex; align-items:center; gap:8px; } .auth-system-status>span{ width:7px; height:7px; border-radius:50%; background:#8FF0B5; box-shadow: 0 0 0 4px rgba(143,240,181,.14); } .auth-form-panel{ min-width:0; padding:56px 68px; display:flex; align-items:center; justify-content:center; } .auth-form-panel__content{ width:100%; max-width:420px; } .auth-header{ margin-bottom:30px; } .auth-header__eyebrow{ display:block; margin-bottom:8px; font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--auth-primary); } .auth-header h1{ margin:0; font-family:var(--font-title,Montserrat,sans-serif); font-size:2.1rem; font-weight:700; line-height:1.1; letter-spacing:-.04em; color:var(--auth-title); } .auth-header p{ margin:10px 0 0; font-size:.9rem; line-height:1.6; color:var(--auth-muted); } .auth-feedback:empty{ display:none; } .auth-feedback:not(:empty){ margin-bottom:20px; } .auth-form{ display:flex; flex-direction:column; gap:18px; } .auth-field{ display:flex; flex-direction:column; gap:8px; } .auth-field label{ font-size:.83rem; font-weight:700; color:var(--auth-title); } .auth-control{ position:relative; } .auth-control__icon{ position:absolute; z-index:1; top:50%; left:16px; display:flex; align-items:center; justify-content:center; transform:translateY(-50%); color:#8A94A5; pointer-events:none; } .auth-control__icon .icon{ width:18px; height:18px; } .auth-control input{ width:100%; height:52px; padding:0 16px 0 48px; border:1px solid var(--auth-border); border-radius:12px; outline:none; color:var(--auth-title); background:#FFFFFF; font:inherit; font-size:.9rem; font-weight:500; transition: border-color .18s ease, box-shadow .18s ease; } .auth-control input::placeholder{ color:#A1A9B6; } .auth-control input:hover{ border-color:#C6CFDC; } .auth-control input:focus{ border-color:var(--auth-primary); box-shadow: 0 0 0 4px rgba(24,86,242,.10); } .auth-control--password input{ padding-right:52px; } .auth-password-toggle{ position:absolute; z-index:2; top:50%; right:7px; width:38px; height:38px; padding:0; display:flex; align-items:center; justify-content:center; border:0; border-radius:9px; color:#8A94A5; background:transparent; cursor:pointer; transform:translateY(-50%); transition: color .18s ease, background .18s ease; } .auth-password-toggle:hover{ color:var(--color-fg); background:var(--color-bg-hover); } .auth-password-toggle:focus-visible{ outline:none; box-shadow: 0 0 0 3px rgba(24,86,242,.12); } .auth-password-toggle__show, .auth-password-toggle__hide{ display:flex; align-items:center; justify-content:center; } .auth-password-toggle .icon{ width:18px; height:18px; } .auth-submit{ width:100%; height:52px; margin-top:4px; padding:0 18px; border:0; border-radius:12px; color:#FFFFFF; background:var(--auth-primary); font:inherit; font-size:.9rem; font-weight:700; cursor:pointer; box-shadow: 0 8px 20px rgba(24,86,242,.20); transition: background .18s ease, box-shadow .18s ease, transform .18s ease; } .auth-submit:hover{ background:var(--auth-primary-hover); box-shadow: 0 11px 24px rgba(24,86,242,.25); transform:translateY(-1px); } .auth-submit:active{ transform:none; } .auth-submit:disabled{ opacity:.76; cursor:wait; transform:none; } .auth-submit__default, .auth-submit__loading{ display:flex; align-items:center; justify-content:center; gap:10px; } .auth-submit .icon{ width:18px; height:18px; } .auth-submit__loading .icon{ animation: auth-spin .8s linear infinite; } .auth-footer{ margin-top:26px; display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:.75rem; color:var(--auth-muted); } .auth-footer>span{ display:inline-flex; align-items:center; gap:7px; } .auth-footer .icon{ width:15px; height:15px; color:var(--auth-primary); } .auth-footer small{ font-size:.75rem; } .auth-page button:hover .icon, .auth-page button:active .icon{ transform:none; } .auth-page.dark-mode{ --auth-title:#F8FAFC; --auth-text:#CBD5E1; --auth-muted:#94A3B8; --auth-border:#2C3A50; --auth-surface:#111B2B; --auth-page:#0B1220; } .auth-page.dark-mode .auth-shell{ border-color:rgba(255,255,255,.07); box-shadow: 0 28px 70px rgba(0,0,0,.34); } .auth-page.dark-mode .auth-control input{ color:#F8FAFC; background:#162337; } .auth-page.dark-mode .auth-control input:hover{ border-color:#3B4C66; } .auth-page.dark-mode .auth-control input:focus{ border-color:#4C83FF; } .auth-page.dark-mode .auth-control input::placeholder{ color:#718096; } @keyframes auth-spin{ to{ transform:rotate(360deg); } } @media(max-width:860px){ .auth-shell{ grid-template-columns:minmax(0,38%) minmax(0,62%); } .auth-brand-panel{ padding:28px; } .auth-form-panel{ padding:48px 42px; } } @media(max-width:720px){ .auth-layout{ align-items:flex-start; padding:16px; } .auth-shell{ min-height:0; grid-template-columns:1fr; } .auth-brand-panel{ min-height:230px; padding:24px; } .auth-brand-panel__content{ max-width:520px; margin:52px 0 28px; } .auth-brand-panel h2{ max-width:520px; font-size:1.9rem; } .auth-brand-panel p{ max-width:520px; } .auth-form-panel{ padding:38px 30px 30px; } } @media(max-width:480px){ .auth-layout{ padding:8px; } .auth-shell{ border-radius:18px; } .auth-brand-panel{ min-height:205px; padding:20px; border-radius:0; } .auth-brand__text small, .auth-brand-panel p{ display:none; } .auth-brand-panel__content{ margin:40px 0 20px; } .auth-brand-panel h2{ font-size:1.62rem; } .auth-form-panel{ padding:32px 20px 24px; } .auth-header h1{ font-size:1.8rem; } .auth-footer{ align-items:flex-start; flex-direction:column; gap:7px; } } @media(prefers-reduced-motion:reduce){ .auth-submit__loading .icon{ animation:none; } .auth-page *, .auth-page *::before, .auth-page *::after{ scroll-behavior:auto !important; transition-duration:.01ms !important; } } /* MÓVIL */ @media(max-width:992px){ .page-header{ align-items:flex-start; } .stats{ grid-template-columns:repeat(2,minmax(0,1fr)); } .dashboard-grid, .show-grid{ grid-template-columns:1fr; } .show-info--4, .info-list--3, .info-list--4{ grid-template-columns:repeat(2,minmax(0,1fr)); } .table-toolbar{ flex-wrap:wrap; } .table-toolbar__left{ min-width:min(100%,320px); } .report-filters{ align-items:stretch; } .report-actions{ margin-left:0; } } @media(max-width:768px){ .page-header{ margin-bottom:24px; flex-direction:column; align-items:stretch; gap:18px; } .page-header__content{ gap:8px; } .page-header__actions{ width:100%; display:flex; flex-wrap:wrap; gap:10px; } .page-header__actions .btn{ flex:1 1 180px; } .page-title{ font-size:clamp(1.75rem,8vw,2.15rem); line-height:1.12; } .page-description{ max-width:none; font-size:.9rem; line-height:1.65; } .stats, .metric-grid, .dashboard-grid, .show-grid, .show-info, .show-info--4, .info-list--2, .info-list--3, .info-list--4, .form-grid{ grid-template-columns:1fr; } .card{ border-radius:16px; } .card:hover{ transform:none; } .card__header{ padding:18px 20px; } .card__body{ padding:20px; } .metric-card{ min-height:132px; padding:20px; } .metric-card__icon{ width:50px; height:50px; min-width:50px; min-height:50px; flex-basis:50px; } .metric-card__value{ font-size:1.65rem; } .table-toolbar{ align-items:stretch; flex-direction:column; gap:12px; } .table-toolbar__left, .table-toolbar__right, .table-search-group{ width:100%; } .table-toolbar__right{ display:flex; flex-wrap:wrap; } .table-toolbar__right .btn{ flex:1 1 160px; } .table-container{ width:100%; max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; border-radius:16px; -webkit-overflow-scrolling:touch; } .table{ min-width:720px; } .table--dashboard{ min-width:640px; table-layout:auto; } .table th, .table td{ padding:15px 18px; } .form-actions{ margin-top:24px; align-items:stretch; flex-direction:column; gap:12px; } .form-actions .btn{ width:100%; } .report-filters{ flex-direction:column; gap:16px; } .report-filters .form-group{ width:100%; min-width:0; } .report-actions{ width:100%; flex-wrap:wrap; } .report-actions .btn{ flex:1 1 180px; } .chart{ height:280px; padding:18px; } .chart-grid, .chart-bars{ inset:18px; } .chart-bars{ gap:14px; height:calc(100% - 36px); } .modal{ padding:14px; } .modal__content{ max-height:calc(100dvh - 28px); overflow-y:auto; border-radius:16px; } .modal__header, .modal__body, .modal__footer{ padding:18px; } .alert{ padding:16px; gap:14px; border-radius:15px; } .alert__icon{ width:40px; height:40px; border-radius:12px; } .show-total{ align-items:flex-start; flex-direction:column; gap:8px; } } @media(max-width:576px){ .page-eyebrow{ padding:5px 10px; font-size:11px; } .page-header__actions{ display:grid; grid-template-columns:1fr; } .page-header__actions .btn{ width:100%; } .card__header{ padding:16px; } .card__body{ padding:16px; } .metric-card{ min-height:0; padding:18px; gap:14px; } .metric-card__label{ font-size:.74rem; } .metric-card__description{ font-size:.84rem; } .table-toolbar__right{ display:grid; grid-template-columns:1fr; } .table-toolbar__right .btn{ width:100%; } .table th, .table td{ padding:13px 15px; } .table-primary{ font-size:.9rem; } .table-secondary{ font-size:.78rem; } .modal__footer{ align-items:stretch; flex-direction:column; } .modal__footer form, .modal__footer .btn{ width:100%; } .toast{ padding:16px; gap:12px; border-radius:16px; } .toast__icon{ width:40px; height:40px; border-radius:12px; } .alert{ align-items:flex-start; } .alert__text, .alert__list{ font-size:.88rem; } .empty-state{ padding:40px 18px; } .show-info, .show-info--4{ gap:18px; } } @media(hover:none){ .card:hover, .alert:hover, .toast:hover, .action-btn:hover, .action-menu__button:hover{ transform:none; } } /* MÓVIL */ @media(max-width:992px){ .page-header{ align-items:flex-start; } .stats{ grid-template-columns:repeat(2,minmax(0,1fr)); } .dashboard-grid, .show-grid{ grid-template-columns:1fr; } .show-info--4, .info-list--3, .info-list--4{ grid-template-columns:repeat(2,minmax(0,1fr)); } .table-toolbar{ flex-wrap:wrap; } .table-toolbar__left{ min-width:min(100%,320px); } .report-filters{ align-items:stretch; } .report-actions{ margin-left:0; } } @media(max-width:768px){ .page-header{ margin-bottom:24px; flex-direction:column; align-items:stretch; gap:18px; } .page-header__content{ gap:8px; } .page-header__actions{ width:100%; display:flex; flex-wrap:wrap; gap:10px; } .page-header__actions .btn{ flex:1 1 180px; } .page-title{ font-size:clamp(1.75rem,8vw,2.15rem); line-height:1.12; } .page-description{ max-width:none; font-size:.9rem; line-height:1.65; } .stats, .metric-grid, .dashboard-grid, .show-grid, .show-info, .show-info--4, .info-list--2, .info-list--3, .info-list--4, .form-grid{ grid-template-columns:1fr; } .card{ border-radius:16px; } .card:hover{ transform:none; } .card__header{ padding:18px 20px; } .card__body{ padding:20px; } .metric-card{ min-height:132px; padding:20px; } .metric-card__icon{ width:50px; height:50px; min-width:50px; min-height:50px; flex-basis:50px; } .metric-card__value{ font-size:1.65rem; } .table-toolbar{ align-items:stretch; flex-direction:column; gap:12px; } .table-toolbar__left, .table-toolbar__right, .table-search-group{ width:100%; } .table-toolbar__right{ display:flex; flex-wrap:wrap; } .table-toolbar__right .btn{ flex:1 1 160px; } .table-container{ width:100%; max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; border-radius:16px; -webkit-overflow-scrolling:touch; } .table{ min-width:720px; } .table--dashboard{ min-width:640px; table-layout:auto; } .table th, .table td{ padding:15px 18px; } .form-actions{ margin-top:24px; align-items:stretch; flex-direction:column; gap:12px; } .form-actions .btn{ width:100%; } .report-filters{ flex-direction:column; gap:16px; } .report-filters .form-group{ width:100%; min-width:0; } .report-actions{ width:100%; flex-wrap:wrap; } .report-actions .btn{ flex:1 1 180px; } .chart{ height:280px; padding:18px; } .chart-grid, .chart-bars{ inset:18px; } .chart-bars{ gap:14px; height:calc(100% - 36px); } .modal{ padding:14px; } .modal__content{ max-height:calc(100dvh - 28px); overflow-y:auto; border-radius:16px; } .modal__header, .modal__body, .modal__footer{ padding:18px; } .alert{ padding:16px; gap:14px; border-radius:15px; } .alert__icon{ width:40px; height:40px; border-radius:12px; } .show-total{ align-items:flex-start; flex-direction:column; gap:8px; } } @media(max-width:576px){ .page-eyebrow{ padding:5px 10px; font-size:11px; } .page-header__actions{ display:grid; grid-template-columns:1fr; } .page-header__actions .btn{ width:100%; } .card__header{ padding:16px; } .card__body{ padding:16px; } .metric-card{ min-height:0; padding:18px; gap:14px; } .metric-card__label{ font-size:.74rem; } .metric-card__description{ font-size:.84rem; } .table-toolbar__right{ display:grid; grid-template-columns:1fr; } .table-toolbar__right .btn{ width:100%; } .table th, .table td{ padding:13px 15px; } .table-primary{ font-size:.9rem; } .table-secondary{ font-size:.78rem; } .modal__footer{ align-items:stretch; flex-direction:column; } .modal__footer form, .modal__footer .btn{ width:100%; } .toast{ padding:16px; gap:12px; border-radius:16px; } .toast__icon{ width:40px; height:40px; border-radius:12px; } .alert{ align-items:flex-start; } .alert__text, .alert__list{ font-size:.88rem; } .empty-state{ padding:40px 18px; } .show-info, .show-info--4{ gap:18px; } } @media(hover:none){ .card:hover, .alert:hover, .toast:hover, .action-btn:hover, .action-menu__button:hover{ transform:none; } } /* PANEL PRINCIPAL REFINADO */ .dashboard-refined{ --dashboard-border:rgba(15,23,42,.07); --dashboard-border-soft:rgba(15,23,42,.055); --dashboard-surface:var(--color-white); --dashboard-surface-soft:#F8FAFD; --dashboard-shadow: 0 2px 6px rgba(15,23,42,.025), 0 14px 36px rgba(15,23,42,.05); display:flex; flex-direction:column; gap:24px; min-width:0; } .dashboard-refined__metrics{ margin-bottom:0; } .dashboard-refined .metric-card{ min-height:160px; } .dashboard-refined .metric-card:hover{ transform:translateY(-2px); } .dashboard-refined__overview{ display:grid; grid-template-columns:minmax(0,1.7fr) minmax(310px,.72fr); align-items:stretch; gap:22px; } .dashboard-refined__details{ display:grid; grid-template-columns:minmax(0,1.55fr) minmax(310px,.7fr); align-items:start; gap:22px; } .dashboard-refined__side{ display:flex; flex-direction:column; gap:22px; min-width:0; } /* PANEL */ .dashboard-panel{ min-width:0; border-color:var(--dashboard-border); box-shadow:var(--dashboard-shadow); } .dashboard-panel:hover{ transform:none; border-color:var(--dashboard-border); box-shadow:var(--dashboard-shadow); } .dashboard-panel__header{ align-items:flex-start; gap:24px; } .dashboard-panel__header > div{ min-width:0; } .dashboard-panel__eyebrow{ display:block; margin-bottom:8px; color:var(--color-fg-subtle); font-size:.7rem; font-weight:750; letter-spacing:.1em; line-height:1; text-transform:uppercase; } .dashboard-panel__description{ max-width:650px; margin:7px 0 0; color:var(--color-text-muted); font-size:.82rem; font-weight:500; line-height:1.55; } .dashboard-panel__summary{ display:flex; align-items:flex-end; flex-direction:column; gap:5px; flex-shrink:0; } .dashboard-panel__summary span{ color:var(--color-text-muted); font-size:.7rem; font-weight:650; } .dashboard-panel__summary strong{ color:var(--color-primary); font-family:var(--font-title); font-size:1.55rem; font-variant-numeric:tabular-nums; letter-spacing:-.04em; line-height:1; } /* CHART */ .dashboard-chart{ position:relative; width:100%; height:286px; min-width:620px; overflow:hidden; border:1px solid var(--dashboard-border-soft); border-radius:18px; background: linear-gradient( 180deg, rgba(248,250,253,.96), rgba(248,250,253,.46) ); } .dashboard-panel--chart .dashboard-panel__body{ overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; } .dashboard-chart__grid{ position:absolute; inset:28px 24px 44px; display:flex; flex-direction:column; justify-content:space-between; pointer-events:none; } .dashboard-chart__grid span{ border-top:1px dashed rgba(100,116,139,.17); } .dashboard-chart__columns{ position:absolute; inset:14px 25px 12px; display:grid; grid-template-columns:repeat(6,minmax(68px,1fr)); align-items:end; gap:18px; } .dashboard-chart__column{ height:100%; display:grid; grid-template-rows:23px minmax(0,1fr) 29px; align-items:end; } .dashboard-chart__value{ align-self:end; color:var(--color-text-muted); font-size:.7rem; font-weight:750; font-variant-numeric:tabular-nums; line-height:1; text-align:center; } .dashboard-chart__track{ height:100%; display:flex; align-items:flex-end; justify-content:center; } .dashboard-chart__bar{ width:42px; min-height:8px; border-radius:12px 12px 4px 4px; background: linear-gradient( 180deg, #5B98FF, var(--color-primary) ); box-shadow: 0 10px 22px rgba(24,86,242,.17); transition: filter .2s ease, transform .2s ease; } .dashboard-chart__label{ align-self:end; color:var(--color-text-muted); font-size:.74rem; font-weight:650; text-align:center; } .dashboard-chart__footer{ display:flex; align-items:center; gap:0; margin-top:20px; padding-top:19px; border-top:1px solid var(--dashboard-border-soft); } .dashboard-chart__stat{ display:flex; flex-direction:column; gap:5px; min-width:145px; padding-right:25px; } .dashboard-chart__stat + .dashboard-chart__stat{ padding-left:25px; border-left:1px solid var(--dashboard-border); } .dashboard-chart__stat span{ color:var(--color-text-muted); font-size:.7rem; font-weight:600; } .dashboard-chart__stat strong{ color:var(--color-text); font-family:var(--font-title); font-size:1.02rem; font-variant-numeric:tabular-nums; } .dashboard-inline-link{ display:inline-flex; align-items:center; gap:8px; margin-left:auto; color:var(--color-primary); font-size:.8rem; font-weight:700; text-decoration:none; white-space:nowrap; } .dashboard-inline-link span{ transition:transform .18s ease; } /* FINANCE */ .dashboard-finance{ height:100%; } .dashboard-finance__body{ display:flex; flex-direction:column; gap:22px; min-height:calc(100% - 102px); } .dashboard-finance__balance{ display:flex; flex-direction:column; gap:9px; padding:21px; border:1px solid rgba(24,86,242,.11); border-radius:17px; background: linear-gradient( 145deg, rgba(24,86,242,.075), rgba(24,86,242,.02) ); } .dashboard-finance__balance > span{ color:var(--color-text-muted); font-size:.72rem; font-weight:700; letter-spacing:.075em; text-transform:uppercase; } .dashboard-finance__balance > strong{ overflow:hidden; font-family:var(--font-title); font-size:clamp(1.75rem,2.45vw,2.2rem); font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.05em; line-height:1.08; text-overflow:ellipsis; white-space:nowrap; } .dashboard-finance__balance small{ color:var(--color-text-muted); font-size:.77rem; line-height:1.5; } .dashboard-finance__split{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); } .dashboard-finance__split > div{ display:flex; flex-direction:column; gap:8px; min-width:0; } .dashboard-finance__split > div + div{ padding-left:20px; margin-left:20px; border-left:1px solid var(--dashboard-border); } .dashboard-finance__split span{ color:var(--color-text-muted); font-size:.73rem; font-weight:650; } .dashboard-finance__split strong{ overflow:hidden; font-size:.88rem; font-weight:700; font-variant-numeric:tabular-nums; text-overflow:ellipsis; white-space:nowrap; } .dashboard-finance__movement{ display:flex; align-items:center; gap:13px; padding-top:21px; border-top:1px solid var(--dashboard-border-soft); } .dashboard-finance__movement-icon{ width:42px; height:42px; display:flex; align-items:center; justify-content:center; flex:0 0 42px; border-radius:13px; background:rgba(24,86,242,.085); color:var(--color-primary); } .dashboard-finance__movement-icon svg{ width:19px; height:19px; } .dashboard-finance__movement > div{ display:flex; flex-direction:column; gap:4px; min-width:0; } .dashboard-finance__movement strong{ color:var(--color-text); font-size:.84rem; font-weight:700; } .dashboard-finance__movement span{ color:var(--color-text-muted); font-size:.74rem; line-height:1.45; } .dashboard-finance .btn{ margin-top:auto; } /* ORDERS */ .dashboard-orders__body{ padding-top:8px; } .dashboard-order-list{ display:flex; flex-direction:column; } .dashboard-order{ display:grid; grid-template-columns:minmax(120px,.72fr) minmax(220px,1.7fr) minmax(120px,.62fr); align-items:center; gap:20px; min-height:78px; padding:15px 0; border-bottom:1px solid var(--dashboard-border-soft); transition: background .18s ease, padding .18s ease; } .dashboard-order:first-child{ padding-top:5px; } .dashboard-order:last-child{ padding-bottom:5px; border-bottom:none; } .dashboard-order__number, .dashboard-order__client{ display:flex; flex-direction:column; gap:4px; min-width:0; } .dashboard-order__number > span{ color:var(--color-text-muted); font-size:.65rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; } .dashboard-order__number strong{ color:var(--color-primary); font-size:.82rem; font-weight:750; letter-spacing:.02em; } .dashboard-order__number small{ color:var(--color-text-muted); font-size:.69rem; } .dashboard-order__client strong{ overflow:hidden; color:var(--color-text); font-size:.85rem; font-weight:700; text-overflow:ellipsis; white-space:nowrap; } .dashboard-order__client span{ overflow:hidden; color:var(--color-text-muted); font-size:.75rem; line-height:1.45; text-overflow:ellipsis; white-space:nowrap; } .dashboard-order__status{ display:flex; justify-content:flex-end; } .dashboard-order__status .badge{ min-width:96px; } /* ESTADO */ .dashboard-status__body{ padding-top:5px; } .dashboard-status-list{ display:flex; flex-direction:column; } .dashboard-status-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:49px; padding:10px 0; border-bottom:1px solid var(--dashboard-border-soft); } .dashboard-status-row:last-child{ border-bottom:none; } .dashboard-status-row__name{ display:flex; align-items:center; gap:10px; min-width:0; } .dashboard-status-row__name > span{ width:7px; height:7px; flex:0 0 7px; border-radius:50%; background:var(--color-primary); box-shadow: 0 0 0 4px rgba(24,86,242,.075); } .dashboard-status-row__name strong{ overflow:hidden; color:var(--color-text); font-size:.79rem; font-weight:650; text-overflow:ellipsis; white-space:nowrap; } .dashboard-status-row .badge{ min-width:42px; height:26px; padding:0 10px; font-size:.69rem; } .dashboard-compact-empty{ padding:20px; border:1px dashed var(--dashboard-border); border-radius:14px; color:var(--color-text-muted); font-size:.8rem; line-height:1.5; text-align:center; } /* ACTIONS */ .dashboard-action-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; overflow:hidden; border-top:1px solid var(--dashboard-border-soft); background:var(--dashboard-border-soft); } .dashboard-action{ display:flex; align-items:center; gap:11px; min-width:0; min-height:64px; padding:14px 16px; background:var(--color-bg-surface); color:inherit; text-decoration:none; transition:background .18s ease; } .dashboard-action__icon{ width:20px; height:20px; display:flex; align-items:center; justify-content:center; flex:0 0 20px; border-radius:0; background:transparent; color:var(--color-primary); transition: background .18s ease, color .18s ease, transform .18s ease; } .dashboard-action__icon svg{ width:18px; height:18px; } .dashboard-action__content{ display:flex; flex-direction:column; gap:3px; min-width:0; } .dashboard-action__content strong{ overflow:hidden; color:var(--color-text); font-size:.77rem; font-weight:700; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; } .dashboard-action__content small{ overflow:hidden; color:var(--color-text-muted); font-size:.67rem; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; } /* INTERACTION */ @media(hover:hover){ .dashboard-chart__column:hover .dashboard-chart__bar{ filter:brightness(1.06); transform:translateY(-2px); } .dashboard-inline-link:hover span{ transform:translateX(3px); } .dashboard-order:hover{ padding-right:10px; padding-left:10px; background:rgba(24,86,242,.025); } .dashboard-action:hover{ background:rgba(24,86,242,.035); } .dashboard-action:hover .dashboard-action__icon{ background:transparent; color:var(--color-primary); transform:none; } } /* MODO OSCURO */ .dark-mode .dashboard-refined{ --dashboard-border:#293D55; --dashboard-border-soft:#24384F; --dashboard-surface: linear-gradient( 180deg, #162334, #101B2C ); --dashboard-surface-soft:#111D2E; --dashboard-shadow: 0 1px 2px rgba(0,0,0,.16), 0 18px 44px rgba(0,0,0,.18); } .dark-mode .dashboard-panel{ border-color:var(--dashboard-border); background:var(--dashboard-surface); box-shadow:var(--dashboard-shadow); } .dark-mode .dashboard-panel:hover{ border-color:var(--dashboard-border); box-shadow:var(--dashboard-shadow); } .dark-mode .dashboard-panel__description, .dark-mode .dashboard-panel__summary span, .dark-mode .dashboard-chart__value, .dark-mode .dashboard-chart__label, .dark-mode .dashboard-chart__stat span, .dark-mode .dashboard-finance__balance > span, .dark-mode .dashboard-finance__balance small, .dark-mode .dashboard-finance__split span, .dark-mode .dashboard-finance__movement span, .dark-mode .dashboard-order__number > span, .dark-mode .dashboard-order__number small, .dark-mode .dashboard-order__client span, .dark-mode .dashboard-action__content small{ color:#91A8C0; } .dark-mode .dashboard-chart{ border-color:var(--dashboard-border); background: linear-gradient( 180deg, rgba(255,255,255,.025), rgba(255,255,255,.008) ); } .dark-mode .dashboard-chart__grid span{ border-top-color:#31465F; } .dark-mode .dashboard-chart__footer, .dark-mode .dashboard-chart__stat + .dashboard-chart__stat, .dark-mode .dashboard-finance__movement, .dark-mode .dashboard-finance__split > div + div, .dark-mode .dashboard-order, .dark-mode .dashboard-status-row{ border-color:var(--dashboard-border-soft); } .dark-mode .dashboard-chart__stat strong, .dark-mode .dashboard-finance__movement strong, .dark-mode .dashboard-order__client strong, .dark-mode .dashboard-status-row__name strong, .dark-mode .dashboard-action__content strong{ color:#F8FAFC; } .dark-mode .dashboard-finance__balance{ border-color:rgba(124,181,255,.15); background: linear-gradient( 145deg, rgba(24,86,242,.15), rgba(24,86,242,.035) ); } .dark-mode .dashboard-finance__movement-icon{ background:rgba(24,86,242,.15); color:#8FBCFF; } .dark-mode .dashboard-action-grid{ border-top-color:var(--dashboard-border-soft); background:var(--dashboard-border-soft); } .dark-mode .dashboard-action{ background:var(--color-bg-surface); } .dark-mode .dashboard-action__icon{ background:transparent; color:var(--color-accent-fg); } @media(hover:hover){ .dark-mode .dashboard-order:hover, .dark-mode .dashboard-action:hover{ background:rgba(255,255,255,.03); } } /* ADAPTACIÓN A DISTINTAS PANTALLAS */ @media(max-width:1200px){ .dashboard-refined__overview, .dashboard-refined__details{ grid-template-columns:1fr; } .dashboard-refined__side{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); } } @media(max-width:900px){ .dashboard-chart__footer{ align-items:flex-start; flex-wrap:wrap; row-gap:18px; } .dashboard-inline-link{ width:100%; margin-left:0; } } @media(max-width:768px){ .dashboard-refined{ gap:20px; } .dashboard-refined .metric-card{ min-height:142px; } .dashboard-panel__header{ align-items:stretch; flex-direction:column; gap:15px; } .dashboard-panel__header > .btn{ width:100%; } .dashboard-panel__summary{ align-items:flex-start; } .dashboard-refined__side{ display:flex; } .dashboard-chart__stat{ min-width:0; flex:1; padding-right:15px; } .dashboard-chart__stat + .dashboard-chart__stat{ padding-left:15px; } } @media(max-width:620px){ .dashboard-chart{ height:260px; } .dashboard-chart__footer{ display:grid; grid-template-columns:1fr; } .dashboard-chart__stat{ padding:11px 0; } .dashboard-chart__stat + .dashboard-chart__stat{ padding-left:0; border-top:1px solid var(--dashboard-border-soft); border-left:none; } .dashboard-finance__split{ grid-template-columns:1fr; gap:18px; } .dashboard-finance__split > div + div{ padding-top:18px; padding-left:0; margin-left:0; border-top:1px solid var(--dashboard-border-soft); border-left:none; } .dashboard-order{ grid-template-columns:1fr auto; gap:14px; } .dashboard-order__number, .dashboard-order__client{ grid-column:1; } .dashboard-order__status{ grid-column:2; grid-row:1 / span 2; align-self:center; } .dashboard-action-grid{ grid-template-columns:1fr; } } @media(max-width:480px){ .dashboard-chart{ min-width:560px; height:245px; } .dashboard-order__status .badge{ min-width:82px; padding:0 9px; font-size:.68rem; } } /* ICONOS DE MARCA · COMPLEMENTO DEL HELPER i() */ .brand-icon { display: inline-block; width: 1em; height: 1em; line-height: 1; font-size: 1em; vertical-align: -0.08em; } /* SOLICITUDES WEB · FILTROS */ .public-requests-filters{ display:flex; align-items:center; flex-wrap:wrap; gap:14px; width:100%; } .public-requests-filters__search{ flex:1 1 360px; width:auto; min-width:260px; max-width:520px; } .public-requests-filters__status{ flex:0 0 230px; width:230px; height:46px; } @media(max-width:768px){ .public-requests-filters{ align-items:stretch; gap:12px; } .public-requests-filters__search, .public-requests-filters__status{ flex:1 1 100%; width:100%; max-width:none; min-width:0; } } /* ========================================================= AUDITORÍA Y CENTRO DE SEGURIDAD ========================================================= */ .audit-filters{ display:grid; grid-template-columns:minmax(300px,1.7fr) repeat(3,minmax(170px,.8fr)) repeat(2,minmax(150px,.65fr)); gap:14px; align-items:end; margin-bottom:18px; } .audit-filters__search{ width:100%; min-width:0; max-width:none; } .audit-filters__date{ display:grid; gap:7px; } .audit-filters__date label{ font-size:12px; font-weight:700; color:var(--color-text-muted); } .audit-filters__actions{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:10px; } .audit-results-summary{ display:flex; justify-content:space-between; gap:16px; padding:12px 0 18px; color:var(--color-text-muted); font-size:13px; } .audit-view-button{ min-width:40px; min-height:38px; padding:8px 10px; } .audit-ip{ display:inline-block; padding:5px 8px; border:1px solid var(--color-border); border-radius:8px; background:var(--color-surface-hover); color:var(--color-text); font-size:12px; } .audit-pagination{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:22px; padding-top:18px; border-top:1px solid var(--color-border); } .audit-pagination > span{ color:var(--color-text-muted); font-size:13px; font-weight:600; } .audit-user-agent{ overflow-wrap:anywhere; } .audit-metadata-section{ margin-top:24px; padding-top:22px; border-top:1px solid var(--color-border); } .audit-metadata{ max-height:420px; margin:10px 0 0; padding:18px; overflow:auto; border:1px solid var(--color-border); border-radius:14px; background:var(--color-surface-hover); color:var(--color-text); font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace; font-size:12px; line-height:1.65; white-space:pre-wrap; overflow-wrap:anywhere; } .security-environment{ font-size:clamp(1.05rem,2vw,1.45rem); } .security-check-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } .security-check{ display:grid; grid-template-columns:48px minmax(0,1fr); gap:14px; align-items:start; padding:18px; border:1px solid var(--color-border); border-radius:16px; background:var(--color-surface); } .security-check__icon{ display:grid; place-items:center; width:48px; height:48px; border-radius:14px; background:var(--color-primary-bg); color:var(--color-primary); } .security-check__header{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } .security-check__header h3{ margin:2px 0 0; font-size:15px; color:var(--color-title); } .security-check__content p{ margin:9px 0 0; color:var(--color-text-muted); font-size:13px; line-height:1.6; } .security-check--warning .security-check__icon{ background:rgba(245,158,11,.12); color:#B45309; } .security-check--error .security-check__icon{ background:rgba(239,68,68,.12); color:#B91C1C; } .security-recovery-list{ display:grid; gap:14px; margin:0; padding:0; list-style:none; } .security-recovery-list li{ display:grid; grid-template-columns:22px minmax(0,1fr); gap:11px; align-items:start; color:var(--color-text); line-height:1.6; } .security-recovery-list li > svg{ width:18px; margin-top:3px; color:var(--color-primary); } .security-recovery-rule{ display:grid; grid-template-columns:46px minmax(0,1fr); gap:14px; padding:18px; border:1px solid var(--color-border); border-radius:16px; background:var(--color-surface-hover); } .security-recovery-rule > svg{ width:28px; color:var(--color-primary); } .security-recovery-rule h3{ margin:0 0 8px; font-size:15px; color:var(--color-title); } .security-recovery-rule p, .security-note{ margin:0; color:var(--color-text-muted); line-height:1.65; } .security-note{ margin-top:16px; font-size:13px; } @media(max-width:1180px){ .audit-filters{ grid-template-columns:repeat(3,minmax(0,1fr)); } .audit-filters__search{ grid-column:1 / -1; } } @media(max-width:820px){ .audit-filters, .security-check-grid{ grid-template-columns:1fr; } .audit-filters__search, .audit-filters__actions{ grid-column:auto; } .audit-results-summary, .audit-pagination{ align-items:flex-start; flex-direction:column; } .audit-pagination .btn{ width:100%; } } @media(max-width:520px){ .security-check{ grid-template-columns:42px minmax(0,1fr); padding:15px; } .security-check__icon{ width:42px; height:42px; } .security-check__header{ align-items:flex-start; flex-direction:column; } } /* TABLAS · RESULTADOS Y PAGINACIÓN */ .table-results-summary{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin:14px 0; color:var(--color-text-muted, #64748b); font-size:.875rem; } .table-pagination{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:20px; } .table-pagination__pages{ display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; } .table-pagination__page{ display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 10px; border:1px solid var(--color-border, #e2e8f0); border-radius:10px; background:var(--color-surface, #fff); color:var(--color-text, #0f172a); font-weight:700; text-decoration:none; } .table-pagination__page:hover{ border-color:var(--color-primary, #1856f2); color:var(--color-primary, #1856f2); } .table-pagination__page.is-current{ border-color:var(--color-primary, #1856f2); background:var(--color-primary, #1856f2); color:#fff; pointer-events:none; } .table-pagination__ellipsis{ color:var(--color-text-muted, #64748b); padding:0 2px; } @media(max-width:768px){ .table-results-summary{ align-items:flex-start; flex-direction:column; gap:4px; } .table-pagination{ align-items:stretch; flex-direction:column; } .table-pagination > .btn{ width:100%; } } /* FASE 5J · ACCESIBILIDAD Y CONSISTENCIA DE INTERACCIÓN */ body.modal-open{ overflow:hidden; } .action-menu__button[aria-expanded="true"]{ color:var(--color-primary); background:var(--color-primary-bg); } .form-required{ color:var(--color-danger); font-weight:800; } .form-validation-summary{ margin-bottom:var(--space-5); padding:14px 16px; border:1px solid rgba(239,68,68,.28); border-radius:var(--radius-md); background:rgba(239,68,68,.08); color:var(--color-danger); font-weight:700; } .form-validation-summary[hidden]{ display:none; } .form-group--invalid .form-label, .form-group--invalid > label{ color:var(--color-danger); } .form-control[aria-invalid="true"]{ border-color:var(--color-danger); box-shadow:0 0 0 4px rgba(239,68,68,.10); } .table-container[role="region"]:focus-visible{ outline:3px solid rgba(24,86,242,.25); outline-offset:4px; } .dark-mode .form-validation-summary{ background:rgba(239,68,68,.12); } /* INTEGRIDAD DE DATOS · JERARQUÍA VISUAL OLTHANY */ .data-integrity-group__header{ align-items:center; gap:var(--space-5); } .data-integrity-group__identity{ display:flex; align-items:center; gap:14px; min-width:0; } .data-integrity-group__icon{ width:46px; height:46px; flex:0 0 46px; display:flex; align-items:center; justify-content:center; border-radius:14px; background:var(--color-primary-bg); color:var(--color-primary); } .data-integrity-group__icon svg{ width:21px; height:21px; } .data-integrity-group__icon--ok{ background:var(--color-success-bg); color:var(--color-success); } .data-integrity-group__icon--warning{ background:var(--color-warning-bg); color:var(--color-warning); } .data-integrity-group__icon--error{ background:var(--color-danger-bg); color:var(--color-danger); } .data-integrity-group__heading{ min-width:0; } .data-integrity-group__heading .card__subtitle{ max-width:780px; margin-top:7px; line-height:1.55; } .data-integrity-group__meta{ display:flex; flex-direction:column; align-items:flex-end; gap:7px; flex:0 0 auto; } .data-integrity-group__count{ color:var(--color-text-muted); font-size:.76rem; font-weight:600; white-space:nowrap; } .data-integrity-table{ min-width:780px; table-layout:fixed; } .data-integrity-table th:nth-child(1), .data-integrity-table td:nth-child(1){ width:28%; text-align:left; } .data-integrity-table th:nth-child(2), .data-integrity-table td:nth-child(2){ width:132px; text-align:center; } .data-integrity-table th:nth-child(3), .data-integrity-table td:nth-child(3){ width:auto; text-align:left; } .data-integrity-table td{ vertical-align:top; white-space:normal; } .data-integrity-table__status{ vertical-align:middle !important; } .data-integrity-table__result .table-cell{ gap:7px; } .data-integrity-table__detail{ color:var(--color-text); font-size:.9rem; font-weight:600; line-height:1.55; } .data-integrity-table__issues{ color:var(--color-warning); font-weight:700; } .data-integrity-row--error .data-integrity-table__issues{ color:var(--color-danger); } .data-integrity-table__examples{ line-height:1.5; overflow-wrap:anywhere; } .data-integrity-table__examples strong{ color:var(--color-text); } @media(max-width:820px){ .data-integrity-group__header{ align-items:flex-start; flex-direction:column; } .data-integrity-group__meta{ width:100%; align-items:flex-start; } } @media(max-width:520px){ .data-integrity-group__identity{ align-items:flex-start; } .data-integrity-group__icon{ width:42px; height:42px; flex-basis:42px; border-radius:13px; } } /* FASE 5N · SANEAMIENTO DE DATOS DE PRUEBA */ .metric-card__value--wrap{ white-space:normal; overflow-wrap:anywhere; } .cleanup-readiness-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } .cleanup-summary-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } .cleanup-metric-card .metric-card__content{ overflow:visible; } .cleanup-search-form{ max-width:920px; } .cleanup-preview-header{ align-items:flex-start; gap:var(--space-4); } .cleanup-chain-table{ min-width:1040px; table-layout:fixed; } .cleanup-chain-table th:nth-child(1), .cleanup-chain-table td:nth-child(1){ width:22%; } .cleanup-chain-table th:nth-child(2), .cleanup-chain-table td:nth-child(2){ width:140px; } .cleanup-chain-table th:nth-child(3), .cleanup-chain-table td:nth-child(3){ width:30%; } .cleanup-chain-table th:nth-child(4), .cleanup-chain-table td:nth-child(4){ width:190px; } .cleanup-chain-table th:nth-child(5), .cleanup-chain-table td:nth-child(5){ width:170px; } .cleanup-chain-table td{ vertical-align:top; white-space:normal; } .cleanup-chain-table__status{ vertical-align:middle !important; } .cleanup-amount-cell{ align-items:flex-end; text-align:right; } .cleanup-empty-state{ min-height:180px; } .cleanup-confirm-actions{ justify-content:flex-end; flex-wrap:wrap; } .cleanup-danger-zone{ border:1px solid rgba(239,68,68,.18); } .cleanup-danger-zone .card__header{ background:linear-gradient(180deg,rgba(239,68,68,.035),transparent); } .dark-mode .cleanup-danger-zone{ border-color:rgba(248,113,113,.24); } .dark-mode .cleanup-danger-zone .card__header{ background:linear-gradient(180deg,rgba(248,113,113,.07),transparent); } @media(max-width:1200px){ .cleanup-readiness-grid, .cleanup-summary-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media(max-width:768px){ .cleanup-readiness-grid, .cleanup-summary-grid{ grid-template-columns:1fr; } .cleanup-preview-header{ align-items:flex-start; flex-direction:column; } .cleanup-confirm-actions .btn{ flex:1 1 220px; } } /* HOTFIX GLOBAL · DIÁLOGOS OLTHANY */ .modal{ z-index:1200; } .modal__content{ max-width:520px; border-radius:20px; border-top:4px solid var(--color-primary); box-shadow: 0 28px 80px rgba(15,23,42,.24), 0 8px 24px rgba(15,23,42,.12); } .modal__header{ align-items:flex-start; gap:var(--space-4); padding:var(--space-5) var(--space-5) var(--space-4); background:var(--color-white); } .modal__heading{ display:flex; align-items:center; gap:var(--space-4); min-width:0; } .modal__heading-copy{ min-width:0; } .modal__icon{ display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; flex:0 0 48px; border-radius:15px; background:var(--color-primary-bg); color:var(--color-primary); } .modal__icon .icon, .modal__icon svg{ width:23px; height:23px; } .modal__eyebrow{ display:block; margin-bottom:4px; color:var(--color-text-muted); font-size:.72rem; font-weight:700; letter-spacing:.10em; text-transform:uppercase; } .modal__title{ font-size:1.28rem; line-height:1.25; overflow-wrap:anywhere; } .modal__close{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; flex:0 0 38px; margin-left:auto; padding:0; border:1px solid var(--color-border); border-radius:12px; background:var(--color-surface); color:var(--color-text-muted); cursor:pointer; transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease; } .modal__close:hover{ color:var(--color-text); border-color:var(--color-border-default); background:var(--color-bg-hover); transform:none; } .modal__close .icon, .modal__close svg{ width:18px; height:18px; } .modal__body{ padding:var(--space-5); } .modal__message{ margin:0; color:var(--color-text); font-size:.98rem; font-weight:500; line-height:1.7; overflow-wrap:anywhere; } .modal__details{ margin-top:var(--space-4); padding:var(--space-4); border:1px solid var(--color-border); border-radius:14px; background:var(--color-surface); color:var(--color-text-muted); font-size:.88rem; line-height:1.6; } .modal__details p{ color:inherit; } .modal__details ul{ display:grid; gap:8px; margin:0; padding-left:20px; } .modal__footer{ align-items:center; padding:var(--space-4) var(--space-5) var(--space-5); background:var(--color-white); } .modal__footer form{ margin:0; } .modal__footer .btn{ min-width:132px; } .modal__footer .btn__icon{ display:inline-flex; align-items:center; justify-content:center; } .modal__footer .btn__icon .icon, .modal__footer .btn__icon svg{ width:17px; height:17px; } .modal[data-mode="alert"] .modal__footer{ justify-content:flex-end; } .modal[data-variant="primary"] .modal__content, .modal[data-variant="info"] .modal__content{ border-top-color:var(--color-primary); } .modal[data-variant="primary"] .modal__icon, .modal[data-variant="info"] .modal__icon{ background:var(--color-primary-bg); color:var(--color-primary); } .modal[data-variant="success"] .modal__content{ border-top-color:var(--color-success); } .modal[data-variant="success"] .modal__icon{ background:var(--color-success-bg); color:var(--color-success); } .modal[data-variant="warning"] .modal__content{ border-top-color:var(--color-warning); } .modal[data-variant="warning"] .modal__icon{ background:var(--color-warning-bg); color:var(--color-warning); } .modal[data-variant="danger"] .modal__content{ border-top-color:var(--color-danger); } .modal[data-variant="danger"] .modal__icon{ background:var(--color-danger-bg); color:var(--color-danger); } .dark-mode .modal__header, .dark-mode .modal__footer{ background:var(--color-bg-elevated); } .dark-mode .modal__close{ background:var(--color-bg-surface); } @media(max-width:560px){ .modal{ align-items:flex-end; padding:12px; } .modal__content{ max-height:calc(100dvh - 24px); border-radius:20px; } .modal__header{ padding:18px; } .modal__heading{ align-items:flex-start; gap:12px; } .modal__icon{ width:42px; height:42px; flex-basis:42px; border-radius:13px; } .modal__title{ font-size:1.12rem; } .modal__body{ padding:18px; } .modal__footer{ gap:10px; padding:16px 18px 18px; } .modal__footer form, .modal__footer .btn{ width:100%; } } /* source: assets/css/olthany-components.css */ /* ========================================================= OLTHANY COMPONENTS · UI/UX 1A Componentes opt-in. No sobrescriben vistas existentes. ========================================================= */ :root{ --olthany-ui-surface:var(--color-white); --olthany-ui-surface-muted:var(--color-surface); --olthany-ui-border:rgba(15,23,42,.08); --olthany-ui-border-strong:var(--color-border-default); --olthany-ui-shadow:0 18px 46px rgba(15,23,42,.08); --olthany-ui-shadow-soft:0 8px 24px rgba(15,23,42,.055); --olthany-ui-radius:22px; --olthany-ui-radius-inner:17px; } .ui-layout-grid{ display:grid; grid-template-columns:minmax(0,1.55fr) minmax(280px,.72fr); gap:24px; align-items:start; } .ui-panel{ position:relative; overflow:hidden; border:1px solid var(--olthany-ui-border); border-radius:var(--olthany-ui-radius); background:var(--olthany-ui-surface); box-shadow:var(--olthany-ui-shadow-soft); } .ui-panel::before{ content:""; position:absolute; inset:0 0 auto; height:3px; background:linear-gradient(90deg,var(--color-primary),rgba(24,86,242,.28),transparent 72%); pointer-events:none; } .ui-panel__header{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:26px 28px 22px; border-bottom:1px solid var(--olthany-ui-border); background:linear-gradient(180deg,rgba(248,250,255,.92),rgba(255,255,255,.7)); } .ui-panel__heading{ min-width:0; display:flex; align-items:flex-start; gap:16px; } .ui-panel__copy{ min-width:0; } .ui-panel__title{ margin:1px 0 6px; color:var(--color-black); font-family:var(--font-title); font-size:1.08rem; font-weight:700; letter-spacing:-.02em; } .ui-panel__description{ max-width:640px; margin:0; color:var(--color-text-muted); font-size:.88rem; line-height:1.65; } .ui-panel__body{ padding:26px 28px; } .ui-panel__footer{ min-height:78px; padding:16px 28px; display:flex; align-items:center; justify-content:space-between; gap:18px; border-top:1px solid var(--olthany-ui-border); background:rgba(248,250,252,.72); } .ui-icon-tile{ width:48px; height:48px; flex:0 0 48px; display:grid; place-items:center; border:1px solid var(--color-border-subtle); border-radius:15px; color:var(--color-fg-muted); background:var(--color-bg-subtle); box-shadow:inset 0 1px 0 rgba(255,255,255,.72); } .ui-icon-tile .icon{ width:22px; height:22px; } .ui-setting-card{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:center; padding:22px; border:1px solid var(--olthany-ui-border); border-radius:var(--olthany-ui-radius-inner); background:linear-gradient(145deg,rgba(248,250,252,.86),rgba(255,255,255,.98)); transition:border-color .18s ease,box-shadow .18s ease,background .18s ease; } .ui-setting-card:focus-within{ border-color:var(--olthany-ui-border-strong); box-shadow:0 0 0 4px rgba(24,86,242,.07); } .ui-setting-card__content{ min-width:0; display:grid; grid-template-columns:46px minmax(0,1fr); gap:15px; align-items:start; } .ui-setting-card__icon{ width:46px; height:46px; display:grid; place-items:center; border-radius:14px; color:var(--color-fg-muted); background:var(--color-bg-subtle); } .ui-setting-card__icon .icon{ width:21px; height:21px; } .ui-setting-card__title-row{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:5px; } .ui-setting-card__title{ margin:0; color:var(--color-black); font-family:var(--font-title); font-size:.98rem; font-weight:700; letter-spacing:-.015em; } .ui-setting-card__description{ max-width:620px; margin:0; color:var(--color-text-muted); font-size:.84rem; line-height:1.65; } .ui-status-pill{ min-height:25px; padding:4px 9px; display:inline-flex; align-items:center; gap:6px; border:1px solid rgba(107,114,128,.14); border-radius:999px; color:var(--color-gray-600); background:rgba(107,114,128,.07); font-size:.7rem; font-weight:700; letter-spacing:.02em; } .ui-status-pill::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.8; } .ui-status-pill--active{ border-color:var(--color-border-default); color:var(--color-fg); background:var(--color-bg-subtle); } .ui-switch{ position:relative; width:40px; height:22px; flex:0 0 40px; padding:0; border:1px solid var(--color-border-control); border-radius:999px; background:var(--color-bg-subtle); box-shadow:none; cursor:pointer; transition:background-color var(--motion-duration-fast) var(--motion-ease-standard),border-color var(--motion-duration-fast) var(--motion-ease-standard); } .ui-switch::before{ content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--color-fg-muted); box-shadow:none; transition:transform var(--motion-duration-fast) var(--motion-ease-standard); } .ui-switch:hover{border-color:var(--color-border-default);} .ui-switch:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px;} .ui-switch--active,.ui-switch.is-active{border-color:var(--color-control-checked-bg);background:var(--color-control-checked-bg);} .ui-switch--active::before,.ui-switch.is-active::before{background:var(--color-control-checked-fg);transform:translateX(18px);} .ui-switch:disabled,.ui-switch[aria-disabled="true"]{cursor:not-allowed;opacity:.48;} .ui-form-state{ min-width:0; display:flex; align-items:center; gap:9px; color:var(--color-text-muted); font-size:.8rem; line-height:1.45; } .ui-form-state .icon{ width:17px; height:17px; flex:0 0 auto; color:var(--color-primary); } .ui-form-state--dirty{ color:var(--color-warning-hover); } .ui-form-state--dirty .icon{ color:var(--color-warning); } .ui-preview{ position:sticky; top:calc(var(--navbar-height) + 24px); } .ui-preview__body{ padding:24px; } .ui-preview-window{ min-height:250px; overflow:hidden; display:grid; grid-template-columns:54px minmax(0,1fr); border:1px solid rgba(15,23,42,.09); border-radius:17px; background:#F5F7FB; box-shadow:0 16px 32px rgba(15,23,42,.08); transition:background .22s ease,border-color .22s ease; } .ui-preview-window__sidebar{ padding:14px 9px; display:flex; flex-direction:column; align-items:center; gap:12px; border-right:1px solid rgba(15,23,42,.07); background:#FFFFFF; transition:background .22s ease,border-color .22s ease; } .ui-preview-window__brand{ width:24px; height:24px; border-radius:8px; background:var(--color-primary); box-shadow:0 5px 12px rgba(24,86,242,.24); } .ui-preview-window__nav{ width:100%; height:7px; border-radius:999px; background:#E4E9F1; } .ui-preview-window__nav--active{ background:var(--color-primary); } .ui-preview-window__content{ padding:15px; } .ui-preview-window__topbar{ height:13px; margin-bottom:18px; border-radius:999px; background:#FFFFFF; box-shadow:0 2px 8px rgba(15,23,42,.05); } .ui-preview-window__heading{ width:52%; height:9px; margin-bottom:8px; border-radius:999px; background:#1E293B; } .ui-preview-window__subheading{ width:70%; height:6px; margin-bottom:18px; border-radius:999px; background:#B8C2D1; } .ui-preview-window__cards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; } .ui-preview-window__card{ min-height:56px; padding:10px; border:1px solid rgba(15,23,42,.06); border-radius:12px; background:#FFFFFF; box-shadow:0 5px 14px rgba(15,23,42,.045); } .ui-preview-window__card::before, .ui-preview-window__card::after{ content:""; display:block; border-radius:999px; } .ui-preview-window__card::before{ width:22px; height:22px; margin-bottom:9px; border-radius:8px; background:rgba(24,86,242,.13); } .ui-preview-window__card::after{ width:65%; height:6px; background:#CAD2DE; } .ui-preview-window[data-theme="dark"]{ border-color:#2A3D56; background:#0B1523; } .ui-preview-window[data-theme="dark"] .ui-preview-window__sidebar{ border-color:#263950; background:#111D2E; } .ui-preview-window[data-theme="dark"] .ui-preview-window__nav{ background:#31465F; } .ui-preview-window[data-theme="dark"] .ui-preview-window__nav--active{ background:#4F7BFF; } .ui-preview-window[data-theme="dark"] .ui-preview-window__topbar, .ui-preview-window[data-theme="dark"] .ui-preview-window__card{ border-color:#263950; background:#162438; box-shadow:none; } .ui-preview-window[data-theme="dark"] .ui-preview-window__heading{ background:#F1F5F9; } .ui-preview-window[data-theme="dark"] .ui-preview-window__subheading, .ui-preview-window[data-theme="dark"] .ui-preview-window__card::after{ background:#60758E; } .ui-preview-caption{ margin:16px 0 0; color:var(--color-text-muted); font-size:.79rem; line-height:1.6; } .dark-mode{ --olthany-ui-surface:#111B2D; --olthany-ui-surface-muted:#162234; --olthany-ui-border:rgba(148,163,184,.13); --olthany-ui-border-strong:rgba(105,151,255,.32); --olthany-ui-shadow:0 20px 46px rgba(0,0,0,.24); --olthany-ui-shadow-soft:0 12px 32px rgba(0,0,0,.18); } .dark-mode .ui-panel__header{ background:linear-gradient(180deg,rgba(22,35,53,.96),rgba(17,27,45,.82)); } .dark-mode .ui-panel__footer{ background:rgba(8,17,29,.36); } .dark-mode .ui-icon-tile{ border-color:var(--color-border-subtle); background:var(--color-bg-subtle); box-shadow:inset 0 1px 0 rgba(255,255,255,.06); } .dark-mode .ui-setting-card{ background:linear-gradient(145deg,rgba(22,35,53,.96),rgba(17,27,45,.98)); } .dark-mode .ui-setting-card__icon{ background:var(--color-bg-subtle); } .dark-mode .ui-status-pill{ border-color:rgba(148,163,184,.14); color:#A8BDD4; background:rgba(148,163,184,.08); } .dark-mode .ui-status-pill--active{ border-color:var(--color-border-default); color:var(--color-fg); background:var(--color-bg-subtle); } .dark-mode .ui-switch{border-color:var(--color-border-control);background:var(--color-bg-subtle);} .dark-mode .ui-switch--active{border-color:var(--color-control-checked-bg);background:var(--color-control-checked-bg);} @media(max-width:1100px){ .ui-layout-grid{ grid-template-columns:1fr; } .ui-preview{ position:relative; top:auto; } .ui-preview-window{ max-width:520px; } } @media(max-width:680px){ .ui-panel__header, .ui-panel__body, .ui-panel__footer{ padding-left:20px; padding-right:20px; } .ui-panel__header{ padding-top:22px; } .ui-panel__footer{ align-items:stretch; flex-direction:column; } .ui-panel__footer .btn{ width:100%; } .ui-setting-card{ grid-template-columns:1fr; gap:18px; } .ui-switch{ justify-self:start; margin-left:61px; } } @media(max-width:420px){ .ui-panel__heading{ flex-direction:column; } .ui-setting-card__content{ display:flex; flex-direction:column; } .ui-switch{ margin-left:0; } .ui-preview-window{ min-height:220px; } } @media(prefers-reduced-motion:reduce){ .ui-switch, .ui-switch::before, .ui-setting-card, .ui-preview-window, .ui-preview-window__sidebar{ transition:none; } } /* source: assets/css/olthany-cards.css */ /* * Olthany Manager · Sistema global de tarjetas * Fase UI/UX 1B * * Este modulo consolida superficies, bordes, sombras, encabezados, * metricas y estados de las tarjetas internas. No modifica estructura HTML, * logica de negocio ni controles de formulario. */ :root{ --ol-card-surface:#FFFFFF; --ol-card-surface-soft:#F5F5F6; --ol-card-surface-muted:#F4F4F5; --ol-card-border:rgba(15,23,42,.075); --ol-card-border-hover:#DEDEE3; --ol-card-radius:20px; --ol-card-radius-inner:16px; --ol-card-shadow: 0 1px 2px rgba(15,23,42,.025), 0 12px 34px rgba(15,23,42,.055); --ol-card-shadow-hover: 0 3px 8px rgba(15,23,42,.035), 0 18px 44px rgba(15,23,42,.075); --ol-card-focus-ring:0 0 0 4px rgba(24,86,242,.075); --ol-card-header-border:rgba(15,23,42,.065); --ol-card-icon-border:#E8E8EB; } .dark-mode{ --ol-card-surface:#151516; --ol-card-surface-soft:#1C1C1F; --ol-card-surface-muted:#202024; --ol-card-border:rgba(148,163,184,.18); --ol-card-border-hover:#303035; --ol-card-shadow: 0 1px 2px rgba(0,0,0,.18), 0 16px 38px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.025); --ol-card-shadow-hover: 0 2px 6px rgba(0,0,0,.22), 0 22px 52px rgba(0,0,0,.31), inset 0 1px 0 rgba(255,255,255,.035); --ol-card-focus-ring:0 0 0 4px rgba(96,165,250,.11); --ol-card-header-border:rgba(148,163,184,.16); --ol-card-icon-border:#303035; } /* Base compartida del panel administrativo. */ .card{ position:relative; isolation:isolate; overflow:hidden; border:1px solid var(--ol-card-border); border-radius:var(--ol-card-radius); background:var(--ol-card-surface); box-shadow:var(--ol-card-shadow); transform:none; transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease; } .card:hover{ transform:none; border-color:var(--ol-card-border-hover); box-shadow:var(--ol-card-shadow-hover); } .card:focus-within{ border-color:var(--ol-card-border-hover); box-shadow:var(--ol-card-shadow),var(--ol-card-focus-ring); } .card__header{ min-width:0; padding:21px 24px; gap:16px; border-bottom:1px solid var(--ol-card-header-border); background: linear-gradient( 180deg, var(--ol-card-surface-soft), var(--ol-card-surface) ); } .card__header > *{ min-width:0; } .card__title{ color:var(--color-black); font-size:1.08rem; line-height:1.3; } .card__subtitle{ margin:5px 0 0; color:var(--color-text-muted); font-size:.84rem; line-height:1.55; } .card__body{ min-width:0; padding:24px; background:transparent; } /* * Politica visual Olthany: las tarjetas no usan circulos, orbes o manchas * decorativas. Los pseudo-elementos de estas superficies quedan reservados. */ .card::before, .card::after, .metric-card::before, .metric-card::after, .dashboard-panel::before, .dashboard-panel::after, .dashboard-finance::before, .dashboard-finance::after, .dashboard-finance__body::before, .dashboard-finance__body::after, .dashboard-finance__balance::before, .dashboard-finance__balance::after{ content:none !important; display:none !important; } /* Tarjetas de métricas reutilizadas en el panel principal, Seguridad y Solicitudes. */ .metric-card{ --ol-metric-accent:var(--color-primary); --ol-metric-soft:rgba(24,86,242,.065); min-height:150px; border-left:1px solid var(--ol-card-border); background: linear-gradient( 145deg, var(--ol-metric-soft), rgba(255,255,255,0) 44% ), var(--ol-card-surface); box-shadow: var(--ol-card-shadow), inset 0 3px 0 var(--ol-metric-accent); } .metric-card:hover, .dashboard-refined .metric-card:hover{ transform:none; box-shadow: var(--ol-card-shadow-hover), inset 0 3px 0 var(--ol-metric-accent); } .metric-card__content{ position:relative; z-index:1; } .metric-card__label{ color:var(--color-text-muted); font-size:.76rem; line-height:1.35; } .metric-card__value{ color:var(--ol-metric-accent); letter-spacing:-.035em; } .metric-card__description{ color:var(--color-text-muted); line-height:1.55; } .metric-card__icon{ position:relative; z-index:1; border:1px solid var(--ol-card-icon-border); border-radius:15px; color:var(--ol-metric-accent); background:var(--ol-metric-soft); box-shadow:inset 0 1px 0 rgba(255,255,255,.72); } .metric-card__icon .icon, .metric-card__icon svg{ width:22px; height:22px; } .metric-card--primary{ --ol-metric-accent:var(--color-primary); --ol-metric-soft:rgba(24,86,242,.075); border-left-color:var(--ol-card-border); } .metric-card--success{ --ol-metric-accent:var(--color-success); --ol-metric-soft:rgba(34,197,94,.075); border-left-color:var(--ol-card-border); } .metric-card--warning{ --ol-metric-accent:var(--color-warning); --ol-metric-soft:rgba(245,158,11,.085); border-left-color:var(--ol-card-border); } .metric-card--danger{ --ol-metric-accent:var(--color-danger); --ol-metric-soft:rgba(239,68,68,.075); border-left-color:var(--ol-card-border); } .metric-card--primary .metric-card__value, .metric-card--primary .metric-card__icon, .metric-card--success .metric-card__value, .metric-card--success .metric-card__icon, .metric-card--warning .metric-card__value, .metric-card--warning .metric-card__icon, .metric-card--danger .metric-card__value, .metric-card--danger .metric-card__icon{ color:var(--ol-metric-accent); } .metric-card--primary .metric-card__icon, .metric-card--success .metric-card__icon, .metric-card--warning .metric-card__icon, .metric-card--danger .metric-card__icon{ background:var(--ol-metric-soft); } /* Tarjetas estadísticas heredadas. */ .stat-card{ border:1px solid var(--ol-card-border); border-radius:var(--ol-card-radius-inner); background:var(--ol-card-surface-soft); box-shadow:0 8px 22px rgba(15,23,42,.035); } .stat-card__icon{ border:1px solid var(--ol-card-icon-border); background:var(--color-primary-bg); } /* Panel financiero: superficie limpia, sin decoraciones flotantes. */ .dashboard-finance__balance{ position:relative; isolation:isolate; overflow:hidden; border:1px solid rgba(24,86,242,.13); background: linear-gradient( 145deg, rgba(24,86,242,.085), rgba(24,86,242,.018) ), var(--ol-card-surface); box-shadow:inset 0 1px 0 rgba(255,255,255,.7); } .dashboard-panel__header{ background: linear-gradient( 180deg, var(--ol-card-surface-soft), var(--ol-card-surface) ); } /* Componente piloto de Configuracion alineado al mismo sistema. */ .ui-panel, .ui-setting-card{ border-color:var(--ol-card-border); background:var(--ol-card-surface); box-shadow:var(--ol-card-shadow); } .ui-panel{ border-radius:var(--ol-card-radius); } .ui-setting-card{ border-radius:var(--ol-card-radius-inner); background: linear-gradient( 145deg, var(--ol-card-surface-muted), var(--ol-card-surface) ); } .ui-setting-card:focus-within{ border-color:var(--ol-card-border-hover); box-shadow:var(--ol-card-focus-ring); } .dark-mode .card, .dark-mode .metric-card{ background-color:var(--ol-card-surface); } .dark-mode .metric-card{ background: linear-gradient( 145deg, var(--ol-metric-soft), rgba(17,27,45,0) 46% ), var(--ol-card-surface); } .dark-mode .metric-card__icon{ box-shadow:inset 0 1px 0 rgba(255,255,255,.045); } .dark-mode .dashboard-finance__balance{ border-color:rgba(96,165,250,.2); background: linear-gradient( 145deg, rgba(37,99,235,.14), rgba(17,27,45,.08) ), var(--ol-card-surface-soft); box-shadow:inset 0 1px 0 rgba(255,255,255,.035); } @media(max-width:768px){ .card__header{ padding:18px 19px; } .card__body{ padding:19px; } .metric-card{ min-height:132px; } } @media(max-width:520px){ .card, .ui-panel{ border-radius:17px; } .card__header{ align-items:flex-start; flex-wrap:wrap; padding:16px; } .card__body{ padding:16px; } .metric-card{ gap:14px; padding:18px; } } @media(hover:none), (prefers-reduced-motion:reduce){ .card, .metric-card{ transition:none; } .card:hover, .metric-card:hover, .dashboard-refined .metric-card:hover{ transform:none; } } /* FINAL-UI-SYSTEM · tarjetas canónicas de la aplicación */ body[data-ui-page="app"] { --ol-card-surface: var(--color-bg-surface); --ol-card-surface-soft: var(--color-bg-subtle); --ol-card-surface-muted: var(--color-bg-subtle); --ol-card-border: var(--color-border-default); --ol-card-border-hover: var(--color-border-default); --ol-card-radius: var(--radius-surface); --ol-card-radius-inner: var(--radius-surface); --ol-card-shadow: none; --ol-card-shadow-hover: none; --ol-card-focus-ring: none; --ol-card-header-border: var(--color-border-subtle); --ol-card-icon-border: transparent; } body[data-ui-page="app"] .card { overflow: visible; border-color: var(--color-border-default); border-radius: var(--radius-surface); background: var(--color-bg-surface); box-shadow: none; } body[data-ui-page="app"] .card:hover { border-color: var(--color-border-default); background: var(--color-bg-surface); box-shadow: none; } body[data-ui-page="app"] .card__title { color: var(--color-fg); font-family: var(--font-body); font-size: 15px; font-weight: var(--font-weight-semibold); line-height: 1.35; letter-spacing: -.01em; } body[data-ui-page="app"] .card__subtitle { margin-top: 3px; color: var(--color-fg-muted); font-size: 13px; line-height: 1.45; } body[data-ui-page="app"] :is(.metric-card,.dashboard-refined .metric-card) { --ol-metric-soft: transparent; min-height: 132px; padding: 18px; border: 1px solid var(--color-border-default); border-left-width: 1px; border-radius: var(--radius-surface); background: var(--color-bg-surface); box-shadow: none; } body[data-ui-page="app"] :is(.metric-card,.dashboard-refined .metric-card):hover { border-color: var(--color-border-default); background: var(--color-bg-surface); box-shadow: none; } body[data-ui-page="app"] .metric-card__label { color: var(--color-fg-muted); font-family: var(--font-body); font-size: 11px; font-weight: var(--font-weight-semibold); letter-spacing: .06em; text-transform: uppercase; } body[data-ui-page="app"] .metric-card__value { margin-top: 8px; font-size: clamp(1.45rem,2vw,1.85rem); font-weight: var(--font-weight-bold); line-height: 1.05; } body[data-ui-page="app"] .metric-card__description { margin-top: 10px; color: var(--color-fg-muted); font-size: 13px; line-height: 1.5; } body[data-ui-page="app"] .metric-card__icon { width: 20px; height: 20px; min-width: 20px; min-height: 20px; flex: 0 0 20px; align-self: flex-start; border: 0; border-radius: 0; background: transparent; box-shadow: none; } body[data-ui-page="app"] .metric-card__icon :is(.icon,svg) { width: 18px; height: 18px; } body[data-ui-page="app"] :is(.stat-card,.ui-setting-card) { border-color: var(--color-border-subtle); border-radius: var(--radius-surface); background: var(--color-bg-subtle); box-shadow: none; } body[data-ui-page="app"] .dashboard-finance__balance { border-color: var(--color-border-default); background: var(--color-bg-surface); box-shadow: none; } /* FINAL-NATIVE-MOBILE · KPI values remain complete on phone */ @media (max-width: 760px) { body[data-ui-page="app"] .metric-card__content { min-width: 0; } body[data-ui-page="app"] .metric-card__value { max-width: 100%; overflow: visible; font-size: clamp(1.12rem, 5.2vw, 1.48rem) !important; line-height: 1.08 !important; letter-spacing: -.04em; text-overflow: clip; white-space: nowrap; } body[data-ui-page="app"] .metric-card__value--wrap, body[data-ui-page="app"] .metric-card__value.security-environment { overflow-wrap: anywhere; white-space: normal; } } @media (max-width: 340px) { body[data-ui-page="app"] :is(.metric-grid,.stats,.ol-admin-metrics,.dashboard-refined__metrics) { grid-template-columns: minmax(0, 1fr) !important; } } /* FINAL-NATIVE-MOBILE · compact KPI width close */ @media (min-width: 341px) and (max-width: 430px) { body[data-ui-page="app"] .metric-card { gap: 8px !important; } body[data-ui-page="app"] .metric-card__icon { width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important; flex-basis: 18px !important; border-radius: 0 !important; } body[data-ui-page="app"] .metric-card__value { font-size: clamp(1.05rem, 4.8vw, 1.3rem) !important; } } /* source: assets/css/olthany-tables.css */ /* ========================================================= OLTHANY MANAGER · TABLAS REFINADAS Microcorrección UI/UX 1C.1 Principios: - Solo actua sobre tablas migradas con la clase .ol-table. - Conserva tablas HTML reales y el desplazamiento horizontal. - No distribuye columnas por reglas genericas nth-child. - Mantiene densidad, jerarquia y acciones compactas de Olthany. ========================================================= */ :root{ --ol-table-surface:var(--color-white); --ol-table-header:#F4F4F5; --ol-table-border:rgba(15,23,42,.075); --ol-table-row-border:rgba(15,23,42,.055); --ol-table-row-hover:var(--color-bg-hover); --ol-table-row-focus:var(--color-bg-subtle); --ol-table-radius:15px; --ol-table-cell-x:16px; --ol-table-cell-y:13px; --ol-table-action-size:34px; } /* Contenedor opt-in */ .ol-table-container{ position:relative; max-width:100%; overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; border:1px solid var(--ol-table-border); border-radius:var(--ol-table-radius); background:var(--ol-table-surface); box-shadow:0 1px 2px rgba(15,23,42,.02); } .ol-table-container:focus-visible{ outline:3px solid rgba(24,86,242,.16); outline-offset:3px; } .ol-table-container::-webkit-scrollbar{ width:9px; height:9px; } .ol-table-container::-webkit-scrollbar-track{ background:transparent; } .ol-table-container::-webkit-scrollbar-thumb{ border:3px solid transparent; border-radius:999px; background:rgba(100,116,139,.32); background-clip:padding-box; } .ol-table-container::-webkit-scrollbar-thumb:hover{ background:rgba(71,85,105,.48); background-clip:padding-box; } /* Tabla base, aislada de tablas PDF y componentes no migrados */ .table.ol-table{ width:100%; min-width:100%; table-layout:auto; border-collapse:separate; border-spacing:0; background:var(--ol-table-surface); color:var(--color-text); font-variant-numeric:tabular-nums; } .table.ol-table thead{ background:var(--ol-table-header); } .table.ol-table th{ padding:12px var(--ol-table-cell-x); border-bottom:1px solid var(--ol-table-border); background:transparent; color:#667085; font-family:var(--font-title); font-size:.69rem; font-weight:700; letter-spacing:.072em; line-height:1.35; text-align:left; text-transform:uppercase; white-space:nowrap; } .table.ol-table td{ padding:var(--ol-table-cell-y) var(--ol-table-cell-x); border-bottom:1px solid var(--ol-table-row-border); background:transparent; color:var(--color-text); font-size:.87rem; line-height:1.4; vertical-align:middle; white-space:nowrap; } .table.ol-table th:first-child, .table.ol-table td:first-child{ padding-left:18px; } .table.ol-table th:last-child, .table.ol-table td:last-child{ padding-right:14px; } .table.ol-table tbody tr{ background:var(--ol-table-surface); transition:background-color .15s ease,box-shadow .15s ease; } .table.ol-table tbody tr:hover{ background:var(--ol-table-row-hover); } .table.ol-table tbody tr:focus-within{ background:var(--ol-table-row-focus); box-shadow:inset 3px 0 0 rgba(24,86,242,.42); } .table.ol-table tbody tr:last-child td{ border-bottom:0; } /* * Neutraliza las reglas historicas globales de components.css solo en * tablas migradas. Cada variante define despues sus columnas sensibles. */ .table.ol-table th:nth-child(4), .table.ol-table td:nth-child(4), .table.ol-table th:nth-child(5), .table.ol-table td:nth-child(5), .table.ol-table th:nth-child(6), .table.ol-table td:nth-child(6){ width:auto; text-align:left; } .table.ol-table .table-col-center{ text-align:center; } .table.ol-table .table-col-right{ text-align:right; } .table.ol-table .table-col-sm{ width:84px; min-width:84px; } .table.ol-table .table-col-md{ width:145px; min-width:145px; } /* Jerarquia interna */ .table.ol-table .table-cell{ display:flex; flex-direction:column; align-items:flex-start; min-width:0; gap:2px; } .table.ol-table .table-primary{ color:var(--color-text); font-size:.87rem; font-weight:700; line-height:1.3; } .table.ol-table .table-secondary{ color:var(--color-text-muted); font-size:.74rem; font-weight:500; line-height:1.35; } .table.ol-table .table-number{ color:var(--color-primary); font-family:var(--font-title); font-weight:700; white-space:nowrap; } .table.ol-table .table-empty{ padding:42px 22px !important; color:var(--color-text-muted); font-size:.86rem; line-height:1.55; text-align:center !important; white-space:normal !important; } /* Badges compactos; la columna no hereda el ancho del texto disponible */ .table.ol-table .badge{ width:auto; min-width:0; max-width:100%; min-height:24px; padding:4px 10px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; font-size:.68rem; line-height:1; white-space:nowrap; } /* Acciones: compactas, centradas y sin reservar una columna gigante */ .table.ol-table.table--has-actions th:last-child, .table.ol-table.table--has-actions td:last-child:not(.table-empty){ width:54px; min-width:54px; max-width:54px; padding-left:6px; padding-right:10px; text-align:center; white-space:nowrap; } .table.ol-table .table-actions{ display:inline-flex; align-items:center; justify-content:center; flex-wrap:nowrap; gap:6px; min-width:0; margin:0; } .table.ol-table .action-menu{ display:inline-flex; align-items:center; justify-content:center; margin:0; } .table.ol-table .action-btn, .table.ol-table .action-menu__button, .table.ol-table .audit-view-button{ width:var(--ol-table-action-size); height:var(--ol-table-action-size); min-width:var(--ol-table-action-size); min-height:var(--ol-table-action-size); padding:0; display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(15,23,42,.105); border-radius:9px; background:var(--color-white); color:#475467; box-shadow:0 1px 2px rgba(15,23,42,.025); transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease; } .table.ol-table .action-btn:hover, .table.ol-table .action-menu__button:hover, .table.ol-table .audit-view-button:hover{ border-color:var(--color-border-default); background:var(--color-bg-hover); color:var(--color-fg); box-shadow:none; transform:none; } .table.ol-table .action-btn:active, .table.ol-table .action-menu__button:active, .table.ol-table .audit-view-button:active{ box-shadow:none; transform:none; } .table.ol-table .action-btn:focus-visible, .table.ol-table .action-menu__button:focus-visible, .table.ol-table .audit-view-button:focus-visible{ outline:3px solid rgba(24,86,242,.16); outline-offset:2px; } .table.ol-table .action-btn svg, .table.ol-table .action-menu__button svg, .table.ol-table .audit-view-button svg{ width:16px; height:16px; } /* Menu flotante. app.js calcula su posicion al abrirlo. */ .action-menu__dropdown{ position:fixed; inset:auto; z-index:1400; min-width:196px; max-width:min(286px,calc(100vw - 24px)); max-height:min(400px,calc(100vh - 24px)); overflow:auto; padding:6px; border:1px solid rgba(15,23,42,.095); border-radius:12px; background:var(--color-white); box-shadow:0 16px 42px rgba(15,23,42,.15),0 3px 10px rgba(15,23,42,.06); } .action-menu__item{ min-height:39px; gap:10px; padding:9px 11px; border-radius:9px; font-size:.84rem; font-weight:600; } .action-menu__item + .action-menu__item{ margin-top:2px; } .action-menu__divider{ margin:5px 4px; background:var(--ol-table-row-border); } .action-menu__item svg, .action-menu__item .icon{ width:16px; height:16px; flex:0 0 16px; } /* Barra de busqueda y resumen */ .table-toolbar{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:16px; } .table-toolbar__left{ flex:1 1 280px; min-width:0; } .table-toolbar__right{ display:flex; align-items:center; justify-content:flex-end; flex:0 1 auto; flex-wrap:wrap; gap:9px; } .table-search-group{ width:min(100%,380px); max-width:100%; } .table-results-summary, .audit-results-summary{ display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:38px; padding:8px 0 12px; color:var(--color-text-muted); font-size:.78rem; } /* Variantes por modulo: solo se fijan columnas que deben ser compactas */ /* Usuarios: columnas semánticas; TH y TD comparten la misma clase. */ .table.ol-table.table--users{ min-width:940px !important; table-layout:auto; } .table.ol-table.table--users .table-col-name{ min-width:135px; } .table.ol-table.table--users .table-col-username{ min-width:115px; } .table.ol-table.table--users .table-col-role{ min-width:140px; } .table.ol-table.table--users .table-col-client{ min-width:170px; } .table.ol-table.table--users .table-col-status{ width:112px; min-width:112px; max-width:112px; text-align:center; } .table.ol-table.table--users .table-col-status .table-cell--badge{ width:100%; min-width:0; } .table.ol-table.table--users .table-col-last-access{ width:180px; min-width:180px; max-width:180px; padding-right:8px; text-align:right; white-space:nowrap; } .table.ol-table.table--users td.table-col-last-access .table-cell{ align-items:flex-end; text-align:right; } .table.ol-table.table--users .table-col-actions{ width:88px; min-width:88px; max-width:88px; padding-left:4px; padding-right:12px; text-align:center; white-space:nowrap; } .table.ol-table.table--users th.table-col-actions{ display:table-cell; visibility:visible; opacity:1; color:#667085; font-size:.64rem; letter-spacing:.045em; } .table.ol-table.table--users td.table-col-actions .action-menu{ margin-inline:auto; } .table--audit{ min-width:1060px !important; } .table--audit th:nth-child(1), .table--audit td:nth-child(1){ width:125px; min-width:125px; } .table--audit th:nth-child(2), .table--audit td:nth-child(2){ width:145px; min-width:145px; } .table--audit th:nth-child(3), .table--audit td:nth-child(3){ min-width:210px; } .table--audit th:nth-child(4), .table--audit td:nth-child(4){ width:145px; min-width:145px; } .table--audit th:nth-child(5), .table--audit td:nth-child(5){ width:115px; min-width:115px; } .table--audit th:nth-child(6), .table--audit td:nth-child(6){ width:104px; min-width:104px; text-align:center; } .table--audit th:nth-child(7), .table--audit td:nth-child(7){ width:88px; min-width:88px; } .table--clients{ min-width:760px !important; } .table--clients th:nth-child(3), .table--clients td:nth-child(3){ width:120px; min-width:120px; text-align:center; } .table--devices{ min-width:850px !important; } .table--devices th:nth-child(3), .table--devices td:nth-child(3){ width:112px; min-width:112px; text-align:center; } .table--devices th:nth-child(4), .table--devices td:nth-child(4){ width:135px; min-width:135px; } .table--catalog, .table--inventory{ min-width:820px !important; } .table--catalog th:nth-child(3), .table--catalog td:nth-child(3), .table--catalog th:nth-child(4), .table--catalog td:nth-child(4), .table--inventory th:nth-child(3), .table--inventory td:nth-child(3), .table--inventory th:nth-child(4), .table--inventory td:nth-child(4){ width:105px; min-width:105px; text-align:right; } .table--catalog th:nth-child(5), .table--catalog td:nth-child(5), .table--inventory th:nth-child(5), .table--inventory td:nth-child(5){ width:100px; min-width:100px; text-align:center; } .table--finances{ min-width:860px !important; } .table--finances th:nth-child(3), .table--finances td:nth-child(3){ width:94px; min-width:94px; text-align:center; } .table--finances th:nth-child(4), .table--finances td:nth-child(4){ width:120px; min-width:120px; text-align:right; } .table--finances th:nth-child(5), .table--finances td:nth-child(5){ width:104px; min-width:104px; text-align:center; } .table--public-requests{ min-width:940px !important; } .table--public-requests th:nth-child(4), .table--public-requests td:nth-child(4){ width:112px; min-width:112px; text-align:center; } .table--public-requests th:nth-child(5), .table--public-requests td:nth-child(5){ width:138px; min-width:138px; } .table--service-orders{ min-width:960px !important; } .table--service-orders th:nth-child(4), .table--service-orders td:nth-child(4){ width:118px; min-width:118px; text-align:center; } .table--service-orders th:nth-child(5), .table--service-orders td:nth-child(5){ width:102px; min-width:102px; text-align:center; } .table--quotes{ min-width:1040px !important; } .table--quotes th:nth-child(4), .table--quotes td:nth-child(4){ width:116px; min-width:116px; text-align:center; } .table--quotes th:nth-child(5), .table--quotes td:nth-child(5){ width:120px; min-width:120px; text-align:right; } .table--quotes th:nth-child(6), .table--quotes td:nth-child(6){ width:135px; min-width:135px; } .table--quote-items{ min-width:760px !important; } .table--quote-items th:nth-child(2), .table--quote-items td:nth-child(2), .table--quote-items th:nth-child(3), .table--quote-items td:nth-child(3), .table--quote-items th:nth-child(4), .table--quote-items td:nth-child(4), .table--quote-items th:nth-child(5), .table--quote-items td:nth-child(5){ width:105px; min-width:105px; text-align:right; } .table--portal-orders, .table--portal-quotes, .table--portal-invoices{ min-width:820px !important; } .table--portal-devices{ min-width:700px !important; } .table--portal-orders th:nth-child(3), .table--portal-orders td:nth-child(3), .table--portal-devices th:nth-child(3), .table--portal-devices td:nth-child(3), .table--portal-quotes th:nth-child(3), .table--portal-quotes td:nth-child(3){ width:112px; min-width:112px; text-align:center; } .table--portal-orders th:nth-child(4), .table--portal-orders td:nth-child(4){ width:145px; min-width:145px; } .table--portal-orders th:nth-child(5), .table--portal-orders td:nth-child(5), .table--portal-devices th:nth-child(4), .table--portal-devices td:nth-child(4), .table--portal-invoices th:nth-child(5), .table--portal-invoices td:nth-child(5){ width:130px; min-width:130px; } .table--portal-quotes th:nth-child(4), .table--portal-quotes td:nth-child(4), .table--portal-quotes th:nth-child(5), .table--portal-quotes td:nth-child(5), .table--portal-invoices th:nth-child(4), .table--portal-invoices td:nth-child(4){ width:115px; min-width:115px; text-align:right; } .table--profile{ min-width:860px !important; } .table--profile th:nth-child(4), .table--profile td:nth-child(4){ width:104px; min-width:104px; text-align:center; } .table--profile th:nth-child(5), .table--profile td:nth-child(5), .table--profile th:nth-child(6), .table--profile td:nth-child(6){ width:150px; min-width:150px; } .table--invoice-items, .table--order-items, .table--quote-detail-items{ min-width:720px !important; } .table--invoice-items th:nth-child(n+3), .table--invoice-items td:nth-child(n+3), .table--order-items th:nth-child(n+2), .table--order-items td:nth-child(n+2), .table--quote-detail-items th:nth-child(n+3), .table--quote-detail-items td:nth-child(n+3){ width:112px; min-width:112px; text-align:right; } .table--report-history{ min-width:860px !important; } .table--report-history th:nth-child(1), .table--report-history td:nth-child(1){ width:56px; min-width:56px; text-align:center; } .table--report-history th:nth-child(3), .table--report-history td:nth-child(3), .table--report-history th:nth-child(5), .table--report-history td:nth-child(5), .table--report-history th:nth-child(6), .table--report-history td:nth-child(6){ width:125px; min-width:125px; } /* Hotfix UI/UX 1C.2: ajustes puntuales aprobados */ /* * Integridad de datos conserva su tabla especial, pero components.css * aplica a la ultima celda una regla heredada de acciones. Esta regla * específica recupera la alineación y el ancho natural del resultado. */ .data-integrity-table{ table-layout:fixed; } .data-integrity-table th:nth-child(1), .data-integrity-table td:nth-child(1){ width:31%; } .data-integrity-table th:nth-child(2), .data-integrity-table td:nth-child(2){ width:132px; text-align:center; } .data-integrity-table th:nth-child(3), .data-integrity-table td:nth-child(3), .data-integrity-table tbody tr td.data-integrity-table__result:last-child:not(.table-empty){ width:auto; padding-left:22px; padding-right:22px; text-align:left; white-space:normal; } .data-integrity-table__result .table-cell{ align-items:flex-start; width:100%; max-width:760px; } .data-integrity-table__detail{ display:block; width:100%; text-align:left; } /* Auditoria: filtros en dos niveles, sin comprimir fechas */ .audit-filters{ display:grid; grid-template-columns:minmax(300px,1.55fr) repeat(3,minmax(160px,.75fr)); gap:12px; align-items:end; margin-bottom:16px; } .audit-filters__search{ width:100%; min-width:0; max-width:none; } .audit-filters__date-range{ grid-column:1 / span 3; display:grid; grid-template-columns:auto minmax(155px,1fr) minmax(155px,1fr); align-items:end; gap:10px; min-width:0; } .audit-filters__date-range-title{ align-self:center; padding-right:4px; color:var(--color-text-muted); font-size:.73rem; font-weight:700; letter-spacing:.055em; text-transform:uppercase; white-space:nowrap; } .audit-filters__date{ display:grid; gap:5px; min-width:0; } .audit-filters__date label{ color:var(--color-text-muted); font-size:.7rem; font-weight:700; } .audit-filters__date input[type="date"]::-webkit-calendar-picker-indicator{ width:17px; height:17px; margin:0; opacity:.62; cursor:pointer; } .audit-filters__actions{ grid-column:4; display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:9px; } .audit-ip{ display:inline-flex; align-items:center; min-height:26px; padding:4px 7px; border:1px solid var(--ol-table-border); border-radius:7px; background:rgba(15,23,42,.025); color:var(--color-text); font-size:.72rem; } /* Paginacion */ .table-pagination, .audit-pagination{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:18px; padding-top:16px; border-top:1px solid var(--ol-table-border); } .table-pagination__pages{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; } .table-pagination__page{ min-width:36px; min-height:36px; border-color:var(--ol-table-border); border-radius:9px; } /* Modo oscuro */ .dark-mode{ --ol-table-surface:#151516; --ol-table-header:#1C1C1F; --ol-table-border:rgba(148,163,184,.15); --ol-table-row-border:rgba(148,163,184,.1); --ol-table-row-hover:#252529; --ol-table-row-focus:#1C1C1F; } .dark-mode .ol-table-container, .dark-mode .table.ol-table, .dark-mode .table.ol-table tbody tr{ background:var(--ol-table-surface); } .dark-mode .table.ol-table th{ color:#A8B4C7; } .dark-mode .table.ol-table td, .dark-mode .table.ol-table .table-primary{ color:#E7ECF5; } .dark-mode .table.ol-table .table-secondary, .dark-mode .table.ol-table .table-empty{ color:#9EACC0; } .dark-mode .table.ol-table .action-btn, .dark-mode .table.ol-table .action-menu__button, .dark-mode .table.ol-table .audit-view-button, .dark-mode .action-menu__dropdown{ border-color:var(--ol-table-border); background:#151516; color:#F5F5F6; } .dark-mode .table.ol-table .action-btn:hover, .dark-mode .table.ol-table .action-menu__button:hover, .dark-mode .table.ol-table .audit-view-button:hover{ border-color:#303035; background:#252529; color:#F5F5F6; } .dark-mode .action-menu__item{ color:#F5F5F6; } .dark-mode .action-menu__item:hover{ background:#252529; color:#F5F5F6; } .dark-mode .audit-ip{ background:rgba(148,163,184,.06); } /* Adaptación a distintas pantallas */ @media(max-width:1180px){ .audit-filters{ grid-template-columns:repeat(3,minmax(0,1fr)); } .audit-filters__search{ grid-column:1 / -1; } .audit-filters__date-range{ grid-column:1 / span 2; } .audit-filters__actions{ grid-column:3; } } @media(max-width:900px){ :root{ --ol-table-cell-x:14px; --ol-table-cell-y:12px; } .table-toolbar{ align-items:stretch; } .table-toolbar__left, .table-toolbar__right{ flex:1 1 100%; width:100%; } .table-toolbar__right{ justify-content:flex-start; } .table-search-group{ width:100%; } .audit-filters{ grid-template-columns:1fr 1fr; } .audit-filters__search{ grid-column:1 / -1; } .audit-filters__date-range{ grid-column:1 / -1; } .audit-filters__actions{ grid-column:1 / -1; justify-content:flex-start; } } @media(max-width:640px){ :root{ --ol-table-radius:13px; --ol-table-cell-x:13px; --ol-table-cell-y:11px; --ol-table-action-size:33px; } .table.ol-table th{ font-size:.65rem; } .table.ol-table td, .table.ol-table .table-primary{ font-size:.82rem; } .table.ol-table .table-secondary{ font-size:.71rem; } .table-results-summary, .audit-results-summary, .table-pagination, .audit-pagination{ align-items:flex-start; flex-direction:column; } .audit-filters{ grid-template-columns:1fr; } .audit-filters__search, .audit-filters__date-range, .audit-filters__actions{ grid-column:auto; } .audit-filters__date-range{ grid-template-columns:1fr; align-items:stretch; } .audit-filters__date-range-title{ padding:0; } .audit-filters__actions .btn{ flex:1 1 auto; } .action-menu__dropdown{ min-width:min(210px,calc(100vw - 24px)); } } @media(hover:none){ .table.ol-table tbody tr:hover{ background:var(--ol-table-surface); } .table.ol-table .action-btn:hover, .table.ol-table .action-menu__button:hover, .table.ol-table .audit-view-button:hover{ transform:none; } } @media(prefers-reduced-motion:reduce){ .table.ol-table tbody tr, .table.ol-table .action-btn, .table.ol-table .action-menu__button, .table.ol-table .audit-view-button{ transition:none; } } /* Usuarios: la columna de acciones conserva separación sin ampliar el diseño. */ .table.ol-table.table--users.table--has-actions th.table-col-actions, .table.ol-table.table--users.table--has-actions td.table-col-actions:not(.table-empty) { width: 64px; min-width: 64px; max-width: 64px; padding-left: 10px; padding-right: 10px; text-align: right; } .table.ol-table.table--users.table--has-actions td.table-col-actions .action-menu { display: flex; align-items: center; justify-content: flex-end; width: 100%; margin: 0; } .table.ol-table.table--users td.table-col-last-access { padding-right: 14px !important; } /* ========================================================================== UI/UX 1F.2 · Menús de acciones fuera de contenedores recortables ========================================================================== */ /* app.js mueve temporalmente el menú abierto al body. */ .action-menu__dropdown.action-menu__dropdown--open { display: block !important; position: fixed !important; z-index: 2200 !important; margin: 0 !important; overflow-x: hidden; overflow-y: auto; visibility: visible; opacity: 1; transform: none; pointer-events: auto; } /* El contenedor de tabla nunca decide el recorte del menú flotante. */ .ol-table-container, .table-container.ol-table-container { isolation: auto; } /* FINAL-UI-SYSTEM · superficie canónica de datos de la aplicación */ body[data-ui-page="app"] { --ol-table-surface: var(--color-bg-surface); --ol-table-header: var(--color-bg-subtle); --ol-table-border: var(--color-border-default); --ol-table-row-border: var(--color-border-subtle); --ol-table-row-hover: var(--color-bg-hover); --ol-table-row-focus: color-mix(in srgb,var(--color-accent-muted) 46%,var(--color-bg-surface)); --ol-table-radius: var(--radius-surface); --ol-table-cell-x: 14px; --ol-table-cell-y: 11px; --ol-table-action-size: 32px; } body[data-ui-page="app"] .ol-table-container { border-color: var(--color-border-default); border-radius: var(--radius-surface); background: var(--color-bg-surface); box-shadow: none; } body[data-ui-page="app"] .table.ol-table { color: var(--color-fg); background: var(--color-bg-surface); } body[data-ui-page="app"] .table.ol-table thead { background: var(--color-bg-subtle); } body[data-ui-page="app"] .table.ol-table th { height: 40px; padding-block: 10px; color: var(--color-fg-muted); border-bottom-color: var(--color-border-default); font-family: var(--font-body); font-size: 11px; font-weight: var(--font-weight-semibold); letter-spacing: .055em; } body[data-ui-page="app"] .table.ol-table td { min-height: 46px; color: var(--color-fg); border-bottom-color: var(--color-border-subtle); font-size: 13px; } body[data-ui-page="app"] .table.ol-table tbody tr { background: var(--color-bg-surface); box-shadow: none; } body[data-ui-page="app"] .table.ol-table tbody tr:hover { background: var(--color-bg-hover); } body[data-ui-page="app"] .table.ol-table tbody tr:focus-within { background: var(--ol-table-row-focus); box-shadow: none; } body[data-ui-page="app"] .table.ol-table :is(.table-primary,.table-number) { color: var(--color-fg); font-family: var(--font-body); font-size: 13px; font-weight: var(--font-weight-semibold); } body[data-ui-page="app"] .table.ol-table .table-secondary { color: var(--color-fg-muted); font-size: 12px; font-weight: var(--font-weight-regular); } body[data-ui-page="app"] .table.ol-table .badge { min-height: 22px; padding: 3px 8px; border-radius: var(--radius-control); box-shadow: none; } body[data-ui-page="app"] .table.ol-table.table--users.table--has-actions :is(th,td).table-col-actions:not(.table-empty) { width: 64px; min-width: 64px; max-width: 64px; padding-inline: 10px; text-align: center; } body[data-ui-page="app"] .table.ol-table.table--users td.table-col-last-access { padding-right: 12px; } /* FINAL-GLOBAL-DARK · action/data surfaces consume Foundation only. */ body[data-ui-page="app"].dark-mode .table-container { border-color: var(--color-border-default); background: var(--color-bg-surface); box-shadow: none; } body[data-ui-page="app"].dark-mode .table:not(.ol-table) thead { background: var(--color-bg-subtle); } body[data-ui-page="app"].dark-mode .table:not(.ol-table) tbody tr { background: var(--color-bg-surface); } body[data-ui-page="app"].dark-mode .table:not(.ol-table) tbody tr:hover { background: var(--color-bg-hover); } body[data-ui-page="app"].dark-mode .table:not(.ol-table) th { color: var(--color-fg-muted); border-bottom-color: var(--color-border-default); } body[data-ui-page="app"].dark-mode .table:not(.ol-table) td { color: var(--color-fg); border-bottom-color: var(--color-border-subtle); } body[data-ui-page="app"].dark-mode .table.ol-table :is(.action-btn,.action-menu__button,.audit-view-button), body[data-ui-page="app"].dark-mode :is(.action-btn,.action-menu__button,.audit-view-button) { border-color: var(--color-border-default); background: var(--color-bg-surface); color: var(--color-fg-muted); box-shadow: none; } body[data-ui-page="app"].dark-mode .table.ol-table :is(.action-btn,.action-menu__button,.audit-view-button):hover, body[data-ui-page="app"].dark-mode :is(.action-btn,.action-menu__button,.audit-view-button):hover { border-color: var(--color-border-default); background: var(--color-bg-hover); color: var(--color-fg); } body[data-ui-page="app"].dark-mode .action-menu.active .action-menu__button, body[data-ui-page="app"].dark-mode .action-menu__button[aria-expanded="true"] { border-color: var(--color-accent-border); background: var(--color-bg-hover); color: var(--color-accent-fg); } body[data-ui-page="app"].dark-mode .action-menu__dropdown { border-color: var(--color-border-default); background: var(--color-bg-elevated); color: var(--color-fg); box-shadow: var(--shadow-floating); } body[data-ui-page="app"].dark-mode .action-menu__item { color: var(--color-fg); } body[data-ui-page="app"].dark-mode .action-menu__item:hover { background: var(--color-bg-hover); color: var(--color-fg); } body[data-ui-page="app"].dark-mode .action-menu__item.action-menu__item--success { color: var(--color-success); } body[data-ui-page="app"].dark-mode .action-menu__item.action-menu__item--success:hover { color: var(--color-success); background: var(--color-success-surface); } body[data-ui-page="app"].dark-mode .action-menu__divider { background: var(--color-border-subtle); } /* source: assets/css/utilities.css */ /* DISPLAY */ .flex{ display:flex; } .inline-flex{ display:inline-flex; } .block{ display:block; } .none{ display:none; } /* FLEX */ .flex-column{ flex-direction:column; } .flex-wrap{ flex-wrap:wrap; } .items-start{ align-items:flex-start; } .items-center{ align-items:center; } .items-end{ align-items:flex-end; } .justify-start{ justify-content:flex-start; } .justify-center{ justify-content:center; } .justify-end{ justify-content:flex-end; } .justify-between{ justify-content:space-between; } .justify-around{ justify-content:space-around; } /* GAP */ .gap-1{ gap:var(--space-1); } .gap-2{ gap:var(--space-2); } .gap-3{ gap:var(--space-3); } .gap-4{ gap:var(--space-4); } .gap-5{ gap:var(--space-5); } .gap-6{ gap:var(--space-6); } .gap-7{ gap:var(--space-7); } .gap-8{ gap:var(--space-8); } /* WIDTH */ .w-full{ width:100%; } .w-auto{ width:auto; } .w-fit{ width:fit-content; } .min-w-0{ min-width:0; } /* HEIGHT */ .h-full{ height:100%; } .h-auto{ height:auto; } .min-h-full{ min-height:100%; } /* MARGIN TOP */ .mt-1{ margin-top:var(--space-1); } .mt-2{ margin-top:var(--space-2); } .mt-3{ margin-top:var(--space-3); } .mt-4{ margin-top:var(--space-4); } .mt-5{ margin-top:var(--space-5); } .mt-6{ margin-top:var(--space-6); } .mt-7{ margin-top:var(--space-7); } .mt-8{ margin-top:var(--space-8); } /* MARGIN BOTTOM */ .mb-1{ margin-bottom:var(--space-1); } .mb-2{ margin-bottom:var(--space-2); } .mb-3{ margin-bottom:var(--space-3); } .mb-4{ margin-bottom:var(--space-4); } .mb-5{ margin-bottom:var(--space-5); } .mb-6{ margin-bottom:var(--space-6); } .mb-7{ margin-bottom:var(--space-7); } .mb-8{ margin-bottom:var(--space-8); } /* TEXT */ .text-left{ text-align:left; } .text-center{ text-align:center; } .text-right{ text-align:right; } /* FONT WEIGHT */ .fw-400{ font-weight:400; } .fw-500{ font-weight:500; } .fw-600{ font-weight:600; } .fw-700{ font-weight:700; } /* BORDER RADIUS */ .rounded{ border-radius:var(--radius-md); } .rounded-lg{ border-radius:var(--radius-lg); } .rounded-full{ border-radius:999px; } .rounded-none{ border-radius:0; } /* OVERFLOW */ .overflow-hidden{ overflow:hidden; } .overflow-auto{ overflow:auto; } /* CURSOR */ .pointer{ cursor:pointer; } .cursor-default{ cursor:default; } /* VISIBILITY */ .hidden{ display:none !important; } .ml-auto{ margin-left:auto; } /* source: assets/css/landing.css */ /* ========================================================================== OLTHANY · FUNDACIÓN ESTRUCTURAL PÚBLICA Solo reinicio y primitivas de distribución. Las variables Foundation conservan su autoridad. ========================================================================== */ html { scroll-behavior: smooth; scroll-padding-top: 96px; } body.landing-page, body.public-quote-standalone { min-width: 0; min-height: 100dvh; margin: 0; color: var(--color-fg); background: var(--color-bg-app); font-family: var(--font-body); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } body.landing-page *, body.landing-page *::before, body.landing-page *::after, body.public-quote-standalone *, body.public-quote-standalone *::before, body.public-quote-standalone *::after { box-sizing: border-box; } body.landing-page img, body.public-quote-standalone img { display: block; max-width: 100%; } body.landing-page :where(a), body.public-quote-standalone :where(a) { color: inherit; text-decoration: none; } body.landing-page :where(button, input, select, textarea), body.public-quote-standalone :where(button) { font: inherit; } body.landing-page :where(h1, h2, h3, h4, p, dl, dd, figure, blockquote, ol, ul), body.public-quote-standalone :where(h1, h2, h3, p, dl, dd, ol, ul) { margin: 0; } body.landing-page :where(ol, ul) { padding: 0; list-style: none; } body.landing-page :where(button) { color: inherit; } .landing-container { width: min(calc(100% - 56px), 1320px); margin-inline: auto; } .landing-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); } .landing-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .landing-request-feedback:empty { display: none; } .landing-skip-link { position: fixed; inset: var(--space-md) auto auto var(--space-md); z-index: calc(var(--z-modal) + 1); padding: var(--space-md) var(--space-lg); color: var(--color-on-emphasis); border-radius: var(--radius-control); background: var(--color-accent-emphasis); transform: translateY(-180%); } .landing-skip-link:focus { transform: translateY(0); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (max-width: 820px) { .landing-container { width: min(calc(100% - 36px), 1320px); } } @media (max-width: 430px) { .landing-container { width: min(calc(100% - 28px), 1320px); } .landing-actions { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* source: assets/css/olthany-ui.css */ /* * Olthany UI · Fase 5P * Capa final del sistema visual. Reutiliza los tokens existentes y evita * alterar la lógica independiente de cada módulo. */ :root { --ui-control-height: 46px; --ui-control-height-sm: 38px; --ui-border-strong: rgba(24, 86, 242, .24); --ui-ring: 0 0 0 4px rgba(24, 86, 242, .13); --ui-shadow-card: 0 10px 30px rgba(15, 23, 42, .07); --ui-shadow-card-hover: 0 18px 42px rgba(15, 23, 42, .11); --ui-shadow-control: 0 1px 2px rgba(15, 23, 42, .035); --ui-ease: cubic-bezier(.2, .8, .2, 1); --ui-duration: 220ms; --ui-surface-soft: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 250, 255, .98)); } html { scroll-behavior: smooth; text-rendering: optimizeLegibility; } body:not(.landing-page):not(.auth-page):not(.system-error-page) { background: radial-gradient(circle at 84% -10%, rgba(24, 86, 242, .07), transparent 30rem), var(--color-background); } ::selection { color: var(--color-white); background: var(--color-primary); } /* Jerarquía de página */ .main-content { width: min(100%, 1680px); margin-inline: auto; } .page-header { gap: var(--space-5); margin-bottom: var(--space-6); } .page-header__content { min-width: 0; } .page-header__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--space-3); } .page-title { text-wrap: balance; letter-spacing: -.035em; } .page-description, .card__subtitle { text-wrap: pretty; } /* Tarjetas / superficies: autoridad transferida a olthany-cards.css. */ /* Botones e iconografía */ .auth-submit, .landing-button { min-height: var(--ui-control-height); border-radius: 13px; transition: transform var(--ui-duration) var(--ui-ease), box-shadow var(--ui-duration) var(--ui-ease), background-color var(--ui-duration) ease, border-color var(--ui-duration) ease, color var(--ui-duration) ease; } .auth-submit:focus-visible, .landing-button:focus-visible, .action-menu__button:focus-visible, .navbar-menu-button:focus-visible { outline: none; box-shadow: var(--ui-ring); } .auth-submit:disabled { cursor: not-allowed; opacity: .58; transform: none; box-shadow: none; } .auth-submit .icon, .auth-submit svg, .landing-button .icon, .landing-button svg, .sidebar__nav .icon, .sidebar__nav svg { flex: 0 0 auto; width: 18px; height: 18px; transition: transform var(--ui-duration) var(--ui-ease); } .auth-submit:hover .icon, .auth-submit:hover svg, .landing-button:hover .icon, .landing-button:hover svg { transform: translateX(2px); } .auth-submit[aria-busy="true"] [data-icon-name="loader-circle"] { animation: olthany-spin .85s linear infinite; } .btn-group, .form-actions, .table-toolbar__right { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); } /* Formularios unificados */ .form-group, .landing-field, .auth-field { min-width: 0; } .form-label, .form-group > label, .landing-field > label, .auth-field > label { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 8px; color: var(--color-gray-700); font-size: .88rem; font-weight: 700; letter-spacing: -.005em; } .form-required { color: var(--color-danger); font-weight: 800; } .form-control, .form-select, .form-group input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), .form-group select, .form-group textarea, .landing-field input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), .landing-field select, .landing-field textarea { width: 100%; min-height: var(--ui-control-height); padding: 0 14px; border: 1px solid var(--color-gray-300); border-radius: 12px; color: var(--color-text); background: rgba(255, 255, 255, .94); box-shadow: var(--ui-shadow-control); font: inherit; transition: border-color var(--ui-duration) ease, box-shadow var(--ui-duration) ease, background-color var(--ui-duration) ease, transform var(--ui-duration) var(--ui-ease); } .form-group textarea, .landing-field textarea, textarea.form-control { min-height: 120px; padding-block: 13px; line-height: 1.6; resize: vertical; } .form-control:hover, .form-select:hover, .form-group input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):hover, .form-group select:hover, .form-group textarea:hover, .landing-field input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):hover, .landing-field select:hover, .landing-field textarea:hover { border-color: var(--color-gray-400); } .form-control:focus, .form-select:focus, .form-group input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):focus, .form-group select:focus, .form-group textarea:focus, .landing-field input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):focus, .landing-field select:focus, .landing-field textarea:focus { outline: none; border-color: var(--color-primary); background: var(--color-white); box-shadow: var(--ui-ring); } .form-control::placeholder, .form-group input::placeholder, .form-group textarea::placeholder, .landing-field input::placeholder, .landing-field textarea::placeholder { color: var(--color-gray-400); opacity: 1; } select.form-control, .form-group select, .landing-field select { padding-right: 42px; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--color-gray-500) 50%), linear-gradient(135deg, var(--color-gray-500) 50%, transparent 50%); background-position: calc(100% - 18px) 20px, calc(100% - 13px) 20px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"] { min-height: var(--ui-control-height); color-scheme: light; } input[type="date"]::-webkit-calendar-picker-indicator, input[type="datetime-local"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator, input[type="month"]::-webkit-calendar-picker-indicator { width: 20px; height: 20px; padding: 5px; border-radius: 8px; cursor: pointer; opacity: .72; transition: background-color var(--ui-duration) ease, opacity var(--ui-duration) ease; } input[type="date"]::-webkit-calendar-picker-indicator:hover, input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover, input[type="time"]::-webkit-calendar-picker-indicator:hover, input[type="month"]::-webkit-calendar-picker-indicator:hover { background-color: var(--color-primary-bg); opacity: 1; } input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; flex: 0 0 auto; margin: 0; cursor: pointer; } input[type="checkbox"] { accent-color: var(--color-control-checked-bg); } input[type="radio"] { accent-color: var(--color-control-selected-bg); } input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 3px solid rgba(24, 86, 242, .18); outline-offset: 2px; } .form-check, .checkbox { display: inline-flex; align-items: center; gap: 10px; min-height: 30px; color: var(--color-gray-700); font-size: .92rem; line-height: 1.45; } .form-check label, .checkbox label { cursor: pointer; } .form-help, .form-text, .ui-field-counter { color: var(--color-text-muted); font-size: .79rem; line-height: 1.5; } .ui-field-meta { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-top: 7px; } .ui-field-counter { margin-left: auto; font-variant-numeric: tabular-nums; } .ui-field-counter.is-near-limit { color: var(--color-warning-hover); font-weight: 700; } .ui-field-counter.is-at-limit { color: var(--color-danger); } body:not([data-ui-page="app"]) [aria-invalid="true"], body:not([data-ui-page="app"]) .form-group--invalid .form-control, body:not([data-ui-page="app"]) .form-group--invalid input, body:not([data-ui-page="app"]) .form-group--invalid select, body:not([data-ui-page="app"]) .form-group--invalid textarea { border-color: var(--color-danger) !important; box-shadow: 0 0 0 4px rgba(239, 68, 68, .11) !important; } .form-validation-summary { margin-bottom: var(--space-4); padding: 13px 15px; border: 1px solid rgba(239, 68, 68, .2); border-radius: 12px; color: #991b1b; background: rgba(254, 226, 226, .72); font-weight: 650; } /* Tablas / barras de herramientas / datos: autoridad transferida a olthany-tables.css. */ /* Badges, estados y mensajes */ .badge { min-height: 27px; padding-inline: 10px; border: 1px solid transparent; font-size: .73rem; font-weight: 780; letter-spacing: .025em; } /* Alertas, capas, desplegables y estados vacíos: pertenecen a los módulos retroalimentación, tablas y estados vacíos. */ /* Entrada progresiva: solo se activa desde ui.js */ .ui-enter { animation: olthany-enter .48s var(--ui-ease) both; animation-delay: var(--ui-delay, 0ms); } .ui-pulse-once { animation: olthany-pulse-once .55s var(--ui-ease); } /* Login SaaS */ .auth-page { background: var(--color-bg-app); } .auth-layout { padding: clamp(18px, 4vw, 46px); } .auth-shell { width: min(1120px, 100%); min-height: min(720px, calc(100dvh - 60px)); border: 1px solid rgba(15, 23, 42, .08); border-radius: 28px; overflow: hidden; box-shadow: 0 34px 90px rgba(15, 23, 42, .16); } .auth-brand-panel { position: relative; isolation: isolate; overflow: hidden; } .auth-brand-panel::before, .auth-brand-panel::after { content: ""; position: absolute; z-index: -1; border-radius: 999px; pointer-events: none; } .auth-brand-panel::before { width: 360px; height: 360px; right: -180px; top: -120px; border: 1px solid rgba(255, 255, 255, .15); box-shadow: 0 0 0 60px rgba(255, 255, 255, .025), 0 0 0 120px rgba(255, 255, 255, .02); } .auth-brand-panel::after { width: 190px; height: 190px; left: -90px; bottom: 80px; background: rgba(255, 255, 255, .05); filter: blur(1px); } .auth-module-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 28px; } .auth-module-chip { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 11px 12px; border: 1px solid rgba(255, 255, 255, .13); border-radius: 13px; color: rgba(255, 255, 255, .88); background: rgba(255, 255, 255, .07); font-size: .78rem; font-weight: 650; backdrop-filter: blur(8px); } .auth-module-chip svg { width: 16px; height: 16px; color: #a9c3ff; } .auth-form-panel__content { width: min(440px, 100%); } .auth-header h1 { letter-spacing: -.045em; } .auth-control { min-height: 50px; border-radius: 14px; box-shadow: var(--ui-shadow-control); } .auth-control:focus-within { border-color: var(--color-primary); box-shadow: var(--ui-ring); } .auth-control input { min-height: 48px; } .auth-password-toggle { border-radius: 10px; } .auth-caps-warning { display: none; align-items: center; gap: 7px; margin-top: 8px; color: var(--color-warning-hover); font-size: .78rem; font-weight: 650; } .auth-caps-warning.is-visible { display: flex; } .auth-caps-warning svg { width: 15px; height: 15px; } .auth-secondary-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; color: var(--color-primary); font-size: .84rem; font-weight: 700; text-decoration: none; } .auth-secondary-link:hover { text-decoration: underline; } /* Landing SaaS */ .landing-page { --landing-blue-soft: rgba(24, 86, 242, .08); background: radial-gradient(circle at 80% 2%, rgba(24, 86, 242, .09), transparent 34rem), #f8faff; } .landing-header { border-bottom-color: rgba(15, 23, 42, .06); background: rgba(255, 255, 255, .84); backdrop-filter: blur(18px) saturate(140%); } .landing-brand__logo img { object-fit: contain; } .landing-navigation a { position: relative; } .landing-navigation > a:not(.landing-nav-cta):not(.landing-nav-login)::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 999px; background: var(--color-primary); transform: scaleX(0); transform-origin: center; transition: transform var(--ui-duration) var(--ui-ease); } .landing-navigation > a:hover::after, .landing-navigation > a.is-active::after { transform: scaleX(1); } .landing-hero-section { position: relative; overflow: hidden; padding-block: clamp(62px, 8vw, 112px) clamp(48px, 7vw, 88px); } .landing-hero-section::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(24, 86, 242, .15) 1px, transparent 1px); background-size: 24px 24px; mask-image: linear-gradient(to right, transparent, #000 48%, transparent); opacity: .3; } .landing-hero-copy, .landing-hero-panel { position: relative; z-index: 1; } .landing-hero-copy h1 { max-width: 760px; text-wrap: balance; background: linear-gradient(120deg, #111827 12%, #173a92 64%, #1856f2 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .landing-hero-copy p { text-wrap: pretty; } .landing-trust-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; } .landing-trust-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid rgba(24, 86, 242, .12); border-radius: 999px; color: #344054; background: rgba(255, 255, 255, .72); box-shadow: 0 6px 18px rgba(15, 23, 42, .04); font-size: .78rem; font-weight: 700; backdrop-filter: blur(10px); } .landing-trust-chip svg { width: 15px; height: 15px; color: var(--color-primary); } .landing-product-frame { position: relative; width: min(100%, 560px); padding: 16px; border: 1px solid rgba(24, 86, 242, .13); border-radius: 26px; background: rgba(255, 255, 255, .82); box-shadow: 0 30px 70px rgba(30, 64, 175, .16); backdrop-filter: blur(18px); transform: perspective(1200px) rotateY(-3deg) rotateX(1deg); transition: transform .5s var(--ui-ease), box-shadow .5s var(--ui-ease); } .landing-product-frame:hover { transform: perspective(1200px) rotateY(0) rotateX(0) translateY(-4px); box-shadow: 0 36px 86px rgba(30, 64, 175, .2); } .landing-product-frame__topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 5px 4px 15px; } .landing-product-frame__brand, .landing-product-frame__status { display: inline-flex; align-items: center; gap: 8px; font-size: .76rem; font-weight: 750; } .landing-product-frame__brand svg, .landing-product-frame__status svg { width: 15px; height: 15px; } .landing-product-frame__status { color: #15803d; } .landing-product-frame__body { padding: 18px; border: 1px solid rgba(15, 23, 42, .07); border-radius: 18px; background: #f8faff; } .landing-product-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .landing-product-metric { min-width: 0; padding: 13px; border: 1px solid rgba(15, 23, 42, .065); border-radius: 14px; background: #fff; } .landing-product-metric span { display: block; overflow: hidden; color: #667085; font-size: .68rem; font-weight: 750; letter-spacing: .05em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .landing-product-metric strong { display: block; margin-top: 8px; color: #172033; font-size: .94rem; } .landing-product-flow { display: grid; gap: 10px; margin-top: 12px; } .landing-product-flow__item { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 11px; border: 1px solid rgba(15, 23, 42, .055); border-radius: 13px; background: #fff; } .landing-product-flow__icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; color: var(--color-primary); background: var(--color-primary-bg); } .landing-product-flow__icon svg { width: 17px; height: 17px; } .landing-product-flow__copy { min-width: 0; } .landing-product-flow__copy strong, .landing-product-flow__copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .landing-product-flow__copy strong { color: #172033; font-size: .79rem; } .landing-product-flow__copy span { margin-top: 3px; color: #667085; font-size: .68rem; } .landing-product-flow__badge { padding: 6px 8px; border-radius: 999px; color: #166534; background: #dcfce7; font-size: .62rem; font-weight: 800; text-transform: uppercase; } .landing-info-card, .landing-highlight-card, .landing-callout-card, .landing-step-item, .landing-faq-item { transition: transform var(--ui-duration) var(--ui-ease), box-shadow var(--ui-duration) var(--ui-ease), border-color var(--ui-duration) ease; } .landing-info-card:hover, .landing-highlight-card:hover, .landing-callout-card:hover { transform: translateY(-4px); border-color: rgba(24, 86, 242, .16); box-shadow: 0 20px 42px rgba(15, 23, 42, .09); } .landing-info-card:hover .landing-info-card__icon svg, .landing-callout-card:hover .landing-callout-card__icon svg { transform: rotate(-5deg) scale(1.08); } .landing-info-card__icon svg, .landing-callout-card__icon svg { transition: transform var(--ui-duration) var(--ui-ease); } .landing-section { content-visibility: auto; contain-intrinsic-size: 700px; } /* Error de solicitud */ .system-error-page { min-height: 100dvh; margin: 0; display: grid; place-items: center; padding: 24px; color: var(--color-text); background: radial-gradient(circle at 50% 0, rgba(24, 86, 242, .12), transparent 32rem), var(--color-background); } .system-error-card { width: min(100%, 560px); padding: clamp(28px, 6vw, 48px); border: 1px solid rgba(15, 23, 42, .08); border-radius: 24px; text-align: center; background: var(--color-white); box-shadow: 0 28px 80px rgba(15, 23, 42, .14); } .system-error-code { display: inline-flex; padding: 7px 12px; border-radius: 999px; color: var(--color-primary); background: var(--color-primary-bg); font-size: .74rem; font-weight: 850; letter-spacing: .1em; } .system-error-icon { width: 64px; height: 64px; margin: 24px auto 18px; display: grid; place-items: center; border-radius: 20px; color: var(--color-primary); background: var(--color-primary-bg); } .system-error-icon svg { width: 30px; height: 30px; } .system-error-card h1 { margin: 0; font-family: var(--font-title); font-size: clamp(1.8rem, 5vw, 2.6rem); letter-spacing: -.04em; } .system-error-card p { margin: 14px auto 26px; max-width: 440px; color: var(--color-text-muted); line-height: 1.7; } /* Modo oscuro */ .dark-mode { --ui-border-strong: rgba(96, 165, 250, .34); --ui-ring: 0 0 0 4px rgba(59, 130, 246, .2); --ui-shadow-card: 0 12px 32px rgba(0, 0, 0, .2); --ui-shadow-card-hover: 0 20px 46px rgba(0, 0, 0, .28); --ui-surface-soft: linear-gradient(180deg, rgba(22, 30, 44, .98), rgba(18, 26, 39, .98)); } .dark-mode .form-label, .dark-mode .form-group > label, .dark-mode .auth-field > label { color: #d7deea; } .dark-mode .form-control, .dark-mode .form-select, .dark-mode .form-group input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), .dark-mode .form-group select, .dark-mode .form-group textarea { border-color: rgba(148, 163, 184, .22); color: #eef2f8; background: rgba(15, 23, 42, .62); } /* Las superficies oscuras de tablas pertenecen a olthany-tables.css. */ .dark-mode.auth-page { background: var(--color-bg-app); } .dark-mode .auth-shell { border-color: rgba(148, 163, 184, .13); box-shadow: 0 34px 100px rgba(0, 0, 0, .42); } /* Adaptación de la interfaz */ @media (max-width: 992px) { .page-header__actions { justify-content: flex-start; } .landing-product-frame { margin-inline: auto; transform: none; } } @media (max-width: 720px) { .page-header__actions, .form-actions, .table-toolbar__right { width: 100%; } .page-header__actions .btn, .form-actions .btn { flex: 1 1 170px; } .card__header { align-items: flex-start; } .auth-module-list { grid-template-columns: 1fr; } .landing-product-metrics { grid-template-columns: 1fr; } .landing-product-flow__item { grid-template-columns: 36px minmax(0, 1fr); } .landing-product-flow__badge { grid-column: 2; justify-self: start; } } @media (max-width: 520px) { .landing-button { min-height: 44px; padding-inline: 15px; } .auth-layout { padding: 10px; } .auth-shell { border-radius: 20px; } .landing-product-frame { padding: 10px; border-radius: 20px; } .landing-product-frame__body { padding: 12px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } .landing-product-frame, .landing-product-frame:hover { transform: none; } } @keyframes olthany-spin { to { transform: rotate(360deg); } } @keyframes olthany-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes olthany-pulse-once { 0%, 100% { transform: scale(1); } 48% { transform: scale(1.035); } } /* ========================================================================== Olthany UI 5Q · estabilización visual y componentes SaaS ========================================================================== */ :root { --ui-radius-xs: 8px; --ui-radius-sm: 11px; --ui-radius-md: 14px; --ui-radius-lg: 18px; --ui-radius-xl: 24px; --ui-surface: rgba(255, 255, 255, .96); --ui-surface-muted: #f7f9fd; --ui-surface-elevated: #ffffff; --ui-border: rgba(15, 23, 42, .085); --ui-border-hover: rgba(24, 86, 242, .22); --ui-shadow-xs: 0 1px 2px rgba(15, 23, 42, .04); --ui-shadow-sm: 0 8px 24px rgba(15, 23, 42, .065); --ui-shadow-md: 0 18px 50px rgba(15, 23, 42, .11); --ui-shadow-lg: 0 30px 90px rgba(15, 23, 42, .18); } body:not(.landing-page):not(.auth-page):not(.system-error-page) { background-color: var(--color-background); background-image: radial-gradient(circle at 92% -10%, rgba(24, 86, 242, .075), transparent 31rem), linear-gradient(180deg, rgba(255, 255, 255, .36), transparent 18rem); } .main-content { padding-bottom: clamp(30px, 5vw, 70px); } .page-header { align-items: flex-end; } .page-header__content { max-width: 900px; } .page-title { line-height: 1.08; } .page-description { max-width: 760px; line-height: 1.65; } /* Tarjetas / superficies métricas: autoridad canónica en olthany-cards.css. */ /* Botones: movimiento semántico, no decorativo */ .landing-button, .auth-submit { position: relative; isolation: isolate; overflow: hidden; font-weight: 720; letter-spacing: -.008em; box-shadow: var(--ui-shadow-xs); } .landing-button::after, .auth-submit::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, .18), transparent 80%); transform: translateX(-120%); transition: transform 520ms var(--ui-ease); pointer-events: none; } .landing-button:hover::after, .auth-submit:hover::after { transform: translateX(120%); } .auth-submit:hover .icon, .auth-submit:hover svg, .landing-button:hover .icon, .landing-button:hover svg { transform: none; } .landing-button:hover [data-icon-name="arrow-right"] { transform: translateX(3px); } .landing-button:hover [data-icon-name="arrow-left"] { transform: translateX(-3px); } .ui-press { animation: olthany-button-press 180ms var(--ui-ease); } .btn-icon, .action-menu__button, .auth-password-toggle, .toast__close, .modal__close { display: inline-grid; place-items: center; } /* Formularios y controles */ .form-grid { gap: clamp(15px, 2vw, 22px); } .form-group, .landing-field, .auth-field { position: relative; } .form-group.is-filled > label { color: var(--color-fg-muted); } .landing-field.is-filled > label, .auth-field.is-filled > label { color: var(--color-primary); } .form-group.is-disabled, .form-group.is-readonly, .landing-field.is-disabled, .auth-field.is-disabled { opacity: .72; } .form-control, .form-select, .table-search, .form-group input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), .form-group select, .form-group textarea, .landing-field input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), .landing-field select, .landing-field textarea { border-radius: var(--ui-radius-md); border-color: rgba(100, 116, 139, .27); background-color: var(--ui-surface-elevated); } .form-control:disabled, .form-select:disabled, .form-control[readonly], .form-group input:disabled, .form-group select:disabled, .form-group textarea:disabled, .form-group input[readonly], .form-group textarea[readonly] { cursor: not-allowed; color: var(--color-gray-600); background: #f2f5f9; box-shadow: none; } .form-control--calendar { padding-right: 12px; } .ui-field-meta { min-height: 20px; } .ui-field-counter { padding: 2px 7px; border-radius: 999px; background: rgba(100, 116, 139, .08); } .ui-choice { display: inline-flex; align-items: flex-start; gap: 10px; min-height: 30px; padding: 5px 0; cursor: pointer; line-height: 1.5; } .ui-choice-input { margin-top: 2px !important; } .ui-choice-input[type="checkbox"] { accent-color: var(--color-control-checked-bg); } .ui-choice-input[type="radio"] { accent-color: var(--color-control-selected-bg); } .ui-choice:hover { color: var(--color-fg); } .ui-choice.is-disabled { cursor: not-allowed; opacity: .58; } .form-validation-summary { position: relative; padding-left: 44px; } .form-validation-summary::before { content: "!"; position: absolute; left: 14px; top: 12px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 999px; color: #fff; background: var(--color-danger); font-size: .74rem; font-weight: 900; } /* Tablas, jerarquía y totales: autoridad canónica en olthany-tables.css. */ /* Alertas, avisos emergentes y modales */ .alert { align-items: flex-start; border-width: 1px; border-style: solid; } .alert__title, .toast__title { letter-spacing: -.01em; } .alert__text, .toast__text { line-height: 1.58; overflow-wrap: anywhere; } /* Avisos emergentes y modales: autoridad canónica en olthany-feedback.css. */ /* Login */ .auth-layout { min-height: 100dvh; display: grid; place-items: center; } .auth-shell { grid-template-columns: minmax(330px, .92fr) minmax(420px, 1.08fr); } .auth-brand-panel__content h2 { max-width: 14ch; text-wrap: balance; } .auth-brand-panel__content p { max-width: 48ch; line-height: 1.7; } .auth-form-panel { background: var(--color-bg-surface); } .auth-form-panel__content { width: min(460px, 100%); } .auth-header { margin-bottom: 28px; } .auth-header p { max-width: 40ch; line-height: 1.65; } .auth-form { display: grid; gap: 19px; } .auth-control { background: #fff; transition: border-color var(--ui-duration) ease, box-shadow var(--ui-duration) ease, background-color var(--ui-duration) ease; } .auth-control:hover { border-color: rgba(24, 86, 242, .26); } .auth-control.is-secret-visible { background: rgba(24, 86, 242, .025); } .auth-password-toggle { width: 40px; height: 40px; margin-right: 4px; color: var(--color-gray-500); background: transparent; } .auth-password-toggle:hover { color: var(--color-fg); background: var(--color-bg-hover); } .auth-password-toggle[data-visible="true"] { color: var(--color-primary); background: var(--color-primary-bg); } .auth-submit { min-height: 52px; margin-top: 3px; } .auth-submit__default, .auth-submit__loading { width: 100%; justify-content: center; } .auth-footer { gap: 12px; } /* Landing */ .landing-page { --landing-max: 1220px; } .landing-header__inner { min-height: 78px; } .landing-hero-grid { gap: clamp(34px, 6vw, 78px); } .landing-hero-copy h1 { font-size: clamp(2.55rem, 5.2vw, 4.65rem); line-height: .99; } .landing-hero-copy > p { max-width: 610px; font-size: clamp(1rem, 1.4vw, 1.12rem); } .landing-hero-actions { margin-top: 32px; } .landing-product-frame { transform: perspective(1200px) rotateY(-2deg) rotateX(1deg); } .landing-product-frame__body { background: linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(248, 250, 255, .98)), #f8faff; } .landing-product-metric, .landing-product-flow__item { box-shadow: 0 5px 16px rgba(15, 23, 42, .035); } .landing-product-flow__copy strong, .landing-product-flow__copy span { overflow: visible; text-overflow: clip; white-space: normal; } .landing-highlight-card, .landing-info-card, .landing-callout-card, .landing-step-item, .landing-faq-item { border-color: var(--ui-border); box-shadow: var(--ui-shadow-sm); } .landing-info-card, .landing-callout-card { min-height: 100%; } .landing-faq-item button:focus-visible { outline: none; box-shadow: inset var(--ui-ring); } /* Modo oscuro */ .dark-mode { --ui-surface: rgba(18, 26, 39, .96); --ui-surface-muted: #111927; --ui-surface-elevated: #151e2c; --ui-border: rgba(148, 163, 184, .14); --ui-border-hover: rgba(96, 165, 250, .34); --ui-shadow-xs: 0 1px 2px rgba(0, 0, 0, .16); --ui-shadow-sm: 0 10px 30px rgba(0, 0, 0, .2); --ui-shadow-md: 0 20px 52px rgba(0, 0, 0, .32); --ui-shadow-lg: 0 34px 94px rgba(0, 0, 0, .46); } .dark-mode .auth-form-panel { background: var(--color-bg-surface); } .dark-mode .form-control:disabled, .dark-mode .form-select:disabled, .dark-mode .form-control[readonly], .dark-mode .form-group input:disabled, .dark-mode .form-group select:disabled, .dark-mode .form-group textarea:disabled, .dark-mode .form-group input[readonly], .dark-mode .form-group textarea[readonly] { color: #aeb9ca; background: rgba(8, 15, 27, .62); } .dark-mode .auth-control { background: var(--color-bg-subtle); } /* Adaptación */ @media (max-width: 1100px) { .auth-shell { grid-template-columns: minmax(290px, .82fr) minmax(380px, 1.18fr); } } @media (max-width: 900px) { .page-header { align-items: flex-start; } .auth-shell { grid-template-columns: 1fr; min-height: auto; } .auth-brand-panel { min-height: auto; } .auth-brand-panel__content { padding-block: 20px; } .auth-brand-panel__content h2 { max-width: 20ch; } } @media (max-width: 680px) { .metric-grid { grid-template-columns: 1fr; } /* La geometría adaptable de tarjetas y tablas pertenece a sus módulos canónicos. */ .modal__actions { flex-direction: column-reverse; } .modal__actions .btn { width: 100%; } .toast-container { inset: auto 14px 14px; width: auto; } .landing-hero-copy h1 { font-size: clamp(2.3rem, 12vw, 3.3rem); } } @media (forced-colors: active) { .card, .metric-card, .table-container, .toast, .modal__content, .form-control, .form-select { border: 1px solid CanvasText; } } @media (prefers-reduced-motion: reduce) { .landing-button::after, .auth-submit::after { display: none; } } @keyframes olthany-button-press { 0%, 100% { transform: scale(1); } 50% { transform: scale(.975); } } .auth-security-note { display: flex; align-items: center; gap: 10px; margin: -8px 0 22px; padding: 11px 13px; border: 1px solid rgba(24, 86, 242, .12); border-radius: 13px; color: #365079; background: rgba(24, 86, 242, .045); font-size: .8rem; line-height: 1.5; } .auth-security-note__icon { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; color: var(--color-primary); background: rgba(24, 86, 242, .09); } .auth-security-note__icon svg { width: 16px; height: 16px; } .landing-highlight-card { display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: start; gap: 15px; } .landing-highlight-card__icon { width: 46px; height: 46px; display: grid !important; place-items: center; margin: 0 !important; border-radius: 14px; color: var(--color-primary) !important; background: rgba(24, 86, 242, .08); } .landing-highlight-card__icon svg { width: 20px; height: 20px; } .dark-mode .auth-security-note { border-color: rgba(96, 165, 250, .18); color: #bfcaDA; background: rgba(59, 130, 246, .08); } @media (max-width: 560px) { .landing-highlight-card { grid-template-columns: 42px minmax(0, 1fr); padding: 20px; } .landing-highlight-card__icon { width: 42px; height: 42px; } } /* UI/UX 1D.5 - Sincronización WhatsApp: espacio interior y control propio. Esta hoja se carga después de la hoja principal, por eso el ajuste vive aquí. */ .ol-form .ol-form__field--whatsapp-sync > .ol-form__check { box-sizing: border-box; width: 100%; min-height: 66px; padding: 14px 22px 14px 26px; } .ol-form .ol-form__field--whatsapp-sync .ol-form__native-check { position: absolute !important; width: 1px !important; height: 1px !important; min-width: 1px !important; min-height: 1px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; opacity: 0 !important; appearance: none !important; -webkit-appearance: none !important; pointer-events: none; } .ol-form .ol-form__field--whatsapp-sync .ol-form__check-control { margin-left: 2px; } @media (max-width: 640px) { .ol-form .ol-form__field--whatsapp-sync > .ol-form__check { padding: 13px 16px 13px 20px; } } /* source: assets/css/olthany-public.css */ /* ========================================================================== OLTHANY · SISTEMA FINAL DE COMPONENTES PÚBLICOS Primitivas, navegación, formularios, legal, cotización y pie exclusivos del sitio público. ========================================================================== */ body[data-ui-page="landing"] { --public-header-height: 78px; --public-canvas: var(--color-bg-app); --public-surface: var(--color-bg-surface); --public-surface-soft: var(--color-bg-subtle); --public-surface-raised: var(--color-bg-elevated); --public-ink: var(--color-fg); --public-muted: var(--color-fg-muted); --public-subtle: var(--color-fg-muted); --public-line: var(--color-border-subtle); --public-line-strong: var(--color-border-default); --public-border-strong: var(--color-border-control); --public-control-placeholder: var(--color-fg-subtle); --public-accent: var(--color-accent-emphasis); --public-accent-fg: var(--color-accent-fg); --public-accent-soft: var(--color-accent-muted); --public-accent-line: var(--color-accent-border); --public-reveal-order: 0; --public-stage-bg: color-mix(in srgb, var(--public-surface) 88%, var(--public-canvas)); --public-stage-fg: var(--public-ink); --public-stage-muted: var(--public-muted); --public-footer-bg: var(--public-surface-soft); --public-footer-fg: var(--public-ink); --public-footer-muted: var(--public-muted); --public-grid: color-mix(in srgb, var(--color-border-default) 36%, transparent); overflow-x: clip; } [data-public-theme="dark"] body[data-ui-page="landing"] { --public-grid: color-mix(in srgb, var(--color-border-default) 46%, transparent); --public-footer-bg: color-mix(in srgb, var(--color-bg-app) 80%, var(--color-bg-surface)); --public-footer-fg: var(--color-fg); --public-footer-muted: var(--color-fg-muted); } body[data-ui-page="landing"] main { position: relative; isolation: isolate; } body[data-ui-page="landing"] :where(h1, h2, h3) { color: inherit; font-family: var(--font-title); text-wrap: balance; } body[data-ui-page="landing"] :where(p, li, dd) { text-wrap: pretty; } body[data-ui-page="landing"] :where(a, button, input, select, textarea) { -webkit-tap-highlight-color: transparent; } body[data-ui-page="landing"] :where(a, button, input, select, textarea):focus-visible { outline: 3px solid color-mix(in srgb, var(--color-focus) 40%, transparent); outline-offset: 3px; } body[data-ui-page="landing"] :where(.landing-theme-button, .landing-menu-button):focus:not(:focus-visible), body[data-ui-page="landing"][data-public-input="pointer"] :where(.landing-theme-button, .landing-menu-button):focus-visible { outline: 0; box-shadow: none; } /* Tipografía y acciones -------------------------------------------------------- */ .landing-public-eyebrow, .landing-ui-eyebrow, .landing-eyebrow, .landing-kicker { display: inline-flex; align-items: center; gap: var(--space-sm); color: var(--public-accent-fg); font-family: var(--font-body); font-size: .72rem; font-weight: var(--font-weight-bold); letter-spacing: .14em; line-height: 1.2; text-transform: uppercase; } .landing-public-eyebrow::before { width: 18px; height: 1px; content: ""; background: currentColor; } .landing-button { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: var(--space-sm); padding: 0 19px; border: 1px solid transparent; border-radius: var(--radius-control); cursor: pointer; font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); line-height: 1; transition: color var(--motion-duration-standard) var(--motion-ease-standard), background var(--motion-duration-standard) var(--motion-ease-standard), border-color var(--motion-duration-standard) var(--motion-ease-standard), transform var(--motion-duration-standard) var(--motion-ease-standard), box-shadow var(--motion-duration-standard) var(--motion-ease-standard); } .landing-button svg { width: 17px; height: 17px; flex: 0 0 auto; transition: transform var(--motion-duration-standard) var(--motion-ease-standard); } body[data-ui-page="landing"] .landing-button .brand-icon.fa-whatsapp { display: inline-flex; width: 17px; height: 17px; flex: 0 0 17px; align-items: center; justify-content: center; font-size: 17px; line-height: 1; vertical-align: middle; } .landing-button:hover { transform: translateY(-1px); } .landing-button--primary:hover svg:last-child { transform: translateX(3px); } .landing-button--primary { color: var(--color-on-emphasis); background: var(--public-accent); box-shadow: none; } .landing-button--primary:hover { color: var(--color-on-emphasis); background: var(--color-accent-hover); box-shadow: none; } body[data-ui-page="landing"] :where(.landing-button--primary, .landing-nav-cta) { color: var(--color-on-emphasis); } body[data-ui-page="landing"] :where(.landing-button--primary, .landing-nav-cta):hover { color: var(--color-on-emphasis); } .landing-button--secondary { color: var(--public-ink); border-color: var(--public-line-strong); background: var(--public-surface); box-shadow: var(--shadow-subtle); } .landing-button--secondary:hover { border-color: var(--public-line-strong); background: var(--public-surface-soft); } .landing-button--ghost { color: var(--public-muted); border-color: transparent; background: transparent; } .landing-button--ghost:hover { color: var(--public-ink); background: var(--public-surface-soft); } .landing-button:disabled, .landing-button[aria-busy="true"] { cursor: wait; opacity: .64; transform: none; } .landing-text-link, .landing-section-link { display: inline-flex; align-items: center; gap: var(--space-sm); color: var(--public-accent-fg); font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); } .landing-text-link svg, .landing-section-link svg { width: 16px; height: 16px; transition: transform var(--motion-duration-standard) var(--motion-ease-standard); } .landing-text-link:hover svg, .landing-section-link:hover svg { transform: translateX(3px); } .landing-button:active { transform: translateY(0) scale(.985); } .landing-text-link:active, .landing-section-link:active { color: var(--public-ink); } .landing-ui-status { display: inline-flex; min-height: 30px; align-items: center; gap: var(--space-sm); padding: 0 var(--space-md); color: var(--public-muted); border: 1px solid var(--public-line); border-radius: var(--radius-full); background: var(--public-surface-soft); font-size: var(--font-size-xs); font-style: normal; font-weight: var(--font-weight-semibold); white-space: nowrap; } .landing-ui-status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .landing-ui-status--success { color: var(--color-success-fg); border-color: var(--color-success-border); background: var(--color-success-surface); } /* Encabezado y navegación -------------------------------------------------- */ .landing-header { position: sticky; z-index: var(--z-sticky); top: 0; width: 100%; border-bottom: 1px solid transparent; background: color-mix(in srgb, var(--public-canvas) 88%, transparent); backdrop-filter: saturate(150%) blur(16px); transition: border-color var(--motion-duration-standard) var(--motion-ease-standard), box-shadow var(--motion-duration-standard) var(--motion-ease-standard), background var(--motion-duration-standard) var(--motion-ease-standard); } .landing-header.is-scrolled { border-bottom-color: var(--public-line); background: color-mix(in srgb, var(--public-canvas) 96%, transparent); box-shadow: var(--shadow-subtle); } .landing-header__inner { display: flex; min-height: var(--public-header-height); align-items: center; gap: var(--space-3xl); } .landing-brand { display: inline-flex; min-width: 190px; align-items: center; gap: var(--space-md); flex: 0 0 auto; } .landing-brand__logo { display: grid; width: 39px; height: 43px; flex: 0 0 39px; place-items: center; } .landing-brand__logo img { width: 100%; height: 100%; object-fit: contain; } .landing-brand__text { display: grid; gap: 2px; } .landing-brand__text strong { color: var(--public-ink); font-family: var(--font-title); font-size: var(--font-size-lg); letter-spacing: -.02em; } .landing-brand__text small { color: var(--public-subtle); font-size: .7rem; letter-spacing: .015em; } .landing-navigation { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: var(--space-xl); flex: 1; } .landing-navigation__primary, .landing-navigation__actions { display: flex; align-items: center; gap: 4px; } .landing-navigation__primary > a, .landing-nav-mega__trigger, .landing-nav-account { display: inline-flex; min-height: 38px; align-items: center; gap: 5px; padding: 0 11px; color: var(--public-muted); border: 0; border-radius: var(--radius-control); background: transparent; cursor: pointer; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); white-space: nowrap; transition: color var(--motion-duration-fast) ease, background var(--motion-duration-fast) ease; } .landing-navigation__primary > a:hover, .landing-nav-mega__trigger:hover, .landing-navigation__primary > a.is-active, .landing-nav-mega__trigger.is-active, .landing-nav-mega__trigger[aria-expanded="true"], .landing-nav-account:hover, .landing-nav-account.is-active { color: var(--public-ink); background: var(--public-surface-soft); } .landing-nav-mega__trigger svg { width: 14px; height: 14px; transition: transform var(--motion-duration-standard) var(--motion-ease-standard); } .landing-nav-mega__trigger[aria-expanded="true"] svg { transform: rotate(180deg); } .landing-navigation__actions { padding-left: var(--space-lg); border-left: 1px solid var(--public-line); } .landing-nav-cta, .landing-nav-login { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; padding: 0 15px; border-radius: var(--radius-control); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); white-space: nowrap; } .landing-nav-cta { color: var(--color-on-emphasis); background: var(--public-accent); } .landing-nav-cta:hover { color: var(--color-on-emphasis); background: var(--color-accent-hover); } .landing-nav-login { color: var(--public-ink); border: 1px solid var(--public-line-strong); background: var(--public-surface); } .landing-nav-login:hover { border-color: var(--public-line-strong); background: var(--public-surface-soft); } .landing-header__actions { display: flex; align-items: center; gap: var(--space-sm); flex: 0 0 auto; } .landing-theme-button, .landing-menu-button { display: inline-grid; width: 42px; height: 42px; min-width: 42px; padding: 0; place-items: center; color: var(--public-muted); border: 1px solid var(--public-line); border-radius: var(--radius-control); background: var(--public-surface); cursor: pointer; } .landing-theme-button:hover, .landing-menu-button:hover { color: var(--public-ink); border-color: var(--public-line-strong); background: var(--public-surface-soft); } .landing-theme-button svg, .landing-menu-button svg { width: 18px; height: 18px; } [data-public-theme="light"] [data-public-theme-icon="dark"], [data-public-theme="dark"] [data-public-theme-icon="light"], .landing-menu-button [data-menu-icon="close"], .landing-menu-button[aria-expanded="true"] [data-menu-icon="open"] { display: none; } .landing-menu-button[aria-expanded="true"] [data-menu-icon="close"] { display: inline-flex; } .landing-menu-button [data-menu-icon][hidden] { display: none; } .landing-menu-button { display: none; } .landing-nav-mega { position: relative; } .landing-mega-menu { position: absolute; top: calc(100% + 17px); left: -170px; display: grid; width: min(1040px, calc(100vw - 56px)); grid-template-columns: 230px minmax(0, 1fr) 220px; overflow: hidden; color: var(--public-ink); border: 1px solid var(--public-line-strong); border-radius: var(--radius-shell); background: var(--public-surface-raised); box-shadow: var(--shadow-overlay); } .landing-mega-menu[hidden] { display: none; } .landing-mega-menu__intro, .landing-mega-menu__directory, .landing-mega-menu__rail { padding: 26px; } .landing-mega-menu__intro { display: flex; align-items: flex-start; flex-direction: column; border-right: 1px solid var(--public-line); background: var(--public-surface-soft); } .landing-mega-menu__intro h2 { margin-top: 18px; font-size: 1.35rem; line-height: 1.2; letter-spacing: -.035em; } .landing-mega-menu__intro p { margin-top: var(--space-md); color: var(--public-muted); font-size: var(--font-size-sm); line-height: 1.65; } .landing-mega-menu__intro .landing-text-link { margin-top: auto; padding-top: var(--space-2xl); } .landing-mega-menu__directory { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm) var(--space-lg); } .landing-mega-menu__directory > div { display: grid; align-content: start; gap: var(--space-xs); } .landing-mega-menu__directory a { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-md); padding: 12px; border-radius: var(--radius-surface); transition: background var(--motion-duration-fast) ease; } .landing-mega-menu__directory a:hover { background: var(--public-surface-soft); } .landing-mega-menu__directory a > span:first-child { display: grid; width: 32px; height: 32px; place-items: center; color: var(--public-muted); border: 1px solid var(--public-line); border-radius: var(--radius-control); background: var(--public-surface-soft); } .landing-mega-menu__directory svg { width: 16px; height: 16px; } .landing-mega-menu__directory a > span:last-child { display: grid; gap: 4px; } .landing-mega-menu__directory strong { font-size: var(--font-size-sm); line-height: 1.35; } .landing-mega-menu__directory small { display: -webkit-box; overflow: hidden; color: var(--public-subtle); font-size: .7rem; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .landing-mega-menu__rail { display: grid; align-content: stretch; gap: 1px; padding: 0; border-left: 1px solid var(--public-line); background: var(--public-line); } .landing-mega-menu__rail a { display: flex; align-items: flex-start; justify-content: center; flex-direction: column; gap: var(--space-xs); padding: 24px; background: var(--public-surface); } .landing-mega-menu__rail a:hover { background: var(--public-surface-soft); } .landing-mega-menu__rail span { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); } .landing-mega-menu__rail svg { width: 17px; height: 17px; color: var(--public-muted); } .landing-mega-menu__rail small { color: var(--public-subtle); font-size: var(--font-size-xs); } .landing-navigation-backdrop { position: fixed; z-index: calc(var(--z-sticky) - 1); inset: var(--public-header-height) 0 0; background: var(--color-overlay); } .landing-navigation-backdrop[hidden] { display: none; } .landing-public-notice { position: relative; z-index: 2; padding-top: var(--space-lg); } /* Lenguaje reutilizable de secciones públicas --------------------------------------- */ .public-section { position: relative; padding-block: clamp(76px, 8vw, 116px); } .public-section--surface { border-block: 1px solid var(--public-line); background: var(--public-surface); } .public-section-heading { display: grid; max-width: 720px; gap: var(--space-xl); } .public-section-heading h2 { font-size: clamp(2.15rem, 4.2vw, 4rem); line-height: 1.02; letter-spacing: -.055em; } .public-section-heading > p, .public-section-heading > div + p { max-width: 620px; color: var(--public-muted); font-size: clamp(1rem, 1.35vw, 1.15rem); line-height: 1.72; } .public-section-heading--split { max-width: none; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .65fr); align-items: end; gap: clamp(40px, 8vw, 120px); } .public-section-heading--split > div { display: grid; gap: var(--space-xl); } .public-section-heading--sticky { position: sticky; top: calc(var(--public-header-height) + 40px); align-self: start; } /* Service explorer ------------------------------------------------------- */ .public-service-explorer { display: grid; grid-template-columns: minmax(260px, .72fr) minmax(0, 1.65fr); margin-top: clamp(44px, 6vw, 72px); overflow: hidden; border: 1px solid var(--public-line-strong); border-radius: var(--radius-shell); background: var(--public-surface); box-shadow: var(--shadow-floating); } .public-service-explorer__tabs { display: grid; align-content: start; padding: 12px; border-right: 1px solid var(--public-line); background: var(--public-surface-soft); } .public-service-explorer__tabs button { display: grid; min-height: 58px; grid-template-columns: 32px minmax(0, 1fr) 18px; align-items: center; gap: var(--space-md); padding: 9px 12px; color: var(--public-muted); border: 0; border-radius: var(--radius-control); background: transparent; cursor: pointer; text-align: left; transition: color var(--motion-duration-fast) ease, background var(--motion-duration-fast) ease, box-shadow var(--motion-duration-fast) ease; } .public-service-explorer__tabs button:hover { color: var(--public-ink); background: color-mix(in srgb, var(--public-surface) 70%, transparent); } .public-service-explorer__tabs button[aria-selected="true"] { color: var(--public-ink); background: var(--public-surface); box-shadow: var(--shadow-subtle); } .public-service-explorer__tabs button > span:first-child { display: grid; width: 32px; height: 32px; place-items: center; color: var(--public-muted); border-radius: var(--radius-control); background: var(--public-surface-soft); } .public-service-explorer__tabs button svg { width: 16px; height: 16px; } .public-service-explorer__tabs button > svg:last-child { color: var(--public-subtle); } .public-service-explorer__tabs button > span:nth-child(2) { display: grid; gap: 2px; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); line-height: 1.25; } .public-service-explorer__tabs button small { color: var(--public-subtle); font-size: .7rem; font-weight: var(--font-weight-medium); letter-spacing: .08em; text-transform: uppercase; } .public-service-explorer__stage { position: relative; min-width: 0; } .public-service-explorer__stage [data-service-panel] { position: relative; display: grid; min-height: 490px; grid-template-columns: minmax(0, 1.1fr) minmax(220px, .7fr); align-content: center; gap: clamp(30px, 5vw, 72px); padding: clamp(38px, 6vw, 76px); overflow: hidden; border-bottom: 1px solid var(--public-line); } .public-service-explorer.is-enhanced [data-service-panel] { border-bottom: 0; } .public-service-explorer__stage [data-service-panel][hidden] { display: none; } .public-service-panel__copy, .public-service-panel__detail { position: relative; z-index: 1; } .public-service-panel__copy { display: grid; gap: var(--space-xl); } .public-service-panel__copy h3 { max-width: 650px; font-size: clamp(2rem, 4vw, 3.65rem); line-height: 1.04; letter-spacing: -.055em; } .public-service-panel__copy p { max-width: 600px; color: var(--public-muted); font-size: var(--font-size-lg); line-height: 1.75; } .public-service-panel__detail { display: grid; gap: var(--space-lg); padding-left: clamp(0px, 3vw, 34px); border-left: 1px solid var(--public-line); } .public-service-panel__detail > small { color: var(--public-subtle); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); letter-spacing: .09em; text-transform: uppercase; } .public-service-panel__detail ul { display: grid; gap: var(--space-md); } .public-service-panel__detail li { display: grid; grid-template-columns: 7px minmax(0, 1fr); align-items: center; gap: var(--space-sm); color: var(--public-muted); font-size: var(--font-size-sm); } .public-service-panel__detail li::before { width: 6px; height: 6px; content: ""; border-radius: 50%; background: var(--public-line-strong); } .public-service-panel__result { position: relative; z-index: 1; display: grid; grid-column: 1 / -1; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: var(--space-lg); padding-top: var(--space-2xl); border-top: 1px solid var(--public-line); } .public-service-panel__result > span { display: grid; width: 38px; height: 38px; place-items: center; color: var(--public-muted); border: 1px solid var(--public-line); border-radius: var(--radius-control); background: var(--public-surface-soft); } .public-service-panel__result svg { width: 17px; height: 17px; } .public-service-panel__result div { display: grid; gap: 3px; } .public-service-panel__result small { color: var(--public-subtle); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; } .public-service-panel__result strong { font-size: var(--font-size-sm); } /* Formularios ------------------------------------------------------------ */ .landing-form { display: grid; gap: 30px; } .public-request-form { min-width: 0; overflow: hidden; border: 1px solid var(--public-line-strong); border-radius: var(--radius-shell); background: var(--public-surface); box-shadow: var(--shadow-floating); } .public-request-form__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2xl); padding: clamp(28px, 4vw, 46px); border-bottom: 1px solid var(--public-line); } .public-request-form__header > div { display: grid; gap: var(--space-md); } .public-request-form__header h2 { font-size: clamp(1.75rem, 3vw, 2.65rem); letter-spacing: -.045em; } .public-request-form__header p { max-width: 580px; color: var(--public-muted); line-height: 1.65; } .public-request-form__header > span { display: inline-flex; align-items: center; gap: var(--space-sm); color: var(--public-muted); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); white-space: nowrap; } .public-request-form__header > span svg { width: 16px; height: 16px; color: var(--color-success-fg); } .public-request-form > .landing-request-feedback, .public-request-form > .landing-form-guidance, .public-request-form > form { margin-inline: clamp(28px, 4vw, 46px); } .public-request-form > .landing-request-feedback { margin-top: clamp(28px, 4vw, 46px); } .public-request-form > form, .public-request-form > .landing-form-guidance { margin-block: clamp(28px, 4vw, 46px); } .public-form-step { display: grid; min-width: 0; gap: var(--space-2xl); padding: 0 0 30px; border: 0; border-bottom: 1px solid var(--public-line); } .public-form-step legend { display: flex; width: 100%; align-items: center; gap: var(--space-lg); padding: 0; } .public-form-step legend > span:first-child { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; color: var(--public-muted); border: 1px solid var(--public-line-strong); border-radius: var(--radius-full); background: var(--public-surface-soft); font-size: .7rem; font-weight: var(--font-weight-bold); } .public-form-step legend > span:last-child { display: grid; gap: 3px; } .public-form-step legend strong { color: var(--public-ink); font-family: var(--font-title); font-size: var(--font-size-lg); } .public-form-step legend small { color: var(--public-subtle); font-size: var(--font-size-xs); } .landing-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl); } .landing-field { display: grid; min-width: 0; align-content: start; gap: var(--space-sm); } .landing-field--full { grid-column: 1 / -1; } .landing-field label { color: var(--public-ink); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); } .landing-field label span { color: var(--public-subtle); font-size: var(--font-size-xs); font-weight: var(--font-weight-regular); } body[data-ui-page="landing"] .landing-field input:not([type="checkbox"]):not([type="radio"]), body[data-ui-page="landing"] .landing-field select, body[data-ui-page="landing"] .landing-field textarea { width: 100%; color: var(--public-ink); border: 1px solid var(--public-border-strong); border-radius: var(--radius-control); background: var(--public-surface-raised); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--public-surface) 72%, transparent); transition: border-color var(--motion-duration-fast) ease, box-shadow var(--motion-duration-fast) ease, background var(--motion-duration-fast) ease; } body[data-ui-page="landing"] .landing-field input:not([type="checkbox"]):not([type="radio"]), body[data-ui-page="landing"] .landing-field select { min-height: 48px; padding: 0 13px; } body[data-ui-page="landing"] .landing-field textarea { min-height: 148px; padding: 13px; line-height: 1.6; resize: vertical; } body[data-ui-page="landing"] .landing-field input::placeholder, body[data-ui-page="landing"] .landing-field textarea::placeholder { color: var(--public-control-placeholder); } body[data-ui-page="landing"] .landing-field input:not([type="checkbox"]):not([type="radio"]):hover, body[data-ui-page="landing"] .landing-field select:hover, body[data-ui-page="landing"] .landing-field textarea:hover { border-color: var(--public-line-strong); } body[data-ui-page="landing"] .landing-field input:not([type="checkbox"]):not([type="radio"]):focus, body[data-ui-page="landing"] .landing-field select:focus, body[data-ui-page="landing"] .landing-field textarea:focus { color: var(--public-ink); caret-color: var(--public-ink); border-color: var(--public-accent-line); outline: 0; background: var(--public-surface-raised); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-focus) 18%, transparent); } body[data-ui-page="landing"] .landing-field input:disabled, body[data-ui-page="landing"] .landing-field select:disabled, body[data-ui-page="landing"] .landing-field textarea:disabled { color: var(--color-fg-disabled); background: var(--color-bg-disabled); cursor: not-allowed; } body[data-ui-page="landing"] .landing-field input[aria-invalid="true"], body[data-ui-page="landing"] .landing-field select[aria-invalid="true"], body[data-ui-page="landing"] .landing-field textarea[aria-invalid="true"], body[data-ui-page="landing"] .landing-field input:user-invalid, body[data-ui-page="landing"] .landing-field select:user-invalid, body[data-ui-page="landing"] .landing-field textarea:user-invalid { border-color: var(--color-danger-border); } body[data-ui-page="landing"] .landing-field input:-webkit-autofill, body[data-ui-page="landing"] .landing-field input:-webkit-autofill:hover, body[data-ui-page="landing"] .landing-field input:-webkit-autofill:active, body[data-ui-page="landing"] .landing-field input:autofill, body[data-ui-page="landing"] .landing-field input:autofill:hover, body[data-ui-page="landing"] .landing-field input:autofill:active { color: var(--public-ink); -webkit-text-fill-color: var(--public-ink); caret-color: var(--public-ink); background-color: var(--public-surface-raised); -webkit-box-shadow: 0 0 0 1000px var(--public-surface-raised) inset; box-shadow: 0 0 0 1000px var(--public-surface-raised) inset; } body[data-ui-page="landing"] .landing-field input:-webkit-autofill:focus, body[data-ui-page="landing"] .landing-field input:autofill:focus { color: var(--public-ink); -webkit-text-fill-color: var(--public-ink); caret-color: var(--public-ink); border-color: var(--public-accent-line); outline: 0; background-color: var(--public-surface-raised); -webkit-box-shadow: 0 0 0 1000px var(--public-surface-raised) inset, 0 0 0 3px color-mix(in srgb, var(--color-focus) 18%, transparent); box-shadow: 0 0 0 1000px var(--public-surface-raised) inset, 0 0 0 3px color-mix(in srgb, var(--color-focus) 18%, transparent); } .landing-field-help, .landing-field-meta { color: var(--public-subtle); font-size: var(--font-size-xs); line-height: 1.45; } .landing-field-meta { display: flex; justify-content: space-between; gap: var(--space-md); } .landing-field-meta small { flex: 0 0 auto; font-size: inherit; } .landing-form-legal { display: grid; gap: var(--space-xl); padding: var(--space-xl); border: 1px solid var(--public-line); border-radius: var(--radius-elevated); background: var(--public-surface-soft); } .landing-form-legal__header { display: flex; align-items: flex-start; gap: var(--space-md); } .landing-form-legal__header > svg { width: 21px; height: 21px; flex: 0 0 21px; margin-top: 2px; color: var(--color-success-fg); } .landing-form-legal__header > div { display: grid; gap: var(--space-xs); } .landing-form-legal__header h3 { font-size: var(--font-size-lg); } .landing-form-legal__header p { color: var(--public-muted); font-size: var(--font-size-sm); line-height: 1.5; } .landing-form-consents { display: grid; gap: var(--space-md); } .landing-consent { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: var(--space-md); color: var(--public-muted); cursor: pointer; font-size: var(--font-size-xs); line-height: 1.55; } body[data-ui-page="landing"] .landing-consent input[type="checkbox"] { display: grid; box-sizing: border-box; width: 20px; height: 20px; margin: 1px 0 0; padding: 0; place-content: center; appearance: none; color: var(--color-control-checked-fg); border: 1px solid var(--public-border-strong); border-radius: 5px; background: var(--public-surface-raised); box-shadow: none; cursor: pointer; transition: background-color var(--motion-duration-fast) var(--motion-ease-standard), border-color var(--motion-duration-fast) var(--motion-ease-standard), box-shadow var(--motion-duration-fast) var(--motion-ease-standard); } body[data-ui-page="landing"] .landing-consent input[type="checkbox"]::before { width: 5px; height: 9px; border: solid currentColor; border-width: 0 2px 2px 0; content: ""; opacity: 0; transform: translateY(-1px) rotate(45deg) scale(.7); transform-origin: center; transition: opacity var(--motion-duration-fast) var(--motion-ease-standard), transform var(--motion-duration-fast) var(--motion-ease-standard); } body[data-ui-page="landing"] .landing-consent input[type="checkbox"]:hover { border-color: var(--color-border-default); background: var(--color-bg-hover); } body[data-ui-page="landing"] .landing-consent input[type="checkbox"]:checked { border-color: var(--color-control-checked-bg); background: var(--color-control-checked-bg); } body[data-ui-page="landing"] .landing-consent input[type="checkbox"]:checked::before { opacity: 1; transform: translateY(-1px) rotate(45deg) scale(1); } body[data-ui-page="landing"] .landing-consent input[type="checkbox"]:is([aria-invalid="true"], :user-invalid) { border-color: var(--color-danger-border); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger-fg) 12%, transparent); } body[data-ui-page="landing"] .landing-consent input[type="checkbox"]:focus-visible { outline: 3px solid color-mix(in srgb, var(--color-focus) 32%, transparent); outline-offset: 3px; } body[data-ui-page="landing"] .landing-consent input[type="checkbox"]:disabled { color: var(--color-fg-disabled); border-color: var(--public-line); background: var(--color-bg-disabled); cursor: not-allowed; } .landing-consent a { color: var(--public-accent-fg); font-weight: var(--font-weight-semibold); text-decoration: underline; text-underline-offset: 2px; } body[data-ui-page="landing"] .landing-consent:hover { color: var(--public-ink); } .landing-form-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xl); } .landing-form-actions__state { display: flex; min-width: 0; align-items: flex-start; gap: var(--space-md); } .landing-form-actions__state > div { display: grid; gap: 3px; } .landing-form-actions__state strong { font-size: var(--font-size-sm); } .landing-form-status { color: var(--public-subtle); font-size: var(--font-size-xs); line-height: 1.45; } .landing-form-actions__indicator { width: 9px; height: 9px; flex: 0 0 9px; margin-top: 5px; border-radius: 50%; background: var(--color-warning-fg); box-shadow: 0 0 0 5px var(--color-warning-surface); } .landing-form-actions__indicator--success { background: var(--color-success-fg); box-shadow: 0 0 0 5px var(--color-success-surface); } .landing-form-guidance article, .landing-request-feedback .alert { padding: var(--space-lg); border: 1px solid var(--public-line-strong); border-radius: var(--radius-control); background: var(--public-surface-soft); } .landing-form-guidance article { display: flex; align-items: flex-start; gap: var(--space-md); } .landing-form-guidance article > svg { width: 19px; height: 19px; flex: 0 0 19px; color: var(--public-muted); } .landing-form-guidance article div { display: grid; gap: var(--space-xs); } .landing-form-guidance article span { color: var(--public-muted); font-size: var(--font-size-sm); } /* Service scope ---------------------------------------------------------- */ .landing-service-scope { overflow: hidden; border: 1px solid var(--public-line-strong); border-radius: var(--radius-shell); background: var(--public-surface); } .landing-service-close__header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .65fr); align-items: end; gap: clamp(40px, 7vw, 100px); padding: clamp(30px, 5vw, 60px); border-bottom: 1px solid var(--public-line); } .landing-service-close__header > div { display: grid; gap: var(--space-xl); } .landing-service-close__header h2 { font-size: clamp(2rem, 4vw, 3.5rem); letter-spacing: -.05em; } .landing-service-close__header > p { color: var(--public-muted); line-height: 1.7; } .landing-service-close__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .landing-scope-panel { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-xl); padding: clamp(30px, 5vw, 54px); } .landing-scope-panel + .landing-scope-panel { border-left: 1px solid var(--public-line); } .landing-service-close__icon { display: grid; width: 40px; height: 40px; place-items: center; color: var(--public-muted); border-radius: var(--radius-control); background: var(--public-surface-soft); } .landing-service-close__icon svg { width: 19px; height: 19px; } .landing-scope-panel > div { display: grid; gap: var(--space-md); } .landing-scope-panel ul { display: grid; gap: var(--space-sm); } .landing-scope-panel li, .landing-scope-panel p, .landing-scope-panel small { color: var(--public-muted); font-size: var(--font-size-sm); line-height: 1.55; } .landing-scope-panel li::before { margin-right: var(--space-sm); color: var(--color-success-fg); content: "✓"; } .landing-scope-panel a { display: inline-flex; align-items: center; gap: var(--space-sm); color: var(--public-accent-fg); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); } /* Legal ------------------------------------------------------------------ */ .landing-legal { padding-block: 46px clamp(80px, 10vw, 130px); } .landing-legal__container { display: grid; grid-template-columns: minmax(200px, .38fr) minmax(0, 1fr); gap: 0 clamp(50px, 9vw, 130px); } .landing-back-link { display: inline-flex; grid-column: 1 / -1; align-items: center; gap: var(--space-sm); justify-self: start; margin-bottom: 46px; color: var(--public-muted); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); } .landing-back-link:hover { color: var(--public-accent-fg); } .landing-back-link svg { width: 17px; height: 17px; } .landing-legal__header { grid-column: 1 / -1; display: grid; max-width: 900px; gap: var(--space-xl); margin-bottom: clamp(52px, 8vw, 90px); } .landing-legal__header h1 { font-size: clamp(2.6rem, 6vw, 5.4rem); line-height: .98; letter-spacing: -.065em; } .landing-legal__header p { color: var(--public-subtle); font-size: var(--font-size-sm); } .landing-legal__toc { position: sticky; top: calc(var(--public-header-height) + 40px); display: grid; align-self: start; gap: 4px; padding-left: var(--space-lg); border-left: 1px solid var(--public-line-strong); } .landing-legal__toc strong { margin-bottom: var(--space-md); font-size: var(--font-size-xs); letter-spacing: .08em; text-transform: uppercase; } .landing-legal__toc a { padding-block: var(--space-sm); color: var(--public-muted); font-size: var(--font-size-sm); } .landing-legal__toc a:hover { color: var(--public-accent-fg); } .landing-legal__content { min-width: 0; } .landing-legal__content section { display: grid; gap: var(--space-lg); padding-block: 0 34px; margin-bottom: 34px; border-bottom: 1px solid var(--public-line); scroll-margin-top: calc(var(--public-header-height) + 36px); } .landing-legal__content section:last-child { margin-bottom: 0; } .landing-legal__content h2 { font-size: clamp(1.3rem, 2vw, 1.7rem); letter-spacing: -.03em; } .landing-legal__content :where(p, li) { color: var(--public-muted); font-size: .98rem; line-height: 1.82; } .landing-legal__content :where(ul, ol) { display: grid; gap: var(--space-sm); padding-left: var(--space-xl); list-style: initial; } .landing-legal__content a { color: var(--public-accent-fg); text-decoration: underline; text-underline-offset: 3px; } /* Pie de página ----------------------------------------------------------------- */ .landing-footer { position: relative; padding-top: 72px; color: var(--public-footer-fg); border-top: 1px solid color-mix(in srgb, var(--public-footer-fg) 12%, transparent); background: var(--public-footer-bg); } .landing-footer :where(h2, strong) { color: var(--public-footer-fg); } .landing-footer__lead { display: flex; align-items: end; justify-content: center; gap: clamp(32px, 4vw, 56px); padding-bottom: 54px; border-bottom: 1px solid color-mix(in srgb, var(--public-footer-fg) 14%, transparent); } .landing-footer__lead > div { display: grid; width: min(100%, 620px); flex: 0 1 620px; gap: var(--space-xl); } .landing-footer__lead .landing-button { flex: 0 0 auto; } .landing-footer__lead h2 { font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.04; letter-spacing: -.05em; } .landing-footer__lead .landing-public-eyebrow { color: color-mix(in srgb, var(--public-footer-fg) 68%, transparent); } .landing-footer__grid { display: grid; grid-template-columns: minmax(260px, 1.35fr) repeat(2, minmax(150px, .62fr)) minmax(210px, .8fr); gap: clamp(34px, 6vw, 80px); padding-block: 54px; } .landing-brand--footer { min-width: 0; } .landing-brand--footer .landing-brand__text strong { color: var(--public-footer-fg); } .landing-brand--footer .landing-brand__text small { color: var(--public-footer-muted); } .landing-footer__brand-column, .landing-footer__nav-column, .landing-footer__contact-column { display: grid; align-content: start; gap: var(--space-xl); } .landing-footer__brand-column > p, .landing-footer__contact-column > p { max-width: 380px; color: var(--public-footer-muted); font-size: var(--font-size-sm); line-height: 1.7; } .landing-footer__availability { display: inline-flex; align-items: center; gap: var(--space-sm); color: var(--public-footer-muted); font-size: var(--font-size-xs); } .landing-footer__availability i { width: 7px; height: 7px; border-radius: 50%; background: var(--color-success-fg); } .landing-footer__grid h2 { font-family: var(--font-body); font-size: var(--font-size-xs); letter-spacing: .1em; text-transform: uppercase; } .landing-footer__grid ul, .landing-footer__contact-actions { display: grid; gap: var(--space-md); } .landing-footer__grid li, .landing-footer__grid li a, .landing-footer__contact-actions :where(a, span) { color: var(--public-footer-muted); font-size: var(--font-size-sm); line-height: 1.45; } .landing-footer__grid li a:hover, .landing-footer__contact-actions a:hover { color: var(--public-footer-fg); } .landing-footer__whatsapp { display: inline-flex; align-items: center; gap: var(--space-sm); justify-self: start; color: var(--public-footer-fg); font-weight: var(--font-weight-semibold); } .landing-footer__whatsapp svg { width: 18px; height: 18px; } .landing-footer__bottom { display: grid; grid-template-columns: 1fr auto 42px; align-items: center; gap: var(--space-2xl); min-height: 76px; border-top: 1px solid color-mix(in srgb, var(--public-footer-fg) 14%, transparent); } .landing-footer__bottom p, .landing-footer__bottom a { color: var(--public-footer-muted); font-size: var(--font-size-xs); } .landing-footer__bottom nav { display: flex; gap: var(--space-xl); } .landing-footer__bottom a:hover { color: var(--public-footer-fg); } .landing-footer__top { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid color-mix(in srgb, var(--public-footer-fg) 20%, transparent); border-radius: var(--radius-full); } .landing-footer__top svg { width: 16px; height: 16px; } /* Cotización pública firmada ---------------------------------------------------- */ .public-quote-page { min-height: 100dvh; padding: clamp(24px, 5vw, 64px); background: var(--public-canvas, var(--color-bg-app)); } .public-quote-standalone-shell { width: min(100%, 1020px); margin-inline: auto; } .public-quote-standalone-brand { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xl); margin-bottom: var(--space-xl); } .public-quote-standalone-brand__identity, .public-quote-standalone-brand__security { display: flex; align-items: center; gap: var(--space-md); } .public-quote-standalone-brand__identity img { width: 36px; height: 42px; object-fit: contain; } .public-quote-standalone-brand__identity div { display: grid; gap: 2px; } .public-quote-standalone-brand__identity span, .public-quote-standalone-brand__security { color: var(--public-muted, var(--color-fg-muted)); font-size: var(--font-size-xs); } .public-quote-standalone-brand__security svg { width: 16px; height: 16px; color: var(--color-success-fg); } .public-quote-document { overflow: hidden; border: 1px solid var(--public-line-strong, var(--color-border-default)); border-radius: var(--radius-shell); background: var(--public-surface, var(--color-bg-surface)); box-shadow: var(--shadow-floating); } .public-quote-document__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2xl); padding: clamp(28px, 5vw, 52px); border-bottom: 1px solid var(--public-line, var(--color-border-subtle)); } .public-quote-document__identity { display: flex; min-width: 0; align-items: flex-start; gap: var(--space-lg); } .public-quote-document__icon { display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; color: var(--public-muted, var(--color-fg-muted)); border-radius: var(--radius-control); background: var(--public-surface-soft, var(--color-bg-subtle)); } .public-quote-document__icon svg { width: 20px; height: 20px; } .public-quote-document__identity > div, .public-quote-document__status { display: grid; gap: var(--space-sm); } .public-quote-document__identity h1 { font-size: clamp(2rem, 5vw, 3.5rem); letter-spacing: -.05em; } .public-quote-document__identity p { color: var(--public-muted, var(--color-fg-muted)); } .public-quote-document__status { justify-items: end; text-align: right; } .public-quote-document__status > strong { font-size: clamp(1.5rem, 3vw, 2.25rem); } .public-quote-document__status small { color: var(--public-subtle, var(--color-fg-subtle)); } .public-quote-feedback, .public-quote-facts, .public-quote-table-wrap, .public-quote-totals, .public-quote-notes, .public-quote-actions { margin: clamp(24px, 4vw, 42px); } .public-quote-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--public-line, var(--color-border-subtle)); } .public-quote-facts > div { display: grid; gap: var(--space-sm); padding: var(--space-xl); border-right: 1px solid var(--public-line, var(--color-border-subtle)); } .public-quote-facts > div:last-child { border-right: 0; } .public-quote-facts span, .public-quote-notes > span { color: var(--public-subtle, var(--color-fg-subtle)); font-size: var(--font-size-xs); letter-spacing: .08em; text-transform: uppercase; } .public-quote-table-wrap { overflow-x: auto; border: 1px solid var(--public-line, var(--color-border-subtle)); border-radius: var(--radius-elevated); } .public-quote-table { width: 100%; border-collapse: collapse; } .public-quote-table th, .public-quote-table td { padding: var(--space-lg); border-bottom: 1px solid var(--public-line, var(--color-border-subtle)); text-align: right; } .public-quote-table th:first-child, .public-quote-table td:first-child { text-align: left; } .public-quote-table th { color: var(--public-subtle, var(--color-fg-subtle)); background: var(--public-surface-soft, var(--color-bg-subtle)); font-size: var(--font-size-xs); letter-spacing: .06em; text-transform: uppercase; } .public-quote-table td { color: var(--public-muted, var(--color-fg-muted)); font-size: var(--font-size-sm); } .public-quote-table td:first-child { display: grid; gap: var(--space-xs); } .public-quote-table td small { color: var(--public-subtle, var(--color-fg-subtle)); } .public-quote-totals { display: grid; width: min(100%, 410px); gap: var(--space-sm); margin-left: auto; } .public-quote-totals > div { display: flex; justify-content: space-between; gap: var(--space-xl); padding-block: var(--space-sm); color: var(--public-muted, var(--color-fg-muted)); } .public-quote-totals__final { margin-top: var(--space-sm); padding-top: var(--space-lg); color: var(--public-ink, var(--color-fg)); border-top: 1px solid var(--public-line-strong, var(--color-border-default)); font-size: var(--font-size-xl); } .public-quote-notes { display: grid; gap: var(--space-md); padding: var(--space-xl); border-radius: var(--radius-elevated); background: var(--public-surface-soft, var(--color-bg-subtle)); } .public-quote-notes p { color: var(--public-muted, var(--color-fg-muted)); line-height: 1.7; } .public-quote-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-md); padding-top: var(--space-xl); border-top: 1px solid var(--public-line, var(--color-border-subtle)); } .public-quote-actions form { margin: 0; } .public-quote-accepted-chip, .public-quote-closed-chip { color: var(--public-muted, var(--color-fg-muted)); font-size: var(--font-size-sm); } .public-quote-security-note { display: flex; justify-content: center; gap: var(--space-sm); margin-top: var(--space-lg); color: var(--public-subtle, var(--color-fg-subtle)); font-size: var(--font-size-xs); } .public-quote-security-note svg { width: 16px; height: 16px; color: var(--color-success-fg); } /* Movimiento de interacción pública -------------------------------------- */ .public-faq__list.is-enhanced .public-faq__item [data-faq-answer] > div { opacity: .42; transform: translateY(-5px); transition: opacity var(--motion-duration-standard) var(--motion-ease-standard), transform var(--motion-duration-standard) var(--motion-ease-standard); } .public-faq__list.is-enhanced .public-faq__item.is-open [data-faq-answer] > div { opacity: 1; transform: none; } /* Componentes adaptables ------------------------------------------------ */ @media (max-width: 1180px) { body[data-ui-page="landing"] { --public-header-height: 72px; } .landing-nav-account { display: none; } .landing-header__inner { gap: var(--space-lg); } .landing-brand { min-width: 165px; } .landing-navigation__primary > a, .landing-nav-mega__trigger { padding-inline: 8px; } } @media (max-width: 1023px) { body.landing-menu-open { overflow: hidden; } .landing-menu-button.is-enhanced { display: inline-grid; } body[data-ui-page="landing"] .landing-navigation { position: fixed; z-index: var(--z-dropdown); top: calc(var(--public-header-height) + 8px); right: max(18px, env(safe-area-inset-right)); left: auto; width: min(480px, calc(100vw - 36px)); max-height: calc(100dvh - var(--public-header-height) - 24px); align-items: stretch; align-content: start; justify-content: stretch; gap: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; border: 1px solid var(--public-line-strong); border-radius: var(--radius-elevated); background: var(--public-surface-raised); box-shadow: var(--shadow-overlay); } body[data-ui-page="landing"] .landing-navigation.is-enhanced { display: none; } body[data-ui-page="landing"] .landing-navigation.is-enhanced.is-open { display: grid; } .landing-navigation__primary, .landing-navigation__actions { display: grid; gap: 2px; padding: 10px; } .landing-navigation__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--public-line); border-left: 0; background: var(--public-surface-soft); } .landing-nav-account { display: inline-flex; } .landing-navigation__primary > a, .landing-nav-mega__trigger, .landing-nav-account { width: 100%; min-height: 46px; justify-content: flex-start; padding-inline: 13px; } .landing-nav-cta, .landing-nav-login { min-height: 46px; } .landing-nav-cta { grid-column: 1 / -1; order: 1; } .landing-nav-account { order: 2; } .landing-nav-login { order: 3; } .landing-nav-mega { position: static; } .landing-nav-mega__trigger { justify-content: space-between; } .landing-mega-menu { position: static; width: auto; grid-template-columns: 1fr; margin: 2px 0 6px; border-color: var(--public-line); border-radius: var(--radius-elevated); background: var(--public-surface-soft); box-shadow: none; } .landing-mega-menu__intro { display: none; } .landing-mega-menu__directory { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 4px; } .landing-mega-menu__directory a { min-height: 40px; grid-template-columns: minmax(0, 1fr); padding: 7px 10px; border: 0; background: transparent; box-shadow: none; } .landing-mega-menu__directory a > span:first-child, .landing-mega-menu__directory a small { display: none; } .landing-mega-menu__rail { display: none; } .public-service-explorer { grid-template-columns: minmax(220px, .72fr) minmax(0, 1.3fr); } .public-service-explorer__stage [data-service-panel] { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 40px; } .public-service-panel__detail { padding: 0; border-top: 1px solid var(--public-line); border-left: 0; padding-top: var(--space-xl); } .public-service-panel__result { grid-template-columns: 38px minmax(0, 1fr); } .public-service-panel__result .landing-text-link { grid-column: 2; } .landing-legal__container { grid-template-columns: minmax(0, 1fr); } .landing-legal__toc { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 48px; } .landing-legal__toc strong { grid-column: 1 / -1; } .landing-footer__grid { grid-template-columns: minmax(260px, 1.2fr) repeat(2, minmax(150px, .65fr)); } .landing-footer__contact-column { grid-column: 1 / -1; grid-template-columns: minmax(220px, .7fr) minmax(0, 1fr); align-items: start; } .landing-footer__contact-column h2 { grid-column: 1 / -1; } .landing-footer__contact-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 820px) { .public-section { padding-block: 64px; } .public-section-heading--split, .landing-service-close__header { grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--space-2xl); } .public-section-heading--sticky { position: static; } .public-service-explorer { grid-template-columns: minmax(0, 1fr); } .public-service-explorer__tabs { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--public-line); scroll-snap-type: x proximity; } .public-service-explorer__tabs button { min-width: 220px; scroll-snap-align: start; } .public-service-explorer__stage [data-service-panel] { min-height: 0; } .landing-service-close__body { grid-template-columns: minmax(0, 1fr); } .landing-scope-panel + .landing-scope-panel { border-top: 1px solid var(--public-line); border-left: 0; } .landing-footer__lead { align-items: start; flex-direction: column; gap: var(--space-xl); } .landing-footer__lead .landing-button { align-self: flex-start; } .landing-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .landing-footer__brand-column, .landing-footer__contact-column { grid-column: 1 / -1; } .landing-footer__contact-column { grid-template-columns: minmax(0, 1fr); } .landing-footer__bottom { grid-template-columns: minmax(0, 1fr) auto; } .landing-footer__bottom nav { grid-row: 2; justify-self: start; } .landing-footer__top { grid-row: 1 / 3; grid-column: 2; } .public-quote-document__header { display: grid; } .public-quote-document__status { justify-items: start; text-align: left; } .public-quote-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .public-quote-facts > div:nth-child(2) { border-right: 0; } } @media (max-width: 620px) { .public-section { padding-block: 54px; } body[data-ui-page="landing"] { --public-header-height: 66px; } body[data-ui-page="landing"] .landing-header__inner { min-height: var(--public-header-height); } .landing-brand { min-width: 0; gap: 8px; } .landing-brand__text small { display: none; } body[data-ui-page="landing"] .landing-navigation { top: calc(var(--public-header-height) + 8px); right: 12px; width: calc(100vw - 24px); max-height: calc(100dvh - var(--public-header-height) - 20px); border-radius: var(--radius-elevated); } .landing-navigation__primary, .landing-navigation__actions { gap: 2px; padding: 8px; } .landing-navigation__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } .landing-mega-menu__intro { padding: 16px; } .landing-mega-menu__intro h2 { margin-top: 10px; font-size: 1.15rem; } .landing-mega-menu__intro p { margin-top: 8px; font-size: .75rem; line-height: 1.5; } .landing-mega-menu__intro .landing-text-link { margin-top: 14px; padding-top: 0; } .landing-mega-menu__directory { grid-template-columns: minmax(0, 1fr); } .landing-mega-menu__directory a { grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 10px; } .landing-theme-button, .landing-menu-button { color: var(--public-muted); border-color: var(--public-line); background: var(--public-surface); } .landing-theme-button::before, .landing-menu-button::before { content: none; } .landing-theme-button:hover, .landing-menu-button:hover { color: var(--public-ink); border-color: var(--public-line-strong); background: var(--public-surface-soft); } .public-service-explorer__stage [data-service-panel] { padding: 30px 22px; } .public-service-panel__copy h3 { font-size: clamp(1.75rem, 9vw, 2.5rem); } .public-service-panel__result { grid-template-columns: 38px minmax(0, 1fr); gap: var(--space-md); } .public-service-panel__result .landing-text-link { grid-column: 2; } .public-request-form__header { display: grid; } .public-request-form__header > span { white-space: normal; } .landing-form-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); } .landing-field--full { grid-column: auto; } .landing-form-actions { display: grid; } .landing-form-actions .landing-button { width: 100%; } .landing-field-meta { align-items: flex-start; flex-direction: column; } .landing-footer__grid, .landing-footer__contact-actions { grid-template-columns: minmax(0, 1fr); } .landing-footer { padding-top: 44px; } .landing-footer__lead { align-items: flex-start; flex-direction: column; gap: var(--space-xl); padding-bottom: 32px; } .landing-footer__grid { gap: 34px; padding-block: 36px; } .landing-footer__nav-column, .landing-footer__brand-column, .landing-footer__contact-column { grid-column: auto; } .public-quote-page { padding: 18px; } .public-quote-standalone-brand { align-items: flex-start; } .public-quote-standalone-brand__security span { display: none; } .public-quote-document__identity { display: grid; } .public-quote-facts { grid-template-columns: minmax(0, 1fr); } .public-quote-facts > div { border-right: 0; } .public-quote-actions { display: grid; } .public-quote-actions .landing-button, .public-quote-actions form, .public-quote-actions form .landing-button { width: 100%; } } @media (max-width: 430px) { .public-section { padding-block: 48px; } .landing-header__inner { gap: 6px; } .landing-brand__logo { width: 32px; height: 36px; flex-basis: 32px; } .landing-brand__text strong { font-size: var(--font-size-sm); } .landing-theme-button, .landing-menu-button { width: 42px; height: 42px; min-width: 42px; } .landing-button { width: 100%; } .public-form-step legend { align-items: flex-start; } .public-request-form > .landing-request-feedback, .public-request-form > .landing-form-guidance, .public-request-form > form { margin-inline: 16px; } .public-request-form__header { padding: 24px 20px; } .landing-form-legal { padding: 18px; } .landing-consent { grid-template-columns: 20px minmax(0, 1fr); gap: 11px; } .landing-footer__lead h2 { font-size: clamp(2rem, 10vw, 2.65rem); } .landing-footer__bottom { min-height: 0; gap: var(--space-lg); padding-block: 22px; } .landing-legal__toc { grid-template-columns: minmax(0, 1fr); } .landing-legal__header h1 { font-size: 2.55rem; } } @media (prefers-reduced-motion: reduce) { .public-faq__list.is-enhanced .public-faq__item [data-faq-answer] > div { opacity: 1; transform: none; transition: none; animation: none; } body[data-ui-page="landing"] *, body[data-ui-page="landing"] *::before, body[data-ui-page="landing"] *::after, body.public-quote-standalone *, body.public-quote-standalone *::before, body.public-quote-standalone *::after { scroll-behavior: auto; transition-duration: .01ms; animation-duration: .01ms; animation-iteration-count: 1; } } @media (forced-colors: active) { .landing-button, .public-request-form, .public-service-explorer, .landing-field input, .landing-field select, .landing-field textarea, .public-quote-document { border: 1px solid CanvasText; } } /* source: assets/css/olthany-mobile.css */ /* * Olthany Manager · UI/UX 2G * Optimización móvil integral. * Esta capa se carga al final y no cambia la geometría entre temas. */ :root { --ol-mobile-gutter: clamp(14px, 4vw, 20px); --ol-mobile-safe-top: env(safe-area-inset-top, 0px); --ol-mobile-safe-right: env(safe-area-inset-right, 0px); --ol-mobile-safe-bottom: env(safe-area-inset-bottom, 0px); --ol-mobile-safe-left: env(safe-area-inset-left, 0px); --ol-mobile-viewport-height: 100dvh; --ol-mobile-viewport-offset-top: 0px; } html { max-width: 100%; overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { min-width: 0; max-width: 100%; overflow-x: clip; } img, video, canvas { max-width: 100%; height: auto; } .main-content, .app__content, .page-header, .page-header__content, .page-header__actions, .card, .card__header, .card__body, .table-toolbar, .table-toolbar__left, .table-toolbar__right, .form-grid, .form-group, .ol-form, .ol-form__grid, .ol-form__field, .ol-detail-page, .ol-admin-page { min-width: 0; } .table-pagination__mobile-status { display: none; } .page-title, .page-description, .card__title, .card__subtitle, .table-primary, .table-secondary, .empty-state__title, .empty-state__text, .alert__text, .toast__text, .modal__message, .modal__details, .ol-detail-value, .ol-admin-page code { overflow-wrap: anywhere; } @media (max-width: 992px) { .main-content { width: 100%; padding-inline: max(var(--ol-mobile-gutter), var(--ol-mobile-safe-left)) max(var(--ol-mobile-gutter), var(--ol-mobile-safe-right)); padding-bottom: calc(30px + var(--ol-mobile-safe-bottom)); } .sidebar { width: min(88vw, 332px); height: var(--ol-mobile-viewport-height); max-height: var(--ol-mobile-viewport-height); padding-top: calc(18px + var(--ol-mobile-safe-top)); padding-right: max(18px, var(--ol-mobile-safe-right)); padding-bottom: calc(18px + var(--ol-mobile-safe-bottom)); padding-left: max(18px, var(--ol-mobile-safe-left)); } .sidebar__nav { padding-bottom: 4px; scroll-padding-block: 10px; } .sidebar__item, .sidebar-user__button, .sidebar-user__dropdown a, .sidebar-user__dropdown button { min-height: 48px; } .shell-search { padding-top: calc(var(--ol-mobile-safe-top) + 70px); padding-right: max(12px, var(--ol-mobile-safe-right)); padding-bottom: calc(12px + var(--ol-mobile-safe-bottom)); padding-left: max(12px, var(--ol-mobile-safe-left)); } .shell-search__dialog { max-height: calc(var(--ol-mobile-viewport-height) - var(--ol-mobile-safe-top) - 86px); } .page-header { width: 100%; } .page-header__actions { justify-content: flex-start; } .card:hover, .metric-card:hover, .ol-detail-card:hover, .ol-admin-section:hover { transform: none; } } @media (max-width: 760px) { :root { --ol-mobile-gutter: clamp(13px, 4vw, 18px); } body[data-ui-page="app"] .main-content { gap: 20px; padding-top: 20px; } .navbar { padding-right: max(14px, var(--ol-mobile-safe-right)); padding-left: max(14px, var(--ol-mobile-safe-left)); } .navbar__left { min-width: 0; } .navbar__identity { min-width: 0; } .navbar__title { max-width: min(58vw, 280px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .navbar-menu-button, .shell-search-trigger, .sidebar__close, .landing-menu-button, .landing-theme-button { min-width: 44px; min-height: 44px; touch-action: manipulation; } .page-header { margin-bottom: 0; gap: 15px; } .page-header__content { gap: 7px; } .page-title { font-size: clamp(1.62rem, 7.8vw, 2rem); line-height: 1.12; text-wrap: balance; } .page-description { font-size: .9rem; line-height: 1.58; } .page-header__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .page-header__actions .btn { width: 100%; min-width: 0; text-align: center; white-space: normal; } .page-header__actions > :only-child, .page-header__actions > :last-child:nth-child(odd) { grid-column: 1 / -1; } .card, .metric-card, .ol-detail-card, .ol-admin-section, form.ol-form .card, form.ol-form .ol-form__section { max-width: 100%; border-radius: 15px; } .card__header, form.ol-form .card__header, form.ol-form .ol-form__section-header { gap: 12px; padding: 16px; } .card__body, form.ol-form .card__body, form.ol-form .ol-form__section-body { padding: 16px; } .card__header { flex-wrap: wrap; } .card__header > .badge, .card__header > .btn, .card__header > form { max-width: 100%; } .metric-grid, .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .metric-card { min-height: 126px; padding: 16px; gap: 12px; } .metric-card__value { font-size: clamp(1.35rem, 6vw, 1.7rem); } .metric-card__description { font-size: .76rem; line-height: 1.45; } .metric-card__icon { width: 20px; height: 20px; min-width: 20px; min-height: 20px; flex-basis: 20px; } input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(.form-control):not(.table-search), select:not(.form-control):not(.form-select):not(.ol-select__native), textarea:not(.form-control), .shell-search__input, .auth-control input, .landing-form input, .landing-form select, .landing-form textarea { font-size: 16px !important; } input, select, textarea, button, .btn, a.btn { touch-action: manipulation; } form.ol-form, form.ol-form .form-grid, form.ol-form .ol-form__grid, form.ol-form .ol-form__grid--three { grid-template-columns: minmax(0, 1fr); } form.ol-form .ol-form__intro { align-items: flex-start; flex-direction: column; gap: 12px; padding: 15px 16px; } form.ol-form .ol-form__required-note { align-self: flex-start; white-space: normal; } form.ol-form .form-actions, form.ol-form .form-actions.ol-form__actions, .form-actions { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; justify-content: flex-start !important; gap: 10px; } form.ol-form .form-actions .btn, form.ol-form .form-actions.ol-form__actions .btn, .form-actions .btn, .form-actions form, .form-actions form .btn { width: 100%; min-width: 0; margin: 0; } form.ol-form .form-actions > :only-child, form.ol-form .form-actions.ol-form__actions > :only-child, .form-actions > :only-child, form.ol-form .form-actions > :last-child:nth-child(odd), form.ol-form .form-actions.ol-form__actions > :last-child:nth-child(odd), .form-actions > :last-child:nth-child(odd) { grid-column: 1 / -1; } .table-toolbar, .table-toolbar__left, .table-toolbar__right { width: 100%; } .table-toolbar { gap: 10px; } .table-toolbar__right { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .table-toolbar__right .btn, .table-toolbar__right form, .table-toolbar__right form .btn { width: 100%; min-width: 0; margin: 0; } .table-toolbar__right > :only-child, .table-toolbar__right > :last-child:nth-child(odd) { grid-column: 1 / -1; } .table-search-group { width: 100%; min-width: 0; } .table-search { width: 100%; min-width: 0; } /* Todas las tablas con encabezado se convierten en fichas mediante olthany-mobile.js. */ .table-container.ol-mobile-table-container { overflow: visible !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } table.ol-mobile-table { width: 100% !important; min-width: 0 !important; table-layout: auto !important; border-collapse: separate !important; border-spacing: 0 !important; } table.ol-mobile-table thead { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; } table.ol-mobile-table, table.ol-mobile-table tbody { display: block !important; } table.ol-mobile-table tbody { display: grid !important; gap: 12px; } table.ol-mobile-table tbody tr { width: 100% !important; min-width: 0 !important; display: block !important; overflow: visible !important; padding: 7px 14px !important; border: 1px solid var(--color-border-subtle) !important; border-radius: var(--radius-surface) !important; background: var(--color-bg-surface) !important; box-shadow: none !important; } .dark-mode table.ol-mobile-table tbody tr { border-color: var(--color-border-subtle) !important; background: var(--color-bg-surface) !important; box-shadow: none !important; } table.ol-mobile-table tbody td { width: 100% !important; min-width: 0 !important; max-width: none !important; display: grid !important; grid-template-columns: minmax(86px, 34%) minmax(0, 1fr) !important; align-items: start !important; gap: 12px !important; padding: 10px 0 !important; border: 0 !important; border-bottom: 1px solid rgba(148, 163, 184, .16) !important; color: var(--color-text) !important; text-align: left !important; white-space: normal !important; } table.ol-mobile-table tbody td:last-child { border-bottom: 0 !important; } table.ol-mobile-table tbody td::before { content: attr(data-label); min-width: 0; color: var(--color-text-muted); font-size: .68rem; font-weight: 800; letter-spacing: .045em; line-height: 1.4; text-transform: uppercase; } table.ol-mobile-table tbody td[data-label=""] { grid-template-columns: minmax(0, 1fr) !important; } table.ol-mobile-table tbody td[data-label=""]::before { display: none; } table.ol-mobile-table tbody tr.ol-mobile-table__empty { padding: 0 !important; } table.ol-mobile-table tbody tr.ol-mobile-table__empty td, table.ol-mobile-table tbody td.table-empty { display: block !important; padding: 28px 16px !important; border-bottom: 0 !important; text-align: center !important; } table.ol-mobile-table tbody tr.ol-mobile-table__empty td::before, table.ol-mobile-table tbody td.table-empty::before { display: none !important; } table.ol-mobile-table .table-cell, table.ol-mobile-table .table-actions, table.ol-mobile-table .action-menu, table.ol-mobile-table .ol-check, table.ol-mobile-table form { min-width: 0; max-width: 100%; } table.ol-mobile-table .table-actions { justify-content: flex-start !important; flex-wrap: wrap; gap: 8px; } table.ol-mobile-table .action-menu { justify-self: start; } table.ol-mobile-table .action-btn, table.ol-mobile-table .action-menu__button, table.ol-mobile-table .audit-view-button { min-height: 42px; } table.ol-mobile-table code, table.ol-mobile-table .audit-ip { white-space: normal; overflow-wrap: anywhere; word-break: break-word; } .table-results-summary, .audit-results-summary { gap: 4px; padding-inline: 2px; font-size: .78rem; } .table-pagination, .audit-pagination, .ol-admin-pagination { width: 100%; display: grid !important; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center !important; gap: 8px; } .table-pagination > .btn, .audit-pagination > .btn, .ol-admin-pagination > .btn { width: 100%; min-width: 0; } .table-pagination__pages { display: none !important; } .table-pagination__mobile-status { display: inline-flex; align-items: center; justify-content: center; min-width: 70px; min-height: 42px; padding: 7px 10px; border: 1px solid var(--color-border); border-radius: 11px; color: var(--color-text-muted); background: var(--color-white); font-size: .75rem; font-weight: 750; white-space: nowrap; } .dark-mode .table-pagination__mobile-status { border-color: rgba(148, 163, 184, .18); color: #b8c4d4; background: #111c2d; } .action-menu__dropdown--open { width: min(280px, calc(100vw - 24px)); min-width: 0 !important; max-width: calc(100vw - 24px); padding: 6px; overscroll-behavior: contain; } .action-menu__item { min-height: 46px; white-space: normal; } .modal { align-items: flex-end !important; padding: 10px max(10px, var(--ol-mobile-safe-right)) max(10px, var(--ol-mobile-safe-bottom)) max(10px, var(--ol-mobile-safe-left)) !important; } .modal__content { width: 100% !important; max-width: 100% !important; max-height: calc(var(--ol-mobile-viewport-height) - var(--ol-mobile-safe-top) - 18px) !important; border-radius: 20px 20px 14px 14px !important; overscroll-behavior: contain; } .modal__header, .modal__body, .modal__footer { padding-inline: 17px !important; } .modal__footer { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px !important; } .modal__footer form, .modal__footer .btn { width: 100%; min-width: 0; } .toast-container { right: max(10px, var(--ol-mobile-safe-right)) !important; bottom: calc(10px + var(--ol-mobile-safe-bottom)) !important; left: max(10px, var(--ol-mobile-safe-left)) !important; width: auto !important; max-width: none !important; } .toast { min-height: 0; padding: 14px; border-radius: 15px; } .ol-date-popover { top: auto !important; right: max(10px, var(--ol-mobile-safe-right)) !important; bottom: calc(10px + var(--ol-mobile-safe-bottom)) !important; left: max(10px, var(--ol-mobile-safe-left)) !important; width: auto !important; max-height: calc(var(--ol-mobile-viewport-height) - var(--ol-mobile-safe-top) - 24px); overflow-y: auto; overscroll-behavior: contain; border-radius: 18px; } .empty-state { padding: 30px 16px; } .empty-state__icon { width: 50px; height: 50px; } .alert { grid-template-columns: auto minmax(0, 1fr); padding: 14px; } .landing-container { width: 100%; padding-right: max(var(--ol-mobile-gutter), var(--ol-mobile-safe-right)); padding-left: max(var(--ol-mobile-gutter), var(--ol-mobile-safe-left)); } .landing-header__inner { min-height: 70px; } .landing-navigation { max-height: calc(var(--ol-mobile-viewport-height) - var(--ol-mobile-safe-top) - 88px); overscroll-behavior: contain; } .landing-navigation a { min-height: 46px; } .landing-footer { padding-bottom: var(--ol-mobile-safe-bottom); } .auth-layout { min-height: var(--ol-mobile-viewport-height); padding: max(8px, var(--ol-mobile-safe-top)) max(8px, var(--ol-mobile-safe-right)) max(8px, var(--ol-mobile-safe-bottom)) max(8px, var(--ol-mobile-safe-left)); } .auth-shell { width: 100%; max-width: 100%; } .auth-form-panel, .auth-brand-panel { min-width: 0; } .auth-submit, .auth-secondary-link { min-height: 46px; } } @media (max-width: 520px) { .page-header__actions, .table-toolbar__right, form.ol-form .form-actions, form.ol-form .form-actions.ol-form__actions, .form-actions, .modal__footer { grid-template-columns: minmax(0, 1fr); } .metric-grid, .stats { grid-template-columns: minmax(0, 1fr); } .metric-card { min-height: 0; } .card__header, .card__body, form.ol-form .card__header, form.ol-form .card__body, form.ol-form .ol-form__section-header, form.ol-form .ol-form__section-body { padding-inline: 14px; } table.ol-mobile-table tbody td { grid-template-columns: minmax(78px, 32%) minmax(0, 1fr) !important; gap: 10px !important; } .table-pagination, .audit-pagination, .ol-admin-pagination { grid-template-columns: 1fr 1fr; } .table-pagination__mobile-status { grid-column: 1 / -1; grid-row: 1; } .table-pagination > .btn:first-child, .audit-pagination > .btn:first-child, .ol-admin-pagination > .btn:first-child { grid-column: 1; grid-row: 2; } .table-pagination > .btn:last-child, .audit-pagination > .btn:last-child, .ol-admin-pagination > .btn:last-child { grid-column: 2; grid-row: 2; } .shell-search { padding-top: calc(var(--ol-mobile-safe-top) + 8px); } .shell-search__dialog { height: calc(var(--ol-mobile-viewport-height) - var(--ol-mobile-safe-top) - var(--ol-mobile-safe-bottom) - 16px); max-height: none; border-radius: 18px; } .shell-search__footer { padding-bottom: calc(12px + var(--ol-mobile-safe-bottom)); } .auth-brand-panel { min-height: 180px; } .auth-form-panel { padding-inline: 18px; } .system-status-page { padding: max(14px, var(--ol-mobile-safe-top)) max(14px, var(--ol-mobile-safe-right)) max(14px, var(--ol-mobile-safe-bottom)) max(14px, var(--ol-mobile-safe-left)); } } @media (hover: none) { .card:hover, .metric-card:hover, .sidebar__item:hover, .shell-search-trigger:hover, .landing-button:hover, .auth-submit:hover { transform: none !important; } } @media (prefers-reduced-motion: reduce) { .ol-mobile-table, .ol-mobile-table *, .modal__content, .ol-date-popover, .action-menu__dropdown--open { scroll-behavior: auto !important; transition: none !important; } } /* source: assets/css/olthany-mobile-polish.css */ /* * Olthany Manager · UI/UX 2G.1 * Pulido móvil integral. Esta capa se carga después de olthany-mobile.css. * No altera escritorio ni cambia la geometría entre temas. */ @media (max-width: 760px) { :root { --ol-m-gutter: clamp(14px, 4.1vw, 18px); --ol-m-section-gap: 16px; --ol-m-card-radius: 12px; --ol-m-card-pad: 16px; --ol-m-control-height: 48px; --ol-m-touch: 44px; } /* Ritmo global */ body[data-ui-page="app"] .main-content { gap: var(--ol-m-section-gap) !important; padding-top: 18px !important; padding-right: max(var(--ol-m-gutter), var(--ol-mobile-safe-right)) !important; padding-bottom: calc(30px + var(--ol-mobile-safe-bottom)) !important; padding-left: max(var(--ol-m-gutter), var(--ol-mobile-safe-left)) !important; } body[data-ui-page="app"] .main-content > * { margin-top: 0; margin-bottom: 0; } body[data-ui-page="app"] .main-content > .mt-4, body[data-ui-page="app"] .main-content > .mt-6, body[data-ui-page="app"] .main-content > .mb-4, body[data-ui-page="app"] .main-content > .mb-6 { margin-top: 0 !important; margin-bottom: 0 !important; } .page-header { align-items: stretch !important; flex-direction: column !important; gap: 14px !important; margin: 0 !important; padding: 0 0 2px; } .page-header__content { gap: 6px !important; } .page-eyebrow { min-height: 26px; padding: 4px 9px; border-radius: 8px; font-size: .66rem; line-height: 1.2; letter-spacing: .075em; } .page-title { font-size: clamp(1.58rem, 7vw, 1.9rem) !important; line-height: 1.12 !important; letter-spacing: -.03em; } .page-description { max-width: none; font-size: .88rem !important; line-height: 1.55 !important; } .page-header__actions { width: 100%; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; align-items: stretch !important; gap: 9px !important; } .page-header__actions > *, .page-header__actions > form, .page-header__actions .btn, .page-header__actions form .btn { width: 100%; min-width: 0; max-width: none; margin: 0; } .page-header__actions > :only-child, .page-header__actions > :last-child:nth-child(odd) { grid-column: 1 / -1; } /* Estructura de aplicación */ .navbar { min-height: 64px !important; padding-right: max(12px, var(--ol-mobile-safe-right)) !important; padding-left: max(12px, var(--ol-mobile-safe-left)) !important; gap: 10px !important; } .navbar__left, .navbar__right { gap: 8px !important; } .navbar__identity { gap: 2px !important; } .navbar__title { max-width: min(56vw, 230px) !important; font-size: 1.06rem !important; } .navbar__context { display: none !important; } .navbar-menu-button, .shell-search-trigger { width: 42px !important; height: 42px !important; min-width: 42px !important; min-height: 42px !important; flex-basis: 42px !important; border-radius: var(--radius-control) !important; } .sidebar { width: min(86vw, 318px) !important; gap: 16px !important; padding-top: calc(14px + var(--ol-mobile-safe-top)) !important; padding-right: max(14px, var(--ol-mobile-safe-right)) !important; padding-bottom: calc(14px + var(--ol-mobile-safe-bottom)) !important; padding-left: max(14px, var(--ol-mobile-safe-left)) !important; } .sidebar__header { min-height: 62px !important; padding-bottom: 14px !important; gap: 8px; } .sidebar__logo-image { width: 36px !important; } .sidebar__nav { gap: 5px !important; } .sidebar__item { min-height: 46px !important; padding-inline: 13px !important; border-radius: var(--radius-control) !important; font-size: .88rem !important; } .sidebar-user__button { min-height: 54px !important; padding: 8px !important; border-radius: 12px !important; } .shell-search { align-items: flex-start !important; padding-top: calc(var(--ol-mobile-safe-top) + 8px) !important; padding-right: max(8px, var(--ol-mobile-safe-right)) !important; padding-bottom: calc(8px + var(--ol-mobile-safe-bottom)) !important; padding-left: max(8px, var(--ol-mobile-safe-left)) !important; } .shell-search__dialog { width: 100% !important; height: calc(var(--ol-mobile-viewport-height) - var(--ol-mobile-safe-top) - var(--ol-mobile-safe-bottom) - 16px) !important; max-height: none !important; min-width: 0; max-width: 100%; box-sizing: border-box; border-radius: 17px !important; } .shell-search__header, .shell-search__footer { padding: 12px !important; } .shell-search__title-group, .shell-search__results, .shell-search__group, .shell-search__children, .shell-search__result, .shell-search__result-copy { min-width: 0; max-width: 100%; box-sizing: border-box; } .shell-search__results { overflow-x: hidden; overscroll-behavior-x: none; } .shell-search__children { width: calc(100% - 13px); } .shell-search__result { width: 100%; } .shell-search__result-copy { overflow: hidden; } .shell-search__result-copy small { display: -webkit-box; overflow: hidden; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .shell-search__result-arrow { flex: 0 0 auto; } .shell-search__footer { width: 100%; min-width: 0; box-sizing: border-box; overflow: hidden; } /* Tarjetas y secciones */ .card, .metric-card, .ol-detail-card, .ol-admin-section, form.ol-form .card, form.ol-form .ol-form__section, form.ol-form .ol-form-module-card { border-radius: var(--ol-m-card-radius) !important; } .card__header, form.ol-form .card__header, form.ol-form .ol-form__section-header, form.ol-form .ol-form-module-card__header { min-height: 0 !important; padding: 14px var(--ol-m-card-pad) !important; gap: 10px !important; } .card__header { align-items: flex-start !important; } .card__header > div, .card__header > header, .card__header > section { min-width: 0; } .card__title, form.ol-form .ol-form__section-title { font-size: 1rem !important; line-height: 1.3 !important; } .card__subtitle, form.ol-form .ol-form__section-description { margin-top: 3px !important; font-size: .78rem !important; line-height: 1.45 !important; } .card__body, form.ol-form .card__body, form.ol-form .ol-form__section-body, form.ol-form .ol-form-module-card > .card__body { padding: var(--ol-m-card-pad) !important; } .card__body > :first-child, form.ol-form .card__body > :first-child { margin-top: 0; } .card__body > :last-child, form.ol-form .card__body > :last-child { margin-bottom: 0; } /* Métricas: dos columnas reales en teléfonos normales */ .metric-grid, .stats, .ol-admin-metrics, .dashboard-refined__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } .metric-card { min-height: 112px !important; padding: 14px !important; gap: 10px !important; border-radius: var(--radius-surface) !important; } .metric-card__content { gap: 3px !important; } .metric-card__label { font-size: .66rem !important; letter-spacing: .055em !important; } .metric-card__value { font-size: clamp(1.35rem, 6vw, 1.65rem) !important; line-height: 1.1 !important; } .metric-card__description { font-size: .72rem !important; line-height: 1.38 !important; } .metric-card__icon { width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; flex-basis: 40px !important; border-radius: var(--radius-control) !important; } /* Toolbars */ .table-toolbar { align-items: stretch !important; flex-direction: column !important; gap: 10px !important; margin-bottom: 14px !important; } .table-toolbar__left, .table-toolbar__right, .table-toolbar__left form { width: 100% !important; min-width: 0 !important; } .table-toolbar__right { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 9px !important; } .table-toolbar__right > *, .table-toolbar__right .btn, .table-toolbar__right form, .table-toolbar__right form .btn { width: 100% !important; min-width: 0 !important; margin: 0 !important; } .table-toolbar__right > :only-child, .table-toolbar__right > :last-child:nth-child(odd) { grid-column: 1 / -1; } .table-search-group { width: 100% !important; } .table-search-button { min-width: 44px; min-height: 40px; } .table-results-summary, .audit-results-summary, .ol-admin-results-summary { align-items: flex-start !important; flex-direction: column !important; gap: 2px !important; margin: 0 0 12px !important; padding: 0 !important; font-size: .76rem !important; line-height: 1.45 !important; } /* Tablas convertidas en fichas compactas */ .table-container.ol-mobile-table-container { margin: 0 !important; } table.ol-mobile-table tbody { gap: 10px !important; } table.ol-mobile-table tbody tr { padding: 6px 13px !important; border-radius: var(--radius-surface) !important; box-shadow: none !important; } .dark-mode table.ol-mobile-table tbody tr { box-shadow: none !important; } table.ol-mobile-table tbody td { grid-template-columns: minmax(82px, 31%) minmax(0, 1fr) !important; gap: 10px !important; padding: 9px 0 !important; line-height: 1.42 !important; } table.ol-mobile-table tbody td::before { font-size: .64rem !important; letter-spacing: .05em !important; line-height: 1.35 !important; } table.ol-mobile-table .table-cell { gap: 2px !important; } table.ol-mobile-table .table-primary { font-size: .84rem !important; line-height: 1.38 !important; } table.ol-mobile-table .table-secondary { font-size: .73rem !important; line-height: 1.4 !important; } table.ol-mobile-table .badge { justify-self: start; min-height: 28px; padding: 5px 10px; } table.ol-mobile-table tbody td:last-child { align-items: center !important; } .table-pagination, .audit-pagination, .ol-admin-pagination { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important; gap: 8px !important; margin-top: 14px !important; padding-top: 14px !important; } .table-pagination__mobile-status { min-width: 60px !important; min-height: 40px !important; padding: 6px 9px !important; border-radius: 10px !important; font-size: .71rem !important; } /* Formularios */ form.ol-form { gap: 16px !important; } form.ol-form .ol-form__intro { align-items: flex-start !important; flex-direction: row !important; gap: 10px !important; padding: 13px 14px !important; border-radius: 13px !important; } form.ol-form .ol-form__intro-copy { flex: 1; } form.ol-form .ol-form__intro-title { font-size: .9rem !important; } form.ol-form .ol-form__intro-text { font-size: .76rem !important; line-height: 1.45 !important; } form.ol-form .ol-form__required-note { align-self: flex-start !important; min-height: 28px !important; padding: 4px 8px !important; font-size: .68rem !important; white-space: nowrap !important; } form.ol-form .ol-form__section-icon { width: 36px !important; height: 36px !important; flex-basis: 36px !important; border-radius: 10px !important; } form.ol-form .ol-form-module-card__heading { align-items: center !important; gap: 10px !important; } form.ol-form .form-grid, form.ol-form .ol-form__grid, form.ol-form .ol-form__grid--three { grid-template-columns: minmax(0, 1fr) !important; gap: 15px !important; } form.ol-form .form-group, form.ol-form .ol-form__field { gap: 0 !important; } form.ol-form .form-label, .form-label { margin-bottom: 6px !important; font-size: .79rem !important; line-height: 1.35 !important; } form.ol-form .form-help, .form-help { margin-top: 5px !important; font-size: .71rem !important; line-height: 1.42 !important; } form.ol-form .form-actions, form.ol-form .form-actions.ol-form__actions, .form-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 9px !important; margin-top: 18px !important; padding-top: 15px !important; } form.ol-form .form-actions > *, form.ol-form .form-actions.ol-form__actions > *, .form-actions > *, form.ol-form .form-actions .btn, form.ol-form .form-actions.ol-form__actions .btn, .form-actions .btn, .form-actions form, .form-actions form .btn { width: 100% !important; min-width: 0 !important; margin: 0 !important; } form.ol-form .form-actions > :only-child, form.ol-form .form-actions.ol-form__actions > :only-child, .form-actions > :only-child, form.ol-form .form-actions > :last-child:nth-child(odd), form.ol-form .form-actions.ol-form__actions > :last-child:nth-child(odd), .form-actions > :last-child:nth-child(odd) { grid-column: 1 / -1; } /* Editor de cotizaciones: conserva solo composición; la apariencia pertenece a Formularios. */ form.ol-form--quote .quote-items-editor__body { gap: 10px !important; padding: 10px !important; } form.ol-form--quote .quote-item-row { gap: 12px !important; padding: 13px !important; } form.ol-form--quote .quote-item-field { gap: 5px !important; } form.ol-form--quote .quote-item-field__label { font-size: .65rem !important; } form.ol-form--quote .quote-item-field--action .btn { width: 100% !important; } /* Detalles */ .ol-detail-page { gap: var(--ol-m-section-gap) !important; } .ol-detail-page__actions, .ol-detail-contact-actions, .ol-detail-credential__actions { width: 100%; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 9px !important; } .ol-detail-page__actions > *, .ol-detail-contact-actions > *, .ol-detail-credential__actions > *, .ol-detail-page__actions .btn, .ol-detail-contact-actions .btn, .ol-detail-credential__actions .btn { width: 100% !important; min-width: 0 !important; } .show-layout, .show-grid, .info-list, .info-list--3, .ol-detail-workflow, .ol-detail-workflow__form, .ol-detail-workflow__convert { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; } .show-info, .info-item, .detail-item { min-width: 0; padding: 12px !important; border-radius: var(--radius-control) !important; } .show-label, .info-item__label, .detail-label { font-size: .66rem !important; letter-spacing: .045em !important; } .show-value, .info-item__value, .detail-value, .ol-detail-value { font-size: .86rem !important; line-height: 1.45 !important; } /* Administración */ .ol-admin-page { gap: var(--ol-m-section-gap) !important; } .ol-admin-split, .ol-admin-filters, .ol-security-tools, .ol-security-checks, .ol-cleanup-search, .ol-cleanup-preview, .ol-admin-chart { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; } .ol-admin-section { padding: 0 !important; } .ol-admin-filter-panel, .ol-admin-history-toolbar { gap: 10px !important; } .ol-admin-export-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 9px !important; } .ol-admin-export-actions .btn { width: 100% !important; min-width: 0 !important; } /* Panel principal aprobado */ .dashboard-refined { gap: var(--ol-m-section-gap) !important; } .dashboard-refined__overview, .dashboard-refined__details, .dashboard-refined__side, .dashboard-finance__split, .dashboard-chart__footer { grid-template-columns: minmax(0, 1fr); gap: 12px; } .dashboard-action-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 1px !important; border-top-color: var(--color-border-subtle); background: var(--color-border-subtle); } .dashboard-panel__header { align-items: flex-start !important; flex-direction: column !important; gap: 10px !important; } .dashboard-panel__summary { align-self: stretch; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .dashboard-chart { min-height: 220px !important; } .dashboard-chart__columns { gap: 8px !important; } .dashboard-chart__value, .dashboard-chart__label { font-size: .66rem !important; } .dashboard-action { min-height: 60px !important; padding: 11px 14px !important; border-radius: 0 !important; background: var(--color-bg-surface); box-shadow: none; } /* Modales y flotantes */ .modal { padding: 8px max(8px, var(--ol-mobile-safe-right)) max(8px, var(--ol-mobile-safe-bottom)) max(8px, var(--ol-mobile-safe-left)) !important; } .modal__content { border-radius: 18px 18px 12px 12px !important; } .modal__header, .modal__body, .modal__footer { padding-right: 15px !important; padding-left: 15px !important; } .modal__footer { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 9px !important; } .toast-container { right: max(8px, var(--ol-mobile-safe-right)) !important; bottom: calc(8px + var(--ol-mobile-safe-bottom)) !important; left: max(8px, var(--ol-mobile-safe-left)) !important; } .toast { padding: 12px !important; border-radius: 13px !important; } .ol-date-popover { right: max(8px, var(--ol-mobile-safe-right)) !important; bottom: calc(8px + var(--ol-mobile-safe-bottom)) !important; left: max(8px, var(--ol-mobile-safe-left)) !important; border-radius: 16px !important; } .action-menu__dropdown--open { width: min(272px, calc(100vw - 16px)) !important; max-width: calc(100vw - 16px) !important; } /* Landing móvil */ /* Estados del sistema */ .system-status-page { padding: max(12px, var(--ol-mobile-safe-top)) max(12px, var(--ol-mobile-safe-right)) max(12px, var(--ol-mobile-safe-bottom)) max(12px, var(--ol-mobile-safe-left)) !important; } .system-status-card { padding: 22px 18px !important; border-radius: 18px !important; } .system-status-title { font-size: 1.65rem !important; } } @media (max-width: 360px) { .page-header__actions, .table-toolbar__right, form.ol-form .form-actions, form.ol-form .form-actions.ol-form__actions, .form-actions, .modal__footer, .ol-detail-page__actions, .ol-detail-contact-actions, .ol-detail-credential__actions, .ol-admin-export-actions { grid-template-columns: minmax(0, 1fr) !important; } .metric-grid, .stats, .ol-admin-metrics, .dashboard-refined__metrics { grid-template-columns: minmax(0, 1fr) !important; } table.ol-mobile-table tbody td { grid-template-columns: minmax(72px, 29%) minmax(0, 1fr) !important; gap: 8px !important; } } @media (hover: none) and (max-width: 760px) { .card:hover, .metric-card:hover, .ol-detail-card:hover, .ol-admin-section:hover, .landing-form-card:hover, .landing-contact-stack article:hover { transform: none !important; } } @media (min-width: 361px) and (max-width: 760px) { .table-pagination__mobile-status { grid-column: auto !important; grid-row: auto !important; } .table-pagination > .btn:first-child, .audit-pagination > .btn:first-child, .ol-admin-pagination > .btn:first-child, .table-pagination > .btn:last-child, .audit-pagination > .btn:last-child, .ol-admin-pagination > .btn:last-child { grid-column: auto !important; grid-row: auto !important; } } @media (max-width: 360px) { .table-pagination, .audit-pagination, .ol-admin-pagination { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .table-pagination__mobile-status { grid-column: 1 / -1 !important; grid-row: 1 !important; } .table-pagination > .btn:first-child, .audit-pagination > .btn:first-child, .ol-admin-pagination > .btn:first-child { grid-column: 1 !important; grid-row: 2 !important; } .table-pagination > .btn:last-child, .audit-pagination > .btn:last-child, .ol-admin-pagination > .btn:last-child { grid-column: 2 !important; grid-row: 2 !important; } } @media (max-width: 760px) { .navbar-menu-button, .shell-search-trigger, .landing-theme-button, .landing-menu-button, .landing-button, .auth-submit, .auth-secondary-link, .action-menu__item, .table-pagination__mobile-status { min-height: 44px !important; } .navbar-menu-button, .shell-search-trigger, .landing-theme-button, .landing-menu-button { width: 44px !important; height: 44px !important; min-width: 44px !important; flex-basis: 44px !important; } } @media (max-width: 760px) { } /* FINAL-NATIVE-MOBILE · viewport and safe-area close */ @media (max-width: 760px) { body[data-ui-page="app"] .navbar { padding-top: var(--ol-mobile-safe-top) !important; min-height: calc(64px + var(--ol-mobile-safe-top)) !important; } body[data-ui-page="app"] .sidebar { height: 100dvh !important; max-height: 100dvh !important; overscroll-behavior: contain; } body[data-ui-page="app"] .sidebar__nav { min-height: 0; overflow-y: auto; overscroll-behavior: contain; } body[data-ui-page="app"] .modal { max-height: 100dvh; overflow: hidden; } body[data-ui-page="app"] .modal__content { max-height: calc(100dvh - max(16px, var(--ol-mobile-safe-top)) - max(8px, var(--ol-mobile-safe-bottom))); display: flex; flex-direction: column; overflow: hidden; } body[data-ui-page="app"] .modal__body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; } body[data-ui-page="app"] .modal__footer { flex: 0 0 auto; padding-bottom: max(14px, var(--ol-mobile-safe-bottom)) !important; } } @media (max-width: 760px) and (orientation: landscape) { body[data-ui-page="app"] .modal__content { max-height: calc(100dvh - 12px); } body[data-ui-page="app"] .sidebar { width: min(72vw, 318px) !important; } } /* source: assets/css/olthany-mobile-native.css */ /* ========================================================================== Olthany Manager · UI/UX 2H.1 Experiencia móvil nativa. Esta hoja no contiene reglas de escritorio. ========================================================================== */ @media (max-width: 760px) { :root { --ol-native-gutter: clamp(12px, 4vw, 18px); --ol-native-card-radius: 18px; --ol-native-section-gap: 16px; --ol-native-row-label: minmax(88px, 34%); --ol-native-row-value: minmax(0, 1fr); --ol-native-surface: #ffffff; --ol-native-surface-soft: #f7f9fc; --ol-native-border: rgba(15, 23, 42, .11); --ol-native-divider: rgba(148, 163, 184, .2); --ol-native-shadow: 0 8px 24px rgba(15, 23, 42, .07); } .dark-mode, [data-theme="dark"] { --ol-native-surface: #111c2d; --ol-native-surface-soft: #0d1726; --ol-native-border: rgba(148, 163, 184, .18); --ol-native-divider: rgba(148, 163, 184, .16); --ol-native-shadow: 0 10px 28px rgba(0, 0, 0, .22); } /* FINAL-GLOBAL-DARK · authenticated app mobile surfaces consume Foundation only. */ body[data-ui-page="app"].dark-mode, body[data-ui-page="app"][data-theme="dark"] { --ol-native-surface: var(--color-bg-surface); --ol-native-surface-soft: var(--color-bg-subtle); --ol-native-border: var(--color-border-default); --ol-native-divider: var(--color-border-subtle); --ol-native-shadow: var(--shadow-subtle); } html, body { max-width: 100%; overflow-x: clip; } body[data-ui-page="app"] .main-content, body[data-ui-page="landing"] main, body[data-ui-page="login"] .auth-layout { min-width: 0; } body[data-ui-page="app"] .main-content { gap: var(--ol-native-section-gap) !important; padding-right: max(var(--ol-native-gutter), env(safe-area-inset-right)) !important; padding-left: max(var(--ol-native-gutter), env(safe-area-inset-left)) !important; } /* Encabezados con jerarquía de aplicación móvil. */ .page-header { padding: 2px 0 4px !important; } .page-header__content { min-width: 0; } .page-header__actions, .card__actions, .ol-detail-header__actions, .ol-admin-header__actions { min-width: 0; } .page-header__actions .btn, .card__actions .btn, .ol-detail-header__actions .btn, .ol-admin-header__actions .btn { justify-content: center; min-width: 0; } /* Tarjetas: encabezado, contenido y acciones forman zonas distintas. */ .card, .ol-detail-card, .ol-admin-section, form.ol-form .card, form.ol-form .ol-form__section, form.ol-form .ol-form-module-card { overflow: visible; border-radius: var(--ol-native-card-radius) !important; } .card__header, .ol-detail-card__header, .ol-admin-section__header, form.ol-form .card__header, form.ol-form .ol-form__section-header, form.ol-form .ol-form-module-card__header { align-items: flex-start !important; flex-wrap: wrap; } .card__header > *, .ol-detail-card__header > *, .ol-admin-section__header > * { min-width: 0; } .card__header .badge, .ol-detail-card__header .badge, .ol-admin-section__header .badge { flex: 0 0 auto; } /* ====================================================================== Tablas como listas nativas ====================================================================== */ .table-container.ol-mobile-table-container { width: 100% !important; min-width: 0 !important; max-width: 100% !important; overflow: visible !important; padding: 0 !important; } /* Supera los min-width de cada variante de tabla sin afectar escritorio. */ table.table.ol-table.ol-mobile-table, table.table.ol-mobile-table { box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; table-layout: auto !important; } table.ol-mobile-table tbody, table.ol-mobile-table tbody tr { box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; } table.ol-mobile-table tbody { gap: 12px !important; } table.ol-mobile-table tbody tr { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; overflow: hidden !important; padding: 0 !important; border: 1px solid var(--ol-native-border) !important; border-radius: var(--ol-native-card-radius) !important; background: var(--ol-native-surface) !important; box-shadow: var(--ol-native-shadow) !important; } table.ol-mobile-table tbody td { box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; max-width: none !important; display: grid !important; grid-template-columns: var(--ol-native-row-label) var(--ol-native-row-value) !important; align-items: center !important; gap: 12px !important; margin: 0 !important; padding: 11px 14px !important; border: 0 !important; border-bottom: 1px solid var(--ol-native-divider) !important; background: transparent !important; text-align: left !important; white-space: normal !important; } table.ol-mobile-table tbody td::before { min-width: 0; overflow-wrap: anywhere; color: var(--color-text-muted) !important; font-size: .64rem !important; font-weight: 800 !important; letter-spacing: .055em !important; line-height: 1.35 !important; } table.ol-mobile-table tbody td:last-child { border-bottom: 0 !important; } table.ol-mobile-table tbody td > *, table.ol-mobile-table tbody td .table-cell, table.ol-mobile-table tbody td .table-primary, table.ol-mobile-table tbody td .table-secondary { min-width: 0; max-width: 100%; overflow-wrap: anywhere; white-space: normal !important; } table.ol-mobile-table tbody td .table-cell { width: 100% !important; align-items: flex-start !important; text-align: left !important; } /* La primera celda funciona como encabezado de la ficha. */ table.ol-mobile-table tbody td.ol-mobile-table__primary { grid-template-columns: minmax(0, 1fr) !important; align-items: start !important; gap: 4px !important; padding-top: 14px !important; padding-bottom: 13px !important; background: var(--ol-native-surface-soft) !important; } table.ol-mobile-table tbody td.ol-mobile-table__primary::before { display: block !important; } table.ol-mobile-table tbody td.ol-mobile-table__primary .table-primary, table.ol-mobile-table tbody td.ol-mobile-table__primary > strong, table.ol-mobile-table tbody td.ol-mobile-table__primary > a { font-size: .95rem !important; font-weight: 760 !important; line-height: 1.35 !important; } table.ol-mobile-table tbody td.ol-mobile-table__status .badge, table.ol-mobile-table tbody td.ol-mobile-table__status .table-cell--badge { justify-self: start; } /* Acciones como pie de ficha: nunca encima del contenido. */ table.ol-mobile-table tbody td.ol-mobile-table__actions { display: block !important; width: 100% !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 10px 12px 12px !important; border: 0 !important; border-top: 1px solid var(--ol-native-divider) !important; background: var(--ol-native-surface-soft) !important; text-align: left !important; } body[data-ui-page="app"] table.table.ol-table.table--users.table--has-actions.ol-mobile-table tbody td.table-col-actions.ol-mobile-table__actions { width: 100% !important; min-width: 0 !important; max-width: none !important; padding: 10px 12px 12px !important; text-align: left !important; } table.ol-mobile-table tbody td.ol-mobile-table__actions::before { display: none !important; content: none !important; } table.ol-mobile-table tbody td.ol-mobile-table__actions .action-menu, table.ol-mobile-table tbody td.ol-mobile-table__actions .table-actions, table.ol-mobile-table tbody td.ol-mobile-table__actions > form { width: 100% !important; min-width: 0 !important; max-width: none !important; display: flex !important; align-items: stretch !important; justify-content: stretch !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; } table.ol-mobile-table tbody td.ol-mobile-table__actions .action-menu__button, table.ol-mobile-table tbody td.ol-mobile-table__actions .action-btn, table.ol-mobile-table tbody td.ol-mobile-table__actions .audit-view-button { width: 100% !important; min-width: 0 !important; max-width: none !important; min-height: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; margin: 0 !important; padding: 10px 14px !important; border-radius: 12px !important; } table.ol-mobile-table tbody td.ol-mobile-table__actions .btn { width: 100%; min-width: 0; max-width: none; justify-content: center; margin: 0; } table.ol-mobile-table tbody td.ol-mobile-table__actions .action-menu__button::after { content: "Acciones"; font-size: .79rem; font-weight: 750; letter-spacing: .01em; } table.ol-mobile-table tbody tr.ol-mobile-table__empty, table.ol-mobile-table tbody tr.ol-mobile-table__empty td, table.ol-mobile-table tbody td.table-empty { overflow: visible !important; } /* Menú de tres puntos como hoja inferior móvil. */ .action-menu__dropdown.action-menu__dropdown--open { top: auto !important; right: max(10px, env(safe-area-inset-right)) !important; bottom: max(10px, env(safe-area-inset-bottom)) !important; left: max(10px, env(safe-area-inset-left)) !important; width: auto !important; min-width: 0 !important; max-width: none !important; max-height: min(70dvh, 520px) !important; padding: 8px !important; border-radius: 18px !important; box-shadow: 0 20px 56px rgba(0, 0, 0, .28) !important; overscroll-behavior: contain; } .action-menu__dropdown.action-menu__dropdown--open .action-menu__item { min-height: 50px !important; padding: 11px 13px !important; border-radius: 11px !important; font-size: .87rem !important; } /* Formularios con comportamiento de pantalla móvil. */ form.ol-form .ol-form__grid, form.ol-form .form-grid, form.ol-form .form-grid--2, form.ol-form .form-grid--3, form.ol-form .form-row { gap: 14px !important; } form.ol-form .form-group, form.ol-form .ol-field { min-width: 0; } form.ol-form .ol-form__actions, form.ol-form .form-actions { width: 100%; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; align-items: stretch !important; gap: 9px !important; padding-top: 14px !important; } form.ol-form .ol-form__actions > *, form.ol-form .form-actions > *, form.ol-form .ol-form__actions .btn, form.ol-form .form-actions .btn { width: 100% !important; min-width: 0 !important; margin: 0 !important; } /* Toolbars: búsqueda arriba y acciones como una barra inferior clara. */ .table-toolbar__right, .ol-admin-toolbar__actions { align-items: stretch !important; } .table-toolbar__right .btn, .ol-admin-toolbar__actions .btn { justify-content: center; } /* Detalles: datos y acciones sin saltos ni elementos pegados. */ .ol-detail-grid, .ol-client-fields, .ol-admin-metrics, .stats, .metric-grid { align-items: stretch; } .ol-detail-field, .ol-client-field, .ol-admin-metric { min-width: 0; } .ol-detail-field__value, .ol-client-field__value, .ol-admin-metric__value { overflow-wrap: anywhere; } /* Landing, login y estados: solo refinamiento de ritmo móvil. */ body[data-ui-page="login"] .auth-form-panel { min-width: 0; } .system-status-card { margin-inline: max(10px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-right)); } } @media (max-width: 360px) { table.ol-mobile-table tbody td { grid-template-columns: minmax(0, 1fr) !important; gap: 4px !important; align-items: start !important; } table.ol-mobile-table tbody td::before { display: block; } form.ol-form .ol-form__actions, form.ol-form .form-actions, .page-header__actions, .table-toolbar__right, .ol-admin-toolbar__actions { grid-template-columns: minmax(0, 1fr) !important; } } /* source: assets/css/olthany-accessibility.css */ /* * Olthany Manager — UI/UX 2J * Accesibilidad, teclado y estados de interacción. * * Esta capa no cambia la geometría de los módulos. Solo unifica foco, * estados inválidos, carga, enlaces de salto y preferencias del usuario. */ :root { --ol-a11y-focus-color: #1856f2; --ol-a11y-focus-shadow: 0 0 0 4px rgba(24, 86, 242, .2); --ol-a11y-invalid-color: #dc2626; --ol-a11y-invalid-shadow: 0 0 0 4px rgba(220, 38, 38, .14); } .dark-mode, [data-theme="dark"] { --ol-a11y-focus-color: #7ea2ff; --ol-a11y-focus-shadow: 0 0 0 4px rgba(126, 162, 255, .24); --ol-a11y-invalid-color: #f87171; --ol-a11y-invalid-shadow: 0 0 0 4px rgba(248, 113, 113, .18); } .ol-a11y-live, .sr-only, .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; } /* El foco visible se reserva para navegación por teclado. */ body.ol-input-keyboard :where( a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), summary, [role="button"], [role="menuitem"], [tabindex]:not([tabindex="-1"]) ):not(.btn):not(.form-control):not(.form-select):not(.table-search):not(.ol-select__trigger):not(.ol-password-toggle):focus-visible { outline: 3px solid var(--ol-a11y-focus-color) !important; outline-offset: 3px !important; box-shadow: var(--ol-a11y-focus-shadow); } /* Evita el doble anillo al hacer clic con mouse o tocar la pantalla. */ body.ol-input-pointer :where( a[href], button, input, select, textarea, summary, [role="button"], [tabindex] ):focus:not(:focus-visible) { outline: none; } .skip-link, .landing-skip-link, .auth-skip-link { position: fixed; inset-block-start: max(12px, env(safe-area-inset-top)); inset-inline-start: max(12px, env(safe-area-inset-left)); z-index: 5000; min-height: 44px; display: inline-flex; align-items: center; padding: 10px 14px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 10px; background: #1856f2; color: #fff; font-weight: 700; box-shadow: 0 12px 28px rgba(15, 23, 42, .22); transform: translateY(-180%); transition: transform .16s ease; } .skip-link:focus, .landing-skip-link:focus, .auth-skip-link:focus { transform: translateY(0); } main[id], .ol-a11y-target { scroll-margin-top: calc(var(--navbar-height, 72px) + 20px); } /* Errores de validación coherentes sin alterar el tamaño del control. */ :where(input, select, textarea):not(.form-control):not(.form-select):not(.table-search)[aria-invalid="true"] { border-color: var(--ol-a11y-invalid-color) !important; box-shadow: var(--ol-a11y-invalid-shadow) !important; } :where(input, select, textarea):not(.form-control):not(.form-select):not(.table-search)[aria-invalid="true"]:focus { outline-color: var(--ol-a11y-invalid-color) !important; } /* Estado global de envío: conserva texto, valor y dimensiones del botón. */ form[data-ol-submitting="true"] { cursor: progress; } form[data-ol-submitting="true"] :is( button[type="submit"]:not(.btn), input[type="submit"]:not(.btn) ) { cursor: progress; } form[data-ol-submitting="true"] :is( button[type="submit"]:not(.btn), input[type="submit"]:not(.btn) )[aria-busy="true"] { opacity: .78; pointer-events: none; } form[data-ol-submitting="true"] button[type="submit"][aria-busy="true"]:not(.btn)::after { content: ""; inline-size: 14px; block-size: 14px; flex: 0 0 14px; margin-inline-start: 8px; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: ol-a11y-spin .72s linear infinite; } /* Las regiones de tabla pueden recibir foco sin parecer un control extra. */ :is(.table-container, .ol-table-container)[role="region"]:focus-visible { outline: 3px solid var(--ol-a11y-focus-color); outline-offset: 3px; box-shadow: var(--ol-a11y-focus-shadow); } /* Los controles deshabilitados conservan contraste y comunican su estado. */ :where(button, input, select, textarea):not(.btn)[disabled], [aria-disabled="true"]:not(.btn) { cursor: not-allowed !important; } /* Evita que anclas enfocadas queden debajo de barras fijas. */ :target { scroll-margin-top: calc(var(--navbar-height, 72px) + 20px); } @keyframes ol-a11y-spin { to { transform: rotate(360deg); } } @media (max-width: 760px) { .skip-link, .landing-skip-link, .auth-skip-link { inset-inline-end: max(12px, env(safe-area-inset-right)); justify-content: center; } main[id], .ol-a11y-target, :target { scroll-margin-top: 84px; } } @media (prefers-reduced-motion: reduce) { .skip-link, .landing-skip-link, .auth-skip-link { transition: none; } form[data-ol-submitting="true"] button[type="submit"][aria-busy="true"]:not(.btn)::after { animation: none; border-inline-end-color: currentColor; opacity: .55; } } @media (forced-colors: active) { body.ol-input-keyboard :where( a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), summary, [role="button"], [role="menuitem"], [tabindex]:not([tabindex="-1"]) ):focus-visible, :where(input, select, textarea)[aria-invalid="true"] { outline: 3px solid CanvasText !important; box-shadow: none !important; } } /* source: assets/css/olthany-select.css */ /* ========================================================================== Olthany Manager · UI/UX 2K Selects y paneles de opciones progresivos. El select original conserva datos, POST y validación. ========================================================================== */ :root { --ol-select-bg: #ffffff; --ol-select-bg-hover: #f1f1f3; --ol-select-bg-selected: #ededf0; --ol-select-border: rgba(100, 116, 139, .32); --ol-select-border-hover: #cfcfd6; --ol-select-text: #172033; --ol-select-muted: #64748b; --ol-select-soft: #f1f5f9; --ol-select-primary: #1856f2; --ol-select-primary-soft: #ededf0; --ol-select-danger: #dc2626; --ol-select-shadow: 0 22px 58px rgba(15, 23, 42, .20), 0 8px 22px rgba(15, 23, 42, .10); } .dark-mode, html[data-public-theme="dark"] { --ol-select-bg: #151516; --ol-select-bg-hover: #252529; --ol-select-bg-selected: #252529; --ol-select-border: rgba(148, 163, 184, .27); --ol-select-border-hover: #3d3d44; --ol-select-text: #f5f8fd; --ol-select-muted: #9fb0c5; --ol-select-soft: #1c1c1f; --ol-select-primary: #60a5fa; --ol-select-primary-soft: #252529; --ol-select-danger: #f87171; --ol-select-shadow: 0 26px 64px rgba(0, 0, 0, .50), 0 10px 26px rgba(0, 0, 0, .32); } .ol-select { position: relative; display: block; width: 100%; min-width: 0; } .ol-select__native { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; pointer-events: none !important; } .ol-select__trigger { display: grid; grid-template-columns: minmax(0, 1fr) 34px; align-items: center; width: 100%; min-width: 0; min-height: 46px; padding: 7px 7px 7px 14px; color: var(--ol-select-text); text-align: left; border: 1px solid var(--ol-select-border); border-radius: 12px; background: var(--ol-select-bg); box-shadow: 0 1px 2px rgba(15, 23, 42, .025); cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease; } .ol-select__trigger:hover:not(:disabled) { border-color: var(--ol-select-border-hover); background: var(--ol-select-bg-hover); } .ol-select__trigger:focus-visible, .ol-select.is-open .ol-select__trigger { outline: 0; border-color: var(--ol-select-primary); box-shadow: 0 0 0 4px var(--ol-select-primary-soft); } .ol-select__value { min-width: 0; overflow: hidden; color: var(--ol-select-text); font: inherit; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .ol-select__value.is-placeholder { color: var(--ol-select-muted); } .ol-select__indicator { display: inline-grid; place-items: center; width: 34px; height: 34px; color: var(--ol-select-muted); border-radius: 9px; background: transparent; transition: color .16s ease, transform .16s ease, background-color .16s ease; } .ol-select__indicator svg { width: 18px; height: 18px; } .ol-select__trigger:hover:not(:disabled) .ol-select__indicator, .ol-select.is-open .ol-select__indicator { color: var(--ol-select-primary); background: var(--ol-select-primary-soft); } .ol-select.is-open .ol-select__indicator { transform: rotate(180deg); } .ol-select.is-disabled .ol-select__trigger, .ol-select__trigger:disabled { color: var(--ol-select-muted); border-color: rgba(148, 163, 184, .18); background: var(--ol-select-soft); box-shadow: none; cursor: not-allowed; opacity: .72; } .ol-select.is-invalid .ol-select__trigger, .ol-select__trigger[aria-invalid="true"] { border-color: var(--ol-select-danger); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ol-select-danger) 13%, transparent); } .ol-select--compact { min-width: min(100%, 190px); } form.ol-form--status > .ol-select { flex: 1 1 190px; max-width: 320px; } .quote-item-field .ol-select__trigger, .ol-select--quote-item .ol-select__trigger { min-height: 40px; border-radius: 10px; } body.landing-page .landing-field .ol-select__trigger { min-height: 50px; border-color: var(--public-border-strong, var(--ol-select-border)); color: var(--public-text, var(--ol-select-text)); background: var(--public-control-bg, var(--ol-select-bg)); } body.landing-page .landing-field .ol-select__value { color: inherit; } body.landing-page .landing-field .ol-select__value.is-placeholder { color: var(--public-control-placeholder, var(--ol-select-muted)); } /* Portal global: evita depender del desborde de tarjetas, tablas o modales. */ .ol-select-layer { position: fixed; inset: 0; z-index: 3450; pointer-events: none; } .ol-select-layer.is-dialog-context { z-index: 3900; } .ol-select-layer[hidden] { display: none !important; } .ol-select-layer__backdrop { position: absolute; inset: 0; background: transparent; pointer-events: auto; } .ol-select-panel { position: fixed; display: flex; flex-direction: column; width: min(460px, calc(100vw - 24px)); max-height: min(560px, calc(100dvh - 24px)); overflow: hidden; color: var(--ol-select-text); border: 1px solid var(--ol-select-border); border-radius: 16px; background: var(--ol-select-bg); box-shadow: var(--ol-select-shadow); pointer-events: auto; animation: ol-select-enter .16s ease-out both; } .ol-select-panel__header { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 58px; padding: 10px 10px 10px 16px; border-bottom: 1px solid var(--ol-select-border); } .ol-select-panel__heading { display: flex; align-items: baseline; min-width: 0; gap: 9px; } .ol-select-panel__heading strong { overflow: hidden; font-size: .92rem; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; } .ol-select-panel__count { flex: 0 0 auto; color: var(--ol-select-muted); font-size: .72rem; font-weight: 650; } .ol-select-panel__close, .ol-select-search__clear { display: inline-grid; place-items: center; flex: 0 0 auto; height: 38px; padding: 0; color: var(--ol-select-muted); border: 0; border-radius: 10px; background: transparent; cursor: pointer; } .ol-select-panel__close { min-width: 70px; padding: 0 12px; font-size: .78rem; font-weight: 750; } .ol-select-search__clear { width: 38px; } .ol-select-panel__close:hover, .ol-select-search__clear:hover { color: var(--ol-select-primary); background: var(--ol-select-primary-soft); } .ol-select-panel__close:focus-visible, .ol-select-search__clear:focus-visible, .ol-select-option:focus-visible { outline: 3px solid var(--ol-select-primary-soft); outline-offset: 1px; } .ol-select-search__clear svg { width: 18px; height: 18px; } .ol-select-search { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) 34px; align-items: center; gap: 7px; margin: 12px 12px 5px; padding: 0 5px 0 12px; border: 1px solid var(--ol-select-border); border-radius: 12px; background: var(--ol-select-soft); } .ol-select-search[hidden] { display: none !important; } .ol-select-search:focus-within { border-color: var(--ol-select-primary); box-shadow: 0 0 0 3px var(--ol-select-primary-soft); } .ol-select-search__icon { display: inline-grid; place-items: center; color: var(--ol-select-muted); } .ol-select-search__icon svg { width: 17px; height: 17px; } .ol-select-search__input { width: 100%; appearance: none; -webkit-appearance: none; min-width: 0; min-height: 42px; padding: 0; color: var(--ol-select-text); border: 0; outline: 0; background: transparent; box-shadow: none; font: inherit; } .ol-select-search__input::placeholder { color: var(--ol-select-muted); } /* El wrapper .ol-select-search es el único owner visual del foco. */ .ol-select-search__input:focus-visible { outline: 0; outline-offset: 0; box-shadow: none; } .ol-select-search__input::-webkit-search-cancel-button, .ol-select-search__input::-webkit-search-decoration, .ol-select-search__input::-webkit-search-results-button, .ol-select-search__input::-webkit-search-results-decoration { display: none; -webkit-appearance: none; appearance: none; } .ol-select-search__input::-ms-clear, .ol-select-search__input::-ms-reveal { display: none; width: 0; height: 0; } .ol-select-search__clear[hidden], .ol-select-group[hidden], .ol-select-option[hidden] { display: none !important; } .ol-select-options { min-height: 56px; overflow: auto; overscroll-behavior: contain; padding: 7px; scrollbar-width: thin; scrollbar-color: var(--ol-select-border) transparent; } .ol-select-options[hidden] { display: none !important; } .ol-select-group { padding: 10px 11px 5px; color: var(--ol-select-muted); font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .ol-select-option { display: grid; grid-template-columns: minmax(0, 1fr) 28px; align-items: center; gap: 10px; min-height: 46px; padding: 8px 9px 8px 12px; color: var(--ol-select-text); border: 1px solid transparent; border-radius: 11px; cursor: pointer; user-select: none; } .ol-select-option + .ol-select-option { margin-top: 2px; } .ol-select-option:hover, .ol-select-option.is-active { background: var(--ol-select-bg-hover); } .ol-select-option[aria-selected="true"] { color: var(--ol-select-primary); border-color: color-mix(in srgb, var(--ol-select-primary) 24%, transparent); background: var(--ol-select-bg-selected); } .ol-select-option[aria-disabled="true"] { color: var(--ol-select-muted); cursor: not-allowed; opacity: .52; } .ol-select-option--placeholder .ol-select-option__title { color: var(--ol-select-muted); font-style: italic; } .ol-select-option__content { display: flex; flex-direction: column; min-width: 0; gap: 5px; } .ol-select-option__title { overflow: hidden; font-size: .87rem; font-weight: 650; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .ol-select-option__meta { display: flex; flex-wrap: wrap; gap: 5px; } .ol-select-option__meta span { display: inline-flex; align-items: center; min-height: 20px; padding: 2px 7px; color: var(--ol-select-muted); border-radius: 999px; background: var(--ol-select-soft); font-size: .66rem; font-weight: 650; line-height: 1.2; } .ol-select-option__check { display: inline-grid; place-items: center; width: 28px; height: 28px; color: transparent; border-radius: 9px; } .ol-select-option__check svg { width: 17px; height: 17px; } .ol-select-option[aria-selected="true"] .ol-select-option__check { color: var(--ol-select-primary); background: var(--ol-select-primary-soft); } .ol-select-empty { margin: 8px 12px 14px; padding: 22px 16px; color: var(--ol-select-muted); border: 1px dashed var(--ol-select-border); border-radius: 12px; background: var(--ol-select-soft); font-size: .84rem; text-align: center; } .ol-select-panel__footer { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px; min-height: 40px; padding: 8px 12px; color: var(--ol-select-muted); border-top: 1px solid var(--ol-select-border); font-size: .68rem; } .ol-select-panel__footer span { display: inline-flex; align-items: center; gap: 4px; } .ol-select-panel__footer kbd { min-width: 20px; padding: 2px 5px; color: var(--ol-select-text); border: 1px solid var(--ol-select-border); border-radius: 5px; background: var(--ol-select-soft); box-shadow: 0 1px 0 var(--ol-select-border); font: inherit; font-weight: 750; text-align: center; } @keyframes ol-select-enter { from { transform: translateY(-4px) scale(.985); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } @media (max-width: 760px) { body.ol-select-open { overflow: hidden; overscroll-behavior: none; } .ol-select-layer { z-index: 3550; } .ol-select-layer.is-dialog-context { z-index: 3950; } .ol-select-layer__backdrop { background: rgba(2, 6, 23, .54); backdrop-filter: blur(3px); } .ol-select-panel { inset: auto 0 0 !important; width: 100% !important; max-height: min(76dvh, 680px) !important; padding-bottom: env(safe-area-inset-bottom, 0px); border-right: 0; border-bottom: 0; border-left: 0; border-radius: 22px 22px 0 0; animation-name: ol-select-sheet-enter; } .ol-select-panel::before { content: ''; display: block; width: 42px; height: 4px; margin: 8px auto 0; border-radius: 999px; background: var(--ol-select-border); } .ol-select-panel__header { min-height: 60px; padding: 8px 10px 8px 16px; } .ol-select-panel__heading { align-items: flex-start; flex-direction: column; gap: 2px; } .ol-select-panel__heading strong { font-size: .96rem; } .ol-select-panel__close { min-width: 76px; height: 44px; padding-inline: 14px; } .ol-select-search__clear { width: 44px; height: 44px; } .ol-select-search { margin: 8px 12px 6px; grid-template-columns: 22px minmax(0, 1fr) 44px; } .ol-select-search__input { min-height: 46px; font-size: 16px; } .ol-select-options { padding: 7px 10px 12px; } .ol-select-option { min-height: 52px; padding: 9px 10px 9px 13px; border-radius: 13px; } .ol-select-option__title { white-space: normal; } .ol-select-panel__footer { display: none; } form.ol-form--status > .ol-select, .ol-select--compact { width: 100%; max-width: none; } } @media (max-width: 360px) { .ol-select-panel { max-height: 82dvh !important; border-radius: 18px 18px 0 0; } .ol-select-option__meta { display: none; } } @keyframes ol-select-sheet-enter { from { transform: translateY(28px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .ol-select__trigger, .ol-select__indicator, .ol-select-panel { transition: none; animation: none; } } @media (forced-colors: active) { .ol-select__trigger, .ol-select-panel, .ol-select-search, .ol-select-option { border: 1px solid CanvasText; } .ol-select-option[aria-selected="true"] { outline: 2px solid Highlight; } } /* ========================================================================== OLTHANY DESIGN LANGUAGE · FAST-1 · SELECT CANÓNICO DE LA APLICACIÓN El motor existente permanece intacto; esta capa consolida su presentación. ========================================================================== */ body[data-ui-page="app"] { --ol-select-bg:var(--color-bg-surface); --ol-select-bg-hover:var(--color-bg-hover); --ol-select-bg-selected:var(--color-accent-muted); --ol-select-border:var(--color-border-control); --ol-select-border-hover:var(--color-accent-border); --ol-select-text:var(--color-fg); --ol-select-muted:var(--color-fg-muted); --ol-select-soft:var(--color-bg-subtle); --ol-select-primary:var(--color-accent-emphasis); --ol-select-primary-soft:var(--color-accent-muted); --ol-select-danger:var(--color-danger-fg); --ol-select-shadow:var(--shadow-overlay); } body[data-ui-page="app"] .ol-select__trigger { grid-template-columns:minmax(0,1fr) 30px; height:var(--control-height-default); min-height:var(--control-height-default); padding:2px 3px 2px 11px; color:var(--color-fg); border:1px solid var(--color-border-control); border-radius:var(--radius-control); outline:0; background:var(--color-bg-surface); box-shadow:none; font-family:var(--font-body); font-size:14px; font-weight:var(--font-weight-regular); line-height:20px; transition:background-color var(--motion-duration-fast) var(--motion-ease-standard),border-color var(--motion-duration-fast) var(--motion-ease-standard),color var(--motion-duration-fast) var(--motion-ease-standard); } body[data-ui-page="app"] .ol-select__trigger:hover:not(:disabled) { border-color:var(--color-border-default); background:var(--color-bg-hover); } body[data-ui-page="app"] .ol-select__trigger:focus-visible { border-color:var(--color-accent-border); outline:2px solid var(--color-focus); outline-offset:2px; background:var(--color-bg-surface); box-shadow:none; } body[data-ui-page="app"] .ol-select.is-open .ol-select__trigger { border-color:var(--color-accent-border); background:var(--color-bg-surface); box-shadow:none; } body[data-ui-page="app"] .ol-select__value,body[data-ui-page="app"] .ol-select__value.is-placeholder { color:var(--color-fg); font-size:inherit; font-weight:inherit; line-height:20px; } body[data-ui-page="app"] .ol-select__value.is-placeholder { color:var(--color-fg-subtle); } body[data-ui-page="app"] .ol-select__indicator { width:28px; height:28px; color:var(--color-fg-muted); border-radius:var(--radius-control); background:transparent; transform:none; transition:color var(--motion-duration-fast) var(--motion-ease-standard),background-color var(--motion-duration-fast) var(--motion-ease-standard); } body[data-ui-page="app"] .ol-select__indicator svg { width:16px; height:16px; transform:none; } body[data-ui-page="app"] .ol-select__trigger:hover:not(:disabled) .ol-select__indicator,body[data-ui-page="app"] .ol-select.is-open .ol-select__indicator { color:var(--color-accent-fg); background:transparent; transform:none; } body[data-ui-page="app"] .ol-select.is-disabled .ol-select__trigger,body[data-ui-page="app"] .ol-select__trigger:disabled { color:var(--color-fg-disabled); border-color:var(--color-border-subtle); background:var(--color-bg-disabled); box-shadow:none; cursor:not-allowed; opacity:1; } body[data-ui-page="app"] .ol-select.is-invalid .ol-select__trigger,body[data-ui-page="app"] .ol-select__trigger[aria-invalid="true"] { border-color:var(--color-danger-border); box-shadow:none; } body[data-ui-page="app"] .ol-select.is-invalid .ol-select__trigger:focus-visible,body[data-ui-page="app"] .ol-select__trigger[aria-invalid="true"]:focus-visible { outline-color:var(--color-danger-fg); } body[data-ui-page="app"] .ol-select-panel { width:min(420px,calc(100vw - 24px)); max-height:min(520px,calc(100dvh - 24px)); color:var(--color-fg); border:1px solid var(--color-border-default); border-radius:calc(var(--radius-control) + 4px); background:var(--color-bg-elevated); box-shadow:var(--shadow-overlay); animation:none; transform:none; } body[data-ui-page="app"] .ol-select-panel__header { min-height:48px; padding:7px 7px 7px 12px; border-bottom-color:var(--color-border-subtle); } body[data-ui-page="app"] .ol-select-panel__heading strong { color:var(--color-fg); font-size:14px; font-weight:var(--font-weight-semibold); } body[data-ui-page="app"] .ol-select-panel__count { color:var(--color-fg-subtle); font-size:12px; font-weight:var(--font-weight-regular); } body[data-ui-page="app"] :is(.ol-select-panel__close,.ol-select-search__clear) { height:var(--control-height-compact); color:var(--color-fg-muted); border-radius:var(--radius-control); background:transparent; box-shadow:none; } body[data-ui-page="app"] .ol-select-panel__close { min-width:60px; padding-inline:10px; font-size:13px; font-weight:var(--font-weight-medium); } body[data-ui-page="app"] .ol-select-search__clear { width:var(--control-height-compact); } body[data-ui-page="app"] :is(.ol-select-panel__close,.ol-select-search__clear):hover { color:var(--color-fg); background:var(--color-bg-hover); } body[data-ui-page="app"] :is(.ol-select-panel__close,.ol-select-search__clear,.ol-select-option):focus-visible { outline:2px solid var(--color-focus); outline-offset:2px; box-shadow:none; } body[data-ui-page="app"] .ol-select-search__input:focus-visible { outline:0; outline-offset:0; box-shadow:none; } body[data-ui-page="app"].dark-mode .ol-select-search .ol-select-search__input:focus-visible { outline:0; outline-offset:0; box-shadow:none; } body[data-ui-page="app"] .ol-select-search { grid-template-columns:18px minmax(0,1fr) 32px; min-height:var(--control-height-default); margin:10px 10px 5px; padding:0 2px 0 10px; border:1px solid var(--color-border-control); border-radius:var(--radius-control); background:var(--color-bg-surface); } body[data-ui-page="app"] .ol-select-search:focus-within { border-color:var(--color-accent-border); box-shadow:none; } body[data-ui-page="app"] .ol-select-search__icon { position:static; width:18px; min-width:18px; height:100%; display:grid; place-items:center; align-self:stretch; justify-self:center; color:var(--color-fg-subtle); pointer-events:none; transform:none; } body[data-ui-page="app"] .ol-select-search__icon :is(svg,.icon) { display:block; width:17px; height:17px; margin:0; transform:none; } body[data-ui-page="app"] .ol-select-search__input { min-height:34px; color:var(--color-fg); font-size:14px; } body[data-ui-page="app"] .ol-select-search__input::placeholder { color:var(--color-fg-subtle); } body[data-ui-page="app"] .ol-select-options { padding:6px; } body[data-ui-page="app"] .ol-select-group { padding:9px 9px 4px; color:var(--color-fg-subtle); font-size:11px; font-weight:var(--font-weight-semibold); letter-spacing:.04em; } body[data-ui-page="app"] .ol-select-option { min-height:40px; padding:7px 8px 7px 10px; color:var(--color-fg); border-radius:var(--radius-control); } body[data-ui-page="app"] .ol-select-option:hover,body[data-ui-page="app"] .ol-select-option.is-active { background:var(--color-bg-hover); } body[data-ui-page="app"] .ol-select-option[aria-selected="true"] { color:var(--color-fg); border-color:transparent; background:var(--color-accent-muted); } body[data-ui-page="app"] .ol-select-option[aria-disabled="true"] { color:var(--color-fg-disabled); background:transparent; cursor:not-allowed; opacity:1; } body[data-ui-page="app"] .ol-select-option__title { font-size:14px; font-weight:var(--font-weight-medium); } body[data-ui-page="app"] .ol-select-option__meta span { min-height:18px; padding:1px 6px; color:var(--color-fg-subtle); background:var(--color-bg-subtle); font-size:11px; font-weight:var(--font-weight-regular); } body[data-ui-page="app"] .ol-select-option__check { width:26px; height:26px; border-radius:var(--radius-control); } body[data-ui-page="app"] .ol-select-option__check svg { width:15px; height:15px; } body[data-ui-page="app"] .ol-select-option[aria-selected="true"] .ol-select-option__check { color:var(--color-accent-fg); background:transparent; } body[data-ui-page="app"] .ol-select-empty { margin:7px 10px 12px; padding:18px 14px; color:var(--color-fg-muted); border-color:var(--color-border-subtle); border-radius:var(--radius-control); background:var(--color-bg-subtle); font-size:13px; } body[data-ui-page="app"] .ol-select-panel__footer { min-height:32px; gap:10px; padding-block:5px; color:var(--color-fg-subtle); border-top-color:var(--color-border-subtle); font-size:10px; opacity:.82; } @media (max-width:760px) { body[data-ui-page="app"] .ol-select__trigger { height:var(--control-height-touch); min-height:var(--control-height-touch); grid-template-columns:minmax(0,1fr) 40px; padding-inline-end:2px; font-size:16px; } body[data-ui-page="app"] .ol-select__indicator { width:40px; height:40px; } body[data-ui-page="app"] .ol-select-panel { max-height:min(76dvh,680px); border-radius:16px 16px 0 0; animation:none; transform:none; } body[data-ui-page="app"] .ol-select-panel__close,body[data-ui-page="app"] .ol-select-search__clear { min-height:40px; height:40px; } body[data-ui-page="app"] .ol-select-search { grid-template-columns:20px minmax(0,1fr) 40px; padding-inline-start:10px; column-gap:8px; } body[data-ui-page="app"] .ol-select-search__icon { width:20px; min-width:20px; } body[data-ui-page="app"] .ol-select-search__input { min-height:42px; font-size:16px; } body[data-ui-page="app"] .ol-select-option { min-height:48px; border-radius:var(--radius-control); } } @media (prefers-reduced-motion:reduce) { body[data-ui-page="app"] :is(.ol-select__trigger,.ol-select__indicator,.ol-select-panel) { transition:none; animation:none; } } /* ========================================================================== OLTHANY PÚBLICO R10 · SELECT CANÓNICO DEL SITIO PÚBLICO El motor compartido permanece intacto; El sitio público consume la base directamente. ========================================================================== */ body[data-ui-page="landing"] { --ol-select-bg: var(--color-bg-elevated); --ol-select-bg-hover: var(--color-bg-hover); --ol-select-bg-selected: var(--color-accent-muted); --ol-select-border: var(--color-border-control); --ol-select-border-hover: var(--color-accent-border); --ol-select-text: var(--color-fg); --ol-select-muted: var(--color-fg-subtle); --ol-select-soft: var(--color-bg-subtle); --ol-select-primary: var(--color-accent-emphasis); --ol-select-primary-soft: var(--color-accent-muted); --ol-select-danger: var(--color-danger-fg); --ol-select-shadow: var(--shadow-overlay); } body[data-ui-page="landing"] .landing-field .ol-select__trigger { grid-template-columns: minmax(0, 1fr) 38px; min-height: var(--control-height-default); padding: 3px 3px 3px 13px; color: var(--color-fg); border: 1px solid var(--color-border-control); border-radius: var(--radius-control); background: var(--color-bg-elevated); box-shadow: none; } body[data-ui-page="landing"] .landing-field .ol-select__trigger:hover:not(:disabled) { border-color: var(--color-border-default); background: var(--color-bg-hover); } body[data-ui-page="landing"] .landing-field .ol-select__trigger:focus-visible, body[data-ui-page="landing"] .landing-field .ol-select.is-open .ol-select__trigger { border-color: var(--color-accent-border); outline: 2px solid var(--color-focus); outline-offset: 2px; background: var(--color-bg-elevated); box-shadow: none; } body[data-ui-page="landing"] .landing-field .ol-select__value { color: var(--color-fg); } body[data-ui-page="landing"] .landing-field .ol-select__value.is-placeholder { color: var(--color-fg-subtle); } body[data-ui-page="landing"] .landing-field .ol-select__indicator { width: 34px; height: 34px; color: var(--color-fg-muted); border-radius: var(--radius-control); background: transparent; } body[data-ui-page="landing"] .landing-field .ol-select__trigger:hover:not(:disabled) .ol-select__indicator, body[data-ui-page="landing"] .landing-field .ol-select.is-open .ol-select__indicator { color: var(--color-accent-fg); background: var(--color-accent-muted); } body[data-ui-page="landing"] .ol-select-panel { width: min(440px, calc(100vw - 24px)); max-height: min(520px, calc(100dvh - 24px)); color: var(--color-fg); border: 1px solid var(--color-border-default); border-radius: var(--radius-elevated); background: var(--color-bg-elevated); box-shadow: var(--shadow-overlay); animation: none; } body[data-ui-page="landing"] .ol-select-panel__header { min-height: 52px; padding: 8px 8px 8px 14px; border-bottom-color: var(--color-border-subtle); } body[data-ui-page="landing"] .ol-select-panel__heading strong, body[data-ui-page="landing"] .ol-select-option__title { color: var(--color-fg); } body[data-ui-page="landing"] .ol-select-panel__count, body[data-ui-page="landing"] .ol-select-panel__footer, body[data-ui-page="landing"] .ol-select-group, body[data-ui-page="landing"] .ol-select-option__meta span { color: var(--color-fg-subtle); } body[data-ui-page="landing"] .ol-select-panel__close, body[data-ui-page="landing"] .ol-select-search__clear { color: var(--color-fg-muted); border-radius: var(--radius-control); background: transparent; } body[data-ui-page="landing"] .ol-select-panel__close:hover, body[data-ui-page="landing"] .ol-select-search__clear:hover { color: var(--color-fg); background: var(--color-bg-hover); } body[data-ui-page="landing"] .ol-select-search { min-height: var(--control-height-default); margin: 10px 10px 5px; color: var(--color-fg); border: 1px solid var(--color-border-control); border-radius: var(--radius-control); background: var(--color-bg-surface); } body[data-ui-page="landing"] .ol-select-search:focus-within { border-color: var(--color-accent-border); outline: 2px solid var(--color-focus); outline-offset: 1px; box-shadow: none; } body[data-ui-page="landing"] .ol-select-search__input { color: var(--color-fg); } body[data-ui-page="landing"] .ol-select-search__input::placeholder { color: var(--color-fg-subtle); } body[data-ui-page="landing"] .ol-select-options { padding: 6px; } body[data-ui-page="landing"] .ol-select-option { min-height: 44px; padding: 8px 10px; color: var(--color-fg); border-radius: var(--radius-control); } body[data-ui-page="landing"] .ol-select-option:hover, body[data-ui-page="landing"] .ol-select-option.is-active { background: var(--color-bg-hover); } body[data-ui-page="landing"] .ol-select-option[aria-selected="true"] { color: var(--color-fg); border-color: transparent; background: var(--color-accent-muted); } body[data-ui-page="landing"] .ol-select-option[aria-selected="true"] .ol-select-option__check { color: var(--color-accent-fg); background: transparent; } body[data-ui-page="landing"] .ol-select-panel__footer { border-top-color: var(--color-border-subtle); } @media (max-width: 760px) { body[data-ui-page="landing"] .landing-field .ol-select__trigger { grid-template-columns: minmax(0, 1fr) 40px; min-height: var(--control-height-touch); padding-inline-end: 2px; font-size: 16px; } body[data-ui-page="landing"] .landing-field .ol-select__indicator { width: 40px; height: 40px; } body[data-ui-page="landing"] .ol-select-panel { max-height: min(76dvh, 680px); border-radius: var(--radius-elevated) var(--radius-elevated) 0 0; } body[data-ui-page="landing"] .ol-select-panel__close, body[data-ui-page="landing"] .ol-select-search__clear, body[data-ui-page="landing"] .ol-select-option { min-height: 48px; } body[data-ui-page="landing"] .ol-select-search__input { min-height: 42px; font-size: 16px; } } @media (prefers-reduced-motion: reduce) { body[data-ui-page="landing"] :is(.ol-select__trigger, .ol-select__indicator, .ol-select-panel) { transition: none; animation: none; } } /* source: assets/css/olthany-performance.css */ /* ========================================================================== Olthany Manager · UI/UX 2O Rendimiento percibido y estados de navegación. No modifica la geometría de las vistas ni los componentes existentes. ========================================================================== */ :root { --ol-progress-height: 3px; --ol-progress-track: rgba(24, 86, 242, .12); --ol-progress-fill: linear-gradient(90deg, #1856f2 0%, #3b82f6 55%, #22c55e 100%); --ol-progress-shadow: 0 0 12px rgba(24, 86, 242, .34); } .dark-mode, [data-theme="dark"] { --ol-progress-track: rgba(96, 165, 250, .15); --ol-progress-fill: linear-gradient(90deg, #60a5fa 0%, #38bdf8 55%, #34d399 100%); --ol-progress-shadow: 0 0 14px rgba(96, 165, 250, .32); } .ol-page-progress { position: fixed; inset: 0 0 auto; z-index: 5200; height: var(--ol-progress-height); overflow: hidden; background: transparent; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .16s ease, visibility .16s ease; contain: layout paint; } .ol-page-progress::before { content: ""; position: absolute; inset: 0; background: var(--ol-progress-track); } .ol-page-progress__bar { position: absolute; inset: 0 auto 0 0; width: 0; min-width: 0; border-radius: 0 999px 999px 0; background: var(--ol-progress-fill); box-shadow: var(--ol-progress-shadow); transform: translateZ(0); transition: width .34s cubic-bezier(.22, 1, .36, 1), opacity .16s ease; } .ol-page-progress.is-visible { opacity: 1; visibility: visible; } .ol-page-progress.is-complete .ol-page-progress__bar { opacity: 0; } html.is-navigating, html.is-navigating body { cursor: progress; } html.is-navigating a, html.is-navigating button, html.is-navigating input, html.is-navigating select, html.is-navigating textarea { cursor: progress; } @media (max-width: 760px) { .ol-page-progress { top: max(0px, env(safe-area-inset-top, 0px)); height: 3px; } } @media (prefers-reduced-motion: reduce) { .ol-page-progress, .ol-page-progress__bar { transition-duration: .01ms !important; } } @media (forced-colors: active) { .ol-page-progress::before { background: Canvas; } .ol-page-progress__bar { background: Highlight; box-shadow: none; } } /* source: assets/css/olthany-public-skeleton.css */ /* ========================================================================== Olthany Public · Native Mobile Experience Skeleton de navegación SSR pública saliente. No sustituye el HTML inicial. ========================================================================== */ body[data-ui-page="landing"] main#contenido.ol-public-skeleton-host { position: relative; isolation: isolate; min-height: min(720px, 78dvh); } body[data-ui-page="landing"] main#contenido.ol-public-skeleton-host > :not(.ol-public-skeleton) { visibility: hidden; } body[data-ui-page="landing"] .ol-public-skeleton { position: absolute; inset: 0; z-index: 4; display: grid; align-content: start; gap: clamp(22px, 4vw, 46px); padding: clamp(30px, 5vw, 72px) max(var(--landing-gutter, 20px), env(safe-area-inset-right)) 48px max(var(--landing-gutter, 20px), env(safe-area-inset-left)); color: var(--color-fg-muted); background: var(--color-bg-app); pointer-events: none; user-select: none; } body[data-ui-page="landing"] .ol-public-skeleton__hero { width: min(1180px, 100%); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); align-items: center; gap: clamp(28px, 5vw, 72px); } body[data-ui-page="landing"] .ol-public-skeleton__copy, body[data-ui-page="landing"] .ol-public-skeleton__visual, body[data-ui-page="landing"] .ol-public-skeleton__cards { min-width: 0; } body[data-ui-page="landing"] .ol-public-skeleton__copy { display: grid; gap: 14px; } body[data-ui-page="landing"] .ol-public-skeleton__visual { min-height: 310px; padding: 20px; display: grid; align-content: stretch; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-elevated, 18px); background: var(--color-bg-surface); } body[data-ui-page="landing"] .ol-public-skeleton__cards { width: min(1180px, 100%); margin-inline: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } body[data-ui-page="landing"] .ol-public-skeleton__card { min-height: 148px; display: grid; align-content: start; gap: 12px; padding: 18px; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-surface, 16px); background: var(--color-bg-surface); } body[data-ui-page="landing"] .ol-public-skeleton__block { position: relative; display: block; overflow: hidden; border-radius: 8px; background: color-mix(in srgb, var(--color-bg-elevated) 78%, var(--color-border-subtle) 22%); } body[data-ui-page="landing"] .ol-public-skeleton__block::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 22%, color-mix(in srgb, var(--color-bg-hover) 72%, transparent) 48%, transparent 74%); transform: translateX(-110%); animation: ol-public-skeleton-shimmer 1.45s var(--motion-ease-standard) infinite; } @keyframes ol-public-skeleton-shimmer { to { transform: translateX(110%); } } body[data-ui-page="landing"] .ol-public-skeleton__eyebrow { width: 112px; height: 10px; } body[data-ui-page="landing"] .ol-public-skeleton__title { width: min(92%, 560px); height: clamp(34px, 5vw, 58px); border-radius: 12px; } body[data-ui-page="landing"] .ol-public-skeleton__text { width: min(90%, 520px); height: 14px; } body[data-ui-page="landing"] .ol-public-skeleton__text--short { width: 68%; } body[data-ui-page="landing"] .ol-public-skeleton__button { width: 164px; height: 46px; margin-top: 6px; border-radius: var(--radius-control, 10px); } body[data-ui-page="landing"] .ol-public-skeleton__visual > .ol-public-skeleton__block { width: 100%; height: 100%; border-radius: 12px; } body[data-ui-page="landing"] .ol-public-skeleton__card .ol-public-skeleton__block:first-child { width: 42px; height: 42px; border-radius: 11px; } body[data-ui-page="landing"] .ol-public-skeleton__card .ol-public-skeleton__block:nth-child(2) { width: 64%; height: 16px; } body[data-ui-page="landing"] .ol-public-skeleton__card .ol-public-skeleton__block:nth-child(3) { width: 88%; height: 12px; } @media (max-width: 760px) { body[data-ui-page="landing"] main#contenido.ol-public-skeleton-host { min-height: min(650px, 82dvh); } body[data-ui-page="landing"] .ol-public-skeleton { gap: 18px; padding: 24px max(16px, env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); } body[data-ui-page="landing"] .ol-public-skeleton__hero { grid-template-columns: minmax(0, 1fr); gap: 18px; } body[data-ui-page="landing"] .ol-public-skeleton__copy { gap: 11px; } body[data-ui-page="landing"] .ol-public-skeleton__title { width: 94%; height: 38px; } body[data-ui-page="landing"] .ol-public-skeleton__button { width: min(58%, 184px); height: 44px; } body[data-ui-page="landing"] .ol-public-skeleton__visual { min-height: 168px; padding: 14px; } body[data-ui-page="landing"] .ol-public-skeleton__cards { grid-template-columns: minmax(0, 1fr); gap: 10px; } body[data-ui-page="landing"] .ol-public-skeleton__card { min-height: 106px; padding: 14px; } } @media (prefers-reduced-motion: reduce) { body[data-ui-page="landing"] .ol-public-skeleton__block::after { display: none; animation: none; } } @media (forced-colors: active) { body[data-ui-page="landing"] .ol-public-skeleton__block { border: 1px solid CanvasText; background: Canvas; } body[data-ui-page="landing"] .ol-public-skeleton__block::after { display: none; } } /* source: assets/css/olthany-public-experience.css */ /* ========================================================================== OLTHANY · EXPERIENCIA PÚBLICA FINAL Composiciones de página. Cada regla es específica del sitio público o de documentos firmados. ========================================================================== */ /* Inicio · hero ------------------------------------------------------------ */ .public-hero { position: relative; overflow: hidden; padding-block: clamp(64px, 7vw, 102px) 0; border-bottom: 1px solid var(--public-line); background: var(--public-canvas); } .public-hero::before { display: none; } .public-hero__layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .88fr) minmax(520px, 1.12fr); align-items: center; gap: clamp(46px, 7vw, 100px); } .public-hero__copy { display: grid; align-content: center; gap: clamp(24px, 3vw, 34px); } .public-hero__copy h1 { max-width: 760px; font-size: clamp(3.25rem, 5.7vw, 5.85rem); line-height: .94; letter-spacing: -.072em; } .public-hero__copy h1 span { color: var(--public-muted); font-weight: var(--font-weight-semibold); } .public-hero__copy > p { max-width: 640px; color: var(--public-muted); font-size: clamp(1rem, 1.35vw, 1.18rem); line-height: 1.72; } .public-hero__signals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--space-sm); border-block: 1px solid var(--public-line); } .public-hero__signals li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-md); padding: 18px 14px 18px 0; } .public-hero__signals li + li { padding-left: 14px; border-left: 1px solid var(--public-line); } .public-hero__signals svg { width: 19px; height: 19px; color: var(--public-accent-fg); } .public-hero__signals li div { display: grid; gap: 3px; } .public-hero__signals strong { font-size: .75rem; } .public-hero__signals small { color: var(--public-subtle); font-size: .7rem; line-height: 1.35; } .public-hero-product { position: relative; overflow: hidden; border: 1px solid var(--public-line-strong); border-radius: 18px; background: var(--public-surface); box-shadow: var(--shadow-overlay); } .public-product-bar { display: flex; min-height: 76px; align-items: center; justify-content: space-between; gap: var(--space-lg); padding: 0 clamp(20px, 3vw, 30px); border-bottom: 1px solid var(--public-line); } .public-product-bar > div { display: flex; align-items: center; gap: var(--space-md); } .public-product-bar > div > span:last-child { display: grid; gap: 3px; } .public-product-bar small, .public-equipment-context small, .public-stream-focus small, .public-document-dock small { color: var(--public-subtle); font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; } .public-product-bar strong { font-size: var(--font-size-sm); } .public-product-mark { display: grid; width: 32px; height: 36px; place-items: center; } .public-product-mark img { width: 100%; height: 100%; object-fit: contain; } .public-hero-product__body { position: relative; z-index: 1; display: grid; gap: 18px; padding: clamp(20px, 3vw, 30px); background: color-mix(in srgb, var(--public-surface-soft) 74%, transparent); } .public-equipment-context { overflow: hidden; border: 1px solid var(--public-line); border-radius: var(--radius-elevated); background: var(--public-surface); } .public-equipment-context__identity { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: var(--space-lg); padding: 20px; } .public-equipment-context__identity > span { display: grid; width: 44px; height: 44px; place-items: center; color: var(--public-muted); border: 1px solid var(--public-line-strong); border-radius: var(--radius-control); background: var(--public-surface-soft); } .public-equipment-context__identity svg { width: 20px; height: 20px; } .public-equipment-context__identity > div { display: grid; gap: 4px; } .public-equipment-context__identity strong { font-family: var(--font-title); font-size: 1.22rem; } .public-equipment-context__identity p { color: var(--public-subtle); font-size: var(--font-size-xs); } .public-equipment-context__identity em { padding: 6px 10px; color: var(--color-success-fg); border: 1px solid var(--color-success-border); border-radius: var(--radius-full); background: var(--color-success-surface); font-size: .7rem; font-style: normal; font-weight: var(--font-weight-semibold); } .public-equipment-context__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--public-line); } .public-equipment-context__facts div { display: grid; gap: var(--space-xs); padding: 14px 18px; } .public-equipment-context__facts div + div { border-left: 1px solid var(--public-line); } .public-equipment-context__facts dt { color: var(--public-subtle); font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; } .public-equipment-context__facts dd { color: var(--public-muted); font-size: .74rem; font-weight: var(--font-weight-semibold); } .public-hero-product__stream { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(180px, .65fr); gap: 18px; } .public-stream-focus { border: 1px solid var(--public-line); border-radius: var(--radius-elevated); background: var(--public-surface); } .public-stream-focus { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--space-lg); padding: 20px; overflow: hidden; } .public-stream-focus > div { display: grid; gap: 6px; } .public-stream-focus strong { font-size: var(--font-size-md); } .public-stream-focus p { color: var(--public-subtle); font-size: .7rem; line-height: 1.5; } .public-stream-focus__pulse { position: absolute; right: 18px; bottom: 18px; width: 8px; height: 8px; border-radius: 50%; background: var(--public-accent); box-shadow: none; } .public-mini-timeline { display: grid; align-content: center; gap: 0; padding: 14px 16px; } .public-mini-timeline li { position: relative; display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 12px; padding: 8px 0; } .public-mini-timeline li > span { position: relative; z-index: 1; box-sizing: border-box; width: 10px; height: 10px; margin-top: 3px; justify-self: center; border: 2px solid var(--public-line-strong); border-radius: 50%; background: var(--public-surface); } .public-mini-timeline li:not(:last-child)::after { position: absolute; top: 18px; bottom: -11px; left: 6px; width: 2px; content: ""; border-radius: var(--radius-full); background: var(--public-line-strong); } .public-mini-timeline li.is-complete > span, .public-mini-timeline li.is-current > span { border-color: var(--public-accent); background: var(--public-accent); } .public-mini-timeline li.is-complete::after { background: var(--public-accent); } .public-mini-timeline li div { display: grid; gap: 2px; } .public-mini-timeline strong { font-size: .7rem; } .public-mini-timeline small { color: var(--public-subtle); font-size: .7rem; } .public-document-dock { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--public-line); border-radius: var(--radius-elevated); background: var(--public-line); } .public-document-dock > div { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 1px var(--space-sm); padding: 14px; background: var(--public-surface); } .public-document-dock svg { grid-row: 1 / 3; width: 17px; height: 17px; margin-top: 3px; color: var(--public-accent-fg); } .public-document-dock strong { font-size: .7rem; } .public-continuity-strip { position: relative; z-index: 1; display: flex; min-height: 60px; align-items: center; justify-content: center; gap: clamp(18px, 3vw, 40px); margin-top: clamp(40px, 5vw, 64px); color: var(--public-muted); border-top: 0; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); } .public-continuity-strip i { width: 4px; height: 4px; border-radius: 50%; background: var(--public-accent); } /* Inicio · necesidades, recorrido y diagnóstico ---------------------------------- */ .public-needs__layout { display: grid; grid-template-columns: minmax(290px, .65fr) minmax(0, 1.35fr); gap: clamp(60px, 10vw, 150px); } .public-needs__map { display: grid; border-top: 1px solid var(--public-line-strong); } .public-needs__map article { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(18px, 3vw, 36px); padding-block: 30px; border-bottom: 1px solid var(--public-line); } .public-needs__map article > div { display: grid; gap: var(--space-sm); } .public-needs__map small { color: var(--public-subtle); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; } .public-needs__map h3 { font-size: clamp(1.2rem, 2.2vw, 1.75rem); letter-spacing: -.035em; } .public-needs__map p { color: var(--public-muted); font-size: var(--font-size-sm); line-height: 1.55; } .public-needs__map em { color: var(--public-subtle); font-size: var(--font-size-xs); font-style: normal; } .public-journey .public-section-heading { margin-bottom: clamp(50px, 7vw, 80px); } .public-journey-rail { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); } .public-journey-rail::before { position: absolute; top: 20px; right: 7%; left: 7%; height: 1px; content: ""; background: var(--public-line-strong); } .public-journey-rail li { position: relative; display: grid; align-content: start; gap: var(--space-xl); padding-right: var(--space-xl); } .public-journey-rail li > span { position: relative; z-index: 1; display: grid; width: 40px; height: 40px; place-items: center; color: var(--public-muted); border: 1px solid var(--public-line-strong); border-radius: 50%; background: var(--public-canvas); font-size: .7rem; font-weight: var(--font-weight-bold); } .public-journey-rail li:first-child > span { color: var(--public-muted); border-color: var(--public-line-strong); background: var(--public-canvas); } .public-journey-rail li div { display: grid; gap: var(--space-sm); } .public-journey-rail h3 { font-size: var(--font-size-md); line-height: 1.35; } .public-journey-rail p { color: var(--public-subtle); font-size: .75rem; line-height: 1.55; } .public-diagnostic { color: var(--public-stage-fg); background: var(--public-stage-bg); } .public-diagnostic :where(h2, h3) { color: var(--public-stage-fg); } .public-diagnostic .landing-public-eyebrow { color: color-mix(in srgb, var(--public-stage-fg) 70%, transparent); } .public-diagnostic__layout { display: grid; grid-template-columns: minmax(380px, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(60px, 10vw, 150px); } .public-diagnostic__visual { position: relative; display: grid; width: min(100%, 520px); aspect-ratio: 1; place-items: center; border: 1px solid color-mix(in srgb, var(--public-stage-fg) 14%, transparent); border-radius: 50%; background: var(--public-stage-bg); } .public-diagnostic__visual::before, .public-diagnostic__visual::after { position: absolute; content: ""; background: color-mix(in srgb, var(--public-stage-fg) 13%, transparent); } .public-diagnostic__visual::before { width: 1px; height: 100%; } .public-diagnostic__visual::after { width: 100%; height: 1px; } .public-diagnostic__core { position: relative; z-index: 2; display: grid; width: 176px; height: 176px; place-content: center; justify-items: center; gap: var(--space-xs); border: 1px solid var(--public-line-strong); border-radius: 50%; background: var(--public-surface-raised); box-shadow: var(--shadow-subtle); } .public-diagnostic__core svg { width: 26px; height: 26px; margin-bottom: var(--space-sm); color: var(--public-muted); } .public-diagnostic__core small { color: var(--public-stage-muted); font-size: .7rem; letter-spacing: .1em; } .public-diagnostic__core strong { font-family: var(--font-title); font-size: var(--font-size-lg); } .public-diagnostic__core p { color: var(--public-stage-muted); font-size: .7rem; } .public-diagnostic__orbit { position: absolute; z-index: 2; padding: 8px 12px; color: var(--public-stage-muted); border: 1px solid color-mix(in srgb, var(--public-stage-fg) 16%, transparent); border-radius: var(--radius-full); background: var(--public-stage-bg); font-size: .7rem; font-weight: var(--font-weight-semibold); } .public-diagnostic__orbit--one { top: 14%; left: 50%; transform: translate(-50%, -50%); } .public-diagnostic__orbit--two { top: 50%; right: 5%; transform: translateY(-50%); } .public-diagnostic__orbit--three { top: 86%; left: 50%; transform: translate(-50%, -50%); } .public-diagnostic__orbit--four { top: 50%; left: 5%; transform: translateY(-50%); } .public-diagnostic__content { display: grid; gap: clamp(42px, 6vw, 68px); } .public-diagnostic__content .public-section-heading > p { color: var(--public-stage-muted); } .public-diagnostic-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 30px; } .public-diagnostic-list article { display: grid; gap: var(--space-sm); padding-block: var(--space-xl); border-top: 1px solid color-mix(in srgb, var(--public-stage-fg) 16%, transparent); } .public-diagnostic-list h3 { font-family: var(--font-body); font-size: var(--font-size-sm); } .public-diagnostic-list p { color: var(--public-stage-muted); font-size: var(--font-size-xs); line-height: 1.6; } /* Inicio · capacidad y método ------------------------------------------ */ .public-capability-lanes { margin-top: clamp(48px, 7vw, 80px); border-top: 1px solid var(--public-line-strong); } .public-capability-lanes article { display: grid; grid-template-columns: minmax(100px, .35fr) minmax(0, 1.5fr) 56px; align-items: center; gap: clamp(30px, 6vw, 86px); padding-block: clamp(34px, 5vw, 54px); border-bottom: 1px solid var(--public-line); } .public-capability-lanes__label { color: var(--public-subtle); font-size: .7rem; font-weight: var(--font-weight-bold); letter-spacing: .12em; text-transform: uppercase; } .public-capability-lanes article > div { display: grid; grid-template-columns: minmax(220px, .65fr) minmax(240px, 1fr); align-items: center; gap: 10px 50px; } .public-capability-lanes h3 { font-size: clamp(1.55rem, 2.7vw, 2.45rem); letter-spacing: -.045em; } .public-capability-lanes p { color: var(--public-muted); line-height: 1.65; } .public-capability-lanes ul { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-xl); margin-top: var(--space-md); } .public-capability-lanes li { color: var(--public-subtle); font-size: var(--font-size-xs); } .public-capability-lanes li::before { margin-right: var(--space-sm); color: var(--public-accent-fg); content: "—"; } .public-capability-lanes article > span[aria-hidden="true"] { display: grid; width: 52px; height: 52px; place-items: center; color: var(--public-line-strong); } .public-capability-lanes article > span[aria-hidden="true"] svg { width: 42px; height: 42px; } .public-method { border-block: 1px solid var(--public-line); background: var(--public-surface); } .public-method__layout { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr); gap: clamp(60px, 10vw, 150px); } .public-method__statements { display: grid; } .public-method__statements article { display: grid; grid-template-columns: 80px minmax(180px, .6fr) minmax(0, 1fr); align-items: baseline; gap: var(--space-xl); padding-block: 24px; border-top: 1px solid var(--public-line); } .public-method__statements article:last-child { border-bottom: 1px solid var(--public-line); } .public-method__statements small { color: var(--public-accent-fg); font-size: .7rem; font-weight: var(--font-weight-bold); letter-spacing: .1em; } .public-method__statements h3 { font-size: var(--font-size-lg); } .public-method__statements p { color: var(--public-muted); font-size: var(--font-size-sm); line-height: 1.6; } /* Inicio · portal, trazabilidad y documentos ------------------------------ */ .public-portal-showcase { overflow: hidden; color: var(--public-stage-fg); background: var(--public-stage-bg); } .public-portal-showcase :where(h2, h3, strong) { color: var(--public-stage-fg); } .public-portal-showcase .landing-public-eyebrow { color: color-mix(in srgb, var(--public-stage-fg) 70%, transparent); } .public-portal-showcase__layout { display: grid; grid-template-columns: minmax(300px, .72fr) minmax(520px, 1.28fr); align-items: center; gap: clamp(50px, 8vw, 120px); } .public-portal-showcase__copy { display: grid; gap: var(--space-xl); } .public-portal-showcase__copy h2 { font-size: clamp(2.4rem, 5vw, 4.7rem); line-height: .98; letter-spacing: -.065em; } .public-portal-showcase__copy > p { color: var(--public-stage-muted); font-size: var(--font-size-lg); line-height: 1.7; } .public-portal-showcase__copy > ul { display: grid; margin-block: var(--space-md); border-top: 1px solid color-mix(in srgb, var(--public-stage-fg) 15%, transparent); } .public-portal-showcase__copy > ul li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-lg); border-bottom: 1px solid color-mix(in srgb, var(--public-stage-fg) 15%, transparent); } .public-portal-showcase__copy > ul svg { width: 19px; height: 19px; color: var(--color-accent-fg); } .public-portal-showcase__copy > ul span { display: grid; gap: 3px; } .public-portal-showcase__copy > ul strong { font-size: var(--font-size-sm); } .public-portal-showcase__copy > ul small { color: var(--public-stage-muted); font-size: var(--font-size-xs); } .public-portal-showcase .landing-button--ghost { color: var(--public-stage-muted); } .public-portal-showcase .landing-button--ghost:hover { color: var(--public-stage-fg); background: color-mix(in srgb, var(--public-stage-fg) 8%, transparent); } .public-portal-window { overflow: hidden; border: 1px solid color-mix(in srgb, var(--public-stage-fg) 18%, transparent); border-radius: 18px; background: color-mix(in srgb, var(--public-stage-bg) 82%, var(--public-surface)); box-shadow: 0 28px 70px color-mix(in srgb, var(--public-stage-bg) 70%, transparent); } .public-portal-window > header { display: grid; min-height: 52px; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-lg); padding-inline: 18px; border-bottom: 1px solid color-mix(in srgb, var(--public-stage-fg) 14%, transparent); } .public-portal-window > header > div { display: flex; gap: 5px; } .public-portal-window > header > div span { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--public-stage-fg) 25%, transparent); } .public-portal-window > header small { color: var(--public-stage-muted); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; } .public-portal-window > header em { display: inline-flex; align-items: center; gap: var(--space-sm); justify-self: end; color: var(--color-success-fg); font-size: .7rem; font-style: normal; } .public-portal-window > header svg { width: 14px; height: 14px; } .public-portal-window__shell { display: grid; grid-template-columns: 60px minmax(0, 1fr); } .public-portal-window__shell > aside { display: grid; align-content: start; justify-items: center; gap: var(--space-md); padding-block: 22px; border-right: 1px solid color-mix(in srgb, var(--public-stage-fg) 13%, transparent); } .public-portal-window__shell > aside span { display: grid; width: 34px; height: 34px; place-items: center; color: var(--public-stage-muted); border-radius: var(--radius-control); } .public-portal-window__shell > aside span.is-active { color: var(--color-accent-fg); background: color-mix(in srgb, var(--public-accent) 18%, transparent); } .public-portal-window__shell > aside svg { width: 17px; height: 17px; } .public-portal-window__content { display: grid; gap: 16px; padding: clamp(22px, 4vw, 38px); } .public-portal-window__welcome { display: grid; gap: var(--space-xs); padding-bottom: var(--space-xl); border-bottom: 1px solid color-mix(in srgb, var(--public-stage-fg) 13%, transparent); } .public-portal-window__welcome small { color: var(--color-accent-fg); font-size: .7rem; letter-spacing: .1em; } .public-portal-window__welcome strong { font-family: var(--font-title); font-size: 1.3rem; } .public-portal-window__welcome p { color: var(--public-stage-muted); font-size: .72rem; } .public-portal-window__equipment { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: var(--space-md); padding: 18px; border: 1px solid color-mix(in srgb, var(--public-stage-fg) 14%, transparent); border-radius: var(--radius-elevated); background: color-mix(in srgb, var(--public-stage-fg) 4%, transparent); } .public-portal-window__equipment > span { display: grid; width: 40px; height: 40px; place-items: center; color: var(--public-muted); border-radius: var(--radius-control); background: var(--public-surface-soft); } .public-portal-window__equipment svg { width: 19px; height: 19px; } .public-portal-window__equipment > div { display: grid; gap: 3px; } .public-portal-window__equipment small, .public-portal-window__equipment p { color: var(--public-stage-muted); font-size: .7rem; } .public-portal-window__equipment em { color: var(--color-success-fg); font-size: .7rem; font-style: normal; } .public-portal-window__activity { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .public-portal-window__activity > div { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: var(--space-md); padding: 16px; border: 1px solid color-mix(in srgb, var(--public-stage-fg) 12%, transparent); border-radius: var(--radius-elevated); } .public-portal-window__activity > div > span { width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; background: var(--public-accent); } .public-portal-window__activity p { display: grid; gap: 4px; } .public-portal-window__activity strong { font-size: .72rem; } .public-portal-window__activity small { color: var(--public-stage-muted); font-size: .7rem; } .public-traceability__layout { display: grid; grid-template-columns: minmax(280px, .62fr) minmax(0, 1.38fr); gap: clamp(60px, 10vw, 150px); } .public-trace-stream { display: grid; } .public-trace-stream li { display: grid; min-height: 78px; grid-template-columns: 96px 22px minmax(0, 1fr); align-items: start; gap: 18px; } .public-trace-stream time { padding-top: 2px; color: var(--public-subtle); font-size: .7rem; font-weight: var(--font-weight-semibold); letter-spacing: .08em; text-transform: uppercase; } .public-trace-stream li > span { position: relative; box-sizing: border-box; width: 11px; height: 11px; margin-top: 2px; justify-self: center; border: 2px solid var(--public-accent); border-radius: 50%; background: var(--public-canvas); } .public-trace-stream li:not(:last-child) > span::after { position: absolute; top: 11px; left: 50%; width: 1px; height: 68px; content: ""; border-radius: var(--radius-full); background: var(--public-line-strong); translate: -50% 0; } .public-trace-stream li > div { display: grid; gap: var(--space-xs); padding-bottom: var(--space-xl); border-bottom: 1px solid var(--public-line); } .public-trace-stream strong { font-size: var(--font-size-sm); } .public-trace-stream p { color: var(--public-muted); font-size: var(--font-size-xs); } .public-documents { border-block: 1px solid var(--public-line); background: var(--public-surface); } .public-documents__layout { display: grid; grid-template-columns: minmax(420px, .92fr) minmax(0, 1.08fr); align-items: center; gap: clamp(60px, 10vw, 150px); } .public-document-system { position: relative; min-height: 460px; } .public-document-sheet { position: absolute; display: grid; width: min(72%, 390px); min-height: 340px; padding: 28px; border: 1px solid var(--public-line-strong); border-radius: var(--radius-elevated); background: var(--public-surface); box-shadow: var(--shadow-floating); } .public-document-sheet--back { top: 0; right: 0; color: var(--public-subtle); background: var(--public-surface-soft); transform: rotate(6deg); } .public-document-sheet--middle { top: 42px; right: 8%; align-content: start; gap: 20px; color: var(--public-subtle); transform: rotate(2deg); } .public-document-sheet--middle i { width: 80%; height: 7px; border-radius: var(--radius-full); background: var(--public-line); } .public-document-sheet--middle i:nth-child(3) { width: 55%; } .public-document-sheet--middle i:nth-child(4) { width: 68%; } .public-document-sheet--front { top: 82px; left: 0; align-content: space-between; transform: rotate(-2deg); } .public-document-sheet > span, .public-document-sheet small { font-size: .7rem; letter-spacing: .1em; } .public-document-sheet--front header { display: flex; align-items: center; gap: var(--space-md); } .public-document-sheet--front header > span { display: grid; width: 42px; height: 42px; place-items: center; color: var(--public-muted); border-radius: var(--radius-control); background: var(--public-surface-soft); } .public-document-sheet--front header svg { width: 20px; height: 20px; } .public-document-sheet--front header div { display: grid; gap: 4px; } .public-document-sheet--front header small { color: var(--public-subtle); } .public-document-sheet--front dl { display: grid; border-block: 1px solid var(--public-line); } .public-document-sheet--front dl div { display: flex; justify-content: space-between; gap: var(--space-lg); padding-block: 13px; } .public-document-sheet--front dl div + div { border-top: 1px solid var(--public-line); } .public-document-sheet--front dt, .public-document-sheet--front dd { font-size: .72rem; } .public-document-sheet--front dt { color: var(--public-subtle); } .public-document-sheet--front dd { font-weight: var(--font-weight-semibold); } .public-document-sheet--front footer { display: flex; align-items: center; gap: var(--space-sm); color: var(--public-subtle); } .public-document-sheet--front footer span { width: 7px; height: 7px; border-radius: 50%; background: var(--color-success-fg); } .public-document-system__link { position: absolute; z-index: 3; right: 2%; bottom: 8%; width: 110px; height: 110px; border: 1px solid var(--public-accent-line); border-radius: 50%; background: var(--public-surface-soft); } .public-documents__copy { display: grid; gap: var(--space-xl); } .public-documents__copy h2 { font-size: clamp(2.4rem, 5vw, 4.6rem); line-height: 1; letter-spacing: -.065em; } .public-documents__copy > p { color: var(--public-muted); font-size: var(--font-size-lg); line-height: 1.75; } .public-document-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-top: var(--space-md); } .public-document-links span { padding: 8px 12px; color: var(--public-muted); border: 1px solid var(--public-line); border-radius: var(--radius-full); background: var(--public-surface-soft); font-size: .7rem; font-weight: var(--font-weight-semibold); } .public-document-links svg { width: 14px; height: 14px; color: var(--public-subtle); } .public-documents__note { padding-left: var(--space-lg); border-left: 2px solid var(--public-accent); font-size: var(--font-size-sm); } /* Inicio · escenarios, principios, preguntas y cierre -------------------------- */ .public-scenario-list { margin-top: clamp(50px, 7vw, 78px); border-top: 1px solid var(--public-line-strong); } .public-scenario-list article { display: grid; grid-template-columns: 100px minmax(0, 1fr) minmax(190px, .42fr) 42px; align-items: center; gap: clamp(20px, 4vw, 60px); padding-block: 30px; border-bottom: 1px solid var(--public-line); } .public-scenario-list article > span { color: var(--public-accent-fg); font-size: .7rem; font-weight: var(--font-weight-bold); letter-spacing: .1em; text-transform: uppercase; } .public-scenario-list article > div { display: grid; gap: var(--space-sm); } .public-scenario-list h3 { font-size: clamp(1.25rem, 2.2vw, 1.75rem); letter-spacing: -.035em; } .public-scenario-list p { color: var(--public-muted); font-size: var(--font-size-sm); line-height: 1.6; } .public-scenario-list em { color: var(--public-subtle); font-size: var(--font-size-xs); font-style: normal; } .public-scenario-list article > a { display: grid; width: 40px; height: 40px; place-items: center; color: var(--public-muted); border: 1px solid var(--public-line); border-radius: 50%; } .public-scenario-list article > a:hover { color: var(--color-on-emphasis); border-color: var(--public-accent); background: var(--public-accent); } .public-scenario-list article > a svg { width: 16px; height: 16px; } .public-principles { border-block: 1px solid var(--public-line); background: var(--public-surface-soft); } .public-principles__layout { display: grid; grid-template-columns: minmax(280px, .75fr) minmax(0, 1.25fr); gap: clamp(60px, 10vw, 150px); } .public-principles__layout > div:first-child { display: grid; align-content: start; gap: var(--space-xl); } .public-principles__layout h2 { font-size: clamp(2.2rem, 4vw, 3.8rem); line-height: 1; letter-spacing: -.055em; } .public-principles__statements { display: grid; border-top: 1px solid var(--public-line-strong); } .public-principles__statements p { padding-block: var(--space-xl); color: var(--public-muted); border-bottom: 1px solid var(--public-line); line-height: 1.65; } .public-principles__statements strong { color: var(--public-ink); } .public-faq__layout { display: grid; grid-template-columns: minmax(280px, .62fr) minmax(0, 1.38fr); gap: clamp(60px, 10vw, 150px); } .public-faq__list { border-top: 1px solid var(--public-line-strong); } .public-faq__item { border-bottom: 1px solid var(--public-line); } .public-faq__item h3 { font-family: var(--font-body); } .public-faq__item button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--space-xl); padding: 22px 0; color: var(--public-ink); border: 0; background: transparent; cursor: pointer; font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); text-align: left; } .public-faq__item button svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--public-subtle); transition: transform var(--motion-duration-standard) var(--motion-ease-standard); } .public-faq__item.is-open button svg { transform: rotate(45deg); } .public-faq__item [data-faq-answer] { overflow: visible; } .public-faq__list.is-enhanced .public-faq__item [data-faq-answer] { max-height: 0; overflow: hidden; transition: max-height var(--motion-duration-slow) var(--motion-ease-standard); } .public-faq__item [data-faq-answer] > div { padding: 0 46px 24px 0; } .public-faq__item [data-faq-answer] p { color: var(--public-muted); font-size: var(--font-size-sm); line-height: 1.7; } .public-final-cta { position: relative; overflow: hidden; padding-block: clamp(70px, 9vw, 120px); border-top: 1px solid var(--public-line); background: var(--public-surface); } .public-final-cta__layout { display: grid; grid-template-columns: minmax(0, 700px) max-content; align-items: end; justify-content: center; gap: clamp(32px, 4vw, 56px); } .public-final-cta__layout > div:first-child { display: grid; max-width: 820px; gap: var(--space-xl); } .public-final-cta h2 { font-size: clamp(2.5rem, 5vw, 5rem); line-height: .98; letter-spacing: -.068em; } .public-final-cta p { max-width: 680px; color: var(--public-muted); font-size: var(--font-size-lg); line-height: 1.7; } /* Página de servicios ---------------------------------------------------------- */ .public-page-hero { position: relative; overflow: hidden; padding-block: clamp(70px, 8vw, 120px); border-bottom: 1px solid var(--public-line); background: var(--public-canvas); } .public-page-hero__layout { display: grid; grid-template-columns: minmax(0, .82fr) minmax(450px, 1.18fr); align-items: center; gap: clamp(60px, 10vw, 150px); } .public-page-hero__layout > div:first-child { display: grid; gap: var(--space-xl); } .public-page-hero h1 { font-size: clamp(3.1rem, 6vw, 6rem); line-height: .94; letter-spacing: -.072em; } .public-page-hero__layout > div:first-child > p { max-width: 650px; color: var(--public-muted); font-size: clamp(1rem, 1.4vw, 1.18rem); line-height: 1.72; } .public-page-index { position: sticky; z-index: 20; top: var(--public-header-height); border-bottom: 1px solid var(--public-line); background: color-mix(in srgb, var(--public-canvas) 94%, transparent); backdrop-filter: blur(14px); } .public-page-index > div { display: flex; min-height: 52px; align-items: center; gap: clamp(18px, 4vw, 42px); overflow-x: auto; } .public-page-index a { flex: 0 0 auto; color: var(--public-muted); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); } .public-page-index a:hover { color: var(--public-accent-fg); } .public-services-radar { --public-radar-line-angle: 0deg; --public-radar-line-length: 40%; --public-radar-node-axis: 10%; position: relative; display: grid; width: min(100%, 520px); aspect-ratio: 1; isolation: isolate; place-items: center; justify-self: end; } .public-services-radar::before, .public-services-radar::after { position: absolute; z-index: 0; content: ""; border: 1px solid var(--public-line); border-radius: 50%; } .public-services-radar::before { width: 80%; height: 80%; } .public-services-radar::after { width: 52%; height: 52%; } .public-services-radar__core { position: relative; z-index: 4; display: grid; width: 138px; height: 138px; align-content: center; justify-items: center; gap: 5px; padding: 18px; border: 1px solid var(--public-line-strong); border-radius: 50%; background: var(--public-surface-raised); box-shadow: var(--shadow-subtle); } .public-services-radar__core img { width: 30px; height: 34px; object-fit: contain; } .public-services-radar__core strong, .public-services-radar__core small { text-align: center; } .public-services-radar__core strong { font-size: var(--font-size-sm); line-height: 1.15; } .public-services-radar__core small { color: var(--public-subtle); font-size: .7rem; line-height: 1.25; } .public-services-radar__node { position: absolute; z-index: 3; display: inline-flex; align-items: center; padding: 5px 7px; color: var(--public-muted); border: 0; border-radius: var(--radius-sm); background: var(--public-canvas); box-shadow: none; font-size: .66rem; font-weight: var(--font-weight-semibold); letter-spacing: .06em; line-height: 1.2; text-transform: uppercase; } .public-services-radar__node::after { position: absolute; width: 7px; height: 7px; border: 1px solid var(--public-line-strong); border-radius: 50%; content: ""; background: var(--public-canvas); } .public-services-radar__node--diagnostic { top: var(--public-radar-node-axis); left: 50%; transform: translate(-50%, -50%); } .public-services-radar__node--diagnostic::after { bottom: -6px; left: 50%; transform: translateX(-50%); } .public-services-radar__node--software { top: 50%; left: calc(100% - var(--public-radar-node-axis)); transform: translate(-50%, -50%); } .public-services-radar__node--software::after { top: 50%; left: -6px; transform: translateY(-50%); } .public-services-radar__node--hardware { top: calc(100% - var(--public-radar-node-axis)); left: 50%; transform: translate(-50%, -50%); } .public-services-radar__node--hardware::after { top: -6px; left: 50%; transform: translateX(-50%); } .public-services-radar__node--physical { top: 50%; left: var(--public-radar-node-axis); transform: translate(-50%, -50%); } .public-services-radar__node--physical::after { top: 50%; right: -6px; transform: translateY(-50%); } .public-services-radar__line { position: absolute; z-index: 1; top: 50%; left: 50%; width: var(--public-radar-line-length); height: 1px; background: var(--public-line-strong); transform: rotate(var(--public-radar-line-angle)); transform-origin: left center; } .public-services-radar__line--one { --public-radar-line-angle: -90deg; } .public-services-radar__line--two { --public-radar-line-angle: 0deg; } .public-services-radar__line--three { --public-radar-line-angle: 90deg; } .public-services-radar__line--four { --public-radar-line-angle: 180deg; } .public-service-catalog .public-section-heading { margin-bottom: 0; } .public-symptom-matrix__layout { display: grid; grid-template-columns: minmax(290px, .62fr) minmax(0, 1.38fr); gap: clamp(60px, 10vw, 150px); } .public-symptom-matrix__rows { display: grid; border-top: 1px solid var(--public-line-strong); } .public-symptom-matrix__rows article { display: grid; grid-template-columns: 120px minmax(0, 1fr) minmax(190px, .6fr); align-items: center; gap: 30px; padding-block: 25px; border-bottom: 1px solid var(--public-line); } .public-symptom-matrix__rows h3 { font-size: var(--font-size-md); } .public-symptom-matrix__rows ul { display: flex; flex-wrap: wrap; gap: var(--space-sm); } .public-symptom-matrix__rows li { padding: 6px 9px; color: var(--public-muted); border-radius: var(--radius-full); background: var(--public-surface-soft); font-size: .7rem; } .public-symptom-matrix__rows article > p { display: grid; gap: 4px; } .public-symptom-matrix__rows small { color: var(--public-subtle); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; } .public-symptom-matrix__rows strong { color: var(--public-ink); font-size: .72rem; line-height: 1.4; } .public-diagnostic-workbench { color: var(--public-stage-fg); background: var(--public-stage-bg); } .public-diagnostic-workbench :where(h2, h3, strong) { color: var(--public-stage-fg); } .public-diagnostic-workbench .landing-public-eyebrow { color: color-mix(in srgb, var(--public-stage-fg) 70%, transparent); } .public-diagnostic-workbench__layout { display: grid; grid-template-columns: minmax(280px, .6fr) minmax(0, 1.4fr); align-items: center; gap: clamp(60px, 10vw, 150px); } .public-diagnostic-workbench__copy { display: grid; gap: var(--space-xl); } .public-diagnostic-workbench__copy h2 { font-size: clamp(2.3rem, 4.5vw, 4.2rem); line-height: 1; letter-spacing: -.06em; } .public-diagnostic-workbench__copy p { color: var(--public-stage-muted); line-height: 1.7; } .public-diagnostic-workbench__board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr) auto); align-items: center; } .public-diagnostic-workbench__board > div { display: grid; min-height: 180px; align-content: center; gap: var(--space-md); padding: 24px; border: 1px solid color-mix(in srgb, var(--public-stage-fg) 15%, transparent); border-radius: var(--radius-elevated); background: color-mix(in srgb, var(--public-stage-fg) 4%, transparent); } .public-diagnostic-workbench__board > div span { color: var(--color-accent-fg); font-size: .7rem; font-weight: var(--font-weight-bold); letter-spacing: .1em; text-transform: uppercase; } .public-diagnostic-workbench__board > div small { color: var(--public-stage-muted); font-size: var(--font-size-xs); line-height: 1.45; } .public-diagnostic-workbench__board > i { display: grid; width: 38px; place-items: center; color: var(--public-stage-muted); } .public-diagnostic-workbench__board > i svg { width: 16px; height: 16px; } .public-technical-spectrum__grid { display: grid; grid-template-columns: 1.1fr .9fr .9fr; gap: 1px; margin-top: clamp(50px, 7vw, 80px); overflow: hidden; border: 1px solid var(--public-line-strong); border-radius: var(--radius-shell); background: var(--public-line); } .public-technical-spectrum__grid article { display: grid; min-height: 470px; align-content: space-between; gap: var(--space-xl); padding: clamp(28px, 4vw, 48px); background: var(--public-surface); } .public-technical-spectrum__grid article > header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); } .public-technical-spectrum__grid article > header span { display: grid; width: 40px; height: 40px; place-items: center; color: var(--public-muted); border-radius: var(--radius-control); background: var(--public-surface-soft); } .public-technical-spectrum__grid article > header svg { width: 19px; height: 19px; } .public-technical-spectrum__grid article > header small { color: var(--public-subtle); font-size: .7rem; letter-spacing: .1em; } .public-technical-spectrum__grid h3 { font-size: clamp(1.5rem, 2.8vw, 2.45rem); letter-spacing: -.045em; } .public-technical-spectrum__grid article > p { align-self: start; color: var(--public-muted); line-height: 1.7; } .public-technical-spectrum__system dl { display: grid; border-top: 1px solid var(--public-line); } .public-technical-spectrum__system dl div { display: flex; justify-content: space-between; gap: var(--space-lg); padding-block: var(--space-md); border-bottom: 1px solid var(--public-line); } .public-technical-spectrum__system dt, .public-technical-spectrum__system dd { font-size: .72rem; } .public-technical-spectrum__system dt { color: var(--public-subtle); } .public-technical-spectrum__system dd { color: var(--public-muted); text-align: right; } .public-component-map { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); } .public-component-map span { display: grid; min-height: 66px; place-items: center; color: var(--public-muted); border: 1px solid var(--public-line); border-radius: var(--radius-control); background: var(--public-surface-soft); font-size: .72rem; } .public-technical-spectrum__physical ol { display: grid; gap: var(--space-md); } .public-technical-spectrum__physical li { display: flex; align-items: center; gap: var(--space-md); color: var(--public-muted); font-size: .75rem; } .public-technical-spectrum__physical li span { width: 8px; height: 8px; border: 2px solid var(--public-accent); border-radius: 50%; } .public-methodology { border-block: 1px solid var(--public-line); background: var(--public-surface); } .public-methodology .public-section-heading { margin-bottom: clamp(50px, 7vw, 80px); } .public-methodology__rail { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-block: 1px solid var(--public-line-strong); } .public-methodology__rail li { display: grid; gap: var(--space-2xl); padding: 28px 22px; } .public-methodology__rail li + li { border-left: 1px solid var(--public-line); } .public-methodology__rail li > span { color: var(--public-accent-fg); font-size: .7rem; font-weight: var(--font-weight-bold); } .public-methodology__rail li div { display: grid; gap: var(--space-sm); } .public-methodology__rail h3 { font-size: var(--font-size-md); } .public-methodology__rail p { color: var(--public-muted); font-size: var(--font-size-xs); line-height: 1.55; } .public-methodology__deliverables { display: grid; grid-template-columns: minmax(220px, .5fr) minmax(0, 1.5fr); align-items: center; gap: var(--space-3xl); margin-top: var(--space-3xl); } .public-methodology__deliverables > span { color: var(--public-subtle); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); text-transform: uppercase; } .public-methodology__deliverables ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); } .public-methodology__deliverables li { color: var(--public-muted); font-size: .72rem; } .public-methodology__deliverables li::before { margin-right: var(--space-sm); color: var(--public-accent-fg); content: "✓"; } .public-service-output { padding-top: 0; } .public-service-output__layout { display: grid; grid-template-columns: minmax(280px, .7fr) minmax(0, 1.3fr); align-items: center; gap: clamp(60px, 10vw, 150px); padding: clamp(34px, 5vw, 58px); border: 1px solid var(--public-line-strong); border-radius: var(--radius-shell); background: var(--public-surface); } .public-service-output__layout > div:first-child { display: grid; gap: var(--space-lg); } .public-service-output h2 { font-size: clamp(2rem, 3.5vw, 3.25rem); letter-spacing: -.05em; } .public-service-output p { color: var(--public-muted); line-height: 1.65; } .public-service-output__flow { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); } .public-service-output__flow span { display: grid; min-width: 92px; gap: var(--space-sm); justify-items: center; color: var(--public-muted); font-size: .7rem; font-weight: var(--font-weight-semibold); text-align: center; } .public-service-output__flow span svg { width: 22px; height: 22px; color: var(--public-accent-fg); } .public-service-output__flow i { height: 1px; flex: 1; background: var(--public-line-strong); } /* Página del portal ------------------------------------------------------------ */ .public-page-hero--portal { color: var(--public-stage-fg); background: var(--public-stage-bg); } .public-page-hero--portal :where(h1, h2, h3, strong) { color: var(--public-stage-fg); } .public-page-hero--portal .landing-public-eyebrow { color: color-mix(in srgb, var(--public-stage-fg) 70%, transparent); } .public-page-hero--portal .public-page-hero__layout > div:first-child > p { color: var(--public-stage-muted); } .public-portal-privacy { display: flex; align-items: flex-start; gap: var(--space-md); margin-top: var(--space-md); padding-top: var(--space-xl); border-top: 1px solid color-mix(in srgb, var(--public-stage-fg) 15%, transparent); } .public-portal-privacy > span { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; color: var(--color-success-fg); border-radius: var(--radius-control); background: color-mix(in srgb, var(--color-success-fg) 12%, transparent); } .public-portal-privacy svg { width: 17px; height: 17px; } .public-portal-privacy p { display: grid; gap: 3px; } .public-portal-privacy strong { font-size: var(--font-size-sm); } .public-portal-privacy small { color: var(--public-stage-muted); font-size: var(--font-size-xs); } .public-portal-composition { position: relative; display: grid; gap: 16px; padding: clamp(22px, 4vw, 38px); border: 1px solid color-mix(in srgb, var(--public-stage-fg) 17%, transparent); border-radius: 18px; background: color-mix(in srgb, var(--public-stage-fg) 4%, transparent); box-shadow: 0 28px 70px color-mix(in srgb, var(--public-stage-bg) 65%, transparent); } .public-portal-composition__identity, .public-portal-composition__equipment, .public-portal-composition__stream article { display: grid; align-items: center; border: 1px solid color-mix(in srgb, var(--public-stage-fg) 14%, transparent); border-radius: var(--radius-elevated); background: color-mix(in srgb, var(--public-stage-bg) 86%, var(--public-surface)); } .public-portal-composition__identity { grid-template-columns: 38px minmax(0, 1fr) 28px; gap: var(--space-md); padding: 16px; } .public-portal-composition__identity > span, .public-portal-composition__equipment > span { display: grid; width: 38px; height: 38px; place-items: center; color: var(--public-muted); border-radius: var(--radius-control); background: var(--public-surface-soft); } .public-portal-composition__identity svg, .public-portal-composition__equipment svg { width: 18px; height: 18px; } .public-portal-composition__identity div, .public-portal-composition__equipment div { display: grid; gap: 3px; } .public-portal-composition__identity small, .public-portal-composition__equipment small, .public-portal-composition__stream small { color: var(--public-stage-muted); font-size: .7rem; letter-spacing: .08em; } .public-portal-composition__identity strong, .public-portal-composition__equipment strong { font-size: var(--font-size-sm); } .public-portal-composition__identity em { color: var(--color-success-fg); } .public-portal-composition__identity em svg { width: 16px; height: 16px; } .public-portal-composition__line { width: 1px; height: 18px; margin: -16px auto; background: color-mix(in srgb, var(--public-stage-fg) 22%, transparent); } .public-portal-composition__equipment { grid-template-columns: 46px minmax(0, 1fr) auto; gap: var(--space-lg); padding: 22px; border-color: var(--public-line-strong); } .public-portal-composition__equipment p { color: var(--public-stage-muted); font-size: .7rem; } .public-portal-composition__equipment em { color: var(--color-success-fg); font-size: .7rem; font-style: normal; } .public-portal-composition__stream { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .public-portal-composition__stream article { grid-template-columns: 8px minmax(0, 1fr); gap: var(--space-md); padding: 15px; } .public-portal-composition__stream article > span { width: 7px; height: 7px; border-radius: 50%; background: var(--public-accent); } .public-portal-composition__stream article > div { display: grid; gap: 4px; } .public-portal-composition__stream strong { font-size: .7rem; line-height: 1.35; } .public-portal-composition__stream em { grid-column: 2; color: var(--public-stage-muted); font-size: .7rem; font-style: normal; } .public-portal-purpose__layout { display: grid; grid-template-columns: minmax(280px, .62fr) minmax(0, 1.38fr); gap: clamp(60px, 10vw, 150px); } .public-portal-purpose__features { display: grid; border-top: 1px solid var(--public-line-strong); } .public-portal-purpose__features article { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-xl); padding-block: 28px; border-bottom: 1px solid var(--public-line); } .public-portal-purpose__features article > span { display: grid; width: 42px; height: 42px; place-items: center; color: var(--public-muted); border-radius: var(--radius-control); background: var(--public-surface-soft); } .public-portal-purpose__features svg { width: 19px; height: 19px; } .public-portal-purpose__features article > div { display: grid; gap: var(--space-sm); } .public-portal-purpose__features small { color: var(--public-subtle); font-size: .7rem; font-weight: var(--font-weight-bold); } .public-portal-purpose__features h3 { font-size: clamp(1.25rem, 2.3vw, 1.8rem); letter-spacing: -.035em; } .public-portal-purpose__features p { color: var(--public-muted); font-size: var(--font-size-sm); line-height: 1.6; } .public-portal-layers__stage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: clamp(50px, 7vw, 80px); overflow: hidden; border: 1px solid var(--public-line-strong); border-radius: var(--radius-shell); background: var(--public-line); } .public-portal-layers__stage article { position: relative; display: grid; min-height: 450px; align-content: space-between; gap: var(--space-xl); padding: clamp(28px, 4vw, 48px); overflow: hidden; background: var(--public-surface); } .public-portal-layers__stage article > div { position: relative; z-index: 1; display: grid; align-content: start; gap: var(--space-lg); } .public-portal-layers__stage small { color: var(--public-accent-fg); font-size: .7rem; font-weight: var(--font-weight-bold); letter-spacing: .1em; } .public-portal-layers__stage h3 { font-size: clamp(1.6rem, 3vw, 2.6rem); letter-spacing: -.045em; } .public-portal-layers__stage p { color: var(--public-muted); line-height: 1.7; } .public-portal-layers__stage ul { display: grid; gap: var(--space-md); padding-top: var(--space-xl); border-top: 1px solid var(--public-line); } .public-portal-layers__stage li { color: var(--public-subtle); font-size: var(--font-size-sm); } .public-portal-layers__stage li::before { margin-right: var(--space-sm); color: var(--public-accent-fg); content: "—"; } .public-portal-access-section__layout { display: grid; grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr); align-items: center; gap: clamp(60px, 10vw, 150px); } .public-portal-access-section__layout > div { display: grid; gap: var(--space-xl); } .public-portal-access-section h2 { font-size: clamp(2.3rem, 4.7vw, 4.4rem); line-height: 1; letter-spacing: -.06em; } .public-portal-access-section p { color: var(--public-muted); line-height: 1.7; } .public-portal-access-section .landing-button { justify-self: start; } .public-access-protocol { display: grid; border-block: 1px solid var(--public-line-strong); } .public-access-protocol li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: var(--space-xl); padding-block: 25px; border-bottom: 1px solid var(--public-line); } .public-access-protocol li:last-child { border-bottom: 0; } .public-access-protocol li > span { display: grid; width: 38px; height: 38px; place-items: center; color: var(--public-muted); border: 1px solid var(--public-line-strong); border-radius: 50%; background: var(--public-surface-soft); font-size: .7rem; font-weight: var(--font-weight-bold); } .public-access-protocol li div { display: grid; gap: var(--space-sm); } .public-access-protocol h3 { font-size: var(--font-size-lg); } .public-access-protocol p { color: var(--public-muted); font-size: var(--font-size-sm); line-height: 1.55; } .public-portal-security { padding-block: 52px; color: var(--public-stage-fg); background: var(--public-stage-bg); } .public-portal-security :where(h2, strong) { color: var(--public-stage-fg); } .public-portal-security .landing-public-eyebrow { color: color-mix(in srgb, var(--public-stage-fg) 70%, transparent); } .public-portal-security__layout { display: grid; grid-template-columns: 70px minmax(240px, .7fr) minmax(0, 1.3fr); align-items: center; gap: clamp(30px, 6vw, 80px); } .public-portal-security__mark { display: grid; width: 66px; height: 66px; place-items: center; color: var(--color-success-fg); border: 1px solid color-mix(in srgb, var(--color-success-fg) 42%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--color-success-fg) 10%, transparent); } .public-portal-security__mark svg { width: 28px; height: 28px; } .public-portal-security__layout > div:nth-child(2) { display: grid; gap: var(--space-md); } .public-portal-security h2 { font-size: clamp(1.7rem, 3vw, 2.7rem); letter-spacing: -.045em; } .public-portal-security__layout > div:last-child { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); } .public-portal-security__layout > div:last-child p { color: var(--public-stage-muted); font-size: var(--font-size-xs); line-height: 1.6; } /* Request service -------------------------------------------------------- */ .public-request-intro, .public-account-hero { padding-block: clamp(58px, 7vw, 92px); border-bottom: 1px solid var(--public-line); background: var(--public-canvas); } .public-request-intro__layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(470px, 1.15fr); align-items: end; gap: clamp(50px, 9vw, 130px); } .public-request-intro__layout > div { display: grid; gap: var(--space-xl); } .public-request-intro h1, .public-account-hero h1 { font-size: clamp(3rem, 5.8vw, 5.6rem); line-height: .95; letter-spacing: -.07em; } .public-request-intro__layout > div > p, .public-account-hero__layout > div:first-child > p { color: var(--public-muted); font-size: var(--font-size-lg); line-height: 1.7; } .public-request-intro__rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--public-line-strong); } .public-request-intro__rail li { display: grid; gap: var(--space-lg); padding: 22px; } .public-request-intro__rail li + li { border-left: 1px solid var(--public-line); } .public-request-intro__rail li > span { color: var(--public-accent-fg); font-size: .7rem; font-weight: var(--font-weight-bold); } .public-request-intro__rail li div { display: grid; gap: var(--space-sm); } .public-request-intro__rail strong { font-size: var(--font-size-sm); } .public-request-intro__rail small { color: var(--public-subtle); font-size: .7rem; line-height: 1.45; } .public-request-section, .public-account-request-section { background: var(--public-surface-soft); } .public-request-shell { display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(300px, .58fr); align-items: start; gap: clamp(30px, 5vw, 64px); } .public-request-aside { position: sticky; top: calc(var(--public-header-height) + 28px); display: grid; gap: var(--space-xl); } .public-request-summary, .public-contact-channels, .public-safety-note { border: 1px solid var(--public-line-strong); border-radius: var(--radius-elevated); background: var(--public-surface); } .public-request-summary { overflow: hidden; } .public-request-summary > header { display: flex; align-items: center; gap: var(--space-md); padding: 20px; border-bottom: 1px solid var(--public-line); } .public-request-summary > header > span { display: grid; width: 38px; height: 38px; place-items: center; color: var(--public-muted); border-radius: var(--radius-control); background: var(--public-surface-soft); } .public-request-summary > header svg { width: 18px; height: 18px; } .public-request-summary > header div { display: grid; gap: 3px; } .public-request-summary > header small { color: var(--public-subtle); font-size: .7rem; letter-spacing: .1em; } .public-request-summary > header h2 { font-size: var(--font-size-lg); } .public-request-summary dl { display: grid; } .public-request-summary dl div { display: flex; justify-content: space-between; gap: var(--space-lg); padding: 14px 20px; border-bottom: 1px solid var(--public-line); } .public-request-summary dt { color: var(--public-subtle); font-size: .7rem; } .public-request-summary dd { color: var(--public-muted); font-size: .7rem; font-weight: var(--font-weight-semibold); text-align: right; } .public-request-summary > p { display: flex; align-items: flex-start; gap: var(--space-sm); padding: 16px 20px; color: var(--public-muted); background: var(--public-surface-soft); font-size: .7rem; line-height: 1.5; } .public-request-summary > p svg { width: 15px; height: 15px; flex: 0 0 15px; color: var(--public-accent-fg); } .public-contact-channels { display: grid; gap: 4px; padding: 20px; } .public-contact-channels > .landing-public-eyebrow { margin-bottom: var(--space-md); } .public-contact-channels > :where(a, div) { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: var(--space-md); padding: 11px; border-radius: var(--radius-control); } .public-contact-channels > a:hover { background: var(--public-surface-soft); } .public-contact-channels > :where(a, div) > span:first-child { display: grid; width: 34px; height: 34px; place-items: center; color: var(--public-muted); border-radius: var(--radius-control); background: var(--public-surface-soft); } .public-contact-channels svg { width: 16px; height: 16px; } .public-contact-channels > :where(a, div) > span:nth-child(2) { display: grid; gap: 3px; } .public-contact-channels strong { font-size: var(--font-size-sm); } .public-contact-channels small { color: var(--public-subtle); font-size: .7rem; } .public-contact-channels > a > svg { color: var(--public-subtle); } .public-safety-note { display: flex; align-items: flex-start; gap: var(--space-md); padding: 20px; } .public-safety-note > span { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; color: var(--color-warning-fg); border-radius: var(--radius-control); background: var(--color-warning-surface); } .public-safety-note svg { width: 17px; height: 17px; } .public-safety-note > div { display: grid; gap: var(--space-xs); } .public-safety-note strong { font-size: var(--font-size-sm); } .public-safety-note p { color: var(--public-muted); font-size: .7rem; line-height: 1.5; } /* Account request -------------------------------------------------------- */ .public-account-hero__layout { display: grid; grid-template-columns: minmax(0, .86fr) minmax(430px, 1.14fr); align-items: center; gap: clamp(60px, 10vw, 150px); } .public-account-hero__layout > div:first-child { display: grid; gap: var(--space-xl); } .public-account-hero .landing-button { justify-self: start; } .public-account-protocol { overflow: hidden; border: 1px solid var(--public-line-strong); border-radius: var(--radius-shell); background: var(--public-surface); box-shadow: var(--shadow-floating); } .public-account-protocol > header { display: flex; align-items: center; gap: var(--space-md); padding: 20px 24px; border-bottom: 1px solid var(--public-line); background: var(--public-surface-soft); } .public-account-protocol > header > span { display: grid; width: 38px; height: 38px; place-items: center; color: var(--color-success-fg); border-radius: var(--radius-control); background: var(--color-success-surface); } .public-account-protocol > header svg { width: 18px; height: 18px; } .public-account-protocol > header div { display: grid; gap: 3px; } .public-account-protocol > header small { color: var(--public-subtle); font-size: .7rem; letter-spacing: .1em; } .public-account-protocol > header strong { font-size: var(--font-size-sm); } .public-account-protocol ol { display: grid; } .public-account-protocol li { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: var(--space-lg); padding: 18px 24px; } .public-account-protocol li + li { border-top: 1px solid var(--public-line); } .public-account-protocol li > span { display: grid; width: 32px; height: 32px; place-items: center; color: var(--public-muted); border: 1px solid var(--public-line-strong); border-radius: 50%; font-size: .7rem; font-weight: var(--font-weight-bold); } .public-account-protocol li.is-current > span { color: var(--color-on-emphasis); border-color: var(--public-accent); background: var(--public-accent); } .public-account-protocol li div { display: grid; gap: 3px; } .public-account-protocol li strong { font-size: var(--font-size-sm); } .public-account-protocol li small { color: var(--public-subtle); font-size: .7rem; } .public-account-protocol li em { color: var(--public-subtle); font-size: .7rem; font-style: normal; } .public-account-workspace { display: grid; grid-template-columns: minmax(300px, .6fr) minmax(0, 1.4fr); align-items: start; gap: clamp(30px, 5vw, 64px); } .public-account-context { position: sticky; top: calc(var(--public-header-height) + 28px); display: grid; gap: var(--space-xl); padding: clamp(28px, 4vw, 42px); color: var(--public-stage-fg); border-radius: var(--radius-shell); background: var(--public-stage-bg); } .public-account-context :where(h2, h3, strong) { color: var(--public-stage-fg); } .public-account-context .landing-public-eyebrow { color: color-mix(in srgb, var(--public-stage-fg) 70%, transparent); } .public-account-context h2 { font-size: clamp(2rem, 3.5vw, 3rem); line-height: 1.02; letter-spacing: -.05em; } .public-account-context > p { color: var(--public-stage-muted); line-height: 1.7; } .public-account-context__stream { display: grid; border-top: 1px solid color-mix(in srgb, var(--public-stage-fg) 15%, transparent); } .public-account-context__stream article { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: var(--space-md); padding-block: 15px; border-bottom: 1px solid color-mix(in srgb, var(--public-stage-fg) 15%, transparent); } .public-account-context__stream article > span { display: grid; width: 32px; height: 32px; place-items: center; color: var(--public-muted); border-radius: var(--radius-control); background: var(--public-surface-soft); } .public-account-context__stream svg { width: 16px; height: 16px; } .public-account-context__stream article > div { display: grid; gap: 3px; } .public-account-context__stream strong { font-size: var(--font-size-sm); } .public-account-context__stream small { color: var(--public-stage-muted); font-size: .7rem; } .public-account-context .public-safety-note { color: var(--public-stage-fg); border-color: color-mix(in srgb, var(--public-stage-fg) 14%, transparent); background: color-mix(in srgb, var(--public-stage-fg) 5%, transparent); } .public-account-context .public-safety-note p { color: var(--public-stage-muted); } .public-account-after { border-top: 1px solid var(--public-line); background: var(--public-surface); } .public-account-after__layout { display: grid; grid-template-columns: minmax(280px, .7fr) minmax(0, 1.3fr); gap: clamp(60px, 10vw, 150px); } .public-account-after__layout > div { display: grid; gap: var(--space-xl); } .public-account-after h2 { font-size: clamp(2.1rem, 4vw, 3.7rem); line-height: 1; letter-spacing: -.055em; } .public-account-after ol { display: grid; border-top: 1px solid var(--public-line-strong); } .public-account-after li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: var(--space-xl); padding-block: 22px; border-bottom: 1px solid var(--public-line); } .public-account-after li span { color: var(--public-accent-fg); font-size: .7rem; font-weight: var(--font-weight-bold); } .public-account-after li p { color: var(--public-muted); line-height: 1.55; } /* Los componentes móviles nativos permanecen fuera de la composición de escritorio. -------- */ .landing-mega-menu__mobile-directory, .public-technical-context-mobile, .public-document-rail-mobile, .public-request-progress-mobile, .landing-footer-mobile { display: none; } /* Las dos correcciones autorizadas del carril de escritorio. ------------------------- */ @media (min-width: 1024px) { body[data-ui-page="landing"] .public-request-progress-mobile { display: none; } .landing-request-page--service .public-request-intro__layout { justify-content: stretch; } .landing-request-page--service .public-request-intro__layout > div:first-child { width: 100%; justify-self: start; } body[data-ui-page="landing"] .landing-footer__lead { display: grid; grid-template-columns: minmax(0, 620px) max-content; align-items: end; justify-content: start; gap: clamp(34px, 5vw, 72px); } body[data-ui-page="landing"] .landing-footer__lead > div { width: 100%; max-width: 620px; } } @media (min-width: 1181px) { body[data-ui-page="landing"] .public-final-cta__layout > div:first-child { margin-inline-start: clamp(-112px, -7vw, -72px); } } /* Service Explorer · one moving selection indicator -------------------- */ .public-service-explorer__tabs { position: relative; } .public-service-explorer__indicator { position: absolute; z-index: 3; display: block; border-radius: var(--radius-full); background: var(--public-line-strong); pointer-events: none; transition: width 360ms var(--motion-ease-standard), height 360ms var(--motion-ease-standard), transform 460ms var(--motion-ease-standard), opacity 180ms var(--motion-ease-standard); } .public-service-explorer__tabs[data-indicator-ready="false"] .public-service-explorer__indicator { transition: none; } @media (min-width: 1024px) { .public-service-explorer__indicator { top: 0; left: 12px; width: 3px; height: var(--public-explorer-indicator-size, 0px); transform: translateY(var(--public-explorer-indicator-position, 0px)); } } @media (max-width: 1023px) { body[data-ui-page="landing"] .public-service-explorer.is-enhanced .public-service-explorer__tabs button::after { display: none; } .public-service-explorer__indicator { bottom: 0; left: 0; width: var(--public-explorer-indicator-size, 0px); height: 2px; transform: translateX(var(--public-explorer-indicator-position, 0px)); } } /* Arranque del movimiento y secuencias de pseudo-elementos ------------------------- */ @media (prefers-reduced-motion: no-preference) { .public-motion-preload body[data-ui-page="landing"] :is( .public-hero__copy > .landing-public-eyebrow, .public-hero__copy > h1, .public-hero__copy > p, .public-hero__copy > .landing-actions, .public-hero__signals, .public-hero-product, .public-page-hero__layout > div:first-child > .landing-public-eyebrow, .public-page-hero__layout > div:first-child > h1, .public-page-hero__layout > div:first-child > p, .public-page-hero__layout > div:first-child > .landing-actions, .public-portal-privacy, .public-page-hero__layout > .public-services-radar, .public-page-hero__layout > .public-technical-context-mobile, .public-portal-composition, .public-request-intro__layout > div:first-child > .landing-public-eyebrow, .public-request-intro__layout > div:first-child > h1, .public-request-intro__layout > div:first-child > p, .public-request-intro__rail, .public-request-progress-mobile, .public-account-hero__layout > div:first-child > .landing-public-eyebrow, .public-account-hero__layout > div:first-child > h1, .public-account-hero__layout > div:first-child > p, .public-account-hero__layout > div:first-child > .landing-button, .public-account-protocol ) { opacity: 0; will-change: opacity, transform; } .public-motion-preload body[data-ui-page="landing"] :is( .public-hero__copy > h1, .public-page-hero__layout > div:first-child > h1, .public-request-intro__layout > div:first-child > h1, .public-account-hero__layout > div:first-child > h1 ) { opacity: 0; } .public-motion-preload body[data-ui-page="landing"] :is( .public-hero__copy > p, .public-page-hero__layout > div:first-child > p, .public-request-intro__layout > div:first-child > p, .public-account-hero__layout > div:first-child > p ) { opacity: 0; } .public-motion-preload body[data-ui-page="landing"] :is( .public-hero__copy > .landing-actions, .public-page-hero__layout > div:first-child > .landing-actions, .public-account-hero__layout > div:first-child > .landing-button ) { opacity: 0; } .public-motion-preload body[data-ui-page="landing"] :is( .public-hero__signals, .public-hero-product, .public-portal-privacy, .public-page-hero__layout > .public-services-radar, .public-page-hero__layout > .public-technical-context-mobile, .public-portal-composition, .public-request-intro__rail, .public-request-progress-mobile, .public-account-protocol ) { opacity: 0; } .public-motion-preload body[data-ui-page="landing"] .public-page-hero--services .public-services-radar::before { opacity: 0; } .public-motion-preload body[data-ui-page="landing"] .public-page-hero--services .public-services-radar::after { opacity: 0; } .public-motion-preload body[data-ui-page="landing"] .public-page-hero--services .public-services-radar__core { opacity: 0; } .public-motion-preload body[data-ui-page="landing"] .public-page-hero--services .public-services-radar__line { opacity: 0; } .public-motion-preload body[data-ui-page="landing"] .public-page-hero--services .public-services-radar__node { opacity: 0; } .public-motion-preload body[data-ui-page="landing"] :is( .public-equipment-context, .public-hero-product__stream, .public-document-dock, .public-portal-composition__identity, .public-portal-composition__equipment, .public-portal-composition__stream ) { opacity: 0; } :is(.public-diagnostic__visual, .public-services-radar)[data-motion-radar]::before, :is(.public-diagnostic__visual, .public-services-radar)[data-motion-radar]::after { opacity: 0; transform: scale(.82); transform-origin: center; } :is(.public-diagnostic__visual, .public-services-radar)[data-motion-radar].is-motion-running::before { animation: public-radar-ring 520ms var(--motion-ease-standard) var(--public-motion-delay, 0ms) both; } :is(.public-diagnostic__visual, .public-services-radar)[data-motion-radar].is-motion-running::after { animation: public-radar-ring 520ms var(--motion-ease-standard) calc(var(--public-motion-delay, 0ms) + 110ms) both; } .public-mini-timeline[data-motion-timeline] li:not(:last-child)::after { transform: scaleY(0); transform-origin: top center; } .public-mini-timeline[data-motion-timeline].is-motion-running li.is-complete::after { background: var(--public-accent); animation: public-status-progress 410ms var(--motion-ease-standard) var(--public-timeline-progress-delay, 0ms) both; } .public-mini-timeline[data-motion-timeline].is-motion-running li.is-current::after { animation: public-status-progress 360ms var(--motion-ease-standard) calc(var(--public-timeline-progress-delay, 0ms) + 430ms) both; } .public-journey-rail[data-motion-sequence]::before { transform: scaleX(0); transform-origin: left center; } .public-journey-rail[data-motion-sequence].is-motion-running::before { animation: public-sequence-line 900ms var(--motion-ease-standard) var(--public-motion-delay, 0ms) both; } .public-trace-stream[data-motion-sequence] li > span::after { transform: scaleY(0); transform-origin: top center; } .public-trace-stream[data-motion-sequence].is-motion-running li > span::after { animation: public-sequence-line-y 180ms var(--motion-ease-standard) calc(var(--public-motion-delay, 0ms) + (var(--public-motion-index, 0) * 210ms) + 115ms) both; } .public-document-rail-mobile__indicators span { transition: width 320ms var(--motion-ease-standard), background-color 320ms var(--motion-ease-standard), transform 320ms var(--motion-ease-standard), opacity 220ms var(--motion-ease-standard); } } @keyframes public-radar-ring { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: scale(1); } } @keyframes public-sequence-line { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes public-sequence-line-y { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes public-status-progress { from { transform: scaleY(0); } to { transform: scaleY(1); } } /* Transformaciones adaptables de página --------------------------------------- */ @media (max-width: 1180px) { .public-hero__layout { grid-template-columns: minmax(0, .82fr) minmax(480px, 1.18fr); gap: 48px; } .public-hero__copy h1 { font-size: clamp(3rem, 5.6vw, 4.9rem); } .public-hero__signals { grid-template-columns: minmax(0, 1fr); } .public-hero__signals li, .public-hero__signals li + li { padding: 12px 0; border-left: 0; } .public-hero__signals li + li { border-top: 1px solid var(--public-line); } .public-journey-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 0; } .public-journey-rail::before { display: none; } .public-journey-rail li { grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-lg); } .public-journey-rail li div { padding-right: var(--space-lg); } .public-portal-showcase__layout { grid-template-columns: minmax(300px, .72fr) minmax(470px, 1.28fr); gap: 50px; } .public-technical-spectrum__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .public-technical-spectrum__grid article:first-child { grid-column: 1 / -1; min-height: 360px; } .public-technical-spectrum__grid article { min-height: 400px; } .public-methodology__rail { grid-template-columns: repeat(3, minmax(0, 1fr)); } .public-methodology__rail li:nth-child(4) { border-left: 0; border-top: 1px solid var(--public-line); } .public-methodology__rail li:nth-child(5) { border-top: 1px solid var(--public-line); } .public-portal-security__layout > div:last-child { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); } } /* La capa adaptable de escritorio comprimida de R1.2 fue retirada por R1.3. */ @media (max-width: 0px) { .public-hero, .public-page-hero, .public-request-intro, .public-account-hero { padding-block: 64px; } .public-hero { padding-bottom: 0; } .public-hero__layout, .public-page-hero__layout, .public-portal-showcase__layout, .public-diagnostic__layout, .public-documents__layout, .public-account-hero__layout { grid-template-columns: minmax(0, 1fr); } .public-hero__copy { max-width: 760px; } .public-hero__copy h1, .public-page-hero h1, .public-request-intro h1, .public-account-hero h1 { font-size: clamp(3rem, 7vw, 4.8rem); } .public-hero__signals { grid-template-columns: repeat(3, minmax(0, 1fr)); } .public-hero__signals li + li { padding-left: 14px; border-top: 0; border-left: 1px solid var(--public-line); } .public-hero-product { width: min(100%, 820px); justify-self: center; } .public-needs__layout, .public-method__layout, .public-traceability__layout, .public-principles__layout, .public-faq__layout, .public-symptom-matrix__layout, .public-diagnostic-workbench__layout, .public-portal-purpose__layout, .public-portal-access-section__layout, .public-account-after__layout, .public-service-output__layout { grid-template-columns: minmax(0, 1fr); gap: 48px; } .public-capability-lanes article > div { grid-template-columns: minmax(0, 1fr); } .public-capability-lanes ul { grid-column: auto; } .public-portal-window { width: min(100%, 820px); justify-self: center; } .public-document-system { width: min(100%, 620px); justify-self: center; } .public-services-radar { width: min(100%, 480px); justify-self: center; } .public-request-intro__layout { grid-template-columns: minmax(0, 1fr); align-items: start; } .public-request-intro__rail { width: min(100%, 820px); } .public-request-shell, .public-account-workspace { grid-template-columns: minmax(0, 1fr); } .public-request-aside, .public-account-context { position: static; } .public-request-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); } .public-request-summary { grid-row: span 2; } .public-account-context { grid-template-columns: minmax(260px, .85fr) minmax(0, 1.15fr); align-items: start; } .public-account-context > :where(.landing-public-eyebrow, h2, > p) { grid-column: 1; } .public-account-context__stream { grid-row: 1 / 5; grid-column: 2; } .public-account-context .public-safety-note { grid-column: 1 / -1; } } @media (max-width: 0px) { .public-hero__copy h1, .public-page-hero h1, .public-request-intro h1, .public-account-hero h1 { font-size: clamp(2.7rem, 8.8vw, 4rem); } .public-hero__layout, .public-page-hero__layout, .public-portal-showcase__layout, .public-diagnostic__layout, .public-documents__layout, .public-account-hero__layout { gap: 44px; } .public-hero__signals { grid-template-columns: minmax(0, 1fr); } .public-hero__signals li, .public-hero__signals li + li { padding: 12px 0; border-left: 0; } .public-services-radar { width: min(100%, 380px); } .public-hero__signals li + li { border-top: 1px solid var(--public-line); } .public-continuity-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding-block: var(--space-md); } .public-continuity-strip span { padding: 10px; text-align: center; } .public-continuity-strip i { display: none; } .public-needs__layout, .public-method__layout, .public-traceability__layout, .public-principles__layout, .public-faq__layout, .public-symptom-matrix__layout, .public-diagnostic-workbench__layout, .public-portal-purpose__layout, .public-portal-access-section__layout, .public-account-after__layout, .public-service-output__layout { grid-template-columns: minmax(0, 1fr); gap: 38px; } .public-needs__map article { grid-template-columns: minmax(0, 1fr) auto; } .public-needs__map em { grid-column: auto; text-align: right; } .public-journey-rail { grid-template-columns: minmax(0, 1fr); gap: 0; } .public-journey-rail::before { display: none; } .public-journey-rail li { position: relative; min-height: 0; grid-template-columns: 40px minmax(0, 1fr); align-items: start; gap: 18px; padding: 0 0 30px; } .public-journey-rail li > span { grid-column: 1; } .public-journey-rail li > div { grid-column: 2; } .public-journey-rail li:not(:last-child)::after { position: absolute; top: 43px; bottom: 0; left: 19px; width: 1px; content: ""; background: var(--public-line-strong); } .public-journey-rail[data-motion-sequence] li::after { transform: scaleY(0); transform-origin: top center; } .public-journey-rail[data-motion-sequence].is-motion-running li::after { animation: public-sequence-line-y 390ms var(--motion-ease-standard) calc(var(--public-motion-delay, 0ms) + (var(--public-motion-index, 0) * 80ms) + 150ms) both; } .public-diagnostic__visual { width: min(100%, 400px); justify-self: center; } .public-capability-lanes article { grid-template-columns: 90px minmax(0, 1fr) 44px; gap: 24px; } .public-capability-lanes article > span[aria-hidden="true"] { width: 44px; height: 44px; } .public-capability-lanes article > span[aria-hidden="true"] svg { width: 34px; height: 34px; } .public-method__statements article { grid-template-columns: 66px minmax(0, 1fr); } .public-method__statements p { grid-column: 2; } .public-portal-showcase__copy { max-width: 700px; } .public-portal-window__activity { grid-template-columns: minmax(0, 1fr); } .public-scenario-list article { grid-template-columns: 80px minmax(0, 1fr) 42px; } .public-scenario-list em { grid-column: 2; } .public-scenario-list article > a { grid-row: 1 / 3; grid-column: 3; } .public-final-cta__layout { grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--space-xl); } .public-page-index > div { padding-inline: 18px; } .public-symptom-matrix__rows article { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 14px; padding-block: 24px; } .public-symptom-matrix__rows article > p { grid-column: auto; gap: 5px; padding-top: var(--space-sm); } .public-symptom-matrix__rows strong { color: var(--public-ink); font-size: var(--font-size-xs); } .public-diagnostic-workbench__board { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); } .public-diagnostic-workbench__board > i { width: auto; height: 26px; transform: rotate(90deg); } .public-diagnostic-workbench__board > div { min-height: 140px; } .public-technical-spectrum__grid, .public-portal-layers__stage { grid-template-columns: minmax(0, 1fr); } .public-technical-spectrum__grid article:first-child { grid-column: auto; } .public-technical-spectrum__grid article, .public-portal-layers__stage article { min-height: 0; align-content: start; } .public-methodology__rail { grid-template-columns: minmax(0, 1fr); } .public-methodology__rail li, .public-methodology__rail li + li, .public-methodology__rail li:nth-child(4), .public-methodology__rail li:nth-child(5) { grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-lg); border-top: 0; border-left: 0; border-bottom: 1px solid var(--public-line); } .public-methodology__deliverables { grid-template-columns: minmax(0, 1fr); } .public-methodology__deliverables ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } .public-service-output__flow { align-items: stretch; flex-direction: column; } .public-service-output__flow span { grid-template-columns: 24px minmax(0, 1fr); justify-items: start; text-align: left; } .public-service-output__flow i { width: 1px; min-height: 24px; margin-left: 11px; flex: 0 0 24px; } .public-portal-composition__stream { grid-template-columns: minmax(0, 1fr); } .public-portal-layers__stage article { min-height: 0; } .public-portal-security__layout { grid-template-columns: 60px minmax(0, 1fr); } .public-portal-security__layout > div:last-child { grid-column: 1 / -1; } .public-request-intro__rail { grid-template-columns: minmax(0, 1fr); } .public-request-intro__rail li { grid-template-columns: 34px minmax(0, 1fr); gap: var(--space-md); padding: 13px 0; } .public-request-intro__rail li + li { border-top: 1px solid var(--public-line); border-left: 0; } .public-request-intro__rail li > span { grid-row: 1; } .public-request-aside { grid-template-columns: minmax(0, 1fr); } .public-request-summary { grid-row: auto; } .public-account-context { grid-template-columns: minmax(0, 1fr); padding: 30px; } .public-account-context > :where(.landing-public-eyebrow, h2, > p), .public-account-context__stream, .public-account-context .public-safety-note { grid-row: auto; grid-column: auto; } } @media (max-width: 0px) { .public-hero, .public-page-hero, .public-request-intro, .public-account-hero { padding-block: 48px; } .public-hero { padding-bottom: 0; } .public-hero__layout, .public-page-hero__layout, .public-portal-showcase__layout, .public-diagnostic__layout, .public-documents__layout, .public-account-hero__layout { gap: 34px; } .public-hero__copy, .public-page-hero__layout > div:first-child, .public-request-intro__layout > div, .public-account-hero__layout > div:first-child { gap: 20px; } .public-hero__copy h1, .public-page-hero h1, .public-request-intro h1, .public-account-hero h1 { font-size: clamp(2.4rem, 10.8vw, 3.35rem); line-height: .98; letter-spacing: -.058em; } .public-hero__copy > p, .public-page-hero__layout > div:first-child > p, .public-request-intro__layout > div > p, .public-account-hero__layout > div:first-child > p { font-size: 1rem; line-height: 1.62; } .public-hero .landing-actions, .public-page-hero .landing-actions, .public-final-cta .landing-actions { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; } .public-hero .landing-button, .public-page-hero .landing-button, .public-final-cta .landing-button { width: 100%; } .public-product-bar { display: grid; min-height: 0; padding-block: 14px; } .public-product-bar .landing-ui-status { justify-self: start; } .public-equipment-context__identity { grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-md); padding: 17px; } .public-equipment-context__identity em { grid-column: 2; justify-self: start; } .public-equipment-context__facts { grid-template-columns: minmax(0, 1fr); } .public-equipment-context__facts div + div { border-top: 1px solid var(--public-line); border-left: 0; } .public-equipment-context__facts div { padding: 12px 16px; } .public-hero-product__body { gap: 14px; padding: 16px; } .public-stream-focus, .public-mini-timeline { padding: 16px; } .public-hero__signals { margin-top: 0; } .public-continuity-strip { margin-top: 32px; } .public-hero-product__stream, .public-document-dock { grid-template-columns: minmax(0, 1fr); } .public-document-dock > div { min-height: 62px; } .public-needs__map article { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); padding-block: 22px; } .public-needs__map em { text-align: left; } .public-diagnostic-list { grid-template-columns: minmax(0, 1fr); } .public-diagnostic__visual, .public-services-radar { width: min(100%, 320px); aspect-ratio: 1; justify-self: center; } .public-diagnostic__visual { background: var(--public-stage-bg); } .public-diagnostic__core, .public-services-radar__core { width: 128px; height: 128px; gap: 4px; padding: 13px; } .public-diagnostic__core small, .public-diagnostic__core p, .public-services-radar__core small { font-size: .66rem; line-height: 1.3; text-align: center; } .public-diagnostic__core strong { font-size: 1rem; line-height: 1.18; text-align: center; } .public-diagnostic__orbit, .public-services-radar__node { max-width: 92px; padding: 6px 8px; font-size: .62rem; line-height: 1.15; text-align: center; white-space: nowrap; } .public-diagnostic__orbit--one, .public-services-radar__node--diagnostic { top: 4%; } .public-diagnostic__orbit--one { transform: translateX(-50%); } .public-diagnostic__orbit--two, .public-services-radar__node--software { right: 0; left: auto; transform: translateY(-50%); } .public-diagnostic__orbit--three, .public-services-radar__node--hardware { top: auto; bottom: 4%; left: 50%; transform: translateX(-50%); } .public-diagnostic__orbit--four, .public-services-radar__node--physical { right: auto; left: 0; transform: translateY(-50%); } .public-services-radar { --public-radar-line-length: calc(50% - 64px); --public-radar-node-axis: 0%; } .public-capability-lanes article { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); } .public-capability-lanes article > span[aria-hidden="true"] { display: none; } .public-capability-lanes article > div { gap: var(--space-lg); } .public-capability-lanes ul { display: grid; } .public-method__statements article { grid-template-columns: minmax(0, 1fr); } .public-method__statements p { grid-column: auto; } .public-portal-window__shell { grid-template-columns: minmax(0, 1fr); } .public-portal-window__shell > aside { display: flex; padding: 12px; border-right: 0; border-bottom: 1px solid color-mix(in srgb, var(--public-stage-fg) 13%, transparent); } .public-portal-window > header { grid-template-columns: 1fr auto; } .public-portal-window > header small { display: none; } .public-portal-window__equipment, .public-portal-composition__equipment { grid-template-columns: 40px minmax(0, 1fr); } .public-portal-window__equipment em, .public-portal-composition__equipment em { grid-column: 2; justify-self: start; } .public-trace-stream li { grid-template-columns: 20px minmax(0, 1fr); } .public-trace-stream time { grid-column: 2; grid-row: 1; margin-bottom: -8px; } .public-trace-stream li > span { grid-column: 1; grid-row: 1 / 3; } .public-trace-stream li > div { grid-column: 2; } .public-trace-stream li:not(:last-child) > span::after { height: 80px; } .public-document-system { min-height: 320px; } .public-document-sheet { width: 82%; min-height: 248px; padding: 20px; } .public-document-sheet--front { top: 62px; } .public-document-system__link { width: 80px; height: 80px; } .public-scenario-list article { grid-template-columns: minmax(0, 1fr) 40px; } .public-scenario-list article > span, .public-scenario-list article > div, .public-scenario-list em { grid-column: 1; } .public-scenario-list article > a { grid-row: 1 / 4; grid-column: 2; } .public-symptom-matrix__rows article { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); } .public-symptom-matrix__rows article > p { grid-column: auto; } .public-methodology__deliverables ul { grid-template-columns: minmax(0, 1fr); } .public-portal-composition { padding: 18px; } .public-portal-composition__identity { grid-template-columns: 38px minmax(0, 1fr); } .public-portal-composition__identity em { grid-column: 2; } .public-portal-purpose__features article > div { grid-template-columns: minmax(0, 1fr); } .public-portal-purpose__features p { grid-column: auto; } .public-portal-security__layout { grid-template-columns: minmax(0, 1fr); } .public-portal-security__layout > div:last-child { grid-column: auto; } .public-account-protocol li { grid-template-columns: 34px minmax(0, 1fr); } .public-account-protocol li em { grid-column: 2; } .public-page-index > div { min-height: 48px; gap: 24px; padding-inline: 0; } .public-service-explorer { margin-top: 34px; border-radius: var(--radius-elevated); } .public-service-explorer__tabs { display: grid; grid-auto-columns: minmax(210px, 78vw); grid-auto-flow: column; overflow-x: auto; scroll-snap-type: x mandatory; } .public-service-explorer__tabs button { min-width: 0; scroll-snap-align: start; } .public-service-explorer__stage [data-service-panel] { gap: 22px; padding: 24px 20px; } .public-service-panel__copy h3 { font-size: clamp(1.8rem, 8.5vw, 2.5rem); } .public-request-intro__rail li { padding-block: 12px; } .public-request-section, .public-account-request-section { padding-block: 48px; } .public-account-context { gap: var(--space-lg); padding: 24px 20px; } .public-final-cta { padding-block: 52px; } } @media (max-width: 0px) { .public-hero, .public-page-hero, .public-request-intro, .public-account-hero { padding-block: 44px; } .public-hero { padding-bottom: 0; } .public-hero__copy h1, .public-page-hero h1, .public-request-intro h1, .public-account-hero h1 { font-size: clamp(2.2rem, 10.4vw, 2.8rem); } .public-section-heading h2, .public-portal-showcase__copy h2, .public-documents__copy h2, .public-final-cta h2, .public-portal-access-section h2, .public-account-after h2 { font-size: clamp(2rem, 10vw, 2.75rem); } .public-hero-product__body, .public-portal-window__content { padding: 16px; } .public-continuity-strip { grid-template-columns: minmax(0, 1fr); } .public-continuity-strip span + span { border-top: 1px solid var(--public-line); } .public-document-system { min-height: 292px; } .public-document-sheet { width: 84%; min-height: 230px; } .public-document-sheet--middle { right: 2%; } .public-portal-layers__stage article, .public-technical-spectrum__grid article { min-height: 0; padding: 24px 20px; } .public-diagnostic__visual, .public-services-radar { width: min(100%, 300px); } .public-services-radar { --public-radar-line-length: calc(50% - 62px); --public-radar-node-axis: 0%; } .public-diagnostic__core { width: 124px; height: 124px; } .public-diagnostic__core strong { font-size: var(--font-size-md); } .public-services-radar__core { width: 124px; height: 124px; padding: 12px; } .public-services-radar__core img { width: 28px; height: 32px; } .public-account-context { padding: 24px 20px; } .public-continuity-strip { margin-top: 26px; } .public-request-section, .public-account-request-section { padding-block: 42px; } .public-final-cta { padding-block: 46px; } } /* ======================================================================== R1.3 · Experiencia móvil nativa Este es el único responsable activo de distribución pública por debajo de 1024px. ======================================================================== */ @media (max-width: 1023px) { body[data-ui-page="landing"] { --public-header-height: 68px; } body[data-ui-page="landing"].landing-menu-open { padding-top: var(--public-header-height); overflow: hidden; } body[data-ui-page="landing"] .landing-header { border-bottom-color: var(--public-line); background: color-mix(in srgb, var(--public-canvas) 96%, transparent); } body[data-ui-page="landing"].landing-menu-open .landing-header { position: fixed; inset: 0 0 auto; } body[data-ui-page="landing"] .landing-header__inner { min-height: var(--public-header-height); justify-content: space-between; gap: 14px; } body[data-ui-page="landing"] .landing-brand { min-width: 0; gap: 10px; } body[data-ui-page="landing"] .landing-brand__logo { width: 36px; height: 40px; flex-basis: 36px; } body[data-ui-page="landing"] .landing-brand__text strong { font-size: 1rem; } body[data-ui-page="landing"] .landing-header__actions { gap: 8px; } body[data-ui-page="landing"] .landing-theme-button, body[data-ui-page="landing"] .landing-menu-button { width: 44px; height: 44px; min-width: 44px; border-radius: 12px; box-shadow: none; } body[data-ui-page="landing"] .landing-menu-button.is-enhanced { display: inline-grid; } body[data-ui-page="landing"] .landing-navigation { position: fixed; z-index: var(--z-dropdown); top: calc(var(--public-header-height) + 10px); right: max(14px, env(safe-area-inset-right)); left: auto; display: grid; width: min(440px, calc(100vw - 28px)); max-height: calc(100dvh - var(--public-header-height) - 24px); align-content: start; gap: 0; overflow-y: auto; overscroll-behavior: contain; color: var(--public-ink); border: 1px solid var(--public-line-strong); border-radius: 18px; background: var(--public-surface-raised); box-shadow: var(--shadow-overlay); -webkit-overflow-scrolling: touch; } body[data-ui-page="landing"] .landing-navigation.is-enhanced { display: none; } body[data-ui-page="landing"] .landing-navigation.is-enhanced.is-open { display: grid; } body[data-ui-page="landing"] .landing-navigation__primary, body[data-ui-page="landing"] .landing-navigation__actions { display: grid; gap: 2px; padding: 10px; } body[data-ui-page="landing"] .landing-navigation__primary > a, body[data-ui-page="landing"] .landing-nav-mega__trigger, body[data-ui-page="landing"] .landing-nav-account { width: 100%; min-height: 44px; justify-content: flex-start; padding-inline: 14px; border-radius: 10px; } body[data-ui-page="landing"] .landing-navigation__primary > a.is-active, body[data-ui-page="landing"] .landing-nav-mega__trigger.is-active, body[data-ui-page="landing"] .landing-nav-mega__trigger[aria-expanded="true"] { box-shadow: inset 2px 0 0 var(--public-accent); } body[data-ui-page="landing"] .landing-navigation__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--public-line); border-left: 0; background: color-mix(in srgb, var(--public-surface-soft) 72%, transparent); } body[data-ui-page="landing"] .landing-nav-cta, body[data-ui-page="landing"] .landing-nav-login, body[data-ui-page="landing"] .landing-nav-account { min-height: 44px; } body[data-ui-page="landing"] .landing-nav-cta { grid-column: 1 / -1; order: 1; } body[data-ui-page="landing"] .landing-nav-account { display: inline-flex; order: 2; } body[data-ui-page="landing"] .landing-nav-login { order: 3; } body[data-ui-page="landing"] .landing-nav-mega { position: static; } body[data-ui-page="landing"] .landing-nav-mega__trigger { justify-content: space-between; } body[data-ui-page="landing"] .landing-mega-menu { position: static; display: block; width: auto; margin: 3px 4px 7px; overflow: visible; border: 1px solid var(--public-line); border-radius: 12px; background: var(--public-surface-soft); box-shadow: none; } body[data-ui-page="landing"] .landing-mega-menu[hidden] { display: none; } body[data-ui-page="landing"] :is(.landing-mega-menu__intro, .landing-mega-menu__directory, .landing-mega-menu__rail) { display: none; } body[data-ui-page="landing"] .landing-mega-menu__mobile-directory { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; overflow: hidden; border: 0; border-radius: 12px; background: transparent; } body[data-ui-page="landing"] .landing-mega-menu__mobile-directory a { display: grid; min-height: 46px; grid-template-columns: 8px minmax(0, 1fr) 16px; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--public-line); background: transparent; } body[data-ui-page="landing"] .landing-mega-menu__mobile-directory a:nth-last-child(-n + 2) { border-bottom: 0; } body[data-ui-page="landing"] .landing-mega-menu__mobile-directory a > span { width: 6px; height: 6px; border-radius: 50%; background: var(--public-accent); } body[data-ui-page="landing"] .landing-mega-menu__mobile-directory strong { font-size: .76rem; line-height: 1.35; } body[data-ui-page="landing"] .landing-mega-menu__mobile-directory svg { width: 14px; height: 14px; color: var(--public-subtle); } body[data-ui-page="landing"] .landing-navigation-backdrop:not([hidden]) { inset: var(--public-header-height) 0 0; background: color-mix(in srgb, var(--public-canvas) 58%, transparent); backdrop-filter: blur(4px); } body[data-ui-page="landing"][data-public-input="pointer"] :is(.landing-theme-button, .landing-menu-button):focus, body[data-ui-page="landing"] :is(.landing-theme-button, .landing-menu-button):focus:not(:focus-visible) { outline: 0; box-shadow: none; } body[data-ui-page="landing"] .public-section { padding-block: 72px; } body[data-ui-page="landing"] :is(.public-hero, .public-page-hero, .public-request-intro, .public-account-hero) { padding-block: 56px; } body[data-ui-page="landing"] .public-page-hero--portal { background: var(--public-stage-bg); } body[data-ui-page="landing"] .public-hero { padding-bottom: 0; } body[data-ui-page="landing"] :is( .public-hero__layout, .public-page-hero__layout, .public-portal-showcase__layout, .public-diagnostic__layout, .public-documents__layout, .public-account-hero__layout, .public-request-intro__layout, .public-needs__layout, .public-method__layout, .public-traceability__layout, .public-principles__layout, .public-faq__layout, .public-symptom-matrix__layout, .public-diagnostic-workbench__layout, .public-portal-purpose__layout, .public-portal-access-section__layout, .public-account-after__layout, .public-service-output__layout, .public-request-shell, .public-account-workspace ) { grid-template-columns: minmax(0, 1fr); } body[data-ui-page="landing"] :is(.public-hero__layout, .public-page-hero__layout, .public-account-hero__layout) { gap: 42px; } body[data-ui-page="landing"] :is(.public-hero__copy, .public-page-hero__layout > div:first-child, .public-request-intro__layout > div:first-child, .public-account-hero__layout > div:first-child) { max-width: 760px; gap: 22px; } body[data-ui-page="landing"] :is(.public-hero__copy h1, .public-page-hero h1, .public-request-intro h1, .public-account-hero h1) { font-size: clamp(2.75rem, 7vw, 4.45rem); line-height: .97; letter-spacing: -.062em; } body[data-ui-page="landing"] :is(.public-hero__copy > p, .public-page-hero__layout > div:first-child > p, .public-request-intro__layout > div:first-child > p, .public-account-hero__layout > div:first-child > p) { max-width: 650px; font-size: 1rem; line-height: 1.64; } body[data-ui-page="landing"] :is(.public-section-heading--split, .landing-service-close__header) { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 24px; } body[data-ui-page="landing"] .public-section-heading--sticky { position: static; } body[data-ui-page="landing"] .public-hero-product, body[data-ui-page="landing"] .public-portal-window { width: min(100%, 760px); justify-self: center; } body[data-ui-page="landing"] .public-hero__signals { grid-template-columns: repeat(3, minmax(0, 1fr)); } body[data-ui-page="landing"] .public-continuity-strip { min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-top: 32px; padding-block: 12px; border-top: 1px solid var(--public-line); } body[data-ui-page="landing"] .public-continuity-strip span { padding: 8px; text-align: center; } body[data-ui-page="landing"] .public-continuity-strip i { display: none; } body[data-ui-page="landing"] .public-needs__map article { padding-block: 24px; } body[data-ui-page="landing"] .public-service-explorer { grid-template-columns: minmax(0, 1fr); margin-top: 38px; } body[data-ui-page="landing"] .public-service-explorer__tabs { display: grid; grid-auto-columns: minmax(210px, 34vw); grid-auto-flow: column; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--public-line); scroll-padding-inline: 12px; scroll-snap-type: x mandatory; scrollbar-width: thin; } body[data-ui-page="landing"] .public-service-explorer__tabs button { min-width: 0; scroll-snap-align: start; } body[data-ui-page="landing"] .public-service-explorer__tabs button::after { position: absolute; right: 18px; bottom: 0; left: 18px; height: 2px; content: ""; border-radius: var(--radius-full); background: var(--public-accent); opacity: 0; transform: scaleX(.2); transition: opacity 180ms var(--motion-ease-standard), transform 260ms var(--motion-ease-standard); } body[data-ui-page="landing"] .public-service-explorer__tabs button[aria-selected="true"]::after { opacity: 1; transform: scaleX(1); } body[data-ui-page="landing"] .public-service-explorer__stage [data-service-panel] { min-height: 0; grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 34px; } body[data-ui-page="landing"] .public-service-panel__detail { padding: 22px 0 0; border-top: 1px solid var(--public-line); border-left: 0; } body[data-ui-page="landing"] .public-service-panel__result { grid-template-columns: 38px minmax(0, 1fr); } body[data-ui-page="landing"] .public-service-panel__result .landing-text-link { grid-column: 2; } body[data-ui-page="landing"] .public-journey .public-section-heading { margin-bottom: 38px; } body[data-ui-page="landing"] .public-journey-rail { position: relative; grid-template-columns: minmax(0, 1fr); gap: 0; padding-left: 2px; } body[data-ui-page="landing"] .public-journey-rail::before { display: block; top: 20px; right: auto; bottom: 28px; left: 21px; width: 2px; height: auto; background: var(--public-line-strong); } body[data-ui-page="landing"] .public-journey-rail li { min-height: 0; grid-template-columns: 40px minmax(0, 1fr); gap: 18px; padding: 0 0 30px; } body[data-ui-page="landing"] .public-journey-rail li > div { gap: 6px; padding: 2px 0 0; } body[data-ui-page="landing"] .public-journey-rail li:not(:first-child) > span { background: var(--public-canvas); } body[data-ui-page="landing"] .public-journey-rail li:not(:last-child)::after { display: none; } body[data-ui-page="landing"] .public-journey-rail[data-motion-sequence]::before { transform: scaleY(0); transform-origin: top center; } body[data-ui-page="landing"] .public-journey-rail[data-motion-sequence].is-motion-running::before { animation: public-sequence-line-y 880ms var(--motion-ease-standard) var(--public-motion-delay, 0ms) both; } body[data-ui-page="landing"] :is(.public-diagnostic__visual, .public-services-radar, .public-document-system) { display: none; } body[data-ui-page="landing"] .public-technical-context-mobile { position: relative; display: grid; width: min(100%, 620px); justify-self: center; overflow: hidden; color: var(--public-stage-fg); border: 1px solid color-mix(in srgb, var(--public-stage-fg) 17%, transparent); border-radius: 18px; background: color-mix(in srgb, var(--public-stage-bg) 92%, var(--public-surface)); box-shadow: 0 20px 44px color-mix(in srgb, var(--public-stage-bg) 40%, transparent); } body[data-ui-page="landing"] .public-page-hero .public-technical-context-mobile { color: var(--public-ink); border-color: var(--public-line-strong); background: var(--public-surface); box-shadow: var(--shadow-floating); } body[data-ui-page="landing"] .public-technical-context-mobile > header { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent); } body[data-ui-page="landing"] .public-technical-context-mobile > header > span { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; color: var(--public-muted); border-radius: 11px; background: var(--public-surface-soft); } body[data-ui-page="landing"] .public-technical-context-mobile > header svg { width: 19px; height: 19px; } body[data-ui-page="landing"] .public-technical-context-mobile > header div { display: grid; gap: 3px; } body[data-ui-page="landing"] .public-technical-context-mobile small { color: color-mix(in srgb, currentColor 64%, transparent); font-size: .66rem; letter-spacing: .1em; } body[data-ui-page="landing"] .public-technical-context-mobile__core { display: grid; gap: 6px; margin: 18px 18px 0; padding: 18px; border: 1px solid var(--public-line-strong); border-radius: 14px; background: var(--public-surface-raised); } body[data-ui-page="landing"] .public-technical-context-mobile__core strong { font-family: var(--font-title); font-size: 1.18rem; letter-spacing: -.025em; } body[data-ui-page="landing"] .public-technical-context-mobile__core p { color: color-mix(in srgb, currentColor 68%, transparent); font-size: .78rem; } body[data-ui-page="landing"] .public-technical-context-mobile__connectors { position: relative; height: 26px; margin-inline: 44px; } body[data-ui-page="landing"] .public-technical-context-mobile__connectors span:first-child { position: absolute; top: 0; bottom: 8px; left: 50%; width: 1px; background: var(--public-line-strong); } body[data-ui-page="landing"] .public-technical-context-mobile__connectors span:last-child { position: absolute; right: 22%; bottom: 8px; left: 22%; height: 1px; background: var(--public-line-strong); } body[data-ui-page="landing"] .public-technical-context-mobile__dimensions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0 18px 18px; overflow: hidden; border: 1px solid color-mix(in srgb, currentColor 13%, transparent); border-radius: 14px; background: color-mix(in srgb, currentColor 13%, transparent); } body[data-ui-page="landing"] .public-technical-context-mobile__dimensions > span { display: flex; min-height: 52px; align-items: center; gap: 9px; padding: 12px; background: color-mix(in srgb, var(--public-stage-bg) 94%, var(--public-surface)); font-size: .78rem; font-weight: var(--font-weight-semibold); } body[data-ui-page="landing"] .public-page-hero .public-technical-context-mobile__dimensions > span { background: var(--public-surface); } body[data-ui-page="landing"] .public-technical-context-mobile__dimensions i { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--public-line-strong); box-shadow: none; } body[data-ui-page="landing"] .public-diagnostic__content { gap: 38px; } body[data-ui-page="landing"] .public-diagnostic-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } body[data-ui-page="landing"] .public-capability-lanes article { grid-template-columns: 84px minmax(0, 1fr); gap: 22px; } body[data-ui-page="landing"] .public-capability-lanes article > div { grid-template-columns: minmax(0, 1fr); } body[data-ui-page="landing"] .public-capability-lanes article > span[aria-hidden="true"] { display: none; } body[data-ui-page="landing"] .public-method__statements article { grid-template-columns: 64px minmax(0, 1fr); } body[data-ui-page="landing"] .public-method__statements p { grid-column: 2; } body[data-ui-page="landing"] .public-portal-window__shell { grid-template-columns: minmax(0, 1fr); } body[data-ui-page="landing"] .public-portal-window__shell > aside { display: flex; padding: 10px 14px; border-right: 0; border-bottom: 1px solid color-mix(in srgb, var(--public-stage-fg) 13%, transparent); } body[data-ui-page="landing"] .public-portal-window__content { gap: 0; padding: 22px; } body[data-ui-page="landing"] .public-portal-window__equipment { border-inline: 0; border-radius: 0; } body[data-ui-page="landing"] .public-portal-window__activity { gap: 0; border-bottom: 1px solid color-mix(in srgb, var(--public-stage-fg) 13%, transparent); } body[data-ui-page="landing"] .public-portal-window__activity > div { border: 0; border-radius: 0; } body[data-ui-page="landing"] .public-trace-stream { position: relative; padding: 22px; border: 1px solid var(--public-line-strong); border-radius: 18px; background: var(--public-surface); } body[data-ui-page="landing"] .public-trace-stream li { min-height: 0; grid-template-columns: 22px minmax(0, 1fr); gap: 0 14px; padding-bottom: 22px; } body[data-ui-page="landing"] .public-trace-stream li:last-child { padding-bottom: 0; } body[data-ui-page="landing"] .public-trace-stream time { grid-row: 1; grid-column: 2; padding: 0 0 6px; } body[data-ui-page="landing"] .public-trace-stream li > span { grid-row: 1 / 3; grid-column: 1; margin-top: 3px; } body[data-ui-page="landing"] .public-trace-stream li > div { grid-column: 2; gap: 4px; padding: 0 0 18px; } body[data-ui-page="landing"] .public-trace-stream li:not(:last-child) > span::after { top: 12px; bottom: -46px; height: auto; } body[data-ui-page="landing"] .public-document-rail-mobile { display: grid; min-width: 0; gap: 14px; } body[data-ui-page="landing"] .public-document-rail-mobile__track { display: flex; min-width: 0; gap: 14px; overflow-x: auto; padding: 2px 2px 10px; scroll-padding-inline: 2px; scroll-snap-type: x mandatory; scrollbar-width: thin; } body[data-ui-page="landing"] .public-document-rail-mobile article { display: grid; min-width: min(72vw, 330px); min-height: 244px; align-content: start; gap: 14px; padding: 22px; border: 1px solid var(--public-line-strong); border-radius: 16px; background: var(--public-surface); box-shadow: var(--shadow-subtle); scroll-snap-align: start; } body[data-ui-page="landing"] .public-document-rail-mobile article > small { color: var(--public-accent-fg); font-size: .67rem; font-weight: var(--font-weight-bold); letter-spacing: .09em; } body[data-ui-page="landing"] .public-document-rail-mobile article > span { display: grid; width: 42px; height: 42px; place-items: center; color: var(--public-muted); border-radius: 12px; background: var(--public-surface-soft); } body[data-ui-page="landing"] .public-document-rail-mobile article svg { width: 20px; height: 20px; } body[data-ui-page="landing"] .public-document-rail-mobile article strong { font-family: var(--font-title); font-size: 1.2rem; letter-spacing: -.025em; } body[data-ui-page="landing"] .public-document-rail-mobile article p { color: var(--public-muted); font-size: .82rem; line-height: 1.55; } body[data-ui-page="landing"] .public-document-rail-mobile__indicators { display: flex; gap: 7px; } body[data-ui-page="landing"] .public-document-rail-mobile__indicators span { width: 18px; height: 3px; border-radius: var(--radius-full); background: var(--public-line-strong); } body[data-ui-page="landing"] .public-document-rail-mobile__indicators span.is-active { width: 32px; background: var(--public-accent); } body[data-ui-page="landing"] .public-documents__layout { gap: 42px; } body[data-ui-page="landing"] .public-documents__copy h2, body[data-ui-page="landing"] .public-portal-showcase__copy h2 { font-size: clamp(2.45rem, 7vw, 4rem); } body[data-ui-page="landing"] .public-scenario-list article { grid-template-columns: 78px minmax(0, 1fr) 40px; } body[data-ui-page="landing"] .public-scenario-list em { grid-column: 2; } body[data-ui-page="landing"] .public-scenario-list article > a { grid-row: 1 / 3; grid-column: 3; } body[data-ui-page="landing"] .public-page-index > div { min-height: 48px; gap: 26px; overflow-x: auto; scroll-snap-type: x proximity; } body[data-ui-page="landing"] .public-page-index a { scroll-snap-align: start; } body[data-ui-page="landing"] .public-symptom-matrix__rows article { grid-template-columns: minmax(0, 1fr) minmax(180px, .72fr); gap: 18px; } body[data-ui-page="landing"] .public-symptom-matrix__rows article > p { grid-column: 1 / -1; } body[data-ui-page="landing"] .public-diagnostic-workbench__board { grid-template-columns: minmax(0, 1fr); gap: 0; overflow: hidden; border: 1px solid var(--public-line-strong); border-radius: 18px; } body[data-ui-page="landing"] .public-diagnostic-workbench__board > div { min-height: 0; border: 0; border-radius: 0; } body[data-ui-page="landing"] .public-diagnostic-workbench__board > div + i + div { border-top: 1px solid var(--public-line); } body[data-ui-page="landing"] .public-diagnostic-workbench__board > i { width: auto; height: 26px; transform: rotate(90deg); } body[data-ui-page="landing"] .public-technical-spectrum__grid, body[data-ui-page="landing"] .public-portal-layers__stage { display: grid; grid-auto-columns: minmax(300px, 72vw); grid-auto-flow: column; grid-template-columns: none; gap: 14px; overflow-x: auto; padding-bottom: 10px; border: 0; border-radius: 0; background: transparent; scroll-snap-type: x mandatory; } body[data-ui-page="landing"] :is(.public-technical-spectrum__grid, .public-portal-layers__stage) article, body[data-ui-page="landing"] .public-technical-spectrum__grid article:first-child { min-height: 360px; grid-column: auto; border: 1px solid var(--public-line-strong); border-radius: 18px; scroll-snap-align: start; } body[data-ui-page="landing"] .public-methodology__rail { grid-template-columns: minmax(0, 1fr); } body[data-ui-page="landing"] .public-methodology__rail li, body[data-ui-page="landing"] .public-methodology__rail li + li, body[data-ui-page="landing"] .public-methodology__rail li:nth-child(4), body[data-ui-page="landing"] .public-methodology__rail li:nth-child(5) { min-height: 0; grid-template-columns: 40px minmax(0, 1fr); gap: 18px; padding: 22px 0; border-top: 0; border-right: 0; border-bottom: 1px solid var(--public-line); border-left: 0; } body[data-ui-page="landing"] .public-methodology__deliverables ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } body[data-ui-page="landing"] .public-service-output__flow { align-items: stretch; flex-direction: column; } body[data-ui-page="landing"] .public-service-output__flow span { grid-template-columns: 24px minmax(0, 1fr); justify-items: start; text-align: left; } body[data-ui-page="landing"] .public-service-output__flow i { width: 1px; min-height: 22px; margin-left: 11px; flex-basis: 22px; } body[data-ui-page="landing"] .public-portal-composition { width: min(100%, 700px); justify-self: center; padding: 22px; } body[data-ui-page="landing"] .public-portal-composition__stream { grid-template-columns: minmax(0, 1fr); } body[data-ui-page="landing"] .public-portal-purpose__features article > div { grid-template-columns: minmax(0, 1fr); } body[data-ui-page="landing"] .public-portal-purpose__features p { grid-column: auto; } body[data-ui-page="landing"] .public-portal-security__layout { grid-template-columns: 56px minmax(0, 1fr); } body[data-ui-page="landing"] .public-portal-security__layout > div:last-child { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); } body[data-ui-page="landing"] .public-request-intro__rail { display: none; } body[data-ui-page="landing"] .public-request-progress-mobile { display: grid; width: min(100%, 620px); gap: 14px; padding: 16px 18px; border: 1px solid var(--public-line-strong); border-radius: 16px; background: var(--public-surface); box-shadow: var(--shadow-subtle); } body[data-ui-page="landing"] .public-request-progress-mobile > div:first-child { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label meta" "title meta"; gap: 3px 10px; } body[data-ui-page="landing"] .public-request-progress-mobile small { grid-area: label; color: var(--public-accent-fg); font-size: .66rem; font-weight: var(--font-weight-bold); letter-spacing: .1em; } body[data-ui-page="landing"] .public-request-progress-mobile strong { grid-area: title; font-family: var(--font-title); font-size: 1rem; } body[data-ui-page="landing"] .public-request-progress-mobile > div:first-child > span { grid-area: meta; align-self: center; color: var(--public-subtle); font-size: .72rem; text-align: right; } body[data-ui-page="landing"] .public-request-progress-mobile__track { display: grid; grid-template-columns: 12px 1fr 12px 1fr 12px; align-items: center; gap: 7px; } body[data-ui-page="landing"] .public-request-progress-mobile__track span { width: 10px; height: 10px; border: 2px solid var(--public-line-strong); border-radius: 50%; background: var(--public-surface); } body[data-ui-page="landing"] .public-request-progress-mobile__track span.is-current { border-color: var(--public-accent); background: var(--public-accent); box-shadow: none; } body[data-ui-page="landing"] .public-request-progress-mobile__track i { height: 2px; background: var(--public-line-strong); } body[data-ui-page="landing"] :is(.public-request-section, .public-account-request-section) { padding-block: 54px; } body[data-ui-page="landing"] .public-request-shell, body[data-ui-page="landing"] .public-account-workspace { gap: 32px; } body[data-ui-page="landing"] .public-request-aside, body[data-ui-page="landing"] .public-account-context { position: static; } body[data-ui-page="landing"] .public-request-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); } body[data-ui-page="landing"] .public-request-summary { grid-row: span 2; } body[data-ui-page="landing"] .public-account-workspace .public-request-form--account { order: 1; } body[data-ui-page="landing"] .public-account-context { order: 2; grid-template-columns: minmax(0, 1fr); padding: 28px; } body[data-ui-page="landing"] .public-account-context > :where(.landing-public-eyebrow, h2, > p), body[data-ui-page="landing"] .public-account-context__stream, body[data-ui-page="landing"] .public-account-context .public-safety-note { grid-row: auto; grid-column: auto; } body[data-ui-page="landing"] .public-request-form > :is(.landing-request-feedback, .landing-form-guidance, form) { margin-inline: 30px; } body[data-ui-page="landing"] .public-final-cta__layout { grid-template-columns: minmax(0, 1fr); align-items: start; justify-content: stretch; gap: 26px; } body[data-ui-page="landing"] .landing-footer { padding-top: 0; } body[data-ui-page="landing"] :is(.landing-footer__lead, .landing-footer__grid) { display: none; } body[data-ui-page="landing"] .landing-footer-mobile { display: grid; gap: 34px; padding-block: 42px 30px; } body[data-ui-page="landing"] .landing-footer-mobile__brand, body[data-ui-page="landing"] .landing-footer-mobile__lead { display: grid; max-width: 680px; gap: 16px; } body[data-ui-page="landing"] .landing-footer-mobile__brand > p { max-width: 520px; color: var(--public-footer-muted); font-size: .86rem; line-height: 1.6; } body[data-ui-page="landing"] .landing-footer-mobile__lead { padding-block: 28px; border-block: 1px solid color-mix(in srgb, var(--public-footer-fg) 14%, transparent); } body[data-ui-page="landing"] .landing-footer-mobile__lead h2 { max-width: 620px; font-size: clamp(2.2rem, 7vw, 3.7rem); line-height: 1.02; letter-spacing: -.052em; } body[data-ui-page="landing"] .landing-footer-mobile__lead .landing-button { width: fit-content; justify-self: start; } body[data-ui-page="landing"] .landing-footer-mobile__groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--public-footer-fg) 14%, transparent); border-radius: 16px; background: color-mix(in srgb, var(--public-footer-fg) 14%, transparent); } body[data-ui-page="landing"] .landing-footer-mobile__groups details { min-width: 0; background: var(--public-footer-bg); } body[data-ui-page="landing"] .landing-footer-mobile__groups summary { display: flex; min-height: 52px; align-items: center; justify-content: space-between; gap: 16px; padding: 0 16px; cursor: pointer; font-size: .82rem; font-weight: var(--font-weight-semibold); list-style: none; } body[data-ui-page="landing"] .landing-footer-mobile__groups summary::-webkit-details-marker { display: none; } body[data-ui-page="landing"] .landing-footer-mobile__groups summary svg { width: 15px; height: 15px; color: var(--public-footer-muted); transition: transform 220ms var(--motion-ease-standard); } body[data-ui-page="landing"] .landing-footer-mobile__groups details[open] summary svg { transform: rotate(180deg); } body[data-ui-page="landing"] .landing-footer-mobile__groups :is(nav, details > div) { display: grid; gap: 12px; padding: 4px 16px 18px; } body[data-ui-page="landing"] .landing-footer-mobile__groups :is(a, span) { color: var(--public-footer-muted); font-size: .78rem; line-height: 1.45; } body[data-ui-page="landing"] .landing-footer-mobile__groups details > div a { display: flex; align-items: center; gap: 8px; } body[data-ui-page="landing"] .landing-footer-mobile__groups details > div svg { width: 16px; height: 16px; } body[data-ui-page="landing"] .landing-footer__bottom { min-height: 64px; grid-template-columns: minmax(0, 1fr) 38px; gap: 18px; } body[data-ui-page="landing"] .landing-footer__bottom nav { display: none; } body[data-ui-page="landing"] .landing-footer__top { grid-column: 2; } } @media (max-width: 820px) { body[data-ui-page="landing"] .public-section { padding-block: 62px; } body[data-ui-page="landing"] :is(.public-hero, .public-page-hero, .public-request-intro, .public-account-hero) { padding-block: 50px; } body[data-ui-page="landing"] .public-hero { padding-bottom: 0; } body[data-ui-page="landing"] .public-section-heading h2, body[data-ui-page="landing"] :is(.public-portal-showcase__copy h2, .public-documents__copy h2, .public-final-cta h2, .public-portal-access-section h2, .public-account-after h2) { font-size: clamp(2.25rem, 7.2vw, 3.45rem); } body[data-ui-page="landing"] .public-hero__signals { grid-template-columns: minmax(0, 1fr); } body[data-ui-page="landing"] .public-hero__signals li, body[data-ui-page="landing"] .public-hero__signals li + li { padding: 12px 0; border-left: 0; } body[data-ui-page="landing"] .public-hero__signals li + li { border-top: 1px solid var(--public-line); } body[data-ui-page="landing"] .public-needs__layout, body[data-ui-page="landing"] .public-method__layout, body[data-ui-page="landing"] .public-traceability__layout, body[data-ui-page="landing"] .public-principles__layout, body[data-ui-page="landing"] .public-faq__layout, body[data-ui-page="landing"] .public-symptom-matrix__layout, body[data-ui-page="landing"] .public-diagnostic-workbench__layout, body[data-ui-page="landing"] .public-portal-purpose__layout, body[data-ui-page="landing"] .public-portal-access-section__layout, body[data-ui-page="landing"] .public-account-after__layout, body[data-ui-page="landing"] .public-service-output__layout { gap: 38px; } body[data-ui-page="landing"] .public-service-explorer__tabs { grid-auto-columns: minmax(210px, 56vw); } body[data-ui-page="landing"] .public-portal-security__layout > div:last-child { grid-template-columns: minmax(0, 1fr); gap: 10px; } body[data-ui-page="landing"] .public-request-aside { grid-template-columns: minmax(0, 1fr); } body[data-ui-page="landing"] .public-request-summary { grid-row: auto; } } @media (max-width: 768px) { body[data-ui-page="landing"] .landing-brand__text small { display: none; } body[data-ui-page="landing"] .landing-mega-menu__mobile-directory { grid-template-columns: minmax(0, 1fr); } body[data-ui-page="landing"] .landing-mega-menu__mobile-directory a:nth-last-child(2) { border-bottom: 1px solid var(--public-line); } body[data-ui-page="landing"] .landing-form-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; } body[data-ui-page="landing"] .landing-field--full { grid-column: auto; } body[data-ui-page="landing"] .public-portal-layers__stage, body[data-ui-page="landing"] .public-technical-spectrum__grid { grid-auto-columns: minmax(280px, 82vw); } body[data-ui-page="landing"] .landing-footer-mobile__groups { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 620px) { body[data-ui-page="landing"] { --public-header-height: 64px; } body[data-ui-page="landing"] .landing-header__inner { min-height: var(--public-header-height); } body[data-ui-page="landing"] .landing-navigation { top: calc(var(--public-header-height) + 8px); right: max(10px, env(safe-area-inset-right)); width: calc(100vw - 20px); max-height: calc(100dvh - var(--public-header-height) - 18px); border-radius: 16px; } body[data-ui-page="landing"] .public-section { padding-block: 52px; } body[data-ui-page="landing"] :is(.public-hero, .public-page-hero, .public-request-intro, .public-account-hero) { padding-block: 42px; } body[data-ui-page="landing"] .public-page-hero--portal { background: var(--public-stage-bg); } body[data-ui-page="landing"] .public-hero { padding-bottom: 0; } body[data-ui-page="landing"] :is(.public-hero__layout, .public-page-hero__layout, .public-account-hero__layout) { gap: 32px; } body[data-ui-page="landing"] :is(.public-hero__copy h1, .public-page-hero h1, .public-request-intro h1, .public-account-hero h1) { font-size: clamp(2.35rem, 10.2vw, 3.05rem); line-height: .99; letter-spacing: -.057em; } body[data-ui-page="landing"] .public-section-heading h2, body[data-ui-page="landing"] :is(.public-portal-showcase__copy h2, .public-documents__copy h2, .public-final-cta h2, .public-portal-access-section h2, .public-account-after h2) { font-size: clamp(2.05rem, 9.2vw, 2.75rem); line-height: 1.02; letter-spacing: -.052em; } body[data-ui-page="landing"] :is(.public-hero .landing-actions, .public-page-hero .landing-actions, .public-final-cta .landing-actions) { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; } body[data-ui-page="landing"] :is(.public-hero .landing-button, .public-page-hero .landing-button, .public-final-cta .landing-button) { width: 100%; } body[data-ui-page="landing"] .public-product-bar { min-height: 58px; padding: 10px 14px; } body[data-ui-page="landing"] .public-product-bar > div { gap: 9px; } body[data-ui-page="landing"] .public-product-bar .landing-ui-status { padding-inline: 9px; font-size: .66rem; } body[data-ui-page="landing"] .public-hero-product__body { gap: 12px; padding: 14px; } body[data-ui-page="landing"] .public-equipment-context__identity { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; padding: 15px; } body[data-ui-page="landing"] .public-equipment-context__identity p { display: none; } body[data-ui-page="landing"] .public-equipment-context__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } body[data-ui-page="landing"] .public-equipment-context__facts div { min-width: 0; padding: 11px 9px; } body[data-ui-page="landing"] .public-equipment-context__facts div + div { border-top: 0; border-left: 1px solid var(--public-line); } body[data-ui-page="landing"] .public-equipment-context__facts dt, body[data-ui-page="landing"] .public-equipment-context__facts dd { overflow-wrap: anywhere; font-size: .62rem; } body[data-ui-page="landing"] .public-hero-product__stream { grid-template-columns: minmax(0, 1fr); gap: 12px; } body[data-ui-page="landing"] .public-stream-focus, body[data-ui-page="landing"] .public-mini-timeline { padding: 15px; } body[data-ui-page="landing"] .public-document-dock { display: grid; grid-auto-columns: minmax(190px, 70vw); grid-auto-flow: column; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; } body[data-ui-page="landing"] .public-document-dock > div { min-height: 58px; scroll-snap-align: start; } body[data-ui-page="landing"] .public-continuity-strip { grid-template-columns: minmax(0, 1fr); margin-top: 24px; } body[data-ui-page="landing"] .public-continuity-strip span + span { border-top: 1px solid var(--public-line); } body[data-ui-page="landing"] .public-needs__map article { grid-template-columns: minmax(0, 1fr); gap: 8px; padding-block: 21px; } body[data-ui-page="landing"] .public-needs__map em { text-align: left; } body[data-ui-page="landing"] .public-service-explorer { margin-top: 30px; border-radius: 16px; } body[data-ui-page="landing"] .public-service-explorer__tabs { grid-auto-columns: minmax(190px, 76vw); } body[data-ui-page="landing"] .public-service-explorer__stage [data-service-panel] { gap: 22px; padding: 24px 20px; } body[data-ui-page="landing"] .public-service-panel__copy h3 { font-size: clamp(1.75rem, 8.5vw, 2.35rem); } body[data-ui-page="landing"] .public-diagnostic-list { grid-template-columns: minmax(0, 1fr); } body[data-ui-page="landing"] .public-technical-context-mobile { border-radius: 16px; } body[data-ui-page="landing"] .public-technical-context-mobile__core { margin: 14px 14px 0; padding: 16px; } body[data-ui-page="landing"] .public-technical-context-mobile__dimensions { margin: 0 14px 14px; } body[data-ui-page="landing"] .public-capability-lanes article { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-block: 28px; } body[data-ui-page="landing"] .public-capability-lanes article > div { gap: 14px; } body[data-ui-page="landing"] .public-capability-lanes ul { display: grid; margin-top: 0; } body[data-ui-page="landing"] .public-method__statements article { grid-template-columns: minmax(0, 1fr); gap: 8px; } body[data-ui-page="landing"] .public-method__statements p { grid-column: auto; } body[data-ui-page="landing"] .public-portal-window > header { grid-template-columns: 1fr auto; } body[data-ui-page="landing"] .public-portal-window > header small { display: none; } body[data-ui-page="landing"] .public-portal-window__content { padding: 16px; } body[data-ui-page="landing"] .public-portal-window__equipment, body[data-ui-page="landing"] .public-portal-composition__equipment { grid-template-columns: 40px minmax(0, 1fr); } body[data-ui-page="landing"] .public-portal-window__equipment em, body[data-ui-page="landing"] .public-portal-composition__equipment em { grid-column: 2; justify-self: start; } body[data-ui-page="landing"] .public-portal-window__activity { grid-template-columns: minmax(0, 1fr); } body[data-ui-page="landing"] .public-trace-stream { padding: 18px; } body[data-ui-page="landing"] .public-document-rail-mobile article { min-width: min(82vw, 320px); min-height: 226px; padding: 20px; } body[data-ui-page="landing"] .public-document-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } body[data-ui-page="landing"] .public-document-links svg { display: none; } body[data-ui-page="landing"] .public-document-links span { text-align: center; } body[data-ui-page="landing"] .public-scenario-list article { grid-template-columns: minmax(0, 1fr) 40px; gap: 12px; } body[data-ui-page="landing"] .public-scenario-list article > :is(span, div, em) { grid-column: 1; } body[data-ui-page="landing"] .public-scenario-list article > a { grid-row: 1 / 4; grid-column: 2; } body[data-ui-page="landing"] .public-symptom-matrix__rows article { grid-template-columns: minmax(0, 1fr); padding-block: 22px; } body[data-ui-page="landing"] .public-symptom-matrix__rows article > p { grid-column: auto; } body[data-ui-page="landing"] :is(.public-technical-spectrum__grid, .public-portal-layers__stage) { grid-auto-columns: minmax(260px, 86vw); } body[data-ui-page="landing"] :is(.public-technical-spectrum__grid, .public-portal-layers__stage) article, body[data-ui-page="landing"] .public-technical-spectrum__grid article:first-child { min-height: 0; padding: 24px 20px; } body[data-ui-page="landing"] .public-methodology__deliverables ul { grid-template-columns: minmax(0, 1fr); } body[data-ui-page="landing"] .public-portal-composition { padding: 16px; } body[data-ui-page="landing"] .public-portal-composition__identity { grid-template-columns: 38px minmax(0, 1fr); } body[data-ui-page="landing"] .public-portal-composition__identity em { grid-column: 2; } body[data-ui-page="landing"] .public-portal-security__layout { grid-template-columns: minmax(0, 1fr); } body[data-ui-page="landing"] .public-portal-security__layout > div:last-child { grid-column: auto; } body[data-ui-page="landing"] .public-account-protocol li { grid-template-columns: 34px minmax(0, 1fr); } body[data-ui-page="landing"] .public-account-protocol li em { grid-column: 2; } body[data-ui-page="landing"] :is(.public-request-section, .public-account-request-section) { padding-block: 40px; } body[data-ui-page="landing"] .public-request-form { border-radius: 18px; } body[data-ui-page="landing"] .public-request-form__header { display: grid; gap: 16px; padding: 24px 20px; } body[data-ui-page="landing"] .public-request-form__header > span { justify-self: start; white-space: normal; } body[data-ui-page="landing"] .public-request-form > :is(.landing-request-feedback, .landing-form-guidance, form) { margin-inline: 20px; } body[data-ui-page="landing"] .public-request-form > :is(form, .landing-form-guidance) { margin-block: 24px; } body[data-ui-page="landing"] .landing-form { gap: 24px; } body[data-ui-page="landing"] .public-form-step { gap: 20px; padding-bottom: 24px; } body[data-ui-page="landing"] .landing-form-actions { display: grid; gap: 18px; } body[data-ui-page="landing"] .landing-form-actions .landing-button { width: 100%; } body[data-ui-page="landing"] .landing-field-meta { align-items: flex-start; flex-direction: column; } body[data-ui-page="landing"] .public-account-context { padding: 24px 20px; } body[data-ui-page="landing"] .public-final-cta { padding-block: 48px; } body[data-ui-page="landing"] .landing-footer-mobile { gap: 28px; padding-block: 34px 24px; } body[data-ui-page="landing"] .landing-footer-mobile__lead { gap: 18px; padding-block: 24px; } body[data-ui-page="landing"] .landing-footer-mobile__lead h2 { font-size: clamp(2.05rem, 9.3vw, 2.8rem); } body[data-ui-page="landing"] .landing-footer-mobile__lead .landing-button { width: 100%; } } @media (max-width: 430px) { body[data-ui-page="landing"] .public-section { padding-block: 46px; } body[data-ui-page="landing"] :is(.public-hero, .public-page-hero, .public-request-intro, .public-account-hero) { padding-block: 38px; } body[data-ui-page="landing"] .public-hero { padding-bottom: 0; } body[data-ui-page="landing"] :is(.public-hero__copy h1, .public-page-hero h1, .public-request-intro h1, .public-account-hero h1) { font-size: clamp(2.2rem, 10.3vw, 2.72rem); } body[data-ui-page="landing"] .public-product-bar > div > span:last-child small { display: none; } body[data-ui-page="landing"] .public-product-bar .landing-ui-status { max-width: 116px; } body[data-ui-page="landing"] .public-equipment-context__identity { grid-template-columns: 38px minmax(0, 1fr); } body[data-ui-page="landing"] .public-equipment-context__identity em { grid-column: 2; justify-self: start; } body[data-ui-page="landing"] .public-equipment-context__identity strong { font-size: 1.02rem; } body[data-ui-page="landing"] .public-technical-context-mobile__dimensions > span { min-height: 50px; padding: 10px; font-size: .72rem; } body[data-ui-page="landing"] .public-document-rail-mobile article { min-width: calc(100vw - 52px); } body[data-ui-page="landing"] .public-request-progress-mobile { padding: 14px 15px; } body[data-ui-page="landing"] .public-request-progress-mobile > div:first-child > span { font-size: .66rem; } body[data-ui-page="landing"] .public-form-step legend { align-items: flex-start; } body[data-ui-page="landing"] .landing-form-legal { padding: 18px; } body[data-ui-page="landing"] .landing-footer__bottom { padding-block: 18px; } } @media (max-width: 390px) { body[data-ui-page="landing"] :is(.public-hero__copy h1, .public-page-hero h1, .public-request-intro h1, .public-account-hero h1) { font-size: 2.25rem; } body[data-ui-page="landing"] :is(.public-section-heading h2, .public-portal-showcase__copy h2, .public-documents__copy h2, .public-final-cta h2, .public-portal-access-section h2, .public-account-after h2) { font-size: 2.12rem; } body[data-ui-page="landing"] .landing-navigation__primary, body[data-ui-page="landing"] .landing-navigation__actions { padding-inline: 8px; } body[data-ui-page="landing"] .public-technical-context-mobile > header, body[data-ui-page="landing"] .public-technical-context-mobile__core { padding: 14px; } body[data-ui-page="landing"] .public-document-rail-mobile article { min-width: calc(100vw - 46px); } body[data-ui-page="landing"] .landing-footer-mobile__lead h2 { font-size: 2.15rem; } } @media (max-width: 360px) { body[data-ui-page="landing"] .landing-brand__logo { width: 32px; height: 36px; flex-basis: 32px; } body[data-ui-page="landing"] .landing-brand__text strong { font-size: .9rem; } body[data-ui-page="landing"] :is(.public-hero__copy h1, .public-page-hero h1, .public-request-intro h1, .public-account-hero h1) { font-size: 2.12rem; } body[data-ui-page="landing"] .public-technical-context-mobile__dimensions > span { gap: 7px; padding-inline: 8px; font-size: .68rem; } body[data-ui-page="landing"] .public-request-progress-mobile > div:first-child { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "title" "meta"; } body[data-ui-page="landing"] .public-request-progress-mobile > div:first-child > span { text-align: left; } body[data-ui-page="landing"] .public-document-rail-mobile article { min-width: calc(100vw - 42px); } } @media (prefers-reduced-motion: reduce) { body[data-ui-page="landing"] *, body[data-ui-page="landing"] *::before, body[data-ui-page="landing"] *::after { scroll-behavior: auto; animation-duration: .01ms; animation-iteration-count: 1; transition-duration: .01ms; } } /* 5Q-RC4 · owner final de estados visuales en formularios públicos. */ body[data-ui-page="landing"] [data-public-form] .landing-field :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { color: var(--public-ink); border-color: var(--public-border-strong); background-color: var(--public-surface-raised); background-image: none; background-clip: padding-box; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--public-surface) 72%, transparent); caret-color: var(--public-ink); } body[data-ui-page="landing"] [data-public-form] .landing-field :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea)[data-has-value="true"] { border-color: var(--public-border-strong); background-color: var(--public-surface-raised); } body[data-ui-page="landing"] [data-public-form] .landing-field :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus, body[data-ui-page="landing"] [data-public-form] .landing-field :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus-visible { color: var(--public-ink); border-color: var(--public-accent-line); outline: 0; background-color: var(--public-surface-raised); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-focus) 18%, transparent); } body[data-ui-page="landing"] [data-public-form] .landing-field :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):is([aria-invalid="true"], :user-invalid) { border-color: var(--color-danger-border); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger-border) 20%, transparent); } body[data-ui-page="landing"] [data-public-form] .landing-field input:-webkit-autofill, body[data-ui-page="landing"] [data-public-form] .landing-field input:-webkit-autofill:hover, body[data-ui-page="landing"] [data-public-form] .landing-field input:-webkit-autofill:active { color: var(--public-ink); -webkit-text-fill-color: var(--public-ink); caret-color: var(--public-ink); border-color: var(--public-border-strong); background-color: var(--public-surface-raised); -webkit-box-shadow: 0 0 0 1000px var(--public-surface-raised) inset; box-shadow: 0 0 0 1000px var(--public-surface-raised) inset; transition: background-color 9999s ease-out 0s; } body[data-ui-page="landing"] [data-public-form] .landing-field input:-webkit-autofill:focus, body[data-ui-page="landing"] [data-public-form] .landing-field input:-webkit-autofill:focus-visible { color: var(--public-ink); -webkit-text-fill-color: var(--public-ink); caret-color: var(--public-ink); border-color: var(--public-accent-line); outline: 0; background-color: var(--public-surface-raised); -webkit-box-shadow: 0 0 0 1000px var(--public-surface-raised) inset, 0 0 0 3px color-mix(in srgb, var(--color-focus) 18%, transparent); box-shadow: 0 0 0 1000px var(--public-surface-raised) inset, 0 0 0 3px color-mix(in srgb, var(--color-focus) 18%, transparent); } /* El contenedor es el único owner del foco del buscador del select. */ body[data-ui-page="landing"] .ol-select-search__input, body[data-ui-page="landing"] .ol-select-search__input:focus, body[data-ui-page="landing"] .ol-select-search__input:focus-visible { border: 0; outline: 0; background: transparent; box-shadow: none; } /* Feedback semántico sin la película decorativa heredada de .alert. */ body[data-ui-page="landing"] .landing-request-feedback .alert { --public-feedback-fg: var(--color-info-fg); --public-feedback-surface: var(--color-info-surface); --public-feedback-border: var(--color-info-border); align-items: center; gap: var(--space-md); margin: 0; padding: 14px 16px; overflow: visible; color: var(--public-feedback-fg); border: 1px solid var(--public-feedback-border); border-inline-start-width: 3px; border-radius: var(--radius-elevated); background: var(--public-feedback-surface); backdrop-filter: none; box-shadow: var(--shadow-subtle); animation: public-feedback-enter var(--motion-duration-slow) var(--motion-ease-standard) both; } body[data-ui-page="landing"] .landing-request-feedback .alert::before { content: none; } body[data-ui-page="landing"] .landing-request-feedback .alert:hover { transform: none; box-shadow: var(--shadow-subtle); } body[data-ui-page="landing"] .landing-request-feedback .alert--success { --public-feedback-fg: var(--color-success-fg); --public-feedback-surface: var(--color-success-surface); --public-feedback-border: var(--color-success-border); } body[data-ui-page="landing"] .landing-request-feedback .alert--danger { --public-feedback-fg: var(--color-danger-fg); --public-feedback-surface: var(--color-danger-surface); --public-feedback-border: var(--color-danger-border); } body[data-ui-page="landing"] .landing-request-feedback .alert--warning { --public-feedback-fg: var(--color-warning-fg); --public-feedback-surface: var(--color-warning-surface); --public-feedback-border: var(--color-warning-border); } body[data-ui-page="landing"] .landing-request-feedback .alert__icon { width: 34px; height: 34px; flex: 0 0 34px; color: var(--public-feedback-fg); border: 1px solid color-mix(in srgb, var(--public-feedback-border) 78%, transparent); border-radius: var(--radius-control); background: color-mix(in srgb, var(--public-feedback-fg) 9%, transparent); } body[data-ui-page="landing"] .landing-request-feedback .alert__icon svg { width: 18px; height: 18px; } body[data-ui-page="landing"] .landing-request-feedback .alert__content { display: grid; gap: 3px; } body[data-ui-page="landing"] .landing-request-feedback .alert__title { margin: 0; color: var(--public-feedback-fg); font-family: var(--font-body); font-size: var(--font-size-md); font-weight: var(--font-weight-bold); line-height: 1.35; } body[data-ui-page="landing"] .landing-request-feedback :is(.alert__text, .alert__list) { margin: 0; color: var(--public-muted); font-size: var(--font-size-sm); line-height: 1.5; } @keyframes public-feedback-enter { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* Stepper enlazado al estado real de cada formulario guiado. */ body[data-ui-page="landing"] :is(.public-request-intro__rail, .public-account-protocol ol) > li { transition: color var(--motion-duration-standard) var(--motion-ease-standard), background var(--motion-duration-standard) var(--motion-ease-standard); } body[data-ui-page="landing"] .public-request-intro__rail > li.is-active { background: color-mix(in srgb, var(--public-accent-soft) 52%, transparent); } body[data-ui-page="landing"] .public-request-intro__rail > li.is-complete > span { color: var(--color-success-fg); } body[data-ui-page="landing"] .public-account-protocol li.is-active > span, body[data-ui-page="landing"] .public-account-protocol li.is-current > span { color: var(--color-on-emphasis); border-color: var(--public-accent); background: var(--public-line-strong); } body[data-ui-page="landing"] .public-account-protocol li.is-complete > span { color: var(--color-on-emphasis); border-color: var(--color-success-fg); background: var(--color-success-fg); } body[data-ui-page="landing"] .public-request-form > .public-request-progress-mobile--embedded { display: none; } @media (max-width: 1023px) { body[data-ui-page="landing"] .public-request-form > .public-request-progress-mobile--embedded { width: auto; margin: clamp(22px, 4vw, 34px) clamp(28px, 4vw, 46px) 0; } body[data-ui-page="landing"] .public-request-progress-mobile { gap: 12px; padding: 14px 16px; } body[data-ui-page="landing"] .public-request-progress-mobile__track { grid-template-columns: 28px minmax(24px, 1fr) 28px minmax(24px, 1fr) 28px; gap: 7px; } body[data-ui-page="landing"] .public-request-progress-mobile__track span { width: 28px; height: 28px; display: grid; place-items: center; color: var(--public-subtle); border: 1px solid var(--public-line-strong); border-radius: 50%; background: var(--public-surface-raised); font-size: .63rem; font-style: normal; font-weight: var(--font-weight-bold); line-height: 1; transition: color var(--motion-duration-standard) var(--motion-ease-standard), border-color var(--motion-duration-standard) var(--motion-ease-standard), background var(--motion-duration-standard) var(--motion-ease-standard), box-shadow var(--motion-duration-standard) var(--motion-ease-standard), transform var(--motion-duration-standard) var(--motion-ease-standard); } body[data-ui-page="landing"] .public-request-progress-mobile__track span.is-active { color: var(--color-on-emphasis); border-color: var(--public-accent); background: var(--public-accent); box-shadow: none; transform: scale(1.03); } body[data-ui-page="landing"] .public-request-progress-mobile__track span.is-complete { color: var(--color-on-emphasis); border-color: var(--public-accent); background: var(--public-accent); } body[data-ui-page="landing"] .public-request-progress-mobile__track i { height: 2px; border-radius: var(--radius-full); background: var(--public-line-strong); transform-origin: left center; transition: background var(--motion-duration-slow) var(--motion-ease-standard); } body[data-ui-page="landing"] .public-request-progress-mobile__track i.is-complete { background: var(--public-accent); } } @media (max-width: 620px) { body[data-ui-page="landing"] .public-request-form > .public-request-progress-mobile--embedded { margin-inline: 18px; } body[data-ui-page="landing"] .landing-request-feedback .alert { align-items: flex-start; padding: 13px 14px; } } @media (prefers-reduced-motion: reduce) { body[data-ui-page="landing"] .landing-request-feedback .alert, body[data-ui-page="landing"] .public-request-progress-mobile__track :is(span, i) { animation: none; transition: none; } } /* ======================================================================== LOCAL MOBILE POLISH R2 · PUBLIC LANDING Native phone composition only. No desktop/tablet drift. ======================================================================== */ @media (max-width: 620px) { /* Navigation sheet: preserve Olthany identity, reduce nested-control feel. */ body[data-ui-page="landing"] .landing-navigation { padding: 6px; border-radius: 16px; } body[data-ui-page="landing"] .landing-navigation__primary { gap: 2px; padding: 4px; } body[data-ui-page="landing"] .landing-navigation__primary > a, body[data-ui-page="landing"] .landing-nav-mega__trigger { min-height: 46px; padding-inline: 12px; border: 0; border-radius: 10px; background: transparent; box-shadow: none; } body[data-ui-page="landing"] .landing-navigation__primary > a.is-active, body[data-ui-page="landing"] .landing-nav-mega__trigger.is-active, body[data-ui-page="landing"] .landing-nav-mega__trigger[aria-expanded="true"] { color: var(--public-ink); background: color-mix(in srgb, var(--public-surface-soft) 74%, transparent); box-shadow: inset 3px 0 0 var(--public-accent); } body[data-ui-page="landing"] .landing-nav-mega__trigger > span { margin-left: auto; color: var(--public-subtle); } /* Hero principles: one composed mobile surface, not three desktop fragments. */ body[data-ui-page="landing"] .public-hero__signals { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 2px; padding: 4px 14px; overflow: hidden; border: 1px solid var(--public-line-strong); border-radius: 14px; background: color-mix(in srgb, var(--public-surface) 82%, transparent); } body[data-ui-page="landing"] .public-hero__signals li, body[data-ui-page="landing"] .public-hero__signals li + li { min-height: 70px; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 12px; padding: 13px 0; border: 0; } body[data-ui-page="landing"] .public-hero__signals li + li { border-top: 1px solid var(--public-line); } body[data-ui-page="landing"] .public-hero__signals li > span:first-child { width: 30px; height: 30px; display: grid; place-items: center; color: var(--public-accent-fg); border: 1px solid color-mix(in srgb, var(--public-accent) 22%, var(--public-line-strong)); border-radius: 10px; background: color-mix(in srgb, var(--public-surface-soft) 70%, transparent); } body[data-ui-page="landing"] .public-hero__signals svg { width: 17px; height: 17px; } body[data-ui-page="landing"] .public-hero__signals strong { font-size: .8rem; line-height: 1.35; } body[data-ui-page="landing"] .public-hero__signals small { font-size: .71rem; line-height: 1.42; } /* Current stage: the live marker belongs to the stage label, not the empty corner. */ body[data-ui-page="landing"] .public-stream-focus { padding: 16px 42px 16px 16px; } body[data-ui-page="landing"] .public-stream-focus__pulse { top: 20px; right: 18px; bottom: auto; width: 7px; height: 7px; } /* Document dock: three equal mobile segments; never an unbalanced 2 + 1 composition. */ body[data-ui-page="landing"] .public-document-dock { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: initial; grid-auto-flow: row; overflow: hidden; scroll-snap-type: none; } body[data-ui-page="landing"] .public-document-dock > div { min-width: 0; min-height: 68px; grid-template-columns: minmax(0, 1fr); align-content: center; gap: 3px; padding: 12px 8px; text-align: center; scroll-snap-align: none; } body[data-ui-page="landing"] .public-document-dock > div > span:first-child { justify-self: center; margin-bottom: 2px; } body[data-ui-page="landing"] .public-document-dock small, body[data-ui-page="landing"] .public-document-dock strong { min-width: 0; overflow-wrap: anywhere; } body[data-ui-page="landing"] .public-document-dock > div:nth-child(3) { grid-column: auto; } /* Method output: centered heading + balanced 2x2 checklist. */ body[data-ui-page="landing"] .public-methodology__deliverables { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--public-line-strong); } body[data-ui-page="landing"] .public-methodology__deliverables > span { justify-self: center; max-width: 30ch; text-align: center; font-size: .7rem; line-height: 1.5; letter-spacing: .035em; } body[data-ui-page="landing"] .public-methodology__deliverables ul { width: min(100%, 350px); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; justify-self: center; } body[data-ui-page="landing"] .public-methodology__deliverables li { position: relative; min-width: 0; padding-left: 18px; color: var(--public-muted); font-size: .74rem; line-height: 1.45; } body[data-ui-page="landing"] .public-methodology__deliverables li::before { position: absolute; top: 0; left: 0; margin: 0; } /* Portal privacy: centered focal mark/heading, explanatory copy remains readable. */ body[data-ui-page="landing"] .public-portal-security { padding-block: 48px; } body[data-ui-page="landing"] .public-portal-security__layout { grid-template-columns: minmax(0, 1fr); gap: 22px; justify-items: stretch; } body[data-ui-page="landing"] .public-portal-security__mark { width: 64px; height: 64px; justify-self: center; } body[data-ui-page="landing"] .public-portal-security__layout > div:nth-child(2) { justify-items: center; gap: 12px; text-align: center; } body[data-ui-page="landing"] .public-portal-security h2 { max-width: 17ch; margin-inline: auto; } body[data-ui-page="landing"] .public-portal-security__layout > div:last-child { width: 100%; grid-column: auto; grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 4px; border-top: 1px solid color-mix(in srgb, var(--public-stage-fg) 12%, transparent); } body[data-ui-page="landing"] .public-portal-security__layout > div:last-child p { margin: 0; padding: 13px 0; text-align: left; } body[data-ui-page="landing"] .public-portal-security__layout > div:last-child p + p { border-top: 1px solid color-mix(in srgb, var(--public-stage-fg) 9%, transparent); } } @media (max-width: 340px) { body[data-ui-page="landing"] .public-document-dock > div { padding-inline: 5px; } body[data-ui-page="landing"] .public-document-dock small { font-size: .62rem; letter-spacing: .045em; } body[data-ui-page="landing"] .public-document-dock strong { font-size: .66rem; } body[data-ui-page="landing"] .public-methodology__deliverables ul { grid-template-columns: minmax(0, 1fr); gap: 11px; } } /* ======================================================================== LOCAL MOBILE NATIVE R4 · LANDING HOME Home-only responsive convergence. Desktop/tablet >= 621px remains untouched. ======================================================================== */ @media (max-width: 620px) { /* Page rhythm: one phone-native cadence across the entire landing. */ body[data-ui-page="landing"] .landing-home .public-section { padding-block: 52px; } body[data-ui-page="landing"] .landing-home .public-section-heading, body[data-ui-page="landing"] .landing-home .public-section-heading--split, body[data-ui-page="landing"] .landing-home .public-portal-showcase__copy, body[data-ui-page="landing"] .landing-home .public-documents__copy { gap: 14px; } body[data-ui-page="landing"] .landing-home :is( .public-section-heading h2, .public-portal-showcase__copy h2, .public-documents__copy h2 ) { font-size: clamp(2rem, 9vw, 2.3rem); line-height: 1.02; letter-spacing: -.052em; } body[data-ui-page="landing"] .landing-home :is( .public-section-heading > p, .public-section-heading--split > p, .public-portal-showcase__copy > p, .public-documents__copy > p ) { font-size: .96rem; line-height: 1.62; } /* Hero: preserve the approved R3 system, but remove desktop-like dead rhythm. */ body[data-ui-page="landing"] .landing-home .public-hero { padding-top: 34px; } body[data-ui-page="landing"] .landing-home .public-hero__layout { gap: 32px; } body[data-ui-page="landing"] .landing-home .public-hero__copy { gap: 18px; } body[data-ui-page="landing"] .landing-home .public-hero__copy > p { font-size: .96rem; line-height: 1.62; } body[data-ui-page="landing"] .landing-home .public-hero .landing-actions { gap: 10px; } body[data-ui-page="landing"] .landing-home .public-hero-product__body { padding: 12px; } body[data-ui-page="landing"] .landing-home .public-stream-focus, body[data-ui-page="landing"] .landing-home .public-mini-timeline { padding: 14px; } /* The four continuity statements are a 2x2 system, never a four-row desktop fallback. */ body[data-ui-page="landing"] .landing-home .public-continuity-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 20px; padding-block: 0; border-bottom: 1px solid var(--public-line); } body[data-ui-page="landing"] .landing-home .public-continuity-strip span { min-height: 52px; display: grid; place-items: center; padding: 8px 10px; font-size: .72rem; line-height: 1.35; } body[data-ui-page="landing"] .landing-home .public-continuity-strip span + span { border-top: 0; } body[data-ui-page="landing"] .landing-home .public-continuity-strip span:nth-of-type(-n + 2) { border-bottom: 1px solid var(--public-line); } body[data-ui-page="landing"] .landing-home .public-continuity-strip span:nth-of-type(odd) { border-right: 1px solid var(--public-line); } /* Needs: compact editorial rows with a clear technical category at the edge. */ body[data-ui-page="landing"] .landing-home .public-needs__layout { gap: 30px; } body[data-ui-page="landing"] .landing-home .public-needs__map article { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 14px; padding-block: 19px; } body[data-ui-page="landing"] .landing-home .public-needs__map article > div { gap: 7px; } body[data-ui-page="landing"] .landing-home .public-needs__map h3 { font-size: 1.03rem; line-height: 1.28; } body[data-ui-page="landing"] .landing-home .public-needs__map p { font-size: .79rem; line-height: 1.5; } body[data-ui-page="landing"] .landing-home .public-needs__map em { padding-top: 22px; color: var(--public-accent-fg); font-size: .66rem; font-weight: var(--font-weight-semibold); white-space: nowrap; } /* Service explorer: mobile tab rail + one independent content surface. */ body[data-ui-page="landing"] .landing-home .public-service-explorer { margin-top: 26px; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; } body[data-ui-page="landing"] .landing-home .public-service-explorer__tabs { grid-auto-columns: minmax(132px, 42vw); gap: 4px; padding: 0 0 8px; border: 0; border-bottom: 1px solid var(--public-line-strong); background: transparent; scrollbar-width: none; } body[data-ui-page="landing"] .landing-home .public-service-explorer__tabs::-webkit-scrollbar { display: none; } body[data-ui-page="landing"] .landing-home .public-service-explorer__tabs button { min-height: 60px; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 8px; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; font-size: .76rem; line-height: 1.2; text-align: left; } body[data-ui-page="landing"] .landing-home .public-service-explorer__tabs button > span:first-child { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; background: var(--public-surface-soft); } body[data-ui-page="landing"] .landing-home .public-service-explorer__tabs button > span:first-child svg { width: 14px; height: 14px; } body[data-ui-page="landing"] .landing-home .public-service-explorer__tabs button[aria-selected="true"] { color: var(--public-ink); background: color-mix(in srgb, var(--public-surface-soft) 72%, transparent); } body[data-ui-page="landing"] .landing-home .public-service-explorer__indicator { height: 2px; border-radius: var(--radius-full); background: var(--public-accent); } body[data-ui-page="landing"] .landing-home .public-service-explorer__stage { margin-top: 12px; overflow: hidden; border: 1px solid var(--public-line-strong); border-radius: 16px; background: var(--public-surface); } body[data-ui-page="landing"] .landing-home .public-service-explorer__stage [data-service-panel] { gap: 18px; padding: 22px 18px; } body[data-ui-page="landing"] .landing-home .public-service-panel__copy h3 { font-size: clamp(1.7rem, 8vw, 2.05rem); line-height: 1.04; } body[data-ui-page="landing"] .landing-home .public-service-panel__detail { padding-top: 18px; } /* Journey: retain the timeline, tune it to phone density. */ body[data-ui-page="landing"] .landing-home .public-journey .public-section-heading { margin-bottom: 28px; } body[data-ui-page="landing"] .landing-home .public-journey-rail li { grid-template-columns: 36px minmax(0, 1fr); gap: 16px; padding-bottom: 25px; } body[data-ui-page="landing"] .landing-home .public-journey-rail li > span { width: 36px; height: 36px; font-size: .68rem; } body[data-ui-page="landing"] .landing-home .public-journey-rail li::after { left: 17px; } body[data-ui-page="landing"] .landing-home .public-journey-rail h3 { font-size: .87rem; } body[data-ui-page="landing"] .landing-home .public-journey-rail p { font-size: .76rem; line-height: 1.48; } /* Diagnostic context: one clean technical object, then editorial rows. */ body[data-ui-page="landing"] .landing-home .public-diagnostic__layout { gap: 34px; } body[data-ui-page="landing"] .landing-home .public-technical-context-mobile { overflow: hidden; border-radius: 15px; box-shadow: none; } body[data-ui-page="landing"] .landing-home .public-technical-context-mobile > header { min-height: 58px; padding: 13px 14px; } body[data-ui-page="landing"] .landing-home .public-technical-context-mobile__core { margin: 12px 12px 0; padding: 14px; border-radius: 12px; } body[data-ui-page="landing"] .landing-home .public-technical-context-mobile__dimensions { margin: 0 12px 12px; } body[data-ui-page="landing"] .landing-home .public-technical-context-mobile__dimensions > span { min-height: 46px; padding: 9px 10px; font-size: .7rem; } body[data-ui-page="landing"] .landing-home .public-diagnostic__content { gap: 26px; } body[data-ui-page="landing"] .landing-home .public-diagnostic-list article { padding-block: 17px; } /* Capabilities: preserve the editorial lanes; sharpen hierarchy and density. */ body[data-ui-page="landing"] .landing-home .public-capability-lanes { margin-top: 34px; } body[data-ui-page="landing"] .landing-home .public-capability-lanes article { position: relative; gap: 12px; padding-block: 23px; } body[data-ui-page="landing"] .landing-home .public-capability-lanes__label { color: var(--public-accent-fg); font-size: .67rem; } body[data-ui-page="landing"] .landing-home .public-capability-lanes article > div { gap: 11px; } body[data-ui-page="landing"] .landing-home .public-capability-lanes h3 { font-size: 1.28rem; line-height: 1.18; } body[data-ui-page="landing"] .landing-home .public-capability-lanes p { font-size: .82rem; line-height: 1.55; } body[data-ui-page="landing"] .landing-home .public-capability-lanes ul { gap: 8px; } body[data-ui-page="landing"] .landing-home .public-capability-lanes li { font-size: .72rem; } /* Method: three deliberate phases, not three mini-cards. */ body[data-ui-page="landing"] .landing-home .public-method__layout { gap: 30px; } body[data-ui-page="landing"] .landing-home .public-method__statements article { gap: 6px; padding-block: 19px; } body[data-ui-page="landing"] .landing-home .public-method__statements small { font-size: .67rem; } body[data-ui-page="landing"] .landing-home .public-method__statements h3 { font-size: .9rem; } body[data-ui-page="landing"] .landing-home .public-method__statements p { font-size: .78rem; line-height: 1.5; } /* Portal preview: remove desktop window chrome; keep a product-like mobile object. */ body[data-ui-page="landing"] .landing-home .public-portal-showcase__layout { gap: 34px; } body[data-ui-page="landing"] .landing-home .public-portal-showcase__copy ul { margin-top: 4px; } body[data-ui-page="landing"] .landing-home .public-portal-showcase__copy li { padding-block: 15px; } body[data-ui-page="landing"] .landing-home .public-portal-window { border-radius: 16px; box-shadow: none; } body[data-ui-page="landing"] .landing-home .public-portal-window > header { min-height: 50px; grid-template-columns: minmax(0, 1fr) auto; padding-inline: 14px; } body[data-ui-page="landing"] .landing-home .public-portal-window > header > div { display: none; } body[data-ui-page="landing"] .landing-home .public-portal-window > header small { display: block; color: var(--public-subtle); font-size: .65rem; font-weight: var(--font-weight-semibold); letter-spacing: .09em; text-transform: uppercase; } body[data-ui-page="landing"] .landing-home .public-portal-window > header em { font-size: .67rem; } body[data-ui-page="landing"] .landing-home .public-portal-window__content { padding: 14px; } body[data-ui-page="landing"] .landing-home .public-portal-window__welcome { padding-block: 2px 14px; } body[data-ui-page="landing"] .landing-home .public-portal-window__equipment { padding: 14px; } /* Traceability: editorial stream on mobile, not a card containing another timeline. */ body[data-ui-page="landing"] .landing-home .public-traceability__layout { gap: 30px; } body[data-ui-page="landing"] .landing-home .public-trace-stream { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } body[data-ui-page="landing"] .landing-home .public-trace-stream li { min-height: 0; grid-template-columns: 16px minmax(0, 1fr); grid-template-rows: auto auto; gap: 4px 14px; } body[data-ui-page="landing"] .landing-home .public-trace-stream time { grid-row: 1; grid-column: 2; padding-top: 0; font-size: .64rem; } body[data-ui-page="landing"] .landing-home .public-trace-stream li > span { grid-row: 1 / 3; grid-column: 1; margin-top: 2px; } body[data-ui-page="landing"] .landing-home .public-trace-stream li > div { grid-row: 2; grid-column: 2; gap: 4px; padding-bottom: 19px; } body[data-ui-page="landing"] .landing-home .public-trace-stream li:not(:last-child) > span::after { bottom: -35px; } body[data-ui-page="landing"] .landing-home .public-trace-stream strong { font-size: .82rem; } body[data-ui-page="landing"] .landing-home .public-trace-stream p { font-size: .72rem; line-height: 1.45; } /* Documents: keep the swipe story, make the relationship map a balanced 2x2 system. */ body[data-ui-page="landing"] .landing-home .public-documents__layout { gap: 34px; } body[data-ui-page="landing"] .landing-home .public-document-rail-mobile article { min-height: 210px; padding: 18px; border-radius: 15px; box-shadow: none; } body[data-ui-page="landing"] .landing-home .public-document-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 18px; overflow: hidden; border: 1px solid var(--public-line-strong); border-radius: 13px; background: var(--public-line); } body[data-ui-page="landing"] .landing-home .public-document-links > i, body[data-ui-page="landing"] .landing-home .public-document-links > svg { display: none; } body[data-ui-page="landing"] .landing-home .public-document-links span { min-height: 42px; display: grid; place-items: center; padding: 8px; border: 0; border-radius: 0; background: var(--public-surface); font-size: .68rem; } body[data-ui-page="landing"] .landing-home .public-documents__note { margin-top: 18px; padding-left: 14px; font-size: .84rem; line-height: 1.58; } /* Scenarios: lighter rows and a smaller directional target. */ body[data-ui-page="landing"] .landing-home .public-scenario-list { margin-top: 34px; } body[data-ui-page="landing"] .landing-home .public-scenario-list article { grid-template-columns: minmax(0, 1fr) 36px; gap: 9px 12px; padding-block: 22px; } body[data-ui-page="landing"] .landing-home .public-scenario-list h3 { font-size: 1.04rem; line-height: 1.28; } body[data-ui-page="landing"] .landing-home .public-scenario-list p { font-size: .78rem; line-height: 1.5; } body[data-ui-page="landing"] .landing-home .public-scenario-list em { font-size: .69rem; line-height: 1.4; } body[data-ui-page="landing"] .landing-home .public-scenario-list article > a { width: 36px; height: 36px; } /* Principles / FAQ: reduce dead air while preserving their approved editorial language. */ body[data-ui-page="landing"] .landing-home .public-principles__layout, body[data-ui-page="landing"] .landing-home .public-faq__layout { gap: 30px; } body[data-ui-page="landing"] .landing-home .public-principles__statements p { padding-block: 16px; font-size: .86rem; line-height: 1.55; } body[data-ui-page="landing"] .landing-home .public-faq__item h3 button { min-height: 58px; padding-block: 14px; font-size: .88rem; line-height: 1.25; } body[data-ui-page="landing"] .landing-home .public-faq__item [data-faq-answer] p { font-size: .8rem; line-height: 1.55; } /* Final CTA: match the mobile cadence instead of ending in another oversized landing block. */ body[data-ui-page="landing"] .landing-home .public-final-cta { padding-block: 44px; } body[data-ui-page="landing"] .landing-home .public-final-cta__layout { gap: 22px; } } @media (max-width: 340px) { body[data-ui-page="landing"] .landing-home .public-needs__map article { grid-template-columns: minmax(0, 1fr); } body[data-ui-page="landing"] .landing-home .public-needs__map em { padding-top: 0; } body[data-ui-page="landing"] .landing-home .public-service-explorer__tabs { grid-auto-columns: minmax(124px, 45vw); } } /* ======================================================================== LOCAL MOBILE NATIVE R5 · FULL LANDING CONVERGENCE Home-only phone architecture. Desktop/tablet >= 621px remains untouched. Builds on the approved R4 baseline without changing content or behavior. ======================================================================== */ @media (max-width: 620px) { /* Keep the reading rhythm consistent across every mobile-native chapter. */ body[data-ui-page="landing"] .landing-home .public-section-heading { min-width: 0; } body[data-ui-page="landing"] .landing-home .public-section-heading > :is(h2, p), body[data-ui-page="landing"] .landing-home :is(.public-portal-showcase__copy, .public-documents__copy) > :is(h2, p) { max-width: none; } /* ------------------------------------------------------------------ Needs · metadata becomes a phone-native header row instead of a desktop category parked at the far edge of the paragraph block. ------------------------------------------------------------------ */ body[data-ui-page="landing"] .landing-home .public-needs__map article { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto; gap: 8px 14px; padding-block: 20px; } body[data-ui-page="landing"] .landing-home .public-needs__map article > div { display: contents; } body[data-ui-page="landing"] .landing-home .public-needs__map small { grid-column: 1; grid-row: 1; align-self: center; } body[data-ui-page="landing"] .landing-home .public-needs__map em { grid-column: 2; grid-row: 1; align-self: center; justify-self: end; padding: 0; color: var(--public-accent-fg); font-size: .64rem; line-height: 1.2; letter-spacing: .055em; text-transform: uppercase; } body[data-ui-page="landing"] .landing-home .public-needs__map h3 { grid-column: 1 / -1; grid-row: 2; margin-top: 2px; } body[data-ui-page="landing"] .landing-home .public-needs__map p { grid-column: 1 / -1; grid-row: 3; max-width: 42ch; } /* ------------------------------------------------------------------ Service explorer · true horizontal tab rail + open content plane. The selected service reads like navigation, not a row of PC cards. ------------------------------------------------------------------ */ body[data-ui-page="landing"] .landing-home .public-service-explorer__tabs { grid-auto-columns: max-content; gap: 4px; padding: 0; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline proximity; border-bottom: 1px solid var(--public-line-strong); } body[data-ui-page="landing"] .landing-home .public-service-explorer__tabs button { min-width: max-content; min-height: 50px; grid-template-columns: 18px max-content; gap: 8px; padding: 10px 10px 12px; border-radius: 0; white-space: nowrap; scroll-snap-align: start; } body[data-ui-page="landing"] .landing-home .public-service-explorer__tabs button > span:first-child { width: 18px; height: 18px; border: 0; border-radius: 0; background: transparent; color: var(--public-subtle); } body[data-ui-page="landing"] .landing-home .public-service-explorer__tabs button > span:first-child svg { width: 16px; height: 16px; } body[data-ui-page="landing"] .landing-home .public-service-explorer__tabs button > svg:last-child { display: none; } body[data-ui-page="landing"] .landing-home .public-service-explorer__tabs button[aria-selected="true"] { color: var(--public-ink); background: transparent; } body[data-ui-page="landing"] .landing-home .public-service-explorer__tabs button[aria-selected="true"] > span:first-child { color: var(--public-accent-fg); } body[data-ui-page="landing"] .landing-home .public-service-explorer__stage { margin-top: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; } body[data-ui-page="landing"] .landing-home .public-service-explorer__stage [data-service-panel] { gap: 22px; padding: 26px 0 0; } body[data-ui-page="landing"] .landing-home .public-service-panel__copy { gap: 12px; } body[data-ui-page="landing"] .landing-home .public-service-panel__copy h3 { max-width: 13ch; font-size: clamp(1.85rem, 8.2vw, 2.2rem); } body[data-ui-page="landing"] .landing-home .public-service-panel__detail { padding-top: 20px; } body[data-ui-page="landing"] .landing-home .public-service-panel__detail ul { gap: 10px; } body[data-ui-page="landing"] .landing-home .public-service-panel__result { grid-template-columns: 28px minmax(0, 1fr); gap: 10px 12px; padding: 18px 0 0; border-top: 1px solid var(--public-line); background: transparent; } body[data-ui-page="landing"] .landing-home .public-service-panel__result > span:first-child { width: 28px; height: 28px; border: 0; border-radius: 0; background: transparent; color: var(--public-accent-fg); } body[data-ui-page="landing"] .landing-home .public-service-panel__result .landing-text-link { grid-column: 2; justify-self: start; min-height: 44px; align-items: center; } /* ------------------------------------------------------------------ Journey · native compact timeline with a wider reading column. ------------------------------------------------------------------ */ body[data-ui-page="landing"] .landing-home .public-journey-rail { padding-left: 0; } body[data-ui-page="landing"] .landing-home .public-journey-rail li { grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding-bottom: 23px; } body[data-ui-page="landing"] .landing-home .public-journey-rail li > span { width: 34px; height: 34px; } body[data-ui-page="landing"] .landing-home .public-journey-rail li::after { left: 16px; } body[data-ui-page="landing"] .landing-home .public-journey-rail p { max-width: 38ch; } /* ------------------------------------------------------------------ Diagnostic · one technical snapshot, not a card inside another card. ------------------------------------------------------------------ */ body[data-ui-page="landing"] .landing-home .public-technical-context-mobile { overflow: visible; border: 0; border-radius: 0; background: transparent; } body[data-ui-page="landing"] .landing-home .public-technical-context-mobile > header { min-height: 0; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 0 0 14px; border-bottom: 1px solid var(--public-line-strong); } body[data-ui-page="landing"] .landing-home .public-technical-context-mobile > header > span { width: 28px; height: 28px; border: 0; border-radius: 0; background: transparent; color: var(--public-accent-fg); } body[data-ui-page="landing"] .landing-home .public-technical-context-mobile__core { margin: 0; padding: 18px 0 16px; border: 0; border-radius: 0; background: transparent; } body[data-ui-page="landing"] .landing-home .public-technical-context-mobile__core strong { font-size: 1.16rem; } body[data-ui-page="landing"] .landing-home .public-technical-context-mobile__connectors { display: none; } body[data-ui-page="landing"] .landing-home .public-technical-context-mobile__dimensions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; overflow: hidden; border-block: 1px solid var(--public-line-strong); border-radius: 0; background: transparent; } body[data-ui-page="landing"] .landing-home .public-technical-context-mobile__dimensions > span { min-height: 48px; justify-content: flex-start; gap: 8px; padding: 10px 8px; border: 0; border-radius: 0; background: transparent; } body[data-ui-page="landing"] .landing-home .public-technical-context-mobile__dimensions > span:nth-child(odd) { border-right: 1px solid var(--public-line); } body[data-ui-page="landing"] .landing-home .public-technical-context-mobile__dimensions > span:nth-child(-n + 2) { border-bottom: 1px solid var(--public-line); } body[data-ui-page="landing"] .landing-home .public-diagnostic__content { gap: 22px; } body[data-ui-page="landing"] .landing-home .public-diagnostic-list article { display: grid; gap: 7px; padding-block: 16px; } body[data-ui-page="landing"] .landing-home .public-diagnostic-list p { max-width: 42ch; } /* ------------------------------------------------------------------ Capabilities · each layer gets a mobile chapter header. The three equivalent items remain a vertical editorial sequence, never 2 + 1. ------------------------------------------------------------------ */ body[data-ui-page="landing"] .landing-home .public-capability-lanes article { grid-template-columns: minmax(0, 1fr) 30px; grid-template-rows: auto auto; gap: 10px 12px; padding-block: 22px; } body[data-ui-page="landing"] .landing-home .public-capability-lanes__label { grid-column: 1; grid-row: 1; align-self: center; } body[data-ui-page="landing"] .landing-home .public-capability-lanes article > span[aria-hidden="true"] { display: grid; grid-column: 2; grid-row: 1; width: 30px; height: 30px; place-items: center; justify-self: end; color: var(--public-accent-fg); border: 1px solid var(--public-line); border-radius: 9px; background: var(--public-surface-soft); } body[data-ui-page="landing"] .landing-home .public-capability-lanes article > span[aria-hidden="true"] svg { width: 15px; height: 15px; } body[data-ui-page="landing"] .landing-home .public-capability-lanes article > div { grid-column: 1 / -1; grid-row: 2; } /* ------------------------------------------------------------------ Method · explicit phone flow instead of desktop columns collapsed. ------------------------------------------------------------------ */ body[data-ui-page="landing"] .landing-home .public-method__statements { position: relative; display: grid; gap: 0; padding-left: 42px; counter-reset: mobile-method; } body[data-ui-page="landing"] .landing-home .public-method__statements::before { position: absolute; top: 16px; bottom: 22px; left: 14px; width: 1px; content: ""; background: var(--public-line-strong); } body[data-ui-page="landing"] .landing-home .public-method__statements article { position: relative; gap: 6px; padding: 14px 0 20px; border-bottom: 1px solid var(--public-line); counter-increment: mobile-method; } body[data-ui-page="landing"] .landing-home .public-method__statements article::before { position: absolute; top: 13px; left: -42px; z-index: 1; display: grid; box-sizing: border-box; width: 29px; height: 29px; place-items: center; content: "0" counter(mobile-method); color: var(--public-accent-fg); border: 1px solid var(--public-line-strong); border-radius: 50%; background: var(--public-canvas); font-size: .58rem; font-weight: var(--font-weight-semibold); letter-spacing: .03em; } body[data-ui-page="landing"] .landing-home .public-method__statements article:last-child { padding-bottom: 14px; border-bottom: 0; } body[data-ui-page="landing"] .landing-home .public-method__statements small { color: var(--public-accent-fg); } body[data-ui-page="landing"] .landing-home .public-method__statements p { max-width: 40ch; } /* ------------------------------------------------------------------ Portal · product summary behaves like a mobile workspace, not a shrunk desktop window. ------------------------------------------------------------------ */ body[data-ui-page="landing"] .landing-home .public-portal-showcase__copy ul { display: grid; gap: 0; border-block: 1px solid var(--public-line); } body[data-ui-page="landing"] .landing-home .public-portal-showcase__copy li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding-block: 15px; border: 0; } body[data-ui-page="landing"] .landing-home .public-portal-showcase__copy li + li { border-top: 1px solid var(--public-line); } body[data-ui-page="landing"] .landing-home .public-portal-showcase__copy li > svg { display: block; width: 18px; height: 18px; margin-top: 2px; color: var(--public-accent-fg); } body[data-ui-page="landing"] .landing-home .public-portal-window { overflow: hidden; border-radius: 16px; } body[data-ui-page="landing"] .landing-home .public-portal-window > header { min-height: 48px; padding-inline: 14px; border-bottom: 1px solid var(--public-line); } body[data-ui-page="landing"] .landing-home .public-portal-window__shell { display: block; } body[data-ui-page="landing"] .landing-home .public-portal-window__shell > aside { display: none; } body[data-ui-page="landing"] .landing-home .public-portal-window__content { display: grid; gap: 0; padding: 0 14px 14px; } body[data-ui-page="landing"] .landing-home .public-portal-window__welcome { padding: 18px 0; border-bottom: 1px solid var(--public-line); } body[data-ui-page="landing"] .landing-home .public-portal-window__equipment { margin: 0; padding: 16px 0; border: 0; border-bottom: 1px solid var(--public-line); border-radius: 0; background: transparent; } body[data-ui-page="landing"] .landing-home .public-portal-window__activity { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 0; } body[data-ui-page="landing"] .landing-home .public-portal-window__activity > div { min-height: 92px; align-content: start; gap: 8px; padding: 14px 10px 4px; border: 0; background: transparent; } body[data-ui-page="landing"] .landing-home .public-portal-window__activity > div + div { border-left: 1px solid var(--public-line); } /* ------------------------------------------------------------------ Traceability · reserve width for reading, not for desktop columns. ------------------------------------------------------------------ */ body[data-ui-page="landing"] .landing-home .public-trace-stream { width: 100%; gap: 0; } body[data-ui-page="landing"] .landing-home .public-trace-stream li { width: 100%; grid-template-columns: 18px minmax(0, 1fr); gap: 3px 14px; padding-bottom: 18px; } body[data-ui-page="landing"] .landing-home .public-trace-stream time { min-width: 0; padding: 0; font-size: .62rem; } body[data-ui-page="landing"] .landing-home .public-trace-stream li > div { min-width: 0; width: 100%; gap: 4px; padding-bottom: 16px; } body[data-ui-page="landing"] .landing-home .public-trace-stream strong, body[data-ui-page="landing"] .landing-home .public-trace-stream p { max-width: none; } body[data-ui-page="landing"] .landing-home .public-trace-stream strong { font-size: .86rem; } body[data-ui-page="landing"] .landing-home .public-trace-stream p { font-size: .75rem; line-height: 1.48; } body[data-ui-page="landing"] .landing-home .public-trace-stream li:not(:last-child) > span::after { bottom: -31px; } /* ------------------------------------------------------------------ Documents · swipe object + truly balanced 2x2 relationship map. ------------------------------------------------------------------ */ body[data-ui-page="landing"] .landing-home .public-document-rail-mobile { gap: 12px; } body[data-ui-page="landing"] .landing-home .public-document-rail-mobile__track { scroll-padding-inline: 2px; } body[data-ui-page="landing"] .landing-home .public-document-rail-mobile article { min-width: min(86vw, 330px); min-height: 198px; padding: 18px; } body[data-ui-page="landing"] .landing-home .public-document-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border-radius: 12px; } body[data-ui-page="landing"] .landing-home .public-document-links span { grid-column: auto !important; grid-row: auto !important; justify-self: stretch !important; width: auto; min-height: 46px; place-items: center; border: 0; border-radius: 0; background: var(--public-surface); text-align: center; } body[data-ui-page="landing"] .landing-home .public-document-links span:nth-of-type(1), body[data-ui-page="landing"] .landing-home .public-document-links span:nth-of-type(2) { border-bottom: 1px solid var(--public-line); } body[data-ui-page="landing"] .landing-home .public-document-links span:nth-of-type(odd) { border-right: 1px solid var(--public-line); } /* ------------------------------------------------------------------ Scenarios · mobile article hierarchy: label + title/body + action. ------------------------------------------------------------------ */ body[data-ui-page="landing"] .landing-home .public-scenario-list article { grid-template-columns: minmax(0, 1fr) 44px; gap: 8px 12px; padding-block: 21px; } body[data-ui-page="landing"] .landing-home .public-scenario-list article > span { align-self: center; } body[data-ui-page="landing"] .landing-home .public-scenario-list article > div, body[data-ui-page="landing"] .landing-home .public-scenario-list em { grid-column: 1; } body[data-ui-page="landing"] .landing-home .public-scenario-list article > a { grid-column: 2; grid-row: 2; align-self: center; width: 44px; height: 44px; } body[data-ui-page="landing"] .landing-home .public-scenario-list em { margin-top: 2px; } /* ------------------------------------------------------------------ Principles + FAQ · compact reading surfaces without desktop carding. ------------------------------------------------------------------ */ body[data-ui-page="landing"] .landing-home .public-principles__statements { counter-reset: public-principle; } body[data-ui-page="landing"] .landing-home .public-principles__statements p { position: relative; padding: 17px 0 17px 34px; counter-increment: public-principle; } body[data-ui-page="landing"] .landing-home .public-principles__statements p::before { position: absolute; top: 18px; left: 0; content: "0" counter(public-principle); color: var(--public-accent-fg); font-size: .62rem; font-weight: var(--font-weight-semibold); letter-spacing: .05em; } body[data-ui-page="landing"] .landing-home .public-faq__item h3 button { gap: 14px; min-height: 60px; padding: 15px 0; } body[data-ui-page="landing"] .landing-home .public-faq__item h3 button > svg { flex: 0 0 auto; } } @media (max-width: 360px) { body[data-ui-page="landing"] .landing-home .public-service-explorer__tabs button { min-height: 48px; padding-inline: 8px; font-size: .72rem; } body[data-ui-page="landing"] .landing-home .public-needs__map em { font-size: .6rem; } body[data-ui-page="landing"] .landing-home .public-portal-window__activity > div { padding-inline: 8px; } body[data-ui-page="landing"] .landing-home .public-document-links span { font-size: .64rem; } } /* ======================================================================== LOCAL MOBILE NATIVE R6 · FINAL LANDING CONVERGENCE Final phone-first pass for the public Manager landing. Scope: navigation <=1023px; landing architecture <=620px only. Desktop/tablet >=621px landing composition remains untouched. ======================================================================== */ /* Split mobile Services navigation into a true destination + disclosure. */ .landing-nav-mega__mobile-row { display: none; } @media (max-width: 1023px) { body[data-ui-page="landing"] .landing-nav-mega__trigger { display: none; } body[data-ui-page="landing"] .landing-nav-mega__mobile-row { display: grid; grid-template-columns: minmax(0, 1fr) 46px; gap: 2px; align-items: stretch; } body[data-ui-page="landing"] .landing-nav-mega__mobile-link, body[data-ui-page="landing"] .landing-nav-mega__mobile-toggle { min-height: 46px; color: var(--public-muted); border: 0; border-radius: 10px; background: transparent; font: inherit; } body[data-ui-page="landing"] .landing-nav-mega__mobile-link { display: flex; align-items: center; padding-inline: 12px; font-size: .88rem; font-weight: var(--font-weight-medium); text-decoration: none; } body[data-ui-page="landing"] .landing-nav-mega__mobile-link:is(:hover, :focus-visible), body[data-ui-page="landing"] .landing-nav-mega__mobile-link.is-active { color: var(--public-ink); background: color-mix(in srgb, var(--public-surface-soft) 74%, transparent); } body[data-ui-page="landing"] .landing-nav-mega__mobile-link.is-active { box-shadow: inset 3px 0 0 var(--public-accent); } body[data-ui-page="landing"] .landing-nav-mega__mobile-toggle { display: grid; place-items: center; cursor: pointer; } body[data-ui-page="landing"] .landing-nav-mega__mobile-toggle:is(:hover, :focus-visible), body[data-ui-page="landing"] .landing-nav-mega__mobile-toggle[aria-expanded="true"] { color: var(--public-ink); background: color-mix(in srgb, var(--public-surface-soft) 74%, transparent); } body[data-ui-page="landing"] .landing-nav-mega__mobile-toggle svg { width: 17px; height: 17px; transition: transform 180ms cubic-bezier(.2,.8,.2,1); } body[data-ui-page="landing"] .landing-nav-mega__mobile-toggle[aria-expanded="true"] svg { transform: rotate(180deg); } body[data-ui-page="landing"] .landing-nav-mega .landing-mega-menu { grid-column: 1 / -1; } } @media (max-width: 620px) { /* Navigation: one-dimensional phone directory instead of a compressed 2-column menu. */ body[data-ui-page="landing"] .landing-mega-menu { margin: 3px 0 7px; border-radius: 11px; } body[data-ui-page="landing"] .landing-mega-menu__mobile-directory { grid-template-columns: minmax(0, 1fr); } body[data-ui-page="landing"] .landing-mega-menu__mobile-directory a, body[data-ui-page="landing"] .landing-mega-menu__mobile-directory a:nth-last-child(-n + 2) { min-height: 48px; padding: 11px 12px; border-bottom: 1px solid var(--public-line); } body[data-ui-page="landing"] .landing-mega-menu__mobile-directory a:last-child { border-bottom: 0; } body[data-ui-page="landing"] .landing-mega-menu__mobile-directory strong { font-size: .78rem; line-height: 1.35; } /* Global mobile reading rhythm: deliberate chapters, no desktop leftover gaps. */ body[data-ui-page="landing"] .landing-home .public-section { padding-block: 54px; } body[data-ui-page="landing"] .landing-home .public-section-heading, body[data-ui-page="landing"] .landing-home .public-section-heading--split { grid-template-columns: minmax(0, 1fr); gap: 12px; } body[data-ui-page="landing"] .landing-home .public-section-heading--split > p { max-width: 42ch; margin: 0; } /* Hero principles: editorial service signals, not a desktop card compressed to one column. */ body[data-ui-page="landing"] .landing-home .public-hero__signals { gap: 0; padding: 0; overflow: visible; border: 0; border-block: 1px solid var(--public-line-strong); border-radius: 0; background: transparent; } body[data-ui-page="landing"] .landing-home .public-hero__signals li, body[data-ui-page="landing"] .landing-home .public-hero__signals li + li { min-height: 66px; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 13px 0; } body[data-ui-page="landing"] .landing-home .public-hero__signals li + li { border-top: 1px solid var(--public-line); } body[data-ui-page="landing"] .landing-home .public-hero__signals li > span:first-child { width: 30px; height: 30px; border: 0; border-radius: 0; background: transparent; color: var(--public-accent-fg); } /* Continuity becomes a relationship list instead of a tiny desktop table. */ body[data-ui-page="landing"] .landing-home .public-continuity-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; margin-top: 18px; padding-block: 14px; border-block: 1px solid var(--public-line); border-bottom-color: var(--public-line); } body[data-ui-page="landing"] .landing-home .public-continuity-strip span { position: relative; min-height: 42px; place-items: center start; padding: 8px 0 8px 14px; text-align: left; } body[data-ui-page="landing"] .landing-home .public-continuity-strip span::before { position: absolute; top: 50%; left: 0; width: 5px; height: 5px; content: ""; border-radius: 50%; background: var(--public-accent); transform: translateY(-50%); } body[data-ui-page="landing"] .landing-home .public-continuity-strip span:nth-of-type(n) { border: 0; } body[data-ui-page="landing"] .landing-home .public-continuity-strip i { display: none; } /* Needs: keep metadata and content on one clean reading axis. */ body[data-ui-page="landing"] .landing-home .public-needs__map article { gap: 7px 12px; padding-block: 20px; } body[data-ui-page="landing"] .landing-home .public-needs__map h3 { max-width: 28ch; } /* Service explorer: strong mobile rail, then one open reading plane. */ body[data-ui-page="landing"] .landing-home .public-service-explorer__tabs { scrollbar-width: none; -webkit-overflow-scrolling: touch; } body[data-ui-page="landing"] .landing-home .public-service-explorer__tabs::-webkit-scrollbar { display: none; } body[data-ui-page="landing"] .landing-home .public-service-panel__copy h3 { max-width: 17ch; font-size: clamp(1.8rem, 8vw, 2.1rem); line-height: 1.03; } body[data-ui-page="landing"] .landing-home .public-service-panel__result { padding-bottom: 2px; } body[data-ui-page="landing"] .landing-home .public-service-panel__result .landing-text-link { min-height: 46px; } /* Cycle of attention: one stable vertical axis. The previous per-item connector caused visible drift between number, title and copy. */ body[data-ui-page="landing"] .landing-home .public-journey .public-section-heading { margin-bottom: 30px; } body[data-ui-page="landing"] .landing-home .public-journey-rail { position: relative; display: grid; gap: 0; padding: 0; } body[data-ui-page="landing"] .landing-home .public-journey-rail::before { position: absolute; z-index: 0; top: 15px; bottom: 17px; left: 15px; width: 1px; height: auto; content: ""; background: var(--public-line-strong); transform: none; opacity: 1; } body[data-ui-page="landing"] .landing-home .public-journey-rail li { position: relative; display: grid; grid-template-columns: 31px minmax(0, 1fr); gap: 14px; align-items: start; padding: 0; } body[data-ui-page="landing"] .landing-home .public-journey-rail li:not(:last-child) { padding-bottom: 4px; } body[data-ui-page="landing"] .landing-home .public-journey-rail li > span { position: relative; z-index: 1; width: 31px; height: 31px; margin: 0; place-self: start center; color: var(--public-muted); border: 1px solid var(--public-line-strong); background: var(--public-canvas); font-size: .64rem; } body[data-ui-page="landing"] .landing-home .public-journey-rail li::after { display: none; } body[data-ui-page="landing"] .landing-home .public-journey-rail li > div { min-width: 0; padding: 2px 0 21px; border-bottom: 1px solid var(--public-line); } body[data-ui-page="landing"] .landing-home .public-journey-rail li:last-child > div { padding-bottom: 0; border-bottom: 0; } body[data-ui-page="landing"] .landing-home .public-journey-rail h3 { margin: 0; font-size: .9rem; line-height: 1.28; } body[data-ui-page="landing"] .landing-home .public-journey-rail p { max-width: 39ch; margin-top: 6px; font-size: .77rem; line-height: 1.5; } /* Diagnostic snapshot: balanced native tiles without an outer desktop grid. */ body[data-ui-page="landing"] .landing-home .public-technical-context-mobile__dimensions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding-top: 16px; border: 0; background: transparent; } body[data-ui-page="landing"] .landing-home .public-technical-context-mobile__dimensions > span, body[data-ui-page="landing"] .landing-home .public-technical-context-mobile__dimensions > span:nth-child(n) { min-height: 44px; padding: 10px 11px; border: 1px solid var(--public-line); border-radius: 10px; background: color-mix(in srgb, var(--public-surface-soft) 62%, transparent); } body[data-ui-page="landing"] .landing-home .public-diagnostic-list article { padding-block: 18px; } /* Capabilities: explicit section labels + content; no ghost desktop column. */ body[data-ui-page="landing"] .landing-home .public-capability-lanes article { grid-template-columns: minmax(0, 1fr) 30px; gap: 8px 12px; align-items: start; padding-block: 22px; } body[data-ui-page="landing"] .landing-home .public-capability-lanes__label { grid-column: 1; grid-row: 1; align-self: center; } body[data-ui-page="landing"] .landing-home .public-capability-lanes article > span[aria-hidden="true"] { grid-column: 2; grid-row: 1; align-self: center; justify-self: end; width: 28px; height: 28px; color: var(--public-accent-fg); } body[data-ui-page="landing"] .landing-home .public-capability-lanes article > div { grid-column: 1 / -1; grid-row: 2; min-width: 0; } /* Method already behaves as a native sequence; tighten the final connector. */ body[data-ui-page="landing"] .landing-home .public-method__statements::before { bottom: 30px; } body[data-ui-page="landing"] .landing-home .public-method__statements article:last-child::before { background: var(--public-canvas); } /* Portal: treat actions and state summaries as touch-first content. */ body[data-ui-page="landing"] .landing-home .public-portal-showcase .landing-actions { gap: 10px; } body[data-ui-page="landing"] .landing-home .public-portal-window__activity > div { min-width: 0; padding-inline: 10px; } body[data-ui-page="landing"] .landing-home .public-portal-window__activity strong, body[data-ui-page="landing"] .landing-home .public-portal-window__activity small { overflow-wrap: anywhere; } /* Traceability: align state label, marker and content on the same rhythm. */ body[data-ui-page="landing"] .landing-home .public-trace-stream li { grid-template-columns: 16px minmax(0, 1fr); gap: 5px 14px; padding-bottom: 0; } body[data-ui-page="landing"] .landing-home .public-trace-stream li > div { padding-bottom: 18px; } body[data-ui-page="landing"] .landing-home .public-trace-stream li:not(:last-child) > div { border-bottom: 1px solid var(--public-line); } /* Documents: retain the approved swipe story and the balanced 2x2 map. */ body[data-ui-page="landing"] .landing-home .public-document-rail-mobile article { min-width: min(84vw, 326px); } body[data-ui-page="landing"] .landing-home .public-document-links span { min-height: 46px; } /* Scenarios / principles / FAQ: one reading axis and reliable tap targets. */ body[data-ui-page="landing"] .landing-home .public-scenario-list article { grid-template-columns: minmax(0, 1fr) 44px; gap: 8px 12px; } body[data-ui-page="landing"] .landing-home .public-scenario-list article > a { width: 44px; height: 44px; } body[data-ui-page="landing"] .landing-home .public-principles__statements p { padding-block: 18px; } body[data-ui-page="landing"] .landing-home .public-faq__item h3 button { min-height: 60px; } body[data-ui-page="landing"] .landing-home .public-final-cta { padding-block: 48px; } } @media (max-width: 340px) { body[data-ui-page="landing"] .landing-home .public-continuity-strip span { min-height: 38px; font-size: .68rem; } body[data-ui-page="landing"] .landing-home .public-journey-rail { --journey-copy-size: .74rem; } body[data-ui-page="landing"] .landing-home .public-journey-rail p { font-size: var(--journey-copy-size); } } /* ======================================================================== LOCAL MOBILE NATIVE R7 · CENTERED HIERARCHY POLISH Final phone-only alignment pass. Center chapter-level hierarchy and summary identities while preserving left-aligned functional content. Scope: landing <=620px only. Desktop/tablet >=621px unchanged. ======================================================================== */ @media (max-width: 620px) { body[data-ui-page="landing"] .landing-home .public-section-heading, body[data-ui-page="landing"] .landing-home .public-section-heading--split, body[data-ui-page="landing"] .landing-home .public-section-heading--sticky { justify-items: center; text-align: center; } body[data-ui-page="landing"] .landing-home .public-section-heading > div, body[data-ui-page="landing"] .landing-home .public-section-heading--split > div, body[data-ui-page="landing"] .landing-home .public-section-heading--sticky > div { display: grid; width: 100%; justify-items: center; } body[data-ui-page="landing"] .landing-home .public-section-heading .landing-public-eyebrow, body[data-ui-page="landing"] .landing-home .public-section-heading--split .landing-public-eyebrow, body[data-ui-page="landing"] .landing-home .public-section-heading--sticky .landing-public-eyebrow { width: fit-content; justify-content: center; margin-inline: auto; } body[data-ui-page="landing"] .landing-home .public-section-heading h2, body[data-ui-page="landing"] .landing-home .public-section-heading--split h2, body[data-ui-page="landing"] .landing-home .public-section-heading--sticky h2 { max-width: 18ch; margin-inline: auto; text-align: center; text-wrap: balance; } body[data-ui-page="landing"] .landing-home .public-section-heading > p, body[data-ui-page="landing"] .landing-home .public-section-heading--split > p, body[data-ui-page="landing"] .landing-home .public-section-heading--sticky > p { max-width: 38ch; margin-inline: auto; text-align: center; } body[data-ui-page="landing"] .landing-home .public-section-heading--sticky .landing-text-link { justify-self: center; margin-inline: auto; } body[data-ui-page="landing"] .landing-home .public-hero__copy { text-align: center; } body[data-ui-page="landing"] .landing-home .public-hero__copy > .landing-public-eyebrow { width: fit-content; justify-content: center; margin-inline: auto; } body[data-ui-page="landing"] .landing-home .public-hero__copy > h1 { max-width: 12.5ch; margin-inline: auto; text-align: center; text-wrap: balance; } body[data-ui-page="landing"] .landing-home .public-hero__copy > p { max-width: 34ch; margin-inline: auto; text-align: center; } body[data-ui-page="landing"] .landing-home .public-hero__signals { text-align: left; } body[data-ui-page="landing"] .landing-home .public-continuity-strip span { min-height: 50px; place-items: center; padding: 20px 4px 8px; text-align: center; } body[data-ui-page="landing"] .landing-home .public-continuity-strip span::before { top: 9px; left: 50%; transform: translateX(-50%); } body[data-ui-page="landing"] .landing-home .public-service-panel__copy { justify-items: stretch; text-align: left; } body[data-ui-page="landing"] .landing-home .public-service-panel__copy .landing-public-eyebrow { width: fit-content; justify-self: center; justify-content: center; margin-inline: auto; } body[data-ui-page="landing"] .landing-home .public-service-panel__copy h3 { margin-inline: auto; text-align: center; } body[data-ui-page="landing"] .landing-home .public-service-panel__copy p { width: 100%; max-width: 40ch; margin: 0; text-align: left; } body[data-ui-page="landing"] .landing-home .public-technical-context-mobile > header { width: fit-content; max-width: 100%; margin-inline: auto; } body[data-ui-page="landing"] .landing-home .public-technical-context-mobile__core { text-align: center; } body[data-ui-page="landing"] .landing-home .public-technical-context-mobile__dimensions > span, body[data-ui-page="landing"] .landing-home .public-technical-context-mobile__dimensions > span:nth-child(n) { justify-content: center; text-align: center; } body[data-ui-page="landing"] .landing-home .public-capability-lanes article { grid-template-columns: minmax(0, 1fr) max-content max-content minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; justify-content: stretch; } body[data-ui-page="landing"] .landing-home .public-capability-lanes__label { grid-column: 2; grid-row: 1; justify-self: end; text-align: center; } body[data-ui-page="landing"] .landing-home .public-capability-lanes article > span[aria-hidden="true"] { grid-column: 3; grid-row: 1; justify-self: start; } body[data-ui-page="landing"] .landing-home .public-capability-lanes article > div { grid-column: 1 / -1; grid-row: 2; width: 100%; min-width: 0; max-width: 100%; text-align: left; overflow-wrap: anywhere; } body[data-ui-page="landing"] .landing-home .public-portal-showcase__copy > .landing-public-eyebrow { display: flex; width: fit-content; justify-content: center; margin-inline: auto; } body[data-ui-page="landing"] .landing-home .public-portal-showcase__copy > h2, body[data-ui-page="landing"] .landing-home .public-portal-showcase__copy > p { max-width: 36ch; margin-inline: auto; text-align: center; text-wrap: balance; } body[data-ui-page="landing"] .landing-home .public-portal-showcase__copy > ul { text-align: left; } body[data-ui-page="landing"] .landing-home .public-portal-window__welcome { text-align: center; } body[data-ui-page="landing"] .landing-home .public-documents__copy > .landing-public-eyebrow { display: flex; width: fit-content; justify-content: center; margin-inline: auto; } body[data-ui-page="landing"] .landing-home .public-documents__copy > h2, body[data-ui-page="landing"] .landing-home .public-documents__copy > p:not(.public-documents__note) { max-width: 36ch; margin-inline: auto; text-align: center; text-wrap: balance; } body[data-ui-page="landing"] .landing-home .public-principles__layout > div:first-child { display: grid; justify-items: center; text-align: center; } body[data-ui-page="landing"] .landing-home .public-principles__layout > div:first-child .landing-public-eyebrow { width: fit-content; justify-content: center; margin-inline: auto; } body[data-ui-page="landing"] .landing-home .public-principles__layout > div:first-child h2 { max-width: 18ch; margin-inline: auto; text-align: center; text-wrap: balance; } body[data-ui-page="landing"] .landing-home .public-final-cta__layout > div:first-child, body[data-ui-page="landing"] .landing-footer__lead { text-align: center; } body[data-ui-page="landing"] .landing-home .public-final-cta__layout > div:first-child .landing-public-eyebrow, body[data-ui-page="landing"] .landing-footer__lead .landing-public-eyebrow { width: fit-content; justify-content: center; margin-inline: auto; } body[data-ui-page="landing"] .landing-home .public-final-cta__layout > div:first-child :is(h2, p), body[data-ui-page="landing"] .landing-footer__lead :is(h2, p) { margin-inline: auto; text-align: center; } } /* source-sync microfix: assets/css/olthany-public-experience.css · R9 */ @media (max-width: 620px) { body[data-ui-page="landing"] .landing-home .public-capability-lanes article > span[aria-hidden="true"] { display: grid; place-items: center; line-height: 0; } body[data-ui-page="landing"] .landing-home .public-capability-lanes article > span[aria-hidden="true"] :is(svg, .icon) { display: block; margin: auto; align-self: center; justify-self: center; vertical-align: middle; } body[data-ui-page="landing"] .public-service-output__flow { align-items: center; } body[data-ui-page="landing"] .public-service-output__flow span { width: max-content; max-width: 100%; min-width: 0; grid-template-columns: 24px max-content; align-items: center; justify-content: center; justify-items: start; text-align: center; } body[data-ui-page="landing"] .public-service-output__flow span :is(svg, .icon) { display: block; margin: auto; align-self: center; justify-self: center; vertical-align: middle; } body[data-ui-page="landing"] .public-service-output__flow i { margin-left: 0; align-self: center; } body[data-ui-page="landing"] .public-request-form--account .landing-form-actions--workflow { width: 100%; grid-template-columns: minmax(0, 1fr); justify-content: stretch; justify-items: stretch; } body[data-ui-page="landing"] .public-request-form--account .landing-form-actions--workflow .landing-button[data-public-submit] { width: 100%; max-width: none; justify-self: stretch; margin-inline: 0; } } /* ======================================================================== LOCAL MOBILE NATIVE R10 · CAPABILITY ICON OPTICAL ALIGNMENT Scope: <=620px only. No other landing or desktop behavior changes. ======================================================================== */ @media (max-width: 620px) { body[data-ui-page="landing"] .landing-home .public-capability-lanes__label { align-self: center; line-height: 26px; } body[data-ui-page="landing"] .landing-home .public-capability-lanes article > span[aria-hidden="true"] { width: 26px; height: 26px; align-self: center; place-items: center; line-height: 0; } body[data-ui-page="landing"] .landing-home .public-capability-lanes article > span[aria-hidden="true"] svg.icon { display: block; width: 14px; height: 14px; margin: 0; transform: translateY(-1px); transform-origin: center; } } /* ======================================================================== LOCAL MOBILE NATIVE R11 · CAPABILITY LABEL/ICON INLINE ALIGNMENT Scope: <=620px only. Remove the visual tile that makes the capability icon read as a detached badge; keep label + glyph as one centered unit. ======================================================================== */ @media (max-width: 620px) { body[data-ui-page="landing"] .landing-home .public-capability-lanes__label { align-self: center; line-height: 1; } body[data-ui-page="landing"] .landing-home .public-capability-lanes article > span[aria-hidden="true"] { width: 16px; height: 16px; padding: 0; align-self: center; justify-self: start; place-items: center; color: var(--public-accent-fg); border: 0; border-radius: 0; background: transparent; box-shadow: none; line-height: 0; } body[data-ui-page="landing"] .landing-home .public-capability-lanes article > span[aria-hidden="true"] :is(svg, svg.icon, .icon) { display: block; width: 15px; height: 15px; margin: 0; transform: none; align-self: center; justify-self: center; vertical-align: middle; } }