/* Generado desde integrio/ui: no editar aquí. */
/* Variante «portal» de la librería visual: el portal de las personas del cliente (bi). Se carga DESPUÉS de ui.css, solo en bi
   (admin y cloud reciben el archivo con la sincronización, pero no lo cargan). Todo cuelga de `body.portal` o de clases `.portal-`:
   no toca ningún selector de ui.css. Los colores salen de los tokens de ui.css (claro y oscuro); la única excepción son dos tonos oscuros de BarraProporcion (ver abajo). */

/* Escala del portal: 16 px de base, titular de 44 a 28 px, radio de 18 px y objetivos táctiles de 44 px como mínimo. */
body.portal {
  --fs-base: 16px; --fs-pagina: clamp(28px, 4vw, 44px); --fs-panel: 20px; --fs-cifra: 34px; --fs-mono: 14px;
  margin: 0; background: var(--paper); color: var(--text); font-family: var(--body); font-size: 16px; line-height: 1.5;
}

/* Tonos de BarraProporcion (a oscuro, b medio, c claro), con su texto: se distinguen por luminosidad, no solo por matiz. En claro salen de los tokens;
   en oscuro --ink se confundiría con el panel, así que lleva dos valores propios (único lugar con colores fijos de este archivo). */
body.portal {
  --abc-a: var(--ink); --abc-a-t: var(--barra-titulo);
  --abc-b: var(--teal); --abc-b-t: var(--barra-titulo);
  --abc-c: var(--teal-claro); --abc-c-t: var(--ink);
}

:root[data-tema="oscuro"] body.portal {
  --abc-a: #1F6F7A; --abc-a-t: var(--barra-titulo);
  --abc-b: var(--teal-claro); --abc-b-t: var(--ink);
  --abc-c: #BFE3E7; --abc-c-t: var(--ink);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) body.portal {
    --abc-a: #1F6F7A; --abc-a-t: var(--barra-titulo);
    --abc-b: var(--teal-claro); --abc-b-t: var(--ink);
    --abc-c: #BFE3E7; --abc-c-t: var(--ink);
  }
}

/* Encabezado: empresa, menú, sello e iniciales. */
.portal-franja { background: var(--ink); color: var(--barra-titulo); padding: 10px 24px; text-align: center; font-size: 14px; line-height: 1.4; }

.portal-cab { display: flex; align-items: center; gap: 24px; min-height: 68px; padding: 0 24px; background: var(--surface); border-bottom: 1px solid var(--line); }

.portal-empresa { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--display); font-weight: 700; font-size: 20px; color: var(--titulo); text-decoration: none; }

.portal-nav { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; }

.portal-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 12px 14px; border-radius: 10px; font-weight: 500; color: var(--muted); text-decoration: none; }

.portal-nav a:hover { color: var(--titulo); }

.portal-nav a[aria-current="page"] { background: var(--wash); color: var(--titulo); font-weight: 600; }

.portal-der { display: flex; align-items: center; gap: 14px; margin-left: auto; }

.portal-sello { font-size: 14px; color: var(--muted); }

/* El sello del contenido solo se ve donde el del encabezado se oculta (celular). Va en la segunda fila de la rejilla (bajo el titular, que es lo primero) y se acerca a él. */
.portal-sello-movil { display: none; grid-row: 2; margin: -28px 0 0; font-size: 14px; color: var(--muted); }

.portal-iniciales { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--barra-titulo); font-weight: 600; font-size: 15px; text-decoration: none; }

/* Contenido: ancho máximo de 1120 px y 40 px entre bloques. */
.portal-contenido { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; max-width: 1120px; margin: 0 auto; padding: 48px 24px 72px; }

/* Titular: la frase de la pantalla; lo destacado va en verde azulado y lo malo en rojo (nunca solo por color: lleva palabras). */
.portal-antes { margin: 0 0 8px; font-size: 17px; color: var(--muted); }

.portal-titular { margin: 0; max-width: 880px; font-family: var(--display); font-weight: 600; font-size: var(--fs-pagina); line-height: 1.15; letter-spacing: -0.02em; color: var(--titulo); }

.portal-titular strong { font-weight: inherit; color: var(--teal-strong); }

.portal-titular strong[data-tono="mal"] { color: var(--bad); }

/* Tarjetas y paneles: --surface, radio 18, sin borde. `.panel` es el de ui.css (componente Panel). */
.portal-panel, body.portal .panel { background: var(--surface); border-radius: 18px; padding: 28px; border: 0; box-shadow: var(--sombra); }

.portal-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }

/* CifraComparada: etiqueta, valor en mono y nota con flecha (▲ bien, ▼ mal; la flecha va con el texto). */
.portal-cifra { display: grid; align-content: start; gap: 6px; padding: 24px 28px; background: var(--surface); border-radius: 18px; box-shadow: var(--sombra); }

