/* Encabezado del portal: logo a la izquierda, botones de tema/accesibilidad
   fijos a la derecha (layout flex simple, sin grid). */
.portal-header .ght-btn {
  width: auto;
  flex-shrink: 0;
}

.portal-vendors-list {
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 320px;
  border-radius: 6px;
}

.portal-vendors-header-row {
  display: flex;
  gap: 16px;
  padding: 10px 16px;
  background: #0a3d7a;
  color: #fff;
  font-weight: 700;
}

.portal-vendors-header-row span,
.portal-vendors-row span {
  flex: 1;
}

.portal-vendors-row {
  display: flex;
  gap: 16px;
  padding: 10px 16px;
}

.portal-vendors-row:nth-child(even) {
  background: rgba(255, 255, 255, 0.03);
}

.portal-vendors-code {
  font-weight: 600;
}

/* Tarjetas de sitios (company-cards): diseño estandar corporativo -
   fondo acorde al tema (blanco en claro, oscuro en tema oscuro, igual
   que el resto de tarjetas del framework), icono cuadrado (azul,
   redondeado) centrado arriba, nombre de la compañia debajo, acento
   azul y "Service Tier". Al pasar el mouse aparece un overlay
   difuminado con el boton "Go to site" centrado. */
#company-cards .ght-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: 100%;
  padding: 14px 12px 12px;
  overflow: hidden;
}

/* Cuadro de logo/codigo, azul y redondeado, centrado arriba de la tarjeta */
.company-card-thumb {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 14px;
  background: var(--secondary-blue-default, #24476c);
  box-shadow: 0 6px 14px rgba(15, 40, 70, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 8px;
  transition: transform 0.3s ease;
}

#company-cards .ght-card.ght-hover:hover .company-card-thumb {
  transform: scale(1.06);
}

.company-card-thumb-img {
  width: 70%;
  height: 70%;
  border-radius: 50%;
  object-fit: cover;
  background: #ffffff;
}

.company-card-thumb-code {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #ffffff;
}

.company-card-thumb-icon {
  width: 24px;
  height: 24px;
  background-color: #ffffff;
}

/* Nombre de la compañia: oscuro en tema claro, blanco en tema oscuro,
   siempre en mayusculas y en una sola linea. */
.company-ticket-title {
  font-size: 16px;
  font-weight: 700;
  color: #1f2733 !important;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.ght-theme-dark .company-ticket-title {
  color: #ffffff !important;
}

.company-ticket-accent {
  display: block;
  width: 28px;
  height: 3px;
  margin: 6px 0;
  border-radius: 2px;
  background: var(--primary-blue-default, #2e649b);
  transition: width 0.25s ease;
}

#company-cards .ght-card.ght-hover:hover .company-ticket-accent {
  width: 48px;
}

/* Linea de "Service Tier": debe quedar en una sola linea (achicando el
   texto si hace falta) en vez de partirse en dos renglones. */
.company-card-service-tier {
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #6b7684 !important;
  max-width: 100%;
  margin: 4px 0 0;
}

body.ght-theme-dark .company-card-service-tier {
  color: #c9d0d8 !important;
}

/* Overlay difuminado con el boton "Go to site" centrado, oculto por
   defecto y revelado sobre toda la tarjeta al pasar el mouse. */
.company-ticket-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.32);
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

#company-cards .ght-card.ght-hover:hover .company-ticket-overlay,
#company-cards .ght-card.ght-hover:focus-within .company-ticket-overlay {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.company-ticket-btn {
  width: auto;
  text-decoration: none;
}

.company-ticket-btn:hover,
.company-ticket-btn:focus,
.company-ticket-btn .ght-btn-text {
  text-decoration: none;
}

/* En pantallas tactiles (sin hover real) el boton queda siempre visible */
@media (hover: none) {
  .company-ticket-overlay {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    background: rgba(255, 255, 255, 0.7);
  }
}

