/* --- Definición de Colores de Marca Hey --- */
:root {
  --hey-dark-gray: rgb(30, 30, 30);
  --hey-medium-gray: rgb(75, 75, 75);
  --hey-light-gray: rgb(210, 210, 210);
  --hey-white: #ffffff; /* Blanco para contraste */
}
/* --- Fin Definición de Colores --- */

/*
   * IMPORTANTE: Para usar 'Sneak regular' y 'NT Zeu Italic',
   * necesitas los archivos de fuente (.woff2, .woff) y definir
   * las reglas @font-face aquí.
   */

body {
  font-family: "Sneak regular", "SF Pro", system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: #a5a5a5;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.container-fluid.main-content {
  flex: 1;
}
.header {
  background-color: #111111;
  padding: 1rem 0;
  border-bottom: 1px solid #dee2e6;
}
.header .container-fluid {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.header img {
  width: auto;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  display: inline-block;
  vertical-align: middle;
}
.protegitas-logo {
  height: 47px;
}
.hey-logo-img {
  height: 65px;
}

/* --- ESTILOS DE BOTONES HEY BANCO (Página Principal) --- */
.purchase-buttons .btn-outline-primary {
  border-color: var(--hey-medium-gray);
  color: var(--hey-medium-gray);
  background-color: transparent;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out;
}
.purchase-buttons .btn-outline-primary:hover,
.purchase-buttons .btn-outline-primary:focus {
  border-color: var(--hey-dark-gray);
  background-color: var(--hey-dark-gray);
  color: var(--hey-white);
}
.purchase-buttons .btn-outline-primary:active {
  background-color: var(--hey-dark-gray);
  border-color: var(--hey-dark-gray);
  color: var(--hey-white);
}
/* Estilo para CUALQUIER botón DESHABILITADO dentro del contenedor */
.purchase-buttons .btn:disabled,
.purchase-buttons .btn.disabled {
  color: var(--hey-light-gray);
  border-color: var(--hey-light-gray);
  background-color: transparent;
  opacity: 0.65;
  pointer-events: none; /* Deshabilita eventos de mouse */
}
/* --- FIN ESTILOS DE BOTONES HEY BANCO (Principal) --- */

/* --- ESTILOS DE BOTONES (Páginas Success/Cancel) --- */
/* Nota: Se reutiliza el estilo primario de .purchase-buttons */
.action-button .btn-outline-primary {
  border-color: var(--hey-medium-gray);
  color: var(--hey-medium-gray);
  background-color: transparent;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out;
}
.action-button .btn-outline-primary:hover,
.action-button .btn-outline-primary:focus {
  border-color: var(--hey-dark-gray);
  background-color: var(--hey-dark-gray);
  color: var(--hey-white);
}
.action-button .btn-outline-primary:active {
  background-color: var(--hey-dark-gray);
  border-color: var(--hey-dark-gray);
  color: var(--hey-white);
}
/* --- FIN ESTILOS DE BOTONES HEY BANCO (Success/Cancel) --- */

.card {
  padding: 2rem;
  border: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  background-color: #ffffff;
  margin-bottom: 2rem;
}
.title-logo {
  height: 2em;
  width: auto;
  vertical-align: middle;
  margin-left: 0.5rem;
}
.form-label {
  font-weight: bold;
  color: #343a40;
}
.form-control {
  border-radius: 4px;
  font-family: inherit;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; /* Transición suave */
}

/* --- Estilo para Input en Foco (sin validar) --- */
#cardBin:focus:not(.is-valid):not(.is-invalid) {
  border-color: var(--hey-medium-gray); /* Borde gris medio */
  box-shadow: 0 0 0 0.25rem rgba(75, 75, 75, 0.25); /* Sombra gris medio */
  outline: 0;
}
/* --- FIN Estilo Input Foco --- */

.form-control.is-valid {
  /* Mantiene verde Bootstrap */
}
.form-control.is-invalid {
  /* Mantiene rojo Bootstrap */
}
.text-emphasis-brand {
  font-family: "NT Zeu Italic", italic;
  font-style: italic;
}
.api-error-message {
  color: #dc3545;
  font-size: 0.9rem;
  margin-top: 0.5rem;
  display: none;
}
.valid-feedback {
  font-size: 0.9rem;
}
.invalid-feedback {
  font-size: 0.9rem;
}
.purchase-buttons {
  /* Usado en página principal */
  margin-top: 1.5rem;
  text-align: center;
}
.purchase-buttons .btn + .btn {
  margin-left: 0.5rem;
}
.action-button {
  /* Usado en success/cancel */
  margin-top: 1.5rem;
  text-align: center;
}
.btn .spinner-grow {
  margin-right: 0.5rem;
  color: currentColor;
}
footer {
  background-color: #e9ecef;
  font-family: "SF Pro", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Mantén tus otros estilos de footer aquí (padding, etc.) */
  width: 100%; /* (Si decidiste añadirlo explícitamente antes) */
  box-sizing: border-box; /* (Si decidiste añadirlo explícitamente antes) */
}

footer small {
  font-size: 0.7rem;
}

/* --- INICIO: Mejoras Responsivas --- */

