/* css/portal.css · el portal del cliente final (portal.html, js/portal.js; §2.17, §4.2).

   Se carga detrás de estilo.css y css/acceso.css: usa sus tokens (--superficie, --texto, --acento, --radio…) y sus
   piezas (.boton, .campo, .chapa…), y para entrar y la invitación la pantalla partida de acceso.css tal cual
   (.acceso, .acceso-panel, .acceso-caja…). Aquí va solo lo del portal: el selector de idioma, la cabecera de
   dentro, las tarjetas de «Mis asuntos» y la tarjeta de la contraseña.

   Contraste (luminancia de WCAG, como en acceso.css): la cabecera de dentro lleva de background-color el sólido de
   la parada MÁS CLARA de su degradado (#3451d1): el blanco da 6,47 y el suave #e0e7ff 5,25. Sus botones van sobre un
   sólido más oscuro (#2a42b0, blanco 8,38), nada de rgba bajo un texto. La chapa del estado lleva el color del
   estado en el punto y en un velo del 16 % (un ::before), y el texto con el color de la página, como la materia:
   el contraste no depende del color que haya elegido nadie. */

body.portal { margin: 0; background: var(--fondo); }
.portal-raiz, .portal-vista { min-height: 100vh; min-height: 100dvh; }

.portal-cargando {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 60vh;
  color: var(--texto-suave);
  font-size: 0.95rem;
}

/* ─────────────────────────────────────────────── fuera: la caja de acceso.css con el idioma arriba */

.portal-caja-cima {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
}
.portal-despacho {
  min-width: 0;
  margin: 0;
  color: var(--texto-suave);
  font-size: 0.86rem;
  font-weight: 650;
  line-height: 1.3;
}
.portal-idioma { display: inline-flex; flex: none; align-items: center; }
.portal-idioma select {
  width: auto;
  min-height: 36px;
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: 0.85rem;
}
.portal-panel .acceso-lema { font-size: clamp(1.9rem, 2.7vw, 2.5rem); }
.portal-aviso {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0 0 18px;
  padding: 10px 12px;
  border-radius: var(--radio-control);
  background: var(--acento-suave);
  color: var(--texto);
  font-size: 0.9rem;
  line-height: 1.45;
}
.portal-aviso .icono { margin-top: 1px; color: var(--acento); }

/* ─────────────────────────────────────────────── dentro: cabecera, cuerpo y pie */

