*
* Variantes:
* - single: SelecciĂłn de un solo dĂa
* - range: SelecciĂłn de rango de fechas (inicio-fin)
* - multiple: SelecciĂłn de mĂșltiples dĂas
*/
/* ========================================
RESET LAYER
======================================== */
@layer reset {
.sb-ui-calendar {
all: unset;
box-sizing: border-box;
}
.sb-ui-calendar * {
box-sizing: border-box;
}
}
/* ========================================
TOKENS LAYER - Variables CSS
======================================== */
@layer tokens {
.sb-ui-calendar {
/* Container */
--sb-ui-calendar-bg: var(--sb-ui-color-grayscale-white, #fff);
--sb-ui-calendar-border-color: var(--sb-ui-color-grayscale-L200, #e0e0e0);
--sb-ui-calendar-border-width: 1px;
--sb-ui-calendar-border-radius: clamp(8px, 0.5rem + 0.5vw, 16px);
--sb-ui-calendar-padding: clamp(1rem, 0.8rem + 1vw, 1.5rem);
--sb-ui-calendar-gap: clamp(0.5rem, 0.4rem + 0.5vw, 1rem);
--sb-ui-calendar-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
--sb-ui-calendar-inline-size: clamp(280px, 90vw, 350px);
/* Header */
--sb-ui-calendar-header-padding-block: clamp(0.5rem, 0.4rem + 0.5vw, 0.875rem);
--sb-ui-calendar-header-gap: clamp(0.5rem, 0.4rem + 0.5vw, 1rem);
/* Month/Year Display */
--sb-ui-calendar-month-font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
--sb-ui-calendar-month-font-weight: 600;
--sb-ui-calendar-month-color: var(--sb-ui-color-grayscale-black, #000);
/* Navigation Buttons */
--sb-ui-calendar-nav-size: clamp(32px, 2rem + 0.5vw, 40px);
--sb-ui-calendar-nav-bg: transparent;
--sb-ui-calendar-nav-bg-hover: var(--sb-ui-color-grayscale-L400, #f5f5f5);
--sb-ui-calendar-nav-bg-active: var(--sb-ui-color-grayscale-L300, #e8e8e8);
--sb-ui-calendar-nav-color: var(--sb-ui-color-grayscale-black, #000);
--sb-ui-calendar-nav-border-radius: clamp(4px, 0.3rem + 0.3vw, 8px);
/* Weekdays */
--sb-ui-calendar-weekday-font-size: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
--sb-ui-calendar-weekday-font-weight: 600;
--sb-ui-calendar-weekday-color: var(--sb-ui-color-grayscale-base, #666);
--sb-ui-calendar-weekday-padding-block: clamp(0.4rem, 0.3rem + 0.3vw, 0.625rem);
/* Days Grid */
--sb-ui-calendar-grid-gap: clamp(2px, 0.1rem + 0.2vw, 4px);
/* Day Cell */
--sb-ui-calendar-day-size: clamp(36px, 2.2rem + 0.5vw, 44px);
--sb-ui-calendar-day-font-size: clamp(0.875rem, 0.8rem + 0.2vw, 1rem);
--sb-ui-calendar-day-font-weight: 400;
--sb-ui-calendar-day-color: var(--sb-ui-color-grayscale-black, #000);
--sb-ui-calendar-day-bg: transparent;
--sb-ui-calendar-day-border-radius: clamp(4px, 0.3rem + 0.3vw, 8px);
/* Day States - Default */
--sb-ui-calendar-day-bg-hover: var(--sb-ui-color-grayscale-L400, #f5f5f5);
--sb-ui-calendar-day-bg-active: var(--sb-ui-color-grayscale-L300, #e8e8e8);
/* Day States - Selected (single/multiple) */
--sb-ui-calendar-day-selected-bg: var(--sb-ui-color-secondary-base, #ffd700);
--sb-ui-calendar-day-selected-bg-hover: var(--sb-ui-color-secondary-D100, #e6c200);
--sb-ui-calendar-day-selected-color: var(--sb-ui-color-grayscale-black, #000);
/* Day States - Range Start/End */
--sb-ui-calendar-day-range-start-bg: var(--sb-ui-color-secondary-base, #ffd700);
--sb-ui-calendar-day-range-end-bg: var(--sb-ui-color-secondary-base, #ffd700);
--sb-ui-calendar-day-range-start-color: var(--sb-ui-color-grayscale-black, #000);
/* Day States - In Range */
--sb-ui-calendar-day-in-range-bg: var(--sb-ui-color-secondary-L400, #fff9e6);
--sb-ui-calendar-day-in-range-color: var(--sb-ui-color-grayscale-black, #000);
/* Day States - Outside Month */
--sb-ui-calendar-day-outside-color: var(--sb-ui-color-grayscale-L100, #ccc);
--sb-ui-calendar-day-outside-bg-hover: transparent;
/* Day States - Disabled */
--sb-ui-calendar-day-disabled-color: var(--sb-ui-color-grayscale-L200, #e0e0e0);
--sb-ui-calendar-day-disabled-bg: transparent;
/* Day States - Today */
--sb-ui-calendar-day-today-border: 2px solid var(--sb-ui-color-primary-base, #038450);
/* Footer */
--sb-ui-calendar-footer-padding-block-start: clamp(0.75rem, 0.6rem + 0.5vw, 1.25rem);
--sb-ui-calendar-footer-gap: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
--sb-ui-calendar-footer-border-block-start: 1px solid var(--sb-ui-color-grayscale-L200, #e0e0e0);
/* Transitions */
--sb-ui-calendar-transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
}
/* ========================================
BASE LAYER - Estilos base
======================================== */
@layer base {
.sb-ui-calendar {
display: inline-block;
position: relative;
inline-size: var(--sb-ui-calendar-inline-size);
background-color: var(--sb-ui-calendar-bg);
border: var(--sb-ui-calendar-border-width) solid var(--sb-ui-calendar-border-color);
border-radius: var(--sb-ui-calendar-border-radius);
padding: var(--sb-ui-calendar-padding);
box-shadow: var(--sb-ui-calendar-shadow);
font-family: var(--sb-ui-typography-fontFamily, 'Roboto', sans-serif);
}
/* Header */
.sb-ui-calendar__header {
display: flex;
align-items: center;
justify-content: space-between;
padding-block-end: var(--sb-ui-calendar-header-padding-block);
margin-block-end: var(--sb-ui-calendar-gap);
gap: var(--sb-ui-calendar-header-gap);
}
.sb-ui-calendar__month-year {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: clamp(0.25rem, 0.2rem + 0.1vw, 0.3rem);
overflow: hidden;
margin-inline: clamp(0.5rem, 0.4rem + 0.3vw, 0.75rem);
}
/* Selectors de mes y año - usando estilos del componente select */
.sb-ui-calendar__month-select,
.sb-ui-calendar__year-select {
flex: 1 1 auto;
min-inline-size: 0;
max-inline-size: 48%;
padding-inline: clamp(0.25rem, 0.2rem + 0.1vw, 0.375rem);
padding-block: clamp(0.2rem, 0.15rem + 0.05vw, 0.25rem);
padding-inline-end: clamp(1rem, 0.9rem + 0.2vw, 1.25rem);
font-size: clamp(0.7rem, 0.65rem + 0.1vw, 0.75rem);
font-weight: 500;
line-height: 1.1;
border-radius: clamp(3px, 0.2rem + 0.1vw, 4px);
background-position: right 0.25rem center;
background-size: 7px;
min-block-size: auto;
border-width: 1px;
}
.sb-ui-calendar__month-select {
flex-grow: 1.5;
}
.sb-ui-calendar__year-select {
flex-grow: 1;
}
/* Navigation Buttons */
.sb-ui-calendar__nav-button {
display: flex;
align-items: center;
justify-content: center;
inline-size: var(--sb-ui-calendar-nav-size);
block-size: var(--sb-ui-calendar-nav-size);
background-color: var(--sb-ui-calendar-nav-bg);
color: var(--sb-ui-calendar-nav-color);
border: none;
border-radius: var(--sb-ui-calendar-nav-border-radius);
cursor: pointer;
transition: var(--sb-ui-calendar-transition);
padding: 0;
}
.sb-ui-calendar__nav-button:hover:not(:disabled) {
background-color: var(--sb-ui-calendar-nav-bg-hover);
}
.sb-ui-calendar__nav-button:active:not(:disabled) {
background-color: var(--sb-ui-calendar-nav-bg-active);
}
.sb-ui-calendar__nav-button:focus-visible {
outline: 3px solid var(--sb-ui-color-secondary-L100);
outline-offset: 2px;
}
.sb-ui-calendar__nav-button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Weekdays */
.sb-ui-calendar__weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: var(--sb-ui-calendar-grid-gap);
margin-block-end: var(--sb-ui-calendar-gap);
}
.sb-ui-calendar__weekday {
display: flex;
align-items: center;
justify-content: center;
padding-block: var(--sb-ui-calendar-weekday-padding-block);
font-size: var(--sb-ui-calendar-weekday-font-size);
font-weight: var(--sb-ui-calendar-weekday-font-weight);
color: var(--sb-ui-calendar-weekday-color);
text-align: center;
}
/* Days Grid */
.sb-ui-calendar__days {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: var(--sb-ui-calendar-grid-gap);
}
/* Day Cell */
.sb-ui-calendar__day {
display: flex;
align-items: center;
justify-content: center;
inline-size: var(--sb-ui-calendar-day-size);
block-size: var(--sb-ui-calendar-day-size);
background-color: var(--sb-ui-calendar-day-bg);
color: var(--sb-ui-calendar-day-color);
font-size: var(--sb-ui-calendar-day-font-size);
font-weight: var(--sb-ui-calendar-day-font-weight);
border: none;
border-radius: var(--sb-ui-calendar-day-border-radius);
cursor: pointer;
transition: var(--sb-ui-calendar-transition);
position: relative;
padding: 0;
}
.sb-ui-calendar__day:hover:not(:disabled):not(.sb-ui-calendar__day--outside):not(.sb-ui-calendar__day--disabled) {
background-color: var(--sb-ui-calendar-day-bg-hover);
}
.sb-ui-calendar__day:active:not(:disabled):not(.sb-ui-calendar__day--outside):not(.sb-ui-calendar__day--disabled) {
background-color: var(--sb-ui-calendar-day-bg-active);
}
.sb-ui-calendar__day:focus-visible {
outline: 3px solid var(--sb-ui-color-secondary-L100);
outline-offset: 2px;
z-index: 1;
}
/* Today indicator */
.sb-ui-calendar__day.sb-ui-calendar__day--today {
border: var(--sb-ui-calendar-day-today-border);
}
/* Selected state */
.sb-ui-calendar__day.sb-ui-calendar__day--selected {
background-color: var(--sb-ui-calendar-day-selected-bg);
color: var(--sb-ui-calendar-day-selected-color);
font-weight: 600;
}
.sb-ui-calendar__day.sb-ui-calendar__day--selected:hover:not(:disabled) {
background-color: var(--sb-ui-calendar-day-selected-bg-hover);
}
/* Range states */
.sb-ui-calendar__day.sb-ui-calendar__day--range-start,.sb-ui-calendar__day.sb-ui-calendar__day--range-end {
background-color: var(--sb-ui-calendar-day-range-start-bg);
color: var(--sb-ui-calendar-day-range-start-color);
font-weight: 600;
}
:is(.sb-ui-calendar__day.sb-ui-calendar__day--range-start,.sb-ui-calendar__day.sb-ui-calendar__day--range-end):hover:not(:disabled) {
background-color: var(--sb-ui-calendar-day-selected-bg-hover);
}
.sb-ui-calendar__day.sb-ui-calendar__day--in-range {
background-color: var(--sb-ui-calendar-day-in-range-bg);
color: var(--sb-ui-calendar-day-in-range-color);
border-radius: 0;
}
/* Outside month */
.sb-ui-calendar__day.sb-ui-calendar__day--outside {
color: var(--sb-ui-calendar-day-outside-color);
cursor: default;
}
.sb-ui-calendar__day.sb-ui-calendar__day--outside:hover {
background-color: var(--sb-ui-calendar-day-outside-bg-hover);
}
/* Disabled state */
.sb-ui-calendar__day:disabled,.sb-ui-calendar__day.sb-ui-calendar__day--disabled {
color: var(--sb-ui-calendar-day-disabled-color);
background-color: var(--sb-ui-calendar-day-disabled-bg);
cursor: not-allowed;
opacity: 0.5;
}
/* Footer */
.sb-ui-calendar__footer {
display: flex;
justify-content: flex-end;
gap: var(--sb-ui-calendar-footer-gap);
padding-block-start: var(--sb-ui-calendar-footer-padding-block-start);
margin-block-start: var(--sb-ui-calendar-gap);
border-block-start: var(--sb-ui-calendar-footer-border-block-start);
}
}
/* ========================================
VARIANTS LAYER
======================================== */
@layer variants {
/* Range variant - conectar dĂas en rango */
.sb-ui-calendar[data-variant='range'] .sb-ui-calendar__day--range-start {
border-start-end-radius: 0;
border-end-end-radius: 0;
}
.sb-ui-calendar[data-variant='range'] .sb-ui-calendar__day--range-end {
border-start-start-radius: 0;
border-end-start-radius: 0;
}
.sb-ui-calendar[data-variant='range'] .sb-ui-calendar__day--in-range:not(.sb-ui-calendar__day--range-start):not(.sb-ui-calendar__day--range-end) {
border-radius: 0;
}
/* Multiple variant - mantener dĂas independientes */
.sb-ui-calendar[data-variant='multiple'] .sb-ui-calendar__day--selected {
border-radius: var(--sb-ui-calendar-day-border-radius);
}
}
/* ========================================
SIZES LAYER
======================================== */
@layer sizes {
.sb-ui-calendar--small {
--sb-ui-calendar-inline-size: clamp(240px, 80vw, 300px);
--sb-ui-calendar-day-size: clamp(28px, 1.8rem + 0.5vw, 36px);
--sb-ui-calendar-month-font-size: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);
}
.sb-ui-calendar--large {
--sb-ui-calendar-inline-size: clamp(320px, 95vw, 400px);
--sb-ui-calendar-day-size: clamp(44px, 2.6rem + 0.5vw, 52px);
--sb-ui-calendar-month-font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
}
}
/* ========================================
MODIFIERS LAYER
======================================== */
@layer modifiers {
/* Double calendar for range selection */
.sb-ui-calendar--double {
display: flex;
gap: var(--sb-ui-calendar-gap);
inline-size: auto;
}
/* No footer */
.sb-ui-calendar--no-footer .sb-ui-calendar__footer {
display: none;
}
/* Inline (sin border ni shadow) */
.sb-ui-calendar--inline {
border: none;
box-shadow: none;
padding: 0;
}
}
/* ========================================
STATES LAYER
======================================== */
@layer states {
.sb-ui-calendar--loading {
pointer-events: none;
opacity: 0.6;
}
.sb-ui-calendar--error {
border-color: var(--sb-ui-color-feedback-error-base);
}
}
/* ========================================
UTILITIES LAYER (mĂĄxima prioridad)
======================================== */
@layer utilities {
/* High contrast mode support */
@media (prefers-contrast: high) {
.sb-ui-calendar {
--sb-ui-calendar-border-width: 2px;
}
.sb-ui-calendar__day--today {
--sb-ui-calendar-day-today-border: 3px solid var(--sb-ui-color-primary-base);
}
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
.sb-ui-calendar,
.sb-ui-calendar__nav-button,
.sb-ui-calendar__day {
--sb-ui-calendar-transition: none;
animation: none;
}
}
/* Mobile optimizations */
@media (max-width: 640px) {
.sb-ui-calendar {
--sb-ui-calendar-inline-size: 100%;
}
.sb-ui-calendar--double {
flex-direction: column;
}
}
}
@layer reset, tokens, base, sizes, modifiers, states, utilities;
/**
* ============================================================================
* Checkbox Component - Seguros Bolivar UI Design System
* ============================================================================
*
* Componente CSS moderno con:
* - CSS Nesting nativo con &
* - @layer para control de cascada
* - Logical Properties para internacionalizaciĂłn (RTL/LTR)
* - Variables CSS themables (multi-marca)
* - Efecto halo en hover/pressed (Material Design inspired)
*
* ============================================================================
* đ ESTRUCTURA HTML
* ============================================================================
*
*
*
*
*
*
*
* ============================================================================
* đš CLASE ĂNICA
* ============================================================================
*
* .sb-ui-checkbox (una sola clase, sin variantes)
*
* ============================================================================
* đ± MATRIZ DE ESTADOS (2Ă2)
* ============================================================================
*
* âââââââââââââââââââŹâââââââââââââââââââŹâââââââââââââââââââ
* â â UNCHECKED â CHECKED â
* âââââââââââââââââââŒâââââââââââââââââââŒâââââââââââââââââââ€
* â ENABLED â State 1 â State 2 â
* â DISABLED â State 3 â State 4 â
* âââââââââââââââââââŽâââââââââââââââââââŽâââââââââââââââââââ
*
* Cada estado tiene: default, hover, active (pressed), focus
*
* PRINCIPIO FUNDAMENTAL: El box SIEMPRE tiene background BLANCO (#FFF)
* cuando estĂĄ UNCHECKED. Los halos de hover/pressed estĂĄn DETRĂS (z-index < 0)
*
* ============================================================================
* đŽ ESTADO ERROR
* ============================================================================
*
* Clase: .sb-ui-checkbox--error
*
* - Border y label en ROJO (feedback visual de validaciĂłn)
* - Background CHECKED en rojo
* - Halos en tonos rojizos (#FFEBEE, #FFCDD2)
* - Usado para indicar validaciĂłn fallida en formularios
*
* ============================================================================
* đ TAMAĂOS
* ============================================================================
*
* small (16px), medium (20px - default), large (24px)
*
* ============================================================================
*/
/* ========================================
RESET LAYER
======================================== */
@layer reset {
.sb-ui-checkbox {
all: unset;
box-sizing: border-box;
}
.sb-ui-checkbox *,.sb-ui-checkbox *::before,.sb-ui-checkbox *::after {
box-sizing: inherit;
}
.sb-ui-checkbox__input {
all: unset;
box-sizing: border-box;
}
.sb-ui-checkbox__box {
all: unset;
box-sizing: border-box;
}
.sb-ui-checkbox__label {
all: unset;
box-sizing: border-box;
}
}
/* ========================================
TOKENS LAYER - Variables CSS
======================================== */
@layer tokens {
.sb-ui-checkbox {
/* ===== ESTRUCTURA - Tamaños fijos (segĂșn spec) ===== */
--sb-ui-checkbox-box-size: 20px; /* Tamaño del cuadro 20x20px */
--sb-ui-checkbox-gap: 8px; /* Space between checkbox y label */
--sb-ui-checkbox-padding: clamp(4px, 0.3rem, 8px); /* Padding interno del container */
/* ===== BOX - Colores del cuadro (UNCHECKED) ===== */
/* STATE 1: UNCHECKED + ENABLED - SIEMPRE BLANCO, SIEMPRE MISMO BORDE */
--sb-ui-checkbox-box-bg: var(--sb-ui-color-grayscale-white, #fff);
--sb-ui-checkbox-box-bg-hover: var(--sb-ui-color-grayscale-white, #fff); /* MISMO COLOR */
--sb-ui-checkbox-box-bg-active: var(--sb-ui-color-grayscale-white, #fff); /* MISMO COLOR */
--sb-ui-checkbox-box-bg-disabled: var(
--sb-ui-color-grayscale-white,
#fff
); /* BLANCO cuando unchecked disabled */
--sb-ui-checkbox-box-bg-disabled-hover: var(--sb-ui-color-grayscale-white, #fff);
--sb-ui-checkbox-box-border: var(--sb-ui-color-primary-base, #009056);
--sb-ui-checkbox-box-border-hover: var(--sb-ui-color-primary-base, #009056); /* MISMO BORDE */
--sb-ui-checkbox-box-border-active: var(--sb-ui-color-primary-base, #009056); /* MISMO BORDE */
--sb-ui-checkbox-box-border-disabled: var(--sb-ui-color-grayscale-base, #9b9b9b);
--sb-ui-checkbox-box-border-disabled-hover: var(--sb-ui-color-grayscale-base, #9b9b9b);
/* ===== HOVER HALO (cĂrculo de fondo) ===== */
--sb-ui-checkbox-hover-halo-bg: var(--sb-ui-color-primary-L400, #f2f9f6);
--sb-ui-checkbox-hover-halo-size: 32px; /* 32x32px segĂșn spec */
--sb-ui-checkbox-hover-halo-opacity: 0.7; /* 70% opacidad */
--sb-ui-checkbox-hover-halo-top: -7px; /* top: -7px segĂșn spec */
--sb-ui-checkbox-hover-halo-left: -7px; /* left: -7px segĂșn spec */
/* ===== PRESSED HALOS (doble cĂrculo concĂ©ntrico) ===== */
/* Halo grande (outer) - mĂĄs claro, se sobrepone */
--sb-ui-checkbox-pressed-halo-outer-bg: var(--sb-ui-color-primary-L400, #f2f9f6);
--sb-ui-checkbox-pressed-halo-outer-size: 32px; /* 32x32px */
--sb-ui-checkbox-pressed-halo-outer-opacity: 0.7; /* 70% opacidad segĂșn spec */
--sb-ui-checkbox-pressed-halo-outer-top: -7px;
--sb-ui-checkbox-pressed-halo-outer-left: -7px;
/* Halo pequeño (inner) - mås oscuro, debajo del outer */
--sb-ui-checkbox-pressed-halo-inner-bg: var(--sb-ui-color-primary-L300, #e5f4ee);
--sb-ui-checkbox-pressed-halo-inner-size: 28px; /* 28x28px */
--sb-ui-checkbox-pressed-halo-inner-opacity: 0.7; /* 70% opacidad segĂșn spec */
--sb-ui-checkbox-pressed-halo-inner-top: -5px;
--sb-ui-checkbox-pressed-halo-inner-left: -5px;
/* ===== BOX - Colores del cuadro (CHECKED) ===== */
/* STATE 2: CHECKED + ENABLED */
--sb-ui-checkbox-box-bg-checked: var(--sb-ui-color-primary-base, #009056);
--sb-ui-checkbox-box-bg-checked-hover: var(
--sb-ui-color-primary-base,
#009056
); /* MISMO COLOR en hover */
--sb-ui-checkbox-box-bg-checked-active: var(
--sb-ui-color-primary-base,
#009056
); /* MISMO COLOR en active */
--sb-ui-checkbox-box-bg-checked-disabled: var(--sb-ui-color-grayscale-base, #9b9b9b);
--sb-ui-checkbox-box-bg-checked-disabled-hover: var(--sb-ui-color-grayscale-base, #9b9b9b);
--sb-ui-checkbox-box-border-checked: var(--sb-ui-color-primary-base, #009056);
--sb-ui-checkbox-box-border-checked-hover: var(
--sb-ui-color-primary-base,
#009056
); /* MISMO COLOR en hover */
--sb-ui-checkbox-box-border-checked-active: var(
--sb-ui-color-primary-base,
#009056
); /* MISMO COLOR en active */
--sb-ui-checkbox-box-border-checked-disabled: var(--sb-ui-color-grayscale-base, #9b9b9b);
--sb-ui-checkbox-box-border-checked-disabled-hover: var(--sb-ui-color-grayscale-base, #9b9b9b);
/* ===== CHECKMARK - Color del check ===== */
--sb-ui-checkbox-check-color: var(--sb-ui-color-grayscale-white, #fff);
--sb-ui-checkbox-check-color-disabled: var(
--sb-ui-color-grayscale-white,
#fff
); /* BLANCO para contraste sobre fondo gris */
/* ===== LABEL - Colores del texto ===== */
--sb-ui-checkbox-label-color: var(--sb-ui-color-grayscale-D100, #757575);
--sb-ui-checkbox-label-color-hover: var(--sb-ui-color-grayscale-D100, #757575);
--sb-ui-checkbox-label-color-active: var(--sb-ui-color-grayscale-D100, #757575);
--sb-ui-checkbox-label-color-disabled: var(--sb-ui-color-grayscale-base, #9b9b9b);
--sb-ui-checkbox-label-color-disabled-hover: var(--sb-ui-color-grayscale-base, #9b9b9b);
/* ===== TIPOGRAFĂA ===== */
--sb-ui-checkbox-font-family:
'Bolivar', var(--sb-ui-typography-fontFamily, 'Roboto', sans-serif);
--sb-ui-checkbox-font-size: 16px; /* Tamaño fijo segĂșn spec */
--sb-ui-checkbox-font-weight: 400; /* Regular */
--sb-ui-checkbox-line-height: 1.4; /* 140% = 22.4px */
--sb-ui-checkbox-letter-spacing: 0px; /* Sin letter spacing */
/* ===== BORDES ===== */
--sb-ui-checkbox-border-width: 1px; /* 1px segĂșn spec */
--sb-ui-checkbox-border-radius: 4px; /* 4px border-radius fijo */
/* ===== TRANSICIONES (sin outline) ===== */
--sb-ui-checkbox-transition:
background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
}
}
/* ========================================
BASE LAYER - Estructura y estilos base
======================================== */
@layer base {
/* ===== CONTAINER ===== */
.sb-ui-checkbox {
/* Layout: label como contenedor flex */
display: inline-flex;
align-items: center;
gap: var(--sb-ui-checkbox-gap);
position: relative;
/* Padding para ĂĄrea de clic amplia */
padding: var(--sb-ui-checkbox-padding);
/* Cursor: pointer en todo el container */
cursor: pointer;
/* Typography para el label */
font-family: var(--sb-ui-checkbox-font-family);
font-size: var(--sb-ui-checkbox-font-size);
font-weight: var(--sb-ui-checkbox-font-weight);
line-height: var(--sb-ui-checkbox-line-height);
color: var(--sb-ui-checkbox-label-color);
/* User select: permitir selecciĂłn de texto */
user-select: none;
/* Transition */
transition: var(--sb-ui-checkbox-transition);
/* PRESSED HALO INNER - cĂrculo interno (solo visible en pressed) */
}
.sb-ui-checkbox::before {
content: '';
position: absolute;
inline-size: var(--sb-ui-checkbox-pressed-halo-inner-size);
block-size: var(--sb-ui-checkbox-pressed-halo-inner-size);
background-color: var(--sb-ui-checkbox-pressed-halo-inner-bg);
border-radius: 50%;
opacity: 0; /* Invisible por defecto */
transform: scale(0.8);
transition:
opacity 0.2s ease,
transform 0.2s ease;
z-index: -1; /* MĂS ATRĂS que el halo outer (z-index: 0) */
inset-block-start: calc(
var(--sb-ui-checkbox-padding) + var(--sb-ui-checkbox-pressed-halo-inner-top)
);
inset-inline-start: calc(
var(--sb-ui-checkbox-padding) + var(--sb-ui-checkbox-pressed-halo-inner-left)
);
pointer-events: none;
}
/* ===== INPUT NATIVO (oculto visualmente, accesible) ===== */
.sb-ui-checkbox__input {
/* Position: absolute para ocultarlo pero mantener accesibilidad */
position: absolute;
inline-size: 1px;
block-size: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* ===== CHECKBOX BOX (visual custom) ===== */
.sb-ui-checkbox__box {
/* Layout */
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0; /* No shrink para mantener tamaño */
position: relative; /* Para posicionar el halo */
isolation: isolate; /* Crea nuevo stacking context para z-index */
/* Tamaño fijo */
inline-size: var(--sb-ui-checkbox-box-size);
block-size: var(--sb-ui-checkbox-box-size);
/* Appearance - SIEMPRE BLANCO en unchecked */
background-color: var(--sb-ui-checkbox-box-bg);
border: var(--sb-ui-checkbox-border-width) solid var(--sb-ui-checkbox-box-border);
border-radius: var(--sb-ui-checkbox-border-radius);
/* Transition */
transition: var(--sb-ui-checkbox-transition);
/* HOVER HALO - cĂrculo de fondo detrĂĄs del checkbox */
}
.sb-ui-checkbox__box::before {
content: '';
position: absolute;
inline-size: var(--sb-ui-checkbox-hover-halo-size);
block-size: var(--sb-ui-checkbox-hover-halo-size);
background-color: var(--sb-ui-checkbox-hover-halo-bg);
border-radius: 50%; /* CĂrculo perfecto */
opacity: 0; /* Invisible por defecto */
transform: scale(0.8); /* Pequeño por defecto */
transition:
opacity 0.2s ease,
transform 0.2s ease;
z-index: -1; /* DETRĂS del checkbox box (usa isolation: isolate) */
inset-block-start: var(--sb-ui-checkbox-hover-halo-top); /* top: -7px */
inset-inline-start: var(--sb-ui-checkbox-hover-halo-left); /* left: -7px */
pointer-events: none; /* No interfiere con clicks */
}
/* Checkmark (oculto por default) */
.sb-ui-checkbox__box::after {
content: '';
display: block;
inline-size: 10px;
block-size: 6px;
border-inline-start: 2px solid transparent;
border-block-end: 2px solid transparent;
transform: rotate(-45deg) translateY(-1px);
opacity: 0;
transition: opacity 0.15s ease;
z-index: 1; /* Arriba del checkbox box (dentro del isolation context) */
position: relative; /* Para que z-index funcione */
}
/* ===== LABEL TEXT ===== */
.sb-ui-checkbox__label {
/* Display: inline para permitir wrap */
display: inline;
color: inherit;
transition: color 0.2s ease;
}
/* ========================================
ESTADOS INTERACTIVOS (UNCHECKED)
======================================== */
/* HOVER */
.sb-ui-checkbox:hover:not(:has(.sb-ui-checkbox__input:disabled)) .sb-ui-checkbox__box {
background-color: var(--sb-ui-checkbox-box-bg-hover);
border-color: var(--sb-ui-checkbox-box-border-hover);
/* Activar el halo en hover */
}
:is(.sb-ui-checkbox:hover:not(:has(.sb-ui-checkbox__input:disabled)) .sb-ui-checkbox__box)::before {
opacity: var(--sb-ui-checkbox-hover-halo-opacity);
transform: scale(1);
}
.sb-ui-checkbox:hover:not(:has(.sb-ui-checkbox__input:disabled)) .sb-ui-checkbox__label {
color: var(--sb-ui-checkbox-label-color-hover);
}
/* PRESSED (active) - DOBLE HALO */
/* Activar HALO INNER (cĂrculo pequeño) */
.sb-ui-checkbox:active:not(:has(.sb-ui-checkbox__input:disabled))::before {
opacity: var(--sb-ui-checkbox-pressed-halo-inner-opacity);
transform: scale(1);
}
.sb-ui-checkbox:active:not(:has(.sb-ui-checkbox__input:disabled)) .sb-ui-checkbox__box {
background-color: var(--sb-ui-checkbox-box-bg-active); /* BLANCO siempre */
border-color: var(--sb-ui-checkbox-box-border-active);
transform: scale(0.95);
/* Activar HALO OUTER (cĂrculo grande) */
}
:is(.sb-ui-checkbox:active:not(:has(.sb-ui-checkbox__input:disabled)) .sb-ui-checkbox__box)::before {
opacity: var(--sb-ui-checkbox-pressed-halo-outer-opacity);
transform: scale(1);
inline-size: var(--sb-ui-checkbox-pressed-halo-outer-size);
block-size: var(--sb-ui-checkbox-pressed-halo-outer-size);
background-color: var(--sb-ui-checkbox-pressed-halo-outer-bg);
inset-block-start: var(--sb-ui-checkbox-pressed-halo-outer-top);
inset-inline-start: var(--sb-ui-checkbox-pressed-halo-outer-left);
}
.sb-ui-checkbox:active:not(:has(.sb-ui-checkbox__input:disabled)) .sb-ui-checkbox__label {
color: var(--sb-ui-checkbox-label-color-active);
}
/* FOCUS VISIBLE - Con halo como en hover */
/* Halo de focus - mismo efecto que hover pero con color L300 */
:is(.sb-ui-checkbox:has(.sb-ui-checkbox__input:focus-visible) .sb-ui-checkbox__box)::before {
background-color: var(--sb-ui-color-primary-L300, #e5f4ee);
opacity: 0.7;
transform: scale(1);
inline-size: 32px;
block-size: 32px;
inset-block-start: -7px;
inset-inline-start: -7px;
}
/* ========================================
ESTADOS CHECKED
======================================== */
/* CHECKED - Default */
.sb-ui-checkbox:has(.sb-ui-checkbox__input:checked) .sb-ui-checkbox__box {
background-color: var(--sb-ui-checkbox-box-bg-checked);
border-color: var(--sb-ui-checkbox-box-border-checked);
}
:is(.sb-ui-checkbox:has(.sb-ui-checkbox__input:checked) .sb-ui-checkbox__box)::after {
border-inline-start-color: var(--sb-ui-checkbox-check-color);
border-block-end-color: var(--sb-ui-checkbox-check-color);
opacity: 1;
}
/* CHECKED + HOVER */
.sb-ui-checkbox:hover:has(.sb-ui-checkbox__input:checked:not(:disabled)) .sb-ui-checkbox__box {
background-color: var(--sb-ui-checkbox-box-bg-checked-hover);
border-color: var(--sb-ui-checkbox-box-border-checked-hover);
/* Activar el halo también en checked + hover */
}
:is(.sb-ui-checkbox:hover:has(.sb-ui-checkbox__input:checked:not(:disabled)) .sb-ui-checkbox__box)::before {
opacity: var(--sb-ui-checkbox-hover-halo-opacity);
transform: scale(1);
}
/* CHECKED + PRESSED */
/* Activar HALO INNER (cĂrculo pequeño) */
.sb-ui-checkbox:active:has(.sb-ui-checkbox__input:checked:not(:disabled))::before {
opacity: var(--sb-ui-checkbox-pressed-halo-inner-opacity);
transform: scale(1);
}
.sb-ui-checkbox:active:has(.sb-ui-checkbox__input:checked:not(:disabled)) .sb-ui-checkbox__box {
background-color: var(--sb-ui-checkbox-box-bg-checked-active);
border-color: var(--sb-ui-checkbox-box-border-checked-active);
transform: scale(0.95);
/* Activar HALO OUTER (cĂrculo grande) */
}
:is(.sb-ui-checkbox:active:has(.sb-ui-checkbox__input:checked:not(:disabled)) .sb-ui-checkbox__box)::before {
opacity: var(--sb-ui-checkbox-pressed-halo-outer-opacity);
transform: scale(1);
inline-size: var(--sb-ui-checkbox-pressed-halo-outer-size);
block-size: var(--sb-ui-checkbox-pressed-halo-outer-size);
background-color: var(--sb-ui-checkbox-pressed-halo-outer-bg);
inset-block-start: var(--sb-ui-checkbox-pressed-halo-outer-top);
inset-inline-start: var(--sb-ui-checkbox-pressed-halo-outer-left);
}
/* ========================================
ESTADOS DISABLED
======================================== */
/* DISABLED - Unchecked */
.sb-ui-checkbox:has(.sb-ui-checkbox__input:disabled) {
cursor: not-allowed;
}
.sb-ui-checkbox:has(.sb-ui-checkbox__input:disabled) .sb-ui-checkbox__box {
background-color: var(--sb-ui-checkbox-box-bg-disabled);
border-color: var(--sb-ui-checkbox-box-border-disabled);
/* Desactivar TODOS los halos cuando estĂĄ disabled */
}
:is(.sb-ui-checkbox:has(.sb-ui-checkbox__input:disabled) .sb-ui-checkbox__box)::before {
opacity: 0 !important;
transform: scale(0.8) !important;
}
.sb-ui-checkbox:has(.sb-ui-checkbox__input:disabled) .sb-ui-checkbox__label {
color: var(--sb-ui-checkbox-label-color-disabled);
}
/* Desactivar halo inner (pressed) cuando estĂĄ disabled */
.sb-ui-checkbox:has(.sb-ui-checkbox__input:disabled)::before {
opacity: 0 !important;
transform: scale(0.8) !important;
}
/* DISABLED + HOVER - Unchecked (sin cambios visuales) */
.sb-ui-checkbox:hover:has(.sb-ui-checkbox__input:disabled) .sb-ui-checkbox__box {
background-color: var(
--sb-ui-checkbox-box-bg-disabled-hover,
var(--sb-ui-checkbox-box-bg-disabled)
);
border-color: var(
--sb-ui-checkbox-box-border-disabled-hover,
var(--sb-ui-checkbox-box-border-disabled)
);
/* Asegurar que NO aparezca halo en hover disabled */
}
:is(.sb-ui-checkbox:hover:has(.sb-ui-checkbox__input:disabled) .sb-ui-checkbox__box)::before {
opacity: 0 !important;
transform: scale(0.8) !important;
}
.sb-ui-checkbox:hover:has(.sb-ui-checkbox__input:disabled) .sb-ui-checkbox__label {
color: var(
--sb-ui-checkbox-label-color-disabled-hover,
var(--sb-ui-checkbox-label-color-disabled)
);
}
/* DISABLED + PRESSED - Sin halos */
/* Desactivar halo inner */
.sb-ui-checkbox:active:has(.sb-ui-checkbox__input:disabled)::before {
opacity: 0 !important;
}
/* Desactivar halo outer */
:is(.sb-ui-checkbox:active:has(.sb-ui-checkbox__input:disabled) .sb-ui-checkbox__box)::before {
opacity: 0 !important;
}
/* DISABLED + CHECKED */
.sb-ui-checkbox:has(.sb-ui-checkbox__input:checked:disabled) {
cursor: not-allowed;
}
.sb-ui-checkbox:has(.sb-ui-checkbox__input:checked:disabled) .sb-ui-checkbox__box {
background-color: var(--sb-ui-checkbox-box-bg-checked-disabled);
border-color: var(--sb-ui-checkbox-box-border-checked-disabled);
}
:is(.sb-ui-checkbox:has(.sb-ui-checkbox__input:checked:disabled) .sb-ui-checkbox__box)::after {
border-inline-start-color: var(--sb-ui-checkbox-check-color-disabled);
border-block-end-color: var(--sb-ui-checkbox-check-color-disabled);
opacity: 1;
}
/* Desactivar halos cuando estĂĄ checked + disabled */
:is(.sb-ui-checkbox:has(.sb-ui-checkbox__input:checked:disabled) .sb-ui-checkbox__box)::before {
opacity: 0 !important;
transform: scale(0.8) !important;
}
.sb-ui-checkbox:has(.sb-ui-checkbox__input:checked:disabled) .sb-ui-checkbox__label {
color: var(--sb-ui-checkbox-label-color-disabled);
}
/* Desactivar halo inner cuando estĂĄ checked + disabled */
.sb-ui-checkbox:has(.sb-ui-checkbox__input:checked:disabled)::before {
opacity: 0 !important;
transform: scale(0.8) !important;
}
/* DISABLED + CHECKED + HOVER (sin halos) */
.sb-ui-checkbox:hover:has(.sb-ui-checkbox__input:checked:disabled) .sb-ui-checkbox__box {
background-color: var(
--sb-ui-checkbox-box-bg-checked-disabled-hover,
var(--sb-ui-checkbox-box-bg-checked-disabled)
);
border-color: var(
--sb-ui-checkbox-box-border-checked-disabled-hover,
var(--sb-ui-checkbox-box-border-checked-disabled)
);
/* NO halos en hover cuando estĂĄ disabled */
}
:is(.sb-ui-checkbox:hover:has(.sb-ui-checkbox__input:checked:disabled) .sb-ui-checkbox__box)::before {
opacity: 0 !important;
transform: scale(0.8) !important;
}
.sb-ui-checkbox:hover:has(.sb-ui-checkbox__input:checked:disabled) .sb-ui-checkbox__label {
color: var(
--sb-ui-checkbox-label-color-disabled-hover,
var(--sb-ui-checkbox-label-color-disabled)
);
}
/* DISABLED + CHECKED + PRESSED (sin halos) */
/* Desactivar halo inner */
.sb-ui-checkbox:active:has(.sb-ui-checkbox__input:checked:disabled)::before {
opacity: 0 !important;
}
/* Desactivar halo outer */
:is(.sb-ui-checkbox:active:has(.sb-ui-checkbox__input:checked:disabled) .sb-ui-checkbox__box)::before {
opacity: 0 !important;
}
/* DISABLED FOCUS - sin outline ni halo */
:is(.sb-ui-checkbox:has(.sb-ui-checkbox__input:disabled:focus),.sb-ui-checkbox:has(.sb-ui-checkbox__input:disabled:focus-visible)) .sb-ui-checkbox__box {
outline: none;
/* NO halo de focus cuando estĂĄ disabled */
}
:is(:is(.sb-ui-checkbox:has(.sb-ui-checkbox__input:disabled:focus),.sb-ui-checkbox:has(.sb-ui-checkbox__input:disabled:focus-visible)) .sb-ui-checkbox__box)::before {
opacity: 0 !important;
transform: scale(0.8) !important;
}
/* ========================================
INDETERMINATE STATE (opcional)
======================================== */
.sb-ui-checkbox:has(.sb-ui-checkbox__input:indeterminate) .sb-ui-checkbox__box {
background-color: var(--sb-ui-checkbox-box-bg-checked);
border-color: var(--sb-ui-checkbox-box-border-checked);
/* LĂnea horizontal en lugar de check */
}
:is(.sb-ui-checkbox:has(.sb-ui-checkbox__input:indeterminate) .sb-ui-checkbox__box)::after {
inline-size: 10px;
block-size: 0;
border-inline-start: 0;
border-block-end: 2px solid var(--sb-ui-checkbox-check-color);
transform: none;
opacity: 1;
}
}
/* ========================================
SIZES LAYER
======================================== */
@layer sizes {
/* SMALL */
.sb-ui-checkbox--small {
--sb-ui-checkbox-box-size: 16px;
--sb-ui-checkbox-gap: 6px;
--sb-ui-checkbox-font-size: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
--sb-ui-checkbox-padding: clamp(2px, 0.2rem, 4px);
}
.sb-ui-checkbox--small .sb-ui-checkbox__box::after {
inline-size: 8px;
block-size: 5px;
}
/* MEDIUM (default - ya definido en tokens) */
.sb-ui-checkbox--medium {
/* Usa los tamaños por defecto */
}
/* LARGE */
.sb-ui-checkbox--large {
--sb-ui-checkbox-box-size: 24px;
--sb-ui-checkbox-gap: 12px;
--sb-ui-checkbox-font-size: clamp(1rem, 0.9rem + 0.4vw, 1.125rem);
--sb-ui-checkbox-padding: clamp(6px, 0.4rem, 12px);
}
.sb-ui-checkbox--large .sb-ui-checkbox__box::after {
inline-size: 12px;
block-size: 7px;
}
}
/* ========================================
MODIFIERS LAYER
======================================== */
@layer modifiers {
/* Sin label (solo checkbox) */
.sb-ui-checkbox--no-label {
gap: 0;
padding: var(--sb-ui-checkbox-padding);
}
.sb-ui-checkbox--no-label .sb-ui-checkbox__label {
display: none;
}
/* Block layout (ocupa todo el ancho) */
.sb-ui-checkbox--block {
display: flex;
inline-size: 100%;
}
/* AlineaciĂłn: label arriba (para textos largos) */
.sb-ui-checkbox--vertical {
flex-direction: column;
align-items: flex-start;
}
}
/* ========================================
STATES LAYER
======================================== */
@layer states {
/* ========================================
ERROR STATE - ValidaciĂłn de formularios
======================================== */
.sb-ui-checkbox--error {
/* ===== UNCHECKED STATES ===== */
/* Background - SIEMPRE BLANCO en unchecked (incluso disabled) */
--sb-ui-checkbox-box-bg: var(--sb-ui-color-grayscale-white, #fff);
--sb-ui-checkbox-box-bg-hover: var(--sb-ui-color-grayscale-white, #fff);
--sb-ui-checkbox-box-bg-active: var(--sb-ui-color-grayscale-white, #fff);
--sb-ui-checkbox-box-bg-disabled: var(
--sb-ui-color-grayscale-white,
#fff
); /* BLANCO cuando unchecked disabled */
--sb-ui-checkbox-box-bg-disabled-hover: var(--sb-ui-color-grayscale-white, #fff);
/* Hover Halo - color error */
--sb-ui-checkbox-hover-halo-bg: var(--sb-ui-color-feedback-error-L400, #fbebec);
--sb-ui-checkbox-pressed-halo-outer-bg: var(--sb-ui-color-feedback-error-L400, #fbebec);
--sb-ui-checkbox-pressed-halo-inner-bg: var(--sb-ui-color-feedback-error-L300, #f5c2c7);
/* Border - Error base color */
--sb-ui-checkbox-box-border: var(--sb-ui-color-feedback-error-base, #dc3545);
--sb-ui-checkbox-box-border-hover: var(--sb-ui-color-feedback-error-base, #dc3545);
--sb-ui-checkbox-box-border-active: var(--sb-ui-color-feedback-error-base, #dc3545);
--sb-ui-checkbox-box-border-disabled: var(--sb-ui-color-grayscale-base, #9b9b9b);
--sb-ui-checkbox-box-border-disabled-hover: var(--sb-ui-color-grayscale-base, #9b9b9b);
/* ===== CHECKED STATES ===== */
/* Background - ROJO cuando estĂĄ checked */
--sb-ui-checkbox-box-bg-checked: var(--sb-ui-color-feedback-error-base, #dc3545);
--sb-ui-checkbox-box-bg-checked-hover: var(--sb-ui-color-feedback-error-base, #dc3545);
--sb-ui-checkbox-box-bg-checked-active: var(--sb-ui-color-feedback-error-base, #dc3545);
--sb-ui-checkbox-box-bg-checked-disabled: var(--sb-ui-color-grayscale-base, #9b9b9b);
--sb-ui-checkbox-box-bg-checked-disabled-hover: var(--sb-ui-color-grayscale-base, #9b9b9b);
/* Border */
--sb-ui-checkbox-box-border-checked: var(--sb-ui-color-feedback-error-base, #dc3545);
--sb-ui-checkbox-box-border-checked-hover: var(--sb-ui-color-feedback-error-base, #dc3545);
--sb-ui-checkbox-box-border-checked-active: var(--sb-ui-color-feedback-error-base, #dc3545);
--sb-ui-checkbox-box-border-checked-disabled: var(--sb-ui-color-grayscale-base, #9b9b9b);
--sb-ui-checkbox-box-border-checked-disabled-hover: var(--sb-ui-color-grayscale-base, #9b9b9b);
/* ===== CHECKMARK ===== */
--sb-ui-checkbox-check-color: var(--sb-ui-color-grayscale-white, #fff);
--sb-ui-checkbox-check-color-disabled: var(
--sb-ui-color-grayscale-white,
#fff
); /* BLANCO para contraste sobre fondo gris */
/* ===== LABEL - Mantiene color normal (NO rojo) ===== */
--sb-ui-checkbox-label-color: var(
--sb-ui-color-grayscale-D100,
#757575
); /* Gris normal, NO rojo */
--sb-ui-checkbox-label-color-hover: var(--sb-ui-color-grayscale-D100, #757575);
--sb-ui-checkbox-label-color-active: var(--sb-ui-color-grayscale-D100, #757575);
--sb-ui-checkbox-label-color-disabled: var(--sb-ui-color-grayscale-base, #9b9b9b);
--sb-ui-checkbox-label-color-disabled-hover: var(--sb-ui-color-grayscale-base, #9b9b9b);
}
/* ========================================
LOADING STATE (opcional - async operations)
======================================== */
.sb-ui-checkbox--loading {
pointer-events: none;
}
.sb-ui-checkbox--loading .sb-ui-checkbox__box {
opacity: 0.6;
animation: sb-ui-checkbox-pulse 1.5s ease-in-out infinite;
}
/* ========================================
READONLY STATE (visual feedback only)
======================================== */
.sb-ui-checkbox--readonly {
pointer-events: none;
opacity: 0.8;
}
}
/* ========================================
UTILITIES LAYER
======================================== */
@layer utilities {
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.sb-ui-checkbox,
.sb-ui-checkbox__box,
.sb-ui-checkbox__box::after,
.sb-ui-checkbox__label {
transition: none;
animation: none;
}
}
/* High contrast mode */
@media (prefers-contrast: high) {
.sb-ui-checkbox__box {
--sb-ui-checkbox-border-width: 3px;
}
.sb-ui-checkbox:has(.sb-ui-checkbox__input:focus-visible) .sb-ui-checkbox__box {
outline-width: 4px;
}
}
/* Dark mode (opcional - si no usas tokens dinĂĄmicos) */
@media (prefers-color-scheme: dark) {
.sb-ui-checkbox {
/* Los tokens se manejan por el theme manager */
}
}
}
/* ========================================
ANIMACIONES (fuera de @layer)
======================================== */
@keyframes sb-ui-checkbox-pulse {
0%,
100% {
opacity: 0.6;
}
50% {
opacity: 0.3;
}
}
@layer reset, tokens, base, variants, sizes, modifiers, states, utilities;
/**
* DatePicker Component - Seguros Bolivar UI Design System
* Input field + Calendar dropdown
* - CSS Nesting nativo con &
* - @layer para control de cascada
* - Logical Properties (RTL/LTR)
* - clamp() para responsive fluido
*
* Uso:
*
*/
/* ========================================
RESET LAYER
======================================== */
@layer reset {
/* El datepicker es solo un contenedor, NO resetea sus hijos */
/* Los componentes hijos (sb-ui-input, sb-ui-calendar) mantienen sus propios estilos */
}
/* ========================================
TOKENS LAYER - Variables CSS
======================================== */
@layer tokens {
.sb-ui-datepicker {
/* Container */
--sb-ui-datepicker-inline-size: clamp(200px, 100%, 300px);
/* Trigger button (calendar icon) */
--sb-ui-datepicker-trigger-size: clamp(36px, 2.2rem + 0.5vw, 44px);
--sb-ui-datepicker-trigger-bg: transparent;
--sb-ui-datepicker-trigger-bg-hover: var(--sb-ui-color-grayscale-L400, #f5f5f5);
--sb-ui-datepicker-trigger-bg-active: var(--sb-ui-color-grayscale-L300, #e8e8e8);
--sb-ui-datepicker-trigger-color: var(--sb-ui-color-grayscale-base, #666);
--sb-ui-datepicker-trigger-color-hover: var(--sb-ui-color-primary-base, #038450);
/* Dropdown */
--sb-ui-datepicker-dropdown-bg: var(--sb-ui-color-grayscale-white, #fff);
--sb-ui-datepicker-dropdown-border-color: var(--sb-ui-color-grayscale-L200, #e0e0e0);
--sb-ui-datepicker-dropdown-border-width: 1px;
--sb-ui-datepicker-dropdown-border-radius: clamp(8px, 0.5rem + 0.5vw, 12px);
--sb-ui-datepicker-dropdown-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
--sb-ui-datepicker-dropdown-margin-block-start: clamp(0.25rem, 0.2rem + 0.3vw, 0.5rem);
/* Transitions */
--sb-ui-datepicker-transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
}
/* ========================================
BASE LAYER - Estilos base
======================================== */
@layer base {
.sb-ui-datepicker {
display: inline-block;
position: relative;
inline-size: var(--sb-ui-datepicker-inline-size);
font-family: var(--sb-ui-datepicker-input-font-family);
}
/* Input wrapper */
.sb-ui-datepicker__wrapper {
display: flex;
position: relative;
align-items: stretch;
/* El input hijo (.sb-ui-input) hereda todo del componente input ĂĄtomo */
/* Solo ajustamos el padding para el Ăcono */
}
.sb-ui-datepicker__wrapper .sb-ui-input {
flex: 1;
inline-size: 100%;
padding-inline-end: calc(var(--sb-ui-datepicker-trigger-size) + 0.5rem) !important;
cursor: pointer;
}
/* Trigger button */
.sb-ui-datepicker__trigger {
position: absolute;
inset-inline-end: 0;
inset-block-start: 0;
block-size: 100%;
display: flex;
align-items: center;
justify-content: center;
inline-size: var(--sb-ui-datepicker-trigger-size);
background-color: var(--sb-ui-datepicker-trigger-bg);
color: var(--sb-ui-datepicker-trigger-color);
border: none;
border-start-end-radius: var(--sb-ui-input-border-radius, 6px);
border-end-end-radius: var(--sb-ui-input-border-radius, 6px);
cursor: pointer;
transition: var(--sb-ui-datepicker-transition);
font-size: 1.25rem;
}
.sb-ui-datepicker__trigger:hover:not(:disabled) {
background-color: var(--sb-ui-datepicker-trigger-bg-hover);
color: var(--sb-ui-datepicker-trigger-color-hover);
}
.sb-ui-datepicker__trigger:active:not(:disabled) {
background-color: var(--sb-ui-datepicker-trigger-bg-active);
}
.sb-ui-datepicker__trigger:focus-visible {
outline: 3px solid var(--sb-ui-color-secondary-L100);
outline-offset: -3px;
z-index: 1;
}
.sb-ui-datepicker__trigger:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Icon */
.sb-ui-datepicker__icon {
display: block;
inline-size: 20px;
block-size: 20px;
fill: currentColor;
}
/* Dropdown */
.sb-ui-datepicker__dropdown {
position: absolute;
inset-block-start: 100%;
inset-inline-start: 0;
z-index: 1000;
margin-block-start: var(--sb-ui-datepicker-dropdown-margin-block-start);
background-color: var(--sb-ui-datepicker-dropdown-bg);
border: var(--sb-ui-datepicker-dropdown-border-width) solid var(--sb-ui-datepicker-dropdown-border-color);
border-radius: var(--sb-ui-datepicker-dropdown-border-radius);
box-shadow: var(--sb-ui-datepicker-dropdown-shadow);
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0.2s;
/* Calendar inside dropdown has no border/shadow */
}
.sb-ui-datepicker__dropdown .sb-ui-calendar {
border: none;
box-shadow: none;
inline-size: auto;
}
/* Dropdown open state */
.sb-ui-datepicker--open .sb-ui-datepicker__dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition: opacity 0.2s ease, transform 0.2s ease;
}
}
/* ========================================
VARIANTS LAYER
======================================== */
@layer variants {
/* Error state - delegates to sb-ui-input */
}
/* ========================================
SIZES LAYER
======================================== */
@layer sizes {
.sb-ui-datepicker--small {
--sb-ui-datepicker-input-font-size: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
--sb-ui-datepicker-input-padding-inline: clamp(0.5rem, 0.4rem + 0.3vw, 0.75rem);
--sb-ui-datepicker-input-padding-block: clamp(0.375rem, 0.3rem + 0.2vw, 0.5rem);
--sb-ui-datepicker-trigger-size: clamp(28px, 1.8rem + 0.5vw, 36px);
}
.sb-ui-datepicker--large {
--sb-ui-datepicker-input-font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
--sb-ui-datepicker-input-padding-inline: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
--sb-ui-datepicker-input-padding-block: clamp(0.75rem, 0.6rem + 0.5vw, 1rem);
--sb-ui-datepicker-trigger-size: clamp(44px, 2.6rem + 0.5vw, 52px);
}
}
/* ========================================
MODIFIERS LAYER
======================================== */
@layer modifiers {
.sb-ui-datepicker--block {
inline-size: 100%;
}
.sb-ui-datepicker--with-label {
display: flex;
flex-direction: column;
gap: clamp(0.25rem, 0.2rem + 0.3vw, 0.5rem);
}
}
/* ========================================
STATES LAYER
======================================== */
@layer states {
.sb-ui-datepicker--disabled {
pointer-events: none;
opacity: 0.6;
}
.sb-ui-datepicker--loading {
pointer-events: none;
}
.sb-ui-datepicker--loading .sb-ui-datepicker__trigger::after {
content: '';
display: block;
inline-size: 16px;
block-size: 16px;
border: 2px solid currentColor;
border-block-start-color: transparent;
border-radius: 50%;
animation: sb-ui-datepicker-spin 0.6s linear infinite;
}
.sb-ui-datepicker--loading .sb-ui-datepicker__icon {
display: none;
}
}
/* ========================================
UTILITIES LAYER (mĂĄxima prioridad)
======================================== */
@layer utilities {
/* High contrast mode support - el input hereda de sb-ui-input */
@media (prefers-contrast: high) {
.sb-ui-datepicker__wrapper .sb-ui-input {
border-width: 2px;
}
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
.sb-ui-datepicker,
.sb-ui-datepicker__wrapper .sb-ui-input,
.sb-ui-datepicker__trigger,
.sb-ui-datepicker__dropdown {
--sb-ui-datepicker-transition: none;
animation: none;
transition: none;
}
}
}
/* ========================================
ANIMATIONS
======================================== */
@keyframes sb-ui-datepicker-spin {
to {
transform: rotate(360deg);
}
}
@layer reset, tokens, base, variants, states, utilities;
/**
* File Upload Component - Seguros Bolivar UI Design System
* - CSS Nesting nativo con &
* - @layer para control de cascada
* - Logical Properties (RTL/LTR)
* - clamp() para responsive fluido
*
* Uso:
*
*
*
*
* [Zona drag & drop]
*
*
Texto de ayuda
*
*
* [Item de archivo subido]
*
*
*
*
* Estados: uploading, uploaded, success, error
*/
/* ========================================
RESET LAYER
======================================== */
@layer reset {
.sb-ui-file-upload-wrapper,
.sb-ui-file-upload-container,
.sb-ui-file-upload-dropzone,
.sb-ui-file-upload {
all: unset;
box-sizing: border-box;
}
.sb-ui-file-upload-wrapper *,
.sb-ui-file-upload-container *,
.sb-ui-file-upload-dropzone *,
.sb-ui-file-upload *,
.sb-ui-file-upload *::before,
.sb-ui-file-upload *::after {
box-sizing: border-box;
}
}
/* ========================================
TOKENS LAYER - Variables CSS
======================================== */
@layer tokens {
/* Wrapper */
.sb-ui-file-upload-wrapper {
--sb-ui-file-upload-wrapper-gap: clamp(0.5rem, 0.3rem + 0.5vw, 0.75rem);
}
/* Label */
.sb-ui-file-upload__label {
--sb-ui-file-upload-label-color: var(--sb-ui-color-grayscale-black);
--sb-ui-file-upload-label-font-size: clamp(0.875rem, 0.8rem + 0.2vw, 1rem);
--sb-ui-file-upload-label-font-weight: 400;
--sb-ui-file-upload-label-margin-block-end: 0.5rem;
}
/* Container */
.sb-ui-file-upload-container {
--sb-ui-file-upload-container-bg: transparent;
--sb-ui-file-upload-container-padding: 0;
--sb-ui-file-upload-container-border-radius: 0;
--sb-ui-file-upload-container-gap: 1rem;
}
/* Dropzone */
.sb-ui-file-upload-dropzone {
--sb-ui-file-upload-dropzone-bg: var(--sb-ui-color-grayscale-white);
--sb-ui-file-upload-dropzone-border-color: var(--sb-ui-color-grayscale-base, #9b9b9b);
--sb-ui-file-upload-dropzone-border-width: 1px;
--sb-ui-file-upload-dropzone-border-style: dashed;
--sb-ui-file-upload-dropzone-border-radius: 4px;
--sb-ui-file-upload-dropzone-padding-block: clamp(1.5rem, 1rem + 1vw, 2rem);
--sb-ui-file-upload-dropzone-padding-inline: clamp(1.5rem, 1rem + 1vw, 2rem);
--sb-ui-file-upload-dropzone-gap: clamp(0.5rem, 0.4rem + 0.3vw, 0.75rem);
--sb-ui-file-upload-dropzone-hover-bg: var(--sb-ui-color-primary-L400);
--sb-ui-file-upload-dropzone-hover-border: var(--sb-ui-color-primary-base);
--sb-ui-file-upload-dropzone-active-bg: var(--sb-ui-color-primary-L400);
}
/* Dropzone Text */
.sb-ui-file-upload-dropzone__text {
--sb-ui-file-upload-text-color: var(--sb-ui-color-grayscale-black);
--sb-ui-file-upload-text-font-size: clamp(0.875rem, 0.8rem + 0.2vw, 1rem);
--sb-ui-file-upload-text-font-weight: 400;
}
/* Help Text */
.sb-ui-file-upload__help {
--sb-ui-file-upload-help-color: var(--sb-ui-color-grayscale-black);
--sb-ui-file-upload-help-font-size: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
--sb-ui-file-upload-help-font-weight: 400;
}
/* File Item */
.sb-ui-file-upload {
/* Container */
--sb-ui-file-upload-bg: var(--sb-ui-color-grayscale-white);
--sb-ui-file-upload-border-color: var(--sb-ui-color-grayscale-L200, #e0e0e0);
--sb-ui-file-upload-border-width: 1px;
--sb-ui-file-upload-border-radius: 8px;
--sb-ui-file-upload-padding-block: 1.5rem;
--sb-ui-file-upload-padding-inline: 1.5rem;
--sb-ui-file-upload-gap: 1.5rem;
/* Icon Container - Card gris */
--sb-ui-file-upload-icon-size: 40px;
--sb-ui-file-upload-icon-color: var(--sb-ui-color-feedback-success-base);
--sb-ui-file-upload-icon-bg: var(--sb-ui-color-grayscale-L300, #f5f5f5);
--sb-ui-file-upload-icon-padding: 0.75rem;
/* File Name */
--sb-ui-file-upload-filename-color: var(--sb-ui-color-grayscale-black);
--sb-ui-file-upload-filename-font-size: clamp(0.875rem, 0.8rem + 0.2vw, 1rem);
--sb-ui-file-upload-filename-font-weight: 400;
/* Caption */
--sb-ui-file-upload-caption-color: var(--sb-ui-color-grayscale-base);
--sb-ui-file-upload-caption-font-size: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
--sb-ui-file-upload-caption-font-weight: 400;
/* Progress Bar */
--sb-ui-file-upload-progress-height: 4px;
--sb-ui-file-upload-progress-bg: var(--sb-ui-color-grayscale-L200, #e0e0e0);
--sb-ui-file-upload-progress-color: var(--sb-ui-color-feedback-warning-base, #ffa726);
--sb-ui-file-upload-progress-border-radius: 2px;
/* Button */
--sb-ui-file-upload-button-size: 24px;
--sb-ui-file-upload-button-color: var(--sb-ui-color-grayscale-base);
--sb-ui-file-upload-button-hover: var(--sb-ui-color-feedback-error-base);
/* Transitions */
--sb-ui-file-upload-transition: all 0.2s ease;
}
}
/* ========================================
BASE LAYER - Estilos base
======================================== */
@layer base {
/* Wrapper */
.sb-ui-file-upload-wrapper {
display: flex;
flex-direction: column;
gap: var(--sb-ui-file-upload-wrapper-gap);
inline-size: 100%;
}
/* Label */
.sb-ui-file-upload__label {
display: block;
color: var(--sb-ui-file-upload-label-color);
font-size: var(--sb-ui-file-upload-label-font-size);
font-weight: var(--sb-ui-file-upload-label-font-weight);
margin-block-end: var(--sb-ui-file-upload-label-margin-block-end);
}
/* Container */
.sb-ui-file-upload-container {
display: flex;
flex-direction: column;
gap: var(--sb-ui-file-upload-container-gap);
padding: var(--sb-ui-file-upload-container-padding);
background: var(--sb-ui-file-upload-container-bg);
border-radius: var(--sb-ui-file-upload-container-border-radius);
inline-size: 100%;
}
/* Dropzone */
.sb-ui-file-upload-dropzone {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--sb-ui-file-upload-dropzone-gap);
padding-block: var(--sb-ui-file-upload-dropzone-padding-block);
padding-inline: var(--sb-ui-file-upload-dropzone-padding-inline);
background: var(--sb-ui-file-upload-dropzone-bg);
border: var(--sb-ui-file-upload-dropzone-border-width)
var(--sb-ui-file-upload-dropzone-border-style)
var(--sb-ui-file-upload-dropzone-border-color);
border-radius: var(--sb-ui-file-upload-dropzone-border-radius);
text-align: center;
transition: var(--sb-ui-file-upload-transition);
cursor: pointer;
position: relative;
inline-size: 100%;
padding: 20px !important;
}
.sb-ui-file-upload-dropzone:hover {
background: var(--sb-ui-file-upload-dropzone-hover-bg);
border-color: var(--sb-ui-file-upload-dropzone-hover-border);
}
.sb-ui-file-upload-dropzone.is-dragover {
background: var(--sb-ui-file-upload-dropzone-active-bg);
border-color: var(--sb-ui-file-upload-dropzone-hover-border);
border-style: solid;
}
/* Dropzone Icon */
.sb-ui-file-upload-dropzone__icon {
font-size: 48px;
color: var(--sb-ui-color-feedback-success-base);
line-height: 1;
}
/* Dropzone Text */
.sb-ui-file-upload-dropzone__text {
color: var(--sb-ui-file-upload-text-color);
font-size: var(--sb-ui-file-upload-text-font-size);
font-weight: var(--sb-ui-file-upload-text-font-weight);
margin: 0;
}
/* Help Text */
.sb-ui-file-upload__help {
color: var(--sb-ui-file-upload-help-color);
font-size: var(--sb-ui-file-upload-help-font-size);
font-weight: var(--sb-ui-file-upload-help-font-weight);
margin: 0;
text-align: center;
}
/* File Item */
.sb-ui-file-upload {
display: flex;
align-items: center;
gap: var(--sb-ui-file-upload-gap);
padding-block: var(--sb-ui-file-upload-padding-block);
padding-inline: var(--sb-ui-file-upload-padding-inline);
background: var(--sb-ui-file-upload-bg);
border: var(--sb-ui-file-upload-border-width) solid var(--sb-ui-file-upload-border-color);
border-radius: var(--sb-ui-file-upload-border-radius);
position: relative;
transition: var(--sb-ui-file-upload-transition);
inline-size: 100%;
}
/* Icon Container - Card gris completo */
.sb-ui-file-upload__icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--sb-ui-file-upload-icon-color);
background: var(--sb-ui-file-upload-icon-bg, transparent);
border-radius: 4px;
padding: var(--sb-ui-file-upload-icon-padding);
}
.sb-ui-file-upload__icon svg {
inline-size: var(--sb-ui-file-upload-icon-size);
block-size: var(--sb-ui-file-upload-icon-size);
}
/* Content Container */
.sb-ui-file-upload__content {
flex: 1;
display: flex;
flex-direction: column;
gap: 1rem;
min-inline-size: 0;
}
/* File Name */
.sb-ui-file-upload__filename {
color: var(--sb-ui-file-upload-filename-color);
font-size: var(--sb-ui-file-upload-filename-font-size);
font-weight: var(--sb-ui-file-upload-filename-font-weight);
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Caption / Status */
.sb-ui-file-upload__caption {
color: var(--sb-ui-file-upload-caption-color);
font-size: var(--sb-ui-file-upload-caption-font-size);
font-weight: var(--sb-ui-file-upload-caption-font-weight);
margin: 0;
display: flex;
align-items: center;
gap: 0.5rem;
}
/* Progress Bar Container */
.sb-ui-file-upload__progress {
inline-size: 100%;
block-size: var(--sb-ui-file-upload-progress-height);
background: var(--sb-ui-file-upload-progress-bg);
border-radius: var(--sb-ui-file-upload-progress-border-radius);
overflow: hidden;
position: relative;
}
/* Progress Bar Fill */
.sb-ui-file-upload__progress-bar {
block-size: 100%;
background: var(--sb-ui-file-upload-progress-color);
border-radius: var(--sb-ui-file-upload-progress-border-radius);
transition: inline-size 0.3s ease;
inline-size: 0%;
}
/* Progress Percentage */
.sb-ui-file-upload__percentage {
color: var(--sb-ui-file-upload-caption-color);
font-size: var(--sb-ui-file-upload-caption-font-size);
font-weight: 500;
margin-inline-start: 0.5rem;
}
/* Actions Container */
.sb-ui-file-upload__actions {
display: flex;
gap: 0.5rem;
align-items: center;
flex-shrink: 0;
}
/* Action Button */
.sb-ui-file-upload__button {
inline-size: var(--sb-ui-file-upload-button-size);
block-size: var(--sb-ui-file-upload-button-size);
border: none;
background: transparent;
color: var(--sb-ui-file-upload-button-color);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: var(--sb-ui-file-upload-transition);
padding: 0;
font-size: 1rem;
}
.sb-ui-file-upload__button:hover:not(:disabled) {
color: var(--sb-ui-file-upload-button-hover);
}
.sb-ui-file-upload__button:active:not(:disabled) {
transform: scale(0.95);
}
.sb-ui-file-upload__button:focus-visible {
outline: 2px solid var(--sb-ui-color-secondary-L100);
outline-offset: 2px;
}
.sb-ui-file-upload__button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Status Indicator Dot */
.sb-ui-file-upload__status-dot {
inline-size: 8px;
block-size: 8px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}
}
/* ========================================
STATES LAYER
======================================== */
@layer states {
/* Uploading State */
.sb-ui-file-upload--uploading {
--sb-ui-file-upload-icon-color: var(--sb-ui-color-feedback-success-base);
--sb-ui-file-upload-progress-color: var(--sb-ui-color-feedback-warning-base, #ffa726);
--sb-ui-file-upload-caption-color: var(--sb-ui-color-grayscale-base);
}
/* Uploaded State */
.sb-ui-file-upload--uploaded {
--sb-ui-file-upload-icon-color: var(--sb-ui-color-feedback-success-base);
--sb-ui-file-upload-caption-color: var(--sb-ui-color-feedback-success-base);
}
.sb-ui-file-upload--uploaded .sb-ui-file-upload__progress {
display: none;
}
/* Success State */
.sb-ui-file-upload--success {
--sb-ui-file-upload-icon-color: var(--sb-ui-color-feedback-success-base);
--sb-ui-file-upload-progress-color: var(--sb-ui-color-feedback-success-base);
--sb-ui-file-upload-caption-color: var(--sb-ui-color-feedback-success-base);
}
/* Error State */
.sb-ui-file-upload--error {
--sb-ui-file-upload-icon-color: var(--sb-ui-color-feedback-error-base);
--sb-ui-file-upload-progress-color: var(--sb-ui-color-feedback-error-base);
--sb-ui-file-upload-caption-color: var(--sb-ui-color-feedback-error-base);
}
}
/* ========================================
UTILITIES LAYER
======================================== */
@layer utilities {
/* High contrast mode support */
@media (prefers-contrast: high) {
.sb-ui-file-upload {
--sb-ui-file-upload-border-width: 2px;
--sb-ui-file-upload-border-color: var(--sb-ui-color-grayscale-base);
}
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
.sb-ui-file-upload,
.sb-ui-file-upload *,
.sb-ui-file-upload__icon,
.sb-ui-file-upload__progress-bar {
animation: none !important;
transition: none !important;
}
}
/* Mobile styles */
@media (max-width: 640px) {
.sb-ui-file-upload {
--sb-ui-file-upload-padding-block: 0.875rem;
--sb-ui-file-upload-padding-inline: 0.875rem;
--sb-ui-file-upload-icon-size: 32px;
}
.sb-ui-file-upload__filename {
font-size: 0.875rem;
}
.sb-ui-file-upload__caption {
font-size: 0.75rem;
}
}
}
/* ========================================
ANIMATIONS (fuera de @layer)
======================================== */
@keyframes sb-ui-file-upload-pulse {
0%,
100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.7;
transform: scale(1.05);
}
}
@keyframes sb-ui-file-upload-shake {
0%,
100% {
transform: translateX(0);
}
25% {
transform: translateX(-4px);
}
75% {
transform: translateX(4px);
}
}
@layer reset, tokens, base, variants, sizes, modifiers, states, utilities;
/**
* Input Component - Seguros Bolivar UI Design System
* - CSS Nesting nativo con &
* - @layer para control de cascada
* - Logical Properties (RTL/LTR)
* - clamp() para responsive fluido
*
* Uso:
*/
/* ========================================
RESET LAYER
======================================== */
@layer reset {
.sb-ui-input {
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.sb-ui-input-container {
box-sizing: border-box;
}
.sb-ui-input-label {
box-sizing: border-box;
}
.sb-ui-input-helper {
box-sizing: border-box;
}
.sb-ui-input-icon {
box-sizing: border-box;
}
}
/* ========================================
TOKENS LAYER - Variables CSS
======================================== */
@layer tokens {
.sb-ui-input {
/* Colores BASE - Estados interactivos */
--sb-ui-input-bg-color: var(--sb-ui-color-grayscale-white, #fff);
--sb-ui-input-bg-hover: var(--sb-ui-color-grayscale-white, #fff);
--sb-ui-input-bg-focus: var(--sb-ui-color-grayscale-white, #fff);
--sb-ui-input-bg-disabled: var(--sb-ui-color-grayscale-L300, #f5f5f5);
--sb-ui-input-text-color: var(--sb-ui-color-grayscale-black, #000);
--sb-ui-input-text-hover: var(--sb-ui-color-grayscale-black, #000);
--sb-ui-input-text-focus: var(--sb-ui-color-grayscale-black, #000);
--sb-ui-input-text-disabled: var(--sb-ui-color-grayscale-base, #9b9b9b);
--sb-ui-input-text-placeholder: var(--sb-ui-color-grayscale-base, #9b9b9b);
--sb-ui-input-border-color: var(--sb-ui-color-grayscale-L200, #e1e1e1);
--sb-ui-input-border-hover: var(--sb-ui-color-grayscale-L200, #e1e1e1);
--sb-ui-input-border-focus: var(--sb-ui-color-primary-base, #007acc);
--sb-ui-input-border-disabled: var(--sb-ui-color-grayscale-L200, #e1e1e1);
/* Espaciado - SIEMPRE con clamp() */
--sb-ui-input-padding-inline: clamp(0.8rem, 0.5rem + 1.5vw, 1rem);
--sb-ui-input-padding-block: clamp(0.6rem, 0.4rem + 0.8vw, 0.875rem);
--sb-ui-input-padding-inline-end-icon: clamp(2rem, 1.8rem + 1vw, 2.5rem);
/* TipografĂa - SIEMPRE con clamp() */
--sb-ui-input-font-family: var(--sb-ui-typography-fontFamily, 'Roboto', sans-serif);
--sb-ui-input-font-size: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);
--sb-ui-input-font-weight: 400;
--sb-ui-input-line-height: 1.5;
/* Label */
--sb-ui-input-label-color: var(--sb-ui-color-grayscale-black, #000);
--sb-ui-input-label-font-size: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
--sb-ui-input-label-font-weight: 600;
--sb-ui-input-label-margin-block-end: clamp(0.25rem, 0.2rem + 0.2vw, 0.375rem);
/* Helper text */
--sb-ui-input-helper-color: var(--sb-ui-color-grayscale-base, #9b9b9b);
--sb-ui-input-helper-font-size: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
--sb-ui-input-helper-margin-block-start: clamp(0.25rem, 0.2rem + 0.2vw, 0.375rem);
/* Tamaños - Logical properties */
--sb-ui-input-min-block-size: clamp(40px, 8vw, 44px);
--sb-ui-input-inline-size: 100%;
/* Bordes */
--sb-ui-input-border-width: 1px;
--sb-ui-input-border-radius: clamp(6px, 0.4rem + 0.3vw, 8px);
/* Sombras */
--sb-ui-input-shadow: none;
--sb-ui-input-shadow-focus: 0 0 0 3px var(--sb-ui-color-primary-L400, rgba(0, 122, 204, 0.1));
/* Transiciones - NO incluir outline para evitar destellos en focus */
--sb-ui-input-transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease,
box-shadow 0.2s ease;
/* Ăconos */
--sb-ui-input-icon-size: clamp(1rem, 0.9rem + 0.3vw, 1.25rem);
--sb-ui-input-icon-color: var(--sb-ui-color-grayscale-base, #9b9b9b);
--sb-ui-input-icon-inset-inline-end: clamp(0.75rem, 0.6rem + 0.5vw, 1rem);
}
}
/* ========================================
BASE LAYER - Estilos base
======================================== */
@layer base {
/* Container wrapper */
.sb-ui-input-container {
display: block;
position: relative;
inline-size: 100%;
}
/* Input field */
.sb-ui-input {
/* Layout */
display: block;
position: relative;
inline-size: var(--sb-ui-input-inline-size);
/* Spacing - SOLO Logical Properties */
padding-inline: var(--sb-ui-input-padding-inline);
padding-block: var(--sb-ui-input-padding-block);
/* Typography */
font-family: var(--sb-ui-input-font-family);
font-size: var(--sb-ui-input-font-size);
font-weight: var(--sb-ui-input-font-weight);
line-height: var(--sb-ui-input-line-height);
/* Sizing */
min-block-size: var(--sb-ui-input-min-block-size);
/* Appearance */
background-color: var(--sb-ui-input-bg-color);
color: var(--sb-ui-input-text-color);
border: var(--sb-ui-input-border-width) solid var(--sb-ui-input-border-color);
border-radius: var(--sb-ui-input-border-radius);
box-shadow: var(--sb-ui-input-shadow);
/* Animation */
transition: var(--sb-ui-input-transition);
/* Nested Pseudo-classes - SIEMPRE usar & */
}
.sb-ui-input::placeholder {
color: var(--sb-ui-input-text-placeholder);
opacity: 1;
}
.sb-ui-input:hover:not(:disabled):not(:focus) {
background-color: var(--sb-ui-input-bg-hover);
color: var(--sb-ui-input-text-hover, var(--sb-ui-input-text-color));
border-color: var(--sb-ui-input-border-hover, var(--sb-ui-input-border-color));
}
.sb-ui-input:focus {
background-color: var(--sb-ui-input-bg-focus);
color: var(--sb-ui-input-text-focus, var(--sb-ui-input-text-color));
border-color: var(--sb-ui-input-border-focus);
box-shadow: var(--sb-ui-input-shadow-focus);
outline: none;
}
.sb-ui-input:focus-visible {
outline: 2px solid var(--sb-ui-color-secondary-L100, #66bc9a);
outline-offset: 2px;
}
.sb-ui-input:disabled,.sb-ui-input.sb-ui-input--disabled {
background-color: var(--sb-ui-input-bg-disabled);
color: var(--sb-ui-input-text-disabled);
border-color: var(--sb-ui-input-border-disabled);
cursor: not-allowed;
opacity: 0.6;
}
/* Con Ăcono a la derecha */
.sb-ui-input.sb-ui-input--with-icon {
padding-inline-end: var(--sb-ui-input-padding-inline-end-icon);
}
/* Label */
.sb-ui-input-label {
display: block;
margin-block-end: var(--sb-ui-input-label-margin-block-end);
font-family: var(--sb-ui-input-font-family);
font-size: var(--sb-ui-input-label-font-size);
font-weight: var(--sb-ui-input-label-font-weight);
color: var(--sb-ui-input-label-color);
line-height: 1.25;
}
--required.sb-ui-input-label::after {
content: ' *';
color: var(--sb-ui-color-feedback-error-base, #dc3545);
}
--optional.sb-ui-input-label::after {
content: ' (opcional)';
color: var(--sb-ui-color-grayscale-base, #9b9b9b);
font-weight: 400;
}
/* Helper text */
.sb-ui-input-helper {
display: block;
margin-block-start: var(--sb-ui-input-helper-margin-block-start);
font-family: var(--sb-ui-input-font-family);
font-size: var(--sb-ui-input-helper-font-size);
color: var(--sb-ui-input-helper-color);
line-height: 1.25;
}
/* Ăcono del input (derecha) */
.sb-ui-input-icon {
position: absolute;
inset-block-start: 50%;
inset-inline-end: var(--sb-ui-input-icon-inset-inline-end);
transform: translateY(-50%);
font-size: var(--sb-ui-input-icon-size);
color: var(--sb-ui-input-icon-color);
pointer-events: none;
transition: var(--sb-ui-input-transition);
}
}
/* ========================================
STATES LAYER
======================================== */
@layer states {
/* Success state */
.sb-ui-input--success {
--sb-ui-input-border-color: var(--sb-ui-color-feedback-success-base, #28a745);
--sb-ui-input-border-focus: var(--sb-ui-color-feedback-success-base, #28a745);
--sb-ui-input-shadow-focus: 0 0 0 3px var(--sb-ui-color-feedback-success-L400, rgba(40, 167, 69, 0.1));
}
.sb-ui-input--success + .sb-ui-input-icon {
color: var(--sb-ui-color-feedback-success-base, #28a745);
}
.sb-ui-input--success ~ .sb-ui-input-helper {
color: var(--sb-ui-color-feedback-success-base, #28a745);
}
/* Error state */
.sb-ui-input--error {
--sb-ui-input-border-color: var(--sb-ui-color-feedback-error-base, #dc3545);
--sb-ui-input-border-focus: var(--sb-ui-color-feedback-error-base, #dc3545);
--sb-ui-input-shadow-focus: 0 0 0 3px var(--sb-ui-color-feedback-error-L400, rgba(220, 53, 69, 0.1));
}
.sb-ui-input--error + .sb-ui-input-icon {
color: var(--sb-ui-color-feedback-error-base, #dc3545);
}
.sb-ui-input--error ~ .sb-ui-input-helper {
color: var(--sb-ui-color-feedback-error-base, #dc3545);
}
/* Warning state */
.sb-ui-input--warning {
--sb-ui-input-border-color: var(--sb-ui-color-feedback-warning-base, #ffc107);
--sb-ui-input-border-focus: var(--sb-ui-color-feedback-warning-base, #ffc107);
--sb-ui-input-shadow-focus: 0 0 0 3px var(--sb-ui-color-feedback-warning-L400, rgba(255, 193, 7, 0.1));
}
.sb-ui-input--warning + .sb-ui-input-icon {
color: var(--sb-ui-color-feedback-warning-base, #ffc107);
}
.sb-ui-input--warning ~ .sb-ui-input-helper {
color: var(--sb-ui-color-feedback-warning-base, #ffc107);
}
/* Disabled state */
.sb-ui-input:disabled ~ .sb-ui-input-helper,
.sb-ui-input.sb-ui-input--disabled ~ .sb-ui-input-helper {
opacity: 0.6;
}
.sb-ui-input:disabled + .sb-ui-input-icon,
.sb-ui-input.sb-ui-input--disabled + .sb-ui-input-icon {
opacity: 0.6;
}
/* Focus state - icon color */
.sb-ui-input:focus + .sb-ui-input-icon {
color: var(--sb-ui-input-border-focus);
}
}
/* ========================================
SIZES LAYER
======================================== */
@layer sizes {
.sb-ui-input--small {
--sb-ui-input-font-size: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
--sb-ui-input-padding-inline: clamp(0.6rem, 0.4rem + 0.8vw, 0.75rem);
--sb-ui-input-padding-block: clamp(0.4rem, 0.3rem + 0.5vw, 0.5rem);
--sb-ui-input-min-block-size: clamp(32px, 6vw, 36px);
--sb-ui-input-padding-inline-end-icon: clamp(1.8rem, 1.6rem + 0.8vw, 2rem);
}
.sb-ui-input--large {
--sb-ui-input-font-size: clamp(1rem, 0.9rem + 0.4vw, 1.125rem);
--sb-ui-input-padding-inline: clamp(1rem, 0.8rem + 1.8vw, 1.25rem);
--sb-ui-input-padding-block: clamp(0.8rem, 0.6rem + 1vw, 1rem);
--sb-ui-input-min-block-size: clamp(48px, 10vw, 52px);
--sb-ui-input-padding-inline-end-icon: clamp(2.5rem, 2.2rem + 1.2vw, 3rem);
}
}
/* ========================================
MODIFIERS LAYER
======================================== */
@layer modifiers {
.sb-ui-input--rounded {
--sb-ui-input-border-radius: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
}
.sb-ui-input--inline {
--sb-ui-input-inline-size: auto;
min-inline-size: clamp(180px, 30vw, 250px);
}
}
/* ========================================
UTILITIES LAYER (mĂĄxima prioridad)
======================================== */
@layer utilities {
/* High contrast mode support - OBLIGATORIO */
@media (prefers-contrast: high) {
.sb-ui-input {
--sb-ui-input-border-width: 2px;
}
}
/* Reduced motion support - OBLIGATORIO */
@media (prefers-reduced-motion: reduce) {
.sb-ui-input {
--sb-ui-input-transition: none;
}
}
/* Mobile styles - Font size 16px para prevenir zoom en iOS */
@media (inline-size <= 640px) {
.sb-ui-input {
font-size: max(16px, var(--sb-ui-input-font-size));
}
}
/* Print styles */
@media print {
.sb-ui-input {
background: transparent !important;
color: black !important;
border: 1px solid black !important;
box-shadow: none !important;
}
}
}
/* ========================================
AUTOFILL STYLES (fuera de @layer)
======================================== */
.sb-ui-input:-webkit-autofill,
.sb-ui-input:-webkit-autofill:hover,
.sb-ui-input:-webkit-autofill:focus,
.sb-ui-input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 30px var(--sb-ui-input-bg-color) inset !important;
-webkit-text-fill-color: var(--sb-ui-input-text-color) !important;
transition: background-color 5000s ease-in-out 0s;
}
@layer reset, tokens, base, sizes, modifiers, states, utilities;
/**
* ============================================================================
* Radio Button Component - Seguros Bolivar UI Design System
* ============================================================================
*
* đŻ ARQUITECTURA CORRECTA:
*
* El radio tiene DOS elementos visuales:
*
* 1ïžâŁ CONTENEDOR EXTERIOR (18Ă18px):
* - Background: BLANCO (#FFF)
* - Border: 1px solid #9B9B9B (gris)
* - ActĂșa como un "outline" o anillo exterior
*
* 2ïžâŁ CĂRCULO INTERIOR (12Ă12px) - SOLO CUANDO SELECTED:
* - Background: VERDE (#009056) - Primary/Base
* - PosiciĂłn: top: 3px, left: 3px (centrado con espacio de 3px en todas direcciones)
* - Sin border
*
* LAYOUT:
* âââââââââââââââââââââââ â 18Ă18px contenedor (blanco + border gris)
* â âââââââââââââââââ â â 3px espacio en todas direcciones
* â â â â
* â â 12Ă12px â â â CĂrculo verde (solo cuando selected)
* â â #009056 â â
* â â â â
* â âââââââââââââââââ â
* âââââââââââââââââââââââ
*
* ============================================================================
*/
/* ========================================
RESET LAYER
======================================== */
@layer reset {
.sb-ui-radio,
.sb-ui-radio *,
.sb-ui-radio *::before,
.sb-ui-radio *::after {
box-sizing: border-box;
}
}
/* ========================================
TOKENS LAYER - Variables CSS
======================================== */
@layer tokens {
.sb-ui-radio {
/* ===== ESTRUCTURA - Tamaños fijos ===== */
--sb-ui-radio-outer-size: 18px; /* Contenedor exterior 18Ă18px */
--sb-ui-radio-inner-size: 12px; /* CĂrculo interior 12Ă12px (cuando selected) */
--sb-ui-radio-gap: 8px; /* Space between radio y label */
--sb-ui-radio-padding: clamp(4px, 0.3rem, 8px);
/* ===== CONTENEDOR EXTERIOR - UNSELECTED ===== */
--sb-ui-radio-outer-bg: var(--sb-ui-color-grayscale-white, #fff); /* BLANCO siempre */
--sb-ui-radio-outer-border: var(
--sb-ui-color-grayscale-base,
#9b9b9b
); /* GRIS cuando unselected */
--sb-ui-radio-outer-border-disabled: var(--sb-ui-color-grayscale-base, #9b9b9b);
/* ===== CONTENEDOR EXTERIOR - SELECTED ===== */
--sb-ui-radio-outer-border-selected: var(
--sb-ui-color-grayscale-base,
#9b9b9b
); /* GRIS cuando selected (border se mantiene gris, solo el cĂrculo interior cambia a verde) */
--sb-ui-radio-outer-border-selected-disabled: var(--sb-ui-color-grayscale-base, #9b9b9b);
/* ===== CĂRCULO INTERIOR (solo cuando selected) ===== */
--sb-ui-radio-inner-bg: var(--sb-ui-color-primary-base, #009056); /* Verde */
--sb-ui-radio-inner-bg-disabled: var(--sb-ui-color-grayscale-base, #9b9b9b); /* Gris */
/* ===== HALOS - Hover Effect ===== */
--sb-ui-radio-hover-halo-bg: var(--sb-ui-color-primary-L400, #f2f9f6);
--sb-ui-radio-hover-halo-size: 32px;
--sb-ui-radio-hover-halo-opacity: 0.7;
/* ===== HALOS - Pressed Effect (doble halo) ===== */
--sb-ui-radio-pressed-halo-outer-bg: var(--sb-ui-color-primary-L400, #f2f9f6);
--sb-ui-radio-pressed-halo-outer-size: 32px;
--sb-ui-radio-pressed-halo-outer-opacity: 0.7;
--sb-ui-radio-pressed-halo-inner-bg: var(--sb-ui-color-primary-L300, #e5f4ee);
--sb-ui-radio-pressed-halo-inner-size: 28px;
--sb-ui-radio-pressed-halo-inner-opacity: 0.7;
/* ===== LABEL ===== */
--sb-ui-radio-label-color: var(--sb-ui-color-grayscale-D100, #757575);
--sb-ui-radio-label-color-hover: var(--sb-ui-color-grayscale-D100, #757575);
--sb-ui-radio-label-color-active: var(--sb-ui-color-grayscale-D100, #757575);
--sb-ui-radio-label-color-disabled: var(--sb-ui-color-grayscale-base, #9b9b9b);
/* ===== TIPOGRAFĂA ===== */
--sb-ui-radio-font-family: 'Bolivar', var(--sb-ui-typography-fontFamily, 'Roboto', sans-serif);
--sb-ui-radio-font-size: 16px;
--sb-ui-radio-font-weight: 400;
--sb-ui-radio-line-height: 1.4; /* 140% */
--sb-ui-radio-letter-spacing: 0px;
/* ===== BORDES ===== */
--sb-ui-radio-border-width: 1px;
/* ===== TRANSICIONES ===== */
--sb-ui-radio-transition:
background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
}
}
/* ========================================
BASE LAYER - Estilos base
======================================== */
@layer base {
/* ===== CONTAINER LABEL ===== */
.sb-ui-radio {
/* Layout */
display: inline-flex;
align-items: center;
gap: var(--sb-ui-radio-gap);
position: relative;
padding: var(--sb-ui-radio-padding);
/* Typography */
font-family: var(--sb-ui-radio-font-family);
font-size: var(--sb-ui-radio-font-size);
font-weight: var(--sb-ui-radio-font-weight);
line-height: var(--sb-ui-radio-line-height);
letter-spacing: var(--sb-ui-radio-letter-spacing);
color: var(--sb-ui-radio-label-color);
/* Interaction */
cursor: pointer;
user-select: none;
/* Halo inner (pressed state) - se activa en :active */
}
.sb-ui-radio::before {
content: '';
position: absolute;
inset-block-start: calc(
var(--sb-ui-radio-padding) +
(var(--sb-ui-radio-outer-size) - var(--sb-ui-radio-pressed-halo-inner-size)) / 2
);
inset-inline-start: calc(
var(--sb-ui-radio-padding) +
(var(--sb-ui-radio-outer-size) - var(--sb-ui-radio-pressed-halo-inner-size)) / 2
);
inline-size: var(--sb-ui-radio-pressed-halo-inner-size);
block-size: var(--sb-ui-radio-pressed-halo-inner-size);
background-color: var(--sb-ui-radio-pressed-halo-inner-bg);
border-radius: 50%;
opacity: 0;
transform: scale(0.8);
transition:
opacity 0.15s ease,
transform 0.15s ease;
pointer-events: none;
z-index: -1;
}
/* ===== INPUT OCULTO (pero funcional para a11y) ===== */
.sb-ui-radio__input {
position: absolute;
opacity: 0;
inline-size: 0;
block-size: 0;
pointer-events: none;
}
/* ===== CONTENEDOR EXTERIOR (18Ă18px - blanco + border gris) ===== */
.sb-ui-radio__circle {
/* Layout */
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
/* Size */
inline-size: var(--sb-ui-radio-outer-size);
block-size: var(--sb-ui-radio-outer-size);
/* Appearance - SIEMPRE BLANCO con border GRIS */
background-color: var(--sb-ui-radio-outer-bg);
border: var(--sb-ui-radio-border-width) solid var(--sb-ui-radio-outer-border);
border-radius: 50%;
/* Animation */
transition: var(--sb-ui-radio-transition);
/* Stacking context para halos */
isolation: isolate;
/* Halo outer (hover/pressed) - ::before */
}
.sb-ui-radio__circle::before {
content: '';
position: absolute;
inset-block-start: calc(
(var(--sb-ui-radio-outer-size) - var(--sb-ui-radio-hover-halo-size)) / 2
);
inset-inline-start: calc(
(var(--sb-ui-radio-outer-size) - var(--sb-ui-radio-hover-halo-size)) / 2
);
inline-size: var(--sb-ui-radio-hover-halo-size);
block-size: var(--sb-ui-radio-hover-halo-size);
background-color: var(--sb-ui-radio-hover-halo-bg);
border-radius: 50%;
opacity: 0;
transform: scale(0.8);
transition:
opacity 0.15s ease,
transform 0.15s ease;
pointer-events: none;
z-index: -1;
}
/* CĂrculo interior (12Ă12px verde) - ::after - solo cuando selected */
.sb-ui-radio__circle::after {
content: '';
display: block;
inline-size: var(--sb-ui-radio-inner-size);
block-size: var(--sb-ui-radio-inner-size);
background-color: transparent;
border-radius: 50%;
opacity: 0;
transform: scale(0);
transition:
opacity 0.15s ease,
transform 0.15s ease;
z-index: 1;
}
/* ===== LABEL TEXT ===== */
.sb-ui-radio__label {
display: inline;
color: inherit;
transition: color 0.2s ease;
}
/* ========================================
ESTADOS INTERACTIVOS (UNSELECTED)
======================================== */
/* HOVER */
.sb-ui-radio:hover:not(:has(.sb-ui-radio__input:disabled)) .sb-ui-radio__circle {
/* Border EXPLĂCITAMENTE NO cambia en hover (mantiene gris) */
border-color: var(--sb-ui-radio-outer-border);
/* Activar el halo en hover */
}
:is(.sb-ui-radio:hover:not(:has(.sb-ui-radio__input:disabled)) .sb-ui-radio__circle)::before {
opacity: var(--sb-ui-radio-hover-halo-opacity);
transform: scale(1);
}
.sb-ui-radio:hover:not(:has(.sb-ui-radio__input:disabled)) .sb-ui-radio__label {
color: var(--sb-ui-radio-label-color-hover);
}
/* PRESSED (active) - DOBLE HALO */
/* Activar HALO INNER (cĂrculo pequeño) */
.sb-ui-radio:active:not(:has(.sb-ui-radio__input:disabled))::before {
opacity: var(--sb-ui-radio-pressed-halo-inner-opacity);
transform: scale(1);
}
.sb-ui-radio:active:not(:has(.sb-ui-radio__input:disabled)) .sb-ui-radio__circle {
/* Border EXPLĂCITAMENTE NO cambia en pressed (mantiene gris) */
border-color: var(--sb-ui-radio-outer-border);
transform: scale(0.95);
/* Activar HALO OUTER (cĂrculo grande) */
}
:is(.sb-ui-radio:active:not(:has(.sb-ui-radio__input:disabled)) .sb-ui-radio__circle)::before {
opacity: var(--sb-ui-radio-pressed-halo-outer-opacity);
transform: scale(1);
inline-size: var(--sb-ui-radio-pressed-halo-outer-size);
block-size: var(--sb-ui-radio-pressed-halo-outer-size);
background-color: var(--sb-ui-radio-pressed-halo-outer-bg);
inset-block-start: calc(
(var(--sb-ui-radio-outer-size) - var(--sb-ui-radio-pressed-halo-outer-size)) / 2
);
inset-inline-start: calc(
(var(--sb-ui-radio-outer-size) - var(--sb-ui-radio-pressed-halo-outer-size)) / 2
);
}
.sb-ui-radio:active:not(:has(.sb-ui-radio__input:disabled)) .sb-ui-radio__label {
color: var(--sb-ui-radio-label-color-active);
}
/* FOCUS VISIBLE */
:is(.sb-ui-radio:has(.sb-ui-radio__input:focus-visible) .sb-ui-radio__circle)::before {
background-color: var(--sb-ui-color-primary-L300, #e5f4ee);
opacity: 0.7;
transform: scale(1);
inline-size: var(--sb-ui-radio-hover-halo-size);
block-size: var(--sb-ui-radio-hover-halo-size);
/* Centrado dinĂĄmico como hover */
inset-block-start: calc(
(var(--sb-ui-radio-outer-size) - var(--sb-ui-radio-hover-halo-size)) / 2
);
inset-inline-start: calc(
(var(--sb-ui-radio-outer-size) - var(--sb-ui-radio-hover-halo-size)) / 2
);
}
/* ========================================
ESTADOS SELECTED (CHECKED)
======================================== */
/* SELECTED - Default */
.sb-ui-radio:has(.sb-ui-radio__input:checked) .sb-ui-radio__circle {
/* Border cambia a VERDE */
border-color: var(--sb-ui-radio-outer-border-selected);
/* CĂrculo interior VERDE aparece */
}
:is(.sb-ui-radio:has(.sb-ui-radio__input:checked) .sb-ui-radio__circle)::after {
background-color: var(--sb-ui-radio-inner-bg);
opacity: 1;
transform: scale(1);
}
/* SELECTED + HOVER */
.sb-ui-radio:hover:has(.sb-ui-radio__input:checked:not(:disabled)) .sb-ui-radio__circle {
/* Border EXPLĂCITAMENTE NO cambia en hover (mantiene el mismo de selected) */
border-color: var(--sb-ui-radio-outer-border-selected);
/* Activar el halo también en selected + hover */
}
:is(.sb-ui-radio:hover:has(.sb-ui-radio__input:checked:not(:disabled)) .sb-ui-radio__circle)::before {
opacity: var(--sb-ui-radio-hover-halo-opacity);
transform: scale(1);
}
/* SELECTED + PRESSED */
/* Activar HALO INNER (cĂrculo pequeño) */
.sb-ui-radio:active:has(.sb-ui-radio__input:checked:not(:disabled))::before {
opacity: var(--sb-ui-radio-pressed-halo-inner-opacity);
transform: scale(1);
}
.sb-ui-radio:active:has(.sb-ui-radio__input:checked:not(:disabled)) .sb-ui-radio__circle {
/* Border EXPLĂCITAMENTE NO cambia en pressed (mantiene el mismo de selected) */
border-color: var(--sb-ui-radio-outer-border-selected);
transform: scale(0.95);
/* Activar HALO OUTER (cĂrculo grande) */
}
:is(.sb-ui-radio:active:has(.sb-ui-radio__input:checked:not(:disabled)) .sb-ui-radio__circle)::before {
opacity: var(--sb-ui-radio-pressed-halo-outer-opacity);
transform: scale(1);
inline-size: var(--sb-ui-radio-pressed-halo-outer-size);
block-size: var(--sb-ui-radio-pressed-halo-outer-size);
background-color: var(--sb-ui-radio-pressed-halo-outer-bg);
inset-block-start: calc(
(var(--sb-ui-radio-outer-size) - var(--sb-ui-radio-pressed-halo-outer-size)) / 2
);
inset-inline-start: calc(
(var(--sb-ui-radio-outer-size) - var(--sb-ui-radio-pressed-halo-outer-size)) / 2
);
}
/* ========================================
ESTADOS DISABLED
======================================== */
/* DISABLED - Unselected */
.sb-ui-radio:has(.sb-ui-radio__input:disabled) {
cursor: not-allowed;
}
.sb-ui-radio:has(.sb-ui-radio__input:disabled) .sb-ui-radio__circle {
border-color: var(--sb-ui-radio-outer-border-disabled);
}
.sb-ui-radio:has(.sb-ui-radio__input:disabled) .sb-ui-radio__label {
color: var(--sb-ui-radio-label-color-disabled);
}
/* DISABLED + SELECTED */
.sb-ui-radio:has(.sb-ui-radio__input:checked:disabled) {
cursor: not-allowed;
}
.sb-ui-radio:has(.sb-ui-radio__input:checked:disabled) .sb-ui-radio__circle {
border-color: var(--sb-ui-radio-outer-border-selected-disabled);
}
:is(.sb-ui-radio:has(.sb-ui-radio__input:checked:disabled) .sb-ui-radio__circle)::after {
background-color: var(--sb-ui-radio-inner-bg-disabled); /* Gris */
opacity: 1;
transform: scale(1);
}
.sb-ui-radio:has(.sb-ui-radio__input:checked:disabled) .sb-ui-radio__label {
color: var(--sb-ui-radio-label-color-disabled);
}
/* DISABLED - Desactivar TODOS los halos (hover, pressed, focus) */
/* Halo inner (pressed state - container ::before) */
.sb-ui-radio:has(.sb-ui-radio__input:disabled)::before {
opacity: 0 !important;
transform: scale(0.8) !important;
}
/* Halo outer (hover/pressed/focus state - circle ::before) */
.sb-ui-radio:has(.sb-ui-radio__input:disabled) .sb-ui-radio__circle::before {
opacity: 0 !important;
transform: scale(0.8) !important;
}
/* DISABLED FOCUS - sin outline ni halo */
:is(.sb-ui-radio:has(.sb-ui-radio__input:disabled:focus),.sb-ui-radio:has(.sb-ui-radio__input:disabled:focus-visible)) .sb-ui-radio__circle {
outline: none;
/* NO halo de focus cuando estĂĄ disabled */
}
:is(:is(.sb-ui-radio:has(.sb-ui-radio__input:disabled:focus),.sb-ui-radio:has(.sb-ui-radio__input:disabled:focus-visible)) .sb-ui-radio__circle)::before {
opacity: 0 !important;
transform: scale(0.8) !important;
}
}
/* ========================================
SIZES LAYER
======================================== */
@layer sizes {
/* SMALL */
.sb-ui-radio--small {
--sb-ui-radio-outer-size: 16px;
--sb-ui-radio-inner-size: 10px;
--sb-ui-radio-gap: 8px;
--sb-ui-radio-font-size: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
--sb-ui-radio-padding: clamp(2px, 0.2rem, 4px);
}
/* MEDIUM (default - ya definido en tokens) */
.sb-ui-radio--medium {
/* Usa los tamaños por defecto: outer: 18px, inner: 12px, offset: 3px */
}
/* LARGE */
.sb-ui-radio--large {
--sb-ui-radio-outer-size: 24px;
--sb-ui-radio-inner-size: 16px;
--sb-ui-radio-gap: 8px;
--sb-ui-radio-font-size: clamp(1rem, 0.9rem + 0.4vw, 1.125rem);
--sb-ui-radio-padding: clamp(6px, 0.4rem, 12px);
}
}
/* ========================================
MODIFIERS LAYER
======================================== */
@layer modifiers {
/* Sin label (solo radio) */
.sb-ui-radio--no-label {
gap: 0;
padding: var(--sb-ui-radio-padding);
}
.sb-ui-radio--no-label .sb-ui-radio__label {
display: none;
}
/* Block layout (ocupa todo el ancho) */
.sb-ui-radio--block {
display: flex;
inline-size: 100%;
}
/* AlineaciĂłn: label arriba (para textos largos) */
.sb-ui-radio--vertical {
flex-direction: column;
align-items: flex-start;
}
}
/* ========================================
STATES LAYER
======================================== */
@layer states {
/* ERROR STATE - ValidaciĂłn de formularios */
.sb-ui-radio--error {
/* Border rojo para el contenedor exterior (en todos los estados) */
--sb-ui-radio-outer-border: var(--sb-ui-color-feedback-error-base, #dc3545);
--sb-ui-radio-outer-border-selected: var(--sb-ui-color-feedback-error-base, #dc3545);
/* Cuando estĂĄ selected + error, el cĂrculo interior es rojo */
--sb-ui-radio-inner-bg: var(--sb-ui-color-feedback-error-base, #dc3545);
/* Label se mantiene gris (NO rojo) */
--sb-ui-radio-label-color: var(--sb-ui-color-grayscale-D100, #757575);
--sb-ui-radio-label-color-hover: var(--sb-ui-color-grayscale-D100, #757575);
--sb-ui-radio-label-color-active: var(--sb-ui-color-grayscale-D100, #757575);
}
}
/* ========================================
UTILITIES LAYER
======================================== */
@layer utilities {
/* High contrast mode support */
@media (prefers-contrast: high) {
.sb-ui-radio__circle {
--sb-ui-radio-border-width: 2px;
}
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
.sb-ui-radio,
.sb-ui-radio__circle,
.sb-ui-radio::before,
.sb-ui-radio__circle::before,
.sb-ui-radio__circle::after,
.sb-ui-radio__label {
--sb-ui-radio-transition: none;
animation: none;
transition: none;
}
}
}
/**
* Select Component - Seguros BolĂvar UI Design System
* Componente CSS puro con variables --sb-ui-* personalizables por marca
* Incluye estilos para select nativo y customizado
*
* Uso:
*
*
*
*
* đœ
*
*/
/* ========================================
VARIABLES CSS PERSONALIZABLES Y ESTILOS BASE
======================================== */
.sb-ui-select {
/* Colores - Pueden ser sobreescritos por marca */
--sb-ui-select-bg-color: var(--sb-ui-color-grayscale-white, #ffffff);
--sb-ui-select-bg-disabled: var(--sb-ui-color-grayscale-L300, #f2f3f5);
--sb-ui-select-text-color: var(--sb-ui-color-grayscale-D300, #404040);
--sb-ui-select-text-placeholder: var(--sb-ui-color-grayscale-base, #d9d9d9);
--sb-ui-select-text-disabled: var(--sb-ui-color-grayscale-base, #d9d9d9);
--sb-ui-select-border-color: var(--sb-ui-color-grayscale-L200, #edeef0);
--sb-ui-select-border-color-focus: var(--sb-ui-color-primary-base, #007acc);
--sb-ui-select-border-color-error: var(--sb-ui-color-feedback-error-base, #dc3545);
--sb-ui-select-border-color-success: var(--sb-ui-color-feedback-success-base, #28a745);
--sb-ui-select-border-width: 1px;
--sb-ui-select-border-radius: 8px;
/* Espaciado */
--sb-ui-select-padding-x: 1rem;
--sb-ui-select-padding-y: 0.75rem;
--sb-ui-select-padding-icon-left: 2.5rem;
--sb-ui-select-padding-icon-right: 2.5rem;
/* TipografĂa */
--sb-ui-select-font-family: var(--sb-ui-typography-fontFamily, 'Roboto', sans-serif);
--sb-ui-select-font-size: 1rem;
--sb-ui-select-font-weight: 400;
--sb-ui-select-line-height: 1.5;
/* Tamaños */
--sb-ui-select-min-height: 40px;
/* Sombras */
--sb-ui-select-shadow: none;
--sb-ui-select-shadow-focus: 0 0 0 3px var(--sb-ui-color-primary-L400, rgba(0, 122, 204, 0.1));
/* Transiciones */
--sb-ui-select-transition: all 0.2s ease;
/* Iconos */
--sb-ui-select-arrow-color: var(--sb-ui-color-grayscale-base, #d9d9d9);
--sb-ui-select-arrow-size: 12px;
/* Layout */
display: block;
width: 100%;
position: relative;
box-sizing: border-box;
/* Spacing */
padding: var(--sb-ui-select-padding-y) var(--sb-ui-select-padding-x);
/* Sizing */
min-height: var(--sb-ui-select-min-height);
/* Typography */
font-family: var(--sb-ui-select-font-family);
font-style: normal;
font-weight: var(--sb-ui-select-font-weight);
font-size: var(--sb-ui-select-font-size);
line-height: var(--sb-ui-select-line-height);
/* Appearance */
background-color: var(--sb-ui-select-bg-color);
color: var(--sb-ui-select-text-color);
border: var(--sb-ui-select-border-width) solid var(--sb-ui-select-border-color);
border-radius: var(--sb-ui-select-border-radius);
box-shadow: var(--sb-ui-select-shadow);
outline: none;
cursor: pointer;
/* Reset default select styling */
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23d9d9d9' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: var(--sb-ui-select-arrow-size);
/* Animation */
transition: var(--sb-ui-select-transition);
}
/* Hover state */
.sb-ui-select:hover:not(:disabled) {
border-color: var(--sb-ui-select-border-color-focus);
}
/* Active state */
.sb-ui-select:active:not(:disabled) {
border-color: var(--sb-ui-select-border-color-focus);
box-shadow: var(--sb-ui-select-shadow-focus);
}
/* Focus state */
.sb-ui-select:focus {
border-color: var(--sb-ui-select-border-color-focus);
box-shadow: var(--sb-ui-select-shadow-focus);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23007acc' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
}
/* Focus visible state */
.sb-ui-select:focus-visible:not(:disabled) {
outline: 2px solid var(--sb-ui-color-primary-base, #007acc);
outline-offset: 2px;
}
/* Disabled state */
.sb-ui-select:disabled {
background-color: var(--sb-ui-select-bg-disabled);
color: var(--sb-ui-select-text-disabled);
border-color: var(--sb-ui-select-bg-disabled);
cursor: not-allowed;
opacity: 0.6;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23d9d9d9' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
}
/* Option styling */
.sb-ui-select option {
background-color: var(--sb-ui-select-bg-color);
color: var(--sb-ui-select-text-color);
padding: 0.5rem;
}
.sb-ui-select option:disabled {
color: var(--sb-ui-select-text-disabled);
background-color: var(--sb-ui-select-bg-disabled);
}
/* ========================================
SELECT STATES
======================================== */
/* Error state */
.sb-ui-select--error {
--sb-ui-select-border-color: var(--sb-ui-select-border-color-error);
--sb-ui-select-border-color-focus: var(--sb-ui-select-border-color-error);
--sb-ui-select-shadow-focus: 0 0 0 3px
var(--sb-ui-color-feedback-error-L400, rgba(220, 53, 69, 0.1));
}
.sb-ui-select--error:focus {
border-color: var(--sb-ui-select-border-color-error);
box-shadow: var(--sb-ui-select-shadow-focus);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23dc3545' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
}
/* Success state */
.sb-ui-select--success {
--sb-ui-select-border-color: var(--sb-ui-select-border-color-success);
--sb-ui-select-border-color-focus: var(--sb-ui-select-border-color-success);
--sb-ui-select-shadow-focus: 0 0 0 3px
var(--sb-ui-color-feedback-success-L400, rgba(40, 167, 69, 0.1));
}
.sb-ui-select--success:focus {
border-color: var(--sb-ui-select-border-color-success);
box-shadow: var(--sb-ui-select-shadow-focus);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2328a745' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
}
/* Warning state */
.sb-ui-select--warning {
--sb-ui-select-border-color: var(--sb-ui-color-feedback-warning-base, #ffc107);
--sb-ui-select-border-color-focus: var(--sb-ui-color-feedback-warning-base, #ffc107);
--sb-ui-select-shadow-focus: 0 0 0 3px
var(--sb-ui-color-feedback-warning-L400, rgba(255, 193, 7, 0.1));
}
.sb-ui-select--warning:focus {
border-color: var(--sb-ui-color-feedback-warning-base, #ffc107);
box-shadow: var(--sb-ui-select-shadow-focus);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffc107' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
}
/* ========================================
SELECT SIZES
======================================== */
.sb-ui-select--small {
--sb-ui-select-padding-x: 0.75rem;
--sb-ui-select-padding-y: 0.5rem;
--sb-ui-select-font-size: 0.875rem;
--sb-ui-select-min-height: 32px;
--sb-ui-select-line-height: 1.25;
--sb-ui-select-padding-icon-left: 2rem;
--sb-ui-select-padding-icon-right: 2rem;
--sb-ui-select-arrow-size: 10px;
}
.sb-ui-select--medium {
--sb-ui-select-padding-x: 1rem;
--sb-ui-select-padding-y: 0.75rem;
--sb-ui-select-font-size: 1rem;
--sb-ui-select-min-height: 40px;
--sb-ui-select-line-height: 1.5;
--sb-ui-select-padding-icon-left: 2.5rem;
--sb-ui-select-padding-icon-right: 2.5rem;
--sb-ui-select-arrow-size: 12px;
}
.sb-ui-select--large {
--sb-ui-select-padding-x: 1.25rem;
--sb-ui-select-padding-y: 1rem;
--sb-ui-select-font-size: 1.125rem;
--sb-ui-select-min-height: 48px;
--sb-ui-select-line-height: 1.5;
--sb-ui-select-padding-icon-left: 3rem;
--sb-ui-select-padding-icon-right: 3rem;
--sb-ui-select-arrow-size: 14px;
}
/* ========================================
SELECT MODIFIERS
======================================== */
/* Rounded corners */
.sb-ui-select--rounded {
--sb-ui-select-border-radius: 2.1rem;
}
/* Block (full width) - ya es por defecto */
.sb-ui-select--block {
width: 100%;
}
/* Inline (auto width) */
.sb-ui-select--inline {
width: auto;
min-width: 200px;
}
/* With left icon */
.sb-ui-select--with-icon-left {
padding-left: var(--sb-ui-select-padding-icon-left);
}
/* With right icon */
.sb-ui-select--with-icon-right {
padding-right: var(--sb-ui-select-padding-icon-right);
}
/* With both icons */
.sb-ui-select--with-icon-both {
padding-left: var(--sb-ui-select-padding-icon-left);
padding-right: var(--sb-ui-select-padding-icon-right);
}
/* No arrow (for custom implementations) */
.sb-ui-select--no-arrow {
background-image: none;
padding-right: var(--sb-ui-select-padding-x);
}
/* ========================================
SELECT CONTAINER (for icons and labels)
======================================== */
.sb-ui-select-container {
position: relative;
display: block;
width: 100%;
}
.sb-ui-select-container--inline {
display: inline-block;
width: auto;
}
/* Select icon positioning */
.sb-ui-select-icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
color: var(--sb-ui-color-grayscale-base, #d9d9d9);
font-size: 1rem;
pointer-events: none;
z-index: 2;
transition: var(--sb-ui-select-transition);
}
.sb-ui-select-icon--left {
left: 0.75rem;
}
.sb-ui-select-icon--right {
right: 0.75rem;
}
/* Icon color changes on focus */
.sb-ui-select:focus + .sb-ui-select-icon,
.sb-ui-select-container:focus-within .sb-ui-select-icon {
color: var(--sb-ui-color-primary-base, #007acc);
}
/* Icon color for error state */
.sb-ui-select--error + .sb-ui-select-icon,
.sb-ui-select-container:has(.sb-ui-select--error) .sb-ui-select-icon {
color: var(--sb-ui-color-feedback-error-base, #dc3545);
}
/* Icon color for success state */
.sb-ui-select--success + .sb-ui-select-icon,
.sb-ui-select-container:has(.sb-ui-select--success) .sb-ui-select-icon {
color: var(--sb-ui-color-feedback-success-base, #28a745);
}
/* ========================================
SELECT LABEL
======================================== */
.sb-ui-select-label {
display: block;
margin-bottom: 0.5rem;
font-family: var(--sb-ui-select-font-family);
font-size: 0.875rem;
font-weight: 600;
color: var(--sb-ui-color-grayscale-D300, #404040);
line-height: 1.25;
}
.sb-ui-select-label--required::after {
content: ' *';
color: var(--sb-ui-color-feedback-error-base, #dc3545);
}
.sb-ui-select-label--optional::after {
content: ' (opcional)';
color: var(--sb-ui-color-grayscale-base, #d9d9d9);
font-weight: 400;
}
/* ========================================
SELECT HELPER TEXT
======================================== */
.sb-ui-select-helper {
display: block;
margin-top: 0.25rem;
font-family: var(--sb-ui-select-font-family);
font-size: 0.75rem;
color: var(--sb-ui-color-grayscale-base, #d9d9d9);
line-height: 1.25;
}
.sb-ui-select-helper--error {
color: var(--sb-ui-color-feedback-error-base, #dc3545);
}
.sb-ui-select-helper--success {
color: var(--sb-ui-color-feedback-success-base, #28a745);
}
.sb-ui-select-helper--warning {
color: var(--sb-ui-color-feedback-warning-base, #ffc107);
}
/* ========================================
SELECT GROUP (multiple selects)
======================================== */
.sb-ui-select-group {
display: flex;
width: 100%;
gap: 1rem;
}
.sb-ui-select-group--vertical {
flex-direction: column;
gap: 1rem;
}
.sb-ui-select-group--horizontal {
flex-direction: row;
gap: 1rem;
}
.sb-ui-select-group--horizontal .sb-ui-select {
flex: 1;
}
/* ========================================
MULTIPLE SELECT
======================================== */
.sb-ui-select[multiple] {
min-height: 120px;
padding: 0.5rem;
background-image: none;
padding-right: var(--sb-ui-select-padding-x);
}
.sb-ui-select[multiple] option {
padding: 0.5rem;
margin: 0.25rem 0;
border-radius: 4px;
background-color: var(--sb-ui-color-grayscale-L400, #f7f7f7);
}
.sb-ui-select[multiple] option:checked {
background-color: var(--sb-ui-color-primary-base, #007acc);
color: var(--sb-ui-color-grayscale-white, #ffffff);
}
.sb-ui-select[multiple] option:hover {
background-color: var(--sb-ui-color-primary-L400, rgba(0, 122, 204, 0.1));
}
/* ========================================
SELECT OPTIONS GROUP
======================================== */
.sb-ui-select optgroup {
font-weight: 600;
color: var(--sb-ui-color-grayscale-D300, #404040);
background-color: var(--sb-ui-color-grayscale-L300, #f2f3f5);
padding: 0.5rem;
}
.sb-ui-select optgroup option {
font-weight: 400;
padding-left: 1rem;
}
/* ========================================
ACCESSIBILITY & RESPONSIVE
======================================== */
/* High contrast mode support */
@media (prefers-contrast: high) {
.sb-ui-select {
--sb-ui-select-border-width: 2px;
}
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
.sb-ui-select {
--sb-ui-select-transition: none;
}
}
/* Mobile optimizations */
@media (width <= 640px) {
.sb-ui-select {
font-size: 16px; /* Prevents zoom on iOS */
}
.sb-ui-select--small {
font-size: 16px;
}
.sb-ui-select-group--horizontal {
flex-direction: column;
}
}
/* Desktop optimizations */
@media (width >= 641px) {
.sb-ui-select--inline {
min-width: 250px;
}
}
/* Print styles */
@media print {
.sb-ui-select {
background: transparent !important;
color: black !important;
border: 1px solid black !important;
box-shadow: none !important;
background-image: none !important;
}
.sb-ui-select option {
background: transparent !important;
color: black !important;
}
}
/* ========================================
FOCUS VISIBLE (keyboard navigation)
======================================== */
.sb-ui-select:focus-visible {
outline: 2px solid var(--sb-ui-color-primary-base, #007acc);
outline-offset: 2px;
}
/* ========================================
VALIDATION STYLES
======================================== */
.sb-ui-select:valid:not([value='']) {
/* Success styling for valid selects */
}
.sb-ui-select:invalid:not([value='']) {
/* Error styling for invalid selects */
}
/* Custom validation message styling */
.sb-ui-select:invalid:not([value='']) + .sb-ui-select-helper {
color: var(--sb-ui-color-feedback-error-base, #dc3545);
}
/* ========================================
LOADING STATE
======================================== */
.sb-ui-select--loading {
position: relative;
pointer-events: none;
opacity: 0.7;
background-image: none;
}
.sb-ui-select--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-select-spinner 1s linear infinite;
z-index: 3;
}
@keyframes rb-select-spinner {
to {
transform: rotate(360deg);
}
}
/* ========================================
DARK MODE SUPPORT
======================================== */
@media (prefers-color-scheme: dark) {
.sb-ui-select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23edeef0' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
}
.sb-ui-select:focus {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23007acc' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
}
.sb-ui-select[multiple] option {
background-color: var(--sb-ui-color-grayscale-D200, #6e6e6e);
color: var(--sb-ui-color-grayscale-L200, #edeef0);
}
.sb-ui-select[multiple] option:checked {
background-color: var(--sb-ui-color-primary-base, #007acc);
color: var(--sb-ui-color-grayscale-white, #ffffff);
}
}
/* ========================================
CUSTOM SELECT STYLING (for advanced use cases)
======================================== */
.sb-ui-select--custom {
background-image: none;
padding-right: var(--sb-ui-select-padding-x);
}
.sb-ui-select--custom + .sb-ui-select-icon {
right: 1rem;
pointer-events: none;
}
/* ========================================
SELECT SIZE VARIANTS
======================================== */
/* Compact select for forms */
.sb-ui-select--compact {
--sb-ui-select-padding-x: 0.5rem;
--sb-ui-select-padding-y: 0.375rem;
--sb-ui-select-font-size: 0.875rem;
--sb-ui-select-min-height: 28px;
--sb-ui-select-arrow-size: 10px;
}
/* Large select for prominent selection */
.sb-ui-select--prominent {
--sb-ui-select-padding-x: 1.5rem;
--sb-ui-select-padding-y: 1.25rem;
--sb-ui-select-font-size: 1.25rem;
--sb-ui-select-min-height: 56px;
--sb-ui-select-arrow-size: 16px;
--sb-ui-select-border-width: 2px;
}
/* ========================================
SELECT THEME VARIANTS
======================================== */
/* Minimal select */
.sb-ui-select--minimal {
--sb-ui-select-border-width: 0;
--sb-ui-select-border-radius: 0;
--sb-ui-select-shadow: none;
--sb-ui-select-shadow-focus: none;
border-bottom: 2px solid var(--sb-ui-select-border-color);
}
.sb-ui-select--minimal:focus {
border-bottom-color: var(--sb-ui-select-border-color-focus);
box-shadow: none;
}
/* Filled select */
.sb-ui-select--filled {
--sb-ui-select-bg-color: var(--sb-ui-color-grayscale-L400, #f7f7f7);
--sb-ui-select-border-color: transparent;
}
.sb-ui-select--filled:focus {
--sb-ui-select-bg-color: var(--sb-ui-color-grayscale-white, #ffffff);
--sb-ui-select-border-color: var(--sb-ui-select-border-color-focus);
}
/* ========================================
ANIMATIONS
======================================== */
/* Select focus animation */
@keyframes rb-select-focus {
0% {
box-shadow: var(--sb-ui-select-shadow);
}
100% {
box-shadow: var(--sb-ui-select-shadow-focus);
}
}
/* Select error shake animation */
@keyframes rb-select-shake {
0%,
100% {
transform: translateX(0);
}
10%,
30%,
50%,
70%,
90% {
transform: translateX(-2px);
}
20%,
40%,
60%,
80% {
transform: translateX(2px);
}
}
/* Apply shake animation to error selects */
.sb-ui-select--error {
animation: rb-select-shake 0.5s ease-in-out;
}
/* ========================================
ACCESSIBILITY & RESPONSIVE
======================================== */
/* High contrast mode support */
@media (prefers-contrast: high) {
.sb-ui-select {
--sb-ui-select-border-width: 2px;
}
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
.sb-ui-select {
--sb-ui-select-transition: none;
}
.sb-ui-select--error {
animation: none;
}
}
/* Mobile optimizations */
@media (width <= 640px) {
.sb-ui-select {
font-size: 16px; /* Prevents zoom on iOS */
}
.sb-ui-select--small {
font-size: 16px;
}
}
/* Desktop optimizations */
@media (width >= 641px) {
.sb-ui-select--inline {
min-width: 200px;
}
}
/* Print styles */
@media print {
.sb-ui-select {
background: transparent !important;
color: black !important;
border: 1px solid black !important;
box-shadow: none !important;
}
}
@layer reset, tokens, base, variants, modifiers, states, utilities;
/**
* Spinner Component - Seguros Bolivar UI Design System
* - CSS Nesting nativo con &
* - @layer para control de cascada
* - Logical Properties (RTL/LTR)
* - clamp() para responsive fluido
*
* TIPOS:
* - basic: Solo spinner circular con gradiente
* - integrated: Spinner con doble cĂrculo (verde + amarillo)
* - icon: Spinner con icono centrado
* - icon-text: Spinner con icono y texto
*
* TAMAĂO:
* - Default: 40x40px (Ășnico tamaño, no hay small/medium/large)
*
* ESTADOS DE PROGRESO:
* - data-progress="0-100" (dinĂĄmico con CSS variables)
* - Ejemplos: 25% (90deg), 50% (180deg), 75% (270deg), 100% (360deg)
*
* VELOCIDAD:
* - Default: 1.2s
* - --fast: 0.8s
* - --slow: 2s
*
* Uso:
*/
/* ========================================
KEYFRAMES - Fuera de @layer
======================================== */
@keyframes sb-ui-spinner-rotate {
to {
transform: rotate(360deg);
}
}
/* ========================================
RESET LAYER
======================================== */
@layer reset {
.sb-ui-spinner {
all: unset;
box-sizing: border-box;
}
}
/* ========================================
TOKENS LAYER - Variables CSS
======================================== */
@layer tokens {
.sb-ui-spinner {
/* Colores */
--sb-ui-spinner-gradient-start: var(--sb-ui-color-primary-D200, #05794a);
--sb-ui-spinner-gradient-end: var(--sb-ui-color-primary-D100, #009056);
/* Tamaños */
--sb-ui-spinner-size: clamp(32px, 6vw, 40px);
--sb-ui-spinner-stroke-width: clamp(3px, 0.5vw, 4px);
--sb-ui-spinner-border-radius: 50%;
/* TipografĂa */
--sb-ui-spinner-font-family: var(--sb-ui-typography-fontFamily, 'Roboto', sans-serif);
/* Animation */
--sb-ui-spinner-duration: 1.2s;
/* Progress (0-100) */
--sb-ui-spinner-progress: 25;
--sb-ui-spinner-angle: calc(var(--sb-ui-spinner-progress) * 3.6deg);
/* MĂĄscara reutilizable para crear el efecto de anillo */
--sb-ui-spinner-mask: radial-gradient(
farthest-side,
transparent calc(100% - var(--sb-ui-spinner-stroke-width) - 1px),
#fff calc(100% - var(--sb-ui-spinner-stroke-width))
);
}
}
/* ========================================
BASE LAYER - Estilos base
======================================== */
@layer base {
.sb-ui-spinner {
display: inline-flex;
place-items: center;
position: relative;
inline-size: var(--sb-ui-spinner-size);
block-size: var(--sb-ui-spinner-size);
border-radius: var(--sb-ui-spinner-border-radius);
animation: sb-ui-spinner-rotate var(--sb-ui-spinner-duration) linear infinite;
will-change: transform;
}
.sb-ui-spinner::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: conic-gradient(
from 0deg,
var(--sb-ui-spinner-gradient-start) 0%,
var(--sb-ui-spinner-gradient-end) var(--sb-ui-spinner-angle),
transparent var(--sb-ui-spinner-angle)
);
-webkit-mask: var(--sb-ui-spinner-mask);
mask: var(--sb-ui-spinner-mask);
}
.sb-ui-spinner .sb-ui-spinner__content {
position: absolute;
inset: 50% auto auto 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
place-items: center;
gap: 0.25rem;
}
.sb-ui-spinner .sb-ui-spinner__icon {
inline-size: calc(var(--sb-ui-spinner-size) * 0.5);
block-size: calc(var(--sb-ui-spinner-size) * 0.5);
display: flex;
place-items: center;
}
:is(.sb-ui-spinner .sb-ui-spinner__icon) svg,:is(.sb-ui-spinner .sb-ui-spinner__icon) img {
inline-size: 100%;
block-size: 100%;
}
.sb-ui-spinner .sb-ui-spinner__label {
font-family: var(--sb-ui-spinner-font-family);
font-size: calc(var(--sb-ui-spinner-size) * 0.2);
font-weight: 600;
line-height: 1;
color: var(--sb-ui-spinner-gradient-start);
text-align: center;
max-inline-size: calc(var(--sb-ui-spinner-size) * 0.8);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
/* ========================================
VARIANTS LAYER
======================================== */
@layer variants {
/* INTEGRATED - 3 cĂrculos concĂ©ntricos con velocidades diferentes */
.sb-ui-spinner--integrated {
/* Tamaño mĂĄs grande para acomodar 3 cĂrculos */
--sb-ui-spinner-size: clamp(80px, 12vw, 150px);
/* Desactivar ::before del base (no usa progreso) */
}
.sb-ui-spinner--integrated::before {
display: none;
}
.sb-ui-spinner--integrated {
/* CĂrculo externo (verde oscuro) - 2s */
border: 3px solid transparent;
border-top-color: #009056;
animation: sb-ui-spinner-rotate 2s linear infinite;
/* CĂrculo medio (verde claro) - 3s */
}
.sb-ui-spinner--integrated::before {
content: '';
display: block;
position: absolute;
inset: 5px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #02d46f;
animation: sb-ui-spinner-rotate 3s linear infinite;
}
/* CĂrculo interno (amarillo) - 1.5s */
.sb-ui-spinner--integrated::after {
content: '';
position: absolute;
inset: 15px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #ffe16f;
animation: sb-ui-spinner-rotate 1.5s linear infinite;
}
/* ICON & ICON-TEXT - Contenido interno estĂĄtico (no rota) */
.sb-ui-spinner--icon .sb-ui-spinner__content,
.sb-ui-spinner--icon-text .sb-ui-spinner__content {
animation: sb-ui-spinner-rotate var(--sb-ui-spinner-duration) linear infinite reverse;
will-change: transform;
}
}
/* ========================================
MODIFIERS LAYER
======================================== */
@layer modifiers {
.sb-ui-spinner--fast {
--sb-ui-spinner-duration: 0.8s;
}
.sb-ui-spinner--slow {
--sb-ui-spinner-duration: 2s;
}
.sb-ui-spinner--paused {
animation-play-state: paused;
}
.sb-ui-spinner--paused .sb-ui-spinner__content {
animation-play-state: paused;
}
}
/* ========================================
STATES LAYER
======================================== */
@layer states {
.sb-ui-spinner[data-progress='25'] {
--sb-ui-spinner-progress: 25;
}
.sb-ui-spinner[data-progress='50'] {
--sb-ui-spinner-progress: 50;
}
.sb-ui-spinner[data-progress='75'] {
--sb-ui-spinner-progress: 75;
}
.sb-ui-spinner[data-progress='100'] {
--sb-ui-spinner-progress: 100;
}
}
/* ========================================
UTILITIES LAYER
======================================== */
@layer utilities {
@media (prefers-reduced-motion: reduce) {
.sb-ui-spinner,
.sb-ui-spinner .sb-ui-spinner__content,
.sb-ui-spinner::before {
animation: none;
}
}
@media (prefers-contrast: high) {
.sb-ui-spinner {
--sb-ui-spinner-stroke-width: clamp(4px, 0.6vw, 6px);
outline: 1px solid currentColor;
}
}
}
@layer reset, tokens, base, variants, layouts, states, utilities;
/**
* Tabs Component - Seguros Bolivar UI Design System
* - CSS Nesting nativo con &
* - @layer para control de cascada
* - Logical Properties (RTL/LTR)
* - clamp() para responsive fluido
*
* Uso:
*
*
*/
/* ========================================
RESET LAYER
======================================== */
@layer reset {
.sb-ui-tabs {
all: unset;
box-sizing: border-box;
}
.sb-ui-tabs__item {
all: unset;
box-sizing: border-box;
}
}
/* ========================================
TOKENS LAYER - Variables CSS
======================================== */
@layer tokens {
.sb-ui-tabs {
/* Colores BASE - Estados interactivos */
--sb-ui-tabs-bg-color: transparent;
--sb-ui-tabs-bg-hover: var(--sb-ui-color-secondary-L400, #fffcf0);
--sb-ui-tabs-bg-active: var(--sb-ui-color-secondary-L400, #fffcf0);
--sb-ui-tabs-bg-disabled: transparent;
--sb-ui-tabs-text-color: var(--sb-ui-color-grayscale-D200, #5b5b5b);
--sb-ui-tabs-text-hover: var(--sb-ui-color-grayscale-D200, #5b5b5b);
--sb-ui-tabs-text-active: var(--sb-ui-color-primary-base, #038450);
--sb-ui-tabs-text-disabled: var(--sb-ui-color-grayscale-base, #9b9b9b);
--sb-ui-tabs-icon-color: var(--sb-ui-color-grayscale-base, #9b9b9b);
--sb-ui-tabs-icon-hover: var(--sb-ui-color-primary-base, #038450);
--sb-ui-tabs-icon-active: var(--sb-ui-color-primary-base, #038450);
--sb-ui-tabs-icon-disabled: var(--sb-ui-color-grayscale-L100, #d0d0d0);
--sb-ui-tabs-border-color: var(--sb-ui-color-grayscale-L200, #e1e1e1);
--sb-ui-tabs-border-active: var(--sb-ui-color-primary-base, #038450);
/* Espaciado de tabs (muy compactos segĂșn diseño) */
--sb-ui-tabs-padding-inline: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
--sb-ui-tabs-padding-block: clamp(0.375rem, 0.3rem + 0.3vw, 0.5rem);
--sb-ui-tabs-gap: clamp(0.25rem, 0.2rem + 0.2vw, 0.375rem);
/* Espaciado del panel de contenido (mĂĄs espacioso) */
--sb-ui-tabs-panel-padding-inline: clamp(2rem, 1.5rem + 2vw, 3rem);
--sb-ui-tabs-panel-padding-block: clamp(2rem, 1.5rem + 2vw, 3rem);
--sb-ui-tabs-panel-margin-block-start: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
/* TipografĂa - SIEMPRE con clamp() */
--sb-ui-tabs-font-family: var(--sb-ui-typography-fontFamily, 'Roboto', sans-serif);
--sb-ui-tabs-title-font-size: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);
--sb-ui-tabs-title-font-weight: 500;
--sb-ui-tabs-description-font-size: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
--sb-ui-tabs-description-font-weight: 400;
--sb-ui-tabs-line-height: 1.5;
/* Tamaños - Logical properties */
--sb-ui-tabs-min-inline-size: clamp(80px, 15vw, 120px);
/* Bordes */
--sb-ui-tabs-border-width: 1px;
--sb-ui-tabs-border-radius: clamp(6px, 0.4rem + 0.3vw, 8px);
--sb-ui-tabs-indicator-size: 2px;
/* Iconos */
--sb-ui-tabs-icon-size: clamp(1rem, 0.9rem + 0.3vw, 1.25rem);
/* Transiciones */
--sb-ui-tabs-transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
}
/* ========================================
BASE LAYER - Estilos base
======================================== */
@layer base {
.sb-ui-tabs {
/* Layout */
display: flex;
position: relative;
/* Typography */
font-family: var(--sb-ui-tabs-font-family);
}
.sb-ui-tabs__item {
/* Layout */
display: flex;
align-items: center;
gap: var(--sb-ui-tabs-gap);
position: relative;
/* Spacing */
padding-inline: var(--sb-ui-tabs-padding-inline);
padding-block: var(--sb-ui-tabs-padding-block);
/* Typography */
font-family: var(--sb-ui-tabs-font-family);
text-align: start;
/* Appearance */
background-color: var(--sb-ui-tabs-bg-color);
color: var(--sb-ui-tabs-text-color);
border: none;
/* Interaction */
cursor: pointer;
user-select: none;
/* Animation */
transition: var(--sb-ui-tabs-transition);
/* Nested Pseudo-classes */
}
.sb-ui-tabs__item:hover:not(:disabled):not(.sb-ui-tabs__item--disabled) {
background-color: var(--sb-ui-tabs-bg-hover);
color: var(--sb-ui-tabs-text-hover);
}
.sb-ui-tabs__item:hover:not(:disabled):not(.sb-ui-tabs__item--disabled) .sb-ui-tabs__icon {
color: var(--sb-ui-tabs-icon-hover);
}
.sb-ui-tabs__item:active:not(:disabled):not(.sb-ui-tabs__item--disabled) {
background-color: var(--sb-ui-tabs-bg-active);
}
.sb-ui-tabs__item:focus-visible:not(:disabled):not(.sb-ui-tabs__item--disabled) {
outline: 3px solid var(--sb-ui-color-secondary-L100);
outline-offset: 2px;
}
.sb-ui-tabs__item:disabled,.sb-ui-tabs__item.sb-ui-tabs__item--disabled {
color: var(--sb-ui-tabs-text-disabled);
cursor: not-allowed;
pointer-events: none;
}
:is(.sb-ui-tabs__item:disabled,.sb-ui-tabs__item.sb-ui-tabs__item--disabled) .sb-ui-tabs__icon {
color: var(--sb-ui-tabs-icon-disabled);
}
/* Active state */
.sb-ui-tabs__item.sb-ui-tabs__item--active {
color: var(--sb-ui-tabs-text-active);
}
.sb-ui-tabs__item.sb-ui-tabs__item--active .sb-ui-tabs__icon {
color: var(--sb-ui-tabs-icon-active);
}
.sb-ui-tabs__icon {
/* Layout */
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
/* Size */
inline-size: var(--sb-ui-tabs-icon-size);
block-size: var(--sb-ui-tabs-icon-size);
font-size: var(--sb-ui-tabs-icon-size);
/* Color */
color: var(--sb-ui-tabs-icon-color);
/* Animation */
transition: var(--sb-ui-tabs-transition);
}
.sb-ui-tabs__content {
/* Layout */
display: flex;
flex-direction: column;
gap: clamp(0.0625rem, 0.05rem + 0.1vw, 0.125rem);
flex: 1;
}
.sb-ui-tabs__title {
/* Typography */
font-size: var(--sb-ui-tabs-title-font-size);
font-weight: var(--sb-ui-tabs-title-font-weight);
line-height: var(--sb-ui-tabs-line-height);
}
.sb-ui-tabs__description {
/* Typography */
font-size: var(--sb-ui-tabs-description-font-size);
font-weight: var(--sb-ui-tabs-description-font-weight);
line-height: var(--sb-ui-tabs-line-height);
color: var(--sb-ui-tabs-text-color);
}
.sb-ui-tabs__panel {
/* Layout */
display: none;
/* Spacing */
padding-inline: var(--sb-ui-tabs-panel-padding-inline);
padding-block: var(--sb-ui-tabs-panel-padding-block);
margin-block-start: var(--sb-ui-tabs-panel-margin-block-start);
/* Typography */
font-family: var(--sb-ui-tabs-font-family);
font-size: var(--sb-ui-tabs-title-font-size);
line-height: var(--sb-ui-tabs-line-height);
color: var(--sb-ui-tabs-text-color);
/* Appearance */
background-color: transparent;
/* Active panel */
}
.sb-ui-tabs__panel.sb-ui-tabs__panel--active {
display: block;
}
}
/* ========================================
VARIANTS LAYER - Track, Button, Folder
======================================== */
@layer variants {
/* Track variant - con lĂnea indicadora */
.sb-ui-tabs--track .sb-ui-tabs__item {
background-color: transparent;
}
/* Button variant - con fondo en active */
.sb-ui-tabs--button .sb-ui-tabs__item.sb-ui-tabs__item--active {
background-color: var(--sb-ui-tabs-bg-active);
}
/* Folder variant - sin fondo especial */
.sb-ui-tabs--folder .sb-ui-tabs__item {
background-color: transparent;
}
}
/* ========================================
LAYOUTS LAYER - Horizontal y Vertical
======================================== */
@layer layouts {
/* Horizontal layout */
.sb-ui-tabs--horizontal {
flex-direction: row;
border-block-end: var(--sb-ui-tabs-border-width) solid var(--sb-ui-tabs-border-color);
}
.sb-ui-tabs--horizontal .sb-ui-tabs__item {
flex-direction: column;
text-align: center;
/* Indicador inferior */
}
:is(.sb-ui-tabs--horizontal .sb-ui-tabs__item)::after {
content: '';
position: absolute;
inset-inline-start: 0;
inset-inline-end: 0;
inset-block-end: calc(-1 * var(--sb-ui-tabs-border-width));
block-size: var(--sb-ui-tabs-indicator-size);
background-color: transparent;
transition: background-color 0.2s ease;
}
.sb-ui-tabs__item--active:is(.sb-ui-tabs--horizontal .sb-ui-tabs__item)::after {
background-color: var(--sb-ui-tabs-border-active);
}
.sb-ui-tabs--horizontal .sb-ui-tabs__content {
align-items: center;
}
/* Vertical layout */
.sb-ui-tabs--vertical {
flex-direction: column;
border-inline-start: var(--sb-ui-tabs-border-width) solid var(--sb-ui-tabs-border-color);
}
.sb-ui-tabs--vertical .sb-ui-tabs__item {
flex-direction: row;
inline-size: 100%;
/* Indicador lateral */
}
:is(.sb-ui-tabs--vertical .sb-ui-tabs__item)::before {
content: '';
position: absolute;
inset-inline-start: calc(-1 * var(--sb-ui-tabs-border-width));
inset-block-start: 0;
inset-block-end: 0;
inline-size: var(--sb-ui-tabs-indicator-size);
background-color: transparent;
transition: background-color 0.2s ease;
}
.sb-ui-tabs__item--active:is(.sb-ui-tabs--vertical .sb-ui-tabs__item)::before {
background-color: var(--sb-ui-tabs-border-active);
}
}
/* ========================================
STATES LAYER
======================================== */
@layer states {
.sb-ui-tabs--loading {
pointer-events: none;
opacity: 0.7;
}
}
/* ========================================
UTILITIES LAYER (mĂĄxima prioridad)
======================================== */
@layer utilities {
/* High contrast mode support */
@media (prefers-contrast: high) {
.sb-ui-tabs {
--sb-ui-tabs-border-width: 2px;
--sb-ui-tabs-indicator-size: 3px;
}
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
.sb-ui-tabs {
--sb-ui-tabs-transition: none;
}
.sb-ui-tabs__icon {
transition: none;
}
}
/* Mobile responsive */
@media (inline-size <= 640px) {
.sb-ui-tabs--horizontal {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
}
/**
* TextArea Component - Seguros BolĂvar UI Design System
* Componente CSS puro con variables --sb-ui-* personalizables por marca
* Incluye contador de caracteres y auto-resize
*
* Uso:
*
*
*
*/
/* ========================================
VARIABLES CSS PERSONALIZABLES Y ESTILOS BASE
======================================== */
.sb-ui-textarea {
/* Colores - Pueden ser sobreescritos por marca */
--sb-ui-textarea-bg-color: var(--sb-ui-color-grayscale-white, #ffffff);
--sb-ui-textarea-bg-disabled: var(--sb-ui-color-grayscale-L300, #f2f3f5);
--sb-ui-textarea-text-color: var(--sb-ui-color-grayscale-D300, #404040);
--sb-ui-textarea-text-placeholder: var(--sb-ui-color-grayscale-base, #d9d9d9);
--sb-ui-textarea-text-disabled: var(--sb-ui-color-grayscale-base, #d9d9d9);
--sb-ui-textarea-border-color: var(--sb-ui-color-grayscale-L200, #edeef0);
--sb-ui-textarea-border-color-focus: var(--sb-ui-color-primary-base, #007acc);
--sb-ui-textarea-border-color-error: var(--sb-ui-color-feedback-error-base, #dc3545);
--sb-ui-textarea-border-color-success: var(--sb-ui-color-feedback-success-base, #28a745);
--sb-ui-textarea-border-width: 1px;
--sb-ui-textarea-border-radius: 8px;
/* Espaciado */
--sb-ui-textarea-padding-x: 1rem;
--sb-ui-textarea-padding-y: 0.75rem;
--sb-ui-textarea-padding-bottom-counter: 2.5rem;
/* TipografĂa */
--sb-ui-textarea-font-family: var(--sb-ui-typography-fontFamily, 'Roboto', sans-serif);
--sb-ui-textarea-font-size: 1rem;
--sb-ui-textarea-font-weight: 400;
--sb-ui-textarea-line-height: 1.5;
/* Tamaños */
--sb-ui-textarea-min-height: 80px;
--sb-ui-textarea-max-height: 200px;
/* Sombras */
--sb-ui-textarea-shadow: none;
--sb-ui-textarea-shadow-focus: 0 0 0 3px var(--sb-ui-color-primary-L400, rgba(0, 122, 204, 0.1));
/* Transiciones */
--sb-ui-textarea-transition: all 0.2s ease;
/* Resize */
--sb-ui-textarea-resize: vertical;
/* Layout */
display: block;
width: 100%;
position: relative;
box-sizing: border-box;
/* Spacing */
padding: var(--sb-ui-textarea-padding-y) var(--sb-ui-textarea-padding-x);
/* Sizing */
min-height: var(--sb-ui-textarea-min-height);
max-height: var(--sb-ui-textarea-max-height);
/* Typography */
font-family: var(--sb-ui-textarea-font-family);
font-style: normal;
font-weight: var(--sb-ui-textarea-font-weight);
font-size: var(--sb-ui-textarea-font-size);
line-height: var(--sb-ui-textarea-line-height);
/* Appearance */
background-color: var(--sb-ui-textarea-bg-color);
color: var(--sb-ui-textarea-text-color);
border: var(--sb-ui-textarea-border-width) solid var(--sb-ui-textarea-border-color);
border-radius: var(--sb-ui-textarea-border-radius);
box-shadow: var(--sb-ui-textarea-shadow);
outline: none;
resize: var(--sb-ui-textarea-resize);
/* Animation */
transition: var(--sb-ui-textarea-transition);
}
/* Placeholder styling */
.sb-ui-textarea::placeholder {
color: var(--sb-ui-textarea-text-placeholder);
opacity: 1;
}
.sb-ui-textarea::-webkit-input-placeholder {
color: var(--sb-ui-textarea-text-placeholder);
opacity: 1;
}
.sb-ui-textarea::-moz-placeholder {
color: var(--sb-ui-textarea-text-placeholder);
opacity: 1;
}
.sb-ui-textarea:-ms-input-placeholder {
color: var(--sb-ui-textarea-text-placeholder);
opacity: 1;
}
/* Focus state */
.sb-ui-textarea:focus {
border-color: var(--sb-ui-textarea-border-color-focus);
box-shadow: var(--sb-ui-textarea-shadow-focus);
}
/* Disabled state */
.sb-ui-textarea:disabled {
background-color: var(--sb-ui-textarea-bg-disabled);
color: var(--sb-ui-textarea-text-disabled);
border-color: var(--sb-ui-textarea-bg-disabled);
cursor: not-allowed;
opacity: 0.6;
resize: none;
}
.sb-ui-textarea:disabled::placeholder {
color: var(--sb-ui-textarea-text-disabled);
}
/* ========================================
TEXTAREA VARIANTS
======================================== */
/* Default textarea (no specific variant) */
.sb-ui-textarea {
/* Usa estilos base */
}
/* ========================================
TEXTAREA STATES
======================================== */
/* Error state */
.sb-ui-textarea--error {
--sb-ui-textarea-border-color: var(--sb-ui-textarea-border-color-error);
--sb-ui-textarea-border-color-focus: var(--sb-ui-textarea-border-color-error);
--sb-ui-textarea-shadow-focus: 0 0 0 3px
var(--sb-ui-color-feedback-error-L400, rgba(220, 53, 69, 0.1));
}
.sb-ui-textarea--error:focus {
border-color: var(--sb-ui-textarea-border-color-error);
box-shadow: var(--sb-ui-textarea-shadow-focus);
}
/* Success state */
.sb-ui-textarea--success {
--sb-ui-textarea-border-color: var(--sb-ui-textarea-border-color-success);
--sb-ui-textarea-border-color-focus: var(--sb-ui-textarea-border-color-success);
--sb-ui-textarea-shadow-focus: 0 0 0 3px
var(--sb-ui-color-feedback-success-L400, rgba(40, 167, 69, 0.1));
}
.sb-ui-textarea--success:focus {
border-color: var(--sb-ui-textarea-border-color-success);
box-shadow: var(--sb-ui-textarea-shadow-focus);
}
/* Warning state */
.sb-ui-textarea--warning {
--sb-ui-textarea-border-color: var(--sb-ui-color-feedback-warning-base, #ffc107);
--sb-ui-textarea-border-color-focus: var(--sb-ui-color-feedback-warning-base, #ffc107);
--sb-ui-textarea-shadow-focus: 0 0 0 3px
var(--sb-ui-color-feedback-warning-L400, rgba(255, 193, 7, 0.1));
}
.sb-ui-textarea--warning:focus {
border-color: var(--sb-ui-color-feedback-warning-base, #ffc107);
box-shadow: var(--sb-ui-textarea-shadow-focus);
}
/* ========================================
TEXTAREA SIZES
======================================== */
.sb-ui-textarea--small {
--sb-ui-textarea-padding-x: 0.75rem;
--sb-ui-textarea-padding-y: 0.5rem;
--sb-ui-textarea-font-size: 0.875rem;
--sb-ui-textarea-min-height: 60px;
--sb-ui-textarea-max-height: 150px;
--sb-ui-textarea-line-height: 1.25;
--sb-ui-textarea-padding-bottom-counter: 2rem;
}
.sb-ui-textarea--medium {
--sb-ui-textarea-padding-x: 1rem;
--sb-ui-textarea-padding-y: 0.75rem;
--sb-ui-textarea-font-size: 1rem;
--sb-ui-textarea-min-height: 80px;
--sb-ui-textarea-max-height: 200px;
--sb-ui-textarea-line-height: 1.5;
--sb-ui-textarea-padding-bottom-counter: 2.5rem;
}
.sb-ui-textarea--large {
--sb-ui-textarea-padding-x: 1.25rem;
--sb-ui-textarea-padding-y: 1rem;
--sb-ui-textarea-font-size: 1.125rem;
--sb-ui-textarea-min-height: 100px;
--sb-ui-textarea-max-height: 250px;
--sb-ui-textarea-line-height: 1.5;
--sb-ui-textarea-padding-bottom-counter: 3rem;
}
/* ========================================
TEXTAREA MODIFIERS
======================================== */
/* Rounded corners */
.sb-ui-textarea--rounded {
--sb-ui-textarea-border-radius: 2.1rem;
}
/* Block (full width) - ya es por defecto */
.sb-ui-textarea--block {
width: 100%;
}
/* Inline (auto width) */
.sb-ui-textarea--inline {
width: auto;
min-width: 200px;
}
/* No resize */
.sb-ui-textarea--no-resize {
--sb-ui-textarea-resize: none;
}
/* Both resize */
.sb-ui-textarea--resize-both {
--sb-ui-textarea-resize: both;
}
/* Horizontal resize */
.sb-ui-textarea--resize-horizontal {
--sb-ui-textarea-resize: horizontal;
}
/* Auto resize (requires JavaScript) */
.sb-ui-textarea--auto-resize {
--sb-ui-textarea-resize: none;
overflow: hidden;
}
/* ========================================
TEXTAREA CONTAINER (for counter and labels)
======================================== */
.sb-ui-textarea-container {
position: relative;
display: block;
width: 100%;
}
.sb-ui-textarea-container--inline {
display: inline-block;
width: auto;
}
/* ========================================
CHARACTER COUNTER
======================================== */
.sb-ui-textarea-counter {
position: absolute;
bottom: 0.5rem;
right: 0.75rem;
font-family: var(--sb-ui-textarea-font-family);
font-size: 0.75rem;
font-weight: 400;
color: var(--sb-ui-color-grayscale-base, #d9d9d9);
line-height: 1;
pointer-events: none;
z-index: 2;
transition: var(--sb-ui-textarea-transition);
background-color: var(--sb-ui-textarea-bg-color, #ffffff);
padding: 0.25rem 0.5rem;
border-radius: 4px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
/* Counter states */
.sb-ui-textarea-counter--warning {
color: var(--sb-ui-color-feedback-warning-base, #ffc107);
font-weight: 600;
}
.sb-ui-textarea-counter--error {
color: var(--sb-ui-color-feedback-error-base, #dc3545);
font-weight: 600;
}
.sb-ui-textarea-counter--success {
color: var(--sb-ui-color-feedback-success-base, #28a745);
font-weight: 600;
}
/* Counter with background for better visibility */
.sb-ui-textarea-counter--with-bg {
background-color: var(--sb-ui-color-grayscale-L400, #f7f7f7);
border: 1px solid var(--sb-ui-color-grayscale-L200, #edeef0);
}
.sb-ui-textarea-counter--warning.sb-ui-textarea-counter--with-bg {
background-color: var(--sb-ui-color-feedback-warning-L400, #feeee5);
border-color: var(--sb-ui-color-feedback-warning-L300, #ffbb88);
}
.sb-ui-textarea-counter--error.sb-ui-textarea-counter--with-bg {
background-color: var(--sb-ui-color-feedback-error-L400, #fbe7e8);
border-color: var(--sb-ui-color-feedback-error-L300, #f5c2c7);
}
.sb-ui-textarea-counter--success.sb-ui-textarea-counter--with-bg {
background-color: var(--sb-ui-color-feedback-success-L400, #e5f3ec);
border-color: var(--sb-ui-color-feedback-success-L300, #7ed8ac);
}
/* ========================================
TEXTAREA WITH COUNTER
======================================== */
.sb-ui-textarea--with-counter {
padding-bottom: var(--sb-ui-textarea-padding-bottom-counter);
}
/* ========================================
TEXTAREA LABEL
======================================== */
.sb-ui-textarea-label {
display: block;
margin-bottom: 0.5rem;
font-family: var(--sb-ui-textarea-font-family);
font-size: 0.875rem;
font-weight: 600;
color: var(--sb-ui-color-grayscale-D300, #404040);
line-height: 1.25;
}
.sb-ui-textarea-label--required::after {
content: ' *';
color: var(--sb-ui-color-feedback-error-base, #dc3545);
}
.sb-ui-textarea-label--optional::after {
content: ' (opcional)';
color: var(--sb-ui-color-grayscale-base, #d9d9d9);
font-weight: 400;
}
/* ========================================
TEXTAREA HELPER TEXT
======================================== */
.sb-ui-textarea-helper {
display: block;
margin-top: 0.25rem;
font-family: var(--sb-ui-textarea-font-family);
font-size: 0.75rem;
color: var(--sb-ui-color-grayscale-base, #d9d9d9);
line-height: 1.25;
}
.sb-ui-textarea-helper--error {
color: var(--sb-ui-color-feedback-error-base, #dc3545);
}
.sb-ui-textarea-helper--success {
color: var(--sb-ui-color-feedback-success-base, #28a745);
}
.sb-ui-textarea-helper--warning {
color: var(--sb-ui-color-feedback-warning-base, #ffc107);
}
/* ========================================
TEXTAREA GROUP (multiple textareas)
======================================== */
.sb-ui-textarea-group {
display: flex;
flex-direction: column;
gap: 1rem;
width: 100%;
}
.sb-ui-textarea-group--horizontal {
flex-direction: row;
gap: 1rem;
}
.sb-ui-textarea-group--horizontal .sb-ui-textarea {
flex: 1;
}
/* ========================================
ACCESSIBILITY & RESPONSIVE
======================================== */
/* High contrast mode support */
@media (prefers-contrast: high) {
.sb-ui-textarea {
--sb-ui-textarea-border-width: 2px;
}
.sb-ui-textarea-counter {
border: 1px solid var(--sb-ui-color-grayscale-D200, #6e6e6e);
}
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
.sb-ui-textarea {
--sb-ui-textarea-transition: none;
}
}
/* Mobile optimizations */
@media (width <= 640px) {
.sb-ui-textarea {
font-size: 16px; /* Prevents zoom on iOS */
}
.sb-ui-textarea--small {
font-size: 16px;
}
.sb-ui-textarea-group--horizontal {
flex-direction: column;
}
.sb-ui-textarea-counter {
position: static;
margin-top: 0.5rem;
text-align: right;
background: none;
box-shadow: none;
padding: 0;
}
}
/* Desktop optimizations */
@media (width >= 641px) {
.sb-ui-textarea--inline {
min-width: 250px;
}
}
/* Print styles */
@media print {
.sb-ui-textarea {
background: transparent !important;
color: black !important;
border: 1px solid black !important;
box-shadow: none !important;
resize: none !important;
}
.sb-ui-textarea::placeholder {
color: #666 !important;
}
.sb-ui-textarea-counter {
display: none;
}
}
/* ========================================
FOCUS VISIBLE (keyboard navigation)
======================================== */
.sb-ui-textarea:focus-visible {
outline: 2px solid var(--sb-ui-color-primary-base, #007acc);
outline-offset: 2px;
}
/* ========================================
VALIDATION STYLES
======================================== */
.sb-ui-textarea:valid:not(:placeholder-shown) {
/* Success styling for valid textareas */
}
.sb-ui-textarea:invalid:not(:placeholder-shown) {
/* Error styling for invalid textareas */
}
/* Custom validation message styling */
.sb-ui-textarea:invalid:not(:placeholder-shown) + .sb-ui-textarea-helper {
color: var(--sb-ui-color-feedback-error-base, #dc3545);
}
/* ========================================
AUTO-RESIZE FUNCTIONALITY (CSS-only approach)
======================================== */
/* This requires JavaScript to work properly, but we provide the CSS structure */
.sb-ui-textarea--auto-resize {
resize: none;
overflow: hidden;
min-height: var(--sb-ui-textarea-min-height);
max-height: none;
}
/* ========================================
COUNTER ANIMATIONS
======================================== */
.sb-ui-textarea-counter--pulse {
animation: rb-textarea-counter-pulse 0.3s ease-in-out;
}
@keyframes rb-textarea-counter-pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
/* ========================================
LOADING STATE
======================================== */
.sb-ui-textarea--loading {
position: relative;
pointer-events: none;
opacity: 0.7;
}
.sb-ui-textarea--loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
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-textarea-spinner 1s linear infinite;
z-index: 3;
}
@keyframes rb-textarea-spinner {
to {
transform: rotate(360deg);
}
}
/* ========================================
DARK MODE SUPPORT
======================================== */
@media (prefers-color-scheme: dark) {
.sb-ui-textarea-counter {
background-color: var(--sb-ui-color-grayscale-D300, #404040);
color: var(--sb-ui-color-grayscale-L200, #edeef0);
}
.sb-ui-textarea-counter--with-bg {
background-color: var(--sb-ui-color-grayscale-D200, #6e6e6e);
border-color: var(--sb-ui-color-grayscale-D100, #8c8c8c);
}
}
/**
* Toggle Component - Seguros BolĂvar UI Design System
* Componente CSS puro con variables --sb-ui-* personalizables por marca
* Incluye estilos para toggle/switch nativo y customizado
*
* Uso:
*
*
*
*/
/* ========================================
VARIABLES CSS PERSONALIZABLES Y ESTILOS BASE
======================================== */
.sb-ui-toggle {
/* Colores - Pueden ser sobreescritos por marca */
--sb-ui-toggle-bg-color: var(--sb-ui-color-grayscale-L200, #edeef0);
--sb-ui-toggle-bg-color-active: var(--sb-ui-color-primary-base, #007acc);
--sb-ui-toggle-bg-color-disabled: var(--sb-ui-color-grayscale-L300, #f2f3f5);
--sb-ui-toggle-text-color: var(--sb-ui-color-grayscale-D300, #404040);
--sb-ui-toggle-text-color-disabled: var(--sb-ui-color-grayscale-base, #d9d9d9);
--sb-ui-toggle-slider-color: var(--sb-ui-color-grayscale-white, #ffffff);
--sb-ui-toggle-slider-color-disabled: var(--sb-ui-color-grayscale-L400, #f7f7f7);
--sb-ui-toggle-border-color: var(--sb-ui-color-grayscale-L200, #edeef0);
--sb-ui-toggle-border-color-active: var(--sb-ui-color-primary-base, #007acc);
--sb-ui-toggle-border-color-error: var(--sb-ui-color-feedback-error-base, #dc3545);
--sb-ui-toggle-border-color-success: var(--sb-ui-color-feedback-success-base, #28a745);
--sb-ui-toggle-border-width: 2px;
--sb-ui-toggle-border-radius: 2rem;
/* Tamaños */
--sb-ui-toggle-width: 3.5rem;
--sb-ui-toggle-height: 2rem;
--sb-ui-toggle-slider-size: 1.5rem;
--sb-ui-toggle-slider-offset: 0.25rem;
/* Espaciado */
--sb-ui-toggle-padding: 0.5rem;
--sb-ui-toggle-gap: 0.75rem;
/* TipografĂa */
--sb-ui-toggle-font-family: var(--sb-ui-typography-fontFamily, 'Roboto', sans-serif);
--sb-ui-toggle-font-size: 0.875rem;
--sb-ui-toggle-font-weight: 500;
--sb-ui-toggle-line-height: 1.25;
/* Sombras */
--sb-ui-toggle-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
--sb-ui-toggle-shadow-focus: 0 0 0 3px var(--sb-ui-color-primary-L400, rgba(0, 122, 204, 0.1));
--sb-ui-toggle-shadow-active: 0 2px 8px rgba(0, 0, 0, 0.15);
/* Transiciones */
--sb-ui-toggle-transition: all 0.2s ease;
/* Layout */
display: inline-flex;
align-items: center;
gap: var(--sb-ui-toggle-gap);
position: relative;
cursor: pointer;
user-select: none;
font-family: var(--sb-ui-toggle-font-family);
font-size: var(--sb-ui-toggle-font-size);
font-weight: var(--sb-ui-toggle-font-weight);
line-height: var(--sb-ui-toggle-line-height);
color: var(--sb-ui-color-grayscale-D300, #404040);
}
/* Input oculto */
.sb-ui-toggle-input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
margin: 0;
padding: 0;
border: none;
outline: none;
}
/* Slider principal */
.sb-ui-toggle-slider {
position: relative;
display: inline-block;
width: var(--sb-ui-toggle-width);
height: var(--sb-ui-toggle-height);
background-color: var(--sb-ui-toggle-bg-color);
border: var(--sb-ui-toggle-border-width) solid var(--sb-ui-toggle-border-color);
border-radius: var(--sb-ui-toggle-border-radius);
box-shadow: var(--sb-ui-toggle-shadow);
transition: var(--sb-ui-toggle-transition);
flex-shrink: 0;
}
/* Slider interno (cĂrculo) */
.sb-ui-toggle-slider::before {
content: '';
position: absolute;
top: 50%;
left: var(--sb-ui-toggle-slider-offset);
transform: translateY(-50%);
width: var(--sb-ui-toggle-slider-size);
height: var(--sb-ui-toggle-slider-size);
background-color: var(--sb-ui-toggle-slider-color);
border-radius: 50%;
box-shadow: var(--sb-ui-toggle-shadow);
transition: var(--sb-ui-toggle-transition);
}
/* Estado activo */
.sb-ui-toggle-input:checked + .sb-ui-toggle-slider {
background-color: var(--sb-ui-toggle-bg-color-active);
border-color: var(--sb-ui-toggle-border-color-active);
box-shadow: var(--sb-ui-toggle-shadow-active);
}
.sb-ui-toggle-input:checked + .sb-ui-toggle-slider::before {
transform: translateY(-50%)
translateX(
calc(
var(--sb-ui-toggle-width) - var(--sb-ui-toggle-slider-size) -
var(--sb-ui-toggle-slider-offset) * 2
)
);
}
/* Focus state */
.sb-ui-toggle-input:focus + .sb-ui-toggle-slider {
box-shadow: var(--sb-ui-toggle-shadow-focus);
}
/* Hover state */
.sb-ui-toggle:hover:not(:disabled) .sb-ui-toggle-slider {
border-color: var(--sb-ui-toggle-border-color-active);
}
/* Active state */
.sb-ui-toggle:active:not(:disabled) .sb-ui-toggle-slider {
box-shadow: var(--sb-ui-toggle-shadow-active);
}
/* Focus visible state */
.sb-ui-toggle:focus-visible:not(:disabled) {
outline: 2px solid var(--sb-ui-color-primary-base, #007acc);
outline-offset: 2px;
}
/* Disabled state */
.sb-ui-toggle-input:disabled + .sb-ui-toggle-slider {
background-color: var(--sb-ui-toggle-bg-color-disabled);
border-color: var(--sb-ui-toggle-bg-color-disabled);
cursor: not-allowed;
opacity: 0.6;
}
.sb-ui-toggle-input:disabled + .sb-ui-toggle-slider::before {
background-color: var(--sb-ui-toggle-slider-color-disabled);
}
.sb-ui-toggle-input:disabled ~ .sb-ui-toggle-label {
color: var(--sb-ui-color-grayscale-base, #d9d9d9);
cursor: not-allowed;
}
/* Label del toggle */
.sb-ui-toggle-label {
color: var(--sb-ui-color-grayscale-D300, #404040);
font-size: var(--sb-ui-toggle-font-size);
font-weight: var(--sb-ui-toggle-font-weight);
line-height: var(--sb-ui-toggle-line-height);
cursor: pointer;
transition: var(--sb-ui-toggle-transition);
}
/* ========================================
TOGGLE STATES
======================================== */
/* Error state */
.sb-ui-toggle--error .sb-ui-toggle-slider {
--sb-ui-toggle-border-color: var(--sb-ui-toggle-border-color-error);
--sb-ui-toggle-border-color-active: var(--sb-ui-toggle-border-color-error);
--sb-ui-toggle-bg-color-active: var(--sb-ui-toggle-border-color-error);
--sb-ui-toggle-shadow-focus: 0 0 0 3px
var(--sb-ui-color-feedback-error-L400, rgba(220, 53, 69, 0.1));
}
.sb-ui-toggle--error .sb-ui-toggle-label {
color: var(--sb-ui-toggle-border-color-error);
}
/* Success state */
.sb-ui-toggle--success .sb-ui-toggle-slider {
--sb-ui-toggle-border-color: var(--sb-ui-toggle-border-color-success);
--sb-ui-toggle-border-color-active: var(--sb-ui-toggle-border-color-success);
--sb-ui-toggle-bg-color-active: var(--sb-ui-toggle-border-color-success);
--sb-ui-toggle-shadow-focus: 0 0 0 3px
var(--sb-ui-color-feedback-success-L400, rgba(40, 167, 69, 0.1));
}
.sb-ui-toggle--success .sb-ui-toggle-label {
color: var(--sb-ui-toggle-border-color-success);
}
/* Warning state */
.sb-ui-toggle--warning .sb-ui-toggle-slider {
--sb-ui-toggle-border-color: var(--sb-ui-color-feedback-warning-base, #ffc107);
--sb-ui-toggle-border-color-active: var(--sb-ui-color-feedback-warning-base, #ffc107);
--sb-ui-toggle-bg-color-active: var(--sb-ui-color-feedback-warning-base, #ffc107);
--sb-ui-toggle-shadow-focus: 0 0 0 3px
var(--sb-ui-color-feedback-warning-L400, rgba(255, 193, 7, 0.1));
}
.sb-ui-toggle--warning .sb-ui-toggle-label {
color: var(--sb-ui-color-feedback-warning-base, #ffc107);
}
/* ========================================
TOGGLE SIZES
======================================== */
.sb-ui-toggle--small {
--sb-ui-toggle-width: 2.5rem;
--sb-ui-toggle-height: 1.5rem;
--sb-ui-toggle-slider-size: 1rem;
--sb-ui-toggle-slider-offset: 0.25rem;
--sb-ui-toggle-font-size: 0.75rem;
--sb-ui-toggle-gap: 0.5rem;
}
.sb-ui-toggle--medium {
--sb-ui-toggle-width: 3.5rem;
--sb-ui-toggle-height: 2rem;
--sb-ui-toggle-slider-size: 1.5rem;
--sb-ui-toggle-slider-offset: 0.25rem;
--sb-ui-toggle-font-size: 0.875rem;
--sb-ui-toggle-gap: 0.75rem;
}
.sb-ui-toggle--large {
--sb-ui-toggle-width: 4.5rem;
--sb-ui-toggle-height: 2.5rem;
--sb-ui-toggle-slider-size: 2rem;
--sb-ui-toggle-slider-offset: 0.25rem;
--sb-ui-toggle-font-size: 1rem;
--sb-ui-toggle-gap: 1rem;
}
/* ========================================
TOGGLE VARIANTS
======================================== */
/* Button style toggle */
.sb-ui-toggle--button {
--sb-ui-toggle-width: 4rem;
--sb-ui-toggle-height: 2rem;
--sb-ui-toggle-border-radius: 1rem;
--sb-ui-toggle-gap: 0;
}
.sb-ui-toggle--button .sb-ui-toggle-slider {
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: 600;
color: var(--sb-ui-color-grayscale-white, #ffffff);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.sb-ui-toggle--button .sb-ui-toggle-slider::before {
display: none;
}
.sb-ui-toggle--button .sb-ui-toggle-slider::after {
content: 'OFF';
position: absolute;
transition: var(--sb-ui-toggle-transition);
}
.sb-ui-toggle--button .sb-ui-toggle-input:checked + .sb-ui-toggle-slider::after {
content: 'ON';
}
.sb-ui-toggle--button .sb-ui-toggle-label {
display: none;
}
/* Checkbox style toggle */
.sb-ui-toggle--checkbox {
--sb-ui-toggle-width: 1.25rem;
--sb-ui-toggle-height: 1.25rem;
--sb-ui-toggle-border-radius: 0.25rem;
--sb-ui-toggle-slider-size: 0.75rem;
--sb-ui-toggle-slider-offset: 0.125rem;
}
.sb-ui-toggle--checkbox .sb-ui-toggle-slider::before {
background-color: transparent;
border: 2px solid var(--sb-ui-color-grayscale-white, #ffffff);
border-top: none;
border-left: none;
transform: translateY(-50%) rotate(45deg);
width: 0.375rem;
height: 0.625rem;
border-radius: 0;
box-shadow: none;
}
.sb-ui-toggle--checkbox .sb-ui-toggle-input:checked + .sb-ui-toggle-slider::before {
transform: translateY(-50%)
translateX(
calc(
var(--sb-ui-toggle-width) - var(--sb-ui-toggle-slider-size) -
var(--sb-ui-toggle-slider-offset) * 2
)
)
rotate(45deg);
}
/* ========================================
TOGGLE MODIFIERS
======================================== */
/* Rounded corners */
.sb-ui-toggle--rounded .sb-ui-toggle-slider {
--sb-ui-toggle-border-radius: 0.5rem;
}
.sb-ui-toggle--rounded.sb-ui-toggle--button .sb-ui-toggle-slider {
--sb-ui-toggle-border-radius: 1rem;
}
/* Inline layout */
.sb-ui-toggle--inline {
display: inline-flex;
}
/* Block layout */
.sb-ui-toggle--block {
display: flex;
width: 100%;
justify-content: space-between;
}
/* No label */
.sb-ui-toggle--no-label .sb-ui-toggle-label {
display: none;
}
.sb-ui-toggle--no-label {
--sb-ui-toggle-gap: 0;
}
/* ========================================
TOGGLE CONTAINER
======================================== */
.sb-ui-toggle-container {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.sb-ui-toggle-container--horizontal {
flex-direction: row;
align-items: center;
gap: 1rem;
}
.sb-ui-toggle-container--vertical {
flex-direction: column;
gap: 0.75rem;
}
/* ========================================
TOGGLE GROUP
======================================== */
.sb-ui-toggle-group {
display: flex;
flex-direction: column;
gap: 1rem;
}
.sb-ui-toggle-group--horizontal {
flex-direction: row;
flex-wrap: wrap;
gap: 1.5rem;
}
.sb-ui-toggle-group--grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}
/* ========================================
TOGGLE HELPER TEXT
======================================== */
.sb-ui-toggle-helper {
display: block;
margin-top: 0.25rem;
font-family: var(--sb-ui-toggle-font-family);
font-size: 0.75rem;
color: var(--sb-ui-color-grayscale-base, #d9d9d9);
line-height: 1.25;
}
.sb-ui-toggle-helper--error {
color: var(--sb-ui-color-feedback-error-base, #dc3545);
}
.sb-ui-toggle-helper--success {
color: var(--sb-ui-color-feedback-success-base, #28a745);
}
.sb-ui-toggle-helper--warning {
color: var(--sb-ui-color-feedback-warning-base, #ffc107);
}
/* ========================================
TOGGLE TITLE
======================================== */
.sb-ui-toggle-title {
display: block;
margin-bottom: 0.5rem;
font-family: var(--sb-ui-toggle-font-family);
font-size: 0.875rem;
font-weight: 600;
color: var(--sb-ui-color-grayscale-D300, #404040);
line-height: 1.25;
}
.sb-ui-toggle-title--required::after {
content: ' *';
color: var(--sb-ui-color-feedback-error-base, #dc3545);
}
.sb-ui-toggle-title--optional::after {
content: ' (opcional)';
color: var(--sb-ui-color-grayscale-base, #d9d9d9);
font-weight: 400;
}
/* ========================================
ACCESSIBILITY & RESPONSIVE
======================================== */
/* High contrast mode support */
@media (prefers-contrast: high) {
.sb-ui-toggle-slider {
--sb-ui-toggle-border-width: 3px;
}
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
.sb-ui-toggle-slider,
.sb-ui-toggle-slider::before {
--sb-ui-toggle-transition: none;
}
}
/* Mobile optimizations */
@media (width <= 640px) {
.sb-ui-toggle {
--sb-ui-toggle-gap: 0.5rem;
}
.sb-ui-toggle--large {
--sb-ui-toggle-width: 4rem;
--sb-ui-toggle-height: 2.25rem;
--sb-ui-toggle-slider-size: 1.75rem;
}
.sb-ui-toggle-group--horizontal {
flex-direction: column;
gap: 1rem;
}
}
/* Desktop optimizations */
@media (width >= 641px) {
.sb-ui-toggle--block {
max-width: 400px;
}
}
/* Print styles */
@media print {
.sb-ui-toggle-slider {
background: transparent !important;
border: 2px solid black !important;
box-shadow: none !important;
}
.sb-ui-toggle-slider::before {
background: black !important;
box-shadow: none !important;
}
.sb-ui-toggle-label {
color: black !important;
}
}
/* ========================================
FOCUS VISIBLE (keyboard navigation)
======================================== */
.sb-ui-toggle-input:focus-visible + .sb-ui-toggle-slider {
outline: 2px solid var(--sb-ui-color-primary-base, #007acc);
outline-offset: 2px;
}
/* ========================================
LOADING STATE
======================================== */
.sb-ui-toggle--loading {
pointer-events: none;
opacity: 0.7;
}
.sb-ui-toggle--loading .sb-ui-toggle-slider::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 12px;
height: 12px;
margin-top: -6px;
margin-left: -6px;
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-toggle-spinner 1s linear infinite;
z-index: 3;
}
.sb-ui-toggle--loading .sb-ui-toggle-slider::before {
opacity: 0;
}
@keyframes rb-toggle-spinner {
to {
transform: rotate(360deg);
}
}
/* ========================================
DARK MODE SUPPORT
======================================== */
@media (prefers-color-scheme: dark) {
.sb-ui-toggle {
--sb-ui-toggle-bg-color: var(--sb-ui-color-grayscale-D200, #6e6e6e);
--sb-ui-toggle-border-color: var(--sb-ui-color-grayscale-D200, #6e6e6e);
--sb-ui-toggle-slider-color: var(--sb-ui-color-grayscale-L200, #edeef0);
}
.sb-ui-toggle-label {
color: var(--sb-ui-color-grayscale-L200, #edeef0);
}
.sb-ui-toggle-title {
color: var(--sb-ui-color-grayscale-L200, #edeef0);
}
}
/* ========================================
TOGGLE THEME VARIANTS
======================================== */
/* Minimal toggle */
.sb-ui-toggle--minimal .sb-ui-toggle-slider {
--sb-ui-toggle-border-width: 0;
--sb-ui-toggle-shadow: none;
--sb-ui-toggle-shadow-active: none;
}
/* Filled toggle */
.sb-ui-toggle--filled .sb-ui-toggle-slider {
--sb-ui-toggle-bg-color: var(--sb-ui-color-grayscale-L400, #f7f7f7);
--sb-ui-toggle-border-color: transparent;
}
/* Outlined toggle */
.sb-ui-toggle--outlined .sb-ui-toggle-slider {
--sb-ui-toggle-bg-color: transparent;
--sb-ui-toggle-border-width: 2px;
}
/* ========================================
TOGGLE ANIMATIONS
======================================== */
/* Bounce animation */
.sb-ui-toggle--bounce .sb-ui-toggle-slider::before {
transition:
var(--sb-ui-toggle-transition),
transform 0.1s ease;
}
.sb-ui-toggle--bounce .sb-ui-toggle-input:checked + .sb-ui-toggle-slider::before {
animation: rb-toggle-bounce 0.3s ease;
}
@keyframes rb-toggle-bounce {
0%,
100% {
transform: translateY(-50%)
translateX(
calc(
var(--sb-ui-toggle-width) - var(--sb-ui-toggle-slider-size) -
var(--sb-ui-toggle-slider-offset) * 2
)
)
scale(1);
}
50% {
transform: translateY(-50%)
translateX(
calc(
var(--sb-ui-toggle-width) - var(--sb-ui-toggle-slider-size) -
var(--sb-ui-toggle-slider-offset) * 2
)
)
scale(1.1);
}
}
/* Pulse animation */
.sb-ui-toggle--pulse .sb-ui-toggle-input:checked + .sb-ui-toggle-slider {
animation: rb-toggle-pulse 0.5s ease;
}
@keyframes rb-toggle-pulse {
0% {
box-shadow: var(--sb-ui-toggle-shadow-active);
}
50% {
box-shadow:
var(--sb-ui-toggle-shadow-active),
0 0 0 8px var(--sb-ui-color-primary-L400, rgba(0, 122, 204, 0.1));
}
100% {
box-shadow: var(--sb-ui-toggle-shadow-active);
}
}
/* ========================================
TOGGLE SIZE VARIANTS
======================================== */
/* Compact toggle */
.sb-ui-toggle--compact {
--sb-ui-toggle-width: 2rem;
--sb-ui-toggle-height: 1.25rem;
--sb-ui-toggle-slider-size: 0.875rem;
--sb-ui-toggle-slider-offset: 0.1875rem;
--sb-ui-toggle-font-size: 0.75rem;
--sb-ui-toggle-gap: 0.5rem;
}
/* Prominent toggle */
.sb-ui-toggle--prominent {
--sb-ui-toggle-width: 5rem;
--sb-ui-toggle-height: 3rem;
--sb-ui-toggle-slider-size: 2.5rem;
--sb-ui-toggle-slider-offset: 0.25rem;
--sb-ui-toggle-font-size: 1.125rem;
--sb-ui-toggle-gap: 1.25rem;
--sb-ui-toggle-border-width: 3px;
}
/* ========================================
TOGGLE ACCESSIBILITY ENHANCEMENTS
======================================== */
/* Screen reader only text */
.sb-ui-toggle-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-toggle:focus-within {
z-index: 1;
}
/* ========================================
TOGGLE VALIDATION STYLES
======================================== */
.sb-ui-toggle-input:valid:checked + .sb-ui-toggle-slider {
/* Success styling for valid toggles */
}
.sb-ui-toggle-input:invalid:checked + .sb-ui-toggle-slider {
/* Error styling for invalid toggles */
}
/* Custom validation message styling */
.sb-ui-toggle-input:invalid:checked ~ .sb-ui-toggle-helper {
color: var(--sb-ui-color-feedback-error-base, #dc3545);
}
@layer reset, tokens, base, variants, modifiers, states, utilities;
/**
* ============================================================================
* Molecules Package - Index
* ============================================================================
* Importa todos los componentes moleculares del Design System
* ============================================================================
*/
/**
* Stepper Component - Seguros Bolivar UI Design System
* - CSS Nesting nativo con &
* - @layer para control de cascada
* - Logical Properties (RTL/LTR)
* - clamp() para responsive fluido
*
* Uso:
...
*
* IMPORTANTE: NO usar & con elementos BEM (__element)
* Solo usar & con modificadores (--modifier) y pseudo-clases (:hover)
*/
/* ========================================
RESET LAYER
======================================== */
@layer reset {
.sb-ui-stepper {
all: unset;
box-sizing: border-box;
}
.sb-ui-stepper * {
box-sizing: border-box;
}
}
/* ========================================
TOKENS LAYER - Variables CSS
======================================== */
@layer tokens {
.sb-ui-stepper {
/* ============================================
STEP (cĂrculo) - Tamaños responsive
============================================ */
/* Desktop: 54px (number), 62px (icon/mix) */
/* Mobile: 40px (number), 46px (icon/mix) */
--sb-ui-stepper-step-size-number: clamp(40px, 8vw + 20px, 54px);
--sb-ui-stepper-step-size-icon: clamp(46px, 8vw + 26px, 62px);
--sb-ui-stepper-step-size-mix: clamp(46px, 8vw + 26px, 62px);
/* Border radius (siempre cĂrculo) */
--sb-ui-stepper-step-radius: 50%;
/* Border width */
--sb-ui-stepper-step-border-width: 2px;
/* ============================================
STEP - Colores Empty Default (pendiente)
Imagen: CĂrculo blanco, borde gris claro, texto/icono gris
============================================ */
--sb-ui-stepper-step-empty-default-bg: #ffffff;
--sb-ui-stepper-step-empty-default-border: #e1e1e1;
--sb-ui-stepper-step-empty-default-text: #9b9b9b;
--sb-ui-stepper-step-empty-default-icon: #9b9b9b;
/* ============================================
STEP - Colores Empty Active (paso actual sin completar)
Imagen: CĂrculo amarillo, borde amarillo oscuro, nĂșmero/icono VERDE OSCURO
============================================ */
--sb-ui-stepper-step-empty-active-bg: #ffe16f;
--sb-ui-stepper-step-empty-active-border: #ffd543;
--sb-ui-stepper-step-empty-active-text: #038450;
--sb-ui-stepper-step-empty-active-icon: #038450;
/* ============================================
STEP - Colores Filled Default (completado)
Imagen: CĂrculo verde, icono check blanco, label gris
============================================ */
--sb-ui-stepper-step-filled-default-bg: #038450;
--sb-ui-stepper-step-filled-default-border: #038450;
--sb-ui-stepper-step-filled-default-text: #ffffff;
--sb-ui-stepper-step-filled-default-icon: #ffffff;
/* ============================================
STEP - Colores Filled Active (completado + seleccionado)
Imagen: CĂrculo verde con borde verde oscuro, icono blanco, label negro bold
============================================ */
--sb-ui-stepper-step-filled-active-bg: #038450;
--sb-ui-stepper-step-filled-active-border: #05794a;
--sb-ui-stepper-step-filled-active-text: #ffffff;
--sb-ui-stepper-step-filled-active-icon: #ffffff;
/* ============================================
TRACK (lĂnea conectora) - 2px VERDE SIEMPRE
SegĂșn Figma: TODAS las lĂneas son verdes #009056
- Sólida: después de steps completados
- Punteada: hacia steps pendientes
============================================ */
--sb-ui-stepper-track-height: 2px;
--sb-ui-stepper-track-color: #009056;
/* Track style: solid o dash */
--sb-ui-stepper-track-style-solid: solid;
--sb-ui-stepper-track-style-dash: dashed;
/* ============================================
LABEL (descripciĂłn bajo el step)
============================================ */
--sb-ui-stepper-label-font-family: var(--sb-ui-typography-fontFamily, 'Roboto', sans-serif);
--sb-ui-stepper-label-font-size: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
--sb-ui-stepper-label-line-height: 1.4;
--sb-ui-stepper-label-margin-block-start: clamp(8px, 1vw, 12px);
/* Label colores - SegĂșn imagen: gris para todos excepto active que es negro bold */
--sb-ui-stepper-label-default-color: #757575;
--sb-ui-stepper-label-active-color: #1b1b1b;
--sb-ui-stepper-label-active-weight: 700;
--sb-ui-stepper-label-default-weight: 400;
/* ============================================
BADGE (nĂșmero en variante mix)
SegĂșn Figma: arriba centrado, 16px, color #FFCE29
============================================ */
--sb-ui-stepper-badge-size: clamp(14px, 2vw + 10px, 18px);
--sb-ui-stepper-badge-bg: #ffce29;
--sb-ui-stepper-badge-text: #038450;
--sb-ui-stepper-badge-font-size: clamp(10px, 1.2vw + 6px, 12px);
--sb-ui-stepper-badge-font-weight: 700;
--sb-ui-stepper-badge-border: 2px solid #ffce29;
/* ============================================
SPACING - Gap entre steps
============================================ */
--sb-ui-stepper-gap: clamp(16px, 3vw, 32px);
/* ============================================
TRANSITIONS
============================================ */
--sb-ui-stepper-transition:
background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}
}
/* ========================================
BASE LAYER - Estilos base
======================================== */
@layer base {
.sb-ui-stepper {
/* Layout */
display: flex;
position: relative;
/* Font base */
font-family: var(--sb-ui-stepper-label-font-family);
}
/* ============================================
STEP ITEM (contenedor de cada paso)
============================================ */
.sb-ui-stepper__step {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
flex: 1;
/* Transiciones */
transition: var(--sb-ui-stepper-transition);
}
/* ============================================
STEP CIRCLE (cĂrculo del paso)
============================================ */
.sb-ui-stepper__step-circle {
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 2;
/* Tamaño por defecto (number) */
inline-size: var(--sb-ui-stepper-step-size-number);
block-size: var(--sb-ui-stepper-step-size-number);
/* Forma circular */
border-radius: var(--sb-ui-stepper-step-radius);
/* Border */
border-width: var(--sb-ui-stepper-step-border-width);
border-style: solid;
/* Colores default (empty default) */
background-color: var(--sb-ui-stepper-step-empty-default-bg);
border-color: var(--sb-ui-stepper-step-empty-default-border);
color: var(--sb-ui-stepper-step-empty-default-text);
/* TipografĂa */
font-size: clamp(16px, 2vw + 8px, 24px);
font-weight: 700;
line-height: 1;
/* Transiciones */
transition: var(--sb-ui-stepper-transition);
/* Cursor */
cursor: default;
/* SVG dentro del cĂrculo */
}
.sb-ui-stepper__step-circle svg {
inline-size: clamp(20px, 3vw + 10px, 32px);
block-size: clamp(20px, 3vw + 10px, 32px);
fill: currentColor;
}
/* ============================================
BADGE (nĂșmero en variante mix)
Posicionado ARRIBA CENTRADO del cĂrculo
============================================ */
.sb-ui-stepper__step-circle-badge {
position: absolute;
inset-block-start: -8px;
inset-inline-start: 50%;
transform: translateX(-50%);
z-index: 3;
/* Tamaño */
inline-size: var(--sb-ui-stepper-badge-size);
block-size: var(--sb-ui-stepper-badge-size);
/* Forma circular */
border-radius: 50%;
/* Colores */
background-color: var(--sb-ui-stepper-badge-bg);
color: var(--sb-ui-stepper-badge-text);
/* TipografĂa */
font-size: var(--sb-ui-stepper-badge-font-size);
font-weight: var(--sb-ui-stepper-badge-font-weight);
line-height: 1;
/* Centrar texto dentro del badge */
display: flex;
align-items: center;
justify-content: center;
}
/* ============================================
LABEL (texto descriptivo)
============================================ */
.sb-ui-stepper__step-label {
margin-block-start: var(--sb-ui-stepper-label-margin-block-start);
font-size: var(--sb-ui-stepper-label-font-size);
line-height: var(--sb-ui-stepper-label-line-height);
color: var(--sb-ui-stepper-label-default-color);
font-weight: var(--sb-ui-stepper-label-default-weight);
text-align: center;
max-inline-size: clamp(80px, 15vw, 120px);
}
/* ============================================
TRACK (lĂnea conectora entre steps)
Por defecto usa background-color VERDE sĂłlido
============================================ */
.sb-ui-stepper__step-track {
position: absolute;
inset-block-start: calc(var(--sb-ui-stepper-step-size-number) / 2);
inset-inline-start: 50%;
inline-size: 100%;
block-size: var(--sb-ui-stepper-track-height);
background-color: var(--sb-ui-stepper-track-color);
z-index: 1;
/* Sin border por defecto (usa background) */
border: none;
/* Transiciones */
transition: var(--sb-ui-stepper-transition);
}
/* Ăltimo step no tiene track */
.sb-ui-stepper__step:last-child .sb-ui-stepper__step-track {
display: none;
}
}
/* ========================================
VARIANTS LAYER - Estados de los steps
======================================== */
@layer variants {
/* ============================================
EMPTY ACTIVE (paso actual sin completar)
============================================ */
.sb-ui-stepper__step--empty-active .sb-ui-stepper__step-circle {
background-color: var(--sb-ui-stepper-step-empty-active-bg);
border-color: var(--sb-ui-stepper-step-empty-active-border);
color: var(--sb-ui-stepper-step-empty-active-text);
}
.sb-ui-stepper__step--empty-active .sb-ui-stepper__step-label {
color: var(--sb-ui-stepper-label-active-color);
font-weight: var(--sb-ui-stepper-label-active-weight);
}
/* ============================================
FILLED DEFAULT (completado)
============================================ */
.sb-ui-stepper__step--filled-default .sb-ui-stepper__step-circle {
background-color: var(--sb-ui-stepper-step-filled-default-bg);
border-color: var(--sb-ui-stepper-step-filled-default-border);
color: var(--sb-ui-stepper-step-filled-default-text);
}
/* Track permanece verde (no cambia color, solo estilo solid/dash en modifiers) */
/* ============================================
FILLED ACTIVE (completado + seleccionado)
============================================ */
.sb-ui-stepper__step--filled-active .sb-ui-stepper__step-circle {
background-color: var(--sb-ui-stepper-step-filled-active-bg);
border-color: var(--sb-ui-stepper-step-filled-active-border);
color: var(--sb-ui-stepper-step-filled-active-text);
}
.sb-ui-stepper__step--filled-active .sb-ui-stepper__step-label {
color: var(--sb-ui-stepper-label-active-color);
font-weight: var(--sb-ui-stepper-label-active-weight);
}
/* Track permanece verde (no cambia color, solo estilo solid/dash en modifiers) */
}
/* ========================================
MODIFIERS LAYER - Variantes de tipo
======================================== */
@layer modifiers {
/* ============================================
ORIENTATION - Horizontal (default)
============================================ */
.sb-ui-stepper--horizontal {
flex-direction: row;
align-items: flex-start;
gap: var(--sb-ui-stepper-gap);
}
/* ============================================
ORIENTATION - Vertical
============================================ */
.sb-ui-stepper--vertical {
flex-direction: column;
align-items: flex-start;
gap: var(--sb-ui-stepper-gap);
}
.sb-ui-stepper--vertical .sb-ui-stepper__step {
flex-direction: row;
inline-size: 100%;
}
.sb-ui-stepper--vertical .sb-ui-stepper__step-track {
inset-block-start: 100%;
inset-inline-start: calc(var(--sb-ui-stepper-step-size-number) / 2);
inline-size: var(--sb-ui-stepper-track-height);
block-size: 100%;
}
.sb-ui-stepper--vertical .sb-ui-stepper__step-label {
margin-block-start: 0;
margin-inline-start: clamp(12px, 2vw, 20px);
text-align: start;
max-inline-size: none;
}
/* ============================================
TYPE - Icon (62px en desktop, 46px en mobile)
============================================ */
.sb-ui-stepper--type-icon .sb-ui-stepper__step-circle {
inline-size: var(--sb-ui-stepper-step-size-icon);
block-size: var(--sb-ui-stepper-step-size-icon);
}
.sb-ui-stepper--type-icon .sb-ui-stepper__step-track {
inset-block-start: calc(var(--sb-ui-stepper-step-size-icon) / 2);
}
/* ============================================
TYPE - Mix (62px en desktop, 46px en mobile + badge)
============================================ */
.sb-ui-stepper--type-mix .sb-ui-stepper__step-circle {
inline-size: var(--sb-ui-stepper-step-size-mix);
block-size: var(--sb-ui-stepper-step-size-mix);
}
.sb-ui-stepper--type-mix .sb-ui-stepper__step-track {
inset-block-start: calc(var(--sb-ui-stepper-step-size-mix) / 2);
}
/* ============================================
TRACK STYLE - Dash (lĂnea punteada VERDE)
Todas las lĂneas son verdes, solo cambia solid/dash
============================================ */
.sb-ui-stepper--track-dash .sb-ui-stepper__step-track {
border-block-start: var(--sb-ui-stepper-track-height) var(--sb-ui-stepper-track-style-dash)
var(--sb-ui-stepper-track-color);
background-color: transparent;
}
/* LĂneas despuĂ©s de steps completados = sĂłlidas */
.sb-ui-stepper--track-dash .sb-ui-stepper__step--filled-default .sb-ui-stepper__step-track,
.sb-ui-stepper--track-dash .sb-ui-stepper__step--filled-active .sb-ui-stepper__step-track {
border-block-start-style: solid;
}
}
/* ========================================
STATES LAYER - Estados interactivos
======================================== */
@layer states {
/* ============================================
CLICKABLE - Steps clicables
============================================ */
.sb-ui-stepper__step--clickable .sb-ui-stepper__step-circle {
cursor: pointer;
}
:is(.sb-ui-stepper__step--clickable .sb-ui-stepper__step-circle):hover {
transform: scale(1.05);
}
:is(.sb-ui-stepper__step--clickable .sb-ui-stepper__step-circle):active {
transform: scale(0.98);
}
:is(.sb-ui-stepper__step--clickable .sb-ui-stepper__step-circle):focus-visible {
outline: 3px solid var(--sb-ui-color-secondary-L100);
outline-offset: 4px;
}
/* ============================================
DISABLED - Steps deshabilitados
============================================ */
.sb-ui-stepper__step--disabled .sb-ui-stepper__step-circle {
cursor: not-allowed;
opacity: 0.5;
}
.sb-ui-stepper__step--disabled .sb-ui-stepper__step-label {
opacity: 0.5;
}
}
/* ========================================
UTILITIES LAYER (mĂĄxima prioridad)
======================================== */
@layer utilities {
/* High contrast mode support - OBLIGATORIO */
@media (prefers-contrast: high) {
.sb-ui-stepper {
--sb-ui-stepper-step-border-width: 3px;
--sb-ui-stepper-track-height: 3px;
}
}
/* Reduced motion support - OBLIGATORIO */
@media (prefers-reduced-motion: reduce) {
.sb-ui-stepper {
--sb-ui-stepper-transition: none;
}
.sb-ui-stepper__step-circle {
transition: none;
}
}
/* Mobile responsive - ajustar gaps */
@media (max-width: 640px) {
.sb-ui-stepper {
--sb-ui-stepper-gap: clamp(8px, 2vw, 16px);
}
}
}
/**
* Davivienda - All Brand Overrides
*/
/**
* ============================================================================
* DAVIVIENDA - Button Component Overrides (EJEMPLO)
* ============================================================================
*
* đŻ ESTE ES UN EJEMPLO - Ajustar segĂșn diseño real de Davivienda
*
* Este archivo muestra cĂłmo crear un override PARCIAL:
* - STROKE y TEXT usan el BASE (amarillo) â
* - FILL usa rojo en lugar de amarillo â
*
* Solo ~25 lĂneas de cĂłdigo necesarias
*
* ============================================================================
*/
@layer brand-overrides {
/* ============================================
SECONDARY FILL - Rojo en lugar de amarillo
============================================ */
:where([data-brand='davivienda']) .sb-ui-button--secondary.sb-ui-button--fill {
/* đŽ Cambiar de SECONDARY (amarillo) a ERROR (rojo) */
--sb-ui-button-bg-color: var(--sb-ui-color-feedback-error-base);
--sb-ui-button-bg-hover: var(--sb-ui-color-feedback-error-D100);
--sb-ui-button-bg-active: var(--sb-ui-color-feedback-error-D200);
/* âȘ Texto blanco para mejor contraste sobre rojo */
--sb-ui-button-text-color: var(--sb-ui-color-grayscale-white);
--sb-ui-button-text-hover: var(--sb-ui-color-grayscale-white);
--sb-ui-button-text-active: var(--sb-ui-color-grayscale-white);
/* đŽ Borde rojo (mismo que background) */
--sb-ui-button-border-color: var(--sb-ui-color-feedback-error-base);
--sb-ui-button-border-hover: var(--sb-ui-color-feedback-error-D100);
--sb-ui-button-border-active: var(--sb-ui-color-feedback-error-D200);
}
/* Focus outline - Rojo claro */
:where([data-brand='davivienda']) .sb-ui-button--secondary.sb-ui-button--fill:focus-visible {
outline-color: var(--sb-ui-color-feedback-error-L100);
}
}
/* ============================================================================
đ NOTAS:
- STROKE: â
Usa el BASE (amarillo + primary text)
- TEXT: â
Usa el BASE (amarillo text)
- FILL: â Personalizado (rojo + white text)
- Total lĂneas: ~25
- Solo se define lo que CAMBIA vs BASE
- disabled, shadows, etc. vienen del BASE automĂĄticamente
đ Ver mĂĄs ejemplos en: ../EJEMPLOS_OTRAS_MARCAS.md
============================================================================ */
/**
* ============================================================================
* Davivienda - Input Component Overrides
* ============================================================================
*
* Override bĂĄsico para eliminar sombras y configurar estilos limpios
* ============================================================================
*/
[data-brand='davivienda'] .sb-ui-input {
--sb-ui-input-border-radius: 8px;
--sb-ui-input-padding-inline: 16px;
--sb-ui-input-padding-block: 8px;
--sb-ui-input-min-block-size: 40px;
}
@layer brand-overrides {
[data-brand='davivienda'] .sb-ui-input {
/* Eliminar sombras que causan efecto de borde doble */
--sb-ui-input-shadow: none;
--sb-ui-input-shadow-focus: none;
/* Border */
--sb-ui-input-border-color: var(--sb-ui-color-grayscale-L100);
--sb-ui-input-border-focus: var(--sb-ui-color-primary-base);
}
/* Eliminar outline en focus-visible para evitar borde doble */
[data-brand='davivienda'] .sb-ui-input:focus-visible {
outline: none;
}
/* Success State */
[data-brand='davivienda'] .sb-ui-input--success {
--sb-ui-input-shadow-focus: none;
}
/* Error State */
[data-brand='davivienda'] .sb-ui-input--error {
--sb-ui-input-shadow-focus: none;
}
/* Warning State */
[data-brand='davivienda'] .sb-ui-input--warning {
--sb-ui-input-shadow-focus: none;
}
}
/**
* ============================================================================
* Davivienda - TextArea Component Overrides
* ============================================================================
*/
@layer brand-overrides {
[data-brand='davivienda'] .sb-ui-textarea {
--sb-ui-textarea-shadow: none;
--sb-ui-textarea-shadow-focus: none;
--sb-ui-textarea-border-color: var(--sb-ui-color-grayscale-L100);
--sb-ui-textarea-border-color-focus: var(--sb-ui-color-primary-base);
}
/* Eliminar outline en focus-visible para evitar doble borde */
[data-brand='davivienda'] .sb-ui-textarea:focus,
[data-brand='davivienda'] .sb-ui-textarea:focus-visible {
outline: none !important;
box-shadow: none !important;
}
}
@layer brand-overrides {
[data-brand='davivienda'] .sb-ui-toggle-slider {
--sb-ui-toggle-shadow: none;
--sb-ui-toggle-shadow-active: none;
}
[data-brand='davivienda'] .sb-ui-toggle-input:focus-visible + .sb-ui-toggle-slider {
outline: 2px solid var(--sb-ui-color-primary-base);
outline-offset: 2px;
}
}