/* 1. Limitar el ancho máximo del card en pantallas grandes */
/* Esto evita que el contenido se estire demasiado en monitores anchos. */
/* Lo centramos automáticamente dentro del container-fluid. */
.card {
  /* ... tus estilos existentes ... */
  max-width: 720px; /* Puedes ajustar este valor */
  margin-left: auto;
  margin-right: auto;
}

/* 2. Ajustes para pantallas pequeñas (ej. móviles en vertical, < 576px) */
/* Dentro de tu archivo heybanco-styles.css */

@media (max-width: 575.98px) {
  /* --- ESTILOS EXISTENTES PARA MÓVIL --- */
  /* (Mantén los estilos que ya tenías aquí, como el padding del card, etc.) */
  .card {
    padding: 1.5rem 1rem; /* Menos padding horizontal y vertical */
  }
  /* (Opcional) Reducir logos/fuentes si los tienes */
  .protegitas-logo {
    height: 38px;
  }
  .hey-logo-img {
    height: 55px;
  }
  .card h2 {
    font-size: 1.6rem;
  }
  .title-logo {
    height: 1.8em;
  }

  /* --- NUEVO: Centrar logos del header cuando se apilan --- */
  .header .container-fluid {
    justify-content: center; /* Cambia de space-between a center en móvil */
    gap: 0.5rem; /* Añade un pequeño espacio vertical si se apilan */
  }

  /* --- AJUSTE: Centrar botones de compra apilados usando Flexbox --- */

  /* (Asegúrate de ELIMINAR o COMENTAR las reglas anteriores para .purchase-buttons .btn
     que usaban display: block; width: 100%; si las habías añadido) */
  /*
  .purchase-buttons .btn {
    display: block;
    width: 100%;
    margin-bottom: 0.75rem;
    margin-left: 0;
  }
  .purchase-buttons .btn:last-child {
    margin-bottom: 0;
  }
  */

  /* NUEVO: Aplica Flexbox al contenedor de botones para centrar */
  .purchase-buttons {
    display: flex; /* Habilita Flexbox */
    flex-direction: column; /* Apila los botones verticalmente */
    align-items: center; /* Centra los botones horizontalmente */
    gap: 0.75rem; /* Espacio vertical entre botones */
  }

  /* Asegura que el margen lateral entre botones no aplique en móvil */
  .purchase-buttons .btn + .btn {
    margin-left: 0;
  }

  /* (Opcional) Si NO quieres que los botones ocupen todo el ancho al estar centrados: */
  /* .purchase-buttons .btn { */
  /* width: 80%;  */ /* O un ancho fijo como 250px */
  /* max-width: 300px; */ /* Limita el ancho máximo */
  /* } */
} /* Fin del @media query */

/* 3. (Opcional) Ajustes para pantallas medianas (ej. tablets en vertical, < 768px) */
/* A veces es útil un punto intermedio si el diseño lo requiere. */
/* @media (max-width: 767.98px) { */
/* Aquí podrías poner reglas específicas si ves que algo no cuadra en tablets */
/* Por ejemplo, ajustar márgenes o tamaños de fuente intermedios. */
/* } */

/* --- FIN: Mejoras Responsivas --- */

/* --- Personalización de Estilos para Tooltips Bootstrap --- */

.tooltip {
  /* Define el color de fondo usando tu variable */
  --bs-tooltip-bg: var(--hey-medium-gray);

  /* Define el color del texto para que contraste con el fondo claro */
  --bs-tooltip-color: var(--hey-white);

  /* Ajusta la opacidad si lo deseas (1 es el valor por defecto) */
  /* --bs-tooltip-opacity: 1; */

  /* NOTA: En Bootstrap 5.2+, el color de la flecha (--bs-tooltip-arrow-color)
     generalmente se deriva del --bs-tooltip-bg, por lo que no debería
     ser necesario definirlo explícitamente aquí. */
}

/* --- Fin Personalización Tooltips --- */
.disclaimer-small {
  font-size: 0.75em; /* Ajusta este valor según necesites */
}
/* --- Estilo para Inputs y Selects en Foco (sin validar) en formularios de cliente y fiscal --- */
#clienteInfoForm .form-control:focus:not(.is-valid):not(.is-invalid),
#clienteInfoForm .form-select:focus:not(.is-valid):not(.is-invalid),
#fiscalDataForm .form-control:focus:not(.is-valid):not(.is-invalid),
#fiscalDataForm .form-select:focus:not(.is-valid):not(.is-invalid) {
  border-color: var(--hey-medium-gray); /* Borde gris medio */
  box-shadow: 0 0 0 0.25rem rgba(75, 75, 75, 0.25); /* Sombra gris medio */
  outline: 0;
}
/* --- FIN Estilo Input Foco Formularios Cliente y Fiscal --- */

a:link {
  color: var(--hey-dark-gray); /* Color para enlaces no visitados */
}

a:visited {
  color: var(--hey-medium-gray); /* Puedes usar un gris un poco más claro para enlaces visitados, o el mismo --hey-dark-gray si lo prefieres */
}

a:hover {
  color: var(--hey-light-gray); /* Un gris más claro para el hover, para que se vea el cambio */
  text-decoration: underline; /* Opcional: añadir un subrayado al pasar el ratón */
}

a:active {
  color: var(--hey-white); /* Blanco cuando se está haciendo clic, para un contraste fuerte */
}