@charset "utf-8";

/*
================================================================================
  BANQUEE — Sistema de diseño moderno (Fase 0)
================================================================================

  Sistema de diseño portado desde el proyecto exact-payments. Provee tokens
  (CSS custom properties), utilidades y componentes namespaced con prefijo
  `.bq-*` que NO colisionan con el legacy.

  Este archivo es independiente. Para aplicar el look banquee a las clases
  legacy sin reescribir markup, ver `banquee-legacy-bridge.css`.

  Documentación de origen: docs/design-system-banquee-extraction.md
  Showcase comparativo:    docs/index.html  (anchor #banquee)

  Convenciones:
   - Todos los tokens van como CSS custom properties con prefijo --bq-
   - Todos los selectores van con prefijo .bq-
   - Valores en píxeles absolutos (no rem) para ser predecibles frente al
     `html { font-size: 62.4% }` legacy de main.css.
================================================================================
*/


/*-----------------------------------------------------------------------------
  1. TOKENS
-----------------------------------------------------------------------------*/

:root {
  /* Brand */
  --bq-primary:           #066260;
  --bq-primary-hover:     #449E8B;
  --bq-primary-light:     #e8f2ee;

  /* Neutros */
  --bq-default:           #1a191e;
  --bq-hover:             #383642;
  --bq-muted:             #f8f8f8;
  --bq-light:             #e8e8e8;

  /* Texto */
  --bq-text-muted:        rgba(26, 25, 30, .5);
  --bq-text-muted-60:     rgba(26, 25, 30, .6);
  --bq-text-muted-70:     rgba(26, 25, 30, .7);
  --bq-white-70:          rgba(255, 255, 255, .7);

  /* Tipografía */
  --bq-ff:                'DM Sans', sans-serif;

  /* Radios */
  --bq-radius:            8px;
  --bq-radius-lg:         12px;
  --bq-radius-full:       9999px;

  /* Sombras */
  --bq-shadow-card-hover: 0 10px 30px rgba(0, 0, 0, 0.1);
  --bq-shadow-card-strong: 0 20px 40px rgba(0, 0, 0, 0.1);
  --bq-shadow-2xl:        0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* Layout */
  --bq-container-max:     1280px;

  /* Transiciones */
  --bq-transition-button: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}


/*-----------------------------------------------------------------------------
  2. TIPOGRAFÍA — clases utilidad
-----------------------------------------------------------------------------*/

.bq-h1, .bq-h2, .bq-h3, .bq-h4-brand, .bq-subtitle {
  font-family: var(--bq-ff);
  margin: 0;
  color: var(--bq-default);
}

.bq-h1 {
  font-weight: 500;
  font-size: 60px;
  letter-spacing: -2px;
  line-height: 1.15;
}

.bq-h2 {
  font-weight: 500;
  font-size: 48px;
  letter-spacing: -2px;
  line-height: 1.15;
}

.bq-h3 {
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.75px;
  line-height: 1.3;
}

.bq-h4-brand {
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -1px;
  line-height: 1.3;
  color: var(--bq-primary);
}

.bq-subtitle {
  font-weight: 400;
  font-size: 24px;
  letter-spacing: -0.75px;
  line-height: 1.2;
}

.bq-body {
  font-family: var(--bq-ff);
  font-size: 16px;
  line-height: 1.6;
  color: var(--bq-default);
  margin: 0;
}

.bq-eyebrow {
  font-family: var(--bq-ff);
  font-weight: 700;
  font-size: 14px;
  margin: 0 0 8px;
  color: var(--bq-default);
}

