@seguros-bolivar/ui-bundle
Version:
Seguros Bolivar UI Design System - Multi-brand CSS & Web Components Bundle for CDN
1,643 lines (1,411 loc) • 309 kB
CSS
/**
* Seguros Bolivar UI Design System - Complete Bundle
* Brand: cien-cuadras | Theme: light
* Generated: 2025-11-21T06:53:35.239Z
*
* Includes:
* - Design Tokens (variables CSS)
* - Base Components (atoms)
* - Complex Components (molecules)
* - Brand Overrides (if any)
*
* Usage:
* <link rel="stylesheet" href="sb-ui-cien-cuadras-light.min.css">
* <script type="module" src="sb-ui-components.min.js"></script>
*
* @brand cien-cuadras
* @theme light
*/
/**
* Design Tokens - cien-cuadras light
* Generated by Style Dictionary
* DO NOT EDIT DIRECTLY
*
* Variables con prefijo --sb-ui- (Seguros Bolivar UI)
* Todas las marcas tienen las mismas variables con diferentes valores
* Ejemplo: --sb-ui-color-primary-base, --sb-ui-typography-fontFamily
*/
[data-brand="cien-cuadras"][data-theme="light"] {
--sb-ui-color-primary-D400: #042f4d;
--sb-ui-color-primary-D300: #003a5c;
--sb-ui-color-primary-D200: #074973;
--sb-ui-color-primary-D100: #045586;
--sb-ui-color-primary-base: #006098;
--sb-ui-color-primary-L100: #3e98cc;
--sb-ui-color-primary-L200: #77c9ff;
--sb-ui-color-primary-L300: #c1eaff;
--sb-ui-color-primary-L400: #eaf7ff;
--sb-ui-color-secondary-D400: #df8816;
--sb-ui-color-secondary-D300: #ea8d1b;
--sb-ui-color-secondary-D200: #f4911f;
--sb-ui-color-secondary-D100: #fa9c29;
--sb-ui-color-secondary-base: #ffa533;
--sb-ui-color-secondary-L100: #f2a72e;
--sb-ui-color-secondary-L200: #f9b732;
--sb-ui-color-secondary-L300: #fac65d;
--sb-ui-color-secondary-L400: #fbe3b0;
--sb-ui-color-tertiary-D400: #3e8426;
--sb-ui-color-tertiary-D300: #4b9032;
--sb-ui-color-tertiary-D200: #579c3d;
--sb-ui-color-tertiary-D100: #63a848;
--sb-ui-color-tertiary-base: #6fb453;
--sb-ui-color-tertiary-L100: #88ce6b;
--sb-ui-color-tertiary-L200: #a0e782;
--sb-ui-color-tertiary-L300: #bdf0a6;
--sb-ui-color-tertiary-L400: #ddf7d0;
--sb-ui-color-grayscale-black: #1b1b1b;
--sb-ui-color-grayscale-D400: #282828;
--sb-ui-color-grayscale-D300: #414141;
--sb-ui-color-grayscale-D200: #5b5b5b;
--sb-ui-color-grayscale-D100: #666666;
--sb-ui-color-grayscale-base: #9b9b9b;
--sb-ui-color-grayscale-L100: #b9b9b9;
--sb-ui-color-grayscale-L200: #e1e1e1;
--sb-ui-color-grayscale-L300: #f5f5f5;
--sb-ui-color-grayscale-L400: #fafafa;
--sb-ui-color-grayscale-white: #ffffff;
--sb-ui-color-feedback-error-D400: #8f2b34;
--sb-ui-color-feedback-error-D300: #a22d38;
--sb-ui-color-feedback-error-D200: #b5303d;
--sb-ui-color-feedback-error-D100: #c93241;
--sb-ui-color-feedback-error-base: #dc3545;
--sb-ui-color-feedback-error-L100: #e7727d;
--sb-ui-color-feedback-error-L200: #ee9aa2;
--sb-ui-color-feedback-error-L300: #f5c2c7;
--sb-ui-color-feedback-error-L400: #fbebec;
--sb-ui-color-feedback-warning-D400: #d6b13d;
--sb-ui-color-feedback-warning-D300: #e0b52e;
--sb-ui-color-feedback-warning-D200: #ebb91f;
--sb-ui-color-feedback-warning-D100: #f5bd0f;
--sb-ui-color-feedback-warning-base: #ffc100;
--sb-ui-color-feedback-warning-L100: #ffd44d;
--sb-ui-color-feedback-warning-L200: #ffe080;
--sb-ui-color-feedback-warning-L300: #ffecb2;
--sb-ui-color-feedback-warning-L400: #fff9e5;
--sb-ui-color-feedback-info-D400: #0b56a4;
--sb-ui-color-feedback-info-D300: #0860bb;
--sb-ui-color-feedback-info-D200: #056ad1;
--sb-ui-color-feedback-info-D100: #0374e8;
--sb-ui-color-feedback-info-base: #007eff;
--sb-ui-color-feedback-info-L100: #4da5ff;
--sb-ui-color-feedback-info-L200: #80bfff;
--sb-ui-color-feedback-info-L300: #b2d8ff;
--sb-ui-color-feedback-info-L400: #e5f2ff;
--sb-ui-color-feedback-success-D400: #236f34;
--sb-ui-color-feedback-success-D300: #247d38;
--sb-ui-color-feedback-success-D200: #258b3d;
--sb-ui-color-feedback-success-D100: #279941;
--sb-ui-color-feedback-success-base: #28a745;
--sb-ui-color-feedback-success-L100: #69c17d;
--sb-ui-color-feedback-success-L200: #94d3a2;
--sb-ui-color-feedback-success-L300: #bee5c7;
--sb-ui-color-feedback-success-L400: #e9f6ec;
--sb-ui-shadow-xs: 0px 0px 6px 0px rgba(115, 115, 115, 0.16), 0px 2px 4px 0px rgba(115, 115, 115, 0.16);
--sb-ui-shadow-s: 1px 1px 8px 0px rgba(115, 115, 115, 0.16), 1px 4px 4px 0px rgba(115, 115, 115, 0.04);
--sb-ui-shadow-m: 2px 2px 16px 0px rgba(115, 115, 115, 0.16), 2px 8px 8px 0px rgba(115, 115, 115, 0.04);
--sb-ui-shadow-l: 3px 3px 24px 0px rgba(115, 115, 115, 0.16), 3px 12px 8px 0px rgba(115, 115, 115, 0.08);
--sb-ui-shadow-xl: 4px 4px 24px 0px rgba(115, 115, 115, 0.16), 3px 12px 16px 0px rgba(115, 115, 115, 0.16);
--sb-ui-typography-fontFamily: 'Ciencuadras', 'Montserrat', sans-serif;
--sb-ui-typography-fontSize-h1: 2.25rem;
--sb-ui-typography-fontSize-h2: 2rem;
--sb-ui-typography-fontSize-h3: 1.75rem;
--sb-ui-typography-fontSize-h4: 1.5rem;
--sb-ui-typography-fontSize-h5: 1.25rem;
--sb-ui-typography-fontSize-h6: 1rem;
--sb-ui-typography-fontSize-mobile-h1: 1rem;
--sb-ui-typography-fontSize-mobile-h2: 1rem;
--sb-ui-typography-fontSize-mobile-h3: 1rem;
--sb-ui-typography-fontSize-mobile-h4: 1rem;
--sb-ui-typography-fontSize-mobile-h5: 1rem;
--sb-ui-typography-fontSize-mobile-h6: 1rem;
--sb-ui-typography-fontSize-body: 1rem;
--sb-ui-typography-fontSize-label: 0.875rem;
--sb-ui-typography-fontSize-caption: 0.75rem;
--sb-ui-typography-fontSize-button: 1rem;
--sb-ui-gradient-primary-dark: linear-gradient(224deg, #042f4d 25.42%, #074973 72.29%);
--sb-ui-gradient-primary-base: linear-gradient(178deg, #074973 8.46%, #006098 92.31%);
--sb-ui-gradient-primary-light: linear-gradient(186deg, #77c9ff 4.73%, #eaf7ff 95.27%);
--sb-ui-gradient-secondary-dark: linear-gradient(186deg, #df8816 5.45%, #f4911f 95.52%);
--sb-ui-gradient-secondary-base: linear-gradient(186deg, #f4911f 6.06%, #ffa533 96.61%);
--sb-ui-gradient-secondary-light: linear-gradient(186deg, #f9b732 6.2%, #fbe3b0 96.74%);
--sb-ui-gradient-tertiary-dark: linear-gradient(198deg, #3e8426 12.41%, #579c3d 87.59%);
--sb-ui-gradient-tertiary-base: linear-gradient(186deg, #579c3d 5.02%, #6fb453 95.56%);
--sb-ui-gradient-tertiary-light: linear-gradient(186deg, #a0e782 4.42%, #ddf7d0 94.97%);
}
@layer reset, tokens, base, variants, sizes, modifiers, states, utilities;
/**
* Accordion Component - Seguros Bolivar UI Design System
* - CSS Nesting nativo con &
* - @layer para control de cascada
* - Logical Properties (RTL/LTR)
* - clamp() para responsive fluido
*
* Uso: <details class="sb-ui-accordion sb-ui-accordion--primary">
* <summary class="sb-ui-accordion__header">
* <span class="sb-ui-accordion__icon-start">🌐</span>
* <span class="sb-ui-accordion__label">Label text</span>
* <button class="sb-ui-accordion__action sb-ui-button sb-ui-button--primary sb-ui-button--fill">Button</button>
* <span class="sb-ui-accordion__icon-end">▼</span>
* </summary>
* <div class="sb-ui-accordion__content">Content</div>
* </details>
*/
/* ========================================
RESET LAYER
======================================== */
@layer reset {
.sb-ui-accordion {
all: unset;
box-sizing: border-box;
}
.sb-ui-accordion__header {
all: unset;
box-sizing: border-box;
}
.sb-ui-accordion__content {
all: unset;
box-sizing: border-box;
}
}
/* ========================================
TOKENS LAYER - Variables CSS
======================================== */
@layer tokens {
.sb-ui-accordion {
/* Colores BASE - Estados interactivos */
--sb-ui-accordion-bg-color: var(--sb-ui-color-grayscale-white, #fff);
--sb-ui-accordion-bg-hover: var(--sb-ui-color-grayscale-L300, #f5f5f5);
--sb-ui-accordion-bg-active: var(--sb-ui-color-grayscale-L200, #e1e1e1);
--sb-ui-accordion-bg-disabled: var(--sb-ui-color-grayscale-L400, #fafafa);
--sb-ui-accordion-bg-disabled-hover: var(--sb-ui-color-grayscale-L400, #fafafa);
--sb-ui-accordion-bg-expanded: var(--sb-ui-color-grayscale-L300, #f5f5f5);
--sb-ui-accordion-text-color: var(--sb-ui-color-grayscale-D200, #5b5b5b);
--sb-ui-accordion-text-hover: var(--sb-ui-color-grayscale-D200, #5b5b5b);
--sb-ui-accordion-text-active: var(--sb-ui-color-grayscale-D200, #5b5b5b);
--sb-ui-accordion-text-disabled: var(--sb-ui-color-grayscale-base, #9b9b9b);
--sb-ui-accordion-text-disabled-hover: var(--sb-ui-color-grayscale-base, #9b9b9b);
--sb-ui-accordion-border-color: var(--sb-ui-color-grayscale-L200, #e1e1e1);
--sb-ui-accordion-border-hover: var(--sb-ui-color-grayscale-L200, #e1e1e1);
--sb-ui-accordion-border-active: var(--sb-ui-color-grayscale-L100, #d0d0d0);
--sb-ui-accordion-border-disabled: var(--sb-ui-color-grayscale-L200, #e1e1e1);
--sb-ui-accordion-border-disabled-hover: var(--sb-ui-color-grayscale-L200, #e1e1e1);
--sb-ui-accordion-border-focus: var(--sb-ui-color-primary-base, #038450);
/* Espaciado - SIEMPRE con clamp() */
--sb-ui-accordion-padding-inline: clamp(1rem, 0.8rem + 1vw, 1.5rem);
--sb-ui-accordion-padding-block: clamp(0.75rem, 0.6rem + 0.5vw, 1rem);
--sb-ui-accordion-gap: clamp(0.75rem, 0.5rem + 0.5vw, 1rem);
--sb-ui-accordion-content-padding-block: clamp(1rem, 0.8rem + 1vw, 1.25rem);
--sb-ui-accordion-content-padding-inline: clamp(1rem, 0.8rem + 1vw, 1.5rem);
/* Tipografía - SIEMPRE con clamp() */
--sb-ui-accordion-font-family: var(--sb-ui-typography-fontFamily, 'Roboto', sans-serif);
--sb-ui-accordion-font-size: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);
--sb-ui-accordion-font-weight: 400;
--sb-ui-accordion-line-height: 1.5;
/* Tamaños - Logical properties */
--sb-ui-accordion-min-block-size: clamp(48px, 10vw, 56px);
/* Bordes */
--sb-ui-accordion-border-width: 1px;
--sb-ui-accordion-border-radius: clamp(12px, 0.75rem + 0.5vw, 16px);
--sb-ui-accordion-border-focus-width: 3px;
/* Iconos */
--sb-ui-accordion-icon-size: clamp(1.25rem, 1.125rem + 0.5vw, 1.5rem);
/* Transiciones - NO incluir outline para evitar destellos en focus */
--sb-ui-accordion-transition: background-color 0.2s ease, border-color 0.2s ease,
transform 0.2s ease;
}
}
/* ========================================
BASE LAYER - Estilos base
======================================== */
@layer base {
.sb-ui-accordion {
/* Layout */
display: block;
position: relative;
/* Spacing - SOLO Logical Properties */
margin-block-end: clamp(0.5rem, 0.4rem + 0.3vw, 0.75rem);
/* Appearance */
background-color: var(--sb-ui-accordion-bg-color);
border: var(--sb-ui-accordion-border-width) solid var(--sb-ui-accordion-border-color);
border-radius: var(--sb-ui-accordion-border-radius);
/* Animation */
transition: var(--sb-ui-accordion-transition);
/* Remove default marker */
}
.sb-ui-accordion summary {
list-style: none;
}
.sb-ui-accordion summary::-webkit-details-marker {
display: none;
}
/* Border color changes on header interaction */
.sb-ui-accordion:has(.sb-ui-accordion__header:hover:not(:disabled)) {
border-color: var(--sb-ui-accordion-border-hover, var(--sb-ui-accordion-border-color));
}
.sb-ui-accordion:has(.sb-ui-accordion__header:active:not(:disabled)) {
border-color: var(--sb-ui-accordion-border-active, var(--sb-ui-accordion-border-color));
}
/* Focus state - Border verde grueso */
.sb-ui-accordion:has(.sb-ui-accordion__header:focus-visible) {
border-color: var(--sb-ui-accordion-border-focus);
border-width: var(--sb-ui-accordion-border-focus-width);
}
.sb-ui-accordion__header {
/* Layout */
display: flex;
align-items: center;
gap: var(--sb-ui-accordion-gap);
/* Spacing */
padding-inline: var(--sb-ui-accordion-padding-inline);
padding-block: var(--sb-ui-accordion-padding-block);
min-block-size: var(--sb-ui-accordion-min-block-size);
/* Typography */
font-family: var(--sb-ui-accordion-font-family);
font-size: var(--sb-ui-accordion-font-size);
font-weight: var(--sb-ui-accordion-font-weight);
line-height: var(--sb-ui-accordion-line-height);
color: var(--sb-ui-accordion-text-color);
/* Appearance */
border-radius: var(--sb-ui-accordion-border-radius);
/* Interaction */
cursor: pointer;
user-select: none;
/* Animation */
transition: var(--sb-ui-accordion-transition);
/* Nested Pseudo-classes */
}
.sb-ui-accordion__header:hover:not(:disabled) {
background-color: var(--sb-ui-accordion-bg-hover);
color: var(--sb-ui-accordion-text-hover, var(--sb-ui-accordion-text-color));
}
.sb-ui-accordion__header:active:not(:disabled) {
background-color: var(--sb-ui-accordion-bg-active);
color: var(--sb-ui-accordion-text-active, var(--sb-ui-accordion-text-color));
}
.sb-ui-accordion__header:focus-visible:not(:disabled) {
outline: none;
}
.sb-ui-accordion__icon-start {
/* Layout */
display: flex;
align-items: center;
justify-content: center;
/* Size */
inline-size: var(--sb-ui-accordion-icon-size);
block-size: var(--sb-ui-accordion-icon-size);
flex-shrink: 0;
/* Appearance */
font-size: var(--sb-ui-accordion-icon-size);
}
.sb-ui-accordion__label {
/* Layout */
flex: 1;
/* Typography */
font-family: var(--sb-ui-accordion-font-family);
font-size: var(--sb-ui-accordion-font-size);
font-weight: var(--sb-ui-accordion-font-weight);
line-height: var(--sb-ui-accordion-line-height);
}
.sb-ui-accordion__action {
/* Layout */
flex-shrink: 0;
}
.sb-ui-accordion__icon-end {
/* Layout */
display: flex;
align-items: center;
justify-content: center;
/* Size */
inline-size: var(--sb-ui-accordion-icon-size);
block-size: var(--sb-ui-accordion-icon-size);
flex-shrink: 0;
/* Appearance */
font-size: var(--sb-ui-accordion-icon-size);
font-weight: 300;
/* Animation */
transition: transform 0.3s ease;
}
.sb-ui-accordion__content {
/* Layout */
display: block;
/* Spacing */
padding-inline: var(--sb-ui-accordion-content-padding-inline);
padding-block-start: var(--sb-ui-accordion-content-padding-block);
padding-block-end: var(--sb-ui-accordion-content-padding-block);
/* Typography */
font-family: var(--sb-ui-accordion-font-family);
font-size: var(--sb-ui-accordion-font-size);
font-weight: 400;
line-height: var(--sb-ui-accordion-line-height);
color: var(--sb-ui-accordion-text-color);
/* Border divisor (solo visible cuando está open) */
border-block-start: 0 solid transparent;
transition: border-color 0.2s ease;
}
/* Expanded state */
.sb-ui-accordion[open] {
border-color: var(--sb-ui-accordion-border-expanded, var(--sb-ui-accordion-border-color));
}
.sb-ui-accordion[open] .sb-ui-accordion__header {
background-color: var(--sb-ui-accordion-bg-expanded, #F2F9F6);
color: var(--sb-ui-accordion-text-expanded, var(--sb-ui-accordion-text-color));
}
.sb-ui-accordion[open] .sb-ui-accordion__icon-end {
transform: rotate(180deg);
color: var(--sb-ui-accordion-text-expanded, var(--sb-ui-accordion-text-color));
}
.sb-ui-accordion[open] .sb-ui-accordion__content {
border-block-start: var(--sb-ui-accordion-border-width) solid
var(--sb-ui-accordion-border-color);
}
/* Disabled state */
.sb-ui-accordion--disabled {
pointer-events: none;
}
.sb-ui-accordion--disabled .sb-ui-accordion__header {
background-color: var(--sb-ui-accordion-bg-disabled);
color: var(--sb-ui-accordion-text-disabled);
cursor: not-allowed;
}
.sb-ui-accordion--disabled .sb-ui-accordion {
border-color: var(--sb-ui-accordion-border-disabled);
}
.sb-ui-accordion--disabled:hover .sb-ui-accordion__header {
background-color: var(
--sb-ui-accordion-bg-disabled-hover,
var(--sb-ui-accordion-bg-disabled)
) !important;
color: var(
--sb-ui-accordion-text-disabled-hover,
var(--sb-ui-accordion-text-disabled)
) !important;
}
}
/* ========================================
VARIANTS LAYER
======================================== */
@layer variants {
.sb-ui-accordion--primary {
--sb-ui-accordion-border-color: var(--sb-ui-color-primary-base);
--sb-ui-accordion-border-hover: var(--sb-ui-color-primary-D100);
--sb-ui-accordion-border-active: var(--sb-ui-color-primary-D200);
}
.sb-ui-accordion--secondary {
--sb-ui-accordion-border-color: var(--sb-ui-color-secondary-base);
--sb-ui-accordion-border-hover: var(--sb-ui-color-secondary-D100);
--sb-ui-accordion-border-active: var(--sb-ui-color-secondary-D200);
}
}
/* ========================================
SIZES LAYER
======================================== */
@layer sizes {
.sb-ui-accordion--small {
--sb-ui-accordion-font-size: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
--sb-ui-accordion-padding-inline: clamp(0.75rem, 0.6rem + 0.8vw, 1rem);
--sb-ui-accordion-padding-block: clamp(0.5rem, 0.4rem + 0.3vw, 0.75rem);
--sb-ui-accordion-min-block-size: clamp(40px, 8vw, 48px);
}
.sb-ui-accordion--large {
--sb-ui-accordion-font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
--sb-ui-accordion-padding-inline: clamp(1.25rem, 1rem + 1.5vw, 2rem);
--sb-ui-accordion-padding-block: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
--sb-ui-accordion-min-block-size: clamp(56px, 12vw, 72px);
}
}
/* ========================================
MODIFIERS LAYER
======================================== */
@layer modifiers {
.sb-ui-accordion--no-icon-start .sb-ui-accordion__icon-start {
display: none;
}
.sb-ui-accordion--no-icon-end .sb-ui-accordion__icon-end {
display: none;
}
.sb-ui-accordion--no-action .sb-ui-accordion__action {
display: none;
}
}
/* ========================================
STATES LAYER
======================================== */
@layer states {
.sb-ui-accordion--loading {
pointer-events: none;
opacity: 0.7;
}
}
/* ========================================
UTILITIES LAYER (máxima prioridad)
======================================== */
@layer utilities {
/* High contrast mode support - OBLIGATORIO */
@media (prefers-contrast: high) {
.sb-ui-accordion {
--sb-ui-accordion-border-width: 2px;
}
}
/* Reduced motion support - OBLIGATORIO */
@media (prefers-reduced-motion: reduce) {
.sb-ui-accordion {
--sb-ui-accordion-transition: none;
}
.sb-ui-accordion__icon-end {
transition: none;
}
}
}
/**
* Alert Component - Seguros Bolívar UI Design System
* Componente CSS puro con variables --sb-ui-* personalizables por marca
* Incluye estilos para alertas tipo toast, inline y banner
*
* Uso:
* <div class="rb-alert rb-alert--success">
* <div class="rb-alert-icon">✓</div>
* <div class="rb-alert-content">
* <div class="rb-alert-title">Description info text</div>
* <div class="rb-alert-message">This is a success alert — check it</div>
* </div>
* <button class="rb-alert-close" aria-label="Close alert">×</button>
* </div>
*/
/* ========================================
VARIABLES CSS PERSONALIZABLES Y ESTILOS BASE
======================================== */
.sb-ui-alert {
/* Colores - Pueden ser sobreescritos por marca */
--sb-ui-alert-bg-color: var(--sb-ui-color-grayscale-white, #ffffff);
--sb-ui-alert-bg-color-success: var(--sb-ui-color-feedback-success-L400, rgba(40, 167, 69, 0.1));
--sb-ui-alert-bg-color-info: var(--sb-ui-color-feedback-info-L400, rgba(0, 122, 204, 0.1));
--sb-ui-alert-bg-color-warning: var(--sb-ui-color-feedback-warning-L400, rgba(255, 193, 7, 0.1));
--sb-ui-alert-bg-color-error: var(--sb-ui-color-feedback-error-L400, rgba(220, 53, 69, 0.1));
--sb-ui-alert-border-color: var(--sb-ui-color-grayscale-L200, #edeef0);
--sb-ui-alert-border-color-success: var(--sb-ui-color-feedback-success-base, #28a745);
--sb-ui-alert-border-color-info: var(--sb-ui-color-feedback-info-base, #007acc);
--sb-ui-alert-border-color-warning: var(--sb-ui-color-feedback-warning-base, #ffc107);
--sb-ui-alert-border-color-error: var(--sb-ui-color-feedback-error-base, #dc3545);
--sb-ui-alert-text-color: var(--sb-ui-color-grayscale-D300, #404040);
--sb-ui-alert-text-color-success: var(--sb-ui-color-feedback-success-base, #28a745);
--sb-ui-alert-text-color-info: var(--sb-ui-color-feedback-info-base, #007acc);
--sb-ui-alert-text-color-warning: var(--sb-ui-color-feedback-warning-base, #ffc107);
--sb-ui-alert-text-color-error: var(--sb-ui-color-feedback-error-base, #dc3545);
--sb-ui-alert-icon-color: var(--sb-ui-color-grayscale-base, #d9d9d9);
--sb-ui-alert-icon-color-success: var(--sb-ui-color-feedback-success-base, #28a745);
--sb-ui-alert-icon-color-info: var(--sb-ui-color-feedback-info-base, #007acc);
--sb-ui-alert-icon-color-warning: var(--sb-ui-color-feedback-warning-base, #ffc107);
--sb-ui-alert-icon-color-error: var(--sb-ui-color-feedback-error-base, #dc3545);
--sb-ui-alert-close-color: var(--sb-ui-color-grayscale-base, #d9d9d9);
--sb-ui-alert-close-color-hover: var(--sb-ui-color-grayscale-D300, #404040);
/* Espaciado */
--sb-ui-alert-padding: 1rem;
--sb-ui-alert-padding-compact: 0.75rem;
--sb-ui-alert-padding-large: 1.25rem;
--sb-ui-alert-gap: 0.75rem;
--sb-ui-alert-border-width: 1px;
--sb-ui-alert-border-left-width: 4px;
/* Tipografía */
--sb-ui-alert-font-family: var(--sb-ui-typography-fontFamily, 'Roboto', sans-serif);
--sb-ui-alert-title-font-size: 0.875rem;
--sb-ui-alert-title-font-weight: 600;
--sb-ui-alert-message-font-size: 0.875rem;
--sb-ui-alert-message-font-weight: 400;
--sb-ui-alert-line-height: 1.25;
/* Tamaños */
--sb-ui-alert-min-height: 3rem;
--sb-ui-alert-border-radius: 8px;
--sb-ui-alert-icon-size: 1.25rem;
--sb-ui-alert-close-size: 1.5rem;
/* Sombras */
--sb-ui-alert-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
--sb-ui-alert-shadow-toast: 0 4px 16px rgba(0, 0, 0, 0.15);
/* Transiciones */
--sb-ui-alert-transition: all 0.2s ease;
/* Layout */
display: flex;
align-items: flex-start;
gap: var(--sb-ui-alert-gap);
position: relative;
box-sizing: border-box;
min-height: var(--sb-ui-alert-min-height);
padding: var(--sb-ui-alert-padding);
background-color: var(--sb-ui-alert-bg-color);
border: var(--sb-ui-alert-border-width) solid var(--sb-ui-alert-border-color);
border-left: var(--sb-ui-alert-border-left-width) solid var(--sb-ui-alert-border-color);
border-radius: var(--sb-ui-alert-border-radius);
box-shadow: var(--sb-ui-alert-shadow);
font-family: var(--sb-ui-alert-font-family);
line-height: var(--sb-ui-alert-line-height);
color: var(--sb-ui-alert-text-color);
transition: var(--sb-ui-alert-transition);
}
/* ========================================
ALERT CONTENT
======================================== */
.sb-ui-alert-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.25rem;
min-width: 0; /* Permite que el contenido se encoja */
}
.sb-ui-alert-title {
font-size: var(--sb-ui-alert-title-font-size);
font-weight: var(--sb-ui-alert-title-font-weight);
line-height: var(--sb-ui-alert-line-height);
margin: 0;
color: inherit;
}
.sb-ui-alert-message {
font-size: var(--sb-ui-alert-message-font-size);
font-weight: var(--sb-ui-alert-message-font-weight);
line-height: var(--sb-ui-alert-line-height);
margin: 0;
color: inherit;
opacity: 0.8;
}
/* ========================================
ALERT ICON
======================================== */
.sb-ui-alert-icon {
display: flex;
align-items: center;
justify-content: center;
width: var(--sb-ui-alert-icon-size);
height: var(--sb-ui-alert-icon-size);
font-size: var(--sb-ui-alert-icon-size);
color: var(--sb-ui-alert-icon-color);
flex-shrink: 0;
margin-top: 0.125rem; /* Alineación visual con el texto */
}
/* ========================================
ALERT CLOSE BUTTON
======================================== */
.sb-ui-alert-close {
display: flex;
align-items: center;
justify-content: center;
width: var(--sb-ui-alert-close-size);
height: var(--sb-ui-alert-close-size);
background: none;
border: none;
color: var(--sb-ui-alert-close-color);
font-size: 1.25rem;
font-weight: 400;
line-height: 1;
cursor: pointer;
border-radius: 4px;
transition: var(--sb-ui-alert-transition);
flex-shrink: 0;
margin-top: -0.125rem; /* Alineación visual */
margin-right: -0.25rem; /* Espaciado visual */
}
.sb-ui-alert-close:hover {
color: var(--sb-ui-alert-close-color-hover);
background-color: var(--sb-ui-color-grayscale-L400, rgba(247, 247, 247, 0.5));
}
.sb-ui-alert-close:focus {
outline: 2px solid var(--sb-ui-color-primary-base, #007acc);
outline-offset: 2px;
}
/* ========================================
ALERT STATES
======================================== */
/* Success state */
.sb-ui-alert--success {
--sb-ui-alert-bg-color: var(--sb-ui-alert-bg-color-success);
--sb-ui-alert-border-color: var(--sb-ui-alert-border-color-success);
--sb-ui-alert-text-color: var(--sb-ui-alert-text-color-success);
--sb-ui-alert-icon-color: var(--sb-ui-alert-icon-color-success);
}
.sb-ui-alert--success .sb-ui-alert-icon::before {
content: '✓';
}
/* Info state */
.sb-ui-alert--info {
--sb-ui-alert-bg-color: var(--sb-ui-alert-bg-color-info);
--sb-ui-alert-border-color: var(--sb-ui-alert-border-color-info);
--sb-ui-alert-text-color: var(--sb-ui-alert-text-color-info);
--sb-ui-alert-icon-color: var(--sb-ui-alert-icon-color-info);
}
.sb-ui-alert--info .sb-ui-alert-icon::before {
content: 'i';
font-style: italic;
font-weight: 600;
}
/* Warning state */
.sb-ui-alert--warning {
--sb-ui-alert-bg-color: var(--sb-ui-alert-bg-color-warning);
--sb-ui-alert-border-color: var(--sb-ui-alert-border-color-warning);
--sb-ui-alert-text-color: var(--sb-ui-alert-text-color-warning);
--sb-ui-alert-icon-color: var(--sb-ui-alert-icon-color-warning);
}
.sb-ui-alert--warning .sb-ui-alert-icon::before {
content: '⚠';
}
/* Error state */
.sb-ui-alert--error {
--sb-ui-alert-bg-color: var(--sb-ui-alert-bg-color-error);
--sb-ui-alert-border-color: var(--sb-ui-alert-border-color-error);
--sb-ui-alert-text-color: var(--sb-ui-alert-text-color-error);
--sb-ui-alert-icon-color: var(--sb-ui-alert-icon-color-error);
}
.sb-ui-alert--error .sb-ui-alert-icon::before {
content: '✕';
}
/* ========================================
ALERT VARIANTS
======================================== */
/* With background (default) */
.sb-ui-alert--with-bg {
/* Ya es el comportamiento por defecto */
}
/* Without background (bordered only) */
.sb-ui-alert--no-bg {
--sb-ui-alert-bg-color: var(--sb-ui-color-grayscale-white, #ffffff);
--sb-ui-alert-bg-color-success: var(--sb-ui-color-grayscale-white, #ffffff);
--sb-ui-alert-bg-color-info: var(--sb-ui-color-grayscale-white, #ffffff);
--sb-ui-alert-bg-color-warning: var(--sb-ui-color-grayscale-white, #ffffff);
--sb-ui-alert-bg-color-error: var(--sb-ui-color-grayscale-white, #ffffff);
}
/* With close icon (default) */
.sb-ui-alert--with-close {
/* Ya es el comportamiento por defecto */
}
/* Without close icon */
.sb-ui-alert--no-close .sb-ui-alert-close {
display: none;
}
/* ========================================
ALERT SIZES
======================================== */
.sb-ui-alert--small {
--sb-ui-alert-padding: 0.75rem;
--sb-ui-alert-min-height: 2.5rem;
--sb-ui-alert-title-font-size: 0.8125rem;
--sb-ui-alert-message-font-size: 0.8125rem;
--sb-ui-alert-icon-size: 1rem;
--sb-ui-alert-close-size: 1.25rem;
--sb-ui-alert-gap: 0.5rem;
}
.sb-ui-alert--medium {
--sb-ui-alert-padding: 1rem;
--sb-ui-alert-min-height: 3rem;
--sb-ui-alert-title-font-size: 0.875rem;
--sb-ui-alert-message-font-size: 0.875rem;
--sb-ui-alert-icon-size: 1.25rem;
--sb-ui-alert-close-size: 1.5rem;
--sb-ui-alert-gap: 0.75rem;
}
.sb-ui-alert--large {
--sb-ui-alert-padding: 1.25rem;
--sb-ui-alert-min-height: 3.5rem;
--sb-ui-alert-title-font-size: 1rem;
--sb-ui-alert-message-font-size: 0.9375rem;
--sb-ui-alert-icon-size: 1.5rem;
--sb-ui-alert-close-size: 1.75rem;
--sb-ui-alert-gap: 1rem;
}
/* ========================================
ALERT POSITIONING (TOAST)
======================================== */
.sb-ui-alert--toast {
position: fixed;
top: 1rem;
right: 1rem;
z-index: 1000;
max-width: 400px;
min-width: 300px;
box-shadow: var(--sb-ui-alert-shadow-toast);
animation: rb-alert-slide-in 0.3s ease;
}
.sb-ui-alert--toast-top-left {
top: 1rem;
left: 1rem;
right: auto;
}
.sb-ui-alert--toast-top-center {
top: 1rem;
left: 50%;
right: auto;
transform: translateX(-50%);
}
.sb-ui-alert--toast-bottom-right {
top: auto;
bottom: 1rem;
right: 1rem;
}
.sb-ui-alert--toast-bottom-left {
top: auto;
bottom: 1rem;
left: 1rem;
right: auto;
}
.sb-ui-alert--toast-bottom-center {
top: auto;
bottom: 1rem;
left: 50%;
right: auto;
transform: translateX(-50%);
}
/* ========================================
ALERT ANIMATIONS
======================================== */
@keyframes rb-alert-slide-in {
from {
opacity: 0;
transform: translateX(100%);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes rb-alert-slide-out {
from {
opacity: 1;
transform: translateX(0);
}
to {
opacity: 0;
transform: translateX(100%);
}
}
@keyframes rb-alert-fade-in {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes rb-alert-fade-out {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(-10px);
}
}
/* Animation classes */
.sb-ui-alert--fade-in {
animation: rb-alert-fade-in 0.3s ease;
}
.sb-ui-alert--fade-out {
animation: rb-alert-fade-out 0.3s ease;
}
.sb-ui-alert--slide-out {
animation: rb-alert-slide-out 0.3s ease;
}
/* ========================================
ALERT MODIFIERS
======================================== */
/* Rounded corners */
.sb-ui-alert--rounded {
--sb-ui-alert-border-radius: 1rem;
}
/* Compact spacing */
.sb-ui-alert--compact {
--sb-ui-alert-padding: 0.75rem;
--sb-ui-alert-gap: 0.5rem;
}
/* Dense spacing */
.sb-ui-alert--dense {
--sb-ui-alert-padding: 0.5rem;
--sb-ui-alert-gap: 0.375rem;
--sb-ui-alert-min-height: 2rem;
}
/* Full width */
.sb-ui-alert--full-width {
width: 100%;
}
/* Inline alert */
.sb-ui-alert--inline {
display: inline-flex;
width: auto;
max-width: none;
}
/* Banner alert */
.sb-ui-alert--banner {
border-radius: 0;
border-left: none;
border-right: none;
border-top: none;
margin: 0;
}
/* ========================================
ALERT CONTAINER
======================================== */
.sb-ui-alert-container {
position: fixed;
top: 1rem;
right: 1rem;
z-index: 1000;
display: flex;
flex-direction: column;
gap: 0.5rem;
max-width: 400px;
min-width: 300px;
}
.sb-ui-alert-container--top-left {
top: 1rem;
left: 1rem;
right: auto;
}
.sb-ui-alert-container--top-center {
top: 1rem;
left: 50%;
right: auto;
transform: translateX(-50%);
}
.sb-ui-alert-container--bottom-right {
top: auto;
bottom: 1rem;
right: 1rem;
}
.sb-ui-alert-container--bottom-left {
top: auto;
bottom: 1rem;
left: 1rem;
right: auto;
}
.sb-ui-alert-container--bottom-center {
top: auto;
bottom: 1rem;
left: 50%;
right: auto;
transform: translateX(-50%);
}
/* ========================================
ALERT GROUP
======================================== */
.sb-ui-alert-group {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.sb-ui-alert-group--horizontal {
flex-direction: row;
flex-wrap: wrap;
gap: 1rem;
}
/* ========================================
ACCESSIBILITY & RESPONSIVE
======================================== */
/* High contrast mode support */
@media (prefers-contrast: high) {
.sb-ui-alert {
--sb-ui-alert-border-width: 2px;
--sb-ui-alert-border-left-width: 6px;
}
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
.sb-ui-alert {
--sb-ui-alert-transition: none;
}
.sb-ui-alert--toast,
.sb-ui-alert--fade-in,
.sb-ui-alert--fade-out,
.sb-ui-alert--slide-out {
animation: none;
}
}
/* Mobile optimizations */
@media (width <= 640px) {
.sb-ui-alert--toast {
top: 0.5rem;
right: 0.5rem;
left: 0.5rem;
max-width: none;
min-width: auto;
}
.sb-ui-alert-container {
top: 0.5rem;
right: 0.5rem;
left: 0.5rem;
max-width: none;
min-width: auto;
}
.sb-ui-alert-group--horizontal {
flex-direction: column;
}
}
/* Desktop optimizations */
@media (width >= 641px) {
.sb-ui-alert--toast {
max-width: 450px;
}
.sb-ui-alert-container {
max-width: 450px;
}
}
/* Print styles */
@media print {
.sb-ui-alert {
background: transparent !important;
color: black !important;
border: 1px solid black !important;
box-shadow: none !important;
position: static !important;
}
.sb-ui-alert-close {
display: none !important;
}
}
/* ========================================
FOCUS VISIBLE (keyboard navigation)
======================================== */
.sb-ui-alert-close:focus-visible {
outline: 2px solid var(--sb-ui-color-primary-base, #007acc);
outline-offset: 2px;
}
/* ========================================
LOADING STATE
======================================== */
.sb-ui-alert--loading {
position: relative;
pointer-events: none;
}
.sb-ui-alert--loading::after {
content: '';
position: absolute;
top: 50%;
right: 1rem;
width: 16px;
height: 16px;
margin-top: -8px;
border: 2px solid var(--sb-ui-color-grayscale-L200, #edeef0);
border-top-color: var(--sb-ui-color-primary-base, #007acc);
border-radius: 50%;
animation: rb-alert-spinner 1s linear infinite;
z-index: 3;
}
.sb-ui-alert--loading .sb-ui-alert-close {
display: none;
}
@keyframes rb-alert-spinner {
to {
transform: rotate(360deg);
}
}
/* ========================================
DARK MODE SUPPORT
======================================== */
@media (prefers-color-scheme: dark) {
.sb-ui-alert {
--sb-ui-alert-bg-color: var(--sb-ui-color-grayscale-D200, #6e6e6e);
--sb-ui-alert-text-color: var(--sb-ui-color-grayscale-L200, #edeef0);
--sb-ui-alert-border-color: var(--sb-ui-color-grayscale-D100, #4a4a4a);
}
.sb-ui-alert--no-bg {
--sb-ui-alert-bg-color: var(--sb-ui-color-grayscale-D200, #6e6e6e);
}
.sb-ui-alert-close:hover {
background-color: var(--sb-ui-color-grayscale-D100, rgba(74, 74, 74, 0.5));
}
}
/* ========================================
ALERT THEME VARIANTS
======================================== */
/* Minimal alert */
.sb-ui-alert--minimal {
--sb-ui-alert-border-width: 0;
--sb-ui-alert-border-left-width: 0;
--sb-ui-alert-shadow: none;
--sb-ui-alert-shadow-toast: none;
}
/* Outlined alert */
.sb-ui-alert--outlined {
--sb-ui-alert-bg-color: transparent;
--sb-ui-alert-bg-color-success: transparent;
--sb-ui-alert-bg-color-info: transparent;
--sb-ui-alert-bg-color-warning: transparent;
--sb-ui-alert-bg-color-error: transparent;
--sb-ui-alert-border-width: 2px;
}
/* Filled alert */
.sb-ui-alert--filled {
--sb-ui-alert-bg-color-success: var(--sb-ui-color-feedback-success-base, #28a745);
--sb-ui-alert-bg-color-info: var(--sb-ui-color-feedback-info-base, #007acc);
--sb-ui-alert-bg-color-warning: var(--sb-ui-color-feedback-warning-base, #ffc107);
--sb-ui-alert-bg-color-error: var(--sb-ui-color-feedback-error-base, #dc3545);
--sb-ui-alert-text-color-success: var(--sb-ui-color-grayscale-white, #ffffff);
--sb-ui-alert-text-color-info: var(--sb-ui-color-grayscale-white, #ffffff);
--sb-ui-alert-text-color-warning: var(--sb-ui-color-grayscale-D300, #404040);
--sb-ui-alert-text-color-error: var(--sb-ui-color-grayscale-white, #ffffff);
--sb-ui-alert-icon-color-success: var(--sb-ui-color-grayscale-white, #ffffff);
--sb-ui-alert-icon-color-info: var(--sb-ui-color-grayscale-white, #ffffff);
--sb-ui-alert-icon-color-warning: var(--sb-ui-color-grayscale-D300, #404040);
--sb-ui-alert-icon-color-error: var(--sb-ui-color-grayscale-white, #ffffff);
--sb-ui-alert-border-color: transparent;
}
/* ========================================
ALERT INTERACTIVE STATES
======================================== */
.sb-ui-alert--dismissible {
cursor: pointer;
}
.sb-ui-alert--dismissible:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.sb-ui-alert--dismissible:active {
transform: translateY(0);
}
/* ========================================
ALERT ACCESSIBILITY ENHANCEMENTS
======================================== */
/* Screen reader only text */
.sb-ui-alert-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;
}
/* Focus trap for keyboard navigation */
.sb-ui-alert:focus-within {
z-index: 1001;
}
/* ========================================
ALERT VALIDATION STYLES
======================================== */
.sb-ui-alert--valid {
/* Success styling for valid alerts */
}
.sb-ui-alert--invalid {
/* Error styling for invalid alerts */
}
/* ========================================
ALERT CUSTOM ICONS
======================================== */
.sb-ui-alert-icon--custom {
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.sb-ui-alert-icon--custom::before {
display: none;
}
/* ========================================
ALERT PROGRESS BAR
======================================== */
.sb-ui-alert-progress {
position: absolute;
bottom: 0;
left: 0;
height: 3px;
background-color: var(--sb-ui-color-primary-base, #007acc);
border-radius: 0 0 var(--sb-ui-alert-border-radius) var(--sb-ui-alert-border-radius);
transition: width linear;
}
.sb-ui-alert-progress--success {
background-color: var(--sb-ui-color-feedback-success-base, #28a745);
}
.sb-ui-alert-progress--info {
background-color: var(--sb-ui-color-feedback-info-base, #007acc);
}
.sb-ui-alert-progress--warning {
background-color: var(--sb-ui-color-feedback-warning-base, #ffc107);
}
.sb-ui-alert-progress--error {
background-color: var(--sb-ui-color-feedback-error-base, #dc3545);
}
@layer reset, tokens, base, states, utilities;
/**
* Breadcrumb Component - Seguros Bolivar UI Design System
* - CSS Nesting nativo con &
* - @layer para control de cascada
* - Logical Properties (RTL/LTR)
* - clamp() para responsive fluido
*
* Uso:
* <nav class="sb-ui-breadcrumb" aria-label="Breadcrumb">
* <ol class="sb-ui-breadcrumb__list">
* <li class="sb-ui-breadcrumb__item">
* <a href="#" class="sb-ui-breadcrumb__link">Home</a>
* </li>
* <li class="sb-ui-breadcrumb__item">
* <a href="#" class="sb-ui-breadcrumb__link">Category</a>
* </li>
* <li class="sb-ui-breadcrumb__item">
* <span class="sb-ui-breadcrumb__current" aria-current="page">Current</span>
* </li>
* </ol>
* </nav>
*/
/* ========================================
RESET LAYER
======================================== */
@layer reset {
.sb-ui-breadcrumb {
all: unset;
box-sizing: border-box;
}
.sb-ui-breadcrumb *,
.sb-ui-breadcrumb *::before,
.sb-ui-breadcrumb *::after {
box-sizing: inherit;
}
}
/* ========================================
TOKENS LAYER - Variables CSS
======================================== */
@layer tokens {
.sb-ui-breadcrumb {
/* Typography */
--sb-ui-breadcrumb-font-family: var(--sb-ui-typography-fontFamily, 'Roboto', sans-serif);
--sb-ui-breadcrumb-font-size: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);
--sb-ui-breadcrumb-font-weight: 400;
--sb-ui-breadcrumb-line-height: 1.5;
/* Colors */
--sb-ui-breadcrumb-link-color: var(--sb-ui-color-primary-base);
--sb-ui-breadcrumb-link-hover: var(--sb-ui-color-primary-D100);
--sb-ui-breadcrumb-link-active: var(--sb-ui-color-primary-D200);
--sb-ui-breadcrumb-current-color: var(--sb-ui-color-grayscale-base, #9b9b9b);
--sb-ui-breadcrumb-separator-color: var(--sb-ui-color-grayscale-base, #9b9b9b);
/* Spacing */
--sb-ui-breadcrumb-gap: clamp(0.5rem, 0.4rem + 0.3vw, 0.75rem);
--sb-ui-breadcrumb-padding-block: clamp(0.5rem, 0.4rem + 0.3vw, 0.75rem);
--sb-ui-breadcrumb-padding-inline: 0;
/* Separator */
--sb-ui-breadcrumb-separator-content: '>';
--sb-ui-breadcrumb-separator-margin-inline: clamp(0.5rem, 0.4rem + 0.3vw, 0.75rem);
/* Transitions */
--sb-ui-breadcrumb-transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
}
/* ========================================
BASE LAYER - Estilos base
======================================== */
@layer base {
/* Container */
.sb-ui-breadcrumb {
display: block;
inline-size: 100%;
padding-block: var(--sb-ui-breadcrumb-padding-block);
padding-inline: var(--sb-ui-breadcrumb-padding-inline);
font-family: var(--sb-ui-breadcrumb-font-family);
font-size: var(--sb-ui-breadcrumb-font-size);
font-weight: var(--sb-ui-breadcrumb-font-weight);
line-height: var(--sb-ui-breadcrumb-line-height);
}
/* List */
.sb-ui-breadcrumb__list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0;
margin: 0;
padding: 0;
list-style: none;
}
/* Item */
.sb-ui-breadcrumb__item {
display: inline-flex;
align-items: center;
margin: 0;
padding: 0;
/* Separator - usando ::after */
}
.sb-ui-breadcrumb__item:not(:last-child)::after {
content: var(--sb-ui-breadcrumb-separator-content);
color: var(--sb-ui-breadcrumb-separator-color);
margin-inline-start: var(--sb-ui-breadcrumb-separator-margin-inline);
margin-inline-end: var(--sb-ui-breadcrumb-separator-margin-inline);
font-weight: 400;
user-select: none;
pointer-events: none;
}
/* Link */
.sb-ui-breadcrumb__link {
color: var(--sb-ui-breadcrumb-link-color);
text-decoration: underline;
text-decoration-color: transparent;
text-underline-offset: 3px;
transition: var(--sb-ui-breadcrumb-transition);
cursor: pointer;
display: inline-block;
}
.sb-ui-breadcrumb__link:hover {
color: var(--sb-ui-breadcrumb-link-hover);
text-decoration-color: currentColor;
}
.sb-ui-breadcrumb__link:active {
color: var(--sb-ui-breadcrumb-link-active);
}
.sb-ui-breadcrumb__link:focus-visible {
outline: 2px solid var(--sb-ui-color-secondary-L100);
outline-offset: 3px;
border-radius: 2px;
}
/* Current page (no link) */
.sb-ui-breadcrumb__current {
color: var(--sb-ui-breadcrumb-current-color);
font-weight: 400;
cursor: default;
display: inline-block;
}
}
/* ========================================
STATES LAYER
======================================== */
@layer states {
/* Collapsed state - mobile */
.sb-ui-breadcrumb--collapsed .sb-ui-breadcrumb__item:not(:first-child):not(:last-child) {
display: none;
}
.sb-ui-breadcrumb--collapsed .sb-ui-breadcrumb__item:first-child::after {
content: '...';
}
/* Loading state */
.sb-ui-breadcrumb--loading {
opacity: 0.6;
pointer-events: none;
}
.sb-ui-breadcrumb--loading .sb-ui-breadcrumb__link {
cursor: wait;
}
}
/* ========================================
UTILITIES LAYER (máxima prioridad)
======================================== */
@layer utilities {
/* High contrast mode support */
@media (prefers-contrast: high) {
.sb-ui-breadcrumb .sb-ui-breadcrumb__link {
text-decoration: underline;
text-decoration-color: currentColor;
}
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
.sb-ui-breadcrumb {
--sb-ui-breadcrumb-transition: none;
}
}
/* Mobile styles - collapse to first and last */
@media (max-width: 640px) {
.sb-ui-breadcrumb {
--sb-ui-breadcrumb-font-size: 0.875rem;
}
/* Auto-collapse on mobile */
.sb-ui-breadcrumb:not(.sb-ui-breadcrumb--no-collapse) .sb-ui-breadcrumb__item:not(:first-child):not(:last-child) {
display: none;
}
.sb-ui-breadcrumb:not(.sb-ui-breadcrumb--no-collapse) .sb-ui-breadcrumb__item:first-child::after {
content: '...';
}
}
}
@layer reset, tokens, base, variants, style-variants, brand-overrides, sizes, modifiers, icon-positions, states, utilities;
/**
* ============================================================================
* Button Component - Seguros Bolivar UI Design System
* ============================================================================
*
* Componente CSS moderno con:
* - CSS Nesting nativo
* - @layer para control de cascada
* - Logical Properties para internacionalización (RTL/LTR)
* - clamp() para responsive fluido
*
* ============================================================================
* 📋 ÍNDICE DE NAVEGACIÓN
* ============================================================================
*
* 1. LAYERS DECLARATION ...................... Línea ~40
* 2. RESET LAYER ............................. Línea ~50
* 3. TOKENS LAYER ............................ Línea ~60
* - Variables CSS base (STROKE default)
* 4. BASE LAYER .............................. Línea ~115
* - Estilos base del componente
* - Estados interactivos (:hover, :active, :focus, :disabled)
* 5. VARIANTS LAYER .......................... Línea ~180
* ├─ PRIMARY ............................. Línea ~185
* ├─ SECONDARY ........................... Línea ~195
* ├─ TERTIARY ............................ Línea ~205
* └─ ERROR ............................... Línea ~215
* 6. STYLE-VARIANTS LAYER .................... Línea ~255
* ├─ STROKE (default) .................... Línea ~265
* ├─ FILL ................................ Línea ~275
* │ ├─ PRIMARY FILL ..................... Línea ~280
* │ ├─ SECONDARY FILL ................... Línea ~295
* │ ├─ TERTIARY FILL .................... Línea ~310
* │ └─ ERROR FILL ....................... Línea ~325
* └─ TEXT ................................ Línea ~385
* ├─ PRIMARY TEXT ..................... Línea ~405
* ├─ SECONDARY TEXT ................... Línea ~410
* ├─ TERTIARY TEXT .................... Línea ~415
* └─ ERROR TEXT ....................... Línea ~420
* 7. SIZES LAYER ............................. Línea ~445
* ├─ SMALL ............................... Línea ~450
* ├─ MEDIUM (default) .................... Línea ~455
* └─ LARGE ............................... Línea ~460
* 8. MODIFIERS LAYER ......................... Línea ~470
* ├─ SQUARE .............................. Línea ~475
* ├─ CIRCLE .............................. Línea ~480
* └─ BLOCK ............................... Línea ~490
* 9. ICON-POSITIONS LAYER .................... Línea ~500
* ├─ ICON-LEFT ........................... Línea ~510
* ├─ ICON-RIGHT .......................... Línea ~525
* └─ ICON-ONLY ........................... Línea ~540
* 10. STATES LAYER ........................... Línea ~555
* └─ LOADING ............................ Línea ~565
* ├─ Loading Left (default) .......... Línea ~575
* ├─ Loading Right ................... Línea ~590
* ├─ Loading Icon Only ............... Línea ~605
* └─ Spinner Colors by Variant ....... Línea ~625
* 11. ANIMATIONS ............................. Línea ~660
* 12. UTILITIES LAYER ........................ Línea ~670
* ├─ High Contrast Mode ................. Línea ~675
* ├─ Reduced Motion ..................... Línea ~685
* ├─ Mobile Responsive .................. Línea ~695
* ├─ Desktop Responsive ................. Línea ~705
* └─ Print Styles ....................... Línea ~715
*
* ============================================================================
* 🎨 VARIANTES DE ESTILO
* ============================================================================
*
* STROKE (default): outline con borde, fondo transparente
* FILL: sólido con fondo de color
* TEXT: sin fondo ni borde, solo texto
*
* ============================================================================
* 🎯 TIPOS DE COLOR
* ============================================================================
*
* primary, secondary, tertiary, error
*
* ============================================================================
* 📱 ESTADOS
* ============================================================================
*
* default, hover, pressed, focus, loading, disabled, disabled-hover
*
* ============================================================================
* 🎭 POSICIONES DE ICONOS
* ============================================================================
*
* no-icon (default), icon-left, icon-right, icon-only
*
* ============================================================================
* 📏 TAMAÑOS
* ============================================================================
*
* small, medium (default), large
*
* ============================================================================
* 💡 EJEMPLOS DE USO
* =================================================================