.portal-cifra-etiqueta { color: var(--muted); }

.portal-cifra-valor { font-family: var(--mono); font-weight: 500; font-size: 34px; line-height: 1.15; color: var(--titulo); }

.portal-cifra-nota { font-weight: 500; font-size: 15px; color: var(--muted); }

.portal-cifra-nota.ok { color: var(--ok); }

.portal-cifra-nota.mal { color: var(--bad); }

.portal-cifra-nota[href] { display: inline-flex; align-items: center; justify-self: start; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; }

/* GraficaLineas: SVG de servidor; el mes anterior punteado y el actual con su punto al final. */
.portal-grafica { margin: 0; }

.portal-leyenda { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 12px; font-size: 14px; color: var(--muted); }

.portal-leyenda span { display: inline-flex; align-items: center; gap: 8px; }

.portal-leyenda-actual::before { content: ""; width: 22px; height: 4px; border-radius: 2px; background: var(--teal-strong); }

.portal-leyenda-anterior::before { content: ""; width: 22px; height: 0; border-top: 3px dashed var(--muted); }

.portal-svg { display: block; width: 100%; height: auto; overflow: visible; }

.portal-guia { stroke: var(--line); stroke-width: 1; }

.portal-base { stroke: var(--muted); stroke-width: 1; opacity: .45; }

.portal-linea-anterior { stroke: var(--muted); }

.portal-linea-actual { stroke: var(--teal-strong); }

.portal-punto { fill: var(--teal-strong); }

.portal-eje { fill: var(--muted); font-family: var(--body); font-size: 11px; }

/* BarraProporcion: segmentos por porcentaje (SVG), con el texto de cada tono contra su propio fondo. */
.portal-barra-prop { display: block; width: 100%; height: 44px; }

.portal-barra-prop rect { stroke: var(--surface); stroke-width: 3; }

.portal-barra-prop text { font-family: var(--body); font-size: 14px; font-weight: 600; pointer-events: none; }

.portal-prop-a rect { fill: var(--abc-a); }

.portal-prop-a text { fill: var(--abc-a-t); }

.portal-prop-b rect { fill: var(--abc-b); }

.portal-prop-b text { fill: var(--abc-b-t); }

.portal-prop-c rect { fill: var(--abc-c); }

.portal-prop-c text { fill: var(--abc-c-t); }

/* Aviso: etiqueta por tipo, texto y enlace; los avisos seguidos se separan con una línea. */
.portal-aviso { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }

.portal-aviso:last-child { border-bottom: 0; }

.portal-aviso-etiqueta { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }

.portal-aviso.revisar .portal-aviso-etiqueta { color: var(--bad); }

.portal-aviso.se_acaba .portal-aviso-etiqueta { color: var(--amb); }

.portal-aviso.buena .portal-aviso-etiqueta { color: var(--ok); }

.portal-aviso-enlace { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }

/* Barra inferior: solo en celular. */
.portal-inferior { display: none; }

.portal-inferior a { display: grid; justify-items: center; align-content: center; gap: 2px; min-width: 0; min-height: 52px; padding: 6px 2px; border-radius: 10px; font-size: 13px; line-height: 1.2; color: var(--muted); text-decoration: none; }

.portal-inferior a[aria-current="page"] { background: var(--wash); color: var(--titulo); font-weight: 600; }

.portal-inferior span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.portal-inferior .icono { width: 22px; height: 22px; }

/* Formularios del portal: controles de 48 px, esquinas de 10 px y borde de 1.5 px; casillas de 22 px. */
body.portal input:not([type="checkbox"]):not([type="radio"]), body.portal select, body.portal textarea {
  min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--muted); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit;
}

body.portal textarea { min-height: 96px; }

body.portal .btn { min-height: 48px; padding: 10px 20px; border-radius: 12px; font-size: 16px; font-weight: 600; }

body.portal input[type="checkbox"], body.portal input[type="radio"] { width: 22px; height: 22px; accent-color: var(--teal-strong); }

/* Celular: sin menú superior; entra la barra inferior y la escala se aprieta. */
@media (max-width: 899px) {
  .portal-cab { min-height: 60px; padding: 0 16px; }
  .portal-nav { display: none; }
  .portal-inferior { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); }
  .portal-contenido { padding: 24px 16px 104px; }
}

@media (max-width: 599px) {
  .portal-sello { display: none; }
  .portal-sello-movil { display: block; }
  .portal-cifra-valor { font-size: 28px; }
  .portal-panel, body.portal .panel { padding: 20px; }
  .portal-eje-menor, .portal-prop-menor { display: none; }
  .portal-eje { font-size: 20px; }
}