.bq-muted-text       { color: var(--bq-text-muted); }
.bq-muted-text-60    { color: var(--bq-text-muted-60); }
.bq-muted-text-70    { color: var(--bq-text-muted-70); }
.bq-white-text       { color: #ffffff; }
.bq-white-text-70    { color: var(--bq-white-70); }

.bq-tracking-h1      { letter-spacing: -2px; }
.bq-tracking-h2      { letter-spacing: -1.5px; }
.bq-tracking-h3      { letter-spacing: -1px; }
.bq-tracking-h5      { letter-spacing: -0.75px; }
.bq-tracking-h6      { letter-spacing: -0.5px; }
.bq-tracking-large   { letter-spacing: -3px; }
.bq-tracking-xlarge  { letter-spacing: -4px; }


/*-----------------------------------------------------------------------------
  3. BACKGROUNDS — clases utilidad
-----------------------------------------------------------------------------*/

.bq-bg-primary        { background-color: var(--bq-primary); }
.bq-bg-primary-hover  { background-color: var(--bq-primary-hover); }
.bq-bg-primary-light  { background-color: var(--bq-primary-light); }
.bq-bg-default        { background-color: var(--bq-default); }
.bq-bg-muted          { background-color: var(--bq-muted); }
.bq-bg-light          { background-color: var(--bq-light); }
.bq-bg-white          { background-color: #ffffff; }


/*-----------------------------------------------------------------------------
  4. BORDES Y RADIOS — clases utilidad
-----------------------------------------------------------------------------*/

.bq-border           { border: 1px solid var(--bq-light); }
.bq-border-2         { border: 2px solid var(--bq-light); }
.bq-border-primary   { border-color: var(--bq-primary); }
.bq-radius           { border-radius: var(--bq-radius); }
.bq-radius-lg        { border-radius: var(--bq-radius-lg); }
.bq-radius-full      { border-radius: var(--bq-radius-full); }


/*-----------------------------------------------------------------------------
  5. CONTAINER — layout principal
-----------------------------------------------------------------------------*/

.bq-container {
  max-width: var(--bq-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}

@media (min-width: 1024px) {
  .bq-container {
    padding-left: 48px;
    padding-right: 48px;
  }
}

.bq-section {
  padding-top: 24px;
  padding-bottom: 24px;
}

@media (min-width: 1024px) {
  .bq-section {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}


/*-----------------------------------------------------------------------------
  6. BUTTON — sello distintivo del sistema
  Animación translateY del texto: al hacer hover el texto original sube fuera
  y un duplicado entra desde abajo.

  CRÍTICO: el padding va en .bq-button-text (no en .bq-button ni en
  .bq-button-inner) porque translateY(-100%) traslada el elemento por SU
  PROPIA altura. Para que el texto desaparezca completo al hacer hover, el
  text element tiene que tener la altura total del botón (padding incluido).
-----------------------------------------------------------------------------*/

.bq-button {
  display: inline-block;
  overflow: hidden;
  position: relative;
  font-family: var(--bq-ff);
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  color: #ffffff;
  background: var(--bq-primary);
  border-radius: var(--bq-radius);
  /* Tailwind ring-2 ring-offset-2 → 2 px offset blanco + 4 px ring primary */
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--bq-primary);
  border: none;
  text-decoration: none;
  cursor: pointer;
  vertical-align: middle;
  transition: var(--bq-transition-button);
}

.bq-button:hover {
  background: var(--bq-primary-hover);
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--bq-primary-hover);
}

.bq-button:focus,
.bq-button:visited,
.bq-button:active {
  color: #ffffff;
  text-decoration: none;
  outline: none;
}

.bq-button-inner {
  position: relative;
  display: block;
}

.bq-button-text,
.bq-button-text-hover {
  color: #ffffff;
  font-family: var(--bq-ff);
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
}

.bq-button-text {
  display: block;
  padding: 16px 32px;
  text-align: center;
  box-sizing: border-box;
  transition: transform 0.3s ease;
}

.bq-button-text-hover {
  position: absolute;
  inset: 0;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.bq-button:hover .bq-button-text       { transform: translateY(-100%); }
.bq-button:hover .bq-button-text-hover { transform: translateY(0); }

/* Variante "small" — más compacto */
.bq-button--sm .bq-button-text,
.bq-button--sm .bq-button-text-hover {
  padding: 12px 24px;
  font-size: 14px;
}

/* Variante "block" — full-width */
.bq-button--block {
  display: block;
  width: 100%;
}
.bq-button--block .bq-button-text { width: 100%; }


/*-----------------------------------------------------------------------------
  7. BUTTON-LINK — link con flecha que se desplaza al hover
-----------------------------------------------------------------------------*/

.bq-button-link {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: var(--bq-primary);
  font-family: var(--bq-ff);
  font-weight: 500;
  font-size: 16px;
  text-decoration: none;
  transition: gap 0.2s ease, color 0.2s ease;
  vertical-align: middle;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.bq-button-link:hover,
.bq-button-link:focus {
  gap: 12px;
  color: var(--bq-primary);
  text-decoration: none;
  border: none;
}

.bq-button-link-icon {
  display: inline-flex;
  transition: transform 0.2s ease;
}

.bq-button-link:hover .bq-button-link-icon {
  transform: translateX(4px);
}


/*-----------------------------------------------------------------------------
  8. CARD — patrón estándar del sistema
-----------------------------------------------------------------------------*/

.bq-card {
  padding: 24px;
  background: #ffffff;
  border: 2px solid var(--bq-light);
  border-radius: var(--bq-radius);
  transition: box-shadow 0.3s ease;
  height: 100%;
  box-sizing: border-box;
}

.bq-card:hover {
  box-shadow: var(--bq-shadow-card-hover);
}

.bq-card--lg {
  padding: 32px;
  border-radius: var(--bq-radius-lg);
}


/*-----------------------------------------------------------------------------
  9. ICON CIRCLE — patrón omnipresente en banquee
-----------------------------------------------------------------------------*/

.bq-icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  background: var(--bq-primary-light);
  color: var(--bq-primary);
  border-radius: 50%;
  flex-shrink: 0;
}

.bq-icon-circle svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.bq-icon-circle--md {
  width: 48px;
  height: 48px;
  min-width: 48px;
}

.bq-icon-circle--md svg {
  width: 24px;
  height: 24px;
}

.bq-icon-circle--lg {
  width: 64px;
  height: 64px;
  min-width: 64px;
}

.bq-icon-circle--lg svg {
  width: 32px;
  height: 32px;
}


/*-----------------------------------------------------------------------------
  10. SECTION HEADING — raya decorativa de 3 px
-----------------------------------------------------------------------------*/

.bq-section-line {
  width: 64px;
  height: 3px;
  background: var(--bq-primary);
  margin: 0 0 24px;
  border: none;
}


/*-----------------------------------------------------------------------------
  11. TABLE — tabla con estilo banquee
-----------------------------------------------------------------------------*/

.bq-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--bq-ff);
  font-size: 14px;
  color: var(--bq-default);
}

.bq-table thead th {
  text-align: left;
  padding: 12px 16px;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bq-text-muted-70);
  border-bottom: 2px solid var(--bq-light);
  background: transparent;
}