/* Wrapper para textarea: altura automatica en vez de la altura fija
   de una sola linea que usa .ght-medium (evita que el texto se
   desborde sobre el label superior) */
.ght-textfield-wrapper-textarea {
  height: auto;
  align-items: flex-start;
  padding: 6px 0;
}

.ght-textfield-wrapper-textarea textarea.ght-textfield {
  resize: vertical;
  min-height: 64px;
  padding: 0 5px;
  text-indent: 0;
}

/* Fila forzada en 2 columnas (BDs en Elastic Pool + Componentes de consulta beta).
   Se usa CSS Grid con minmax(0, ...) en vez del sistema de columnas del framework
   porque los valores largos sin espacios (URLs/connection strings) dentro de los
   inputs forzaban un ancho minimo de contenido que rompia el grid flex y hacia
   que la segunda tarjeta cayera a una fila nueva sin importar el breakpoint. */
.portal-two-col-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  align-items: start;
}

.portal-col-wide,
.portal-col-narrow {
  min-width: 0;
  max-width: none;
  flex: none;
}

.portal-col-wide .ght-textfield[readonly],
.portal-col-narrow .ght-textfield[readonly] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

@media (max-width: 640px) {
  .portal-two-col-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

.portal-le-vendors-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 8px;
}

/* Fila de "Realizar Solicitud" / "Solicitudes de actualización": cada
   tarjeta conserva su alto natural (no se estiran para igualarse), asi
   la lista de solicitudes no crece para igualar el alto del formulario. */
.portal-request-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 8px;
}

.portal-col-half {
  min-width: 0;
  max-width: none;
  flex: none;
  display: flex;
  flex-direction: column;
}

/* La tarjeta de Empresas Portal Vendors debe estirarse para ocupar
   todo el alto disponible de su columna (igual altura que las dos
   tarjetas apiladas de la izquierda), sin dejar hueco abajo. No aplica
   a la columna apilada (portal-col-stack), que reparte el alto entre
   sus dos tarjetas de otra manera (ver reglas de .portal-col-stack). */
.portal-col-half:not(.portal-col-stack) > .ght-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.portal-col-half .portal-vendors-list {
  flex: 1;
  min-height: 0;
}

/* Columna que apila varias tarjetas (BDs restauradas + suscripcion beta)
   en vez de una sola. La tarjeta de BDs restauradas mantiene su alto
   natural (para no cortar sus campos); la de suscripcion absorbe el
   espacio restante pero centra su contenido para no dejarlo pegado
   arriba con un hueco vacio debajo. */
.portal-col-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.portal-col-stack > .ght-card:first-child {
  flex: 0 0 auto;
}

