/* ============================================================================ base.css — Reset ligero, tipografía global y primitivas transversales. Se apoya en Bootstrap 5 (reboot + rejilla + utilidades) y lo sobreescribe sólo donde el sistema de diseño lo requiere. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--ms-font); font-size: var(--ms-fs-base); line-height: 1.5; color: var(--ms-text); background: var(--ms-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-variant-numeric: tabular-nums; } /* Evita el destello de tema: el script en línea de marca el html. */ html:not([data-ms-theme]) body { visibility: hidden; } h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; letter-spacing: -.015em; color: var(--ms-text); } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } figure { margin: 0; } a { color: inherit; text-decoration: none; } a:hover { color: inherit; } hr { border: 0; border-top: 1px solid var(--ms-border); margin: 0; opacity: 1; } svg { display: block; flex: none; } button { font: inherit; color: inherit; } /* Bootstrap añade margen inferior a las etiquetas: los campos ya se separan con gap, así que lo anulamos. */ label { margin: 0; } /* --- Accesibilidad -------------------------------------------------------- */ :focus-visible { outline: 2px solid var(--ms-border-focus); outline-offset: 2px; border-radius: var(--ms-radius-xs); } .ms-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .ms-skip-link { position: absolute; left: 8px; top: -60px; z-index: 2000; background: var(--ms-surface); color: var(--ms-text); border: 1px solid var(--ms-border); border-radius: var(--ms-radius); padding: 10px 14px; font-weight: 600; box-shadow: var(--ms-shadow-md); transition: top var(--ms-dur) var(--ms-ease); } .ms-skip-link:focus { top: 8px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* --- Barras de desplazamiento discretas ----------------------------------- */ * { scrollbar-width: thin; scrollbar-color: var(--ms-border-strong) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--ms-border-strong); border: 3px solid transparent; background-clip: content-box; border-radius: 999px; } *::-webkit-scrollbar-thumb:hover { background: var(--ms-text-4); background-clip: content-box; } ::selection { background: var(--ms-brand-soft); color: var(--ms-text); } /* ============================================================================ TIPOGRAFÍA UTILITARIA ========================================================================== */ .ms-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ms-text-3); } .ms-title { font-size: var(--ms-fs-xl); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; } .ms-subtitle { font-size: var(--ms-fs-base); color: var(--ms-text-2); } .ms-metric { font-size: var(--ms-fs-2xl); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; } .ms-mono { font-family: var(--ms-font-mono); font-size: var(--ms-fs-sm); letter-spacing: -.01em; } .ms-text-muted { color: var(--ms-text-2) !important; } .ms-text-subtle { color: var(--ms-text-3) !important; } .ms-text-brand { color: var(--ms-brand) !important; } .ms-text-success { color: var(--ms-success) !important; } .ms-text-danger { color: var(--ms-danger) !important; } .ms-text-warning { color: var(--ms-warning) !important; } .ms-fs-xs { font-size: var(--ms-fs-xs); } .ms-fs-sm { font-size: var(--ms-fs-sm); } .ms-fw-500 { font-weight: 500; } .ms-fw-600 { font-weight: 600; } .ms-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ms-nowrap { white-space: nowrap; } .ms-auto { margin-left: auto; } .ms-divider { height: 1px; background: var(--ms-border); } .ms-divider-v { width: 1px; align-self: stretch; background: var(--ms-border); margin: 0 4px; } .ms-sep-dot { color: var(--ms-text-4); } /* ============================================================================ ICONOS (sprite SVG en línea, sin librerías externas) ========================================================================== */ .ms-icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .ms-icon--xs { width: 13px; height: 13px; } .ms-icon--sm { width: 15px; height: 15px; } .ms-icon--lg { width: 22px; height: 22px; } .ms-icon--xl { width: 28px; height: 28px; } /* Contenedor del sprite: presente pero invisible */ .ms-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } /* ============================================================================ AVATARES, PUNTOS Y MARCAS ========================================================================== */ .ms-avatar { --size: 32px; width: var(--size); height: var(--size); flex: none; border-radius: var(--ms-radius-pill); display: inline-flex; align-items: center; justify-content: center; font-size: calc(var(--size) * .36); font-weight: 700; color: #fff; background: linear-gradient(135deg, #3454D1, #7B5CF0); text-transform: uppercase; user-select: none; } .ms-avatar--xs { --size: 24px; } .ms-avatar--sm { --size: 28px; } .ms-avatar--lg { --size: 44px; } .ms-avatar--xl { --size: 72px; } .ms-avatar--info { background: linear-gradient(135deg, #1E9AA8, #35C2CF); } .ms-avatar--success { background: linear-gradient(135deg, #12A455, #34D97F); } .ms-avatar--warning { background: linear-gradient(135deg, #D8871A, #FFB84D); } .ms-avatar--danger { background: linear-gradient(135deg, #C93C3C, #FF7070); } .ms-avatar--purple { background: linear-gradient(135deg, #6D4AE0, #9B7BFF); } .ms-avatar--soft { background: var(--ms-brand-soft); color: var(--ms-brand); } .ms-avatar-group { display: flex; align-items: center; } .ms-avatar-group .ms-avatar { margin-left: -8px; border: 2px solid var(--ms-surface); } .ms-avatar-group .ms-avatar:first-child { margin-left: 0; } .ms-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ms-text-3); flex: none; } .ms-dot--success { background: var(--ms-success); } .ms-dot--warning { background: var(--ms-warning); } .ms-dot--danger { background: var(--ms-danger); } .ms-dot--info { background: var(--ms-info); } .ms-dot--brand { background: var(--ms-brand); } /* Marca cuadrada de organización / deporte */ .ms-mark { --size: 34px; width: var(--size); height: var(--size); flex: none; border-radius: var(--ms-radius-sm); display: inline-flex; align-items: center; justify-content: center; font-size: calc(var(--size) * .34); font-weight: 800; letter-spacing: .02em; background: var(--ms-brand-soft); color: var(--ms-brand); } .ms-mark--sm { --size: 26px; border-radius: var(--ms-radius-xs); } .ms-mark--lg { --size: 46px; border-radius: var(--ms-radius); } .ms-mark--info { background: var(--ms-info-bg); color: var(--ms-info); } .ms-mark--success { background: var(--ms-success-bg); color: var(--ms-success); } .ms-mark--warning { background: var(--ms-warning-bg); color: var(--ms-warning); } .ms-mark--purple { background: var(--ms-purple-bg); color: var(--ms-purple); } .ms-mark--danger { background: var(--ms-danger-bg); color: var(--ms-danger); } .ms-mark--solid { background: linear-gradient(135deg, var(--ms-brand), var(--ms-purple)); color: #fff; } /* ============================================================================ BARRAS DE PROGRESO ========================================================================== */ .ms-progress { height: 6px; background: var(--ms-surface-4); border-radius: 999px; overflow: hidden; } .ms-progress > span { display: block; height: 100%; border-radius: 999px; background: var(--ms-brand); } .ms-progress--lg { height: 9px; } .ms-progress--success > span { background: var(--ms-success); } .ms-progress--warning > span { background: var(--ms-warning); } .ms-progress--danger > span { background: var(--ms-danger); } .ms-progress--info > span { background: var(--ms-info); } .ms-progress--purple > span { background: var(--ms-purple); } /* ============================================================================ SKELETON Marcador de carga con brillo. Placeholder que ocupa el sitio del contenido mientras llega, para que la pantalla no salte ni parpadee un estado vacío. Hereda los tokens (claro/oscuro) y se apaga con prefers-reduced-motion. ========================================================================== */ .ms-skeleton { display: block; width: 100%; height: 12px; border-radius: var(--ms-radius-xs); background: linear-gradient(90deg, var(--ms-surface-3) 25%, var(--ms-surface-4) 37%, var(--ms-surface-3) 63%); background-size: 400% 100%; animation: ms-skeleton 1.4s ease-in-out infinite; } .ms-skeleton--circle { border-radius: 50%; } @keyframes ms-skeleton { from { background-position: 100% 50%; } to { background-position: 0 50%; } } @media (prefers-reduced-motion: reduce) { .ms-skeleton { animation: none; } } /* ============================================================================ LOGOTIPO CONERSYS El PNG es monocromo con transparencia: sirve igual en claro y oscuro. ========================================================================== */ .ms-logo { width: auto; height: var(--brand-h, 26px); flex: none; display: block; object-fit: contain; background: transparent; } :root[data-ms-theme="dark"] .ms-logo { filter: brightness(1.35) saturate(1.05); } .ms-brand-text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; overflow: hidden; } .ms-brand-text b { font-size: 13px; font-weight: 600; letter-spacing: -.01em; color: var(--ms-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ms-brand-text span { font-size: 9.5px; letter-spacing: .10em; text-transform: uppercase; color: var(--ms-text-3); font-weight: 600; white-space: nowrap; }