/* Botones sellados por Diego (2026-09-13 16:49): la opción 3 por cómo se SIENTE, con los COLORES del CRM.
   Drop-in para la pantalla viva (opcion-c2-pulida/opcion-c2.html): un <link> a este archivo + un <script> a botones-sellados.js.
   No cambia colores ni tamaños: solo cómo responde el botón a la mano. Curvas selladas en Skill map/ui/SKILL.md. */
:root { --bs-settle: cubic-bezier(.2, .9, .3, 1); --bs-m3: cubic-bezier(.2, 0, 0, 1); --bs-spring: cubic-bezier(.34, 1.28, .64, 1); --bs-sweep: cubic-bezier(.1, .8, .2, 1); }

/* Botones con cuerpo (.btn del kit, Pay, Add shift): se levantan 2 px al acercarte y rebotan al apretar */
.btn, .pc-add { position: relative; overflow: hidden; isolation: isolate;
  transition: transform 260ms var(--bs-spring), box-shadow 220ms var(--bs-settle), border-color 220ms var(--bs-settle), background-color 220ms var(--bs-settle), color 220ms var(--bs-settle), opacity 220ms var(--bs-settle); }
.btn:hover:not([disabled]):not([aria-disabled="true"]):not([aria-busy="true"]),
.pc-add:hover:not([disabled]) { transform: translateY(-2px); border-color: rgb(255 255 255 / 22%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 12px 26px rgba(0, 0, 0, .4); }
.btn-primary:hover:not([aria-disabled="true"]):not([aria-busy="true"]) { border-color: transparent; box-shadow: 0 12px 26px rgba(0, 0, 0, .42), inset 0 -6px 12px rgba(0, 0, 0, .16), inset 1.5px 1.5px 1px rgba(255, 255, 255, .18), inset -1px -1px 1px rgba(255, 255, 255, .06); }
.btn:active:not([disabled]):not([aria-disabled="true"]):not([aria-busy="true"]),
.pc-add:active:not([disabled]) { transform: translateY(0) scale(.96); transition: transform 90ms var(--bs-m3), box-shadow 90ms var(--bs-m3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 1px 3px rgba(0, 0, 0, .3); }
.btn-primary:active:not([aria-disabled="true"]):not([aria-busy="true"]) { box-shadow: 0 1px 3px rgba(0, 0, 0, .3), inset 0 2px 6px rgba(0, 0, 0, .3); }
.btn[disabled], .btn[aria-disabled="true"] { transform: none; box-shadow: none; }

/* Botones de texto y chicos: sin levantarse; solo el rebote al apretar y la onda */
.pc-textbtn, .ghost, .c-pre button, .pe-x { position: relative; overflow: hidden; isolation: isolate; transition: transform 260ms var(--bs-spring), color 200ms var(--bs-settle), background-color 200ms var(--bs-settle), opacity 200ms var(--bs-settle); }
.pc-textbtn:active:not([disabled]), .ghost:active, .c-pre button:active, .pe-x:active { transform: scale(.96); }

/* Onda M3 (la capa la inyecta botones-sellados.js al apretar, sobre el botón y colgada de <body>) */
.bs-rip { overflow: hidden; pointer-events: none; }
.bs-rip > i { position: absolute; top: 0; left: 0; border-radius: 50%; opacity: 0; background: radial-gradient(closest-side, currentColor max(calc(100% - 70px), 65%), transparent 100%); }

/* Cargando: la página pone aria-busy="true" y cambia el texto al verbo ("Saving…", "Adding…", "Printing…"); el anillo y el brillo salen solos */
.btn[aria-busy="true"] { cursor: progress; pointer-events: none; }
.btn[aria-busy="true"]::before { content: ""; flex: none; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: bsSpin 700ms linear infinite; }
.btn[aria-busy="true"]::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .16) 50%, transparent 70%); animation: bsShine 1.3s var(--bs-sweep) infinite; }
@keyframes bsSpin { to { transform: rotate(360deg); } }
@keyframes bsShine { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* Foco de teclado */
.btn:focus-visible, .pc-add:focus-visible, .pc-textbtn:focus-visible { outline: 2px solid var(--ff-focus-ring); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) { .btn, .pc-add, .pc-textbtn, .ghost, .c-pre button, .pe-x, .btn[aria-busy="true"]::before, .btn[aria-busy="true"]::after { transition: none !important; animation: none !important; transform: none !important; } }
