/* ===== SYDOGS UI – Tokens y Accesibilidad ===== */ :root{ --sd-radius: 10px; --sd-radius-pill: 999px; --sd-border: #2a2a2a; --sd-bg: #1a1a1a; --sd-bg-ghost: #86e893; --sd-fg: #ffffff; --sd-fg-sub: #bbbbbb; --sd-ok: #5bbd9c; --sd-ok-border: #3b7671; --sd-focus: 0 0 0 3px rgba(75, 157, 130, 0.35); --sd-transition: 160ms ease; } /* Light theme opcional: agrega data-theme="light" al o al contenedor */ :root[data-theme="light"]{ --sd-border:#d6d6d6; --sd-bg:#ffffff; --sd-bg-ghost:#f4f4f4; --sd-fg:#111111; --sd-fg-sub:#5f5f5f; --sd-ok:#0fb47e; --sd-ok-border:#0a7b58; --sd-focus: 0 0 0 3px rgba(15,180,126,.35); } /* Respeta usuarios con reducción de movimiento */ @media (prefers-reduced-motion: reduce){ :root{ --sd-transition: 0ms; } } /* Visually hidden (a11y) */ .visually-hidden{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* ===== Botones ===== */ .btn{ appearance:none; -webkit-appearance:none; display:inline-flex; align-items:center; justify-content:center; gap:.45rem; border:1px solid var(--sd-border); background:var(--sd-bg-ghost); color:var(--sd-fg); padding:.55rem .9rem; border-radius:var(--sd-radius); cursor:pointer; user-select:none; line-height:1.1; text-decoration:none; transition:opacity var(--sd-transition), transform var(--sd-transition), box-shadow var(--sd-transition), background var(--sd-transition), color var(--sd-transition), border-color var(--sd-transition); } .btn:hover{ opacity:.92 } .btn:active{ transform: translateY(1px); } .btn:focus-visible{ outline:none; box-shadow: var(--sd-focus); } .btn:disabled, .btn[aria-busy="true"]{ opacity:.55; cursor:not-allowed; } /* Tamaño pequeño (mantén compatibilidad con tu selector) */ .btn.btn-sm{ padding:.35rem .6rem; border-radius:calc(var(--sd-radius) - 2px); } /* Éxito / acción positiva */ .btn.btn-success{ background:var(--sd-ok); color:#000; border-color:var(--sd-ok-border); } /* Variante “fantasma” (borde + fondo sutil) por si la necesitás */ .btn.btn-ghost{ background:var(--sd-bg); } /* Indicador de carga simple cuando uses aria-busy="true" */ .btn[aria-busy="true"]::after{ content:""; width:1em; height:1em; border-radius:50%; border:2px solid currentColor; border-right-color: transparent; display:inline-block; animation: sd-spin .8s linear infinite; } @keyframes sd-spin{ to{ transform: rotate(360deg); } } /* ===== Badges ===== */ .badge{ display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .55rem; font-size:.85rem; line-height:1; border:1px solid var(--sd-border); border-radius:var(--sd-radius-pill); background:var(--sd-bg); color:var(--sd-fg-sub); } /* Compatibilidad con tu clase existente */ .badge.bg-dark{ background:var(--sd-bg); color:var(--sd-fg-sub); border-color:var(--sd-border); } /* Utilidad para íconos dentro de botones/badges */ .btn > svg, .badge > svg { width:1rem; height:1rem; } /* Alto contraste (opcional) */ @media (forced-colors: active){ .btn, .badge{ border:1px solid ButtonText; } .btn:focus-visible{ outline:2px solid Highlight; } }