/* KIBOU PHARMA · SISTEMA DE BOTONES · v2.7 — copia literal del manual de botones (no modificar) */
/* =========================================================
   KIBOU PHARMA · SISTEMA DE BOTONES · v2.7 · 29/09/2026
   Primario y secundario: en hover sube un tono más oscuro desde abajo
   y el texto rota con él; al salir, el tono baja y el botón vuelve.
   El primario no lleva flecha; el secundario sí.
   Terciario, ícono y navegación: el texto sube y la flecha se renueva.
   Contextos: claro · .kb-dark (azul) · .kb-accent (aqua) · .kb-vivid (tarjetas de división)
   ========================================================= */

:root {
  /* ---- Color ---- */
  --kb-azul: #003E56;
  --kb-azul-profundo: #00293A;
  --kb-aqua: #009586;
  --kb-aqua-oscuro: #00786D;
  --kb-aqua-claro: #4FC3B5;
  --kb-gris-texto: #4A6472;

  /* ---- Movimiento ---- */
  --kb-dur: .5s;                              /* relleno, texto y flecha del primario y el secundario */
  --kb-ease: cubic-bezier(.22, 1, .36, 1);
  --kb-roll: .3s cubic-bezier(.65, 0, .35, 1); /* texto que sube del terciario y el menú */
  --kb-fade: .2s ease;

  /* ---- Contexto claro (blanco y gris) ---- */
  --kb-p-bg: var(--kb-aqua);          --kb-p-fg: #FFFFFF;
  --kb-p-fill: var(--kb-aqua-oscuro);

  --kb-s-bg: var(--kb-azul);          --kb-s-line: var(--kb-azul);
  --kb-s-fg: #FFFFFF;                 --kb-s-arrow: #FFFFFF;
  --kb-s-fill: var(--kb-azul-profundo);

  --kb-i-line: var(--kb-aqua); --kb-i-fg: var(--kb-azul); --kb-i-fill: rgba(0, 149, 134, .10);

  --kb-t-fg: var(--kb-azul); --kb-t-fg-h: var(--kb-aqua); --kb-t-arrow: var(--kb-aqua);
  --kb-n-fg: var(--kb-gris-texto); --kb-n-fg-h: var(--kb-azul); --kb-n-dot: var(--kb-aqua);

  --kb-off-bg: #E4E9EB; --kb-off-fg: #8A9BA3;
  --kb-focus: var(--kb-aqua);
}

/* ---- Contexto oscuro: fondo azul (el primario no cambia) ---- */
.kb-dark {
  --kb-s-bg: transparent;             --kb-s-line: var(--kb-aqua);
  --kb-s-fg: #FFFFFF;                 --kb-s-arrow: var(--kb-aqua-claro);
  --kb-s-fill: rgba(0, 149, 134, .24);

  --kb-i-line: var(--kb-aqua); --kb-i-fg: #FFFFFF; --kb-i-fill: rgba(0, 149, 134, .22);

  --kb-t-fg: #FFFFFF; --kb-t-fg-h: var(--kb-aqua-claro); --kb-t-arrow: var(--kb-aqua-claro);
  --kb-n-fg: rgba(255, 255, 255, .78); --kb-n-fg-h: var(--kb-aqua-claro);

  --kb-off-bg: rgba(255, 255, 255, .12); --kb-off-fg: rgba(255, 255, 255, .45);
  --kb-focus: var(--kb-aqua-claro);
}

/* ---- Fondo aqua: primario azul ---- */
.kb-accent {
  --kb-p-bg: var(--kb-azul);
  --kb-p-fill: var(--kb-azul-profundo);
  --kb-focus: #FFFFFF;
}

/* ---- Tarjetas de división: llevan el secundario (valores de fondo claro); solo cambia el foco ---- */
.kb-vivid { --kb-focus: var(--kb-azul); }

/* =========================================================
   BASE
   ========================================================= */
.kb-btn, .kb-btn-sec, .kb-link, .kb-icon-btn, .kb-nav {
  box-sizing: border-box;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
:is(.kb-btn, .kb-btn-sec, .kb-link, .kb-icon-btn, .kb-nav):focus-visible {
  outline: 2px solid var(--kb-focus);
  outline-offset: 3px;
}

/* =========================================================
   PRIMARIO Y SECUNDARIO
   Anatomía: relleno (espera debajo) · texto con su copia · flecha (solo secundario)
   ========================================================= */
.kb-btn, .kb-btn-sec {
  --h: 48px; --px: 26px; --fs: 15px; --ic: 18px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transform: translateZ(0);   /* Safari: recorta el relleno dentro del borde redondeado */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--h);
  padding: 0 var(--px);
  border-radius: 999px;
  font-size: var(--fs);
  font-weight: 600;
}
.kb-btn--lg, .kb-btn-sec--lg { --h: 56px; --px: 32px; --fs: 16px; --ic: 20px; }
.kb-btn--sm, .kb-btn-sec--sm { --h: 40px; --px: 20px; --fs: 14px; --ic: 16px; }
.kb-btn--block, .kb-btn-sec--block { display: flex; width: 100%; }

