/* ===================================================================== HostCarriel 2026 · hc-ui.css — interruptores y cargadores del área de clientes y del carrito (2026-10-11). Se enlaza en includes/head.tpl DESPUÉS de hc-theme.css (el carrito carga el mismo head.tpl). Solo tokens del sistema de diseño (hostcarriel-ds.css): sirve igual en oscuro (:root) y en claro (:root[data-theme="light"]). Sin librerías; la lógica opcional (textos Sí/No, frases del cargador, ARIA) está en assets/js/hc-ui.js y el CSS funciona entero sin él. Selectores: «html body:not(#hc-ui) …» suma una «ID» de especificidad a propósito. Gana a los restilados antiguos (hc-soporte.css «.hc-pg .bootstrap-switch», custom.css del carrito) y a las reglas de Shufy con !important de anchura que cuelgan de 3 clases (búsqueda de dominios). No hay ningún elemento con id="hc-ui". ===================================================================== */ /* ====================================================================== 1 · INTERRUPTORES (bootstrap-switch de Shufy + .switch--text + indicador de lista + role=switch) Anatomía de bootstrap-switch: div.bootstrap-switch(.-on|-off) > div.-container > span.-handle-on + span.-label + span.-handle-off + input[type=checkbox] Aquí: el envoltorio mide 68×44 (zona táctil de 44 px); la pista de 60×30 es su ::before; la bolita, su ::after. Los dos «handle» ocupan TODO el envoltorio (el visible recibe el clic: pulsar en cualquier parte lo alterna con la lógica original de bootstrap-switch, sin JS nuestro) y llevan el texto Sí/No al lado contrario de la bolita: el estado se lee por posición y por texto, no solo por color. Contraste: ON = --fill con --on-fill (5,0:1) y bolita blanca (3,4:1 con la pista); OFF = borde y bolita --muted (≥ 4,5:1 sobre --surface-2 en oscuro y en claro). ====================================================================== */ html body:not(#hc-ui) .bootstrap-switch { --sw-w: 60px; --sw-h: 30px; --sw-knob: 22px; --sw-gap: 4px; --sw-bd: 1.5px; position: relative; display: inline-block; vertical-align: middle; flex: none; box-sizing: border-box; width: calc(var(--sw-w) + 8px) !important; min-width: 0 !important; height: 44px; margin: 0; padding: 0; /* !important de ancho: bootstrap-switch lo fija en línea y Shufy a 66/55 px */ border: 0; border-radius: 0; background: transparent; box-shadow: none !important; outline: 0 !important; /* !important: Shufy los quita con !important */ overflow: visible; cursor: pointer; line-height: 1; font-size: 12px; text-align: left; direction: ltr; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; transition: none; } /* Pista */ html body:not(#hc-ui) .bootstrap-switch::before { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; height: var(--sw-h); margin-top: calc(var(--sw-h) / -2); box-sizing: border-box; border-radius: 999px; pointer-events: none; z-index: 0; background: var(--surface-2); border: var(--sw-bd) solid var(--muted); transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease; } html body:not(#hc-ui) .bootstrap-switch:hover::before { border-color: var(--accent); } html body:not(#hc-ui) .bootstrap-switch.bootstrap-switch-on::before { background: var(--fill); border-color: var(--fill); } html body:not(#hc-ui) .bootstrap-switch.bootstrap-switch-on:hover::before { background: var(--fill-hover); border-color: var(--fill-hover); } /* Bolita */ html body:not(#hc-ui) .bootstrap-switch::after { content: ""; position: absolute; left: calc(4px + var(--sw-bd) + 2.5px); top: 50%; right: auto; bottom: auto; width: var(--sw-knob); height: var(--sw-knob); border-radius: 50%; box-sizing: border-box; pointer-events: none; z-index: 2; background: var(--muted); box-shadow: 0 1px 2px rgba(0, 0, 0, .35); transform: translate(0, -50%); transition: transform .24s var(--ease-spring), background-color .2s ease; } html body:not(#hc-ui) .bootstrap-switch.bootstrap-switch-on::after { left: calc(4px + var(--sw-bd) + 2.5px); background: #fff; transform: translate(calc(var(--sw-w) - 2 * var(--sw-bd) - 5px - var(--sw-knob)), -50%); } html body:not(#hc-ui) .bootstrap-switch:active::after { transform: translate(0, -50%) scale(.92); } html body:not(#hc-ui) .bootstrap-switch.bootstrap-switch-on:active::after { transform: translate(calc(var(--sw-w) - 2 * var(--sw-bd) - 5px - var(--sw-knob)), -50%) scale(.92); } /* Contenedor sin caja propia: solo aloja los dos textos y el input */ html body:not(#hc-ui) .bootstrap-switch .bootstrap-switch-container, html body.body__dark:not(#hc-ui) .bootstrap-switch .bootstrap-switch-container { position: static; display: block; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0; border: 0; background: transparent; transform: none; /* !important: Shufy y el plugin los fijan con !important/en línea */ } html body:not(#hc-ui) .bootstrap-switch .bootstrap-switch-label { display: none !important; } /* !important: el plugin le pone ancho en línea */ /* Textos Sí/No: cada uno ocupa todo el interruptor (zona de clic) y se alinea al lado contrario de la bolita */ html body:not(#hc-ui) .bootstrap-switch .bootstrap-switch-handle-on, html body:not(#hc-ui) .bootstrap-switch .bootstrap-switch-handle-off { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 1; display: flex !important; align-items: center; /* !important: el plugin pone display/ancho en línea */ box-sizing: border-box; width: 100% !important; height: 100% !important; margin: 0; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none; /* !important: Shufy los pinta con !important */ font-family: var(--font-mono); font-size: .75rem; font-weight: 700; line-height: 1; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; opacity: 1; visibility: visible; transition: none; } html body:not(#hc-ui) .bootstrap-switch .bootstrap-switch-handle-on { justify-content: flex-start; padding: 0 0 0 calc(4px + var(--sw-bd) + 9px) !important; color: var(--on-fill) !important; } /* !important: Shufy fija el color y el padding con !important */ html body:not(#hc-ui) .bootstrap-switch .bootstrap-switch-handle-off { justify-content: flex-end; padding: 0 calc(4px + var(--sw-bd) + 9px) 0 0 !important; color: var(--muted) !important; } html body:not(#hc-ui) .bootstrap-switch.bootstrap-switch-on .bootstrap-switch-handle-off, html body:not(#hc-ui) .bootstrap-switch.bootstrap-switch-off .bootstrap-switch-handle-on { opacity: 0; visibility: hidden; pointer-events: none; } /* La bolita deja pasar el clic al texto que tiene debajo (arriba: pointer-events: none) */ /* El input real sigue en el árbol (foco con Tab, barra espaciadora, etiqueta externa) pero invisible */ html body:not(#hc-ui) .bootstrap-switch input[type="checkbox"], html body:not(#hc-ui) .bootstrap-switch input[type="radio"] { position: absolute !important; left: 0; top: 0; width: 1px; height: 1px; margin: 0; opacity: 0; z-index: -1; pointer-events: none; /* !important: Shufy la pone en absolute; que no cambie */ } /* Foco de teclado: anillo en la pista (:focus-visible del input real; el ratón no lo dispara) */ html body:not(#hc-ui) .bootstrap-switch:has(input:focus-visible)::before { outline: 2px solid var(--accent); outline-offset: 3px; box-shadow: var(--ring); } html body:not(#hc-ui) .bootstrap-switch.bootstrap-switch-focused { box-shadow: none; } /* Deshabilitado / solo lectura */ html body:not(#hc-ui) .bootstrap-switch.bootstrap-switch-disabled, html body:not(#hc-ui) .bootstrap-switch.bootstrap-switch-readonly { opacity: .5; cursor: not-allowed; } html body:not(#hc-ui) .bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-on, html body:not(#hc-ui) .bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-off { cursor: not-allowed; } html body:not(#hc-ui) .bootstrap-switch.bootstrap-switch-disabled:hover::before { border-color: var(--muted); } html body:not(#hc-ui) .bootstrap-switch.bootstrap-switch-disabled.bootstrap-switch-on:hover::before { border-color: var(--fill); } /* Variante dentro de etiquetas de la búsqueda de dominios: Shufy recorta alto y ancho a 55×22 con !important */ html body:not(#hc-ui) .domain__register__form__spotlighttlds .bootstrap-switch, html body:not(#hc-ui) .advenced__search__option__wrapper .bootstrap-switch { width: calc(var(--sw-w) + 8px) !important; min-width: 0 !important; } html body:not(#hc-ui) .domain__register__form__spotlighttlds .bootstrap-switch .bootstrap-switch-container { height: 0 !important; } html body:not(#hc-ui) .switch__box__on__off { align-items: center; gap: 12px; } html body:not(#hc-ui) .switch__box__on__off .switch__box__on__off__title { margin-right: 0; } /* — Variante .switch--text (ficha del dominio: renovación automática, bloqueo): label > input.switch__checkbox + .switch__container — */ html body:not(#hc-ui) .switch--text .switch__container { box-sizing: border-box; width: 60px; height: 30px; border-radius: 999px; border: 1.5px solid var(--muted); background: var(--surface-2); transition: background-color .2s ease, border-color .2s ease; } html body:not(#hc-ui) .switch--text .switch__checkbox:checked + .switch__container { background: var(--fill); border-color: var(--fill); } html body:not(#hc-ui) .switch--text .switch__container::before { content: ""; position: absolute; left: -4px; right: -4px; top: -7px; bottom: -7px; z-index: 0; } /* zona táctil de 44 px */ html body:not(#hc-ui) .switch--text .switch__container .switch__handle { position: absolute; top: 50%; left: 2.5px; right: auto; width: 22px; height: 22px; border-radius: 50%; background: var(--muted); box-shadow: 0 1px 2px rgba(0, 0, 0, .35); transform: translate(0, -50%); transition: transform .24s var(--ease-spring), background-color .2s ease; } html body:not(#hc-ui) .switch--text .switch__checkbox:checked + .switch__container .switch__handle, html body:not(#hc-ui) .switch--lg.switch--text .switch__checkbox:checked + .switch__container .switch__handle { left: 2.5px; right: auto; background: #fff; transform: translate(30px, -50%); } html body:not(#hc-ui) .switch--lg.switch--text .switch__checkbox + .switch__container .switch__handle { left: 2.5px; right: auto; } html body:not(#hc-ui) .switch--text .switch__checkbox + .switch__container::after, html body:not(#hc-ui) .switch--lg.switch--text .switch__checkbox + .switch__container::after { content: "No"; position: absolute; top: 0; bottom: 0; right: 10px; left: auto; display: flex; align-items: center; z-index: 1; pointer-events: none; font-family: var(--font-mono); font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } html body:not(#hc-ui) .switch--text .switch__checkbox:checked + .switch__container::after, html body:not(#hc-ui) .switch--lg.switch--text .switch__checkbox:checked + .switch__container::after { content: "Sí"; left: 10px; right: auto !important; color: var(--on-fill); } /* !important: Shufy fija right con !important en .switch--lg */ html:lang(en) body:not(#hc-ui) .switch--text .switch__checkbox:checked + .switch__container::after { content: "Yes"; } html body:not(#hc-ui) .switch--text .switch__checkbox:focus-visible + .switch__container { outline: 2px solid var(--accent); outline-offset: 3px; } html body:not(#hc-ui) .switch--text .switch__checkbox { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; } /* — Indicador de la lista de dominios (a.switch.not__clickable__switch): no es un control, enlaza a la ficha. Mismo dibujo, 56×24 — */ html body:not(#hc-ui) .switch.not__clickable__switch { position: relative; display: block; width: 56px; height: 24px; } html body:not(#hc-ui) .switch.not__clickable__switch .switch__container { position: absolute; left: 0; top: 50%; right: auto; transform: translateY(-50%); box-sizing: border-box; width: 56px; height: 24px; overflow: hidden; border-radius: 999px; border: 1.5px solid var(--muted); background: var(--surface-2); box-shadow: none; transition: none; } html body:not(#hc-ui) .switch.not__clickable__switch .switch__container.active { background: var(--fill); border-color: var(--fill); box-shadow: none; } html body:not(#hc-ui) .switch.not__clickable__switch .switch__container .switch__handle { position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); transform: translateY(-50%); box-shadow: 0 1px 2px rgba(0, 0, 0, .35); } html body:not(#hc-ui) .switch.not__clickable__switch .switch__container.active .switch__handle { left: auto; right: 3px; background: #fff; } html body:not(#hc-ui) .switch.not__clickable__switch .switch__container.not-active .switch__handle { left: 3px; right: auto; } html body:not(#hc-ui) .switch.not__clickable__switch .switch__container .switch__text { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; height: auto; margin: 0; font-family: var(--font-mono); font-size: .625rem; font-weight: 600; letter-spacing: .08em; line-height: 1; text-transform: uppercase; } html body:not(#hc-ui) .switch.not__clickable__switch .switch__container.active .switch__text { left: 8px; right: auto; color: var(--on-fill); } html body:not(#hc-ui) .switch.not__clickable__switch .switch__container.not-active .switch__text { right: 8px; left: auto; color: var(--muted); } html body:not(#hc-ui) .switch.not__clickable__switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 999px; } /* — Interruptor nativo de Bootstrap (.form-switch / [role=switch]): sin texto, estado por posición y por color — */ html body:not(#hc-ui) .form-check:has(> input.form-check-input[role="switch"]) { display: flex; align-items: center; gap: 12px; min-height: 44px; padding-left: 0; } html body:not(#hc-ui) input.form-check-input[role="switch"]:not(.bootstrap-switch *) { -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 60px; height: 30px; margin: 7px 0; border: 1.5px solid var(--muted); border-radius: 999px; box-shadow: none; background-color: var(--surface-2); background-image: radial-gradient(circle closest-side, var(--muted) 96%, transparent 100%); background-repeat: no-repeat; background-size: 22px 22px; background-position: 2.5px 50%; cursor: pointer; transition: background-color .2s ease, border-color .2s ease, background-position .24s var(--ease-spring); } html body:not(#hc-ui) input.form-check-input[role="switch"]:not(.bootstrap-switch *):checked { background-color: var(--fill); border-color: var(--fill); background-image: radial-gradient(circle closest-side, #fff 96%, transparent 100%); background-position: calc(100% - 2.5px) 50%; } html body:not(#hc-ui) input.form-check-input[role="switch"]:not(.bootstrap-switch *):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } html body:not(#hc-ui) input.form-check-input[role="switch"]:not(.bootstrap-switch *):disabled { opacity: .5; cursor: not-allowed; } /* ====================================================================== 2 · CARGADOR «ÓRBITA» Una sola construcción, sobre el propio elemento: un anillo fino, una estela verde que se desvanece y un satélite (punto) que lo recorre, más un núcleo opcional. Todo en UN elemento: tres capas de fondo (anillo, estela, punto/núcleo) y una máscara que deja solo esas formas (las máscaras se suman). Variables: --o diámetro · --od radio del satélite · --ob grosor del anillo · --oc radio del núcleo --hc-o-sat / --hc-o-trail / --hc-o-ring / --hc-o-core colores (por defecto, acento y texto; se heredan, así que un contexto como el botón primario los cambia sin tocar la construcción). No se tocan: la búsqueda de dominios del carrito, .hcp-spin del panel Mi Hosting ni la secuencia de lanzamiento del checkout (el :not(...) de abajo deja fuera lo que cuelga de esas zonas). ====================================================================== */ @keyframes hcUiOrbit { to { transform: rotate(360deg); } } @keyframes hcUiPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } } @keyframes hcUiGiveUp { 0% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } } /* 2.1 · Construcción común (versión mini y versión de página) */ html body:not(#hc-ui) :is(.shufytheme__loader__eight, .minimalist__loader__spiner, .spinner-border, .spinner-grow, .hc-ui-orbit), html body:not(#hc-ui) :is(i, span).fa-spin:is(.fa-spinner, .fa-circle-notch, .fa-spinner-third):not(:is(.domain-lookup-loader, .domain-lookup-suggestions-loader, .domain-lookup-result, .domain-lookup-message, .domain-suggestion, .domain__search__results__wrapper, .domain__search__suggested__domains__wrapper, .domain__search__page__spotlighttlds, .spotlight__tlds__domains__configure__product__wrapper, .domain__page__luckup__result__box, .spotlight-tlds-container, .spotlight-tld-container, .suggested-domains, .hcp-loading) *) { --o: 1.2em; --od: calc(var(--o) * .13); --ob: max(1.3px, calc(var(--o) * .07)); --oc: calc(var(--o) * .1); --o-sat: var(--hc-o-sat, var(--accent)); --o-trail: var(--hc-o-trail, var(--accent)); --o-ring: var(--hc-o-ring, color-mix(in srgb, var(--text) 20%, transparent)); --o-core: var(--hc-o-core, var(--text)); display: inline-block; position: relative; box-sizing: border-box; flex: none; width: var(--o); height: var(--o); min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 50%; vertical-align: -.22em; line-height: 1; text-indent: 0; text-shadow: none; overflow: visible; background: radial-gradient(circle at 50% 50%, var(--o-core) calc(var(--oc) - .6px), transparent var(--oc)), radial-gradient(circle at 50% var(--od), var(--o-sat) calc(var(--od) - .6px), transparent var(--od)), conic-gradient(from 0deg, transparent 0deg 110deg, var(--o-trail) 360deg), linear-gradient(var(--o-ring), var(--o-ring)); -webkit-mask-image: radial-gradient(closest-side, transparent calc(100% - var(--od) - var(--ob) / 2), #000 calc(100% - var(--od) - var(--ob) / 2 + .6px), #000 calc(100% - var(--od) + var(--ob) / 2), transparent calc(100% - var(--od) + var(--ob) / 2 + .6px)), radial-gradient(circle at 50% var(--od), #000 calc(var(--od) - .6px), transparent var(--od)), radial-gradient(circle at 50% 50%, #000 calc(var(--oc) - .6px), transparent var(--oc)); mask-image: radial-gradient(closest-side, transparent calc(100% - var(--od) - var(--ob) / 2), #000 calc(100% - var(--od) - var(--ob) / 2 + .6px), #000 calc(100% - var(--od) + var(--ob) / 2), transparent calc(100% - var(--od) + var(--ob) / 2 + .6px)), radial-gradient(circle at 50% var(--od), #000 calc(var(--od) - .6px), transparent var(--od)), radial-gradient(circle at 50% 50%, #000 calc(var(--oc) - .6px), transparent var(--oc)); animation: hcUiOrbit var(--o-dur, 1.15s) linear infinite !important; transform: none; transition: none; /* !important: Shufy fija .fa-spin con animation-* !important (app.css, fa-spin 2 s) */ } /* Fuera: el glifo de Font Awesome, el halo de Shufy y su segundo círculo */ html body:not(#hc-ui) :is(i, span).fa-spin:is(.fa-spinner, .fa-circle-notch, .fa-spinner-third)::before, html body:not(#hc-ui) :is(i, span).fa-spin:is(.fa-spinner, .fa-circle-notch, .fa-spinner-third)::after, html body:not(#hc-ui) :is(.shufytheme__loader__eight, .minimalist__loader__spiner, .spinner-border, .spinner-grow)::before, html body:not(#hc-ui) :is(.shufytheme__loader__eight, .minimalist__loader__spiner, .spinner-border, .spinner-grow)::after { content: none; display: none; animation: none; } /* Tamaños de contexto */ html body:not(#hc-ui) .spinner-border, html body:not(#hc-ui) .spinner-grow { --o: 30px; } html body:not(#hc-ui) .spinner-border-sm, html body:not(#hc-ui) .spinner-grow-sm { --o: 16px; } html body:not(#hc-ui) .shufytheme__loader__eight, html body:not(#hc-ui) .minimalist__loader__spiner { --o: 56px; --o-dur: 1.5s; } html body:not(#hc-ui) .minimalist__loader__spiner { text-indent: 0; -webkit-transform: none; } /* En botones con relleno de acento el verde desaparece: todo en el color del texto del botón */ html body:not(#hc-ui) :is(.btn-primary, .hc-btn--primary, .btn-checkout, .btn-success) { --hc-o-sat: currentColor; --hc-o-trail: currentColor; --hc-o-core: currentColor; --hc-o-ring: color-mix(in srgb, currentColor 28%, transparent); } html body:not(#hc-ui) :is(.btn, .hc-btn) :is(i, span).fa-spin:is(.fa-spinner, .fa-circle-notch, .fa-spinner-third) { --o: 1.15em; margin-right: .5em; vertical-align: -.2em; } html body:not(#hc-ui) :is(.btn, .hc-btn) :is(i, span).fa-spin:is(.fa-spinner, .fa-circle-notch, .fa-spinner-third):only-child { margin-right: 0; } /* Texto que acompaña al icono (p. ej. «