@ralorotech/duino-ui
Version:
UI library for Duino projects
1 lines • 122 kB
Source Map (JSON)
{"version":3,"sources":["../src/styles/index.css","../src/components/Button/button.css","../src/components/Collapse/collapse.css","../src/components/Spin/spin.css","../src/components/Image/image.css","../src/components/Modal/modal.css","../src/components/Message/Message.css","../src/components/Popover/popover.css","../src/components/Select/select.css","../src/components/Sender/sender.css","../src/components/Table/table.css","../src/styles/tokens.css","../src/components/Upload/upload.css"],"sourcesContent":["@import \"./tokens.css\";\n\n/* Reset básico */\n* {\n box-sizing: border-box;\n}\n\nhtml,\nbody {\n height: 100%;\n}\n\nbody {\n margin: 0;\n font-family: var(--duino-font);\n color: var(--duino-color-fg);\n background: var(--duino-color-bg);\n}","/* Import tokens */\n@import \"../../styles/tokens.css\";\n\n/* ===== DUINO BUTTON - BEM METHODOLOGY ===== */\n\n/* Block: duino-btn */\n.duino-btn {\n /* Reset y base */\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--duino-gap-sm);\n\n /* Tipografía */\n font-family: var(--duino-font);\n font-weight: 500;\n text-decoration: none;\n white-space: nowrap;\n line-height: 1.4;\n\n /* Layout */\n border-radius: var(--duino-radius);\n border: 1px solid transparent;\n cursor: pointer;\n -webkit-user-select: none;\n user-select: none;\n\n /* Transiciones suaves */\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n\n /* Enfoque */\n outline: none;\n}\n\n.duino-btn:focus-visible {\n outline: 2px solid var(--duino-ring);\n outline-offset: 2px;\n}\n\n/* ===== VARIANTS (Modifiers) ===== */\n\n/* Primary - Estilo principal de Arduino */\n.duino-btn--primary {\n background: linear-gradient(135deg, var(--duino-brand-500), var(--duino-brand-600));\n color: white;\n border-color: var(--duino-brand-600);\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n.duino-btn--primary:hover:not(.duino-btn--disabled) {\n background: linear-gradient(135deg, var(--duino-brand-600), var(--duino-brand-700));\n border-color: var(--duino-brand-700);\n box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3);\n transform: translateY(-1px);\n}\n\n.duino-btn--primary:active:not(.duino-btn--disabled) {\n background: linear-gradient(135deg, var(--duino-brand-700), var(--duino-brand-800));\n transform: translateY(0);\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\n}\n\n/* Secondary - Outline style */\n.duino-btn--secondary {\n background: var(--duino-color-bg);\n color: var(--duino-brand-600);\n border-color: var(--duino-brand-300);\n}\n\n.duino-btn--secondary:hover:not(.duino-btn--disabled) {\n background: var(--duino-brand-50);\n border-color: var(--duino-brand-400);\n color: var(--duino-brand-700);\n box-shadow: 0 2px 8px rgba(20, 184, 166, 0.15);\n}\n\n.duino-btn--secondary:active:not(.duino-btn--disabled) {\n background: var(--duino-brand-100);\n border-color: var(--duino-brand-500);\n}\n\n/* Ghost - Minimal style */\n.duino-btn--ghost {\n background: transparent;\n color: var(--duino-brand-600);\n border-color: transparent;\n}\n\n.duino-btn--ghost:hover:not(.duino-btn--disabled) {\n background: var(--duino-brand-50);\n color: var(--duino-brand-700);\n}\n\n.duino-btn--ghost:active:not(.duino-btn--disabled) {\n background: var(--duino-brand-100);\n}\n\n/* Text - Solo texto */\n.duino-btn--text {\n background: transparent;\n color: var(--duino-brand-600);\n border-color: transparent;\n padding-left: 0;\n padding-right: 0;\n}\n\n.duino-btn--text:hover:not(.duino-btn--disabled) {\n color: var(--duino-brand-700);\n background: transparent;\n}\n\n.duino-btn--text:active:not(.duino-btn--disabled) {\n color: var(--duino-brand-800);\n}\n\n/* Danger - Para acciones destructivas */\n.duino-btn--danger {\n background: linear-gradient(135deg, var(--duino-danger-500), #dc2626);\n color: white;\n border-color: #dc2626;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n.duino-btn--danger:hover:not(.duino-btn--disabled) {\n background: linear-gradient(135deg, #dc2626, #b91c1c);\n border-color: #b91c1c;\n box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);\n transform: translateY(-1px);\n}\n\n.duino-btn--danger:active:not(.duino-btn--disabled) {\n background: linear-gradient(135deg, #b91c1c, #991b1b);\n transform: translateY(0);\n}\n\n/* ===== SIZES ===== */\n\n.duino-btn--sm {\n padding: 6px 12px;\n font-size: 13px;\n min-height: 28px;\n}\n\n.duino-btn--md {\n padding: 8px 16px;\n font-size: 14px;\n min-height: 36px;\n}\n\n.duino-btn--lg {\n padding: 12px 24px;\n font-size: 16px;\n min-height: 44px;\n}\n\n/* ===== SHAPES ===== */\n\n.duino-btn--round {\n border-radius: 50px;\n}\n\n.duino-btn--circle {\n border-radius: 50%;\n width: auto;\n aspect-ratio: 1;\n padding: 8px;\n}\n\n.duino-btn--circle.duino-btn--sm {\n padding: 6px;\n min-height: 28px;\n width: 28px;\n}\n\n.duino-btn--circle.duino-btn--lg {\n padding: 12px;\n min-height: 44px;\n width: 44px;\n}\n\n/* ===== STATES ===== */\n\n/* Block - Ancho completo */\n.duino-btn--block {\n width: 100%;\n display: flex;\n}\n\n/* Loading */\n.duino-btn--loading {\n cursor: wait;\n pointer-events: none;\n}\n\n.duino-btn--loading .duino-btn__text {\n opacity: 0.7;\n}\n\n/* Disabled */\n.duino-btn--disabled {\n cursor: not-allowed;\n opacity: 0.6;\n transform: none !important;\n box-shadow: none !important;\n}\n\n.duino-btn--disabled:hover {\n transform: none !important;\n box-shadow: none !important;\n}\n\n/* Icon only */\n.duino-btn--icon-only {\n padding-left: 8px;\n padding-right: 8px;\n}\n\n.duino-btn--icon-only.duino-btn--sm {\n padding: 6px;\n}\n\n.duino-btn--icon-only.duino-btn--lg {\n padding: 12px;\n}\n\n/* ===== ELEMENTS ===== */\n\n/* Loading spinner */\n.duino-btn__loading {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.duino-btn__spinner {\n width: 14px;\n height: 14px;\n animation: duino-spin 1s linear infinite;\n}\n\n.duino-btn--sm .duino-btn__spinner {\n width: 12px;\n height: 12px;\n}\n\n.duino-btn--lg .duino-btn__spinner {\n width: 16px;\n height: 16px;\n}\n\n.duino-btn__spinner-circle {\n stroke: currentColor;\n stroke-dasharray: 50;\n stroke-dashoffset: 25;\n stroke-linecap: round;\n animation: duino-spin-dash 1.5s ease-in-out infinite;\n}\n\n/* Icon */\n.duino-btn__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.duino-btn__icon svg {\n width: 1em;\n height: 1em;\n}\n\n/* Text */\n.duino-btn__text {\n display: flex;\n align-items: center;\n}\n\n/* ===== ANIMATIONS ===== */\n\n@keyframes duino-spin {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n}\n\n@keyframes duino-spin-dash {\n 0% {\n stroke-dasharray: 1, 150;\n stroke-dashoffset: 0;\n }\n\n 50% {\n stroke-dasharray: 90, 150;\n stroke-dashoffset: -35;\n }\n\n 100% {\n stroke-dasharray: 90, 150;\n stroke-dashoffset: -124;\n }\n}\n\n/* ===== RESPONSIVE ===== */\n\n@media (max-width: 640px) {\n .duino-btn--lg {\n padding: 10px 20px;\n font-size: 15px;\n min-height: 40px;\n }\n\n .duino-btn--md {\n padding: 7px 14px;\n font-size: 13px;\n min-height: 34px;\n }\n}\n\n/* ===== ACCESSIBILITY ===== */\n\n@media (prefers-reduced-motion: reduce) {\n .duino-btn {\n transition: none;\n }\n\n .duino-btn__spinner {\n animation: none;\n }\n\n .duino-btn__spinner-circle {\n animation: none;\n stroke-dasharray: none;\n stroke-dashoffset: 0;\n }\n}\n\n/* High contrast mode */\n@media (prefers-contrast: high) {\n .duino-btn {\n border-width: 2px;\n }\n\n .duino-btn:focus-visible {\n outline-width: 3px;\n }\n}","/* Import tokens */\n@import \"../../styles/tokens.css\";\n\n/* ===== DUINO COLLAPSE - BEM METHODOLOGY ===== */\n\n/* Block: duino-collapse */\n.duino-collapse {\n font-family: var(--duino-font);\n color: var(--duino-color-fg);\n background: var(--duino-color-bg);\n}\n\n/* ===== VARIANTS ===== */\n\n/* Default variant */\n.duino-collapse--default {\n border: 1px solid var(--duino-border);\n border-radius: var(--duino-radius);\n overflow: hidden;\n}\n\n.duino-collapse--default .duino-collapse__panel:not(:last-child) {\n border-bottom: 1px solid var(--duino-border);\n}\n\n/* Ghost variant */\n.duino-collapse--ghost {\n background: transparent;\n}\n\n.duino-collapse--ghost .duino-collapse__panel {\n border: none;\n margin-bottom: var(--duino-gap-sm);\n border-radius: var(--duino-radius);\n overflow: hidden;\n}\n\n.duino-collapse--ghost .duino-collapse__header {\n background: var(--duino-brand-50);\n border: 1px solid var(--duino-brand-200);\n}\n\n.duino-collapse--ghost .duino-collapse__content {\n border: 1px solid var(--duino-brand-200);\n border-top: none;\n}\n\n/* Bordered variant */\n.duino-collapse--bordered {\n border: 2px solid var(--duino-brand-200);\n border-radius: var(--duino-radius);\n}\n\n.duino-collapse--bordered .duino-collapse__panel:not(:last-child) {\n border-bottom: 2px solid var(--duino-brand-200);\n}\n\n.duino-collapse--bordered .duino-collapse__header {\n background: linear-gradient(135deg, var(--duino-brand-50), var(--duino-brand-100));\n}\n\n/* ===== SIZES ===== */\n\n/* Small */\n.duino-collapse--sm .duino-collapse__header {\n padding: 8px 12px;\n font-size: 13px;\n}\n\n.duino-collapse--sm .duino-collapse__body {\n padding: 8px 12px;\n font-size: 13px;\n}\n\n.duino-collapse--sm .duino-collapse__arrow {\n width: 12px;\n height: 12px;\n}\n\n/* Medium (default) */\n.duino-collapse--md .duino-collapse__header {\n padding: 12px 16px;\n font-size: 14px;\n}\n\n.duino-collapse--md .duino-collapse__body {\n padding: 12px 16px;\n font-size: 14px;\n}\n\n.duino-collapse--md .duino-collapse__arrow {\n width: 14px;\n height: 14px;\n}\n\n/* Large */\n.duino-collapse--lg .duino-collapse__header {\n padding: 16px 20px;\n font-size: 15px;\n}\n\n.duino-collapse--lg .duino-collapse__body {\n padding: 16px 20px;\n font-size: 15px;\n}\n\n.duino-collapse--lg .duino-collapse__arrow {\n width: 16px;\n height: 16px;\n}\n\n/* ===== ELEMENTS ===== */\n\n/* Panel */\n.duino-collapse__panel {\n background: var(--duino-color-bg);\n transition: all 0.2s ease;\n}\n\n.duino-collapse__panel--active {\n /* Estilos para panel activo */\n}\n\n.duino-collapse__panel--disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n.duino-collapse__panel--animating {\n /* Estilos durante animación */\n}\n\n/* Header */\n.duino-collapse__header {\n display: flex;\n align-items: center;\n gap: var(--duino-gap-sm);\n background: var(--duino-color-bg);\n border: none;\n width: 100%;\n text-align: left;\n transition: all 0.2s ease;\n position: relative;\n -webkit-user-select: none;\n user-select: none;\n}\n\n.duino-collapse__header--clickable {\n cursor: pointer;\n}\n\n.duino-collapse__header--clickable:hover:not(.duino-collapse__panel--disabled .duino-collapse__header) {\n background: var(--duino-brand-50);\n}\n\n.duino-collapse__header--clickable:focus-visible {\n outline: 2px solid var(--duino-ring);\n outline-offset: -2px;\n}\n\n.duino-collapse__panel--active .duino-collapse__header {\n background: var(--duino-brand-100);\n color: var(--duino-brand-700);\n font-weight: 600;\n}\n\n/* Header content */\n.duino-collapse__header-content {\n flex: 1;\n font-weight: 500;\n line-height: 1.4;\n}\n\n/* Extra content */\n.duino-collapse__extra {\n margin-left: auto;\n color: var(--duino-color-muted);\n font-size: 0.9em;\n}\n\n/* Icon */\n.duino-collapse__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--duino-color-muted);\n transition: all 0.2s ease;\n cursor: pointer;\n padding: 2px;\n border-radius: 4px;\n}\n\n.duino-collapse__icon:hover {\n background: var(--duino-brand-100);\n color: var(--duino-brand-600);\n}\n\n.duino-collapse__icon--start {\n order: -1;\n}\n\n.duino-collapse__icon--end {\n order: 1;\n}\n\n/* Arrow */\n.duino-collapse__arrow {\n transition: transform 0.2s ease;\n flex-shrink: 0;\n}\n\n.duino-collapse__panel--active .duino-collapse__arrow {\n transform: rotate(180deg);\n}\n\n/* Content */\n.duino-collapse__content {\n overflow: hidden;\n transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n background: var(--duino-color-bg);\n}\n\n.duino-collapse__body {\n padding: 12px 16px;\n border-top: 1px solid var(--duino-border);\n color: var(--duino-color-fg);\n line-height: 1.6;\n}\n\n.duino-collapse--ghost .duino-collapse__body {\n border-top: none;\n background: var(--duino-color-bg);\n}\n\n/* ===== ACCORDION MODE ===== */\n\n.duino-collapse--accordion .duino-collapse__panel {\n /* Estilos específicos para modo acordeón */\n}\n\n/* ===== RESPONSIVE ===== */\n\n@media (max-width: 640px) {\n .duino-collapse--lg .duino-collapse__header {\n padding: 14px 16px;\n font-size: 14px;\n }\n\n .duino-collapse--lg .duino-collapse__body {\n padding: 14px 16px;\n font-size: 14px;\n }\n\n .duino-collapse--md .duino-collapse__header {\n padding: 10px 14px;\n font-size: 13px;\n }\n\n .duino-collapse--md .duino-collapse__body {\n padding: 10px 14px;\n font-size: 13px;\n }\n}\n\n/* ===== ACCESSIBILITY ===== */\n\n@media (prefers-reduced-motion: reduce) {\n .duino-collapse__content {\n transition: none;\n }\n\n .duino-collapse__arrow {\n transition: none;\n }\n\n .duino-collapse__header {\n transition: none;\n }\n\n .duino-collapse__icon {\n transition: none;\n }\n}\n\n/* High contrast mode */\n@media (prefers-contrast: high) {\n .duino-collapse--default {\n border-width: 2px;\n }\n\n .duino-collapse__panel:not(:last-child) {\n border-bottom-width: 2px;\n }\n\n .duino-collapse__body {\n border-top-width: 2px;\n }\n}\n\n/* Focus styles */\n.duino-collapse__header:focus-visible {\n outline: 2px solid var(--duino-ring);\n outline-offset: -2px;\n}\n\n.duino-collapse__icon:focus-visible {\n outline: 2px solid var(--duino-ring);\n outline-offset: 1px;\n}\n\n/* ===== CONTENT STYLES ===== */\n\n/* Rich content support */\n.duino-collapse__body h1,\n.duino-collapse__body h2,\n.duino-collapse__body h3,\n.duino-collapse__body h4,\n.duino-collapse__body h5,\n.duino-collapse__body h6 {\n margin: 0 0 12px 0;\n font-weight: 600;\n line-height: 1.3;\n color: var(--duino-brand-700);\n}\n\n.duino-collapse__body p {\n margin: 0 0 12px 0;\n line-height: 1.6;\n}\n\n.duino-collapse__body p:last-child {\n margin-bottom: 0;\n}\n\n.duino-collapse__body ul,\n.duino-collapse__body ol {\n margin: 0 0 12px 0;\n padding-left: 20px;\n}\n\n.duino-collapse__body li {\n margin-bottom: 4px;\n line-height: 1.5;\n}\n\n.duino-collapse__body a {\n color: var(--duino-brand-500);\n text-decoration: none;\n}\n\n.duino-collapse__body a:hover {\n color: var(--duino-brand-600);\n text-decoration: underline;\n}\n\n.duino-collapse__body code {\n background: var(--duino-brand-50);\n color: var(--duino-brand-700);\n padding: 2px 6px;\n border-radius: 4px;\n font-size: 0.9em;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n}\n\n.duino-collapse__body pre {\n background: var(--duino-brand-50);\n color: var(--duino-brand-700);\n padding: 12px;\n border-radius: 6px;\n font-size: 0.9em;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n overflow-x: auto;\n margin: 12px 0;\n border: 1px solid var(--duino-brand-200);\n}\n\n.duino-collapse__body blockquote {\n margin: 12px 0;\n padding: 12px 16px;\n border-left: 4px solid var(--duino-brand-300);\n background: var(--duino-brand-50);\n border-radius: 0 6px 6px 0;\n font-style: italic;\n}\n\n.duino-collapse__body hr {\n border: none;\n border-top: 1px solid var(--duino-border);\n margin: 16px 0;\n}\n\n/* Interactive content */\n.duino-collapse__body .duino-btn {\n margin: 4px 4px 4px 0;\n}\n\n/* Images */\n.duino-collapse__body img {\n max-width: 100%;\n height: auto;\n border-radius: 6px;\n margin: 8px 0;\n}\n\n/* Tables */\n.duino-collapse__body table {\n width: 100%;\n border-collapse: collapse;\n margin: 12px 0;\n font-size: 0.9em;\n}\n\n.duino-collapse__body th,\n.duino-collapse__body td {\n padding: 8px 12px;\n text-align: left;\n border-bottom: 1px solid var(--duino-border);\n}\n\n.duino-collapse__body th {\n font-weight: 600;\n background: var(--duino-brand-50);\n color: var(--duino-brand-700);\n}\n\n/* ===== PRINT STYLES ===== */\n\n@media print {\n .duino-collapse__content {\n height: auto !important;\n overflow: visible !important;\n }\n\n .duino-collapse__panel {\n page-break-inside: avoid;\n }\n\n .duino-collapse__arrow {\n display: none;\n }\n}","/* Import tokens */\n@import \"../../styles/tokens.css\";\n\n/* ===== DUINO SPIN - BEM METHODOLOGY ===== */\n\n/* Block: duino-spin */\n.duino-spin {\n display: inline-flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--duino-gap-sm);\n color: var(--duino-brand-500);\n}\n\n/* ===== SIZES ===== */\n\n/* Extra Small */\n.duino-spin--xs {\n font-size: 12px;\n}\n\n.duino-spin--xs .duino-spin__svg {\n width: 12px;\n height: 12px;\n}\n\n/* Small */\n.duino-spin--sm {\n font-size: 14px;\n}\n\n.duino-spin--sm .duino-spin__svg {\n width: 16px;\n height: 16px;\n}\n\n/* Medium (default) */\n.duino-spin--md {\n font-size: 16px;\n}\n\n.duino-spin--md .duino-spin__svg {\n width: 24px;\n height: 24px;\n}\n\n/* Large */\n.duino-spin--lg {\n font-size: 18px;\n}\n\n.duino-spin--lg .duino-spin__svg {\n width: 32px;\n height: 32px;\n}\n\n/* Extra Large */\n.duino-spin--xl {\n font-size: 20px;\n}\n\n.duino-spin--xl .duino-spin__svg {\n width: 48px;\n height: 48px;\n}\n\n/* ===== SPINNER TYPES ===== */\n\n/* Circle Spinner (Default) */\n.duino-spin__svg {\n animation: duino-spin-rotate 1s linear infinite;\n}\n\n.duino-spin__circle {\n stroke: currentColor;\n stroke-dasharray: 50;\n stroke-dashoffset: 25;\n stroke-linecap: round;\n animation: duino-spin-dash 1.5s ease-in-out infinite;\n}\n\n@keyframes duino-spin-rotate {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}\n\n@keyframes duino-spin-dash {\n 0% {\n stroke-dasharray: 1, 150;\n stroke-dashoffset: 0;\n }\n 50% {\n stroke-dasharray: 90, 150;\n stroke-dashoffset: -35;\n }\n 100% {\n stroke-dasharray: 90, 150;\n stroke-dashoffset: -124;\n }\n}\n\n/* Dots Spinner */\n.duino-spin__dots {\n display: flex;\n gap: 4px;\n align-items: center;\n}\n\n.duino-spin__dots--xs { gap: 2px; }\n.duino-spin__dots--sm { gap: 3px; }\n.duino-spin__dots--md { gap: 4px; }\n.duino-spin__dots--lg { gap: 5px; }\n.duino-spin__dots--xl { gap: 6px; }\n\n.duino-spin__dot {\n background: currentColor;\n border-radius: 50%;\n animation: duino-spin-dots 1.4s ease-in-out infinite both;\n}\n\n.duino-spin__dots--xs .duino-spin__dot { width: 3px; height: 3px; }\n.duino-spin__dots--sm .duino-spin__dot { width: 4px; height: 4px; }\n.duino-spin__dots--md .duino-spin__dot { width: 6px; height: 6px; }\n.duino-spin__dots--lg .duino-spin__dot { width: 8px; height: 8px; }\n.duino-spin__dots--xl .duino-spin__dot { width: 10px; height: 10px; }\n\n.duino-spin__dot--1 { animation-delay: -0.32s; }\n.duino-spin__dot--2 { animation-delay: -0.16s; }\n.duino-spin__dot--3 { animation-delay: 0s; }\n\n@keyframes duino-spin-dots {\n 0%, 80%, 100% {\n transform: scale(0);\n opacity: 0.5;\n }\n 40% {\n transform: scale(1);\n opacity: 1;\n }\n}\n\n/* Pulse Spinner */\n.duino-spin__pulse {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.duino-spin__pulse--xs { width: 12px; height: 12px; }\n.duino-spin__pulse--sm { width: 16px; height: 16px; }\n.duino-spin__pulse--md { width: 24px; height: 24px; }\n.duino-spin__pulse--lg { width: 32px; height: 32px; }\n.duino-spin__pulse--xl { width: 48px; height: 48px; }\n\n.duino-spin__pulse-ring {\n position: absolute;\n border: 2px solid currentColor;\n border-radius: 50%;\n animation: duino-spin-pulse 2s ease-in-out infinite;\n}\n\n.duino-spin__pulse-ring--1 {\n width: 100%;\n height: 100%;\n animation-delay: 0s;\n}\n\n.duino-spin__pulse-ring--2 {\n width: 80%;\n height: 80%;\n animation-delay: -0.4s;\n}\n\n.duino-spin__pulse-ring--3 {\n width: 60%;\n height: 60%;\n animation-delay: -0.8s;\n}\n\n@keyframes duino-spin-pulse {\n 0% {\n transform: scale(0);\n opacity: 1;\n }\n 100% {\n transform: scale(1);\n opacity: 0;\n }\n}\n\n/* Bars Spinner */\n.duino-spin__bars {\n display: flex;\n gap: 2px;\n align-items: center;\n}\n\n.duino-spin__bars--xs { gap: 1px; }\n.duino-spin__bars--sm { gap: 1.5px; }\n.duino-spin__bars--md { gap: 2px; }\n.duino-spin__bars--lg { gap: 3px; }\n.duino-spin__bars--xl { gap: 4px; }\n\n.duino-spin__bar {\n background: currentColor;\n animation: duino-spin-bars 1s ease-in-out infinite;\n}\n\n.duino-spin__bars--xs .duino-spin__bar { width: 2px; height: 8px; }\n.duino-spin__bars--sm .duino-spin__bar { width: 2px; height: 12px; }\n.duino-spin__bars--md .duino-spin__bar { width: 3px; height: 16px; }\n.duino-spin__bars--lg .duino-spin__bar { width: 4px; height: 20px; }\n.duino-spin__bars--xl .duino-spin__bar { width: 5px; height: 28px; }\n\n.duino-spin__bar--1 { animation-delay: -0.4s; }\n.duino-spin__bar--2 { animation-delay: -0.3s; }\n.duino-spin__bar--3 { animation-delay: -0.2s; }\n.duino-spin__bar--4 { animation-delay: -0.1s; }\n.duino-spin__bar--5 { animation-delay: 0s; }\n\n@keyframes duino-spin-bars {\n 0%, 40%, 100% {\n transform: scaleY(0.4);\n opacity: 0.7;\n }\n 20% {\n transform: scaleY(1);\n opacity: 1;\n }\n}\n\n/* Ring Spinner */\n.duino-spin__ring {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.duino-spin__ring--xs { width: 12px; height: 12px; }\n.duino-spin__ring--sm { width: 16px; height: 16px; }\n.duino-spin__ring--md { width: 24px; height: 24px; }\n.duino-spin__ring--lg { width: 32px; height: 32px; }\n.duino-spin__ring--xl { width: 48px; height: 48px; }\n\n.duino-spin__ring-segment {\n position: absolute;\n width: 100%;\n height: 100%;\n border: 2px solid transparent;\n border-radius: 50%;\n animation: duino-spin-ring 1.2s linear infinite;\n}\n\n.duino-spin__ring-segment--1 {\n border-top-color: currentColor;\n animation-delay: 0s;\n}\n\n.duino-spin__ring-segment--2 {\n border-right-color: currentColor;\n animation-delay: -0.3s;\n}\n\n.duino-spin__ring-segment--3 {\n border-bottom-color: currentColor;\n animation-delay: -0.6s;\n}\n\n.duino-spin__ring-segment--4 {\n border-left-color: currentColor;\n animation-delay: -0.9s;\n}\n\n@keyframes duino-spin-ring {\n 0% {\n transform: rotate(0deg);\n opacity: 1;\n }\n 50% {\n opacity: 0.3;\n }\n 100% {\n transform: rotate(360deg);\n opacity: 1;\n }\n}\n\n/* Wave Spinner */\n.duino-spin__wave {\n display: flex;\n gap: 2px;\n align-items: end;\n}\n\n.duino-spin__wave--xs { gap: 1px; }\n.duino-spin__wave--sm { gap: 1.5px; }\n.duino-spin__wave--md { gap: 2px; }\n.duino-spin__wave--lg { gap: 3px; }\n.duino-spin__wave--xl { gap: 4px; }\n\n.duino-spin__wave-bar {\n background: currentColor;\n border-radius: 1px;\n animation: duino-spin-wave 1.2s ease-in-out infinite;\n}\n\n.duino-spin__wave--xs .duino-spin__wave-bar { width: 2px; height: 6px; }\n.duino-spin__wave--sm .duino-spin__wave-bar { width: 2px; height: 10px; }\n.duino-spin__wave--md .duino-spin__wave-bar { width: 3px; height: 14px; }\n.duino-spin__wave--lg .duino-spin__wave-bar { width: 4px; height: 18px; }\n.duino-spin__wave--xl .duino-spin__wave-bar { width: 5px; height: 24px; }\n\n.duino-spin__wave-bar--1 { animation-delay: -0.4s; }\n.duino-spin__wave-bar--2 { animation-delay: -0.3s; }\n.duino-spin__wave-bar--3 { animation-delay: -0.2s; }\n.duino-spin__wave-bar--4 { animation-delay: -0.1s; }\n.duino-spin__wave-bar--5 { animation-delay: 0s; }\n\n@keyframes duino-spin-wave {\n 0%, 40%, 100% {\n transform: scaleY(0.4);\n }\n 20% {\n transform: scaleY(1);\n }\n}\n\n/* ===== ELEMENTS ===== */\n\n/* Tip text */\n.duino-spin__tip {\n color: var(--duino-color-muted);\n font-size: 0.9em;\n font-weight: 500;\n text-align: center;\n margin-top: var(--duino-gap-sm);\n line-height: 1.4;\n}\n\n/* ===== WRAPPER STYLES ===== */\n\n/* Wrapper for content with spinner overlay */\n.duino-spin-wrapper {\n position: relative;\n display: block;\n}\n\n.duino-spin-wrapper--spinning {\n /* Estilos cuando está cargando */\n}\n\n/* Overlay */\n.duino-spin-overlay {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(255, 255, 255, 0.8);\n backdrop-filter: blur(1px);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10;\n border-radius: inherit;\n}\n\n/* Content states */\n.duino-spin-content {\n transition: filter 0.2s ease;\n}\n\n.duino-spin-content--blurred {\n filter: blur(0.5px);\n opacity: 0.7;\n pointer-events: none;\n transition: all 0.2s ease;\n}\n\n/* ===== RESPONSIVE ===== */\n\n@media (max-width: 640px) {\n .duino-spin--xl .duino-spin__svg {\n width: 40px;\n height: 40px;\n }\n \n .duino-spin--lg .duino-spin__svg {\n width: 28px;\n height: 28px;\n }\n}\n\n/* ===== ACCESSIBILITY ===== */\n\n@media (prefers-reduced-motion: reduce) {\n .duino-spin__svg,\n .duino-spin__dot,\n .duino-spin__pulse-ring,\n .duino-spin__bar,\n .duino-spin__ring-segment,\n .duino-spin__wave-bar {\n animation: none;\n }\n \n .duino-spin__circle {\n animation: none;\n stroke-dasharray: none;\n stroke-dashoffset: 0;\n }\n \n /* Mostrar indicador estático para usuarios con motion reducido */\n .duino-spin__svg .duino-spin__circle {\n stroke-dasharray: 25, 25;\n }\n}\n\n/* High contrast mode */\n@media (prefers-contrast: high) {\n .duino-spin {\n color: var(--duino-color-fg);\n }\n \n .duino-spin-overlay {\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: none;\n }\n}\n\n/* Dark theme support */\n@media (prefers-color-scheme: dark) {\n .duino-spin-overlay {\n background: rgba(31, 41, 55, 0.8);\n }\n}\n\n/* ===== CONTEXTUAL STYLES ===== */\n\n/* En botones */\n.duino-btn .duino-spin {\n margin: 0;\n}\n\n.duino-btn .duino-spin__tip {\n display: none;\n}\n\n/* En inputs */\n.duino-input .duino-spin {\n position: absolute;\n right: 8px;\n top: 50%;\n transform: translateY(-50%);\n}\n\n/* En cards */\n.duino-card .duino-spin-overlay {\n border-radius: var(--duino-radius);\n}\n\n/* ===== PRINT STYLES ===== */\n\n@media print {\n .duino-spin,\n .duino-spin-overlay {\n display: none !important;\n }\n \n .duino-spin-content--blurred {\n filter: none !important;\n opacity: 1 !important;\n pointer-events: auto !important;\n }\n}\n","/* Import tokens */\n@import \"../../styles/tokens.css\";\n\n/* ===== DUINO IMAGE - BEM METHODOLOGY ===== */\n\n/* Block: duino-image */\n.duino-image {\n position: relative;\n display: inline-block;\n overflow: hidden;\n background: var(--duino-brand-50);\n transition: all 0.2s ease;\n}\n\n/* ===== SHAPES ===== */\n\n.duino-image--square {\n border-radius: 0;\n}\n\n.duino-image--rounded {\n border-radius: var(--duino-radius);\n}\n\n.duino-image--circle {\n border-radius: 50%;\n aspect-ratio: 1;\n}\n\n/* ===== MODIFIERS ===== */\n\n.duino-image--bordered {\n border: 2px solid var(--duino-border);\n}\n\n.duino-image--shadow {\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n}\n\n.duino-image--preview {\n cursor: pointer;\n transition: transform 0.2s ease;\n}\n\n.duino-image--preview:hover {\n transform: scale(1.02);\n}\n\n/* ===== FIT TYPES ===== */\n\n.duino-image--fill .duino-image__img {\n object-fit: fill;\n}\n\n.duino-image--contain .duino-image__img {\n object-fit: contain;\n}\n\n.duino-image--cover .duino-image__img {\n object-fit: cover;\n}\n\n.duino-image--none .duino-image__img {\n object-fit: none;\n}\n\n.duino-image--scale-down .duino-image__img {\n object-fit: scale-down;\n}\n\n/* ===== ELEMENTS ===== */\n\n/* Image element */\n.duino-image__img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: opacity 0.3s ease;\n}\n\n.duino-image__img--loading {\n opacity: 0;\n}\n\n.duino-image__img--loaded {\n opacity: 1;\n}\n\n.duino-image__img--error {\n opacity: 0;\n}\n\n/* Loading state */\n.duino-image__loading {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--duino-brand-50);\n}\n\n/* Error state */\n.duino-image__error {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n background: var(--duino-brand-50);\n color: var(--duino-color-muted);\n gap: var(--duino-gap-sm);\n}\n\n.duino-image__error-icon {\n width: 24px;\n height: 24px;\n opacity: 0.5;\n}\n\n.duino-image__error-text {\n font-size: 12px;\n text-align: center;\n}\n\n/* Placeholder */\n.duino-image__placeholder {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--duino-brand-50);\n color: var(--duino-color-muted);\n}\n\n.duino-image__placeholder-icon {\n width: 32px;\n height: 32px;\n opacity: 0.3;\n}\n\n/* Preview overlay */\n.duino-image__preview-overlay {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0;\n transition: opacity 0.2s ease;\n}\n\n.duino-image--preview:hover .duino-image__preview-overlay {\n opacity: 1;\n}\n\n.duino-image__preview-icon {\n width: 24px;\n height: 24px;\n color: white;\n}\n\n/* Caption */\n.duino-image__caption {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));\n color: white;\n padding: 8px 12px;\n font-size: 12px;\n line-height: 1.4;\n}\n\n/* ===== PREVIEW MODAL ===== */\n\n.duino-image__preview-modal {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.8);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1100;\n cursor: pointer;\n animation: duino-image-modal-in 0.2s ease-out;\n}\n\n@keyframes duino-image-modal-in {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n.duino-image__preview-content {\n position: relative;\n max-width: 90vw;\n max-height: 90vh;\n cursor: default;\n}\n\n.duino-image__preview-img {\n max-width: 100%;\n max-height: 100%;\n object-fit: contain;\n border-radius: var(--duino-radius);\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);\n}\n\n.duino-image__preview-close {\n position: absolute;\n top: -40px;\n right: 0;\n background: rgba(255, 255, 255, 0.9);\n border: none;\n border-radius: 50%;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n font-size: 18px;\n color: var(--duino-color-fg);\n transition: background-color 0.2s ease;\n}\n\n.duino-image__preview-close:hover {\n background: white;\n}\n\n.duino-image__preview-caption {\n position: absolute;\n bottom: -40px;\n left: 0;\n right: 0;\n color: white;\n text-align: center;\n font-size: 14px;\n line-height: 1.4;\n}\n\n/* ===== RESPONSIVE ===== */\n\n@media (max-width: 640px) {\n .duino-image__preview-content {\n max-width: 95vw;\n max-height: 95vh;\n }\n\n .duino-image__preview-close {\n top: -35px;\n width: 28px;\n height: 28px;\n font-size: 16px;\n }\n\n .duino-image__preview-caption {\n bottom: -35px;\n font-size: 13px;\n }\n}\n\n/* ===== ACCESSIBILITY ===== */\n\n@media (prefers-reduced-motion: reduce) {\n\n .duino-image,\n .duino-image__img,\n .duino-image__preview-overlay {\n transition: none;\n }\n\n .duino-image__preview-modal {\n animation: none;\n }\n\n .duino-image--preview:hover {\n transform: none;\n }\n}\n\n/* High contrast mode */\n@media (prefers-contrast: high) {\n .duino-image--bordered {\n border-width: 3px;\n }\n\n .duino-image__preview-overlay {\n background: rgba(0, 0, 0, 0.8);\n }\n}\n\n/* Print styles */\n@media print {\n .duino-image__preview-modal {\n display: none !important;\n }\n\n .duino-image__preview-overlay {\n display: none;\n }\n}","/* Estado del body cuando hay modal abierto */\n.is-modal-open {\n overflow: hidden;\n}\n\n/* Bloque principal */\n.duino-modal {\n position: fixed;\n inset: 0;\n z-index: 1000;\n pointer-events: none;\n opacity: 0;\n transition: opacity 160ms ease;\n}\n\n.duino-modal--open {\n pointer-events: auto;\n opacity: 1;\n}\n\n/* Fondo */\n.duino-modal__mask {\n position: absolute;\n inset: 0;\n background: rgba(19, 21, 26, 0.45);\n backdrop-filter: saturate(120%) blur(2px);\n}\n\n/* Contenedor del diálogo */\n.duino-modal__container {\n position: relative;\n box-sizing: border-box;\n margin: 48px auto;\n max-width: 90vw;\n background: var(--duino-color-bg);\n color: var(--duino-color-fg);\n border: 1px solid var(--duino-border);\n border-radius: var(--duino-radius);\n box-shadow:\n 0 10px 20px rgba(0, 0, 0, .12),\n 0 6px 6px rgba(0, 0, 0, .08);\n outline: none;\n\n /* Sutil borde superior con el color de marca (Arduino-ish) */\n border-top: 4px solid var(--ximo-brand-600, var(--duino-brand-600));\n /* fallback por si alguien renombra variables */\n}\n\n/* Centrado vertical opcional */\n.duino-modal--centered .duino-modal__container {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n margin: 0;\n /* anula margen superior cuando centrado */\n}\n\n/* Header */\n.duino-modal__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--duino-gap);\n padding: calc(var(--duino-gap-lg) + 2px) var(--duino-gap-lg);\n border-bottom: 1px solid var(--duino-border);\n background:\n linear-gradient(180deg, var(--duino-brand-50), transparent 60%);\n border-top-left-radius: var(--duino-radius);\n border-top-right-radius: var(--duino-radius);\n}\n\n.duino-modal__title {\n margin: 0;\n font-family: var(--duino-font);\n font-weight: 600;\n font-size: 1rem;\n color: var(--duino-brand-800);\n}\n\n/* Botón cerrar estilo Arduino */\n.duino-modal__close {\n appearance: none;\n border: 1px solid var(--duino-border);\n background: #fff;\n font-size: 1.125rem;\n line-height: 1;\n border-radius: 8px;\n width: 32px;\n height: 32px;\n cursor: pointer;\n transition: box-shadow 120ms ease, transform 80ms ease;\n}\n\n.duino-modal__close:hover {\n box-shadow: 0 0 0 3px var(--duino-brand-100);\n}\n\n.duino-modal__close:active {\n transform: translateY(1px);\n}\n\n/* Body */\n.duino-modal__body {\n padding: var(--duino-gap-lg);\n font-family: var(--duino-font);\n color: var(--duino-color-fg);\n}\n\n/* Footer */\n.duino-modal__footer {\n display: flex;\n gap: var(--duino-gap);\n justify-content: flex-end;\n padding: var(--duino-gap-lg);\n border-top: 1px solid var(--duino-border);\n background: #fafafa;\n border-bottom-left-radius: var(--duino-radius);\n border-bottom-right-radius: var(--duino-radius);\n}\n\n/* Botones base reusables (Arduino look) */\n.duino-btn {\n font-family: var(--duino-font);\n border-radius: 10px;\n padding: 0.5rem 0.9rem;\n border: 1px solid var(--duino-border);\n background: #fff;\n cursor: pointer;\n transition: box-shadow 120ms ease, transform 80ms ease, background 120ms ease;\n}\n\n.duino-btn:hover {\n box-shadow: 0 0 0 3px var(--duino-brand-100);\n}\n\n.duino-btn:active {\n transform: translateY(1px);\n}\n\n.duino-btn--primary {\n background: var(--duino-brand-600);\n color: #fff;\n border-color: var(--duino-brand-600);\n}\n\n.duino-btn--primary:hover {\n box-shadow: 0 0 0 3px var(--duino-brand-200);\n}\n\n.duino-btn--ghost {\n background: #fff;\n color: var(--duino-brand-800);\n border-color: var(--duino-border);\n}\n\n/* Animación de entrada (sutil “pop”) */\n.duino-modal--open .duino-modal__container {\n animation: duino-modal-pop 160ms ease;\n}\n\n@keyframes duino-modal-pop {\n from {\n opacity: 0;\n transform: translate(-50%, -48%) scale(0.98);\n }\n\n to {\n opacity: 1;\n transform: translate(-50%, -50%) scale(1);\n }\n}\n\n/* Si no está centrado, ajustar animación de entrada sin translate -50% */\n.duino-modal--open:not(.duino-modal--centered) .duino-modal__container {\n animation: duino-modal-pop-top 160ms ease;\n}\n\n@keyframes duino-modal-pop-top {\n from {\n opacity: 0;\n transform: translateY(-4px) scale(0.98);\n }\n\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n}\n\n/* Responsive: limitar ancho en pantallas pequeñas */\n@media (max-width: 520px) {\n .duino-modal__container {\n width: calc(100vw - 24px) !important;\n }\n}","/* Contenedor principal (BEM) */\n.duino-message {\n position: fixed;\n z-index: 1100;\n pointer-events: none;\n display: flex;\n gap: var(--duino-gap);\n flex-direction: column;\n padding: var(--duino-gap);\n}\n\n/* Placement modifiers */\n.duino-message--top-right {\n top: 8px;\n right: 8px;\n align-items: flex-end;\n}\n\n.duino-message--top-left {\n top: 8px;\n left: 8px;\n align-items: flex-start;\n}\n\n.duino-message--bottom-right {\n bottom: 8px;\n right: 8px;\n align-items: flex-end;\n}\n\n.duino-message--bottom-left {\n bottom: 8px;\n left: 8px;\n align-items: flex-start;\n}\n\n/* Item */\n.duino-message__item {\n pointer-events: auto;\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n gap: var(--duino-gap);\n min-width: 240px;\n max-width: 420px;\n padding: .6rem .75rem;\n border: 1px solid var(--duino-border);\n border-radius: var(--duino-radius);\n background: var(--duino-color-bg);\n color: var(--duino-color-fg);\n box-shadow:\n 0 10px 20px rgba(0, 0, 0, .10),\n 0 6px 6px rgba(0, 0, 0, .05);\n animation: duino-msg-in 140ms ease-out;\n}\n\n/* Icono simple */\n.duino-message__icon {\n font-weight: 700;\n width: 1.25rem;\n text-align: center;\n}\n\n/* Contenido */\n.duino-message__content {\n font-family: var(--duino-font);\n font-size: .95rem;\n line-height: 1.35;\n}\n\n/* Cerrar */\n.duino-message__close {\n appearance: none;\n border: 1px solid var(--duino-border);\n background: #fff;\n width: 24px;\n height: 24px;\n border-radius: 6px;\n cursor: pointer;\n line-height: 1;\n}\n\n.duino-message__close:hover {\n box-shadow: 0 0 0 3px var(--duino-brand-100);\n}\n\n/* Variantes Arduino (teal) + estados */\n.duino-message__item--info {\n border-left: 4px solid var(--duino-brand-500);\n}\n\n.duino-message__item--success {\n border-left: 4px solid var(--duino-brand-600);\n background: linear-gradient(180deg, var(--duino-brand-50), transparent);\n}\n\n.duino-message__item--warning {\n border-left: 4px solid #f59e0b;\n background: linear-gradient(180deg, #fffbeb, transparent);\n}\n\n.duino-message__item--error {\n border-left: 4px solid var(--duino-danger-500);\n background: linear-gradient(180deg, #fef2f2, transparent);\n}\n\n.duino-message__item--loading {\n border-left: 4px solid var(--duino-brand-400);\n}\n\n/* Animaciones */\n@keyframes duino-msg-in {\n from {\n transform: translateY(-4px);\n opacity: 0;\n }\n\n to {\n transform: translateY(0);\n opacity: 1;\n }\n}","/* Import tokens */\n@import \"../../styles/tokens.css\";\n\n/* ===== DUINO POPOVER - BEM METHODOLOGY ===== */\n\n/* Block: duino-popover */\n.duino-popover {\n position: absolute;\n z-index: 1050;\n font-family: var(--duino-font);\n font-size: 14px;\n line-height: 1.5;\n transition: opacity 0.15s ease, visibility 0.15s ease;\n pointer-events: auto;\n}\n\n/* ===== ELEMENTS ===== */\n\n/* Content wrapper */\n.duino-popover__content {\n position: relative;\n background: var(--duino-color-bg);\n border: 1px solid var(--duino-border);\n border-radius: var(--duino-radius);\n box-shadow:\n 0 10px 25px rgba(0, 0, 0, 0.1),\n 0 4px 6px rgba(0, 0, 0, 0.05);\n max-width: 300px;\n word-wrap: break-word;\n animation: duino-popover-in 0.15s ease-out;\n}\n\n@keyframes duino-popover-in {\n from {\n opacity: 0;\n transform: scale(0.95) translateY(-2px);\n }\n\n to {\n opacity: 1;\n transform: scale(1) translateY(0);\n }\n}\n\n/* Inner content */\n.duino-popover__inner {\n padding: 12px 16px;\n}\n\n/* Title */\n.duino-popover__title {\n font-weight: 600;\n color: var(--duino-color-fg);\n margin-bottom: 8px;\n font-size: 14px;\n line-height: 1.4;\n}\n\n.duino-popover__title:only-child {\n margin-bottom: 0;\n}\n\n/* Body */\n.duino-popover__body {\n color: var(--duino-color-fg);\n font-size: 13px;\n line-height: 1.5;\n}\n\n/* Arrow */\n.duino-popover__arrow {\n position: absolute;\n width: 16px;\n height: 16px;\n background: var(--duino-color-bg);\n border: 1px solid var(--duino-border);\n transform: rotate(45deg);\n z-index: -1;\n}\n\n/* Hover bridge - área invisible para mantener hover */\n.duino-popover__hover-bridge {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: -2;\n}\n\n/* ===== PLACEMENT MODIFIERS ===== */\n\n/* Top placements */\n.duino-popover__content--top,\n.duino-popover__content--top-start,\n.duino-popover__content--top-end {\n margin-bottom: 8px;\n}\n\n.duino-popover__content--top .duino-popover__arrow,\n.duino-popover__content--top-start .duino-popover__arrow,\n.duino-popover__content--top-end .duino-popover__arrow {\n bottom: -9px;\n border-top: none;\n border-left: none;\n}\n\n.duino-popover__content--top .duino-popover__arrow {\n left: 50%;\n margin-left: -8px;\n}\n\n.duino-popover__content--top-start .duino-popover__arrow {\n left: 16px;\n}\n\n.duino-popover__content--top-end .duino-popover__arrow {\n right: 16px;\n}\n\n/* Bottom placements */\n.duino-popover__content--bottom,\n.duino-popover__content--bottom-start,\n.duino-popover__content--bottom-end {\n margin-top: 8px;\n}\n\n.duino-popover__content--bottom .duino-popover__arrow,\n.duino-popover__content--bottom-start .duino-popover__arrow,\n.duino-popover__content--bottom-end .duino-popover__arrow {\n top: -9px;\n border-bottom: none;\n border-right: none;\n}\n\n.duino-popover__content--bottom .duino-popover__arrow {\n left: 50%;\n margin-left: -8px;\n}\n\n.duino-popover__content--bottom-start .duino-popover__arrow {\n left: 16px;\n}\n\n.duino-popover__content--bottom-end .duino-popover__arrow {\n right: 16px;\n}\n\n/* Left placements */\n.duino-popover__content--left,\n.duino-popover__content--left-start,\n.duino-popover__content--left-end {\n margin-right: 8px;\n}\n\n.duino-popover__content--left .duino-popover__arrow,\n.duino-popover__content--left-start .duino-popover__arrow,\n.duino-popover__content--left-end .duino-popover__arrow {\n right: -9px;\n border-left: none;\n border-bottom: none;\n}\n\n.duino-popover__content--left .duino-popover__arrow {\n top: 50%;\n margin-top: -8px;\n}\n\n.duino-popover__content--left-start .duino-popover__arrow {\n top: 16px;\n}\n\n.duino-popover__content--left-end .duino-popover__arrow {\n bottom: 16px;\n}\n\n/* Right placements */\n.duino-popover__content--right,\n.duino-popover__content--right-start,\n.duino-popover__content--right-end {\n margin-left: 8px;\n}\n\n.duino-popover__content--right .duino-popover__arrow,\n.duino-popover__content--right-start .duino-popover__arrow,\n.duino-popover__content--right-end .duino-popover__arrow {\n left: -9px;\n border-right: none;\n border-top: none;\n}\n\n.duino-popover__content--right .duino-popover__arrow {\n top: 50%;\n margin-top: -8px;\n}\n\n.duino-popover__content--right-start .duino-popover__arrow {\n top: 16px;\n}\n\n.duino-popover__content--right-end .duino-popover__arrow {\n bottom: 16px;\n}\n\n/* ===== RESPONSIVE ===== */\n\n@media (max-width: 640px) {\n .duino-popover__content {\n max-width: 280px;\n font-size: 13px;\n }\n\n .duino-popover__inner {\n padding: 10px 12px;\n }\n\n .duino-popover__title {\n font-size: 13px;\n margin-bottom: 6px;\n }\n\n .duino-popover__body {\n font-size: 12px;\n }\n}\n\n@media (max-width: 480px) {\n .duino-popover__content {\n max-width: calc(100vw - 32px);\n margin: 0 16px;\n }\n}\n\n/* ===== ACCESSIBILITY ===== */\n\n@media (prefers-reduced-motion: reduce) {\n .duino-popover {\n transition: none;\n }\n\n .duino-popover__content {\n animation: none;\n }\n}\n\n/* High contrast mode */\n@media (prefers-contrast: high) {\n .duino-popover__content {\n border-width: 2px;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);\n }\n\n .duino-popover__arrow {\n border-width: 2px;\n }\n}\n\n/* Dark theme support */\n@media (prefers-color-scheme: dark) {\n .duino-popover__content {\n background: #1f2937;\n border-color: #374151;\n color: #f9fafb;\n }\n\n .duino-popover__arrow {\n background: #1f2937;\n border-color: #374151;\n }\n\n .duino-popover__title {\n color: #f9fafb;\n }\n\n .duino-popover__body {\n color: #d1d5db;\n }\n}\n\n/* ===== SPECIAL CONTENT STYLES ===== */\n\n/* Rich content support */\n.duino-popover__body h1,\n.duino-popover__body h2,\n.duino-popover__body h3,\n.duino-popover__body h4,\n.duino-popover__body h5,\n.duino-popover__body h6 {\n margin: 0 0 8px 0;\n font-weight: 600;\n line-height: 1.3;\n}\n\n.duino-popover__body p {\n margin: 0 0 8px 0;\n}\n\n.duino-popover__body p:last-child {\n margin-bottom: 0;\n}\n\n.duino-popover__body ul,\n.duino-popover__body ol {\n margin: 0 0 8px 0;\n padding-left: 16px;\n}\n\n.duino-popover__body li {\n margin-bottom: 2px;\n}\n\n.duino-popover__body a {\n color: var(--duino-brand-500);\n text-decoration: none;\n}\n\n.duino-popover__body a:hover {\n color: var(--duino-brand-600);\n text-decoration: underline;\n}\n\n.duino-popover__body code {\n background: var(--duino-brand-50);\n color: var(--duino-brand-700);\n padding: 2px 4px;\n border-radius: 3px;\n font-size: 12px;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n}\n\n.duino-popover__body pre {\n background: var(--duino-brand-50);\n color: var(--duino-brand-700);\n padding: 8px;\n border-radius: 4px;\n font-size: 12px;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n overflow-x: auto;\n margin: 8px 0;\n}\n\n.duino-popover__body hr {\n border: none;\n border-top: 1px solid var(--duino-border);\n margin: 12px 0;\n}\n\n/* Interactive content */\n.duino-popover__body button {\n margin: 4px 4px 4px 0;\n}\n\n.duino-popover__body .duino-btn {\n font-size: 12px;\n padding: 4px 8px;\n min-height: 24px;\n}\n\n/* Images */\n.duino-popover__body img {\n max-width: 100%;\n height: auto;\n border-radius: 4px;\n margin: 4px 0;\n}\n\n/* Tables */\n.duino-popover__body table {\n width: 100%;\n border-collapse: collapse;\n font-size: 12px;\n margin: 8px 0;\n}\n\n.duino-popover__body th,\n.duino-popover__body td {\n padding: 4px 8px;\n text-align: left;\n border-bottom: 1px solid var(--duino-border);\n}\n\n.duino-popover__body th {\n font-weight: 600;\n background: var(--duino-brand-50);\n}\n\n/* ===== PRINT STYLES ===== */\n\n@media print {\n .duino-popover {\n display: none !important;\n }\n}","/* Import tokens */\n@import \"../../styles/tokens.css\";\n\n/* ===== DUINO SELECT - BEM METHODOLOGY ===== */\n\n/* Block: duino-select */\n.duino-select {\n position: relative;\n display: inline-block;\n width: 100%;\n max-width: 100%;\n font-family: var(--duino-font);\n color: var(--duino-color-fg);\n cursor: pointer;\n outline: none;\n}\n\n.duino-select--disabled {\n cursor: not-allowed;\n opacity: 0.6;\n}\n\n.duino-select--disabled * {\n cursor: not-allow