/* ==========================================================================
   portal-institucional.css — capa propia del Portal Institucional (f100010504)
   --------------------------------------------------------------------------
   Va después de inthegra-saas-mobile.css (bucket). Solo lo que es del portal:
   la capa mobile común no se toca desde acá (ver nueva-app-mobile,
   references/capa-css-js.md). Colores siempre desde los tokens --inth-*.

   P1. Escritorio: contenido centrado con ancho máximo
   P2. Logo de la empresa en el header
   P3. Solo escritorio / solo teléfono
   P4. Listas (Content Row): importe y renglón de conceptos
   P5. Credencial
   P6. Solicitudes: panel de tipos y detalle
   P7. Indicadores (Metric Cards) en el teléfono
   P8. Regiones lado a lado con la misma altura
   P9. Perfil: datos centrados
   ========================================================================== */


/* --------------------------------------------------------------------------
   P1. Escritorio: el portal se diseña para el teléfono (una columna). En una
   pantalla ancha las listas quedaban estiradas de borde a borde con mucho
   aire vacío: el contenido se centra con un ancho de lectura y las regiones
   se acomodan en dos columnas con la grilla de APEX (columnSpan).
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .t-Body-contentInner {
    margin-inline: auto;
    max-inline-size: 1180px;
  }
}


/* --------------------------------------------------------------------------
   P2. Logo de la empresa (CARGA_MARCA). La capa mobile oculta la imagen del
   logo en el teléfono y deja solo el saludo; el portal muestra además el logo
   del cliente, chico, delante del saludo. .inth-m-logo en el medio para
   ganarle a ".t-Header .inth-m-logo__img" de la capa mobile.
   -------------------------------------------------------------------------- */
.t-Header .inth-m-logo .portal-logo {
  block-size: 36px;
  inline-size: auto;
  max-inline-size: 150px;
  object-fit: contain;
  opacity: 1;
}

@media (max-width: 767px) {
  .t-Header .inth-m-logo .portal-logo {
    block-size: 30px;
    display: block;
    max-inline-size: 80px;
  }
}


/* --------------------------------------------------------------------------
   P3. Regiones que solo tienen sentido en una de las dos pantallas. En el
   teléfono el saludo ya está en el header.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .portal-solo-escritorio {
    display: none;
  }
}


/* --------------------------------------------------------------------------
   P4. Listas: el importe (miscellaneous del Content Row) se lee primero y no
   se parte; los conceptos del comprobante (description) en una sola línea
   cortada con "…" para que la fila no crezca.
   -------------------------------------------------------------------------- */
.t-ContentRow-misc {
  color: var(--inth-text);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}

.portal-lista .t-ContentRow-description {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}


/* --------------------------------------------------------------------------
   P5. Credencial: tarjeta con el titular arriba y el QR centrado, pensada
   para mostrarla en la pantalla del teléfono.
   -------------------------------------------------------------------------- */
.portal-credencial {
  background: linear-gradient(135deg, var(--inth-primary) 0%, var(--inth-primary-hover) 100%);
  border-radius: var(--inth-radius-lg);
  box-shadow: var(--inth-shadow);
  color: #ffffff;
  padding: 20px;
}

.portal-credencial__etiqueta {
  font-size: .75rem;
  letter-spacing: .08em;
  margin: 0;
  opacity: .85;
  text-transform: uppercase;
}

.portal-credencial__titular {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 2px 0 16px;
}

.portal-credencial__datos {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.portal-credencial__datos dt {
  font-size: .75rem;
  opacity: .85;
}

.portal-credencial__datos dd {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}

.portal-credencial__estado {
  background: rgba(255, 255, 255, .2);
  border-radius: 999px;
  display: inline-block;
  font-size: .8125rem;
  font-weight: 600;
  margin-block-start: 16px;
  padding: 4px 12px;
}

.portal-qr .t-Region-body {
  display: flex;
  justify-content: center;
}


/* --------------------------------------------------------------------------
   P6. Solicitudes. Panel "Qué podés pedir": cada tipo con su ícono y la ayuda.
   Detalle: cabecera de la solicitud.
   -------------------------------------------------------------------------- */
.portal-tipos {
  display: grid;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.portal-tipos li {
  align-items: flex-start;
  display: flex;
  gap: 12px;
}

.portal-tipos .fa {
  background: var(--inth-primary-soft);
  border-radius: var(--inth-radius-sm);
  color: var(--inth-primary);
  flex: none;
  font-size: 16px;
  padding: 10px;
}

.portal-tipos strong {
  color: var(--inth-text);
  display: block;
}

.portal-tipos span {
  color: var(--inth-text-muted);
  font-size: .875rem;
}

.portal-solicitud__numero {
  color: var(--inth-text-muted);
  font-size: .8125rem;
  margin: 0;
}

.portal-solicitud__tipo {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 2px 0 8px;
}

.portal-solicitud__detalle {
  color: var(--inth-text-muted);
  margin: 8px 0 0;
  white-space: pre-line;
}


/* --------------------------------------------------------------------------
   P7. Indicadores en el teléfono. La capa mobile (M22) reparte las Metric
   Cards de a tres por fila, pensado para números cortos; los importes del
   portal ($245.750,00) no entran en un tercio de 390 px y se salían de la
   tarjeta. En el teléfono va una tarjeta por renglón: título y detalle a la
   izquierda, importe a la derecha y sin cortar. Con .pg-tab delante para
   ganarle a ".inth-metricas ..." (0,2,0) de la capa mobile.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .pg-tab .inth-metricas .t-MetricCards {
    gap: 8px;
    grid-template-columns: minmax(0, 1fr);
  }

  .pg-tab .inth-metricas .t-MetricCard {
    padding: .75rem 1rem;
    text-align: start;
  }

  .pg-tab .inth-metricas .t-MetricCard-body {
    align-items: stretch;
  }

  .pg-tab .inth-metricas .t-MetricCard-content {
    align-items: center;
    column-gap: 12px;
    display: grid;
    grid-template-areas:
      "titulo importe"
      "detalle importe";
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .pg-tab .inth-metricas .t-MetricCard-title {
    grid-area: titulo;
  }

  .pg-tab .inth-metricas .t-MetricCard-meta {
    color: var(--inth-text-muted);
    font-size: .8125rem;
    grid-area: detalle;
  }

  .pg-tab .inth-metricas .t-MetricCard-metric {
    font-size: 1.25rem;
    grid-area: importe;
    line-height: 1.5rem;
    white-space: nowrap;
  }
}


/* --------------------------------------------------------------------------
   P8. Dos regiones en la misma fila (Requiere atención / Accesos rápidos,
   credencial / QR): en escritorio estiran a la altura de la más alta para
   que empiecen y terminen en el mismo lugar.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .row:has(> .col > .portal-par) {
    align-items: stretch;
  }

  .row > .col:has(> .portal-par) {
    display: flex;
    flex-direction: column;
  }

  .row > .col > .portal-par {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
  }

  .portal-par > .t-Region-bodyWrap,
  .portal-par > .portal-credencial {
    flex: 1 1 auto;
  }
}


/* --------------------------------------------------------------------------
   P9. Perfil: los datos registrados ocupan el centro con un ancho de lectura.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .portal-centrado {
    margin-inline: auto;
    max-inline-size: 820px;
  }
}