.portal-col-stack > .ght-card:last-child {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 900px) {
  .portal-le-vendors-row,
  .portal-request-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Suscripcion para recibir el email de la beta */
.subscription-container {
  padding: 0;
  text-align: center;
}

.subscription-container .subscription {
  display: flex;
  align-items: center;
  gap: 8px;
}

.subscription-container .add-email {
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--border-color, #b2c0c7);
  background: transparent;
  color: inherit;
}

.subscription-container .submit-email {
  width: auto;
  height: 36px;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Pie de pagina general del portal, ubicado al final de la pagina */
.portal-footer {
  text-align: center;
  padding: 16px 0 24px;
}

.portal-footer .resend {
  margin: 0;
  font-size: 11px;
  opacity: 0.6;
}

/* Scroll interno de la lista de solicitudes para que no se deforme
   la tarjeta sin importar cuantas solicitudes se acumulen: crece de
   forma natural hasta este alto y luego aparece el scroll. */
.update-requests-scroll {
  max-height: 360px;
  overflow-y: auto;
  padding-right: 4px;
}

/* Modal / toast flotante para el resultado de la suscripcion */
.beta-modal {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 15px 20px;
  border-radius: 10px;
  color: #fff;
  font-weight: 500;
  z-index: 9999;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.beta-modal.beta-modal-success {
  background: #00c853;
}

.beta-modal.beta-modal-error {
  background: #d50000;
}

.beta-modal.beta-modal-warning {
  background: #ffab00;
}

/* Boton compacto de solo icono (ej. copiar valores de credenciales/endpoints) */
.ght-btn-icon-only {
  width: var(--height-28);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ght-btn-icon-only .ght-icons {
  margin: 0;
}

.ght-btn-copied {
  border-color: #1e9e5a !important;
}

/* Resaltado temporal al llegar via enlace directo (ej. boton de Teams) */
.ght-card-highlight {
  animation: ght-card-highlight-pulse 2s ease-in-out 2;
  border-color: #0076D7 !important;
}

@keyframes ght-card-highlight-pulse {
  0% { box-shadow: 0 0 0 0 rgba(0, 118, 215, 0.6); }
  50% { box-shadow: 0 0 0 8px rgba(0, 118, 215, 0.15); }
  100% { box-shadow: 0 0 0 0 rgba(0, 118, 215, 0); }
}

/* ============================================================
   ANIMACIONES DE INTERFAZ
   Entrada suave de secciones/tarjetas al cargar, retroalimentacion
   visual en hover/click de tarjetas y botones, y una entrada
   deslizante para el toast de notificaciones.
   ============================================================ */

@keyframes ght-fade-slide-up {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ght-toast-in {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Entrada escalonada de cada seccion principal al cargar la pagina */
main.ght-container-fluid > .ght-section {
  animation: ght-fade-slide-up 0.55s ease both;
}

main.ght-container-fluid > .ght-section:nth-of-type(1) { animation-delay: 0.05s; }
main.ght-container-fluid > .ght-section:nth-of-type(2) { animation-delay: 0.15s; }
main.ght-container-fluid > .ght-section:nth-of-type(3) { animation-delay: 0.25s; }
main.ght-container-fluid > .ght-section:nth-of-type(4) { animation-delay: 0.35s; }
main.ght-container-fluid > .ght-section:nth-of-type(5) { animation-delay: 0.45s; }

/* Entrada escalonada de las tarjetas de sitios cuando se renderizan */
#company-cards .ght-card {
  animation: ght-fade-slide-up 0.45s ease both;
}

#company-cards .ght-card:nth-child(1) { animation-delay: 0.02s; }
#company-cards .ght-card:nth-child(2) { animation-delay: 0.06s; }
#company-cards .ght-card:nth-child(3) { animation-delay: 0.1s; }
#company-cards .ght-card:nth-child(4) { animation-delay: 0.14s; }
#company-cards .ght-card:nth-child(5) { animation-delay: 0.18s; }
#company-cards .ght-card:nth-child(6) { animation-delay: 0.22s; }
#company-cards .ght-card:nth-child(7) { animation-delay: 0.26s; }
#company-cards .ght-card:nth-child(8) { animation-delay: 0.3s; }
#company-cards .ght-card:nth-child(n + 9) { animation-delay: 0.34s; }

/* Elevacion suave de tarjetas al pasar el mouse */
.ght-card.ght-hover {
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.ght-card.ght-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* Boton "Enviar solicitud": ancho completo, como estaba originalmente. */

/* Retroalimentacion tactil en todos los botones del portal */
.ght-btn {
  transition: transform 0.15s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.ght-btn:hover {
  transform: translateY(-1px);
}

.ght-btn:active {
  transform: translateY(0) scale(0.96);
}

/* El toast de notificaciones entra deslizandose desde la derecha */
.beta-modal {
  animation: ght-toast-in 0.35s ease both;
}

/* Los usuarios que prefieren menos movimiento no reciben animaciones */
@media (prefers-reduced-motion: reduce) {
  main.ght-container-fluid > .ght-section,
  #company-cards .ght-card,
  .beta-modal {
    animation: none !important;
  }

  .ght-card.ght-hover,
  .ght-btn,
  .company-card-thumb,
  .company-ticket-overlay,
  .company-ticket-accent {
    transition: none !important;
  }

  .company-ticket-overlay {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }
}