.portal-dentro { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.portal-cabeza {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 16px max(24px, calc((100% - 960px) / 2));
  overflow: hidden;
  isolation: isolate;
  color: #ffffff;
  background-color: #3451d1;
  background-image:
    radial-gradient(120% 90% at 100% 0%, rgba(142, 162, 255, 0.28) 0%, rgba(142, 162, 255, 0) 60%),
    linear-gradient(155deg, #3451d1 0%, #2a42b0 50%, #1b2a78 100%);
}
.portal-cabeza .acceso-dibujo {
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 25%, #000 100%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 25%, #000 100%);
}
.portal-marca {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: #ffffff;
  text-decoration: none;
}
.portal-marca:hover { text-decoration: none; }
/* El logotipo del despacho en su host propio (la <meta name="legajo-logo">, §2.17): un SVG apaisado ya en el color de la
   cabecera y del panel. La altura la decide el tema de esa instalación (tema.css); esto es el tamaño de respaldo. */
.portal-logo { display: block; width: auto; max-width: min(100%, 240px); height: 32px; }
.portal-logo-panel { height: 40px; }
.portal-marca-texto { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.portal-marca-nombre { color: #ffffff; font-size: 1.05rem; font-weight: 700; }
.portal-marca-casa { color: #e0e7ff; font-size: 0.75rem; font-weight: 600; }
.portal-cabeza-acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.boton.portal-boton-cabeza {
  min-height: 36px;
  padding: 6px 12px;
  border-color: #8ea2ff;
  background: #2a42b0;
  color: #ffffff;
  box-shadow: none;
}
.boton.portal-boton-cabeza:hover { background: #1b2a78; border-color: #e0e7ff; }
.boton.portal-boton-cabeza[aria-current="page"] { border-color: #ffffff; box-shadow: inset 0 -2px 0 var(--oro); }

.portal-cuerpo {
  box-sizing: border-box;
  flex: 1;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 24px 48px;
}
.portal-cuerpo-estrecho { max-width: 600px; }
.portal-saludo { margin-bottom: 24px; }
.portal-titulo { margin: 0 0 6px; font-size: 1.75rem; letter-spacing: -0.025em; }
.portal-titulo:focus { outline: none; }
.portal-quien { margin: 0 0 4px; font-weight: 600; }
.portal-sub { max-width: 46rem; margin: 0; color: var(--texto-suave); }

/* ── una tarjeta por asunto */
.portal-lista { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.portal-asunto-tarjeta {
  padding: 20px 22px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  box-shadow: var(--sombra-suave);
}
.portal-asunto-cima {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 8px;
}
.portal-codigo { color: var(--texto-suave); font-family: var(--letra-fija); font-size: 0.82rem; font-weight: 600; }
.portal-estado {
  --color-estado: var(--acento);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 3px 11px;
  border-radius: var(--radio-pildora);
  background: var(--superficie);
  box-shadow: inset 0 0 0 1px var(--borde);
  color: var(--texto);
  font-size: 0.8rem;
  font-weight: 650;
  line-height: 18px;
}
.portal-estado::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--color-estado);
  opacity: 0.16;
}
.portal-estado-punto { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--color-estado); }
.portal-estado-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-asunto-titulo { margin: 0 0 8px; font-size: 1.2rem; }
.portal-asunto-chapas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.portal-bloque {
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: var(--radio-control);
  background: var(--superficie-2);
}
.portal-bloque h3 { margin: 0 0 4px; color: var(--texto-suave); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.01em; }
.portal-novedad { box-shadow: inset 3px 0 0 var(--acento); }
.portal-texto { margin: 0; font-size: 0.95rem; line-height: 1.55; white-space: pre-line; }
.portal-fecha { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; color: var(--texto-suave); font-size: 0.8rem; }
.portal-datos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--borde);
}
.portal-dato { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.portal-dato dt { color: var(--texto-suave); font-size: 0.8rem; font-weight: 600; }
.portal-dato dd { min-width: 0; margin: 0; font-size: 0.88rem; }

.portal-vacio {
  padding: 40px 24px;
  border: 1px dashed var(--borde-fuerte);
  border-radius: var(--radio);
  color: var(--texto-suave);
  text-align: center;
}
.portal-vacio-icono { display: inline-grid; margin-bottom: 8px; color: var(--acento); }
.portal-vacio-titulo { margin: 0 0 4px; color: var(--texto); font-weight: 650; }

.portal-contacto {
  margin-top: 28px;
  padding: 18px 20px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
}
.portal-contacto h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 1rem; }
.portal-contacto h2 .icono { color: var(--acento); }
.portal-contacto p { margin: 0; white-space: pre-line; }

.portal-pie { padding: 18px 24px 26px; color: var(--texto-suave); font-size: 0.78rem; text-align: center; }

/* ── la contraseña */
.portal-volver { margin: 0 0 14px -8px; }
.portal-tarjeta {
  padding: 28px 28px 24px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  box-shadow: var(--sombra-suave);
}

/* ─────────────────────────────────────────────── móvil */

@media (max-width: 720px) {
  .portal-caja-cima { margin-bottom: 16px; }
  .portal-cabeza { padding: 14px 16px; }
  .portal-cabeza-acciones { flex: 1 1 100%; justify-content: flex-start; gap: 6px; }
  /* Los tres en un renglón a 390 px en casi todos los idiomas (en francés, «Se déconnecter» baja: flex-wrap). */
  .boton.portal-boton-cabeza { gap: 5px; padding: 6px 10px; font-size: 0.85rem; }
  .portal-idioma select { padding-left: 9px; padding-right: 28px; background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%; }
  .portal-cuerpo { padding: 22px 16px 36px; }
  .portal-titulo { font-size: 1.45rem; }
  .portal-asunto-tarjeta { padding: 16px; }
  .portal-tarjeta { padding: 22px 16px 18px; }
}