.kb-btn     { --f: var(--kb-p-fill); border: 0; background: var(--kb-p-bg); color: var(--kb-p-fg); }
.kb-btn-sec { --f: var(--kb-s-fill); border: 1px solid var(--kb-s-line); background: var(--kb-s-bg); color: var(--kb-s-fg); padding-right: calc(var(--px) - 4px); }
.kb-btn-sec--plain { padding-right: var(--px); }

/* Relleno: espera debajo del botón; en hover sube, al salir vuelve a bajar */
.kb-fill {
  position: absolute;
  inset: -1px;
  z-index: -1;
  background: var(--f);
  transform: translateY(104%);
  pointer-events: none;
  transition: transform var(--kb-dur) var(--kb-ease);
}

/* Texto: el de reposo sale por arriba y su copia entra desde abajo */
.kb-text { position: relative; display: block; overflow: hidden; line-height: 1.2; padding-bottom: 1px; }
.kb-text > span { display: block; transition: transform var(--kb-dur) var(--kb-ease), opacity var(--kb-dur) var(--kb-ease); }
.kb-text > .kb-text__h { position: absolute; left: 0; top: 0; width: 100%; opacity: 0; transform: scale(.9) translateY(100%); }

/* Flecha del secundario: una sale y otra entra */
.kb-arrows { position: relative; flex: none; width: var(--ic); height: var(--ic); overflow: hidden; color: var(--kb-s-arrow); }
.kb-arrows svg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--ic);
  height: var(--ic);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--kb-dur) var(--kb-ease);
}
.kb-arrows .kb-in  { transform: translate(-170%, -50%) scale(0); }
.kb-arrows .kb-out { transform: translate(-50%, -50%); }
.kb-btn-sec--ext .kb-arrows  { transform: rotate(-45deg); }   /* enlace externo */
.kb-btn-sec--down .kb-arrows { transform: rotate(90deg); }    /* descarga */

/* =========================================================
   TERCIARIO · el texto sube y la flecha se renueva (sin cambios)
   ========================================================= */
.kb-roll { display: inline-block; overflow: hidden; height: 1.3em; line-height: 1.3em; vertical-align: middle; }
.kb-roll > span { display: block; transition: transform var(--kb-roll); }
.kb-arrow, .kb-glyph { flex: none; overflow: hidden; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kb-arrow > g, .kb-arrow > use { transition: transform var(--kb-roll); }

.kb-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--kb-t-fg);
  font-size: 15px;
  font-weight: 600;
}
.kb-link .kb-roll > span { text-shadow: 0 1.3em 0 var(--kb-t-fg-h); }
.kb-link .kb-arrow { width: 16px; height: 16px; color: var(--kb-t-arrow); }
.kb-link--back { flex-direction: row-reverse; }
.kb-link--back .kb-arrow { transform: scaleX(-1); }
.kb-link--ext .kb-arrow { transform: rotate(-45deg); }

/* ---- Ícono ---- */
.kb-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--kb-i-line);
  border-radius: 50%;
  background: transparent;
  color: var(--kb-i-fg);
  transition: background-color var(--kb-fade);
}
.kb-icon-btn :is(.kb-arrow, .kb-glyph) { width: 18px; height: 18px; }
.kb-icon-btn--back .kb-arrow { transform: scaleX(-1); }

/* ---- Navegación ---- */
.kb-nav { position: relative; display: inline-flex; align-items: center; min-height: 44px; color: var(--kb-n-fg); font-size: 15px; font-weight: 500; }
.kb-nav .kb-roll > span { text-shadow: 0 1.3em 0 var(--kb-n-fg-h); }
.kb-nav[aria-current="page"] { color: var(--kb-n-fg-h); }
.kb-nav[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--kb-n-dot); }

/* =========================================================
   ESTADO ACTIVO
   Hover solo con mouse. Teclado, .is-hover y toque (data-pressed) en todos lados.
   ========================================================= */
