/* ============================================================
   tokens.css — Design tokens extraídos de la página objetivo
   Sitio: https://www.gnbsudameris.com.co/banca-virtual
   NOTA: los valores provienen de getComputedStyle() medidos en
   Chrome 1440/768/390. Ver docs/research/.../DESIGN_TOKENS.md
   ============================================================ */

:root {
  /* Colores */
  --c-text: #333333;          /* rgb(51,51,51) body externo */
  --c-text-dark: #212529;     /* labels del formulario */
  --c-green-tab: #86C157;     /* rgb(134,193,87) tab activo */
  --c-green-btn: #7AB83F;     /* rgb(122,184,63) botón Ingresar */
  --c-blue: #2D609D;          /* rgb(45,96,157) tab inactivo / links / hover botón */
  --c-gray-link: #585858;     /* links inferiores */
  --c-gray-cuenta: #434343;   /* "¿Aún no tiene cuenta?" */
  --c-card-bg: #F2F2F2;       /* fondo tarjeta (body del iframe) */
  --c-tab-bg: #EFEFEF;        /* fondo de botones-tab */
  --c-input-border: #CCCCCC;  /* borde inputs / select */
  --c-white: #FFFFFF;

  /* Tipografía (stacks idénticos al original; las webfonts
     declaradas no cargan en el sitio real → mismo fallback) */
  --font-body: "Open Sans", sans-serif;
  --font-alt: "Source Sans Pro", sans-serif;
  --font-verdana: Verdana, Geneva, sans-serif;
  --font-arial: Arial, Helvetica, sans-serif;

  /* Radios */
  --radius-pill: 30px;   /* inputs, select, botón */
  --radius-card: 15px;   /* iframe (tarjeta visible) */
  --radius-wrap: 10px;   /* #nav-tabContent-banca (transparente) */

  /* Layout / breakpoints (px literales — no usables como var en media queries)
     - 500px:  padding del card pasa de 30px a "30px 0"
     - 768px:  columnas apiladas → fila (45%/54%); iframe 650→475 min-height, max-width 390
     - 1200px: container fluido(96%) → fijo 1138px; columnas 38%/60%
     - 1600px: imagen hero width 97% → 100%
  */
  --container-max: 1138px;
  --gutter: 10.5px;
}