.bq-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--bq-light);
  vertical-align: middle;
}

.bq-table tbody tr:last-child td {
  border-bottom: none;
}

.bq-table tbody tr:hover td {
  background-color: var(--bq-muted);
}


/*-----------------------------------------------------------------------------
  12. FORM CONTROLS — inputs / textareas / selects con estilo banquee
-----------------------------------------------------------------------------*/

.bq-input,
.bq-textarea,
.bq-select {
  display: block;
  width: 100%;
  padding: 12px 16px;
  font-family: var(--bq-ff);
  font-size: 16px;
  line-height: 1.5;
  color: var(--bq-default);
  background: #ffffff;
  border: 1px solid var(--bq-light);
  border-radius: var(--bq-radius);
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bq-input:focus,
.bq-textarea:focus,
.bq-select:focus {
  outline: none;
  border-color: var(--bq-primary);
  box-shadow: 0 0 0 3px var(--bq-primary-light);
}

.bq-input::placeholder,
.bq-textarea::placeholder {
  color: var(--bq-text-muted);
}

.bq-label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--bq-ff);
  font-weight: 500;
  font-size: 14px;
  color: var(--bq-default);
}


/*-----------------------------------------------------------------------------
  13. MESSAGE / ALERT — variantes de notificación
-----------------------------------------------------------------------------*/

.bq-alert {
  padding: 16px 20px;
  border-radius: var(--bq-radius);
  font-family: var(--bq-ff);
  font-size: 14px;
  line-height: 1.5;
  border-left: 3px solid;
  background: #ffffff;
}

.bq-alert--info    { border-left-color: var(--bq-primary);  background: var(--bq-primary-light); color: var(--bq-primary); }
.bq-alert--success { border-left-color: #2D7A4D;            background: #e7f4ec;                  color: #1a4d2e; }
.bq-alert--warning { border-left-color: #B58105;            background: #fff8e1;                  color: #6b4a03; }
.bq-alert--danger  { border-left-color: #B91C1C;            background: #fdecec;                  color: #7a1313; }


/*-----------------------------------------------------------------------------
  14. ANIMACIÓN — accordion (para uso futuro)
-----------------------------------------------------------------------------*/

@keyframes bq-accordion {
  from { height: 0; }
  to   { height: var(--radix-accordion-content-height); }
}

.bq-animate-accordion {
  animation: bq-accordion 0.3s ease-in-out;
}