@media (hover: hover) and (pointer: fine) {
  :is(.kb-btn, .kb-btn-sec):hover .kb-fill { transform: translateY(0); }
  :is(.kb-btn, .kb-btn-sec):hover .kb-text > span:first-child { opacity: 0; transform: scale(.9) translateY(-100%); }
  :is(.kb-btn, .kb-btn-sec):hover .kb-text > .kb-text__h { opacity: 1; transform: none; }
  .kb-btn-sec:hover .kb-in  { transform: translate(-50%, -50%) scale(1); }
  .kb-btn-sec:hover .kb-out { transform: translate(70%, -50%) scale(0); }
  .kb-icon-btn:hover { background: var(--kb-i-fill); }
  :is(.kb-link, .kb-nav):hover .kb-roll > span { transform: translateY(-1.3em); }
  :is(.kb-link, .kb-icon-btn):hover .kb-arrow > :is(g, use) { transform: translateX(24px); }
}
:is(.kb-btn, .kb-btn-sec):is(:focus-visible, .is-hover, [data-pressed="true"]) .kb-fill { transform: translateY(0); }
:is(.kb-btn, .kb-btn-sec):is(:focus-visible, .is-hover, [data-pressed="true"]) .kb-text > span:first-child { opacity: 0; transform: scale(.9) translateY(-100%); }
:is(.kb-btn, .kb-btn-sec):is(:focus-visible, .is-hover, [data-pressed="true"]) .kb-text > .kb-text__h { opacity: 1; transform: none; }
.kb-btn-sec:is(:focus-visible, .is-hover, [data-pressed="true"]) .kb-in  { transform: translate(-50%, -50%) scale(1); }
.kb-btn-sec:is(:focus-visible, .is-hover, [data-pressed="true"]) .kb-out { transform: translate(70%, -50%) scale(0); }
.kb-icon-btn:is(:focus-visible, .is-hover) { background: var(--kb-i-fill); }
:is(.kb-link, .kb-nav):is(:focus-visible, .is-hover) .kb-roll > span { transform: translateY(-1.3em); }
:is(.kb-link, .kb-icon-btn):is(:focus-visible, .is-hover) .kb-arrow > :is(g, use) { transform: translateX(24px); }

/* ---- Cargando (primario): el texto se reemplaza por un indicador, sin cambiar el ancho ---- */
.kb-btn[aria-busy="true"] { pointer-events: none; }
.kb-btn[aria-busy="true"] .kb-text { visibility: hidden; }
.kb-btn[aria-busy="true"]::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: kb-spin .8s linear infinite;
}
@keyframes kb-spin { to { transform: rotate(360deg); } }

/* ---- Deshabilitado ---- */
.kb-btn:is(:disabled, [aria-disabled="true"]) { --kb-p-bg: var(--kb-off-bg); --kb-p-fg: var(--kb-off-fg); }
.kb-btn-sec:is(:disabled, [aria-disabled="true"]) { --kb-s-bg: var(--kb-off-bg); --kb-s-line: var(--kb-off-bg); --kb-s-fg: var(--kb-off-fg); --kb-s-arrow: var(--kb-off-fg); }
.kb-icon-btn:is(:disabled, [aria-disabled="true"]) { --kb-i-line: var(--kb-off-bg); --kb-i-fg: var(--kb-off-fg); background: var(--kb-off-bg); }
:is(.kb-btn, .kb-btn-sec, .kb-icon-btn):is(:disabled, [aria-disabled="true"]) { cursor: not-allowed; pointer-events: none; }
:is(.kb-btn, .kb-btn-sec):is(:disabled, [aria-disabled="true"]) .kb-fill { display: none; }

/* ---- Movimiento reducido: el estado cambia sin desplazamientos ---- */
@media (prefers-reduced-motion: reduce) {
  .kb-fill, .kb-text > span, .kb-arrows svg, .kb-roll > span, .kb-arrow > g, .kb-arrow > use { transition: none !important; }
  .kb-text > span:first-child { transform: none !important; }
  .kb-text > .kb-text__h { transform: none !important; }
  .kb-roll > span, .kb-arrow > :is(g, use) { transform: none !important; }
  .kb-btn[aria-busy="true"]::after { animation-duration: 2.4s; }
}

/* =========================================================
   HIPERVÍNCULO · .kb-a (links dentro de un texto)
   Siempre subrayado; sin flecha ni animación
   ========================================================= */
:root { --kb-a-fg: var(--kb-azul); --kb-a-fg-h: var(--kb-aqua); }
.kb-dark { --kb-a-fg: #FFFFFF; --kb-a-fg-h: var(--kb-aqua-claro); }
.kb-a {
  color: var(--kb-a-fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--kb-fade);
}
.kb-a:hover { color: var(--kb-a-fg-h); }
.kb-a:focus-visible { outline: 2px solid var(--kb-focus); outline-offset: 2px; border-radius: 2px; }
.kb-a--ext::after { content: "\2197"; display: inline-block; margin-left: .2em; font-size: .85em; text-decoration: none; }