/* ========================================================= Values Corp · Design System — componentes base --------------------------------------------------------- Componentes escritos en CSS vanilla sobre los tokens de assets/tokens.css. Sin build, sin dependencias. Requiere que tokens.css se cargue ANTES que este archivo. Orden en el : tokens.css -> components.css -> styles.css Cubre lo que el sistema de diseño define a nivel de tokens: botón, campo de formulario, tarjeta, tabla, badge y la escala tipográfica. Las notas de alcance, procedencia de las especificaciones y desviaciones deliberadas están en docs/, fuera del deploy: NO agregar acá nada de eso, este archivo se sirve al público. ========================================================= */ /* --------------------------------------------------------- 1. Botón --------------------------------------------------------- */ /* Alto, padding, gap y peso son los del sistema de diseño, no aproximaciones: no ajustarlos "a ojo". */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--2); /* 8px */ height: var(--9); /* 36px */ padding: 0 var(--4); /* 0 16px */ font-family: var(--font-definitions-font-family-body); font-size: var(--body-sm-font-size); /* 14px */ line-height: var(--body-sm-line-height); /* 20px */ font-weight: var(--body-body-medium-weight); /* 500 — el DS usa Medium, no SemiBold */ border-radius: var(--radius-pill); border: 1px solid transparent; cursor: pointer; text-align: center; white-space: nowrap; transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease; } /* Anillo de foco: sombra de 3px con el token del sistema. Se respeta el valor entregado a propósito, no es un descuido. Ver docs/Notas_Design_System_Valuescorp.md antes de cambiarlo. */ .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring-default); } .btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; } .btn svg { width: 16px; height: 16px; flex-shrink: 0; } /* Tamaños — alto, padding horizontal, gap y tamaño de icono según el diseño */ .btn-xs { height: var(--6); padding: 0 var(--2); gap: var(--1); font-size: var(--body-xs-font-size); line-height: var(--body-xs-line-height); } .btn-sm { height: var(--8); padding: 0 var(--3); gap: var(--1-5); } .btn-lg { height: var(--10); padding: 0 var(--6); } .btn-xl { height: var(--11); padding: 0 var(--8); font-size: var(--body-md-font-size); line-height: var(--body-md-line-height); } .btn-xs svg { width: 12px; height: 12px; } .btn-block { width: 100%; } /* Variantes del sistema de diseño. Los colores de estado del primario son los entregados y se respetan tal cual: NO son un descuido de implementación ni conviene "corregirlos" acá. Ver docs/Notas_Design_System_Valuescorp.md antes de tocarlos. */ .btn-primary { background: var(--fill-primary); color: var(--text-on-primary); } .btn-primary:hover:not(:disabled) { background: var(--fill-primary-hover); } .btn-primary:active:not(:disabled) { background: var(--fill-primary-active); } .btn-secondary { background: var(--fill-secondary); color: var(--text-on-secondary); } .btn-secondary:hover:not(:disabled) { background: var(--fill-secondary-hover); } .btn-secondary:active:not(:disabled) { background: var(--fill-secondary-active); } /* outline: es la variante CON borde (border/3 + elevation-2). */ .btn-outline { background: var(--surface-body); color: var(--on-surface-primary); border-color: var(--border-3); box-shadow: 0 1px 2px 0 var(--shadow-subtle); } .btn-outline:hover:not(:disabled) { background: var(--fill-ghost-hover); } .btn-outline:active:not(:disabled) { background: var(--fill-ghost-active); } /* ghost: SIN borde. En el DS es la variante plana; no confundir con outline. */ .btn-ghost { background: var(--fill-ghost-rest); color: var(--on-surface-primary); } .btn-ghost:hover:not(:disabled) { background: var(--fill-ghost-hover); } .btn-ghost:active:not(:disabled) { background: var(--fill-ghost-active); } /* link: sin relleno ni borde, color de marca y subrayado al pasar. */ .btn-link { background: none; color: var(--fill-primary); padding: 0; height: auto; } .btn-link:hover:not(:disabled) { text-decoration: underline; text-underline-offset: 3px; } .btn-accent { background: var(--fill-accent); color: var(--text-on-accent); } .btn-accent:hover:not(:disabled) { background: var(--fill-accent-2); } .btn-accent:active:not(:disabled) { background: var(--fill-accent-3); } .btn-destructive { background: var(--fill-destructive); color: var(--text-on-destructive); } .btn-destructive:hover:not(:disabled) { background: var(--fill-destructive-hover); } .btn-destructive:active:not(:disabled) { background: var(--fill-destructive-active); } /* .btn-success y .btn-warning son variantes propias del sitio, no del sistema de diseño. Se mantienen porque el portal las usa, y están construidas con tokens del sistema. */ .btn-success { background: var(--fill-success); color: var(--text-on-success); } .btn-success:hover:not(:disabled) { background: var(--fill-success-hover); } .btn-success:active:not(:disabled) { background: var(--fill-success-active); } .btn-warning { background: var(--fill-warning); color: var(--text-on-warning); } .btn-warning:hover:not(:disabled) { background: var(--fill-warning-hover); } .btn-warning:active:not(:disabled) { background: var(--fill-warning-active); } /* Variantes sobre superficie oscura (heros y banda CTA del sitio público). El DS no define este par todavía; se construye con los tokens de superficie. */ .btn-light { background: var(--surface-body); color: var(--on-surface-primary); } .btn-light:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--elevation-md); } .btn-outline-light { background: transparent; color: var(--white); border-color: var(--white-alpha-40); } .btn-outline-light:hover:not(:disabled) { background: var(--white-alpha-10); border-color: var(--white-alpha-60); } /* --------------------------------------------------------- 2. Campos de formulario --------------------------------------------------------- */ .field { margin-bottom: var(--4); } .field label, .field-label { display: block; font-size: var(--body-sm-font-size); font-weight: var(--body-body-bold-weight); color: var(--on-surface-primary); margin-bottom: var(--1-5); } .field input, .field select, .field textarea, .input { width: 100%; padding: var(--3) var(--3-5); font-family: var(--font-definitions-font-family-body); font-size: var(--body-md-font-size); line-height: var(--body-md-line-height); color: var(--on-surface-primary); background: var(--surface-input); border: 1px solid var(--border-default); border-radius: var(--radius-input); transition: border-color .15s ease, box-shadow .15s ease; } .field textarea { min-height: 96px; resize: vertical; } .field input::placeholder, .field textarea::placeholder, .input::placeholder { color: var(--text-muted); } .field input:focus, .field select:focus, .field textarea:focus, .input:focus { outline: none; border-color: var(--fill-primary); box-shadow: 0 0 0 3px var(--brand-shades-100); } .field input:disabled, .field select:disabled, .field textarea:disabled, .input:disabled { background: var(--fill-muted); color: var(--text-muted); cursor: not-allowed; } /* Estado de error */ .field.error input, .field.error select, .field.error textarea, .input.error { border-color: var(--border-destructive); } .field.error input:focus, .field.error select:focus, .field.error textarea:focus, .input.error:focus { box-shadow: 0 0 0 3px var(--ring-error); } .field-hint { display: block; font-size: var(--body-xs-font-size); color: var(--text-muted); margin-top: var(--1-5); } .field-error { display: block; font-size: var(--body-xs-font-size); color: var(--text-destructive); font-weight: var(--body-body-medium-weight); margin-top: var(--1-5); } /* Checkbox / radio en línea */ .check { display: flex; gap: var(--2-5); align-items: flex-start; font-size: var(--body-sm-font-size); color: var(--text-muted); } .check input { width: auto; margin-top: 3px; accent-color: var(--fill-primary); } /* --------------------------------------------------------- 3. Tarjeta --------------------------------------------------------- */ .card { background: var(--surface-raised); color: var(--on-surface-raised); border: 1px solid var(--border-default); border-radius: var(--radius-card); overflow: hidden; } .card-header { padding: var(--5) var(--6); border-bottom: 1px solid var(--border-default); } .card-title { font-family: var(--heading-h5-font-family); font-size: var(--heading-h5-font-size); font-weight: var(--heading-h5-weight); line-height: var(--heading-h5-line-height); color: var(--on-surface-primary); } .card-subtitle { font-size: var(--body-sm-font-size); color: var(--text-muted); margin-top: var(--1); } .card-body { padding: var(--6); } .card-footer { padding: var(--4) var(--6); border-top: 1px solid var(--border-default); background: var(--fill-accent-0); } .card-hover { transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; } .card-hover:hover { box-shadow: var(--elevation-lg); transform: translateY(-3px); border-color: var(--fill-primary); } .card-raised { box-shadow: var(--elevation-md); } /* --------------------------------------------------------- 4. Tabla --------------------------------------------------------- */ .table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--border-default); border-radius: var(--radius-card); background: var(--surface-raised); } .table { width: 100%; border-collapse: collapse; font-size: var(--body-sm-font-size); color: var(--on-surface-primary); } .table thead th { text-align: left; font-weight: var(--body-body-bold-weight); font-size: var(--body-xs-font-size); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); background: var(--fill-muted); padding: var(--3) var(--4); white-space: nowrap; border-bottom: 1px solid var(--border-default); } .table tbody td { padding: var(--3-5) var(--4); border-bottom: 1px solid var(--border-1); } .table tbody tr:last-child td { border-bottom: 0; } .table tbody tr:hover td { background: var(--fill-ghost-hover); } .table .num { text-align: right; font-variant-numeric: tabular-nums; } .table-zebra tbody tr:nth-child(even) td { background: var(--fill-accent-0); } /* --------------------------------------------------------- 5. Badge --------------------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: var(--1-5); font-size: var(--body-xs-font-size); font-weight: var(--body-body-bold-weight); line-height: 1; letter-spacing: .03em; padding: var(--1-5) var(--2-5); border-radius: var(--radius-pill); border: 1px solid transparent; white-space: nowrap; } .badge-neutral { background: var(--fill-muted); color: var(--on-surface-mid); } .badge-brand { background: var(--brand-combinations-2-brand); color: var(--brand-combinations-2-brand-foreground); } .badge-success { background: var(--fill-success); color: var(--text-on-success); } .badge-warning { background: var(--fill-warning); color: var(--text-on-warning); } .badge-destructive { background: var(--fill-destructive-subtle); color: var(--text-destructive); } .badge-outline { background: transparent; color: var(--on-surface-mid); border-color: var(--border-default); } /* --------------------------------------------------------- 6. Escala tipográfica del DS --------------------------------------------------------- Clases utilitarias con los valores exactos de la entrega. Según la escala tipográfica del sistema, el sitio público SÍ consume esta escala: los titulares de styles.css leen los tokens --heading-h*-* en vez de tamaños propios. Los tamaños siguen siendo fluidos con clamp(), con el valor del DS como techo, porque el board define un solo tamaño por nivel y no especifica comportamiento responsive; fijar 48px duros desbordaría el hero en 375px. Esa es la única desviación, y es una adaptación nuestra, no un valor del sistema. --------------------------------------------------------- */ .text-h1 { font-family: var(--heading-h1-font-family); font-size: var(--heading-h1-font-size); font-weight: var(--heading-h1-weight); line-height: var(--heading-h1-line-height); letter-spacing: var(--heading-h1-letter-spacing); } .text-h2 { font-family: var(--heading-h2-font-family); font-size: var(--heading-h2-font-size); font-weight: var(--heading-h2-weight); line-height: var(--heading-h2-line-height); letter-spacing: var(--heading-h2-letter-spacing); } .text-h3 { font-family: var(--heading-h3-font-family); font-size: var(--heading-h3-font-size); font-weight: var(--heading-h3-weight); line-height: var(--heading-h3-line-height); letter-spacing: var(--heading-h3-letter-spacing); } .text-h4 { font-family: var(--heading-h4-font-family); font-size: var(--heading-h4-font-size); font-weight: var(--heading-h4-weight); line-height: var(--heading-h4-line-height); letter-spacing: var(--heading-h4-letter-spacing); } .text-h5 { font-family: var(--heading-h5-font-family); font-size: var(--heading-h5-font-size); font-weight: var(--heading-h5-weight); line-height: var(--heading-h5-line-height); letter-spacing: var(--heading-h5-letter-spacing); } .text-h6 { font-family: var(--heading-h6-font-family); font-size: var(--heading-h6-font-size); font-weight: var(--heading-h6-weight); line-height: var(--heading-h6-line-height); letter-spacing: var(--heading-h6-letter-spacing); } .text-body-lg { font-size: var(--body-lg-font-size); line-height: var(--body-lg-line-height); letter-spacing: var(--body-lg-letter-spacing); } .text-body-md { font-size: var(--body-md-font-size); line-height: var(--body-md-line-height); letter-spacing: var(--body-md-letter-spacing); } .text-body-sm { font-size: var(--body-sm-font-size); line-height: var(--body-sm-line-height); letter-spacing: var(--body-sm-letter-spacing); } .text-body-xs { font-size: var(--body-xs-font-size); line-height: var(--body-xs-line-height); letter-spacing: var(--body-xs-letter-spacing); } .text-caption { font-size: var(--caption-font-size); line-height: var(--caption-line-height); letter-spacing: var(--caption-letter-spacing); font-weight: var(--caption-font-weight); } .text-mono { font-family: var(--font-definitions-font-family-monospace); font-size: var(--monospaced-font-size); line-height: var(--monospaced-line-height); font-weight: var(--monospaced-font-weight); } .text-muted { color: var(--text-muted); } .text-mid { color: var(--on-surface-mid); } /* --------------------------------------------------------- 7. ToggleGroup --------------------------------------------------------- La matriz completa de variantes del sistema no se enumera: colapsa en tres tamaños, un modificador outline, los estados nativos del navegador y el radio por posición resuelto con :first-child/:last-child. --------------------------------------------------------- */ .toggle-group { display: inline-flex; align-items: center; gap: 0; } .toggle-group[data-orientation="vertical"] { flex-direction: column; align-items: stretch; } /* spacing 0..4 del sistema -> 0/4/8/12/16px */ .toggle-group[data-spacing="0"] { gap: 0; } .toggle-group[data-spacing="1"] { gap: var(--1); } .toggle-group[data-spacing="2"] { gap: var(--2); } .toggle-group[data-spacing="3"] { gap: var(--3); } .toggle-group[data-spacing="4"] { gap: var(--4); } .toggle-group-item { display: inline-flex; align-items: center; justify-content: center; gap: var(--1); /* 4px */ height: var(--9); /* 36px */ min-width: var(--9); /* 36px */ padding: 0 var(--2); /* 0 8px */ font-family: var(--font-definitions-font-family-body); font-size: var(--body-sm-font-size); /* 14px */ line-height: var(--body-sm-line-height); /* 20px */ font-weight: var(--body-body-medium-weight); /* 500 */ color: var(--on-surface-primary); background: var(--fill-ghost-rest); border: 1px solid transparent; border-radius: var(--radius-sm); /* 10px = "base" en el sistema */ cursor: pointer; white-space: nowrap; transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease; } .toggle-group-item svg { width: 16px; height: 16px; flex-shrink: 0; } /* Tamaños del sistema: sm 32 · default 36 · lg 40 */ .toggle-group-item-sm { height: var(--8); min-width: var(--8); } .toggle-group-item-lg { height: var(--10); min-width: var(--10); } .toggle-group-item:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--fill-ghost-hover); } /* Mismo anillo de foco del Button, con la misma salvedad: se respeta el valor del sistema. Ver docs/Notas_Design_System_Valuescorp.md. */ .toggle-group-item:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring-default); } /* El fondo del estado seleccionado es el que define el sistema, y se respeta tal cual. Ver docs/Notas_Design_System_Valuescorp.md antes de cambiarlo. */ .toggle-group-item[aria-pressed="true"] { background: var(--fill-ghost-hover); } .toggle-group-item:disabled, .toggle-group-item[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; } /* variant=outline. En el diseño el borde y la sombra aplican solo cuando el item NO está presionado, de ahí el :not([aria-pressed="true"]). La sombra es elevation-2 del sistema (0 1px 2px rgba(0,0,0,.05)), que la entrega de tokens no incluyó: --elevation-sm ya es elevation-3. */ .toggle-group-item-outline:not([aria-pressed="true"]) { border-color: var(--border-default); box-shadow: 0 1px 2px 0 var(--black-alpha-5); } /* position=first/middle/last: con spacing=0 los items van pegados y solo los extremos redondean. Con cualquier otro spacing todos son "neutral". */ .toggle-group[data-spacing="0"] .toggle-group-item { border-radius: 0; } .toggle-group[data-spacing="0"] .toggle-group-item:first-child { border-top-left-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm); } .toggle-group[data-spacing="0"] .toggle-group-item:last-child { border-top-right-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); } /* Evita la costura de 2px entre bordes contiguos en la variante outline. */ .toggle-group[data-spacing="0"]:not([data-orientation="vertical"]) .toggle-group-item-outline + .toggle-group-item-outline { margin-left: -1px; } .toggle-group[data-orientation="vertical"][data-spacing="0"] .toggle-group-item:first-child { border-radius: var(--radius-sm) var(--radius-sm) 0 0; } .toggle-group[data-orientation="vertical"][data-spacing="0"] .toggle-group-item:last-child { border-radius: 0 0 var(--radius-sm) var(--radius-sm); } .toggle-group[data-orientation="vertical"][data-spacing="0"] .toggle-group-item-outline + .toggle-group-item-outline { margin-top: -1px; } /* --------------------------------------------------------- 8. Tooltip --------------------------------------------------------- El globo se construye con los tokens del sistema de diseño. Globo del sistema: surface/inverse, texto on-surface/inverse en body xs/regular, padding 6px 12px, radio 6px, gap 4px, iconos de 12px. Sin borde y sin sombra: los tokens border/outline/rest y elevation-2 que aparecen en el nodo vienen de los botones que el playground usa como ancla, no del globo. El radio de 6px ("md") no tiene token en el sistema —--radius-sm ya es 10px—, así que va literal a propósito: no reemplazarlo por --radius-sm. --------------------------------------------------------- */ .tooltip { position: relative; display: inline-flex; } .tooltip-bubble { position: absolute; z-index: 30; display: inline-flex; align-items: center; justify-content: center; gap: var(--1); /* 4px */ padding: var(--1-5) var(--3); /* 6px 12px */ font-family: var(--font-definitions-font-family-body); font-size: var(--body-xs-font-size); /* 12px */ line-height: var(--body-xs-line-height); /* 16px */ font-weight: var(--body-body-weight); /* 400 */ color: var(--on-surface-inverse); background: var(--surface-inverse); border-radius: 6px; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s ease, visibility .15s ease; } .tooltip-bubble svg { width: 12px; height: 12px; flex-shrink: 0; } .tooltip:hover > .tooltip-bubble, .tooltip:focus-within > .tooltip-bubble { opacity: 1; visibility: visible; } /* Flecha: cuadrado de 10px con radio 2px rotado -45°, igual que el diseño. */ .tooltip-bubble::after { content: ""; position: absolute; width: 10px; height: 10px; background: var(--surface-inverse); border-radius: 2px; } /* Cuatro posiciones del playground. Sin data-side se comporta como "top". */ .tooltip-bubble, .tooltip-bubble[data-side="top"] { bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 7px; } .tooltip-bubble[data-side="top"]::after { top: 100%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); } .tooltip-bubble[data-side="bottom"] { top: 100%; bottom: auto; left: 50%; transform: translateX(-50%); margin: 7px 0 0; } .tooltip-bubble[data-side="bottom"]::after { bottom: 100%; left: 50%; transform: translate(-50%, 50%) rotate(45deg); } .tooltip-bubble[data-side="left"] { right: 100%; bottom: auto; left: auto; top: 50%; transform: translateY(-50%); margin: 0 7px 0 0; } .tooltip-bubble[data-side="left"]::after { left: 100%; top: 50%; transform: translate(-50%, -50%) rotate(45deg); } .tooltip-bubble[data-side="right"] { left: 100%; bottom: auto; top: 50%; transform: translateY(-50%); margin: 0 0 0 7px; } .tooltip-bubble[data-side="right"]::after { right: 100%; top: 50%; transform: translate(50%, -50%) rotate(45deg); } /* --------------------------------------------------------- 9. Layouts --------------------------------------------------------- Primitivas de andamiaje del DS, con slots. Nodos: PageShellLayout 195:256271 (header / main / footer) SplitLayout 195:256304 (breakpoint=xs, breakpoint=lg) SplitLayoutMain 195:256282 (surface/body) SplitLayoutComplement 195:256285 (sidebar #002a3a) CenteredContentLayout 195:256046 ViewportShell 195:256410 (xs 375 · sm 640 · lg 1024 · xl 1280) Los breakpoints del ViewportShell son los tokens --width-* que ya están en tokens.css:214-219, así que las media queries de acá usan esos valores. No se pueden interpolar en @media (las custom properties no funcionan ahí), por eso van literales con el token anotado al lado. --------------------------------------------------------- */ /* PageShellLayout: header y footer al alto de su contenido, main ocupa el resto. */ .shell { display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; background: var(--surface-base); } .shell-main { min-height: 0; } /* SplitLayout: una columna en xs, dos mitades iguales desde lg (1024px). */ .split { display: grid; grid-template-columns: 1fr; min-height: 100vh; } .split-main, .split-complement { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; } .split-main { background: var(--surface-body); } /* El texto del complement usa --sidebar-foreground, que es el par correcto del propio sistema para ese fondo. No cambiarlo por --on-surface-primary. Ver docs/Notas_Design_System_Valuescorp.md. */ .split-complement { background: var(--sidebar); color: var(--sidebar-foreground); } @media (min-width: 1024px) { /* --width-lg */ .split { grid-template-columns: 1fr 1fr; } .split-reversed .split-main { order: 2; } .split-reversed .split-complement { order: 1; } } /* CenteredContentLayout: contenido centrado sobre la superficie base. */ .centered-content { display: grid; place-items: center; min-height: 100vh; padding: var(--6); background: var(--surface-base); } /* ViewportShell: encuadres de los breakpoints del sistema, para previsualizar una pantalla al ancho exacto del diseño. */ .viewport { width: 100%; margin: 0 auto; } .viewport-xs { max-width: var(--width-xs); } /* 375px */ .viewport-sm { max-width: var(--width-sm); } /* 640px */ .viewport-md { max-width: var(--width-md); } /* 768px */ .viewport-lg { max-width: var(--width-lg); } /* 1024px */ .viewport-xl { max-width: var(--width-xl); } /* 1280px */