/* =============================================================================
   ESTILOS DE TODO EL PROYECTO  ·  assets/css/estilos.css
   -----------------------------------------------------------------------------
   Un solo archivo para las cinco páginas: el ingreso en PHP, el listado de
   clientes, las empresas, la maqueta de ingreso y el portal.

   CADA PÁGINA LLEVA SU ÁMBITO EN LA ETIQUETA <html>
   -------------------------------------------------
       <html class="pg-php">      visita.php · clientes.php · empresas.php
       <html class="pg-ingreso">  index.html
       <html class="pg-portal">   principal.php

   Y todas las reglas van precedidas de ese ámbito. No es adorno: los tres
   diseños comparten once nombres de clase —btn, tabs, pane, wrap, foot, f, k,
   v, on, bad, logo— y cinco variables de color con valores distintos. Sin el
   ámbito, juntarlos en un archivo cambiaría el aspecto de unas páginas u otras.
   Con él, cada página se ve exactamente igual que cuando tenía su propio css.

   AL AÑADIR UNA REGLA: escríbala dentro del bloque de su página, empezando por
   html.pg-… como todas las demás. Si una regla debe valer para todo el
   proyecto, repítala en los tres bloques o cree un bloque común arriba.

   Generado a partir de portal.css, estilos.css y los <style> de index.html.
   ============================================================================= */


/* =============================================================================
   1 · PÁGINAS PHP · visita.php · clientes.php · empresas.php
   -----------------------------------------------------------------------------
   Ingreso, listado de clientes y empresas del contacto.
   Origen: assets/css/estilos.css
   ============================================================================= */
/* ==========================================================================
   Servicio al Cliente — Elicrom
   Estilos del portal (paleta y componentes del Portal de Clientes)
   ========================================================================== */

html.pg-php {
    /* Paleta corporativa */
    --azul-marca:      #2aa8e0;
    --azul-claro:      #5fc2ec;
    --azul-boton:      #4a9fd8;
    --azul-boton-alt:  #2b83bd;
    --marino-900:      #071a30;
    --marino-800:      #0b2444;
    --marino-700:      #10305a;

    --tinta:           #0b2545;
    --tinta-media:     #46596f;
    --tinta-suave:     #7d8ea1;

    --linea:           #dbe3ec;
    --linea-regla:     #d3dce5;
    --rojo:            #d9534f;
    --rojo-fondo:      #fdf1f1;

    --radio:           10px;
    --radio-grande:    16px;

    --fuente: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;

    --regla-ancho: 58px;
}

html.pg-php * { box-sizing: border-box; }

/* Navegadores antiguos no ocultan por sí solos el atributo hidden */
html.pg-php [hidden] { display: none !important; }

html.pg-php, html.pg-php body { height: 100%; }

html.pg-php body {
    margin: 0;
    padding-left: var(--regla-ancho);
    min-height: 100%;
    display: flex;
    flex-direction: column;
    font-family: var(--fuente);
    color: #eaf2fa;
    background:
        radial-gradient(1100px 620px at 78% -8%, rgba(42, 168, 224, .28), transparent 62%),
        radial-gradient(900px 620px at 12% 108%, rgba(42, 168, 224, .16), transparent 60%),
        linear-gradient(158deg, var(--marino-700) 0%, var(--marino-800) 48%, var(--marino-900) 100%);
    -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   Regla lateral
   ========================================================================== */
html.pg-php .regla {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--regla-ancho);
    background: #fff;
    border-right: 1px solid var(--linea-regla);
    overflow: hidden;
    z-index: 5;
}

html.pg-php .regla__cinta {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 18px 0 0 16px;
}

html.pg-php .regla__marca {
    display: block;
    width: 12px;
    height: 1px;
    background: var(--linea-regla);
    flex: 0 0 auto;
}

html.pg-php .regla__marca--larga { width: 22px; background: #c2ced9; }

html.pg-php .regla__marca--azul  { background: var(--azul-claro); }
html.pg-php .regla__marca--azul.regla__marca--larga { background: var(--azul-marca); }

/* ==========================================================================
   Lienzo y tarjeta
   ========================================================================== */
html.pg-php .lienzo {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 22px 24px;
}

html.pg-php .tarjeta {
    width: 100%;
    max-width: 492px;
    padding: 30px 38px 24px;
    background: #fff;
    border-radius: var(--radio-grande);
    box-shadow: 0 34px 80px rgba(2, 14, 28, .48), 0 2px 0 rgba(255, 255, 255, .5) inset;
    color: var(--tinta);
    animation: aparecer .45s ease both;
}

@keyframes aparecer {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

html.pg-php .tarjeta__cabecera { text-align: center; }

html.pg-php .tarjeta__icono { width: 62px; height: 62px; display: block; margin: 0 auto 12px; }

html.pg-php .tarjeta__portal {
    margin: 0 0 6px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .18em;
    color: var(--tinta-suave);
}

html.pg-php .tarjeta__titulo {
    margin: 0;
    font-size: 25px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tinta);
}

html.pg-php .tarjeta__subtitulo {
    margin: 18px 0 18px;
    padding-top: 17px;
    border-top: 1px solid var(--linea);
    text-align: center;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--tinta-media);
}

/* ==========================================================================
   Selector de idioma
   ========================================================================== */
html.pg-php .idioma {
    position: relative;
    margin: 14px auto 0;
    width: max-content;
    text-align: center;
}

html.pg-php .idioma__etiqueta {
    display: block;
    margin-bottom: 6px;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--tinta-suave);
}

html.pg-php .idioma__boton {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 176px;
    padding: 9px 14px;
    font: inherit;
    font-size: 14px;
    color: var(--tinta);
    background: #fff;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

html.pg-php .idioma__boton:hover  { border-color: #b9cad9; }
html.pg-php .idioma__boton:focus-visible,
html.pg-php .idioma[data-abierto] .idioma__boton {
    outline: none;
    border-color: var(--azul-marca);
    box-shadow: 0 0 0 3px rgba(42, 168, 224, .18);
}

html.pg-php .idioma__boton > span { flex: 1; text-align: left; }

html.pg-php .idioma__flecha { width: 11px; height: 8px; color: var(--tinta-suave); transition: transform .18s; }
html.pg-php .idioma[data-abierto] .idioma__flecha { transform: rotate(180deg); }

html.pg-php .idioma__lista {
    position: absolute;
    z-index: 20;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 5px;
    list-style: none;
    background: #fff;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: 0 18px 38px rgba(9, 30, 55, .18);
}

html.pg-php .idioma__opcion {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    font-size: 14px;
    border-radius: 7px;
    cursor: pointer;
}

html.pg-php .idioma__opcion:hover,
html.pg-php .idioma__opcion:focus { background: #f1f7fc; outline: none; }

html.pg-php .idioma__opcion[aria-selected="true"] { background: #e7f3fb; font-weight: 600; }

html.pg-php .idioma__opcion > span { flex: 1; text-align: left; }

/* ==========================================================================
   Formulario
   ========================================================================== */
html.pg-php .formulario { display: flex; flex-direction: column; gap: 16px; }

html.pg-php .campo__etiqueta {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--tinta-media);
}

html.pg-php .campo__caja {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 12px;
    background: #fbfcfe;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    transition: border-color .15s, box-shadow .15s, background .15s;
}

html.pg-php .campo__caja:focus-within {
    background: #fff;
    border-color: var(--azul-marca);
    box-shadow: 0 0 0 3px rgba(42, 168, 224, .16);
}

html.pg-php .campo__icono { width: 18px; height: 18px; color: #9fb0c1; flex: 0 0 auto; }

html.pg-php .campo__caja input {
    flex: 1;
    min-width: 0;
    padding: 12px 0;
    font: inherit;
    font-size: 14.5px;
    color: var(--tinta);
    background: none;
    border: 0;
    outline: none;
}

html.pg-php .campo__caja input::placeholder { color: #a9b7c6; }

html.pg-php .campo__ojo {
    display: inline-flex;
    padding: 4px;
    color: #9fb0c1;
    background: none;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}

html.pg-php .campo__ojo:hover { color: var(--azul-boton-alt); }
html.pg-php .campo__ojo svg { width: 18px; height: 18px; }

html.pg-php .campo--error .campo__caja {
    border-color: var(--rojo);
    background: var(--rojo-fondo);
}

html.pg-php .campo--error .campo__caja:focus-within {
    box-shadow: 0 0 0 3px rgba(217, 83, 79, .15);
}

html.pg-php .campo__error {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 0;
    font-size: 12.5px;
    color: var(--rojo);
}

html.pg-php .campo__error[hidden] { display: none; }
html.pg-php .campo__error svg { width: 13px; height: 13px; flex: 0 0 auto; }

/* --------------------- Aviso temporal (respuesta de la API) --------------------- */
html.pg-php .aviso {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 16px;
    padding: 11px 36px 11px 13px;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.4;
    color: #a13c39;
    background: var(--rojo-fondo);
    border: 1px solid #f2c9c8;
    border-radius: var(--radio);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .25s ease, transform .25s ease;
}

html.pg-php .aviso[hidden] { display: none; }

html.pg-php .aviso--visible { opacity: 1; transform: none; }

html.pg-php .aviso__icono { width: 16px; height: 16px; flex: 0 0 auto; }
html.pg-php .aviso__texto { flex: 1; }

html.pg-php .aviso__cerrar {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    padding: 4px;
    color: #b96b68;
    background: none;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
}

html.pg-php .aviso__cerrar:hover { color: #8c2f2c; background: rgba(217, 83, 79, .1); }
html.pg-php .aviso__cerrar svg { width: 12px; height: 12px; }

/* Cuánto durará la sesión (visita.php). Informativo, no una alarma: aquí
   todavía no hay sesión que pueda caducar. Por eso va en gris y pequeño, no
   en el rojo de los avisos de error. */
html.pg-php .nota-sesion {
    margin: 0 0 14px;
    font-size: 12px;
    line-height: 1.5;
    color: #6b7a8d;
    display: flex;
    align-items: center;
    gap: 6px;
}
html.pg-php .nota-sesion:empty { display: none; }
html.pg-php .nota-sesion::before {
    content: "";
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    border-radius: 50%;
    border: 1.4px solid currentColor;
    opacity: .55;
    background:
      linear-gradient(currentColor, currentColor) center 3px / 1.4px 4px no-repeat,
      linear-gradient(currentColor, currentColor) 50% 50% / 4px 1.4px no-repeat;
    background-origin: content-box;
}

html.pg-php .aviso__barra {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background: var(--rojo);
    transform-origin: left center;
}

@keyframes aviso-barra {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

html.pg-php .enlace {
    color: var(--azul-boton-alt);
    text-decoration: none;
    font-weight: 600;
}

html.pg-php .enlace:hover { text-decoration: underline; }

/* ---------------------------- Botón ----------------------------- */
html.pg-php .boton {
    margin-top: 8px;
    padding: 13px 18px;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(180deg, var(--azul-boton), var(--azul-boton-alt));
    border: 0;
    border-radius: var(--radio);
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(42, 130, 189, .3);
    transition: transform .12s, box-shadow .15s, filter .15s;
}

html.pg-php .boton:hover  { filter: brightness(1.05); box-shadow: 0 11px 22px rgba(42, 130, 189, .36); }
html.pg-php .boton:active { transform: translateY(1px); }
html.pg-php .boton:disabled { opacity: .65; cursor: progress; box-shadow: none; filter: none; }
html.pg-php .boton:focus-visible { outline: 3px solid rgba(42, 168, 224, .45); outline-offset: 2px; }

/* ==========================================================================
   Tabla de clientes
   ========================================================================== */
html.pg-php .tarjeta--ancha { max-width: 1180px; }

html.pg-php .tabla-caja {
    margin-top: 4px;
    border: 1px solid #cdd7e2;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

html.pg-php .tabla-scroll {
    overflow-x: auto;
    scrollbar-color: #b9c6d4 #eef1f5;
}

html.pg-php .tabla-scroll::-webkit-scrollbar { height: 11px; }
html.pg-php .tabla-scroll::-webkit-scrollbar-track { background: #eef1f5; }
html.pg-php .tabla-scroll::-webkit-scrollbar-thumb {
    background: #b9c6d4;
    border: 2px solid #eef1f5;
    border-radius: 6px;
}

html.pg-php .tabla {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    font-size: 12.5px;
    color: #33475c;
}

html.pg-php .tabla thead th {
    padding: 10px 12px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(180deg, #4d76a0, #3f688f);
    border-right: 1px solid rgba(255, 255, 255, .18);
    white-space: nowrap;
}

html.pg-php .tabla thead th:last-child { border-right: 0; }

html.pg-php .tabla thead tr.tabla__filtros th {
    padding: 8px;
    background: #fff;
    border-right: 1px solid #e6ebf1;
    border-bottom: 1px solid #dbe3ec;
}

/* Ancho de las columnas (la tabla se desplaza en horizontal si no cabe) */
/* Estado pasó de 9% a 15% al ponerle la lista: la palabra más larga es
   «BLOQUEADO» y con la flecha al lado no cabía —se leía «BLOQUE…»—. Los seis
   puntos salen de Cliente de, Empresa y RUC, que son las que más holgura
   tenían. Si algún día se añade un estado con un nombre más largo, esto es lo
   que hay que volver a mirar. */
html.pg-php .tabla col.c-cliente_de { width: 15%; }
html.pg-php .tabla col.c-empresa    { width: 21%; }
html.pg-php .tabla col.c-sucursal   { width: 12%; }
html.pg-php .tabla col.c-ruc        { width: 14%; }
html.pg-php .tabla col.c-pais       { width: 12%; }
html.pg-php .tabla col.c-ciudad     { width: 13%; }
html.pg-php .tabla col.c-estado     { width: 15%; }

html.pg-php .tabla__filtro {
    width: 100%;
    padding: 7px 9px;
    font: inherit;
    font-size: 12.5px;
    color: var(--tinta);
    background: #fff;
    border: 1.5px solid #4d76a0;
    border-radius: 5px;
    outline: none;
}

html.pg-php .tabla__filtro::placeholder { color: #9db0c2; }

html.pg-php .tabla__filtro:focus {
    border-color: var(--azul-marca);
    box-shadow: 0 0 0 3px rgba(42, 168, 224, .18);
}

/* La columna Estado lleva una LISTA en vez de una caja. Se le quita el aspecto
   nativo —que cambia con el sistema operativo— y se le dibuja la misma flecha
   que el selector de idioma, para que las dos casillas de la fila de filtros se
   vean como lo que son: la misma cosa con dos formas de elegir.

   La flecha va como imagen de fondo y no como <svg> aparte porque un <select>
   no admite hijos que no sean <option>. */
html.pg-php .tabla__filtro--lista {
    height: 33px;                 /* el alto de una caja de texto ya rellenada */
    font-size: 12px;              /* medio punto menos que las cajas: es lo que
                                     hace que «BLOQUEADO» entre sin apretar */
    padding-left: 7px;
    padding-right: 22px;          /* sitio para la flecha, y ni un pixel más:
                                     «INACTIVO» es la palabra más larga y tiene
                                     que caber entera */
    text-overflow: ellipsis;      /* si algún día no cabe, que se vea que falta */
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%234d76a0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    background-size: 10px 7px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* IE 11 dibuja su propia flecha además de la nuestra; ésta la quita. */
html.pg-php .tabla__filtro--lista::-ms-expand { display: none; }

html.pg-php .tabla tbody td {
    padding: 10px 12px;
    text-align: center;
    border-bottom: 1px solid #eaeef3;
    border-right: 1px solid #eaeef3;
}

html.pg-php .tabla tbody td:last-child { border-right: 0; }

html.pg-php .tabla tbody tr:nth-child(even) { background: #f4f6f9; }

html.pg-php .tabla__destacado { color: var(--azul-boton-alt); }

/* Fila con clic: abre la ficha del cliente */
html.pg-php .tabla__fila { cursor: pointer; transition: background .12s; }
html.pg-php .tabla__fila:hover,
html.pg-php .tabla__fila:focus-visible {
    background: #e7f2fb;
    outline: none;
    box-shadow: inset 3px 0 0 var(--azul-boton);
}

html.pg-php .tabla__estado {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .04em;
    color: #2e7d5b;
}

html.pg-php .tabla__estado--inactivo  { color: #b0644f; }

/* Bloqueado no es «inactivo pero peor»: son cosas distintas —uno dejó de
   trabajar con Elicrom, al otro se le cerró el acceso— y se distinguen a
   simple vista sin tener que leer la palabra. */
html.pg-php .tabla__estado--bloqueado { color: #9c2f2f; font-weight: 600; }

/* Mientras se consulta la dirección del cliente */
html.pg-php body.esperando { cursor: progress; }
html.pg-php body.esperando .tabla__fila { pointer-events: none; opacity: .7; }

html.pg-php .tabla__vacia td {
    padding: 26px 12px;
    text-align: center;
    color: var(--tinta-suave);
    font-style: italic;
}

/* ------------------------- Pie de la tabla ------------------------- */
html.pg-php .tabla-pie {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 12px;
    background: #eef1f5;
    border-top: 1px solid #dbe3ec;
}

html.pg-php .tabla-pie__conteo {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--tinta-media);
}

html.pg-php .boton-tenue {
    padding: 6px 12px;
    font: inherit;
    font-size: 12px;
    color: var(--azul-boton-alt);
    background: #fff;
    border: 1px solid #c6d1dd;
    border-radius: 6px;
    cursor: pointer;
}

html.pg-php .boton-tenue:hover { background: #f4f9fd; border-color: var(--azul-boton); }

html.pg-php .paginacion {
    display: flex;
    gap: 5px;
    margin-left: auto;
    flex-wrap: wrap;
}

html.pg-php .paginacion__boton {
    min-width: 34px;
    padding: 6px 10px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--tinta-media);
    background: #fff;
    border: 1px solid #c6d1dd;
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}

html.pg-php .paginacion__boton:hover:not(:disabled):not(.paginacion__boton--activo) {
    background: #f4f9fd;
    border-color: var(--azul-boton);
    color: var(--azul-boton-alt);
}

html.pg-php .paginacion__boton:disabled { opacity: .45; cursor: default; }

html.pg-php .paginacion__boton--activo {
    color: #fff;
    background: linear-gradient(180deg, var(--azul-boton), var(--azul-boton-alt));
    border-color: var(--azul-boton-alt);
    cursor: default;
}

html.pg-php .tarjeta__pie { margin: 18px 0 0; text-align: center; font-size: 13px; }

/* ==========================================================================
   Empresas del contacto
   ========================================================================== */
html.pg-php .tarjeta--media { max-width: 700px; }

html.pg-php .tarjeta__titulo--nombre {
    font-size: 22px;
    line-height: 1.25;
    letter-spacing: .02em;
}

html.pg-php .empresas {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    border: 1px solid #cdd7e2;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

html.pg-php .empresa {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border-bottom: 1px solid #e6ebf1;
    cursor: pointer;
    transition: background .12s;
}

html.pg-php .empresa:last-child { border-bottom: 0; }
html.pg-php .empresa:nth-child(even) { background: #f7f9fb; }

html.pg-php .empresa:hover,
html.pg-php .empresa:focus-visible {
    background: #e7f2fb;
    outline: none;
    box-shadow: inset 3px 0 0 var(--azul-boton);
}

html.pg-php .empresa__logo {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 96px;
    height: 74px;
    padding: 6px;
    border: 1px solid #e2e8ef;
    border-radius: 6px;
    background: #f1f4f7;
    overflow: hidden;
}

html.pg-php .empresa__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }

html.pg-php .empresa__logo--vacio { color: #b3c0cd; }
html.pg-php .empresa__logo--vacio svg { width: 26px; height: 22px; }

html.pg-php .empresa__logo--vacio span {
    font-size: 9px;
    line-height: 1.2;
    text-align: center;
    color: #93a4b5;
}

html.pg-php .empresa__datos { flex: 1; min-width: 0; text-align: center; }

html.pg-php .empresa__nombre {
    margin: 0;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--tinta);
}

html.pg-php .empresa__detalle {
    margin: 4px 0 0;
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--tinta-suave);
}

html.pg-php .empresa__flecha { flex: 0 0 auto; color: #b3c0cd; display: inline-flex; }
html.pg-php .empresa__flecha svg { width: 8px; height: 12px; }
html.pg-php .empresa:hover .empresa__flecha { color: var(--azul-boton); }

html.pg-php .empresas__vacio {
    padding: 26px 16px;
    text-align: center;
    font-size: 13px;
    font-style: italic;
    color: var(--tinta-suave);
}

/* ==========================================================================
   Pie
   ========================================================================== */
html.pg-php .pie {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 16px 30px 22px;
    font-size: 12.5px;
    color: rgba(198, 219, 238, .72);
}

/* ==========================================================================
   Adaptación a pantallas pequeñas
   ========================================================================== */
@media (max-width: 640px) {
    html.pg-php { --regla-ancho: 30px; }

    html.pg-php .regla__cinta { padding-left: 8px; }
    html.pg-php .regla__marca { width: 8px; }
    html.pg-php .regla__marca--larga { width: 14px; }

    html.pg-php .tarjeta { padding: 30px 22px 26px; border-radius: 14px; }
    html.pg-php .tarjeta__titulo { font-size: 21px; }
    html.pg-php .pie { padding: 14px 16px 18px; font-size: 11.5px; }

    html.pg-php .tabla-pie { justify-content: center; }
    html.pg-php .paginacion { margin: 0 auto; justify-content: center; }
    html.pg-php .tabla-pie__conteo { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    html.pg-php * { animation: none !important; transition: none !important; }
}


/* =============================================================================
   2 · MAQUETA DE INGRESO · index.html
   -----------------------------------------------------------------------------
   Presentación, gráfico de control y las pestañas Ingreso · Registro · Recuperar.
   Origen: los <style> que estaban dentro de index.html
   ============================================================================= */

  html.pg-ingreso{
    --blue:#4292C3; --blue-dk:#357DAB; --navy:#0A2554;
    --ink:#16233B; --muted:#69748A; --line:#DCE3EC; --soft:#F2F7FB;
  }
  html.pg-ingreso *{box-sizing:border-box;margin:0;padding:0}
  html.pg-ingreso body{
    font-family:'Inter',system-ui,sans-serif;color:#16233B;color:var(--ink);-webkit-font-smoothing:antialiased;
    background:#E8EDF3;display:flex;justify-content:center;min-height:100vh;
  }
  html.pg-ingreso img{max-width:100%;height:auto}

  html.pg-ingreso .shell{
    display:flex;width:100%;max-width:1200px;min-height:100vh;background:#fff;
    box-shadow:0 0 0 1px rgba(10,37,84,.06), 0 0 60px -20px rgba(10,37,84,.18);
  }

  /* ===== IZQUIERDA ===== */
  html.pg-ingreso .brand{
    flex:1 1 54%;background:#F2F7FB;background:var(--soft);
    padding:52px 60px;display:flex;flex-direction:column;justify-content:space-between;
    position:relative;overflow:hidden;border-right:1px solid #DCE3EC;border-right:1px solid var(--line);
  }
  html.pg-ingreso .scale{position:absolute;left:0;top:0;bottom:0;width:46px;border-right:1px solid #DCE3EC;border-right:1px solid var(--line);background:#fff}
  html.pg-ingreso .scale i{position:absolute;right:0;height:1px;background:#C9D6E3}
  html.pg-ingreso .scale i.mj{background:#4292C3;background:var(--blue);opacity:.55}

  html.pg-ingreso .logo{position:relative;z-index:2;margin-left:22px;display:flex;justify-content:center;
    padding-bottom:22px;border-bottom:1px solid #DCE3EC;border-bottom:1px solid var(--line)}
  html.pg-ingreso .logo img{width:clamp(210px,26vw,300px);height:auto}

  html.pg-ingreso .copy{position:relative;z-index:2;max-width:480px;margin-left:22px}
  html.pg-ingreso .eyebrow{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.2em;
    text-transform:uppercase;color:#357DAB;color:var(--blue-dk);margin-bottom:18px}
  html.pg-ingreso .copy h1{font-size:clamp(26px,2.5vw,34px);line-height:1.2;font-weight:600;
    letter-spacing:-.015em;margin-bottom:22px;color:#0A2554;color:var(--navy)}

  html.pg-ingreso .feats{list-style:none;margin:0 0 22px;padding:0;max-width:440px}
  html.pg-ingreso .feats li{display:flex;align-items:flex-start;gap:11px;
    font-size:14.5px;line-height:1.5;color:#4A576B;margin-bottom:11px}
  html.pg-ingreso .feats svg{flex:none;width:15px;height:15px;margin-top:3px;stroke:#4292C3;stroke:var(--blue);stroke-width:2.4;fill:none}

  /* carta de control */
  html.pg-ingreso .chart-card{max-width:440px;margin:0 0 22px;background:#fff;border:1px solid #DCE3EC;border:1px solid var(--line);
    border-radius:9px;padding:13px 14px 11px;
    box-shadow:0 1px 2px rgba(10,37,84,.04),0 8px 20px -12px rgba(10,37,84,.14)}
  html.pg-ingreso .chart-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:4px}
  html.pg-ingreso .chart-head b{font-size:12px;font-weight:600;color:#0A2554;color:var(--navy)}
  html.pg-ingreso .chart-badge{display:inline-flex;align-items:center;gap:4px;flex:none;
    font-family:'IBM Plex Mono',monospace;font-size:9px;color:#C0392B;background:#FDECEA;
    border:1px solid #F6D4D0;padding:2px 7px;border-radius:20px}
  html.pg-ingreso .chart-sub{font-family:'IBM Plex Mono',monospace;font-size:9.5px;color:#69748A;color:var(--muted);
    margin-bottom:6px;letter-spacing:.02em}
  html.pg-ingreso .chart-card svg{display:block;width:100%;height:auto}
  html.pg-ingreso .ax{font-family:'IBM Plex Mono',monospace;font-size:6.5px;fill:#8C97A8}
  html.pg-ingreso .lim{font-family:'IBM Plex Mono',monospace;font-size:6.5px;fill:#8C97A8}
  html.pg-ingreso .yttl{font-family:'Inter',sans-serif;font-size:6.5px;fill:#8C97A8}

  html.pg-ingreso .hilite{border-left:3px solid #4292C3;border-left:3px solid var(--blue);padding:6px 0 6px 16px;max-width:440px}
  html.pg-ingreso .hilite p{font-size:clamp(17px,1.5vw,20px);line-height:1.4;font-weight:500;
    color:#0A2554;
    color:var(--navy);letter-spacing:-.005em}
  html.pg-ingreso .hilite b{font-weight:700;color:#357DAB;color:var(--blue-dk)}

  html.pg-ingreso .creds{position:relative;z-index:2;display:flex;gap:32px;padding-top:24px;
    margin-left:22px;border-top:1px solid #DCE3EC;border-top:1px solid var(--line)}
  html.pg-ingreso .creds .k{font-family:'IBM Plex Mono',monospace;font-size:13px;color:#0A2554;color:var(--navy);font-weight:500}
  html.pg-ingreso .creds .v{font-size:11px;color:#69748A;color:var(--muted);margin-top:4px}
  /* una marca puede dejar sin segunda línea alguna credencial (ver 'textos'
     en config.php): si va vacía no debe ocupar sitio */
  html.pg-ingreso .creds .v:empty{display:none}
  /* aviso con lo que responde el servidor (ingreso, registro, recuperación) */
  html.pg-ingreso .apiaviso{margin:0 0 12px;padding:9px 12px;border-radius:8px;
    font-size:12.5px;line-height:1.45;position:relative;overflow:hidden;
    transition:opacity .28s ease;
    background:rgba(220,60,50,.12);border:1px solid rgba(220,60,50,.35);color:#ffd9d5}
  html.pg-ingreso .apiaviso--ok{background:rgba(45,170,95,.14);
    border-color:rgba(45,170,95,.40);color:#c8f0d6}
  /* los avisos se van solos a los AVISO_SEGUNDOS de config.php —los errores y
     también los de acierto de Registro y Recuperar—: esto es el desvanecido y
     la barrita que se vacía, para que se vea venir */
  html.pg-ingreso .apiaviso--yendo{opacity:0}
  html.pg-ingreso .apiaviso__barra{position:absolute;left:0;bottom:0;
    height:2px;width:100%;background:rgba(255,150,140,.75);
    transform-origin:left center;
    animation-name:apiaviso-barra;animation-timing-function:linear;
    animation-fill-mode:forwards}
  /* en un mensaje de acierto la barrita va en verde: una línea roja bajo un
     recuadro verde se lee como que algo salió mal */
  html.pg-ingreso .apiaviso--ok .apiaviso__barra{background:rgba(150,230,175,.75)}
  @keyframes apiaviso-barra{from{transform:scaleX(1)}to{transform:scaleX(0)}}

  /* ===== DERECHA ===== */
  html.pg-ingreso .panel{flex:1 1 46%;background-color:#0A2554;background-color:var(--navy);
    background-image:radial-gradient(circle at 70% 20%,rgba(66,146,195,.30) 0%,transparent 58%);
    display:flex;flex-direction:column;padding:28px 40px 30px;color:#fff}
  html.pg-ingreso .top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
  html.pg-ingreso .compliance{display:inline-flex;align-items:center;gap:6px;font-family:'IBM Plex Mono',monospace;
    font-size:10.5px;letter-spacing:.03em;color:#B9C7DA;background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.18);border-radius:20px;padding:5px 11px;white-space:nowrap}
  html.pg-ingreso .compliance svg{flex:none;width:11px;height:11px;stroke:#7FB6DC;stroke-width:2.4;fill:none}
  html.pg-ingreso .lang{appearance:none;border:1px solid rgba(255,255,255,.18);border-radius:6px;
    padding:7px 30px 7px 11px;font:500 13px 'Inter';color:#B9C7DA;cursor:pointer;
    background:rgba(255,255,255,.05) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23B9C7DA' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 10px center}
  html.pg-ingreso .lang option{color:#16233B}

  html.pg-ingreso .wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:18px 0}
  html.pg-ingreso .box{width:100%;max-width:380px}

  html.pg-ingreso .tabs{display:flex;gap:4px;border-bottom:1px solid rgba(255,255,255,.14);margin-bottom:26px}
  html.pg-ingreso .tab{flex:1;background:none;border:0;cursor:pointer;padding:11px 4px 12px;position:relative;
    font:600 12px 'Inter';letter-spacing:.09em;text-transform:uppercase;color:#8397B2;transition:color .16s}
  html.pg-ingreso .tab:hover{color:#C6D6E8}
  html.pg-ingreso .tab[aria-selected="true"]{color:#fff}
  html.pg-ingreso .tab[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;
    height:2px;background:#4292C3;background:var(--blue);border-radius:2px}
  html.pg-ingreso .tab:focus-visible{outline:2px solid #4292C3;outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}

  html.pg-ingreso .pane{display:none}
  html.pg-ingreso .pane.on{display:block;animation:fade .22s ease}
  @keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

  html.pg-ingreso .lead{font-size:14px;color:#93A5BE;margin-bottom:24px;line-height:1.5}
  html.pg-ingreso .f{margin-bottom:16px}
  html.pg-ingreso .f label{display:block;font-size:13px;font-weight:500;margin-bottom:7px;color:#C6D3E3}
  html.pg-ingreso .f input{width:100%;padding:12px 13px;border:1px solid rgba(255,255,255,.16);border-radius:7px;
    background:rgba(255,255,255,.06);color:#fff;font:400 14.5px 'Inter';transition:.15s}
  html.pg-ingreso .f input::placeholder{color:#6E809A}
  html.pg-ingreso .f input:focus{outline:none;border-color:#4292C3;border-color:var(--blue);
    box-shadow:0 0 0 3px rgba(66,146,195,.20);background:rgba(255,255,255,.10)}

  /* validacion de campos obligatorios */
  html.pg-ingreso .f .err{display:flex;align-items:center;gap:6px;margin:7px 0 0;
    font-size:12.5px;line-height:1.4;color:#F2A0A0}
  html.pg-ingreso .f .err[hidden]{display:none}
  html.pg-ingreso .f .err span[hidden]{display:none}
  html.pg-ingreso .f .err svg{width:14px;height:14px;flex:none;fill:none;stroke:#F2A0A0;stroke-width:1.8;
    stroke-linecap:round}
  html.pg-ingreso .f.bad input{border-color:#D9645E;background:rgba(217,100,94,.10)}
  html.pg-ingreso .f.bad input:focus{border-color:#D9645E;box-shadow:0 0 0 3px rgba(217,100,94,.22)}

  html.pg-ingreso .row{display:flex;justify-content:space-between;align-items:center;margin:4px 0 20px}
  html.pg-ingreso .ck{display:flex;align-items:center;gap:7px;font-size:13px;color:#93A5BE;cursor:pointer}
  html.pg-ingreso .ck input{accent-color:#4292C3;accent-color:var(--blue);width:15px;height:15px}
  html.pg-ingreso .lk{font-size:13px;color:#7FB6DC;font-weight:500;text-decoration:none;background:none;
    border:0;cursor:pointer;font-family:'Inter'}
  html.pg-ingreso .lk:hover{text-decoration:underline}

  html.pg-ingreso .btn{width:100%;padding:13px;border:0;border-radius:7px;background:#4292C3;background:var(--blue);
    color:#052042;font:600 14.5px 'Inter';cursor:pointer;transition:.15s;
    box-shadow:0 6px 18px -6px rgba(66,146,195,.55)}
  html.pg-ingreso .btn:hover{filter:brightness(1.08)}
  html.pg-ingreso .btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
  html.pg-ingreso .btn.mt{margin-top:8px}

  html.pg-ingreso .note{font-size:12.5px;color:#7E90AA;margin-top:16px;text-align:center;line-height:1.5}
  html.pg-ingreso .foot{display:flex;justify-content:space-between;font-size:12px;color:#6E809A;padding-top:18px}
  html.pg-ingreso .foot button.lk2{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
  html.pg-ingreso .foot button.lk2:hover{color:#9FB0C7}

  /* ===== TERMINOS DE USO (modal) ===== */
  html.pg-ingreso .tos-overlay{position:fixed;inset:0;background:rgba(10,37,84,.55);display:none;
    align-items:center;justify-content:center;padding:24px;z-index:100}
  html.pg-ingreso .tos-overlay.on{display:flex}
  html.pg-ingreso .tos-modal{background:#fff;border-radius:12px;max-width:720px;width:100%;max-height:85vh;
    display:flex;flex-direction:column;box-shadow:0 20px 60px -20px rgba(10,37,84,.4)}
  html.pg-ingreso .tos-head{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;
    border-bottom:1px solid #DCE3EC;
    border-bottom:1px solid var(--line);flex:none}
  html.pg-ingreso .tos-head span{font:600 15px 'Inter';color:#0A2554;color:var(--navy)}
  html.pg-ingreso .tos-close{background:none;border:0;font-size:22px;line-height:1;color:#69748A;color:var(--muted);cursor:pointer;padding:2px 6px}
  html.pg-ingreso .tos-close:hover{color:#16233B;color:var(--ink)}
  html.pg-ingreso .tos-body{padding:20px 22px 26px;overflow-y:auto;color:#16233B;color:var(--ink);font-size:13.5px;line-height:1.6}
  html.pg-ingreso .tos-body h3{font-size:14.5px;color:#0A2554;color:var(--navy);margin:20px 0 8px}
  html.pg-ingreso .tos-body h3:first-child{margin-top:0}
  html.pg-ingreso .tos-body h4{font-size:13px;color:#357DAB;color:var(--blue-dk);margin:14px 0 6px}
  html.pg-ingreso .tos-body p{margin-bottom:10px}
  html.pg-ingreso .tos-body ul{margin:0 0 10px 20px}
  html.pg-ingreso .tos-body li{margin-bottom:5px}
  html.pg-ingreso .tos-body .tos-title{font:700 15.5px 'Inter';color:#0A2554;color:var(--navy);margin-bottom:14px}
  html.pg-ingreso .tos-body .tos-ack{margin-top:18px;padding-top:14px;border-top:1px solid #DCE3EC;border-top:1px solid var(--line);font-weight:500}
  @media (max-width:520px){ html.pg-ingreso .tos-modal{max-height:92vh} html.pg-ingreso .tos-body{padding:16px 16px 20px} }

  /* ===== RESPONSIVE ===== */
  @media (max-width:1050px){
    html.pg-ingreso .brand{padding:40px 40px}
    html.pg-ingreso .panel{padding:26px 32px 28px}
  }
  @media (max-width:900px){
    html.pg-ingreso body{background:#fff;display:block}
    html.pg-ingreso .shell{flex-direction:column;min-height:100dvh;max-width:none;box-shadow:none}
    html.pg-ingreso .panel{order:1}
    html.pg-ingreso .brand{order:2;flex:none;padding:26px 22px 24px;border-right:0;border-top:1px solid #DCE3EC;border-top:1px solid var(--line);
      border-bottom:0;justify-content:flex-start;gap:18px}
    html.pg-ingreso .scale{display:none}
    html.pg-ingreso .logo{margin-left:0;padding-bottom:16px}
    html.pg-ingreso .logo img{width:min(230px,72%)}
    html.pg-ingreso .copy{margin-left:0;max-width:100%;text-align:center}
    html.pg-ingreso .eyebrow{margin-bottom:10px}
    html.pg-ingreso .copy h1{font-size:clamp(21px,5.6vw,28px);margin-bottom:16px;text-wrap:balance}
    html.pg-ingreso .feats{max-width:380px;margin:0 auto 16px;text-align:left}
    html.pg-ingreso .feats li{font-size:14px;margin-bottom:9px}
    html.pg-ingreso .chart-card{max-width:380px;margin:0 auto 18px}
    html.pg-ingreso .hilite{border-left:0;border-top:1px solid #DCE3EC;border-top:1px solid var(--line);padding:14px 0 0;
      margin:0 auto;max-width:400px;text-align:center}
    html.pg-ingreso .hilite p{font-size:16px}
    html.pg-ingreso .creds{margin-left:0;gap:14px 22px;flex-wrap:wrap;justify-content:center;padding-top:16px}
    html.pg-ingreso .creds .k{font-size:12px}
    html.pg-ingreso .creds .v{font-size:10.5px}
    html.pg-ingreso .panel{flex:1;padding:22px 22px 26px;
      background-image:radial-gradient(circle at 50% 0%,rgba(66,146,195,.28) 0%,transparent 62%)}
    html.pg-ingreso .box{max-width:420px}
    html.pg-ingreso .wrap{padding:14px 0}
  }
  @media (max-width:520px){
    html.pg-ingreso .brand{padding:22px 18px 20px;gap:14px}
    html.pg-ingreso .logo img{width:min(200px,74%)}
    html.pg-ingreso .copy h1{font-size:clamp(20px,6.2vw,25px)}
    html.pg-ingreso .feats li{font-size:13.5px;gap:9px;margin-bottom:8px}
    html.pg-ingreso .feats svg{width:14px;height:14px}
    html.pg-ingreso .hilite p{font-size:15px}
    html.pg-ingreso .creds{gap:12px 18px}
    html.pg-ingreso .panel{padding:22px 18px 24px}
    html.pg-ingreso .tab{font-size:11px;letter-spacing:.06em;padding:11px 2px 12px}
    html.pg-ingreso .lead{margin-bottom:20px;font-size:13.5px}
    html.pg-ingreso .f input{font-size:16px;padding:13px}
    html.pg-ingreso .btn{padding:14px;font-size:15px}
    html.pg-ingreso .row{flex-wrap:wrap;gap:10px}
  }
  @media (max-width:400px){ html.pg-ingreso .chart-card{display:none} }
  @media (max-height:640px) and (max-width:900px){
    html.pg-ingreso .feats{display:none}
    html.pg-ingreso .chart-card{display:none}
    html.pg-ingreso .brand{gap:10px;padding:16px 18px}
  }

/* ===== Respaldo SOLO para IE10/11 (los navegadores modernos ignoran este bloque) =====
   IE11 no soporta la propiedad gap en flexbox: se recrea con margenes. */
@media all and (-ms-high-contrast:none), (-ms-high-contrast:active){
  html.pg-ingreso .feats li    > * + *{margin-left:11px}
  html.pg-ingreso .chart-head  > * + *{margin-left:8px}
  html.pg-ingreso .chart-badge > * + *{margin-left:4px}
  html.pg-ingreso .creds       > * + *{margin-left:32px}
  html.pg-ingreso .top         > * + *{margin-left:12px}
  html.pg-ingreso .compliance  > * + *{margin-left:6px}
  html.pg-ingreso .tabs        > * + *{margin-left:4px}
  html.pg-ingreso .f .err      > * + *{margin-left:6px}
  html.pg-ingreso .ck          > * + *{margin-left:7px}
  html.pg-ingreso .brand       > * + *{margin-left:18px}
  html.pg-ingreso .row         > * + *{margin-left:10px}
}


/* =============================================================================
   3 · EL PORTAL · principal.php
   -----------------------------------------------------------------------------
   Todas las pantallas del portal del cliente.
   Origen: assets/css/portal.css
   ============================================================================= */
/* =============================================================================
   PORTAL DE SERVICIO AL CLIENTE · ELICROM  —  hoja de estilo
   -----------------------------------------------------------------------------
   Ancho de la zona central: 1200 px (.wrap y .topbar__in van siempre iguales,
   para que el contenido quede alineado con la barra superior).
   ============================================================================= */

/* los menús ocultados por PARAMS.menus llevan el atributo [hidden]; hace falta
   forzarlo porque varias reglas de más abajo usan display:flex */
html.pg-portal [hidden]{display:none !important}

  html.pg-portal{
    --navy:#0A2554; --navy-2:#153C6E; --navy-3:#10356A;
    --blue:#4292C3; --blue-050:#EAF3F9; --blue-200:#C3DFEE; --blue-600:#357DAB;
    --green:#1DA851; --green-050:#E8F7EE; --green-200:#BFE6CD;
    --red:#C23B33;  --red-050:#FBECEB;  --red-200:#F0C6C2;
    --amber:#C88A16; --amber-050:#FBF1DD;
    --ink:#0F1D33; --muted:#64748B; --line:#DDE4EC; --soft:#EDF2F7;
    --paper:#F2F7FB; --tint:#F5F9FC; --tint-2:#E8F1F8; --white:#fff;
    --display:'Space Grotesk',system-ui,sans-serif;
    --body:'Inter',system-ui,sans-serif;
    --mono:'Roboto Mono',ui-monospace,monospace;
    --r:10px; --sh:0 1px 2px rgba(10,37,84,.05),0 10px 28px -16px rgba(10,37,84,.30);
  }
  /* MARCA SISTAGROSA (2026-10-23): clientes con clientes.id_empresaeli = 2 (`marca` de la API,
     aplicarMarca() en config.js). La barra pasa al azul del logo y el acento al verde del logo;
     los colores de ESTADO (verde, ámbar, rojo) no cambian: significan lo mismo en las dos marcas. */
  html.pg-portal.marca-sistagrosa{
    --navy:#192744; --navy-2:#2A3D66; --navy-3:#1F3053;
    --blue:#49B68C; --blue-050:#EAF6F1; --blue-200:#BFE6D6; --blue-600:#2A7F5E;
  }
  /* los azules claros escritos a mano (no con variable) que se ven sobre la barra y el chat */
  html.pg-portal.marca-sistagrosa .mainmenu a[aria-current="page"]{color:#8FD9BC;
    background:rgba(73,182,140,.16);box-shadow:inset 0 0 0 1px rgba(143,217,188,.35)}
  html.pg-portal.marca-sistagrosa .tabs button[aria-current="page"] svg,
  html.pg-portal.marca-sistagrosa .msg--eli .ava{color:#8FD9BC}
  html.pg-portal.marca-sistagrosa body::before{
    background:repeating-linear-gradient(180deg, transparent 0 31px, rgba(73,182,140,.55) 31px 32px),
               linear-gradient(180deg,#fff,#fff)}
  html.pg-portal *{box-sizing:border-box}
  /* PIE SIEMPRE ABAJO
     La página es una columna que ocupa como mínimo el alto de la ventana, y el
     contenido central se queda con todo el espacio sobrante. Con una tabla
     corta —o vacía— el pie baja hasta el borde inferior en vez de subirse;
     con una tabla larga se comporta como siempre y se va con el scroll.
     Las capas fijas (regla del margen, diálogos, panel de chat, avisos) están
     fuera del flujo, así que no entran en esta columna. */
  html.pg-portal body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;position:relative;
    display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
  /* margen técnico tipo papel milimetrado, igual que en la ficha */
  html.pg-portal body::before{
    content:"";position:fixed;left:0;top:0;bottom:0;width:18px;z-index:2;pointer-events:none;
    background:
      repeating-linear-gradient(180deg, transparent 0 31px, rgba(66,146,195,.55) 31px 32px),
      linear-gradient(180deg,#fff,#fff);
    border-right:1px solid var(--line)
  }
  html.pg-portal body::after{
    content:"";position:fixed;left:0;top:0;bottom:0;width:6px;z-index:3;pointer-events:none;
    background:repeating-linear-gradient(180deg, transparent 0 95px, var(--navy) 95px 97px)
  }
  /* `flex:1 0 auto` = crece para empujar el pie, pero nunca se encoge */
  html.pg-portal .wrap{max-width:1200px;margin:0 auto;padding:0 20px 40px;width:100%;flex:1 0 auto}
  html.pg-portal :focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}

  /* ---------- BARRA SUPERIOR (idéntica a la ficha) ---------- */
  html.pg-portal .topbar{background:linear-gradient(120deg,var(--navy) 0%,var(--navy-3) 60%,var(--navy-2) 100%);padding:18px 20px;flex:0 0 auto}
  html.pg-portal .topbar__in{max-width:1200px;margin:0 auto;position:relative;display:flex;align-items:center;justify-content:space-between;gap:20px}
  html.pg-portal .topbar__r{display:flex;align-items:center;gap:14px}
  html.pg-portal .topbar img.logo{height:48px;display:block}
  html.pg-portal .mainmenu{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    display:flex;justify-content:center;align-items:center;gap:2px;white-space:nowrap}
  html.pg-portal .mainmenu a{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:0;
    color:#9FB6D6;text-decoration:none;padding:8px 10px;border-radius:8px;transition:.15s}
  html.pg-portal .mainmenu a:hover{color:#fff}
  html.pg-portal .mainmenu a[aria-current="page"]{color:#7FC0E4;font-weight:700;
    background:rgba(66,146,195,.16);box-shadow:inset 0 0 0 1px rgba(127,192,228,.35);
    text-shadow:0 0 14px rgba(127,192,228,.45)}
  /* con 3 servicios contratados: cada recuadro en dos líneas para no invadir los controles */
  html.pg-portal .mainmenu--3 a{white-space:normal;text-align:center;line-height:1.25;
    font-size:11.5px;padding:5px 11px}
  html.pg-portal .mainmenu--3 a br{display:block}
  /* con 4 servicios contratados (Automatización incluida): un punto menos de
     cuerpo para que el bloque siga cabiendo entre logotipo y controles */
  /* con 4 servicios el centrado absoluto invade los controles de la derecha:
     el menú entra en el flujo y se reparte el espacio libre sin solaparse */
  html.pg-portal .mainmenu--4{position:static;transform:none;flex:1 1 auto;min-width:0;
    justify-content:center;margin:0 6px}
  html.pg-portal .mainmenu--4 a{font-size:11px;padding:5px 8px}
  @media (max-width:1240px){
    html.pg-portal .mainmenu--4 a{font-size:10.5px;padding:4px 6px}
  }
  /* con 4 servicios el quiebre a dos filas se adelanta: el menú pasa debajo
     del logotipo y de los controles en vez de encimarse con ellos */
  @media (max-width:1180px){
    html.pg-portal .topbar__in--4{flex-wrap:wrap;row-gap:8px}
    html.pg-portal .topbar__in--4 img.logo{order:1}
    html.pg-portal .topbar__in--4 .topbar__r{order:2;margin-left:auto}
    html.pg-portal .topbar__in--4 .mainmenu--4{order:3;flex:1 1 100%;width:100%;margin:0;
      flex-wrap:wrap;white-space:normal}
  }

  /* botón de aplicaciones (cuadro con puntitos) */
  html.pg-portal .apps{position:relative}
  html.pg-portal .apps__btn{width:36px;height:36px;display:grid;place-items:center;cursor:pointer;
    background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);border-radius:8px;
    color:#dfe8f4;transition:.12s}
  html.pg-portal .apps__btn:hover{background:rgba(255,255,255,.16);color:#fff}
  html.pg-portal .apps__btn svg{display:block}
  html.pg-portal .apps__menu{position:absolute;top:calc(100% + 8px);right:0;width:310px;background:#fff;
    border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 44px rgba(10,37,84,.28);
    padding:10px;display:none;z-index:60}
  html.pg-portal .apps[aria-open="true"] .apps__menu{display:block}
  html.pg-portal .apps__list{display:flex;flex-direction:column;gap:2px}
  html.pg-portal .apps__item{display:flex;align-items:center;gap:12px;
    font-family:var(--body);font-size:12.5px;font-weight:500;line-height:1.35;color:var(--ink);
    text-decoration:none;border-radius:9px;padding:8px 10px;cursor:pointer;transition:.13s}
  html.pg-portal .apps__item:hover{background:var(--blue-050);color:var(--navy);transform:translateX(2px)}
  html.pg-portal .apps__item .tico{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:0 0 30px;
    background:var(--tint-2);color:var(--blue-600);transition:.13s}
  html.pg-portal .apps__item:hover .tico{background:var(--blue-200);color:var(--navy)}
  html.pg-portal .apps__foot{margin-top:6px;border-top:1px solid var(--soft);padding-top:6px}
  html.pg-portal .apps__foot a{display:flex;align-items:center;gap:12px;
    font-family:var(--body);font-size:12.5px;font-weight:600;color:var(--red);text-decoration:none;
    border-radius:9px;padding:8px 10px;transition:.13s}
  html.pg-portal .apps__foot a:hover{background:var(--red-050)}
  html.pg-portal .apps__foot a .tico{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:0 0 30px;
    background:var(--red-050);color:var(--red)}

  /* ---------- ENTRENAMIENTO (galería de videos) ---------- */
  html.pg-portal .train-back{display:inline-flex;align-items:center;gap:8px;margin-top:22px;
    font-family:var(--body);font-size:12.5px;font-weight:600;color:var(--blue-600);
    background:transparent;border:0;cursor:pointer;padding:7px 11px;border-radius:8px}
  html.pg-portal .train-back:hover{background:var(--blue-050)}
  html.pg-portal .train-back::before{content:"";width:8px;height:8px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:rotate(45deg)}
  html.pg-portal .vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;padding:16px 18px 20px}
  html.pg-portal .vcard{border:1px solid var(--line);border-radius:12px;overflow:hidden;cursor:pointer;
    background:var(--white);transition:.15s;text-align:left}
  html.pg-portal .vcard:hover{border-color:var(--blue);box-shadow:0 10px 24px -12px rgba(10,37,84,.35);transform:translateY(-2px)}
  html.pg-portal .vthumb{aspect-ratio:16/9;background:linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 55%,var(--blue-600) 130%);
    display:grid;place-items:center;position:relative}
  html.pg-portal .vthumb .play{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.92);
    display:grid;place-items:center;transition:.15s;box-shadow:0 6px 18px rgba(10,37,84,.4)}
  html.pg-portal .vcard:hover .play{transform:scale(1.1);background:#fff}
  html.pg-portal .vthumb .play::after{content:"";margin-left:3px;border-left:14px solid var(--navy);
    border-top:9px solid transparent;border-bottom:9px solid transparent}
  html.pg-portal .vthumb .dur{position:absolute;right:8px;bottom:8px;font-family:var(--mono);font-size:9.5px;
    color:#fff;background:rgba(10,37,84,.75);border-radius:5px;padding:2px 7px}
  html.pg-portal .vbody{padding:11px 13px 13px}
  html.pg-portal .vbody b{display:block;font-family:var(--display);font-size:12.5px;font-weight:700;color:var(--navy);
    letter-spacing:.02em;text-transform:uppercase;line-height:1.35}
  html.pg-portal .vbody span{display:block;font-family:var(--mono);font-size:9.5px;color:var(--muted);margin-top:5px}
  html.pg-portal .vempty-note{padding:0 18px 16px;font-family:var(--mono);font-size:10px;color:var(--muted)}

  /* ---------- TRAZABILIDAD DE CERTIFICADOS ---------- */
  /* cadena de trazabilidad (banda superior explicativa) */
  html.pg-portal .tz-chain{display:flex;align-items:stretch;gap:0;flex-wrap:wrap;
    padding:16px 18px;background:linear-gradient(135deg,var(--blue-050) 0%,#fff 70%);
    border-bottom:1px solid var(--line)}
  html.pg-portal .tz-node{flex:1 1 150px;min-width:0;position:relative;padding:0 16px 0 0}
  html.pg-portal .tz-node:not(:last-child)::after{content:"";position:absolute;right:5px;top:50%;transform:translateY(-50%) rotate(45deg);
    width:8px;height:8px;border-top:2px solid var(--blue);border-right:2px solid var(--blue);opacity:.7}
  html.pg-portal .tz-node .lv{font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-600)}
  html.pg-portal .tz-node b{display:block;font-family:var(--display);font-size:12.5px;font-weight:700;color:var(--navy);line-height:1.25;margin-top:3px}
  html.pg-portal .tz-node span{display:block;font-size:10.5px;color:var(--muted);line-height:1.35;margin-top:2px}
  html.pg-portal .tz-node--you b{color:var(--blue-600)}
  html.pg-portal .tz-node--nist b{color:#0F7A3C}

  /* búsqueda única: el cliente llega con el código impreso en su certificado */
  html.pg-portal .tz-buscar{padding:14px 18px;border-bottom:1px solid var(--line);background:var(--tint)}
  html.pg-portal .tz-buscar label{display:block;font-size:12.5px;color:var(--muted);line-height:1.5;margin-bottom:10px}
  html.pg-portal .tz-buscar label b{color:var(--navy)}
  html.pg-portal .tz-buscar__row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  html.pg-portal .tz-buscar__ic{position:absolute;margin-left:12px;color:var(--blue-600);pointer-events:none;display:flex}
  html.pg-portal .tz-buscar input{flex:1 1 320px;min-width:0;font-family:var(--mono);font-size:13px;color:var(--navy);
    background:#fff;border:1px solid var(--line);border-radius:10px;padding:11px 13px 11px 38px;letter-spacing:.03em}
  html.pg-portal .tz-buscar input::placeholder{color:#9AA8BC;letter-spacing:0}
  html.pg-portal .tz-buscar input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-050)}

  /* cabecera de resultados y patrón elegido */
  html.pg-portal .tz-cab{padding:10px 18px;border-bottom:1px solid var(--soft);background:var(--tint-2);
    font-size:11.5px;color:#2B4A78;line-height:1.4}
  html.pg-portal .tz-cab b{font-family:var(--mono);color:var(--navy)}
  html.pg-portal .tz-sel{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 18px;
    border-bottom:1px solid var(--line);background:var(--blue-050)}
  html.pg-portal .tz-sel__id b{display:block;font-family:var(--mono);font-size:15px;font-weight:600;color:var(--navy);letter-spacing:.03em}
  html.pg-portal .tz-sel__id span{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
  html.pg-portal .tz-sel__n{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--muted)}
  html.pg-portal .tz-volver2{display:inline-flex;align-items:center;gap:7px;font-family:var(--body);font-size:11.5px;font-weight:600;
    color:var(--blue-600);background:var(--white);border:1px solid var(--line);border-radius:8px;
    padding:7px 12px;cursor:pointer}
  html.pg-portal .tz-volver2::before{content:"";width:6px;height:6px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
  html.pg-portal .tz-volver2:hover{border-color:var(--blue)}

  html.pg-portal .tz-grp{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
    background:var(--tint);padding:6px 13px;border-bottom:1px solid var(--soft);position:sticky;top:0;z-index:1}
  html.pg-portal .tz-item{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
    background:transparent;border:0;border-bottom:1px solid var(--soft);border-left:3px solid transparent;
    padding:9px 12px;cursor:pointer;transition:.12s;font-family:var(--body)}
  html.pg-portal .tz-item:hover{background:var(--blue-050)}
  html.pg-portal .tz-item[aria-selected="true"]{background:var(--blue-050);border-left-color:var(--navy)}
  html.pg-portal .tz-item .cod{font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--navy);letter-spacing:.02em;white-space:nowrap}
  html.pg-portal .tz-item .des{font-size:10.5px;color:var(--muted);line-height:1.3;margin-top:1px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  html.pg-portal .tz-item .txt{min-width:0;flex:1}
  html.pg-portal .tz-item .n{font-family:var(--mono);font-size:9.5px;color:var(--muted);background:var(--soft);
    border-radius:999px;padding:2px 7px;white-space:nowrap}
  html.pg-portal .tz-item[aria-selected="true"] .n{background:var(--blue-200);color:var(--navy)}
  html.pg-portal .tz-item .go{width:7px;height:7px;flex:0 0 7px;border-top:1.8px solid #9AA8BC;border-right:1.8px solid #9AA8BC;
    transform:rotate(45deg)}
  html.pg-portal .tz-item[aria-selected="true"] .go{border-color:var(--navy)}

  /* fila de certificado (columna 3) */
  html.pg-portal .tz-cert{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--soft);
    border-left:3px solid transparent}
  html.pg-portal .tz-cert:hover{background:#FBFCFD}
  html.pg-portal .tz-cert__f{font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--navy);white-space:nowrap;flex:0 0 84px}
  html.pg-portal .tz-cert__f small{display:block;font-size:9px;font-weight:400;color:var(--muted);letter-spacing:.04em}
  html.pg-portal .tz-cert__m{min-width:0;flex:1}
  html.pg-portal .tz-cert__m b{display:block;font-family:var(--mono);font-size:11px;font-weight:600;color:var(--ink);letter-spacing:.02em}
  html.pg-portal .tz-cert__m span{display:block;font-size:10.5px;color:var(--muted);line-height:1.35;margin-top:1px}
  html.pg-portal .tz-cert__v{font-family:var(--mono);font-size:9.5px;color:var(--muted);white-space:nowrap;text-align:right}
  html.pg-portal .tz-cert .dlgroup{flex:0 0 auto}
  html.pg-portal .tz-cert--vig{border-left-color:var(--green);background:var(--green-050)}
  html.pg-portal .tz-cert--vig:hover{background:var(--green-050)}
  html.pg-portal .tz-cert__tag{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:8.5px;font-weight:600;
    letter-spacing:.06em;text-transform:uppercase;color:#0F7A3C;background:#fff;border:1px solid var(--green-200);
    border-radius:999px;padding:2px 8px;margin-top:4px}

  /* estados vacíos con la instrucción del paso */
  html.pg-portal .tz-empty{padding:34px 20px;text-align:center;color:var(--muted)}
  html.pg-portal .tz-empty .ico{width:42px;height:42px;margin:0 auto 12px;border-radius:12px;background:var(--tint-2);
    color:var(--blue-600);display:grid;place-items:center}
  /* sólo el <b> hijo directo es el título: los <b> dentro del párrafo deben
     seguir en línea, o el texto se parte en trozos. */
  html.pg-portal .tz-empty > b{display:block;font-family:var(--display);font-size:12.5px;color:var(--navy);margin-bottom:5px}
  html.pg-portal .tz-empty p b{font-family:var(--mono);font-size:10.5px;color:var(--navy);letter-spacing:.02em}
  html.pg-portal .tz-empty p{font-size:11px;line-height:1.5;margin:0 auto;max-width:280px;color:var(--muted)}

  /* botón de retroceso entre columnas (solo móvil) */
  html.pg-portal .tz-volver{display:none;align-items:center;gap:7px;width:100%;
    font-family:var(--body);font-size:11.5px;font-weight:600;color:var(--blue-600);
    background:var(--blue-050);border:0;border-bottom:1px solid var(--line);cursor:pointer;padding:9px 13px;text-align:left}
  html.pg-portal .tz-volver::before{content:"";width:7px;height:7px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:rotate(45deg)}

  /* pie de la ventana */
  html.pg-portal .tz-foot{padding:11px 18px;border-top:1px solid var(--line);background:var(--tint);
    font-family:var(--mono);font-size:9.5px;color:var(--muted);line-height:1.5}

  /* modal "cómo funciona" */
  html.pg-portal .modal__box--tz{max-width:620px;border-top-color:var(--navy)}
  html.pg-portal .tzh__pasos{display:flex;flex-direction:column;gap:11px;margin:16px 0 4px}
  html.pg-portal .tzh__paso{display:flex;gap:12px;align-items:flex-start}
  html.pg-portal .tzh__paso .n{width:24px;height:24px;flex:0 0 24px;border-radius:50%;background:var(--navy);color:#fff;
    display:grid;place-items:center;font-family:var(--mono);font-size:11px;font-weight:600}
  html.pg-portal .tzh__paso b{display:block;font-family:var(--display);font-size:13px;color:var(--navy);margin-bottom:2px}
  html.pg-portal .tzh__paso p{font-size:12px;color:var(--muted);line-height:1.5;margin:0}
  html.pg-portal .tzh__cod{background:var(--tint);border:1px solid var(--line);border-radius:10px;padding:14px;margin-top:18px}
  html.pg-portal .tzh__cod .tt{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
  html.pg-portal .tzh__seg{display:flex;gap:6px;align-items:flex-start;flex-wrap:wrap}
  html.pg-portal .tzh__seg .s{flex:1 1 110px;border-radius:8px;padding:8px 10px;text-align:center;border:1px solid}
  html.pg-portal .tzh__seg .s .v{font-family:var(--mono);font-size:15px;font-weight:600;letter-spacing:.06em}
  html.pg-portal .tzh__seg .s .d{font-size:10px;line-height:1.35;margin-top:4px}
  html.pg-portal .tzh__seg .s1{background:var(--blue-050);border-color:var(--blue-200);color:#2B6A92}
  html.pg-portal .tzh__seg .s2{background:var(--amber-050);border-color:#EFD9A6;color:#8E6210}
  html.pg-portal .tzh__seg .s3{background:var(--green-050);border-color:var(--green-200);color:#0F7A3C}
  html.pg-portal .tzh__seg .dot{align-self:center;font-family:var(--mono);font-size:16px;color:var(--muted);padding:0 1px}
  html.pg-portal .tzh__ej{font-family:var(--mono);font-size:11px;color:var(--navy);margin-top:11px;line-height:1.6}
  html.pg-portal .tzh__ej i{color:var(--muted);font-style:normal}

  /* ---------- QUEJAS A ELICROM ---------- */
  html.pg-portal .qz-intro{display:flex;gap:13px;align-items:flex-start;padding:15px 18px;
    background:linear-gradient(135deg,var(--blue-050) 0%,#fff 70%);border-bottom:1px solid var(--line)}
  html.pg-portal .qz-intro .qic{width:34px;height:34px;flex:0 0 34px;border-radius:10px;background:var(--white);
    border:1px solid var(--blue-200);color:var(--blue-600);display:grid;place-items:center}
  html.pg-portal .qz-intro p{margin:0;font-size:12px;color:var(--muted);line-height:1.55;max-width:900px}
  html.pg-portal .qz-intro p b{color:var(--navy)}
  html.pg-portal .qz-tip{display:flex;gap:9px;align-items:flex-start;margin:0;padding:11px 18px;
    background:var(--amber-050);border-bottom:1px solid #EFD9A6;font-size:11.5px;color:#8E6210;line-height:1.5}
  html.pg-portal .qz-tip svg{flex:0 0 auto;margin-top:1px}
  html.pg-portal .qz-tip a{color:#8E6210;font-weight:700;text-decoration:underline;cursor:pointer}

  html.pg-portal .qz-form{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:0}
  html.pg-portal .qz-main{padding:16px 18px 18px;min-width:0}
  html.pg-portal .qz-side{padding:16px 18px 18px;border-left:1px solid var(--line);background:var(--tint);min-width:0}
  html.pg-portal .qz-campo{margin-bottom:15px}
  html.pg-portal .qz-campo>label{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;
    color:var(--muted);margin-bottom:7px}
  html.pg-portal .qz-campo>label b{color:var(--red);font-weight:600}
  html.pg-portal .qz-campo .op{font-family:var(--body);font-size:10px;letter-spacing:0;text-transform:none;color:#9AA8BC}
  html.pg-portal .qz-in{width:100%;font-family:var(--body);font-size:13px;color:var(--ink);background:var(--white);
    border:1px solid var(--line);border-radius:9px;padding:9px 11px}
  html.pg-portal .qz-in:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-050)}
  html.pg-portal select.qz-in{appearance:none;cursor:pointer;padding-right:30px;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1 5 5 9 1' fill='none' stroke='%234292C3' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 11px center}
  html.pg-portal .qz-motivos{display:flex;flex-wrap:wrap;gap:7px}
  html.pg-portal .qz-motivo{font-family:var(--body);font-size:12px;font-weight:500;color:var(--ink);background:var(--white);
    border:1px solid var(--line);border-radius:999px;padding:7px 13px;cursor:pointer;transition:.12s}
  html.pg-portal .qz-motivo:hover{border-color:var(--blue);color:var(--blue-600)}
  html.pg-portal .qz-motivo[aria-pressed="true"]{background:var(--blue-050);border-color:var(--blue);color:var(--navy);font-weight:600}
  html.pg-portal .qz-txt{width:100%;min-height:150px;resize:vertical;font-family:var(--body);font-size:13px;line-height:1.55;
    color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:11px 12px;background:var(--white)}
  html.pg-portal .qz-txt:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-050)}
  html.pg-portal .qz-cnt{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9.5px;color:var(--muted);margin-top:6px}
  html.pg-portal .qz-adj{display:inline-flex;align-items:center;gap:8px;font-family:var(--body);font-size:11.5px;font-weight:600;
    color:var(--blue-600);background:var(--white);border:1px dashed var(--blue-200);border-radius:9px;
    padding:9px 13px;cursor:pointer;transition:.12s}
  html.pg-portal .qz-adj:hover{border-color:var(--blue);background:var(--blue-050)}
  html.pg-portal .qz-acts{display:flex;justify-content:flex-end;gap:10px;align-items:center;
    padding:13px 18px;border-top:1px solid var(--line);background:var(--tint)}
  html.pg-portal .qz-side .st{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
  html.pg-portal .qz-pasos{display:flex;flex-direction:column;gap:12px}
  html.pg-portal .qz-paso{display:flex;gap:10px;align-items:flex-start}
  html.pg-portal .qz-paso .n{width:20px;height:20px;flex:0 0 20px;border-radius:50%;background:var(--white);border:1px solid var(--blue-200);
    color:var(--blue-600);display:grid;place-items:center;font-family:var(--mono);font-size:9.5px;font-weight:600}
  html.pg-portal .qz-paso b{display:block;font-family:var(--display);font-size:11.5px;color:var(--navy);line-height:1.3}
  html.pg-portal .qz-paso span{display:block;font-size:10.5px;color:var(--muted);line-height:1.4;margin-top:2px}
  html.pg-portal .qz-conf{margin-top:16px;padding-top:13px;border-top:1px solid var(--line);
    font-size:10.5px;color:var(--muted);line-height:1.5}
  html.pg-portal .qz-conf b{color:var(--navy)}

  /* seguimiento de la queja (modal) */
  html.pg-portal .modal__box--qz{max-width:560px;border-top-color:var(--navy)}
  html.pg-portal .qzs__cab{background:var(--tint);border:1px solid var(--soft);border-radius:10px;padding:11px 13px;margin:14px 0 16px}
  html.pg-portal .qzs__cab .nro{font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--navy)}
  html.pg-portal .qzs__cab .dt{font-family:var(--mono);font-size:10px;color:var(--muted);margin-top:3px}
  html.pg-portal .qzs__tl{display:flex;flex-direction:column;gap:0;margin-top:4px}
  html.pg-portal .qzs__ev{display:flex;gap:12px;padding-bottom:16px;position:relative}
  html.pg-portal .qzs__ev:last-child{padding-bottom:0}
  html.pg-portal .qzs__ev::before{content:"";position:absolute;left:8px;top:18px;bottom:0;width:1px;background:var(--line)}
  html.pg-portal .qzs__ev:last-child::before{display:none}
  html.pg-portal .qzs__ev .pt{width:17px;height:17px;flex:0 0 17px;border-radius:50%;background:var(--white);
    border:2px solid var(--blue-200);margin-top:1px;z-index:1}
  html.pg-portal .qzs__ev.on .pt{border-color:var(--blue);background:var(--blue)}
  html.pg-portal .qzs__ev.fin .pt{border-color:var(--green);background:var(--green)}
  html.pg-portal .qzs__ev .cn{min-width:0;flex:1}
  html.pg-portal .qzs__ev .cn b{display:block;font-family:var(--display);font-size:12.5px;color:var(--navy)}
  html.pg-portal .qzs__ev .cn .fh{font-family:var(--mono);font-size:9.5px;color:var(--muted);margin-top:1px}
  html.pg-portal .qzs__ev .cn p{font-size:12px;color:var(--muted);line-height:1.5;margin:6px 0 0}

  /* ---------- CONTROL DE UBICACIONES ---------- */
  html.pg-portal .ub-intro{display:flex;gap:13px;align-items:flex-start;padding:15px 18px;
    background:linear-gradient(135deg,var(--blue-050) 0%,#fff 70%);border-bottom:1px solid var(--line)}
  html.pg-portal .ub-intro .qic{width:34px;height:34px;flex:0 0 34px;border-radius:10px;background:var(--white);
    border:1px solid var(--blue-200);color:var(--blue-600);display:grid;place-items:center}
  html.pg-portal .ub-intro p{margin:0;font-size:12px;color:var(--muted);line-height:1.55;max-width:900px}
  html.pg-portal .ub-intro p b{color:var(--navy)}

  html.pg-portal .ub-cols{display:grid;grid-template-columns:minmax(230px,300px) minmax(0,1fr)}
  html.pg-portal .ub-col{border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0}
  html.pg-portal .ub-col:last-child{border-right:0}
  html.pg-portal .ub-col__hd{padding:10px 14px;background:var(--tint-2);border-bottom:1px solid var(--line)}
  html.pg-portal .ub-col__hd .k{font-family:var(--mono);font-size:8.5px;letter-spacing:.11em;text-transform:uppercase;color:#2B4A78}
  html.pg-portal .ub-col__hd .t{font-family:var(--display);font-size:12.5px;font-weight:700;color:var(--navy);line-height:1.25;margin-top:2px}
  html.pg-portal .ub-col__hd .c{font-family:var(--mono);font-size:9.5px;color:var(--muted);margin-top:2px}
  html.pg-portal .ub-col__bd{overflow-y:auto;flex:1;min-height:0;max-height:470px}

  html.pg-portal .ub-dir{display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;background:transparent;
    border:0;border-bottom:1px solid var(--soft);border-left:3px solid transparent;
    padding:11px 13px;cursor:pointer;transition:.12s;font-family:var(--body)}
  html.pg-portal .ub-dir:hover{background:var(--blue-050)}
  html.pg-portal .ub-dir[aria-selected="true"]{background:var(--blue-050);border-left-color:var(--navy)}
  html.pg-portal .ub-dir .pin{width:22px;height:22px;flex:0 0 22px;border-radius:7px;background:var(--tint-2);color:var(--blue-600);
    display:grid;place-items:center;margin-top:1px}
  html.pg-portal .ub-dir[aria-selected="true"] .pin{background:var(--blue-200);color:var(--navy)}
  html.pg-portal .ub-dir .tx{min-width:0;flex:1}
  html.pg-portal .ub-dir .tx b{display:block;font-family:var(--body);font-size:11.5px;font-weight:600;color:var(--navy);line-height:1.35}
  html.pg-portal .ub-dir .tx span{display:block;font-family:var(--mono);font-size:9.5px;color:var(--muted);margin-top:3px}
  html.pg-portal .ub-dirnota{padding:12px 14px;font-size:10.5px;color:var(--muted);line-height:1.5;border-top:1px solid var(--soft)}
  html.pg-portal .ub-dirnota a{color:var(--blue-600);font-weight:600;text-decoration:none;cursor:pointer}
  html.pg-portal .ub-dirnota a:hover{text-decoration:underline}

  html.pg-portal .ub-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:11px 14px;
    border-bottom:1px solid var(--line);background:var(--tint)}
  html.pg-portal .ub-tools input[type="search"]{flex:1 1 200px;min-width:0;font-family:var(--body);font-size:12px;color:var(--ink);
    background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px 11px}
  html.pg-portal .ub-tools input[type="search"]:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-050)}

  html.pg-portal .ub-row{display:flex;align-items:center;gap:12px;padding:9px 14px;border-bottom:1px solid var(--soft)}
  html.pg-portal .ub-row:hover{background:#FBFCFD}
  html.pg-portal .ub-row .nom{flex:1;min-width:0;font-family:var(--body);font-size:12.5px;color:var(--ink);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html.pg-portal .ub-row .eqs{font-family:var(--mono);font-size:9.5px;color:var(--muted);background:var(--soft);
    border-radius:999px;padding:3px 9px;white-space:nowrap}
  html.pg-portal .ub-row .eqs.cero{background:var(--white);border:1px dashed var(--line);color:#9AA8BC}
  html.pg-portal .ub-row .acts{display:flex;gap:6px;flex:0 0 auto}
  html.pg-portal .ub-act{width:28px;height:28px;border-radius:7px;border:1px solid var(--line);background:var(--white);
    color:var(--muted);display:grid;place-items:center;cursor:pointer;transition:.12s}
  html.pg-portal .ub-act:hover{border-color:var(--blue);color:var(--blue-600);background:var(--blue-050)}
  html.pg-portal .ub-act--del:hover{border-color:var(--red);color:var(--red);background:var(--red-050)}
  html.pg-portal .ub-row.editando{background:var(--blue-050)}
  html.pg-portal .ub-row .edit{flex:1;min-width:0;font-family:var(--body);font-size:12.5px;color:var(--ink);
    border:1px solid var(--blue);border-radius:8px;padding:7px 10px;background:#fff}
  html.pg-portal .ub-row .edit:focus{outline:none;box-shadow:0 0 0 3px var(--blue-050)}
  html.pg-portal .ub-ok,html.pg-portal .ub-no{width:28px;height:28px;border-radius:7px;border:1px solid;display:grid;place-items:center;cursor:pointer}
  html.pg-portal .ub-ok{background:var(--green-050);border-color:var(--green-200);color:#0F7A3C}
  html.pg-portal .ub-ok:hover{background:var(--green);border-color:var(--green);color:#fff}
  html.pg-portal .ub-no{background:var(--red-050);border-color:var(--red-200);color:var(--red)}
  html.pg-portal .ub-no:hover{background:var(--red);border-color:var(--red);color:#fff}
  html.pg-portal .ub-nueva{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--green-050);
    border-bottom:1px solid var(--green-200)}
  html.pg-portal .ub-foot{padding:11px 18px;border-top:1px solid var(--line);background:var(--tint);
    font-family:var(--mono);font-size:9.5px;color:var(--muted);line-height:1.5}

  /* ---------- MATERIALES DE REFERENCIA ---------- */
  html.pg-portal .mr-intro{display:flex;gap:13px;align-items:flex-start;padding:15px 18px;
    background:linear-gradient(135deg,var(--blue-050) 0%,#fff 70%);border-bottom:1px solid var(--line)}
  html.pg-portal .mr-intro .qic{width:34px;height:34px;flex:0 0 34px;border-radius:10px;background:var(--white);
    border:1px solid var(--blue-200);color:var(--blue-600);display:grid;place-items:center}
  html.pg-portal .mr-intro p{margin:0;font-size:12px;color:var(--muted);line-height:1.55;max-width:900px}
  html.pg-portal .mr-intro p b{color:var(--navy)}

  html.pg-portal .mr-tabs{display:flex;gap:6px;padding:11px 18px;border-bottom:1px solid var(--line);background:var(--tint);flex-wrap:wrap}
  html.pg-portal .mr-tabs button{display:inline-flex;align-items:center;gap:8px;
    font-family:var(--display);font-size:12.5px;font-weight:600;color:var(--navy);
    background:var(--white);border:1px solid var(--line);border-radius:999px;cursor:pointer;
    padding:8px 15px;transition:.14s}
  html.pg-portal .mr-tabs button:hover{border-color:var(--blue);background:var(--blue-050)}
  html.pg-portal .mr-tabs button[aria-current="page"]{background:linear-gradient(120deg,var(--navy) 0%,var(--navy-2) 100%);
    color:#fff;border-color:var(--navy);box-shadow:0 6px 16px -9px rgba(10,37,84,.6)}
  html.pg-portal .mr-tabs button .cn{font-family:var(--mono);font-size:9.5px;background:var(--soft);color:var(--muted);
    border-radius:999px;padding:2px 7px}
  html.pg-portal .mr-tabs button[aria-current="page"] .cn{background:rgba(255,255,255,.18);color:#fff}
  html.pg-portal .mr-pane{display:none}
  html.pg-portal .mr-pane.show{display:block}

  html.pg-portal .mr-regla{display:flex;gap:9px;align-items:flex-start;margin:0;padding:11px 18px;
    background:var(--amber-050);border-bottom:1px solid #EFD9A6;font-size:11.5px;color:#8E6210;line-height:1.5}
  html.pg-portal .mr-regla svg{flex:0 0 auto;margin-top:1px}

  html.pg-portal .mr-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 270px}
  html.pg-portal .mr-bloque{padding:16px 18px 18px;border-right:1px solid var(--line);min-width:0}
  html.pg-portal .mr-bloque:last-child{border-right:0;background:var(--tint)}
  html.pg-portal .mr-bloque .st{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
    color:#2B4A78;margin-bottom:13px;padding-bottom:7px;border-bottom:1px solid var(--soft)}
  html.pg-portal .mr-campo{margin-bottom:13px}
  html.pg-portal .mr-campo>label{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;
    color:var(--muted);margin-bottom:6px}
  html.pg-portal .mr-campo>label b{color:var(--red);font-weight:600}
  html.pg-portal .mr-campo .op{font-family:var(--body);font-size:10px;letter-spacing:0;text-transform:none;color:#9AA8BC}
  html.pg-portal .mr-in{width:100%;font-family:var(--body);font-size:13px;color:var(--ink);background:var(--white);
    border:1px solid var(--line);border-radius:9px;padding:9px 11px}
  html.pg-portal .mr-in:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-050)}
  html.pg-portal .mr-in.mono{font-family:var(--mono);font-size:12px}
  html.pg-portal select.mr-in{appearance:none;cursor:pointer;padding-right:30px;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1 5 5 9 1' fill='none' stroke='%234292C3' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 11px center}
  html.pg-portal .mr-duo{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  html.pg-portal .mr-nota{font-size:10.5px;color:var(--muted);line-height:1.5;margin-top:-4px}
  html.pg-portal .mr-calc{background:var(--white);border:1px solid var(--blue-200);border-radius:10px;padding:11px 13px;margin-top:4px}
  html.pg-portal .mr-calc .k{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-600)}
  html.pg-portal .mr-calc .v{font-family:var(--display);font-size:15px;font-weight:700;color:var(--navy);margin-top:4px}
  html.pg-portal .mr-calc .d{font-size:10.5px;color:var(--muted);line-height:1.45;margin-top:4px}
  html.pg-portal .mr-acts{display:flex;justify-content:flex-end;gap:10px;align-items:center;
    padding:13px 18px;border-top:1px solid var(--line);background:var(--tint)}

  html.pg-portal .mr-filbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:11px 18px;border-bottom:1px solid var(--line)}
  html.pg-portal .mr-filbar .lbl{font-family:var(--mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
  html.pg-portal .mr-filbar .chip{cursor:pointer;transition:.12s;border-style:solid}
  html.pg-portal .mr-filbar .chip:hover{transform:translateY(-1px)}
  html.pg-portal .mr-filbar .chip[aria-pressed="true"]{box-shadow:0 0 0 2px currentColor inset}
  html.pg-portal .mr-filbar select{font-family:var(--body);font-size:11px;font-weight:600;color:var(--navy);background:var(--white);
    border:1px solid var(--line);border-radius:7px;padding:6px 10px;cursor:pointer;margin-left:auto}
  html.pg-portal .mr-filbar select:hover{border-color:var(--blue)}

  html.pg-portal .mr-mat b{display:block;font-family:var(--body);font-size:11.5px;font-weight:600;color:var(--navy);line-height:1.3}
  html.pg-portal .mr-mat span{display:block;font-family:var(--mono);font-size:9.5px;color:var(--muted);margin-top:2px}
  html.pg-portal .mr-cad{font-family:var(--mono);font-size:10.5px;white-space:nowrap}
  html.pg-portal .mr-cad small{display:block;font-size:8.5px;color:var(--muted);margin-top:1px;letter-spacing:.03em}
  html.pg-portal .mr-cad .gob{color:#8E6210}
  html.pg-portal .mr-foot{padding:11px 18px;border-top:1px solid var(--line);background:var(--tint);
    font-family:var(--mono);font-size:9.5px;color:var(--muted);line-height:1.5}

  /* modal de nuevo lote */
  html.pg-portal .modal__box--mr{max-width:480px;border-top-color:var(--navy)}
  html.pg-portal .mrl__eq{background:var(--tint);border:1px solid var(--soft);border-radius:10px;padding:10px 12px;margin:14px 0 16px}
  html.pg-portal .mrl__eq b{display:block;font-family:var(--display);font-size:13px;color:var(--navy)}
  html.pg-portal .mrl__eq span{font-family:var(--mono);font-size:10px;color:var(--muted)}

  html.pg-portal .mesot{font-family:var(--body);font-size:11.5px;font-weight:600;color:var(--navy);white-space:nowrap}

  /* ---------- DETALLE DE ORDEN DE TRABAJO ---------- */
  html.pg-portal .otd-cab{display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding:15px 18px;
    background:linear-gradient(135deg,var(--blue-050) 0%,#fff 65%);border-bottom:1px solid var(--line)}
  html.pg-portal .otd-cab .id{min-width:0}
  html.pg-portal .otd-cab .id .k{font-family:var(--mono);font-size:8.5px;letter-spacing:.11em;text-transform:uppercase;color:#2B4A78}
  html.pg-portal .otd-cab .id .v{font-family:var(--mono);font-size:19px;font-weight:600;color:var(--navy);letter-spacing:.02em;line-height:1.2;margin-top:2px}
  html.pg-portal .otd-cab .sep{width:1px;align-self:stretch;background:var(--line)}
  html.pg-portal .otd-dato{min-width:0}
  html.pg-portal .otd-dato .k{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
  html.pg-portal .otd-dato .v{font-family:var(--body);font-size:12.5px;font-weight:600;color:var(--navy);margin-top:3px}
  html.pg-portal .otd-cab .der{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
  html.pg-portal .otd-cab .der .btn{display:inline-flex;align-items:center;gap:7px}
  /* el avance usa el mismo anillo de la tabla de órdenes de trabajo */
  html.pg-portal .otd-dato .av{margin-top:4px}
  html.pg-portal .otd-dato .av .avwrap{gap:10px}
  html.pg-portal .otd-dato .av .lbl{font-size:9.5px}

  html.pg-portal .otd-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
    padding:11px 18px;border-bottom:1px solid var(--line);background:var(--tint)}
  html.pg-portal .otd-bar .n{font-family:var(--mono);font-size:10.5px;color:var(--muted)}
  html.pg-portal .otd-selbar{display:none;align-items:center;gap:12px;flex-wrap:wrap;
    padding:11px 18px;border-bottom:1px solid var(--blue-200);background:var(--blue-050)}
  html.pg-portal .otd-selbar.show{display:flex}
  html.pg-portal .otd-selbar .n{font-family:var(--display);font-size:12.5px;font-weight:600;color:var(--navy)}
  html.pg-portal .otd-selbar .der{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
  /* los items de la orden, por tipo (2026-10-21) */
  html.pg-portal .otd-estado{margin:14px 18px;padding:12px 14px;border-radius:10px;background:var(--soft);color:var(--muted);font-size:13px}
  html.pg-portal .otd-estado--err{background:#FDECEA;color:#A12A22;border:1px solid #F5C2BD}
  html.pg-portal .otd-sec + .otd-sec{border-top:1px solid var(--line);margin-top:6px}
  html.pg-portal .otd-sec__t{display:flex;align-items:center;gap:8px;padding:12px 18px 4px;font-family:var(--display);font-size:13px;font-weight:700;color:var(--navy)}
  html.pg-portal .otd-sec__n{font-family:var(--mono);font-size:10.5px;font-weight:600;color:var(--blue);background:rgba(66,146,195,.14);border-radius:999px;padding:1px 8px}
  html.pg-portal .tbl-otdl th,html.pg-portal .tbl-otdl td{padding-left:6px;padding-right:6px}
  html.pg-portal .otd-nota{padding:11px 18px;border-top:1px solid var(--line);background:var(--tint);
    font-family:var(--mono);font-size:9.5px;color:var(--muted);line-height:1.5}
  /* la ubicación se parte en líneas (2026-10-15): antes iba en una sola línea con
     150 px fijos y era de lo que más empujaba el scroll horizontal */
  html.pg-portal td.ubi{font-size:11.5px;color:var(--muted);white-space:normal;overflow-wrap:break-word;max-width:120px;line-height:1.3}

  /* sub-línea bajo el chip de estado: plazos y origen del acuse */
  html.pg-portal .estsub{display:block;font-family:var(--mono);font-size:9px;color:var(--muted);margin-top:4px;line-height:1.35}
  html.pg-portal .estsub.urge{color:#8E6210;font-weight:700}
  html.pg-portal .estsub.tarde{color:var(--red);font-weight:700}
  html.pg-portal .chip--auto{background:var(--soft);border-color:var(--line);color:#5B6B80}
  html.pg-portal .chip--auto .dot{background:#9AA8BC}

  /* nota de reglas al pie de la tabla */
  html.pg-portal .reglas{display:flex;gap:9px;align-items:flex-start;padding:11px 18px;border-top:1px solid var(--line);
    background:var(--tint);font-size:11px;color:var(--muted);line-height:1.55}
  html.pg-portal .reglas svg{flex:0 0 auto;margin-top:2px;color:var(--blue-600)}
  html.pg-portal .reglas b{color:var(--navy)}

  /* ---------- FRANJA DE ESTADO DE LA CUENTA ---------- */
  /* Estado de la cuenta: texto enlazable bajo la cabecera, no una fila de cajas.
     Ocupa una línea y se lee como una frase. */
  html.pg-portal .estado{display:flex;align-items:center;flex-wrap:wrap;gap:0 4px;
    padding:10px 18px;margin:-4px 0 14px;border:1px solid var(--line);border-radius:12px;
    background:var(--white);box-shadow:var(--sh)}
  html.pg-portal .est-i{display:inline-flex;align-items:baseline;gap:5px;padding:3px 7px;border:0;border-radius:7px;
    background:transparent;cursor:pointer;font-family:var(--body);transition:.13s}
  html.pg-portal .est-i:hover{background:var(--white);box-shadow:0 0 0 1px var(--line)}
  html.pg-portal .est-i:disabled{cursor:default}
  html.pg-portal .est-i:disabled:hover{background:transparent;box-shadow:none}
  html.pg-portal .est-i .n{font-family:var(--display);font-size:13px;font-weight:700;line-height:1.25}
  html.pg-portal .est-i .tx{font-size:11.5px;font-weight:600;color:var(--navy);line-height:1.25;
    text-decoration:underline;text-decoration-color:var(--blue-200);text-underline-offset:3px}
  html.pg-portal .est-i:hover .tx{text-decoration-color:var(--blue)}
  html.pg-portal .est-i--warn .n{color:#8E6210}
  html.pg-portal .est-i--bad  .n{color:var(--red)}
  html.pg-portal .est-i--info .n{color:var(--blue-600)}
  html.pg-portal .est-i--cero .n{color:#9AA8BC}
  html.pg-portal .est-i--cero .tx{color:var(--muted);font-weight:500;text-decoration:none}
  html.pg-portal .estado .sep{color:#C3CEDC;font-size:11px;user-select:none}

  /* chip de filtro activo en Últimas intervenciones */
  html.pg-portal .intfil{display:none;align-items:center;gap:9px;padding:10px 18px;background:var(--blue-050);
    border-bottom:1px solid var(--blue-200)}
  html.pg-portal .intfil.show{display:flex}
  html.pg-portal .intfil .tx{font-family:var(--body);font-size:12px;font-weight:600;color:var(--navy)}
  html.pg-portal .intfil button{font-family:var(--body);font-size:11.5px;font-weight:600;color:var(--blue-600);
    background:var(--white);border:1px solid var(--line);border-radius:7px;padding:5px 11px;cursor:pointer;margin-left:auto}
  html.pg-portal .intfil button:hover{border-color:var(--blue)}

  /* selector de período */
  html.pg-portal .perbox{display:inline-flex;align-items:center;gap:8px}
  html.pg-portal .perbox label{font-family:var(--mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
  html.pg-portal .perbox select{font-family:var(--body);font-size:11.5px;font-weight:600;color:var(--navy);background:var(--white);
    border:1px solid var(--line);border-radius:8px;padding:6px 10px;cursor:pointer}
  html.pg-portal .perbox select:hover{border-color:var(--blue)}

  /* ---------- GUÍA: CÓMO GESTIONAR LOS VENCIDOS ----------
     No es un aviso pasajero: es una instrucción con tres opciones que el cliente
     tiene que leer y ejecutar. Aparece al filtrar por vencidos, se puede plegar,
     y queda un enlace para volver a abrirla. */
  html.pg-portal .guia{display:none;border-bottom:1px solid #EFD9A6;background:var(--amber-050)}
  html.pg-portal .guia.show{display:block}
  html.pg-portal .guia__hd{display:flex;align-items:center;gap:10px;padding:12px 18px}
  html.pg-portal .guia__hd svg{flex:0 0 auto;color:#8E6210}
  html.pg-portal .guia__hd b{font-family:var(--display);font-size:13px;color:#7A5410;flex:1}
  html.pg-portal .guia__x{font-family:var(--body);font-size:11.5px;font-weight:600;color:#8E6210;
    background:var(--white);border:1px solid #EFD9A6;border-radius:7px;padding:5px 11px;cursor:pointer}
  html.pg-portal .guia__x:hover{background:#FDF6E7;border-color:#E3C583}
  html.pg-portal .guia__bd{padding:0 18px 14px 18px}
  html.pg-portal .guia__pasos{display:flex;flex-direction:column;gap:9px;margin:0}
  html.pg-portal .guia__p{display:flex;gap:11px;align-items:flex-start}
  html.pg-portal .guia__p .n{width:20px;height:20px;flex:0 0 20px;border-radius:50%;background:var(--white);
    border:1px solid #EFD9A6;color:#8E6210;display:grid;place-items:center;
    font-family:var(--mono);font-size:10px;font-weight:700;margin-top:1px}
  html.pg-portal .guia__p p{margin:0;font-size:12px;color:#7A5410;line-height:1.5}
  html.pg-portal .guia__p p b{color:#5E400C}
  html.pg-portal .guia__nota{display:flex;gap:8px;align-items:flex-start;margin-top:12px;padding-top:10px;
    border-top:1px solid #EFD9A6;font-size:11px;color:#8E6210;line-height:1.45}
  html.pg-portal .guia__nota .ic{flex:0 0 auto}
  html.pg-portal .guia-link{display:none;padding:9px 18px;border-bottom:1px solid var(--line);background:var(--tint)}
  html.pg-portal .guia-link.show{display:block}
  html.pg-portal .guia-link button{font-family:var(--body);font-size:11.5px;font-weight:600;color:#8E6210;
    background:transparent;border:0;padding:0;cursor:pointer;text-decoration:underline;
    text-decoration-color:#EFD9A6;text-underline-offset:3px}
  html.pg-portal .guia-link button:hover{text-decoration-color:#8E6210}

  /* ---------- SOLICITAR SERVICIO ---------- */
  html.pg-portal .btn-sol{display:inline-flex;align-items:center;gap:7px;font-family:var(--body);font-size:12px;font-weight:600;
    color:#fff;background:linear-gradient(120deg,var(--navy) 0%,var(--navy-2) 100%);
    border:1px solid var(--navy);border-radius:999px;padding:8px 16px;cursor:pointer;
    transition:.14s;white-space:nowrap;box-shadow:0 6px 16px -10px rgba(10,37,84,.7)}
  html.pg-portal .btn-sol:hover{filter:brightness(1.12);box-shadow:0 8px 20px -10px rgba(10,37,84,.8)}
  html.pg-portal .btn-sol:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
  html.pg-portal .modal__box--sol{max-width:600px;border-top-color:var(--navy)}
  html.pg-portal .sol-promesa{display:flex;gap:11px;align-items:flex-start;background:var(--green-050);
    border:1px solid var(--green-200);border-radius:11px;padding:12px 14px;margin:14px 0 16px}
  html.pg-portal .sol-promesa svg{flex:0 0 auto;margin-top:1px;color:#0F7A3C}
  html.pg-portal .sol-promesa p{margin:0;font-size:12.5px;color:#0F7A3C;line-height:1.5}
  html.pg-portal .sol-promesa p b{color:#0B5C2E}
  html.pg-portal .sol-cab{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
  html.pg-portal .sol-cab .n{font-family:var(--mono);font-size:10.5px;color:var(--muted)}
  html.pg-portal .sol-cab .der{margin-left:auto;display:flex;gap:6px}
  html.pg-portal .sol-mini{font-family:var(--body);font-size:11px;font-weight:600;color:var(--blue-600);background:var(--white);
    border:1px solid var(--line);border-radius:7px;padding:5px 10px;cursor:pointer}
  html.pg-portal .sol-mini:hover{border-color:var(--blue);background:var(--blue-050)}
  html.pg-portal .sol-lista{max-height:230px;overflow-y:auto;border:1px solid var(--line);border-radius:10px;background:var(--white)}
  html.pg-portal .sol-it{display:flex;align-items:center;gap:11px;padding:8px 12px;border-bottom:1px solid var(--soft)}
  html.pg-portal .sol-it:last-child{border-bottom:0}
  html.pg-portal .sol-it:hover{background:var(--tint)}
  html.pg-portal .sol-it input{flex:0 0 auto}
  html.pg-portal .sol-it .tx{min-width:0;flex:1}
  html.pg-portal .sol-it .tx b{display:block;font-family:var(--body);font-size:12px;font-weight:600;color:var(--navy);line-height:1.3}
  html.pg-portal .sol-it .tx span{display:block;font-family:var(--mono);font-size:9.5px;color:var(--muted);margin-top:2px}
  html.pg-portal .sol-it .f{font-family:var(--mono);font-size:10px;color:var(--muted);white-space:nowrap}
  html.pg-portal .sol-obs{width:100%;min-height:72px;resize:vertical;font-family:var(--body);font-size:12.5px;line-height:1.5;
    color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--white);margin-top:6px}
  html.pg-portal .sol-obs:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-050)}
  html.pg-portal .sol-lbl{font-family:var(--mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-top:15px}
  /* paso 1: alcance */
  html.pg-portal .sol-sub{font-size:12.5px;color:var(--muted);line-height:1.55;margin:12px 0 14px}
  html.pg-portal .sol-ops{display:flex;flex-direction:column;gap:9px}
  html.pg-portal .sol-op{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);
    border-radius:11px;background:var(--white);cursor:pointer;transition:.13s}
  html.pg-portal .sol-op:hover{border-color:var(--blue);background:var(--blue-050)}
  html.pg-portal .sol-op input{flex:0 0 auto}
  html.pg-portal .sol-op .tx{min-width:0;flex:1}
  html.pg-portal .sol-op .tx b{display:block;font-family:var(--display);font-size:13px;color:var(--navy);line-height:1.25}
  html.pg-portal .sol-op .tx span{display:block;font-size:11px;color:var(--muted);line-height:1.4;margin-top:2px}
  html.pg-portal .sol-op .n{font-family:var(--mono);font-size:13px;font-weight:700;padding:4px 12px;border-radius:999px;white-space:nowrap}
  html.pg-portal .sol-op .n.bad{background:var(--red-050);color:var(--red);border:1px solid var(--red-200)}
  html.pg-portal .sol-op .n.warn{background:var(--amber-050);color:#8E6210;border:1px solid #EFD9A6}
  html.pg-portal .sol-op .n.none{background:var(--soft);color:var(--muted);border:1px solid var(--line)}
  html.pg-portal .sol-op .n.info{background:var(--blue-050);color:var(--blue-600);border:1px solid var(--blue-200)}
  html.pg-portal .sol-op[data-vacio="1"]{opacity:.5;pointer-events:none}
  html.pg-portal .sol-total{margin-top:14px;padding:11px 14px;border-radius:10px;background:var(--tint);border:1px solid var(--line);
    font-family:var(--body);font-size:12.5px;color:var(--navy);text-align:center}
  html.pg-portal .sol-total b{font-family:var(--mono);font-size:15px}

  /* paso 2: destinos */
  html.pg-portal .sol-dest{display:flex;flex-direction:column;gap:9px;margin-top:7px}
  html.pg-portal .sol-d{border:1px solid var(--line);border-radius:11px;background:var(--white);overflow:hidden;transition:.13s}
  html.pg-portal .sol-d.on{border-color:var(--blue);background:var(--blue-050)}
  html.pg-portal .sol-d__h{display:flex;align-items:center;gap:11px;padding:11px 13px;cursor:pointer}
  html.pg-portal .sol-d__h .ic{width:28px;height:28px;flex:0 0 28px;border-radius:8px;display:grid;place-items:center;
    background:var(--white);border:1px solid var(--line);color:var(--blue-600)}
  html.pg-portal .sol-d.on .sol-d__h .ic{border-color:var(--blue-200)}
  html.pg-portal .sol-d__h .tx{min-width:0;flex:1}
  html.pg-portal .sol-d__h .tx b{display:block;font-family:var(--body);font-size:12.5px;font-weight:600;color:var(--navy);line-height:1.3}
  html.pg-portal .sol-d__h .tx span{display:block;font-size:10.5px;color:var(--muted);line-height:1.4;margin-top:2px}
  html.pg-portal .sol-d__b{padding:0 13px 12px 52px;display:none}
  html.pg-portal .sol-d.on .sol-d__b{display:block}
  html.pg-portal .sol-d__b input{width:100%;font-family:var(--body);font-size:12.5px;color:var(--ink);background:#fff;
    border:1px solid var(--line);border-radius:8px;padding:8px 11px}
  html.pg-portal .sol-d__b input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-050)}
  html.pg-portal .sol-d__b .ay{font-size:10.5px;color:var(--muted);line-height:1.45;margin-top:6px}
  html.pg-portal .sol-aviso{display:flex;gap:9px;align-items:center;margin-top:10px;padding:10px 12px;border-radius:9px;
    background:var(--amber-050);border:1px solid #EFD9A6;font-size:11px;color:#8E6210;line-height:1.45}
  html.pg-portal .sol-aviso svg{flex:0 0 auto;color:#8E6210}
  html.pg-portal .sol-libre{display:flex;gap:9px;align-items:flex-start;margin-top:12px;padding:10px 12px;border-radius:9px;
    background:var(--tint);font-size:11px;color:var(--muted);line-height:1.5}
  html.pg-portal .sol-libre svg{flex:0 0 auto;margin-top:2px;color:var(--blue-600)}
  html.pg-portal .sol-mas{width:100%;font-family:var(--body);font-size:11.5px;font-weight:600;color:var(--blue-600);
    background:var(--tint);border:0;border-top:1px solid var(--soft);padding:9px;cursor:pointer}
  html.pg-portal .sol-mas:hover{background:var(--blue-050)}

  /* ---------- MODAL DE RECHAZO ---------- */
  html.pg-portal .modal__box--rej{max-width:520px;border-top-color:var(--red)}
  /* el panel de éxito del rechazo empieza oculto y lo destapa el JS al enviar
     (la regla faltaba: el bloque "Registrado" se veía siempre dentro del
     formulario, sobre todo al quedar el diálogo a pantalla completa en móvil) */
  html.pg-portal .rej__oculto{display:none}
  html.pg-portal .rej__eq{display:flex;align-items:center;gap:12px;background:var(--tint);border:1px solid var(--soft);
    border-radius:10px;padding:10px 12px;margin:14px 0 16px}
  html.pg-portal .rej__eq .thumb{cursor:default}
  html.pg-portal .rej__eq .thumb:hover{transform:none;box-shadow:none;border-color:var(--line)}
  html.pg-portal .rej__eq b{display:block;font-family:var(--display);font-size:13px;color:var(--navy)}
  html.pg-portal .rej__eq span{font-family:var(--mono);font-size:10px;color:var(--muted)}
  html.pg-portal .rej__lbl{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
    color:var(--muted);margin:0 0 8px}
  html.pg-portal .rej__motivos{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
  html.pg-portal .rej__motivo{font-family:var(--body);font-size:12px;font-weight:500;color:var(--ink);
    background:var(--white);border:1px solid var(--line);border-radius:999px;padding:7px 13px;cursor:pointer;transition:.12s}
  html.pg-portal .rej__motivo:hover{border-color:var(--red);color:var(--red)}
  html.pg-portal .rej__motivo[aria-pressed="true"]{background:var(--red-050);border-color:var(--red);color:#9A2E27;font-weight:600}
  html.pg-portal .rej__txt{width:100%;min-height:96px;resize:vertical;font-family:var(--body);font-size:13px;line-height:1.5;
    color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:11px 12px;background:var(--white)}
  html.pg-portal .rej__txt:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-050)}
  html.pg-portal .rej__cnt{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9.5px;color:var(--muted);margin-top:6px}
  html.pg-portal .rej__cnt .falta{color:var(--amber)}
  html.pg-portal .rej__cnt .ok{color:var(--green)}
  /* adjuntar archivos */
  html.pg-portal .rej__adj{margin-top:14px}
  html.pg-portal .rej__adjbtn{display:inline-flex;align-items:center;gap:8px;font-family:var(--body);font-size:12px;font-weight:600;
    color:var(--blue-600);background:var(--white);border:1.5px dashed var(--blue-200);border-radius:10px;
    padding:9px 14px;cursor:pointer;transition:.12s}
  html.pg-portal .rej__adjbtn:hover{border-color:var(--blue);background:var(--blue-050)}
  html.pg-portal .rej__adjhint{font-family:var(--mono);font-size:9px;color:var(--muted);margin-left:10px}
  html.pg-portal .rej__files{display:flex;flex-direction:column;gap:6px;margin-top:9px}
  html.pg-portal .rej__file{display:flex;align-items:center;gap:9px;background:var(--tint);border:1px solid var(--soft);
    border-radius:9px;padding:7px 10px;font-size:11.5px;color:var(--ink)}
  html.pg-portal .rej__file .fico{width:26px;height:26px;border-radius:7px;background:var(--blue-050);color:var(--blue-600);
    display:grid;place-items:center;flex:0 0 26px}
  html.pg-portal .rej__file .fnom{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
  html.pg-portal .rej__file .ftam{font-family:var(--mono);font-size:9px;color:var(--muted);white-space:nowrap}
  html.pg-portal .rej__file .fdel{width:22px;height:22px;border-radius:6px;border:0;background:transparent;color:var(--muted);
    cursor:pointer;display:grid;place-items:center;flex:0 0 22px}
  html.pg-portal .rej__file .fdel:hover{background:var(--red-050);color:var(--red)}

  html.pg-portal .rej__nota{display:flex;gap:10px;align-items:flex-start;background:var(--blue-050);border:1px solid var(--blue-200);
    border-radius:10px;padding:10px 12px;margin-top:14px;font-size:11.5px;color:#2B6A92;line-height:1.5}
  html.pg-portal .rej__nota svg{flex:0 0 auto;margin-top:1px}
  html.pg-portal .mbtn--danger{background:var(--red);border-color:var(--red);color:#fff}
  html.pg-portal .mbtn--danger:hover{background:#A93129;border-color:#A93129}
  html.pg-portal .mbtn--danger:disabled{opacity:.4;cursor:default}
  html.pg-portal .mbtn--danger:disabled:hover{background:var(--red);border-color:var(--red)}
  html.pg-portal .rej__exito{text-align:center;padding:10px 0 4px}
  html.pg-portal .rej__exito .ico{width:52px;height:52px;border-radius:50%;background:var(--green-050);border:1px solid var(--green-200);
    display:grid;place-items:center;margin:0 auto 14px;color:var(--green);font-size:24px}
  html.pg-portal .rej__exito h3{margin-bottom:6px}
  html.pg-portal .rej__exito p{font-size:12.5px}

  /* mensaje temporal (toast) */
  html.pg-portal .toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:80;
    display:flex;align-items:center;gap:11px;max-width:480px;
    background:var(--navy);color:#fff;border-radius:12px;padding:13px 18px;
    font-family:var(--body);font-size:13px;line-height:1.45;
    box-shadow:0 18px 44px rgba(10,37,84,.4);opacity:0;pointer-events:none;
    transition:opacity .25s,transform .25s}
  html.pg-portal .toast.show{opacity:1;transform:translate(-50%,0)}
  html.pg-portal .toast .tico2{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:0 0 30px;
    font-family:var(--display);font-weight:700;font-size:15px}
  html.pg-portal .toast--ok .tico2{background:var(--green);color:#fff}
  html.pg-portal .toast--info .tico2{background:var(--amber);color:#fff}
  html.pg-portal .toast b{font-weight:600}
  /* un botón dentro del aviso (2026-11-04, «Quitar filtros» al crear un equipo): el aviso no recibe clics
     (pointer-events:none), el botón sí */
  html.pg-portal .toast .toast__btn{pointer-events:auto;margin-left:8px;padding:4px 10px;border-radius:7px;
    border:1px solid rgba(255,255,255,.55);background:transparent;color:#fff;font:inherit;font-weight:600;cursor:pointer}
  html.pg-portal .toast .toast__btn:hover{background:rgba(255,255,255,.14)}
  /* un equipo cambió en su ficha, en otra pestaña (eqCambio, portal.js) */
  html.pg-portal .eqcambio{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 14px;
    margin:0 0 14px;padding:9px 14px;border:1px solid var(--blue);border-radius:10px;background:#fff;font-size:13px}
  html.pg-portal .eqcambio[hidden]{display:none}
  /* la fila del equipo recién creado, resaltada unos segundos (neqMostrarNuevo) */
  html.pg-portal tr.fila-nueva td{animation:fila-nueva 4s ease-out}
  @keyframes fila-nueva{0%,40%{background:#FFF4C2}100%{background:transparent}}

  /* reproductor en modal */
  html.pg-portal .modal__box--video{max-width:720px;border-top-color:var(--navy)}
  html.pg-portal .vplayer{aspect-ratio:16/9;background:linear-gradient(135deg,#081C3F,var(--navy-2));
    display:grid;place-items:center;color:#93AACB;font-family:var(--mono);font-size:11px;text-align:center;line-height:1.6}

  html.pg-portal .langsel{position:relative;margin-left:auto}
  html.pg-portal .langsel__btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--body);font-size:12.5px;font-weight:600;
    color:#dfe8f4;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);border-radius:8px;
    padding:8px 12px;cursor:pointer;transition:.12s}
  html.pg-portal .langsel__btn:hover{background:rgba(255,255,255,.16)}
  html.pg-portal .langsel__btn svg{transition:transform .15s}
  html.pg-portal .langsel[aria-open="true"] .langsel__btn svg{transform:rotate(180deg)}
  html.pg-portal .langsel__menu{position:absolute;top:calc(100% + 6px);right:0;min-width:150px;background:#fff;
    border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px rgba(10,37,84,.22);
    padding:5px;display:none;z-index:60}
  html.pg-portal .langsel[aria-open="true"] .langsel__menu{display:block}
  html.pg-portal .langsel__menu button{display:block;width:100%;text-align:left;font-family:var(--body);font-size:13px;
    color:var(--ink);background:transparent;border:0;border-radius:6px;padding:9px 12px;cursor:pointer}
  html.pg-portal .langsel__menu button:hover{background:var(--blue-050)}
  html.pg-portal .langsel__menu button[aria-current="true"]{background:var(--navy);color:#fff;font-weight:600}

  html.pg-portal .sgs{font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;color:#93AACB;
    border:1px solid rgba(255,255,255,.22);border-radius:6px;padding:6px 11px;text-align:right;line-height:1.3;
    max-width:250px;margin-left:14px}
  html.pg-portal .sgs b{display:block;font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.02em;color:#fff;
    line-height:1.25;margin-bottom:2px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html.pg-portal .sgs span i{font-style:normal;color:#6E85A8}
  html.pg-portal .rail{height:6px;background:repeating-linear-gradient(90deg,var(--blue) 0 1px,transparent 1px 10px);opacity:.5;flex:0 0 auto}

  /* ---------- FILTROS ---------- */
  html.pg-portal .filters{margin-top:24px;background:linear-gradient(135deg,var(--blue-050) 0%,#fff 55%);
    border:1px solid var(--blue-200);border-top:4px solid var(--blue);border-radius:var(--r);box-shadow:var(--sh);
    padding:16px 18px 14px;display:flex;justify-content:center;align-items:flex-end;gap:16px;flex-wrap:wrap}
  html.pg-portal .filters .f{flex:0 1 360px;min-width:250px}
  html.pg-portal .filters .f--btn{flex:0 0 auto;min-width:0}
  html.pg-portal .fbtns{display:flex;gap:8px}
  /* El hueco sólo hace falta cuando los botones comparten fila con los
     desplegables: entonces les da la misma altura, porque el bloque de cada
     filtro termina en su línea de "Ninguna seleccionada". Cuando los botones
     bajan a una fila propia (tres filtros a la vista), sobra. */
  html.pg-portal .count--hueco{display:none}
  html.pg-portal .filters--linea .count--hueco{display:block}
  html.pg-portal .f > label{display:flex;align-items:center;gap:7px;font-family:var(--display);font-size:12px;font-weight:700;
    letter-spacing:.10em;text-transform:uppercase;color:var(--navy);margin-bottom:7px}
  html.pg-portal .f > label::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--blue);flex:0 0 8px}
  html.pg-portal .f{min-width:0}
  html.pg-portal .f select{width:100%;font-family:var(--body);font-size:12.5px;font-weight:500;padding:9px 30px 9px 11px;border:1px solid var(--line);
    border-radius:8px;background:var(--white);color:var(--ink);cursor:pointer;appearance:none;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1 5 5 9 1' fill='none' stroke='%234292C3' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 10px center}
  html.pg-portal .f select:hover{border-color:var(--blue)}
  html.pg-portal .f .count{font-family:var(--mono);font-size:10px;color:var(--blue-600);margin-top:5px}
  html.pg-portal .f .count.none{color:var(--muted)}

  /* multiselect con casillas */
  html.pg-portal .msel{position:relative;min-width:0}
  html.pg-portal .msel__btn{width:100%;max-width:100%;display:block;font-family:var(--body);font-size:12.5px;font-weight:500;text-align:left;
    padding:9px 30px 9px 11px;border:1px solid var(--line);border-radius:8px;background:var(--white);
    color:var(--ink);cursor:pointer;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1 5 5 9 1' fill='none' stroke='%234292C3' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 10px center;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html.pg-portal .msel__btn:hover{border-color:var(--blue)}
  html.pg-portal .msel__btn.placeholder{color:#8A99AE;font-weight:400}
  html.pg-portal .msel__pop{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;display:none;
    background:var(--white);border:1px solid var(--line);border-radius:10px;
    box-shadow:0 16px 40px -14px rgba(10,37,84,.35);overflow:hidden}
  html.pg-portal .msel.open .msel__pop{display:block}
  html.pg-portal .msel__list{max-height:236px;overflow-y:auto;padding:6px}
  html.pg-portal .msel__opt{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:7px;cursor:pointer;
    font-family:var(--body);font-size:12.5px;font-weight:400;letter-spacing:0;text-transform:none;
    color:var(--ink);margin:0;line-height:1.4}
  html.pg-portal .msel__opt:hover{background:var(--blue-050)}
  html.pg-portal .msel__opt input{flex:0 0 15px;width:15px;height:15px;margin:0}
  html.pg-portal .msel__opt span{flex:1;min-width:0}
  html.pg-portal .msel__ft{display:flex;justify-content:space-between;align-items:center;gap:8px;
    padding:8px 10px;border-top:1px solid var(--soft);background:var(--tint)}
  html.pg-portal .msel__ft button{font-family:var(--body);font-size:11px;font-weight:600;color:var(--blue-600);
    background:transparent;border:0;cursor:pointer;padding:4px 8px;border-radius:6px}
  html.pg-portal .msel__ft button:hover{background:var(--blue-050)}

  html.pg-portal .btn{font-family:var(--body);font-size:12px;font-weight:600;padding:7px 12px;border-radius:8px;border:1px solid var(--line);
    background:var(--white);color:var(--navy);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px}
  html.pg-portal .btn:hover{border-color:var(--navy)}
  html.pg-portal .btn--primary{background:var(--blue);border-color:var(--blue);color:#fff}
  html.pg-portal .btn--primary:hover{background:var(--blue-600);border-color:var(--blue-600)}
  html.pg-portal .btn--lg{font-size:12.5px;padding:9px 16px}

  /* botones Filtrar / Limpiar (contraste suave) */
  html.pg-portal .fbtn{display:inline-flex;align-items:center;gap:7px;font-family:var(--body);font-size:12.5px;
    border-radius:8px;padding:9px 18px;cursor:pointer;transition:.13s;white-space:nowrap}
  html.pg-portal .fbtn--principal{background:var(--blue);color:#fff;border:1px solid var(--blue);font-weight:600}
  html.pg-portal .fbtn--principal:hover{background:var(--blue-600);border-color:var(--blue-600)}
  html.pg-portal .fbtn--suave{background:var(--blue-050);color:var(--blue-600);border:1px solid var(--blue-050);
    font-weight:600;padding:9px 15px}
  html.pg-portal .fbtn--suave:hover{background:var(--blue-200);color:var(--navy)}
  html.pg-portal .btn:disabled{opacity:.45;cursor:default}
  html.pg-portal .btn--primary:disabled:hover{border-color:var(--blue);background:var(--blue)}

  /* ---------- PESTAÑAS (menú destacado) ---------- */
  html.pg-portal .tabs{margin-top:20px;display:flex;gap:6px;overflow-x:auto;
    background:var(--white);border:1px solid var(--line);border-radius:14px;
    padding:7px;box-shadow:var(--sh)}
  html.pg-portal .tabs button{display:inline-flex;align-items:center;gap:9px;
    font-family:var(--display);font-size:14.5px;font-weight:600;color:var(--navy);
    background:transparent;border:1px solid transparent;border-radius:10px;cursor:pointer;
    padding:11px 18px;letter-spacing:-.01em;white-space:nowrap;flex:1;justify-content:center;
    transition:.15s}
  /* Con cinco o más pestañas —Validaciones tiene siete— no caben estiradas en
     una fila: se ajustan a su texto y saltan de línea, que se lee mejor que
     una fila que se desplaza en horizontal. */
  html.pg-portal .tabs--muchas{flex-wrap:wrap;overflow-x:visible}
  html.pg-portal .tabs--muchas button{flex:0 1 auto;font-size:13px;padding:9px 13px;gap:7px}
  html.pg-portal .tabs button svg{flex:0 0 auto;opacity:.55;transition:.15s}
  html.pg-portal .tabs button:hover{background:var(--blue-050);border-color:var(--blue-200)}
  html.pg-portal .tabs button:hover svg{opacity:1}
  /* La pestaña activa: azul marino degradado, con el icono en azul claro.
     Sólo hay una a la vez; las demás se quedan en su estado normal. */
  html.pg-portal .tabs button[aria-current="page"]{background:linear-gradient(120deg,var(--navy) 0%,var(--navy-2) 100%);
    color:#fff;border-color:var(--navy);box-shadow:0 6px 16px -8px rgba(10,37,84,.55)}
  html.pg-portal .tabs button[aria-current="page"] svg{opacity:1;color:#7FC0E4}
  html.pg-portal .pane{display:none}
  html.pg-portal .pane.show{display:block}

  /* ==========================================================================
     MAPA DE ANÁLISIS AMBIENTALES
     --------------------------------------------------------------------------
     Sustituye a la tabla del historial: cada punto medido se sitúa sobre el
     plano de la planta y se colorea con su peor resultado. El buscador es de
     dos pasos —criterio y valor— y usa el combo con buscador de más abajo.
     ========================================================================== */
  html.pg-portal .mapa__hd{display:flex;align-items:center;gap:12px;padding:16px 18px 0}
  html.pg-portal .mapa__ic{width:38px;height:38px;border-radius:10px;flex:0 0 38px;display:grid;place-items:center;
    background:var(--blue-050);border:1px solid var(--blue-200);color:var(--blue-600)}
  html.pg-portal .mapa__hd h3{margin:0;font-family:var(--display);font-size:15px;font-weight:700;color:var(--navy);letter-spacing:-.01em}
  html.pg-portal .mapa__hd p{margin:2px 0 0;font-size:12px;color:var(--muted)}

  html.pg-portal .mapa__barra{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;padding:14px 18px 16px;
    border-bottom:1px solid var(--line)}
  html.pg-portal .mapa__campo{flex:1 1 260px;min-width:0}
  html.pg-portal .mapa__campo > label{display:flex;align-items:center;gap:7px;font-family:var(--display);font-size:11.5px;
    font-weight:700;letter-spacing:.10em;text-transform:uppercase;color:var(--navy);margin-bottom:7px}
  html.pg-portal .mapa__campo > label::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--blue);flex:0 0 8px}

  /* ---- combo con buscador (un solo valor) ---- */
  html.pg-portal .combo{position:relative}
  html.pg-portal .combo__btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
    font-family:var(--body);font-size:12.5px;font-weight:500;text-align:left;color:var(--ink);
    background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px 12px;cursor:pointer;transition:.12s}
  html.pg-portal .combo__btn:hover{border-color:var(--blue-200)}
  html.pg-portal .combo__btn.placeholder{color:#9AA8BC;font-weight:400}
  html.pg-portal .combo__btn::after{content:"";width:9px;height:9px;flex:0 0 9px;border-right:1.8px solid var(--blue);
    border-bottom:1.8px solid var(--blue);transform:rotate(45deg) translateY(-2px);transition:.15s}
  html.pg-portal .combo.open .combo__btn{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-050)}
  html.pg-portal .combo.open .combo__btn::after{transform:rotate(225deg) translateY(-2px)}
  html.pg-portal .combo__pop{position:absolute;left:0;right:0;top:calc(100% + 5px);z-index:40;background:#fff;
    border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 34px -14px rgba(10,37,84,.35);
    padding:8px;display:none}
  html.pg-portal .combo.open .combo__pop{display:block}
  html.pg-portal .combo__buscar{width:100%;font-family:var(--body);font-size:12.5px;padding:8px 10px;
    border:1px solid var(--blue-200);border-radius:7px;background:var(--tint);color:var(--ink);margin-bottom:6px}
  html.pg-portal .combo__buscar:focus{outline:none;border-color:var(--blue);background:#fff}
  html.pg-portal .combo__lista{max-height:220px;overflow:auto}
  html.pg-portal .combo__opt{display:block;width:100%;text-align:left;font-family:var(--body);font-size:12.5px;
    color:var(--ink);background:transparent;border:0;border-radius:6px;padding:8px 10px;cursor:pointer}
  html.pg-portal .combo__opt:hover{background:var(--blue-050)}
  html.pg-portal .combo__opt[aria-selected="true"]{background:var(--navy);color:#fff;font-weight:600}
  html.pg-portal .combo__vacio{font-size:12px;color:var(--muted);padding:10px;text-align:center}

  /* ---- plano ---- */
  html.pg-portal .mapa__lienzo{position:relative;padding:16px 18px 0}
  html.pg-portal .mapa__svg{width:100%;height:auto;display:block;border:1px solid var(--blue-200);border-radius:12px;
    background:linear-gradient(135deg,var(--blue-050) 0%,#fff 60%)}
  html.pg-portal .zona{fill:#fff;stroke:var(--blue-200);stroke-width:1.4}
  html.pg-portal .zona__tx{font-family:var(--body);font-size:11px;fill:var(--muted)}
  html.pg-portal .pin{cursor:pointer;transition:opacity .15s}
  html.pg-portal .pin__cuerpo{stroke:#fff;stroke-width:2}
  html.pg-portal .pin--ok   .pin__cuerpo{fill:var(--green)}
  html.pg-portal .pin--warn .pin__cuerpo{fill:var(--amber)}
  html.pg-portal .pin--bad  .pin__cuerpo{fill:var(--red)}
  html.pg-portal .pin__n{font-family:var(--mono);font-size:10px;font-weight:600;fill:#fff;text-anchor:middle}
  html.pg-portal .pin--apagado{opacity:.18}
  html.pg-portal .pin--activo .pin__halo{fill:none;stroke:var(--navy);stroke-width:2.5}
  html.pg-portal .pin:hover .pin__cuerpo{stroke:var(--navy)}

  html.pg-portal .mapa__pie{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:14px 18px 16px}
  html.pg-portal .mapa__ley{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:11.5px;color:var(--muted)}
  html.pg-portal .mapa__ley b{font-family:var(--display);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--navy)}
  html.pg-portal .mapa__ley span{display:inline-flex;align-items:center;gap:6px}
  html.pg-portal .mapa__ley i{width:10px;height:10px;border-radius:50%;display:inline-block}
  html.pg-portal .mapa__cuenta{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--muted)}

  /* ==========================================================================
     HISTORIAL DE ANÁLISIS · TRES NIVELES ENCADENADOS
     analisis_1 familias → analisis_2 análisis → analisis_3 registros
     ========================================================================== */
  html.pg-portal .migas{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:14px 18px 0;
    font-size:12px;color:var(--muted)}
  html.pg-portal .migas button{font-family:var(--body);font-size:12px;font-weight:600;color:var(--blue-600);
    background:none;border:0;padding:0;cursor:pointer}
  html.pg-portal .migas button:hover{text-decoration:underline}
  html.pg-portal .migas .sep{color:var(--blue-200)}
  html.pg-portal .migas .hoy{font-weight:700;color:var(--navy)}

  html.pg-portal .an-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:16px 18px}
  html.pg-portal .an-caja{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
  html.pg-portal .an-caja__t{background:linear-gradient(120deg,var(--navy) 0%,var(--navy-2) 100%);color:#fff;
    font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.08em;
    text-transform:uppercase;padding:11px 14px;text-align:center}
  html.pg-portal .an-tabla{width:100%;border-collapse:collapse}
  html.pg-portal .an-tabla td{padding:0;border-bottom:1px solid var(--soft)}
  html.pg-portal .an-tabla tr:last-child td{border-bottom:0}
  html.pg-portal .an-tabla .fam{font-family:var(--display);font-size:12px;font-weight:600;color:var(--navy);
    padding:11px 14px;background:var(--tint);width:64%}
  html.pg-portal .an-tabla .est{padding:11px 14px;text-align:center;font-size:12px}
  html.pg-portal .an-tabla tr:hover .fam{background:var(--blue-050)}
  html.pg-portal .an-vac{font-family:var(--mono);font-size:10.5px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
  html.pg-portal .an-hay{font-family:var(--body);font-size:12px;font-weight:700;color:var(--blue-600);
    background:none;border:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
  html.pg-portal .an-hay:hover{color:var(--navy)}

  html.pg-portal .an-panel{padding:16px 18px}
  html.pg-portal .an-panel__t{background:linear-gradient(120deg,var(--navy) 0%,var(--navy-2) 100%);color:#fff;
    font-family:var(--display);font-size:12.5px;font-weight:700;letter-spacing:.06em;
    text-transform:uppercase;padding:12px 14px;text-align:center;border-radius:12px 12px 0 0}
  html.pg-portal .an-panel__bus{border:1px solid var(--line);border-top:0;padding:12px 14px;background:var(--tint-2)}
  html.pg-portal .an-panel__bus input{width:100%;font-family:var(--body);font-size:13px;padding:10px 12px;
    border:1px solid var(--blue-200);border-radius:8px;background:#fff;color:var(--ink)}
  html.pg-portal .an-panel__bus input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-050)}
  html.pg-portal .an-lista{border:1px solid var(--line);border-top:0;border-radius:0 0 12px 12px;
    max-height:420px;overflow:auto;background:#fff}
  /* La fila tiene DOS zonas pulsables independientes: la imagen abre la foto
     en otra pestaña; el resto abre la ficha del registro. Por eso la fila es un
     contenedor y no un botón: un <button> dentro de otro no es válido. */
  html.pg-portal .an-fila{display:flex;align-items:stretch;border-bottom:1px solid var(--soft)}
  html.pg-portal .an-fila:last-child{border-bottom:0}
  html.pg-portal .an-fila__ir{flex:1 1 auto;display:flex;align-items:center;gap:14px;text-align:left;
    font-family:var(--body);font-size:13px;color:var(--ink);background:none;border:0;
    padding:12px 16px;cursor:pointer;transition:.12s;min-width:0}
  html.pg-portal .an-fila__ir:hover{background:var(--blue-050)}
  html.pg-portal .an-fila__tx{flex:1 1 auto;line-height:1.45;min-width:0}
  html.pg-portal .an-fila__tx small{display:block;font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:2px}
  html.pg-portal .an-fila__img{flex:0 0 auto;display:grid;place-items:center;background:none;border:0;
    padding:12px 4px 12px 16px;cursor:pointer;transition:.12s;border-radius:8px}
  html.pg-portal .an-fila__img:hover{background:var(--blue-050)}
  html.pg-portal .an-fila__img:hover .thumb{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-050)}
  html.pg-portal .an-fila__go{flex:0 0 auto;color:var(--blue-600)}
  html.pg-portal .an-pie{padding:14px 18px 18px;display:flex;justify-content:center}

  @media (max-width:820px){ html.pg-portal .an-cols{grid-template-columns:1fr} }

  /* ---- detalle del punto elegido ---- */
  html.pg-portal .mapa__det{border-top:1px solid var(--line);padding:16px 18px}
  html.pg-portal .mapa__det h4{margin:0 0 2px;font-family:var(--display);font-size:14px;font-weight:700;color:var(--navy)}
  html.pg-portal .mapa__det .sub{font-size:12px;color:var(--muted);margin:0 0 12px}
  html.pg-portal .mapa__vacio{padding:26px 14px;text-align:center;font-size:12.5px;color:var(--muted)}
  html.pg-portal .mapa__vacio b{display:block;color:var(--navy);font-size:13.5px;margin-bottom:3px}
  html.pg-portal .tbl-mapa th{background:var(--tint-2)}
  /* la unidad va fuera del chip: dentro se pondría en mayúsculas y dB(A) no lo es */
  html.pg-portal .uni{font-family:var(--mono);font-size:10px;color:var(--muted);margin-left:6px}
  html.pg-portal .tbl-mapa tbody tr:last-child td{border-bottom:0}

  @media (max-width:640px){
    html.pg-portal .mapa__barra{padding:12px}
    html.pg-portal .mapa__campo{flex:1 1 100%}
    html.pg-portal .mapa__lienzo{padding:12px 12px 0}
    html.pg-portal .mapa__cuenta{margin-left:0;width:100%}
  }

  /* ---------- TARJETAS ---------- */
  html.pg-portal .card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;margin-top:20px}
  /* La tarjeta recorta lo que se sale de ella (para las esquinas redondeadas).
     En el historial de análisis eso cortaba el desplegable del criterio cuando
     la tarjeta era corta —al entrar, con el aviso de "elija un criterio"— y
     sólo se veía la primera opción. Aquí no hay nada que recortar. */
  html.pg-portal #pAnaH .card{overflow:visible}

  html.pg-portal .card__hd{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 18px;border-bottom:1px solid var(--line);
    background:linear-gradient(180deg,var(--tint),#fff);flex-wrap:wrap}
  html.pg-portal .card__hd h2{font-family:var(--display);font-size:18px;font-weight:700;color:var(--navy);margin:0;
    letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
  html.pg-portal .card__hd h2::before{content:"";width:4px;height:18px;border-radius:2px;background:var(--blue);flex:0 0 4px}
  /* El color de la franja superior identifica el TIPO de pantalla, no el
     servicio: azul lo que acaba de pasar (intervenciones y análisis), verde el
     inventario (equipos, áreas / sistemas, historial), ámbar el trabajo en
     curso y rojo lo que vence. Así una misma pestaña se reconoce por su color
     en Calibraciones, en Validaciones y en Ambientales. */
  html.pg-portal #pInt  .card__hd h2::before,
  html.pg-portal #pIntA .card__hd h2::before,
  html.pg-portal #pAna  .card__hd h2::before{background:var(--blue)}
  html.pg-portal #pEq   .card__hd h2::before,
  html.pg-portal #pAre  .card__hd h2::before,
  html.pg-portal #pAnaH .card__hd h2::before{background:var(--green)}
  html.pg-portal #pOt   .card__hd h2::before{background:var(--amber)}
  html.pg-portal #pRec  .card__hd h2::before,
  html.pg-portal #pRecA .card__hd h2::before{background:var(--red)}

  html.pg-portal #pInt  .card,
  html.pg-portal #pIntA .card,
  html.pg-portal #pAna  .card{border-top:3px solid var(--blue)}
  html.pg-portal #pEq   .card,
  html.pg-portal #pAre  .card,
  html.pg-portal #pAnaH .card{border-top:3px solid var(--green)}
  html.pg-portal #pOt   .card{border-top:3px solid var(--amber)}
  html.pg-portal #pRec  .card,
  html.pg-portal #pRecA .card{border-top:3px solid var(--red)}
  html.pg-portal .card__hd .hint{font-family:var(--mono);font-size:10.5px;color:var(--muted)}
  /* aviso de Órdenes de trabajo: «no se filtran por ubicación» */
  html.pg-portal .ot-aviso{margin:0 16px 10px;padding:7px 11px;border-radius:8px;
    background:var(--amber-050);color:#8E6210;border:1px solid #EFD9A6;
    font-family:var(--body);font-size:12px;line-height:1.45}
  html.pg-portal .ot-aviso[hidden]{display:none}
  html.pg-portal .card__hd .hd-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
  html.pg-portal .card__bd{padding:10px 10px 4px}
  html.pg-portal .scroll{overflow-x:auto}
  /* Las tablas que no caben se reducen lo justo con `zoom` desde portal.js
     (ajustarTabla(), 2026-10-15): según lo que hay en la tabla, no según el
     ancho de pantalla. */

  /* con la zona central en 1200 px, el encabezado más largo de "Últimas
     intervenciones" se parte en dos líneas en vez de empujar la tabla */
  html.pg-portal .tbl-int th:last-child{white-space:normal;line-height:1.25}

  /* ---------- TABLA ---------- */
  html.pg-portal table{width:100%;border-collapse:collapse;font-size:11px}
  /* el relleno horizontal se ajustó de 10 a 8 px al pasar la zona central de
     1280 a 1200 px, para que las tablas anchas sigan cabiendo sin scroll */
  html.pg-portal th{font-family:var(--mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:#2B4A78;
    text-align:left;font-weight:600;padding:9px 8px;border-bottom:1px solid var(--line);white-space:nowrap;
    background:var(--tint-2)}
  html.pg-portal thead tr.hd th:first-child{border-radius:6px 0 0 0}
  html.pg-portal thead tr.hd th:last-child{border-radius:0 6px 0 0}
  html.pg-portal thead tr.flt th{background:var(--tint);padding:6px 6px;border-bottom:1px solid var(--line)}
  html.pg-portal thead tr.flt input{width:100%;font-family:var(--body);font-size:11px;padding:6px 9px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink)}
  html.pg-portal thead tr.flt input::placeholder{color:#9AA8BC;font-family:var(--mono);font-size:9.5px}
  html.pg-portal thead tr.flt input:focus{border-color:var(--blue);outline:none}
  html.pg-portal td{padding:8px 8px;border-bottom:1px solid var(--soft);font-size:11px;vertical-align:middle;line-height:1.4}
  html.pg-portal tbody tr:last-child td{border-bottom:0}
  html.pg-portal tbody tr:hover{background:#FBFCFD}
  html.pg-portal tbody tr.is-selected{background:var(--blue-050)}
  html.pg-portal td.mono{font-family:var(--mono);font-size:10.5px}
  html.pg-portal th.c,html.pg-portal td.c{text-align:center}
  html.pg-portal a.doc{font-family:var(--mono);font-size:10.5px;color:var(--blue-600);font-weight:600;text-decoration:none}
  /* botón de enlace: se ve como un enlace pero es un <button>, porque abre un
     diálogo y no navega a ninguna parte (Efectos y Normativa) */
  html.pg-portal .lnk{font-family:var(--body);font-size:11px;font-weight:600;color:var(--blue-600);
    background:var(--blue-050);border:1px solid var(--blue-200);border-radius:6px;
    padding:4px 10px;cursor:pointer;transition:.12s;white-space:nowrap}
  html.pg-portal .lnk:hover{background:var(--blue-200);color:var(--navy);border-color:var(--blue)}
  html.pg-portal a.doc:hover{text-decoration:underline}
  html.pg-portal a.eq{font-family:var(--body);font-size:11.5px;font-weight:600;color:var(--navy);text-decoration:none}
  html.pg-portal a.eq:hover{color:var(--blue-600);text-decoration:underline}
  html.pg-portal .eqsub{font-family:var(--mono);font-size:9.5px;color:var(--muted);margin-top:1px}
  html.pg-portal .fecha{font-family:var(--mono);font-size:10.5px;white-space:nowrap}
  html.pg-portal .fecha small{display:block;font-size:9px;color:var(--muted)}
  html.pg-portal .empty{padding:26px 14px;text-align:center;font-size:12px;color:var(--muted)}
  html.pg-portal .empty b{color:var(--navy)}

  /* El tipo de servicio (`s`). Hay 36 y textos de hasta 50 letras («MEDICIÓN
     PARA EL BALANCEO DEL SISTEMA DE VENTILACIÓN»): la etiqueta se parte en
     líneas en vez de ensanchar la columna. El color es de la FAMILIA, no del
     código (SVC_FAMILIA en portal.js): 36 colores no se distinguirían. */
  html.pg-portal .svc{display:inline-block;font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.05em;padding:3px 7px;border-radius:5px;white-space:normal;max-width:170px;line-height:1.35}
  html.pg-portal .svc--f-calib{background:var(--blue-050);color:#2B6A92}
  html.pg-portal .svc--f-manto{background:#EEF1F6;color:var(--navy)}
  html.pg-portal .svc--f-calif{background:#E3F4F2;color:#1F6F68}
  html.pg-portal .svc--f-valid{background:#F0EAF8;color:#5B3F8C}
  html.pg-portal .svc--f-caract{background:#FBF1DE;color:#8E6210}
  html.pg-portal .svc--f-anal{background:#E6F4EA;color:#2E7D46}
  /* Tablas sin la columna «Ubicación» (servicios que no declaran ese filtro:
     Validaciones, Automatización). columnaUbicacion() de portal.js pone la
     clase en la pestaña: intervenciones, equipos y recordatorios de equipos. */
  html.pg-portal .sin-ubic .col-ubi,
  html.pg-portal .sin-ubic td.ubi{display:none}
  /* un código que el portal no conoce: tal cual, neutro, con borde discontinuo */
  html.pg-portal .svc--f-otro{background:transparent;color:#5A6678;border:1px dashed #B8C2CF}
  html.pg-portal .svcnote{font-family:var(--mono);font-size:9px;color:#8E6210;margin-top:4px;max-width:130px;line-height:1.35;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

  html.pg-portal .chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9.5px;font-weight:600;
    letter-spacing:.05em;text-transform:uppercase;padding:4px 9px;border-radius:999px;border:1px solid transparent;white-space:nowrap}
  html.pg-portal .chip .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
  html.pg-portal .chip--ok{background:var(--green-050);color:#0F7A3C;border-color:var(--green-200)}
  html.pg-portal .chip--warn{background:var(--amber-050);color:#8E6210;border-color:#EFD9A6}
  html.pg-portal .chip--bad{background:var(--red-050);color:#9A2E27;border-color:var(--red-200)}
  html.pg-portal .chip--info{background:var(--blue-050);color:#2B6A92;border-color:var(--blue-200)}

  html.pg-portal input[type="checkbox"]{width:15px;height:15px;accent-color:var(--blue);cursor:pointer}

  html.pg-portal .dlgroup{display:flex;align-items:center;justify-content:center;gap:6px}
  html.pg-portal .ic{width:26px;height:26px;border-radius:7px;border:1px solid var(--line);background:var(--white);
    display:inline-grid;place-items:center;cursor:pointer;text-decoration:none;transition:.12s}
  html.pg-portal .ic:hover{border-color:var(--blue);background:var(--blue-050)}
  html.pg-portal .ic svg{display:block}
  html.pg-portal .ic--off{opacity:.28;pointer-events:none}
  html.pg-portal .ic--blank{visibility:hidden;pointer-events:none}
  html.pg-portal .ic--pdf{color:var(--red)}
  html.pg-portal .ic--xls{color:#0F7A3C}
  html.pg-portal .ic--img{color:var(--blue-600)}
  html.pg-portal .ic--pro{color:var(--navy)}
  /* acceso explícito a la ficha del equipo: un icono se ve, un enlace hay que adivinarlo */
  html.pg-portal .ic--ficha{color:var(--navy);border-color:var(--blue-200);background:var(--blue-050)}
  html.pg-portal .ic--ficha:hover{border-color:var(--navy);background:var(--navy);color:#fff}

  html.pg-portal .rr,html.pg-portal .rra,html.pg-portal .otdrr{font-family:var(--body);font-size:10.5px;font-weight:600;padding:5px 24px 5px 9px;border:1px solid var(--line);
    border-radius:6px;background:var(--white);color:var(--navy);cursor:pointer;appearance:none;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1 5 5 9 1' fill='none' stroke='%234292C3' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 8px center;min-width:118px}
  /* con la zona central en 1200 px el desplegable se adapta a su columna en
     vez de fijar el ancho por el texto de la opción más larga */
  html.pg-portal .tbl-int .rr{width:100%;min-width:100px}
  /* La tabla de análisis lleva 14 columnas: se aprieta un poco para que quepa
     en los 1200 px de la zona central sin desplazarse en horizontal. */
  html.pg-portal .tbl-ana th,html.pg-portal .tbl-ana td{padding-left:6px;padding-right:6px}
  html.pg-portal .tbl-ana td:nth-child(2),html.pg-portal .tbl-ana td:nth-child(3),html.pg-portal .tbl-ana td:nth-child(8){white-space:nowrap}
  html.pg-portal .tbl-ana .rra{width:100%;min-width:96px;font-size:10px;padding:5px 20px 5px 7px}
  html.pg-portal .tbl-ana .lnk{padding:4px 8px}
  html.pg-portal .rr:hover,html.pg-portal .rra:hover,html.pg-portal .otdrr:hover{border-color:var(--blue)}
  html.pg-portal .rr[data-v="acuse"],html.pg-portal .rra[data-v="acuse"],html.pg-portal .otdrr[data-v="acuse"]{border-color:var(--green-200);background-color:var(--green-050);color:#0F7A3C}
  html.pg-portal .rr[data-v="rejobs"],html.pg-portal .rra[data-v="rejobs"],html.pg-portal .otdrr[data-v="rejobs"]{border-color:var(--red-200);background-color:var(--red-050);color:#9A2E27}
  html.pg-portal .rr[data-v="historico"],html.pg-portal .rra[data-v="historico"],html.pg-portal .otdrr[data-v="historico"]{border-color:var(--blue-200);background-color:var(--blue-050);color:#2B6A92}

  /* miniatura de foto del equipo (thumbnail servida ya reducida por el servidor) */
  html.pg-portal .thumb{width:48px;height:34px;border-radius:6px;border:1px solid var(--line);overflow:hidden;
    display:inline-grid;place-items:center;cursor:pointer;flex:0 0 48px;
    background:linear-gradient(135deg,var(--tint-2),var(--blue-050));color:var(--blue-600);
    transition:.15s;text-decoration:none}
  html.pg-portal .thumb:hover{border-color:var(--blue);transform:scale(1.06);box-shadow:0 4px 12px -4px rgba(10,37,84,.35)}
  html.pg-portal .thumb img{width:100%;height:100%;object-fit:cover;display:block}

  html.pg-portal .obs{font-size:10.5px;color:var(--muted);max-width:150px;line-height:1.35;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}
  html.pg-portal a.obs{cursor:pointer;text-decoration:none}
  html.pg-portal a.obs:hover{color:var(--blue-600);text-decoration:underline}

  /* chip de archivo adjunto (feed del chat) */
  html.pg-portal .fchip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9px;color:var(--blue-600);
    background:var(--blue-050);border:1px solid var(--blue-200);border-radius:6px;padding:3px 8px;margin:4px 4px 0 0;
    max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  html.pg-portal .msg--cli .bub .fchip{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.35);color:#fff}

  /* adjunto pendiente en la caja de escritura */
  html.pg-portal .chatadj{flex:0 0 auto;background:#fff;padding:0 12px}
  html.pg-portal .chatadj .rej__file{margin-bottom:8px}
  html.pg-portal .chatclip{width:40px;height:40px;border-radius:11px;border:1px solid var(--line);background:var(--white);
    color:var(--blue-600);cursor:pointer;display:grid;place-items:center;flex:0 0 40px;transition:.12s}
  html.pg-portal .chatclip:hover{border-color:var(--blue);background:var(--blue-050)}

  html.pg-portal .more{border-top:1px solid var(--soft);padding:10px 12px 8px;display:flex;justify-content:center}
  html.pg-portal .more button{font-family:var(--body);font-size:11.5px;font-weight:600;color:var(--blue-600);
    background:transparent;border:0;cursor:pointer;padding:6px 12px;border-radius:6px;
    display:inline-flex;align-items:center;gap:7px}
  html.pg-portal .more button:hover{background:var(--blue-050)}
  html.pg-portal .more{gap:8px}
  html.pg-portal .more button::after{content:"";width:7px;height:7px;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;
    transform:rotate(45deg) translate(-1px,-1px)}
  html.pg-portal .more button[data-a="menos"]{color:var(--muted)}
  html.pg-portal .more button[data-a="menos"]::after{transform:rotate(-135deg) translate(-1px,2px)}

  html.pg-portal .selbar{display:none;align-items:center;gap:12px;padding:10px 18px;background:var(--blue-050);border-bottom:1px solid var(--blue-200)}
  html.pg-portal .selbar.show{display:flex}
  html.pg-portal .selbar b{font-family:var(--mono);font-size:11px;color:var(--navy)}
  html.pg-portal .selbar .sp{margin-left:auto;display:flex;gap:8px}

  /* ---------- ESTADO DE CALIBRACIÓN (mini línea de tiempo) ---------- */
  html.pg-portal .caltl{min-width:168px}
  html.pg-portal .caltl__bar{position:relative;height:6px;border-radius:4px;background:var(--soft);overflow:visible}
  html.pg-portal .caltl__bar i{display:block;height:100%;border-radius:4px}
  html.pg-portal .caltl--ok .caltl__bar i{background:var(--green)}
  html.pg-portal .caltl--warn .caltl__bar i{background:var(--amber)}
  html.pg-portal .caltl--bad .caltl__bar i{background:var(--red)}
  html.pg-portal .caltl__dot{position:absolute;top:50%;transform:translate(-50%,-50%);width:11px;height:11px;border-radius:50%;
    background:#fff;border:2.5px solid var(--navy);box-shadow:0 1px 4px rgba(10,37,84,.35)}
  html.pg-portal .caltl__fechas{display:flex;justify-content:space-between;align-items:baseline;gap:6px;margin-top:5px}
  html.pg-portal .caltl__fechas span{font-family:var(--mono);font-size:8.5px;color:var(--muted);white-space:nowrap}
  html.pg-portal .caltl__est{font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:.06em}
  html.pg-portal .caltl--ok .caltl__est{color:#0F7A3C}
  html.pg-portal .caltl--warn .caltl__est{color:#8E6210}
  html.pg-portal .caltl--bad .caltl__est{color:#9A2E27}
  html.pg-portal .caltl--none{font-family:var(--mono);font-size:9.5px;color:var(--muted)}
  /* Validaciones: las tres calificaciones (IQ, OQ, PQ) en chips, 2026-10-15 */
  html.pg-portal .calq-fila{display:flex;gap:5px;flex-wrap:wrap;min-width:168px}
  html.pg-portal .calq{display:inline-flex;flex-direction:column;gap:1px;padding:3px 7px;border-radius:7px;border:1px solid transparent;
    font-family:var(--mono);font-size:9px;line-height:1.25;min-width:52px;white-space:nowrap}
  html.pg-portal .calq b{font-weight:700;letter-spacing:.04em}
  html.pg-portal .calq--ok{background:var(--green-050);color:#0F7A3C;border-color:var(--green-200)}
  html.pg-portal .calq--warn{background:var(--amber-050);color:#8E6210;border-color:#EFD9A6}
  html.pg-portal .calq--bad{background:var(--red-050);color:#9A2E27;border-color:var(--red-200)}
  html.pg-portal .calq--no{background:transparent;color:var(--muted);border:1px dashed #B8C2CF}
  /* hecho y sin vencimiento (una instalación): neutro, no cuenta para el estado */
  html.pg-portal .calq--hecho{background:var(--soft);color:#5B6B80;border-color:var(--line)}

  /* filtros por estado de calibración */
  html.pg-portal .calfil{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
  html.pg-portal .calsub{flex:1 1 100%;display:flex;justify-content:center;align-items:center;gap:12px;
    flex-wrap:wrap;margin-top:4px}
  html.pg-portal .calsub .exp{font-family:var(--mono);font-size:9.5px;color:var(--muted);line-height:1.5;max-width:420px}
  html.pg-portal .calfil .chip{cursor:pointer;transition:.12s;border-style:solid}
  html.pg-portal .calfil .chip:hover{transform:translateY(-1px)}
  html.pg-portal .calfil .chip[aria-pressed="true"]{box-shadow:0 0 0 2px currentColor inset}
  html.pg-portal .chip--none{background:var(--soft);color:var(--muted);border-color:var(--line)}
  html.pg-portal .chip--otro{background:var(--white);color:var(--muted);border-color:#B8C2CF;border-style:dashed}
  html.pg-portal .chip--otro .dot{background:#9AA8BC}
  html.pg-portal .chip--inact{background:#EEF1F6;color:var(--navy);border-color:#C9D2DE}
  html.pg-portal .caltl--inact{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9px;font-weight:600;
    letter-spacing:.05em;text-transform:uppercase;color:var(--navy);background:#EEF1F6;
    border:1px solid #C9D2DE;border-radius:999px;padding:4px 10px}
  html.pg-portal .caltl--inact::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--navy);opacity:.5}
  html.pg-portal tr.row-inact td{opacity:.62}
  html.pg-portal tr.row-inact .thumb{filter:grayscale(1)}
  html.pg-portal .btn-xls{display:inline-flex;align-items:center;gap:7px;font-family:var(--body);font-size:11px;font-weight:600;
    color:#0F7A3C;background:var(--green-050);border:1px solid var(--green-200);border-radius:999px;
    padding:5px 12px;cursor:pointer;transition:.13s;white-space:nowrap}
  html.pg-portal .btn-xls:hover{background:var(--green-200);border-color:var(--green)}
  html.pg-portal .btn-xls .ext{font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:.05em;
    background:#0F7A3C;color:#fff;border-radius:4px;padding:2px 5px}
  html.pg-portal .th-sub{display:block;font-size:8px;font-weight:400;letter-spacing:.04em;color:var(--muted);
    text-transform:none;margin-top:2px;max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html.pg-portal th.sortable{cursor:pointer;user-select:none}
  html.pg-portal th.sortable:hover{color:var(--blue-600)}
  html.pg-portal th.sortable .arr{display:inline-block;margin-left:5px;opacity:.4;transition:.12s}
  html.pg-portal th.sortable[data-dir="asc"] .arr{opacity:1;transform:rotate(0)}
  html.pg-portal th.sortable[data-dir="desc"] .arr{opacity:1;transform:rotate(180deg)}

  /* ---------- AVANCE OT ---------- */
  html.pg-portal .prog{display:flex;align-items:center;gap:8px;min-width:120px}
  html.pg-portal .prog .bar{flex:1;height:6px;border-radius:4px;background:var(--soft);overflow:hidden}
  html.pg-portal .prog .bar i{display:block;height:100%;border-radius:4px;background:var(--blue)}
  html.pg-portal .prog .bar i.full{background:var(--green)}
  /* chips de facturación (icono circular + texto) */
  html.pg-portal .fact{display:inline-flex;align-items:center;gap:7px;font-family:var(--body);font-size:11.5px;font-weight:600;
    padding:5px 12px 5px 6px;border-radius:999px;border:1px solid transparent;white-space:nowrap}
  html.pg-portal .fact .fic{width:17px;height:17px;border-radius:50%;display:grid;place-items:center;color:#fff;flex:0 0 17px}
  html.pg-portal .fact--facturado{background:var(--blue-050);color:#2B6A92;border-color:var(--blue-200)}
  html.pg-portal .fact--facturado .fic{background:#2B6A92}
  html.pg-portal .fact--pendiente{background:var(--amber-050);color:#8E6210;border-color:#EFD9A6}
  html.pg-portal .fact--pendiente .fic{background:var(--amber)}
  html.pg-portal .fact--pagado{background:var(--green-050);color:#0F7A3C;border-color:var(--green-200)}
  html.pg-portal .fact--pagado .fic{background:var(--green)}
  /* liberada: se ejecutó y no se factura — neutro, no es ni deuda ni cobro */
  html.pg-portal .fact--liberada{background:var(--soft);color:var(--muted);border-color:var(--line)}
  html.pg-portal .fact--liberada .fic{background:var(--muted)}
  /* un estado que el portal no conoce: se ve, pero sin color que lo confunda */
  html.pg-portal .fact--otro{background:var(--white);color:var(--muted);border-color:var(--line);border-style:dashed}

  html.pg-portal .avwrap{display:flex;align-items:center;gap:9px}
  html.pg-portal .avwrap .durring .arc{stroke:var(--blue)}
  html.pg-portal .avwrap .lbl{font-family:var(--mono);font-size:8.5px;color:var(--muted);line-height:1.6;white-space:nowrap}
  html.pg-portal .avwrap .durring .num{font-size:9px}
  /* 100 %: círculo verde cerrado */
  html.pg-portal .avwrap.full .durring .arc{stroke:var(--green)}
  html.pg-portal .avwrap.full .durring .num{color:#0F7A3C}
  /* 0 %: solo el aro gris, más oscuro para que se vea */
  html.pg-portal .avwrap.cero .durring .track{stroke:#AEBBCC}
  html.pg-portal .avwrap.cero .durring .num{color:#5F7188}
  /* en ejecución (<100 %): cometa girando sobre el aro */
  @keyframes orbita{to{transform:rotate(360deg)}}
  html.pg-portal .durring .spin{animation:orbita 1.6s linear infinite;transform-origin:19px 19px}
  html.pg-portal .durring .spin circle{stroke:var(--blue);opacity:.85}
  /* abiertas: círculo completo en naranja con destello girando muy sutil */
  html.pg-portal .avwrap.nar .durring .arc{stroke:#F07E22}
  html.pg-portal .avwrap.nar .durring .num{color:#B35A0F}
  html.pg-portal .avwrap.nar .durring .spin{animation-duration:3s}
  html.pg-portal .avwrap.nar .durring .spin circle{stroke:#FFD9B0;opacity:.85}

  html.pg-portal .durtxt{font-family:var(--mono);font-size:11px;color:var(--ink);white-space:nowrap}
  html.pg-portal .durtxt b{font-size:14px;font-weight:700;color:var(--navy)}
  html.pg-portal .durtxt small{display:block;font-size:8.5px;color:var(--muted);margin-top:2px}
  html.pg-portal .durtxt.rojo{color:#9A2E27}
  html.pg-portal .durtxt.rojo b{color:var(--red)}
  html.pg-portal .fact-alerta{color:var(--red);font-weight:700}
  html.pg-portal .sello-abierta{font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:.08em;
    color:#2B6A92;background:var(--blue-050);border:1px solid var(--blue-200);border-radius:5px;
    padding:2px 7px;margin-left:7px;vertical-align:1px}
  html.pg-portal .prog .bar i.abierta{width:100%;background:repeating-linear-gradient(45deg,var(--blue-200) 0 8px,var(--blue-050) 8px 16px);
    animation:fluye 1.2s linear infinite}
  @keyframes fluye{to{background-position:22px 0}}
  html.pg-portal .prog .n{font-family:var(--mono);font-size:9.5px;color:var(--muted);white-space:nowrap}

  /* ---------- LÍNEA DE TIEMPO (Recordatorios, como la original) ---------- */
  html.pg-portal .timeline{padding:14px 18px 6px}
  html.pg-portal .timeline .lbl{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;text-align:center}
  html.pg-portal .tl{display:flex;overflow-x:auto;padding-top:10px;padding-bottom:4px}
  html.pg-portal .mes{position:relative;flex:1 1 0;min-width:88px;text-align:center;cursor:pointer;
    background:var(--blue-050);border:1px solid var(--blue-200);border-left:0;
    padding:11px 6px 12px;transition:.12s;font-family:var(--body)}
  html.pg-portal .mes:first-child{border-left:1px solid var(--blue-200);border-radius:6px 0 0 6px}
  html.pg-portal .mes:last-child{border-radius:0 6px 6px 0}
  html.pg-portal .mes b{display:block;font-family:var(--display);font-size:13px;font-weight:600;color:var(--blue-600);line-height:1.25}
  html.pg-portal .mes span{display:block;font-family:var(--display);font-size:12.5px;font-weight:600;color:var(--blue-600);line-height:1.25}
  html.pg-portal .mes:hover{background:var(--tint)}
  html.pg-portal .mes:hover b,html.pg-portal .mes:hover span{color:var(--navy)}
  html.pg-portal .mes--prev b,html.pg-portal .mes--prev span{color:var(--red)}
  html.pg-portal .mes[aria-pressed="true"]{background:var(--white);border-color:var(--blue-200);box-shadow:inset 0 0 0 1px var(--blue-200);z-index:1}
  html.pg-portal .mes[aria-pressed="true"] b{color:var(--amber)}
  html.pg-portal .mes[aria-pressed="true"] span{color:var(--amber)}
  html.pg-portal .mes[aria-pressed="true"]::before{content:"";position:absolute;left:50%;top:-10px;transform:translateX(-50%);
    border-left:9px solid transparent;border-right:9px solid transparent;border-top:10px solid var(--navy-2)}
  /* contador de equipos del mes: pastilla dentro de la celda, no un círculo flotante
     (con 2 o 3 dígitos el círculo se recortaba y chocaba con el borde) */
  html.pg-portal .mes .badge{display:inline-flex;align-items:center;justify-content:center;
    min-width:30px;height:19px;padding:0 9px;margin-top:7px;border-radius:999px;
    font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.02em;
    background:var(--blue);color:#fff;border:1px solid transparent;transition:.12s}
  html.pg-portal .mes .badge.cero{background:var(--white);color:#9AA8BC;border-color:var(--line);font-weight:600}

  html.pg-portal .mes[aria-pressed="true"] .badge{background:var(--amber);color:#fff;border-color:transparent}
  html.pg-portal .mes[aria-pressed="true"] .badge.cero{background:var(--white);color:var(--amber);border-color:var(--amber)}
  /* meses anteriores: muestra el cumplimiento, no la suma de pendientes.
     Verde ≥90 % · ámbar 75-89 % · rojo <75 %, igual que la tabla de cumplimiento. */
  html.pg-portal .mes--prev .badge{background:var(--red);color:#fff}
  html.pg-portal .mes--prev .badge--cump[data-n="alto"]{background:var(--green)}
  html.pg-portal .mes--prev .badge--cump[data-n="medio"]{background:var(--amber)}
  html.pg-portal .mes--prev[aria-pressed="true"] .badge{background:var(--red);color:#fff}
  html.pg-portal .tlfoot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 0 8px}
  html.pg-portal .tlfoot .sel{font-family:var(--mono);font-size:10.5px;color:var(--blue-600)}
  /* aviso de alcance, justo bajo el título de Recordatorios */
  html.pg-portal .rec-aviso{display:flex;align-items:flex-start;gap:9px;padding:11px 18px;
    border-bottom:1px solid var(--line);background:var(--tint);
    font-size:11.5px;color:var(--muted);line-height:1.5}
  html.pg-portal .rec-aviso svg{flex:0 0 auto;margin-top:2px;color:#8E6210}
  html.pg-portal .rec-aviso b{color:var(--navy)}
  html.pg-portal .rec-aviso a{color:var(--blue-600);font-weight:600;text-decoration:none}
  html.pg-portal .rec-aviso a:hover{text-decoration:underline}
  html.pg-portal .rec-nota{flex:1 1 100%;display:flex;align-items:flex-start;gap:8px;font-size:11px;color:var(--muted);line-height:1.5}
  html.pg-portal .rec-nota svg{flex:0 0 auto;margin-top:2px;color:#8E6210}
  html.pg-portal .rec-nota a{color:var(--blue-600);font-weight:600;text-decoration:none}
  html.pg-portal .rec-nota a:hover{text-decoration:underline}


  /* ---------- MESES ANTERIORES (resumen de 12 meses) ---------- */
  html.pg-portal .prv-res{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
    border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  html.pg-portal .prv-kpi{padding:15px 18px;border-right:1px solid var(--line);min-width:0}
  html.pg-portal .prv-kpi:last-child{border-right:0}
  html.pg-portal .prv-kpi .k{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
  html.pg-portal .prv-kpi .v{font-family:var(--display);font-size:26px;font-weight:700;color:var(--navy);line-height:1.1;margin-top:5px;
    display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
  html.pg-portal .prv-kpi .v .pc{font-family:var(--mono);font-size:13px;font-weight:700;padding:2px 9px;border-radius:999px}
  html.pg-portal .prv-kpi .d{font-size:10.5px;color:var(--muted);line-height:1.45;margin-top:5px}
  html.pg-portal .prv-kpi--ok .v .pc{background:var(--green-050);color:#0F7A3C;border:1px solid var(--green-200)}
  html.pg-portal .prv-kpi--bad .v .pc{background:var(--red-050);color:var(--red);border:1px solid var(--red-200)}
  html.pg-portal .prv-kpi--ok .v{color:#0F7A3C}
  html.pg-portal .prv-kpi--bad .v{color:var(--red)}

  html.pg-portal .prv-cab{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 18px;border-bottom:1px solid var(--line)}
  html.pg-portal .prv-cab .t{font-family:var(--display);font-size:13px;font-weight:700;color:var(--navy)}
  html.pg-portal .prv-cab .s{font-family:var(--mono);font-size:9.5px;color:var(--muted)}
  html.pg-portal .prv-cab .der{margin-left:auto}

  html.pg-portal .tbl-prv .mesnom{font-family:var(--display);font-size:12.5px;font-weight:600;color:var(--navy);white-space:nowrap}
  /* todo el contenido numérico va centrado bajo su título */
  html.pg-portal .tbl-prv td.num{font-family:var(--mono);font-size:12.5px;color:var(--ink);text-align:center;white-space:nowrap}
  html.pg-portal .tbl-prv td.num small{display:block;font-size:9px;color:var(--muted);letter-spacing:.03em}
  html.pg-portal .tbl-prv td.acc{white-space:nowrap}
  html.pg-portal .tbl-prv td.acc .grupo{display:inline-flex;gap:7px;justify-content:center;align-items:center}
  html.pg-portal .tbl-prv td.num.ok{color:#0F7A3C;font-weight:600}
  html.pg-portal .tbl-prv td.num.bad{color:var(--red);font-weight:600}

  /* barra de cumplimiento de dos tramos */
  html.pg-portal .cmp{display:flex;align-items:center;gap:10px;min-width:150px;justify-content:center}
  html.pg-portal .cmp .bar{flex:1;height:9px;border-radius:5px;overflow:hidden;display:flex;background:var(--soft);min-width:70px}
  html.pg-portal .cmp .bar i{display:block;height:100%}
  html.pg-portal .cmp .bar .i-ok{background:var(--green)}
  html.pg-portal .cmp .bar .i-bad{background:var(--red);opacity:.75}
  html.pg-portal .cmp .pc{font-family:var(--mono);font-size:11.5px;font-weight:700;color:#0F7A3C;white-space:nowrap;min-width:38px;text-align:right}
  html.pg-portal .cmp.baja .pc{color:var(--red)}
  html.pg-portal .cmp.media .pc{color:#8E6210}

  /* panel de equipos sin intervenir de un mes */
  html.pg-portal .prv-eq{border-top:1px solid var(--line);background:var(--tint-2)}
  html.pg-portal .prv-eq .prv-cab{background:var(--tint-2);border-bottom:1px solid var(--line)}
  html.pg-portal .prv-eq .prv-cab .t{color:var(--navy)}
  html.pg-portal .prv-eq .scroll{background:var(--white)}
  html.pg-portal .prv-eq .more{background:var(--white)}
  html.pg-portal .tbl-prveq td.mot{font-size:11.5px;color:var(--muted);white-space:nowrap}
  html.pg-portal .tbl-prveq td.mot .pt{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:7px;vertical-align:1px}
  html.pg-portal .tbl-prveq td.mot .pt--cli{background:var(--amber)}
  html.pg-portal .tbl-prveq td.mot .pt--pos{background:var(--blue)}
  html.pg-portal .tbl-prveq td.mot .pt--ina{background:#9AA8BC}
  html.pg-portal .tbl-prveq td.mot .pt--rep{background:var(--green)}
  /* un mes sin nada pendiente no lleva botones: lo dice y se calla */
  html.pg-portal .prv-nada{font-family:var(--mono);font-size:10px;color:var(--green);letter-spacing:.04em}
  html.pg-portal .tbl-prv tr.abierto{background:var(--blue-050)}
  html.pg-portal .tbl-prv tr.abierto .mesnom{color:var(--blue-600)}

  html.pg-portal .prv-nota{display:flex;gap:9px;align-items:flex-start;padding:12px 18px;border-top:1px solid var(--line);
    background:var(--tint);font-size:11px;color:var(--muted);line-height:1.55}
  html.pg-portal .prv-nota svg{flex:0 0 auto;margin-top:2px;color:#8E6210}
  html.pg-portal .prv-nota b{color:var(--navy)}

  /* ---------- MODAL ---------- */
  html.pg-portal .modal{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;padding:20px;
    background:rgba(10,37,84,.55);backdrop-filter:blur(2px)}
  html.pg-portal .modal.open{display:flex}
  html.pg-portal .modal__box{background:#fff;border-radius:14px;max-width:440px;width:100%;overflow:hidden;
    box-shadow:0 24px 60px -20px rgba(10,37,84,.6);border-top:4px solid var(--blue)}
  html.pg-portal .modal__bd{padding:22px 24px 8px}
  html.pg-portal .modal__ic{width:42px;height:42px;border-radius:50%;background:var(--blue-050);border:1px solid var(--blue-200);
    display:grid;place-items:center;color:var(--blue-600);font-family:var(--display);font-size:20px;font-weight:700;margin-bottom:14px}
  html.pg-portal .modal__box h3{font-family:var(--display);font-size:17px;font-weight:700;color:var(--navy);margin:0 0 8px;letter-spacing:-.01em}
  html.pg-portal .modal__box p{font-size:13px;color:var(--muted);line-height:1.55;margin:0}
  html.pg-portal .modal__box p b{color:var(--ink)}
  html.pg-portal .modal__ft{display:flex;justify-content:flex-end;gap:10px;padding:18px 24px 22px}
  html.pg-portal .mbtn{font-family:var(--body);font-size:13px;font-weight:600;padding:9px 16px;border-radius:8px;cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--navy)}
  html.pg-portal .mbtn:hover{border-color:var(--navy)}
  html.pg-portal .mbtn--primary{background:var(--blue);border-color:var(--blue);color:#fff}
  html.pg-portal .mbtn--primary:hover{background:var(--blue-600);border-color:var(--blue-600)}

  /* ---------- TARJETA DEL ASESOR COMERCIAL ---------- */
  html.pg-portal .modal__box--ase{max-width:340px;border-top:0;overflow:visible}
  html.pg-portal .ase__hd{background:linear-gradient(120deg,var(--navy) 0%,var(--navy-2) 100%);
    border-radius:14px 14px 0 0;padding:16px 18px 58px;text-align:center;position:relative}
  html.pg-portal .ase__hd .tt{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#93AACB}
  html.pg-portal .ase__ava{width:116px;height:116px;border-radius:50%;overflow:hidden;margin:-58px auto 0;
    border:4px solid #fff;box-shadow:0 10px 26px -10px rgba(10,37,84,.5);
    background:var(--tint-2);display:grid;place-items:center;color:#9AA8BC;position:relative;z-index:1}
  html.pg-portal .ase__ava img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
  html.pg-portal .ase__nom{text-align:center;padding:12px 20px 0}
  html.pg-portal .ase__nom .n1{font-family:var(--display);font-size:20px;font-weight:700;color:var(--navy);letter-spacing:.04em;text-transform:uppercase;line-height:1.2}
  html.pg-portal .ase__nom .n2{font-family:var(--display);font-size:12.5px;font-weight:600;color:var(--blue-600);letter-spacing:.12em;text-transform:uppercase;margin-top:2px}
  html.pg-portal .ase__nom .chip{margin-top:10px}
  html.pg-portal .ase__datos{padding:16px 20px 4px;display:flex;flex-direction:column;gap:10px}
  html.pg-portal .ase__wa{display:flex;align-items:center;gap:13px;text-decoration:none;
    background:var(--green-050);border:1.5px solid var(--green-200);border-radius:13px;padding:12px 15px;transition:.13s}
  html.pg-portal .ase__wa:hover{border-color:var(--green);box-shadow:0 8px 20px -10px rgba(29,168,81,.5);transform:translateY(-1px)}
  html.pg-portal .ase__wa .wico{width:42px;height:42px;border-radius:50%;background:var(--green);color:#fff;
    display:grid;place-items:center;flex:0 0 42px}
  html.pg-portal .ase__wa b{display:block;font-family:var(--mono);font-size:16px;font-weight:600;color:#0F5C30;letter-spacing:.02em}
  html.pg-portal .ase__wa span{font-size:10.5px;color:#0F7A3C;font-weight:600}
  html.pg-portal .ase__mail{display:flex;align-items:center;gap:13px;text-decoration:none;
    border:1px solid var(--soft);border-radius:13px;padding:10px 15px;transition:.12s}
  html.pg-portal .ase__mail:hover{border-color:var(--blue);background:var(--blue-050)}
  html.pg-portal .ase__mail .mico{width:34px;height:34px;border-radius:50%;background:var(--tint-2);color:var(--blue-600);
    display:grid;place-items:center;flex:0 0 34px}
  html.pg-portal .ase__mail b{display:block;font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--ink)}
  html.pg-portal .ase__mail span{font-family:var(--mono);font-size:9px;color:var(--muted)}
  html.pg-portal .ase__inactivo{text-align:center;padding:0 22px 6px}
  html.pg-portal .ase__inactivo p{font-size:12.5px;color:var(--muted);line-height:1.55;margin-top:12px}

  /* ---------- MODAL: NUEVO EQUIPO ---------- */  /* ---------- MODAL: NUEVO EQUIPO ---------- */
  html.pg-portal .modal__box--neq{max-width:640px;border-top-color:var(--green)}
  html.pg-portal .neq__intro{display:flex;gap:10px;align-items:flex-start;background:var(--green-050);border:1px solid var(--green-200);
    border-radius:10px;padding:10px 12px;margin:12px 0 18px;font-size:12px;color:#0F5C30;line-height:1.5}
  html.pg-portal .neq__intro svg{flex:0 0 auto;margin-top:1px}
  html.pg-portal .neq__grid{display:grid;grid-template-columns:1fr 220px;gap:20px}
  html.pg-portal .neq__campo{margin-bottom:11px}
  /* código o serie repetidos en crear y editar (2026-11-04): el mensaje, «Abrir su ficha» y «… de todos modos» */
  html.pg-portal .neq__repe{margin-top:10px;padding:10px 12px;border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:8px;font-size:12.5px;line-height:1.45}
  html.pg-portal .neq__repe__acc{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
  html.pg-portal .neq__repe__acc:empty{display:none}
  html.pg-portal .neq__campo label{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
    color:var(--muted);margin-bottom:5px}
  html.pg-portal .neq__campo label b{color:var(--red);font-weight:600}
  html.pg-portal .neq__campo input,html.pg-portal .neq__campo select{width:100%;font-family:var(--body);font-size:13px;color:var(--ink);
    border:1px solid var(--line);border-radius:9px;padding:9px 12px;background:var(--white)}
  html.pg-portal .neq__campo input:focus,html.pg-portal .neq__campo select:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-050)}
  html.pg-portal .neq__campo input.bad,html.pg-portal .neq__campo select.bad{border-color:var(--red);background:var(--red-050)}
  html.pg-portal .neq__foto{display:flex;flex-direction:column;gap:9px}
  html.pg-portal .neq__drop{aspect-ratio:4/3;border:2px dashed var(--blue-200);border-radius:12px;background:var(--blue-050);
    display:grid;place-items:center;text-align:center;cursor:pointer;transition:.13s;overflow:hidden;position:relative}
  html.pg-portal .neq__drop:hover{border-color:var(--blue);background:var(--tint-2)}
  html.pg-portal .neq__drop .gu{color:var(--blue-600);font-size:11px;font-weight:500;padding:10px;line-height:1.5}
  html.pg-portal .neq__drop .gu svg{display:block;margin:0 auto 8px}
  html.pg-portal .neq__drop img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  html.pg-portal .neq__fotoq{font-family:var(--body);font-size:11px;font-weight:600;color:var(--red);background:transparent;
    border:0;cursor:pointer;padding:4px;border-radius:6px;display:none}
  html.pg-portal .neq__fotoq.show{display:block}
  html.pg-portal .neq__fotoq:hover{background:var(--red-050)}
  html.pg-portal .neq__hint{font-family:var(--mono);font-size:9px;color:var(--muted);text-align:center}
  @media (max-width:640px){html.pg-portal .neq__grid{grid-template-columns:1fr}}

  /* ---------- PANEL LATERAL: HISTÓRICO Y CHAT ---------- */
  html.pg-portal .chatback{position:fixed;inset:0;background:rgba(10,37,84,.35);backdrop-filter:blur(1px);
    z-index:70;opacity:0;pointer-events:none;transition:opacity .22s}
  html.pg-portal .chatback.show{opacity:1;pointer-events:auto}
  html.pg-portal .chatpanel{position:fixed;top:0;right:0;bottom:0;width:min(430px,100vw);z-index:71;
    background:var(--paper);box-shadow:-18px 0 50px rgba(10,37,84,.35);
    display:flex;flex-direction:column;transform:translateX(102%);transition:transform .26s ease}
  html.pg-portal .chatpanel.open{transform:translateX(0)}

  html.pg-portal .chatpanel__hd{background:linear-gradient(120deg,var(--navy) 0%,var(--navy-3) 60%,var(--navy-2) 100%);
    padding:14px 16px;display:flex;align-items:center;gap:12px;flex:0 0 auto}
  html.pg-portal .chatpanel__hd .thumb{flex:0 0 48px;cursor:default;border-color:rgba(255,255,255,.3)}
  html.pg-portal .chatpanel__hd .thumb:hover{transform:none;box-shadow:none}
  html.pg-portal .chatpanel__t{min-width:0;flex:1}
  html.pg-portal .chatpanel__t b{display:block;font-family:var(--display);font-size:13.5px;font-weight:700;color:#fff;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html.pg-portal .chatpanel__t span{font-family:var(--mono);font-size:10px;color:#93AACB}
  html.pg-portal .chatpanel__x{width:32px;height:32px;border-radius:8px;border:1px solid rgba(255,255,255,.25);
    background:rgba(255,255,255,.10);color:#dfe8f4;cursor:pointer;display:grid;place-items:center;flex:0 0 32px}
  html.pg-portal .chatpanel__x:hover{background:rgba(255,255,255,.18);color:#fff}
  html.pg-portal .chatpanel__rail{height:5px;background:repeating-linear-gradient(90deg,var(--blue) 0 1px,transparent 1px 10px);opacity:.5;flex:0 0 auto}

  html.pg-portal .chatfeed{flex:1;overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:12px}

  /* eventos del registro (línea de tiempo) */
  html.pg-portal .cev{align-self:center;max-width:94%;text-align:center}
  html.pg-portal .cev .pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:9.5px;font-weight:600;
    letter-spacing:.05em;text-transform:uppercase;padding:5px 11px;border-radius:999px;border:1px solid var(--line);background:#fff}
  html.pg-portal .cev .pill .dot{width:6px;height:6px;border-radius:50%}
  html.pg-portal .cev--emit .pill{color:#2B6A92;border-color:var(--blue-200);background:var(--blue-050)}
  html.pg-portal .cev--emit .pill .dot{background:var(--blue)}
  html.pg-portal .cev--ok .pill{color:#0F7A3C;border-color:var(--green-200);background:var(--green-050)}
  html.pg-portal .cev--ok .pill .dot{background:var(--green)}
  html.pg-portal .cev--bad .pill{color:#9A2E27;border-color:var(--red-200);background:var(--red-050)}
  html.pg-portal .cev--bad .pill .dot{background:var(--red)}
  html.pg-portal .cev--obs .pill{color:#8E6210;border-color:#EFD9A6;background:var(--amber-050)}
  html.pg-portal .cev--obs .pill .dot{background:var(--amber)}
  html.pg-portal .cev small{display:block;font-family:var(--mono);font-size:9px;color:var(--muted);margin-top:4px}
  html.pg-portal .cev .det{font-size:11px;color:var(--muted);margin-top:5px;line-height:1.45;
    background:#fff;border:1px dashed var(--line);border-radius:9px;padding:7px 10px;text-align:left}

  /* burbujas de chat */
  html.pg-portal .msg{display:flex;gap:9px;max-width:88%}
  /* el cliente (y el invitado) a la izquierda, ELICROM a la derecha (pedido del cliente, 2026-10-22) */
  html.pg-portal .msg--cli{align-self:flex-start}
  html.pg-portal .msg--eli{align-self:flex-end;flex-direction:row-reverse}
  html.pg-portal .msg .ava{width:28px;height:28px;border-radius:50%;flex:0 0 28px;display:grid;place-items:center;
    font-family:var(--display);font-size:12px;font-weight:700;margin-top:2px}
  html.pg-portal .msg--eli .ava{background:var(--navy);color:#7FC0E4}
  html.pg-portal .msg--cli .ava{background:var(--blue-200);color:var(--navy)}
  html.pg-portal .msg .bub{border-radius:13px;padding:9px 12px;font-size:12.5px;line-height:1.5}
  html.pg-portal .msg--eli .bub{background:#fff;border:1px solid var(--line);color:var(--ink);border-top-right-radius:4px}
  html.pg-portal .msg--cli .bub{background:var(--blue);color:#fff;border-top-left-radius:4px}
  html.pg-portal .msg .meta{display:block;font-family:var(--mono);font-size:8.5px;margin-top:5px;opacity:.65}

  html.pg-portal .chattools{flex:0 0 auto;display:flex;gap:8px;padding:10px 12px;background:#fff;border-bottom:1px solid var(--line)}
  html.pg-portal .chattools .btn{flex:1;font-size:11.5px;padding:8px 10px}
  html.pg-portal .modal--top{z-index:90}
  html.pg-portal .modal__box--ancho{max-width:560px}
  html.pg-portal .mini-nota{font-family:var(--mono);font-size:9.5px;color:var(--muted);margin-top:10px;display:flex;align-items:center;gap:7px}
  html.pg-portal .mini-nota::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--navy);flex:0 0 6px}
  html.pg-portal .inv-buscar{width:100%;font-family:var(--body);font-size:12.5px;padding:9px 12px;border:1px solid var(--line);
    border-radius:9px;background:var(--tint);margin-bottom:8px}
  html.pg-portal .inv-buscar:focus{outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px var(--blue-050)}
  html.pg-portal .inv-lista{max-height:240px;overflow-y:auto;border:1px solid var(--soft);border-radius:10px}
  html.pg-portal .inv-fila{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--soft);font-size:12px}
  html.pg-portal .inv-fila:last-child{border-bottom:0}
  html.pg-portal .inv-fila:hover{background:var(--tint)}
  html.pg-portal .inv-fila .nom{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html.pg-portal .inv-fila .btn{font-size:11px;padding:5px 11px}
  html.pg-portal .inv-quitar{font-family:var(--body);font-size:11px;font-weight:600;color:var(--red);background:transparent;
    border:0;cursor:pointer;padding:4px 8px;border-radius:6px}
  html.pg-portal .inv-quitar:hover{background:var(--red-050)}
  html.pg-portal .scroll-modal{max-height:210px;overflow-y:auto;border:1px solid var(--soft);border-radius:10px}
  html.pg-portal .scroll-modal table{font-size:11.5px}

  html.pg-portal .chatwrite{flex:0 0 auto;background:#fff;border-top:1px solid var(--line);padding:11px 12px;display:flex;gap:9px;align-items:flex-end}
  html.pg-portal .chatwrite textarea{flex:1;resize:none;max-height:110px;font-family:var(--body);font-size:13px;line-height:1.45;
    color:var(--ink);border:1px solid var(--line);border-radius:11px;padding:10px 12px;background:var(--tint)}
  html.pg-portal .chatwrite textarea:focus{outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px var(--blue-050)}
  html.pg-portal .chatwrite button{width:40px;height:40px;border-radius:11px;border:0;background:var(--blue);color:#fff;
    cursor:pointer;display:grid;place-items:center;flex:0 0 40px;transition:.12s}
  html.pg-portal .chatwrite button:hover{background:var(--blue-600)}
  html.pg-portal .chatwrite button:disabled{opacity:.4;cursor:default}
  html.pg-portal .chatnote{flex:0 0 auto;font-family:var(--mono);font-size:9px;color:var(--muted);text-align:center;
    padding:0 12px 10px;background:#fff}

  /* ---------- PIE (idéntico a la ficha) ---------- */
  html.pg-portal .foot{background:linear-gradient(120deg,var(--navy) 0%,var(--navy-3) 60%,var(--navy-2) 100%);padding:0;margin-top:32px;flex:0 0 auto}
  html.pg-portal .foot__strip{height:56px}


  @media (max-width:900px){
    html.pg-portal .topbar__in{flex-wrap:wrap;row-gap:8px}
    html.pg-portal .mainmenu{position:static;transform:none;order:3;width:100%;white-space:normal;flex-wrap:wrap}
    html.pg-portal .topbar img.logo{order:1}
    html.pg-portal .topbar__r{order:2;margin-left:auto}
  }
  @media (max-width:900px){
    html.pg-portal .tz-cert__v{display:none}
  }
  @media (max-width:900px){
    html.pg-portal .qz-form{grid-template-columns:1fr}
    html.pg-portal .qz-side{border-left:0;border-top:1px solid var(--line)}
    html.pg-portal .ub-cols{grid-template-columns:1fr}
    html.pg-portal .ub-col{border-right:0;border-bottom:1px solid var(--line)}
  }
  @media (max-width:900px){
    html.pg-portal .mr-form{grid-template-columns:1fr}
    html.pg-portal .mr-bloque{border-right:0;border-bottom:1px solid var(--line)}
  }
  @media (max-width:900px){
    html.pg-portal .prv-res{grid-template-columns:1fr}
    html.pg-portal .prv-kpi{border-right:0;border-bottom:1px solid var(--line)}
    html.pg-portal .prv-kpi:last-child{border-bottom:0}
  }
  @media (max-width:760px){
    html.pg-portal .filters .f{flex:1 1 100%}
    html.pg-portal .tbl-int th:nth-child(3), html.pg-portal .tbl-int td:nth-child(3), html.pg-portal .tbl-int th:nth-child(6), html.pg-portal .tbl-int td:nth-child(6), html.pg-portal .tbl-int th:nth-child(7), html.pg-portal .tbl-int td:nth-child(7), html.pg-portal .tbl-int th:nth-child(8), html.pg-portal .tbl-int td:nth-child(8), html.pg-portal .tbl-int th:nth-child(9), html.pg-portal .tbl-int td:nth-child(9){display:none}
    html.pg-portal .tbl-eq th:nth-child(5), html.pg-portal .tbl-eq td:nth-child(5), html.pg-portal .tbl-eq th:nth-child(6), html.pg-portal .tbl-eq td:nth-child(6), html.pg-portal .tbl-eq th:nth-child(8), html.pg-portal .tbl-eq td:nth-child(8){display:none}
    html.pg-portal .tbl-que th:nth-child(3), html.pg-portal .tbl-que td:nth-child(3){display:none}
    html.pg-portal .tbl-rec th:nth-child(3), html.pg-portal .tbl-rec td:nth-child(3), html.pg-portal .tbl-rec th:nth-child(4), html.pg-portal .tbl-rec td:nth-child(4), html.pg-portal .tbl-rec th:nth-child(6), html.pg-portal .tbl-rec td:nth-child(6), html.pg-portal .tbl-rec th:nth-child(7), html.pg-portal .tbl-rec td:nth-child(7){display:none}
    /* «Meses anteriores» (2026-11-09): en el celular, lo esencial a la vista. Equipos: fuera Serie (2), Código (3) y
       Ubicación (5); quedan Equipo, Servicio, Fecha programada, Situación hoy y Certificado. Áreas: fuera el icono de
       la ficha (2). Las dos listas usan .tbl-prveq: por eso van por su id. */
    html.pg-portal #prvEq .tbl-prveq th:nth-child(2), html.pg-portal #prvEq .tbl-prveq td:nth-child(2), html.pg-portal #prvEq .tbl-prveq th:nth-child(3), html.pg-portal #prvEq .tbl-prveq td:nth-child(3), html.pg-portal #prvEq .tbl-prveq th:nth-child(5), html.pg-portal #prvEq .tbl-prveq td:nth-child(5){display:none}
    html.pg-portal #prvAre .tbl-prveq th:nth-child(2), html.pg-portal #prvAre .tbl-prveq td:nth-child(2){display:none}
  }


  /* =========================================================================
     CONFIGURACIÓN DE ACCESOS Y USUARIOS   (#pAcc)
     -------------------------------------------------------------------------
     Dos columnas: los apartados a la izquierda y el que esté abierto a la
     derecha. En móvil la columna de apartados pasa arriba, en horizontal.

     Todo cuelga de .acc para no rozar ninguna clase de las demás pantallas.
     ========================================================================= */
  html.pg-portal .acc{display:flex;gap:18px;padding:16px 18px 20px;align-items:flex-start}

  /* ---------- columna de apartados ---------- */
  html.pg-portal .acc__nav{flex:0 0 232px;border:1px solid var(--line);border-radius:12px;
    background:var(--tint);overflow:hidden;position:sticky;top:14px}
  html.pg-portal .acc__navt{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
    color:#2B4A78;background:var(--tint-2);padding:10px 13px;border-bottom:1px solid var(--line)}
  html.pg-portal .acc__lista{list-style:none;margin:0;padding:6px}
  html.pg-portal .acc__op{width:100%;display:flex;align-items:center;gap:11px;text-align:left;
    background:transparent;border:1px solid transparent;border-radius:9px;padding:10px 11px;cursor:pointer;
    font-family:var(--body);color:var(--navy);transition:.13s}
  html.pg-portal .acc__op:hover{background:var(--white);border-color:var(--line)}
  html.pg-portal .acc__op[aria-selected="true"]{background:var(--white);border-color:var(--blue-200);
    box-shadow:0 1px 2px rgba(10,37,84,.06)}
  html.pg-portal .acc__ico{flex:0 0 34px;height:34px;border-radius:9px;display:grid;place-items:center;
    background:var(--blue-050);color:var(--blue-600);border:1px solid var(--blue-200)}
  html.pg-portal .acc__op[aria-selected="true"] .acc__ico{background:var(--blue);border-color:var(--blue);color:#fff}
  html.pg-portal .acc__tx{min-width:0;flex:1 1 auto}
  html.pg-portal .acc__tx b{display:block;font-family:var(--display);font-size:12.5px;font-weight:600;
    color:var(--navy);line-height:1.25}
  html.pg-portal .acc__tx i{display:block;font-style:normal;font-size:10.5px;color:var(--muted);
    line-height:1.35;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  html.pg-portal .acc__cn{flex:0 0 auto;font-family:var(--mono);font-size:9.5px;font-weight:600;
    background:var(--blue-050);color:var(--blue-600);border:1px solid var(--blue-200);
    border-radius:999px;padding:2px 7px}

  /* ---------- columna de contenido ---------- */
  html.pg-portal .acc__cuerpo{flex:1 1 auto;min-width:0}
  html.pg-portal .acc__hd{margin-bottom:15px}
  html.pg-portal .acc__hd h3{margin:0;font-family:var(--display);font-size:15px;font-weight:600;color:var(--navy)}
  html.pg-portal .acc__hd p{margin:5px 0 0;font-size:12px;color:var(--muted);line-height:1.5;max-width:74ch}
  html.pg-portal .acc__pie{display:flex;align-items:center;justify-content:flex-end;gap:12px;
    margin-top:16px;padding-top:14px;border-top:1px solid var(--soft);flex-wrap:wrap}
  html.pg-portal .acc__falta{font-size:11px;color:var(--muted);margin-right:auto}
  html.pg-portal .acc__falta.ok{color:var(--green)}

  /* aviso de resultado (comparte sitio en los cuatro apartados) */
  html.pg-portal .acc__aviso{display:flex;align-items:flex-start;gap:9px;font-size:12px;line-height:1.45;
    border-radius:9px;padding:10px 13px;margin-bottom:14px;border:1px solid var(--green-200);
    background:var(--green-050);color:#146B36}
  html.pg-portal .acc__aviso--mal{border-color:var(--red-200);background:var(--red-050);color:#8E2A24}
  html.pg-portal .acc__aviso::before{content:"✓";font-weight:700;line-height:1.3}
  html.pg-portal .acc__aviso--mal::before{content:"!"}

  /* ---------- SOPORTE ---------- */
  html.pg-portal .sop{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
  html.pg-portal .sop__art{flex:1 1 300px;min-width:260px;max-width:420px}
  html.pg-portal .sop__art svg{width:100%;height:auto;display:block}
  html.pg-portal .sop__lista{flex:1 1 280px;min-width:250px;list-style:none;margin:0;padding:0;
    display:flex;flex-direction:column;gap:10px}
  html.pg-portal .sop__it{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);
    border-radius:11px;padding:12px 14px;background:var(--white)}
  html.pg-portal .sop__it .i{flex:0 0 32px;height:32px;border-radius:9px;display:grid;place-items:center;
    background:var(--blue-050);color:var(--blue-600);border:1px solid var(--blue-200)}
  html.pg-portal .sop__it .k{font-family:var(--mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;
    color:var(--muted);display:block;margin-bottom:3px}
  html.pg-portal .sop__it .v{font-size:12.5px;color:var(--navy);font-weight:600;word-break:break-word}
  html.pg-portal .sop__it a.v{color:var(--blue-600);text-decoration:none}
  html.pg-portal .sop__it a.v:hover{text-decoration:underline}

  /* ---------- MI CUENTA ---------- */
  html.pg-portal .cue__cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  html.pg-portal .cue__col{border:1px solid var(--line);border-radius:12px;padding:14px 16px 16px;margin:0;
    background:var(--white);min-width:0}
  html.pg-portal .cue__col--new{background:var(--tint);border-color:var(--blue-200)}
  html.pg-portal .cue__col legend{font-family:var(--mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;
    color:#2B4A78;padding:0 7px;margin-left:-4px}
  html.pg-portal .cue__campo{margin-top:11px}
  html.pg-portal .cue__campo label{display:block;font-size:11px;font-weight:600;color:var(--navy);margin-bottom:5px}
  html.pg-portal .cue__campo input{width:100%;font-family:var(--body);font-size:12.5px;padding:9px 11px;
    border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}
  html.pg-portal .cue__campo input:focus{border-color:var(--blue);outline:none}
  html.pg-portal .cue__campo input.bad{border-color:var(--red);background:var(--red-050)}
  html.pg-portal .cue__clave{position:relative}
  html.pg-portal .cue__clave input{padding-right:38px}
  html.pg-portal .cue__ojo{position:absolute;right:5px;top:50%;transform:translateY(-50%);
    background:transparent;border:0;color:var(--muted);cursor:pointer;padding:6px;border-radius:6px;line-height:0}
  html.pg-portal .cue__ojo:hover{color:var(--blue-600);background:var(--blue-050)}
  html.pg-portal .cue__ojo[aria-pressed="true"]{color:var(--blue-600)}
  html.pg-portal .cue__fuerza{display:flex;align-items:center;gap:9px;margin-top:8px}
  html.pg-portal .cue__barra{flex:1 1 auto;height:5px;border-radius:999px;background:var(--soft);overflow:hidden}
  html.pg-portal .cue__barra i{display:block;height:100%;width:0;border-radius:999px;background:var(--red);transition:.18s}
  html.pg-portal .cue__fuerza[data-n="2"] .cue__barra i{width:50%;background:var(--amber)}
  html.pg-portal .cue__fuerza[data-n="3"] .cue__barra i{width:75%;background:var(--blue)}
  html.pg-portal .cue__fuerza[data-n="4"] .cue__barra i{width:100%;background:var(--green)}
  html.pg-portal .cue__fuerza[data-n="1"] .cue__barra i{width:25%}
  html.pg-portal .cue__nivel{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--muted);flex:0 0 auto}
  html.pg-portal .cue__reglas,html.pg-portal .log__reglas{list-style:none;margin:12px 0 0;padding:0;
    display:flex;flex-direction:column;gap:6px}
  html.pg-portal .cue__reglas li,html.pg-portal .log__reglas li{display:flex;align-items:center;gap:8px;
    font-size:11px;color:var(--muted)}
  html.pg-portal .cue__reglas .p,html.pg-portal .log__reglas .p{flex:0 0 14px;height:14px;border-radius:50%;
    border:1px solid var(--line);background:var(--white);position:relative}
  html.pg-portal .cue__reglas li.ok,html.pg-portal .log__reglas li.ok{color:#146B36}
  html.pg-portal .cue__reglas li.ok .p,html.pg-portal .log__reglas li.ok .p{background:var(--green);border-color:var(--green)}
  html.pg-portal .cue__reglas li.ok .p::after,html.pg-portal .log__reglas li.ok .p::after{
    content:"";position:absolute;left:4px;top:1.5px;width:4px;height:7px;border:solid #fff;border-width:0 1.7px 1.7px 0;transform:rotate(42deg)}
  html.pg-portal .log__reglas li.mal{color:#8E2A24}
  html.pg-portal .log__reglas li.mal .p{background:var(--red);border-color:var(--red)}
  html.pg-portal .log__reglas li.mal .p::after{content:"";position:absolute;left:6px;top:2.5px;width:1.7px;height:8px;background:#fff}

  /* ---------- USUARIOS ---------- */
  html.pg-portal .usu__barra{display:flex;align-items:center;justify-content:space-between;gap:14px;
    flex-wrap:wrap;margin-bottom:12px}
  html.pg-portal .usu__cifras{display:flex;gap:8px;flex-wrap:wrap}
  html.pg-portal .usu__cifra{font-size:11px;color:var(--muted);background:var(--tint);border:1px solid var(--line);
    border-radius:999px;padding:5px 11px}
  html.pg-portal .usu__cifra b{font-family:var(--mono);font-size:11.5px;color:var(--navy);font-weight:600}
  html.pg-portal .usu__cifra--ok{background:var(--green-050);border-color:var(--green-200);color:#146B36}
  html.pg-portal .usu__cifra--ok b{color:#146B36}
  html.pg-portal .usu__cifra--no{background:var(--red-050);border-color:var(--red-200);color:#8E2A24}
  html.pg-portal .usu__cifra--no b{color:#8E2A24}
  html.pg-portal .usu__tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-left:auto}
  html.pg-portal .usu__tools input[type="search"]{font-family:var(--body);font-size:12px;padding:8px 11px;
    border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);width:230px;max-width:100%}
  html.pg-portal .usu__tools input[type="search"]:focus{border-color:var(--blue);outline:none}
  html.pg-portal .usu__caja{border:1px solid var(--line);border-radius:11px;overflow:hidden}
  html.pg-portal .usu__caja table{font-size:11.5px}
  html.pg-portal .tbl-usu td{padding:9px 10px}
  html.pg-portal .tbl-usu th{padding:9px 10px}
  html.pg-portal .usu__vacio{padding:26px 16px;text-align:center;font-size:12px;color:var(--muted)}

  /* nombre con su inicial en un círculo */
  html.pg-portal .usu__per{display:flex;align-items:center;gap:9px;min-width:0}
  html.pg-portal .usu__ini{flex:0 0 27px;height:27px;border-radius:50%;display:grid;place-items:center;
    background:var(--blue-050);color:var(--blue-600);border:1px solid var(--blue-200);
    font-family:var(--display);font-size:11px;font-weight:600;text-transform:uppercase}
  html.pg-portal .usu__nom{font-weight:600;color:var(--navy);overflow:hidden;text-overflow:ellipsis}
  html.pg-portal .usu__yo{font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--blue-600);background:var(--blue-050);border:1px solid var(--blue-200);
    border-radius:999px;padding:1px 6px;margin-left:6px;white-space:nowrap}
  html.pg-portal .usu__cor{color:var(--muted);word-break:break-all}
  html.pg-portal .usu__tipo{font-family:var(--mono);font-size:9px;letter-spacing:.07em;text-transform:uppercase;
    border-radius:999px;padding:3px 9px;border:1px solid var(--line);background:var(--tint);color:#2B4A78;
    display:inline-block;white-space:nowrap}
  html.pg-portal .usu__tipo--admin{background:var(--blue-050);border-color:var(--blue-200);color:var(--blue-600)}
  html.pg-portal .usu__est{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;
    font-weight:600;border-radius:999px;padding:4px 11px;display:inline-block;white-space:nowrap;
    background:var(--green-050);border:1px solid var(--green-200);color:#146B36}
  html.pg-portal .usu__est--no{background:var(--red-050);border-color:var(--red-200);color:#8E2A24}
  html.pg-portal .usu__acc{display:flex;gap:5px;justify-content:center}
  html.pg-portal .usu__b{width:28px;height:28px;border-radius:8px;border:1px solid var(--line);background:var(--white);
    color:var(--muted);cursor:pointer;display:grid;place-items:center;transition:.13s;padding:0}
  html.pg-portal .usu__b:hover{color:var(--blue-600);border-color:var(--blue-200);background:var(--blue-050)}
  html.pg-portal .usu__b--off:hover{color:var(--red);border-color:var(--red-200);background:var(--red-050)}
  html.pg-portal .usu__b--on:hover{color:var(--green);border-color:var(--green-200);background:var(--green-050)}
  html.pg-portal .usu__b:disabled{opacity:.35;cursor:default}
  html.pg-portal .usu__b:disabled:hover{color:var(--muted);border-color:var(--line);background:var(--white)}
  html.pg-portal tbody tr.usu-inact .usu__nom,
  html.pg-portal tbody tr.usu-inact .usu__cor{opacity:.62}

  /* campos de los diálogos de usuario */
  html.pg-portal .usu__campo{margin-top:12px}
  html.pg-portal .usu__campo label{display:block;font-size:11px;font-weight:600;color:var(--navy);margin-bottom:5px}
  html.pg-portal .usu__campo label b{color:var(--red);font-weight:600}
  html.pg-portal .usu__campo input,html.pg-portal .usu__campo select{width:100%;font-family:var(--body);
    font-size:12.5px;padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}
  html.pg-portal .usu__campo input:focus,html.pg-portal .usu__campo select:focus{border-color:var(--blue);outline:none}
  html.pg-portal .usu__campo input.bad{border-color:var(--red);background:var(--red-050)}
  html.pg-portal .usu__ayuda{display:block;font-size:10.5px;color:var(--muted);margin-top:5px;line-height:1.4}
  html.pg-portal .modal__box--usu{max-width:440px}

  /* ---------- LOGOTIPO ---------- */
  html.pg-portal .log{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap}
  html.pg-portal .log__izq{flex:0 1 340px;min-width:250px}
  html.pg-portal .log__marco{border:1px dashed var(--blue-200);border-radius:12px;background:var(--tint);
    min-height:150px;display:grid;place-items:center;padding:16px;overflow:hidden}
  html.pg-portal .log__marco.tiene{border-style:solid;border-color:var(--line);background:var(--white)}
  html.pg-portal .log__marco img{max-width:100%;max-height:190px;display:block}
  html.pg-portal .log__sin{display:flex;flex-direction:column;align-items:center;gap:9px;color:var(--muted);
    font-size:11.5px;text-align:center;line-height:1.4}
  html.pg-portal .log__nom{font-family:var(--mono);font-size:10px;color:var(--muted);margin-top:8px;
    text-align:center;word-break:break-all}
  html.pg-portal .log__der{flex:1 1 260px;min-width:230px}
  html.pg-portal .log__btns{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
  html.pg-portal .btn--del{color:var(--red);border-color:var(--red-200)}
  html.pg-portal .btn--del:hover{border-color:var(--red);background:var(--red-050)}
  html.pg-portal .log__reglas{margin-top:0}

  /* ---------- adaptación ---------- */
  @media (max-width:900px){
    html.pg-portal .acc{flex-direction:column;gap:14px;padding:14px}
    html.pg-portal .acc__nav{flex:1 1 auto;width:100%;position:static}
    html.pg-portal .acc__lista{display:flex;gap:6px;overflow-x:auto;padding:7px}
    html.pg-portal .acc__lista li{flex:1 0 auto}
    html.pg-portal .acc__op{white-space:nowrap;height:100%}
    html.pg-portal .acc__tx i{display:none}
    html.pg-portal .acc__cuerpo{width:100%}
  }
  @media (max-width:760px){
    html.pg-portal .cue__cols{grid-template-columns:1fr}
    html.pg-portal .usu__tools{width:100%;margin-left:0}
    html.pg-portal .usu__tools input[type="search"]{flex:1 1 auto;width:auto}
    html.pg-portal .tbl-usu th:nth-child(3),html.pg-portal .tbl-usu td:nth-child(3){display:none}
    html.pg-portal .sop__art{display:none}
  }
  @media (max-width:640px){
    html.pg-portal .acc{padding:12px}
    html.pg-portal .acc__ico{flex-basis:30px;height:30px}
    html.pg-portal .acc__pie{flex-direction:column;align-items:stretch}
    html.pg-portal .acc__falta{margin-right:0;text-align:center}
    html.pg-portal .acc__pie .btn{width:100%}
    html.pg-portal .log__btns .btn{flex:1 1 auto}
  }
  @media (max-width:400px){
    html.pg-portal .tbl-usu th:nth-child(2),html.pg-portal .tbl-usu td:nth-child(2){display:none}
    html.pg-portal .usu__cifra{font-size:10.5px;padding:4px 9px}
  }

  /* =========================================================================
     ADAPTACIÓN A MÓVIL
     -------------------------------------------------------------------------
     Va al final a propósito: refina lo que ya definen los bloques de 900 y
     760 px de más arriba, sin tener que reescribirlos.

       ≤ 900 px  tableta y móvil apaisado · la barra superior se reordena
       ≤ 640 px  móvil · una sola columna, tipografía y márgenes ajustados
       ≤ 400 px  móvil estrecho · último apretón

     Regla que se respeta en todo el bloque: la página NO debe desplazarse en
     horizontal. Lo único que se desplaza son las tablas, dentro de su propia
     caja `.scroll`.
     ========================================================================= */

  @media (max-width:820px){
    /* los tres filtros globales, uno por fila: repartidos en dos columnas
       quedaba siempre uno suelto y desalineado */
    html.pg-portal .filters .f{flex:1 1 100%;min-width:0}
    html.pg-portal .filters .f--btn{width:100%}
    html.pg-portal .filters .f--btn .fbtns{width:100%}
    html.pg-portal .filters .f--btn .fbtn{flex:1 1 auto;justify-content:center}
    /* en una columna los botones ya van en su fila: el hueco sobra siempre */
    html.pg-portal .filters--linea .count--hueco{display:none}
  }

  @media (max-width:900px){
    /* ---- barra superior: logo · controles · menú · identidad, en filas ---- */
    html.pg-portal .topbar{padding:12px 14px}
    html.pg-portal .topbar__in,
    html.pg-portal .topbar__in--4{flex-wrap:wrap;row-gap:10px;gap:10px}
    html.pg-portal .topbar img.logo{height:34px;order:1}
    html.pg-portal .topbar__r,
    html.pg-portal .topbar__in--4 .topbar__r{order:2;margin-left:auto;flex-wrap:wrap;
      justify-content:flex-end;gap:8px;min-width:0}
    /* en escritorio el selector se empuja al extremo; aquí ya va agrupado */
    html.pg-portal .langsel{margin-left:0}
    /* el menú de servicios baja a una fila propia, centrado */
    html.pg-portal .mainmenu,
    html.pg-portal .mainmenu--4,
    html.pg-portal .topbar__in--4 .mainmenu--4{position:static;transform:none;order:3;
      width:100%;flex:1 1 100%;margin:0;flex-wrap:wrap;white-space:normal;
      justify-content:center;gap:4px}
    html.pg-portal .sgs b{white-space:normal;overflow:visible;text-overflow:clip}
    /* los desplegables nunca se salen de la pantalla */
    html.pg-portal .apps__menu{width:min(310px,calc(100vw - 28px))}
    html.pg-portal .chatpanel{width:min(430px,100vw)}
  }

  @media (max-width:640px){
    /* ---- la regla decorativa del margen se retira: en móvil sólo estorba --- */
    html.pg-portal body::before,
    html.pg-portal body::after{display:none}
    html.pg-portal .wrap{padding:0 12px 28px}

    html.pg-portal .topbar{padding:10px 12px}
    html.pg-portal .topbar img.logo{height:28px}
    html.pg-portal .mainmenu--3 a,
    html.pg-portal .mainmenu--4 a{font-size:10.5px;padding:5px 7px;max-width:none}
    html.pg-portal .langsel__btn{font-size:12px;padding:7px 10px}
    /* ya no cabe junto a los controles: el recuadro de razón social ocupa
       una fila entera y deja de recortar el nombre del cliente */
    html.pg-portal .topbar__r{flex:1 1 100%;width:100%}
    html.pg-portal .sgs{order:4;flex:1 1 100%;width:100%;max-width:none;margin-left:0;
      text-align:left;font-size:9px;padding:5px 9px}
    html.pg-portal .sgs b{font-size:10px}

    /* ---- pestañas: se deslizan en horizontal en vez de apretarse --------- */
    html.pg-portal .tabs{margin-top:14px;padding:5px;gap:4px;border-radius:12px;
      scrollbar-width:none}
    html.pg-portal .tabs::-webkit-scrollbar{display:none}
    html.pg-portal .tabs button{flex:0 0 auto;font-size:12.5px;padding:9px 13px;gap:6px}

    /* ---- filtros globales ------------------------------------------------ */
    html.pg-portal .filters{margin-top:14px;padding:12px 12px 10px;gap:12px}

    /* ---- tarjetas y cabeceras ------------------------------------------- */
    html.pg-portal .card{border-radius:12px}
    html.pg-portal .card__hd{flex-wrap:wrap;row-gap:8px;padding:12px 14px}
    html.pg-portal .card__bd{padding:0 10px 12px}
    html.pg-portal .card__ft{flex-wrap:wrap;row-gap:8px}

    /* ---- tablas: se deslizan dentro de su caja, con inercia en iOS ------- */
    html.pg-portal .scroll{-webkit-overflow-scrolling:touch}
    html.pg-portal th{font-size:8.5px;padding:8px 6px}
    html.pg-portal td{padding:7px 6px;font-size:10.5px}
    html.pg-portal thead tr.flt th{padding:5px 5px}

    /* ---- formularios a una columna --------------------------------------- */
    html.pg-portal .qz-form,
    html.pg-portal .mr-form,
    html.pg-portal .ub-cols,
    html.pg-portal .neq__grid,
    html.pg-portal .prv-res{grid-template-columns:1fr}

    /* ---- diálogos y paneles ---------------------------------------------- */
    /* el diálogo ocupa el ancho disponible y hace scroll dentro de sí mismo:
       nunca empuja la página ni deja los botones fuera de alcance */
    html.pg-portal .modal{padding:10px}
    html.pg-portal .modal__box{max-width:none;max-height:calc(100vh - 20px);
      overflow:auto;-webkit-overflow-scrolling:touch}
    html.pg-portal .modal__bd{padding:18px 16px 6px}
    html.pg-portal .modal__ft{padding:14px 16px 18px}
    html.pg-portal .chatpanel{width:100vw}
    html.pg-portal .toast{left:12px;right:12px;bottom:14px;transform:none;
      max-width:none;text-align:center}

    /* ---- todo lo que pueda desbordar se queda dentro ---------------------- */
    html.pg-portal img,
    html.pg-portal svg:not(.tabs svg){max-width:100%}
  }

  @media (max-width:400px){
    html.pg-portal .topbar__r{gap:6px}
    html.pg-portal .mainmenu--3 a,
    html.pg-portal .mainmenu--4 a{font-size:10px;padding:4px 6px}
    html.pg-portal .tabs button{font-size:12px;padding:8px 11px}
    html.pg-portal .tabs button svg{display:none}
  }

  /* mientras se espera a la base de datos: el contenido se atenúa y no se deja
     pulsar, para que nadie filtre sobre datos que están por cambiar */
  html.pg-portal .cargando-datos .wrap{opacity:.55;pointer-events:none;transition:opacity .15s}
  html.pg-portal .cargando-datos .filters{pointer-events:none}

  /* ===== LA SESIÓN ESTÁ POR VENCER ==========================================
     Aparece abajo a la derecha, no en el centro: no es un error, es un aviso, y
     bloquear la pantalla a quien está trabajando sería peor que el problema.
     No se puede cerrar con Escape ni con un clic fuera a propósito — si se va
     solo, el usuario se queda sin saber que la sesión terminó. */
  html.pg-portal .sesfin{
    position:fixed;right:18px;bottom:18px;z-index:10000;
    width:320px;max-width:calc(100vw - 36px);
    padding:16px 18px;border-radius:12px;
    background:#fff;color:#1B2C42;
    border:1px solid rgba(20,48,84,.14);
    box-shadow:0 10px 34px rgba(11,32,66,.22);
    font-size:13px;line-height:1.5;
  }
  html.pg-portal .sesfin[hidden]{display:none !important}
  html.pg-portal .sesfin__t{
    margin:0 0 6px;font-size:14px;font-weight:600;
    display:flex;align-items:center;gap:8px;
  }
  html.pg-portal .sesfin__t i{
    width:9px;height:9px;border-radius:50%;background:#C9821F;flex:0 0 9px;
  }
  html.pg-portal .sesfin__p{margin:0 0 14px;color:#4A5C73}
  html.pg-portal .sesfin__p b{color:#1B2C42;font-variant-numeric:tabular-nums}
  html.pg-portal .sesfin__bs{display:flex;gap:8px;justify-content:flex-end}
  html.pg-portal .sesfin__b{
    border:0;border-radius:8px;padding:8px 14px;
    font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
    background:#14508C;color:#fff;
  }
  html.pg-portal .sesfin__b:hover{background:#0F3E6E}
  html.pg-portal .sesfin__b--tenue{
    background:transparent;color:#4A5C73;font-weight:500;
    border:1px solid rgba(20,48,84,.18);
  }
  html.pg-portal .sesfin__b--tenue:hover{background:rgba(20,48,84,.05)}

  /* la barrita que se vacía: se ve cuánto queda sin tener que leer */
  html.pg-portal .sesfin__barra{
    height:3px;border-radius:2px;margin:0 0 14px;
    background:rgba(201,130,31,.20);overflow:hidden;
  }
  html.pg-portal .sesfin__barra i{
    display:block;height:100%;background:#C9821F;
    transform-origin:left center;transition:transform .9s linear;
  }

  @media (max-width:520px){
    html.pg-portal .sesfin{left:12px;right:12px;bottom:12px;width:auto}
  }

  /* Franja de arriba cuando el web service no responde (config.php →
     'usar_api' en true). Con los datos de demostración no aparece nunca:
     la crea portal.js sólo si alguna lectura falló. */
  html.pg-portal .wsfallo{
    position:sticky;top:0;z-index:9999;
    padding:10px 16px;
    background:#9A2E27;color:#fff;
    font-size:13px;line-height:1.45;
    box-shadow:0 1px 4px rgba(0,0,0,.25);
  }
  html.pg-portal .wsfallo b{font-weight:600}
  html.pg-portal .wsfallo span{opacity:.9}
  html.pg-portal .wsfallo[hidden]{display:none !important}

  /* CARGANDO UN SERVICIO (#cargaServ, cargarDatos() en portal.js). Mientras se ve,
     las pestañas y el estado de la cuenta se esconden: ni tablas vacías que
     parezcan «no tiene nada» ni lo del servicio anterior. En el cambio de idioma
     (`cargando--suave`) sólo una línea pequeña, sin esconder nada. */
  html.pg-portal .carga{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:10px;margin:18px 0;padding:48px 20px;min-height:220px;
    background:#fff;border:1px solid var(--line);border-radius:12px;
    text-align:center;color:var(--ink);
  }
  html.pg-portal .carga[hidden]{display:none !important}
  html.pg-portal .carga b{font-size:15px;font-weight:600}
  html.pg-portal .carga small{font-size:12.5px;color:var(--muted);max-width:460px;line-height:1.45}
  html.pg-portal .carga__giro{
    width:34px;height:34px;border-radius:50%;
    border:3px solid var(--line);border-top-color:var(--blue);
    animation:cargaGiro .8s linear infinite;
  }
  @keyframes cargaGiro{to{transform:rotate(360deg)}}
  @media (prefers-reduced-motion:reduce){
    html.pg-portal .carga__giro{animation-duration:2.4s}
  }
  html.pg-portal .carga--error{border-color:#E3B4AF;background:#FCF3F2}
  html.pg-portal .carga--error .carga__giro{display:none}
  html.pg-portal .carga--error b{color:#9A2E27}
  /* SIN NINGÚN SERVICIO (punto H, 2026-11-07): la tarjeta sin el giro y sin pestañas debajo */
  html.pg-portal .carga--vacio .carga__giro{display:none}
  html.pg-portal .wrap.sin-servicio .tabs{display:none}
  /* OTRA SESIÓN EN OTRA PESTAÑA (punto L): tapa toda la página (sesion.js) */
  html.pg-portal .otrasesion{
    position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;
    padding:16px;background:rgba(15,27,45,.62);
  }
  html.pg-portal .otrasesion__caja{
    max-width:440px;background:#fff;border-radius:12px;padding:26px 24px;text-align:center;
    box-shadow:0 12px 40px rgba(0,0,0,.25);color:var(--ink);
  }
  html.pg-portal .otrasesion__caja b{display:block;font-size:16px;margin-bottom:8px}
  html.pg-portal .otrasesion__caja p{font-size:13.5px;color:var(--muted);line-height:1.5;margin:0 0 18px}
  html.pg-portal .wrap.cargando .pane.show,
  html.pg-portal .wrap.cargando .estado{display:none}
  html.pg-portal .wrap.cargando--suave .carga{
    flex-direction:row;min-height:0;padding:8px 14px;margin:10px 0;gap:8px;
  }
  html.pg-portal .wrap.cargando--suave .carga b{font-size:13px;font-weight:500}
  html.pg-portal .wrap.cargando--suave .carga__giro{width:16px;height:16px;border-width:2px}

  /* RUTAS TODAVÍA SIN CONECTAR. Ámbar y no rojo a propósito: no ha fallado
     nada, es trabajo que falta. Si se pintara igual que un error, quien conecta
     las API una a una tendría la pantalla en rojo todo el rato y dejaría de
     mirarla —que es como se pierden los errores de verdad—. */
  html.pg-portal .wspend{
    position:sticky;top:0;z-index:9998;
    padding:8px 16px;
    background:#8A6112;color:#fff;
    font-size:12.5px;line-height:1.45;
    box-shadow:0 1px 4px rgba(0,0,0,.20);
  }
  html.pg-portal .wspend b{font-weight:600}
  html.pg-portal .wspend span{opacity:.85;font-family:var(--mono);font-size:11.5px}
  html.pg-portal .wspend[hidden]{display:none !important}

  /* Y el cartel DENTRO de la sección, que es donde se busca la explicación
     cuando una tabla sale vacía. */
  html.pg-portal .pendiente{
    margin:0 0 14px;
    padding:11px 14px;
    border:1px solid #E3C77A;border-left-width:4px;border-radius:7px;
    background:#FDF6E3;color:#6B4E0C;
    font-size:13px;line-height:1.5;
  }
  html.pg-portal .pendiente b{font-weight:600}
  html.pg-portal .pendiente code{
    font-family:var(--mono);font-size:11.5px;
    padding:1px 6px;border-radius:4px;
    background:rgba(107,78,12,.10);
  }

  @media print{html.pg-portal body{background:#fff}html.pg-portal .card,html.pg-portal .filters,html.pg-portal .topbar{box-shadow:none}html.pg-portal .btn,html.pg-portal .rr,html.pg-portal .selbar,html.pg-portal .more{display:none}}

  /* =====================================================================
     FICHA DE EQUIPO (ficha.php · 2026-10-19)
     Portada de la ficha que vivía embebida en ficha-demo.js. Sólo lo PROPIO
     de la ficha, con el prefijo .fe: barra, tarjetas, tablas, chips y
     botones son los del portal (los mismos estilos). Generado una vez desde
     ficha_equipo_fuente.html; se edita aquí como el resto.
     ===================================================================== */
  html.pg-portal .fe .headrow{margin-top:24px;display:grid;grid-template-columns:minmax(430px,1fr) 186px 316px;gap:16px;align-items:stretch}
  html.pg-portal .fe .hbox{background:var(--white);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
  html.pg-portal .fe .hbox--data{padding:20px 22px 18px;display:flex;flex-direction:column}
  html.pg-portal .fe .eqrow{display:flex;gap:18px;align-items:flex-start}
  html.pg-portal .fe .eq__photo{flex:0 0 190px}
  html.pg-portal .fe .eq__photo img{width:100%;border-radius:8px;border:1px solid var(--line);display:block;aspect-ratio:19/25;object-fit:cover;background:var(--tint)}
  html.pg-portal .fe .eq__info{flex:1;min-width:0;display:flex;flex-direction:column}
  @media (max-width:900px){
  html.pg-portal .fe .eqrow{flex-direction:column}
  html.pg-portal .fe .eq__photo{flex:0 0 auto;width:100%;max-width:260px}
  }
  html.pg-portal .fe .opsbtns{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:10px;margin-top:auto}
  html.pg-portal .fe .opsbtns > *{min-width:0;box-sizing:border-box}
  html.pg-portal .fe .pdfbtn{display:flex;align-items:center;gap:12px;min-height:56px;cursor:pointer;text-align:left; background:linear-gradient(135deg,#3E6FA8,#2F5A8C);border:1px solid #27507E;border-radius:10px; padding:11px 14px;box-shadow:0 3px 10px rgba(47,90,140,.20);transition:.15s;font-family:var(--body)}
  html.pg-portal .fe .pdfbtn:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(47,90,140,.26)}
  html.pg-portal .fe .pdfbtn__ic{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.18); display:grid;place-items:center;color:#fff}
  html.pg-portal .fe .pdfbtn__tx{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;text-align:center;line-height:1.2;min-width:0}
  html.pg-portal .fe .pdfbtn__tx b{font-family:var(--display);font-size:13.5px;font-weight:700;color:#fff}
  html.pg-portal .fe .pdfbtn__tx small{font-family:var(--mono);font-size:9.5px;letter-spacing:.03em;color:#D7E5F5;margin-top:2px}
  @keyframes iotpulse{0%{box-shadow:0 0 0 0 rgba(234,255,244,.7)}70%{box-shadow:0 0 0 8px rgba(234,255,244,0)}100%{box-shadow:0 0 0 0 rgba(234,255,244,0)}}
  html.pg-portal .fe .hbox--qr{padding:0;overflow:hidden}
  html.pg-portal .fe .hbox--ops{padding:0;overflow:hidden}
  html.pg-portal .fe .photo{border-right:1px solid var(--soft);padding:18px;background:linear-gradient(160deg,var(--tint-2),var(--tint));border-radius:var(--r) 0 0 var(--r);display:flex;align-items:center}
  html.pg-portal .fe .photo img{width:100%;border-radius:8px;border:1px solid var(--line);display:block}
  html.pg-portal .fe .idbox{padding:22px 24px}
  html.pg-portal .fe .eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);font-weight:600;margin:0 0 6px}
  html.pg-portal .fe .sub{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin-bottom:18px}
  html.pg-portal .fe .dl{display:grid;grid-template-columns:1fr 1fr;gap:12px 22px;margin:0}
  html.pg-portal .fe .dl dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
  html.pg-portal .fe .dl dd{margin:0;font-size:13px;font-weight:500;font-family:var(--mono)}
  html.pg-portal .fe .dl dd.txt{font-family:var(--body)}
  html.pg-portal .fe .dl--one{grid-template-columns:1fr;gap:0}
  html.pg-portal .fe .dl--one > div{display:grid;grid-template-columns:88px 1fr;align-items:center;gap:12px; padding:9px 0;border-bottom:1px solid var(--soft)}
  html.pg-portal .fe .dl--one > div:last-child{border-bottom:0}
  html.pg-portal .fe .dl--one dt{margin-bottom:0}
  html.pg-portal .fe .estado{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9.5px;font-weight:600; letter-spacing:.05em;text-transform:uppercase;padding:4px 9px;border-radius:999px;border:1px solid transparent;vertical-align:middle}
  html.pg-portal .fe .estado .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
  html.pg-portal .fe .estado[data-s="activo"]{background:var(--green-050);color:#0F7A3C;border-color:var(--green-200)}
  html.pg-portal .fe .estado[data-s="inactivo"]{background:#F1F3F6;color:#64748B;border-color:var(--line)}
  html.pg-portal .fe .estado-sel{margin-left:8px;font-family:var(--body);font-size:11px;padding:4px 24px 4px 9px;border:1px solid var(--line); border-radius:6px;background:var(--white);color:var(--ink);cursor:pointer;appearance:none;vertical-align:middle; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1 5 5 9 1' fill='none' stroke='%234292C3' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center}
  html.pg-portal .fe .ubic{font-family:var(--body);font-size:12.5px;font-weight:600;color:var(--navy)}
  html.pg-portal .fe .estado-sel:hover{border-color:var(--blue)}
  html.pg-portal .fe .estado-sel--full{margin-left:0;width:100%;font-size:12.5px;text-overflow:ellipsis}
  html.pg-portal .fe .estado-sel--full[data-s="activo"]{border-color:var(--green-200);background-color:var(--green-050);color:#0F7A3C;font-weight:600}
  html.pg-portal .fe .estado-sel--full[data-s="inactivo"]{border-color:var(--line);background-color:#F1F3F6;color:#64748B;font-weight:600}
  html.pg-portal .fe .ocp{background:transparent;border:0;border-radius:0;box-shadow:none;padding:16px 16px 18px;height:100%;display:flex;flex-direction:column}
  html.pg-portal .fe .ocp__t{font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--navy);margin-bottom:2px}
  html.pg-portal .fe .ocp__s{font-family:var(--mono);font-size:9.5px;color:var(--muted);margin-bottom:12px}
  html.pg-portal .fe .op{background:var(--tint);border:1px solid var(--soft);border-radius:9px;padding:11px 12px;margin-bottom:10px}
  html.pg-portal .fe .op:last-child{margin-bottom:0}
  html.pg-portal .fe .op__hd{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
  html.pg-portal .fe .op__type{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.06em;padding:3px 8px;border-radius:5px}
  html.pg-portal .fe .op__type.cal{background:var(--blue-050);color:#2B6A92}
  html.pg-portal .fe .op__type.man{background:#EEF1F6;color:var(--navy)}
  html.pg-portal .fe .op__sel{width:100%;font-family:var(--body);font-size:11px;padding:6px 8px;border:1px solid var(--line);border-radius:6px; background:var(--white);color:var(--ink);appearance:none; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1 5 5 9 1' fill='none' stroke='%234292C3' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;padding-right:26px}
  html.pg-portal .fe .op__sel:hover{border-color:var(--blue)}
  html.pg-portal .fe .qrmini{background:transparent;border:0;box-shadow:none;padding:18px 16px 18px;text-align:center;height:100%; display:flex;flex-direction:column;align-items:center}
  html.pg-portal .fe .qrmini__icon{width:52px;height:52px;border-radius:12px;background:var(--blue-050);border:1px solid var(--blue-200); display:grid;place-items:center;color:var(--navy);margin:8px 0 12px}
  html.pg-portal .fe .qrmini__t{font-family:var(--display);font-size:13px;font-weight:700;color:var(--navy);letter-spacing:.02em;margin-bottom:0}
  html.pg-portal .fe .qrmini__txt{font-size:11px;color:var(--muted);line-height:1.55;margin:0 0 14px}
  html.pg-portal .fe .qrmini__txt b{color:var(--ink)}
  html.pg-portal .fe .qrmini__btn{width:100%;margin-top:auto;min-height:56px}
  html.pg-portal .fe a.doc{font-family:var(--mono);font-size:10.5px;color:var(--blue-600);font-weight:600;text-decoration:none}
  html.pg-portal .fe a.doc:hover{text-decoration:underline}
  html.pg-portal .fe .hinf{display:flex;align-items:center;gap:7px}
  html.pg-portal .fe .hicon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px; border:1px solid var(--line);background:#fff;color:var(--blue-600);cursor:pointer;flex:0 0 auto; text-decoration:none;transition:.15s;padding:0}
  html.pg-portal .fe .hicon:hover{background:var(--blue-050);border-color:#9FBEFF}
  html.pg-portal .fe .hicon--pdf{color:#B3261E}
  html.pg-portal .fe .hicon--pdf:hover{background:#FDEEED;border-color:#F0B4AF}
  html.pg-portal .fe .hicon--foto{margin:0 auto}
  html.pg-portal .fe a.ver{font-size:10.5px;color:var(--blue-600);font-weight:600;text-decoration:none}
  html.pg-portal .fe a.ver:hover{text-decoration:underline}
  html.pg-portal .fe .svc{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.05em;padding:3px 7px;border-radius:5px;white-space:nowrap}
  html.pg-portal .fe .svc--cal{background:var(--blue-050);color:#2B6A92}
  html.pg-portal .fe .svc--man{background:#EEF1F6;color:var(--navy)}
  html.pg-portal .fe .semaforo{display:inline-flex;align-items:center;gap:9px;padding:4px 10px 4px 6px;border-radius:999px; border:1px solid var(--line);background:#FAFBFC}
  html.pg-portal .fe .lights{display:flex;gap:3px;padding:3px 4px;background:var(--navy);border-radius:999px}
  html.pg-portal .fe .lights i{width:8px;height:8px;border-radius:50%;background:#33507E;display:block}
  html.pg-portal .fe .semaforo[data-s="red"]   .lights i:nth-child(1){background:#EF4B41;box-shadow:0 0 0 2px rgba(239,75,65,.32)}
  html.pg-portal .fe .semaforo[data-s="amber"] .lights i:nth-child(2){background:#F2B333;box-shadow:0 0 0 2px rgba(242,179,51,.32)}
  html.pg-portal .fe .semaforo[data-s="green"] .lights i:nth-child(3){background:#3ED08C;box-shadow:0 0 0 2px rgba(96,216,168,.38)}
  html.pg-portal .fe .semaforo .lab{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
  html.pg-portal .fe .semaforo[data-s="red"]   .lab{color:#9A2E27}
  html.pg-portal .fe .semaforo[data-s="amber"] .lab{color:#8E6210}
  html.pg-portal .fe .semaforo[data-s="green"] .lab{color:#0F7A3C}
  html.pg-portal .fe .semaforo .days{font-family:var(--mono);font-size:9.5px;color:var(--muted)}
  html.pg-portal .fe .files{display:grid;grid-template-columns:1fr 1fr;gap:22px}
  html.pg-portal .fe .files--solo{grid-template-columns:1fr}
  html.pg-portal .fe .fhd{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;border-bottom:1px solid var(--soft);margin-bottom:4px}
  html.pg-portal .fe .fhd h3{font-family:var(--display);font-size:18px;font-weight:700;color:var(--navy);margin:0; letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
  html.pg-portal .fe .fhd h3::before{content:"";width:4px;height:18px;border-radius:2px;background:var(--blue);flex:0 0 4px}
  html.pg-portal .fe .flist{list-style:none;margin:0;padding:0}
  html.pg-portal .fe .flist li{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px solid var(--soft)}
  html.pg-portal .fe .flist li:last-child{border-bottom:0}
  html.pg-portal .fe .pdf{width:24px;height:24px;flex:0 0 24px;border-radius:5px;background:var(--red-050);color:var(--red); display:grid;place-items:center;font-family:var(--mono);font-size:7.5px;font-weight:600;border:1px solid var(--red-200)}
  html.pg-portal .fe .flist a{color:var(--ink);text-decoration:none;font-size:11px}
  html.pg-portal .fe .flist a:hover{color:var(--blue)}
  html.pg-portal .fe .compacc{display:flex;gap:8px;flex-wrap:wrap}
  html.pg-portal .fe .compacc .btn{font-size:11.5px;padding:6px 11px}
  html.pg-portal .fe .cchd{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  html.pg-portal .fe .ptpick{display:flex;align-items:center;gap:8px}
  html.pg-portal .fe .cchd #ccBadge{margin-left:auto}
  html.pg-portal .fe .ptpick label{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
  html.pg-portal .fe .ptsel{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--navy); padding:8px 34px 8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--white); min-width:132px;cursor:pointer;appearance:none; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%234292C3' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 12px center}
  html.pg-portal .fe .ptsel:hover{border-color:var(--blue)}
  html.pg-portal .fe .ccsub{font-family:var(--mono);font-size:10.5px;color:var(--muted);margin:2px 0 10px}
  html.pg-portal .fe .ccpanel{background:linear-gradient(180deg,#fff,var(--tint));border:1px solid var(--line);border-radius:10px;padding:10px 6px 4px}
  html.pg-portal .fe .ccnote{margin-top:12px;font-size:12px;line-height:1.5;color:#2B4A78;background:var(--blue-050); border:1px solid var(--blue-200);border-radius:8px;padding:10px 12px;display:none}
  html.pg-portal .fe .ccnote.show{display:block}
  html.pg-portal .fe .ccnote b{color:var(--navy)}
  html.pg-portal .fe .ccnote.warn{color:#8E6210;background:var(--amber-050);border-color:#EFD9A6}
  html.pg-portal .fe .ccnote.warn b{color:#7A5410}
  html.pg-portal .fe .ccnote.bad{color:#8E2F27;background:#FDF1F0;border-color:#F3C9C5}
  html.pg-portal .fe .ccnote.bad b{color:#7A241D}
  html.pg-portal .fe .ccnav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
  html.pg-portal .fe .ccbar{display:flex;align-items:center;justify-content:flex-start;gap:8px;margin-bottom:10px;flex-wrap:wrap}
  html.pg-portal .fe .ccbar .ccbar__right{margin-left:auto;display:flex;align-items:center;gap:4px}
  html.pg-portal .fe .ccseg{display:inline-flex;gap:10px;background:transparent;border:0;padding:0;flex-wrap:wrap}
  html.pg-portal .fe .ccseg__b{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:186px; font-family:var(--body);padding:9px 14px;border:1.5px solid var(--line);border-radius:10px; background:var(--white);cursor:pointer;transition:.18s;text-align:left;position:relative}
  html.pg-portal .fe .ccseg__t{font-size:12.5px;font-weight:700;color:var(--navy);line-height:1.2}
  html.pg-portal .fe .ccseg__q{font-size:10.5px;font-weight:500;color:var(--muted);line-height:1.25}
  html.pg-portal .fe .ccseg__b[aria-selected="true"]{background:var(--navy);border-color:var(--navy);box-shadow:0 2px 8px rgba(10,37,84,.18)}
  html.pg-portal .fe .ccseg__b[aria-selected="true"] .ccseg__t{color:#fff}
  html.pg-portal .fe .ccseg__b[aria-selected="true"] .ccseg__q{color:rgba(255,255,255,.72)}
  html.pg-portal .fe .ccseg__b[aria-selected="false"]{border-color:var(--blue);border-style:dashed;animation:ccPulse 2.6s ease-in-out infinite}
  html.pg-portal .fe .ccseg__b[aria-selected="false"] .ccseg__q{color:var(--blue-600);font-weight:600}
  html.pg-portal .fe .ccseg__b[aria-selected="false"]::after{content:"›";position:absolute;right:11px;top:50%;transform:translateY(-50%); font-size:19px;line-height:1;font-weight:700;color:var(--blue);animation:ccNudge 1.5s ease-in-out infinite}
  html.pg-portal .fe .ccseg__b[aria-selected="false"]{padding-right:26px}
  html.pg-portal .fe .ccseg__b[aria-selected="false"]:hover{background:var(--blue-050);border-style:solid;animation:none}
  html.pg-portal .fe .ccseg__b[aria-selected="false"]:hover::after{animation:none;transform:translateY(-50%) translateX(2px)}
  @keyframes ccPulse{0%,100%{box-shadow:0 0 0 0 rgba(66,146,195,0)}50%{box-shadow:0 0 0 4px rgba(66,146,195,.13)}}
  @keyframes ccNudge{0%,100%{transform:translateY(-50%) translateX(0)}50%{transform:translateY(-50%) translateX(3px)}}
  @media (prefers-reduced-motion:reduce){
  html.pg-portal .fe .ccseg__b[aria-selected="false"]{animation:none}
  html.pg-portal .fe .ccseg__b[aria-selected="false"]::after{animation:none}
  }
  html.pg-portal .fe .ccinfo{display:inline-flex;align-items:center;gap:6px;font-family:var(--body);font-size:12px;font-weight:600; color:var(--blue-600);background:transparent;border:0;cursor:pointer;padding:6px 8px;border-radius:6px}
  html.pg-portal .fe .ccinfo:hover{background:var(--blue-050)}
  html.pg-portal .fe .ccinfo[aria-pressed="true"]{background:var(--navy);color:#fff}
  html.pg-portal .fe .ccinfo[aria-pressed="true"] svg{color:#fff}
  html.pg-portal .fe .ccdatos{display:none;margin-top:12px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
  html.pg-portal .fe .ccdatos.show{display:block}
  html.pg-portal .fe .ccdatos__hd{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px; background:linear-gradient(180deg,var(--tint),#fff);border-bottom:1px solid var(--soft)}
  html.pg-portal .fe .ccdatos__t{font-family:var(--display);font-size:12.5px;font-weight:700;color:var(--navy)}
  html.pg-portal .fe .ccdatos__x{background:transparent;border:0;font-size:12px;font-weight:600;color:var(--blue-600);cursor:pointer;padding:5px 8px;border-radius:6px}
  html.pg-portal .fe .ccdatos__x:hover{background:var(--blue-050)}
  html.pg-portal .fe .ccdatos .scrollx{overflow-x:auto}
  html.pg-portal .fe .ccdatos table{width:100%;border-collapse:collapse;font-size:11.5px}
  html.pg-portal .fe .ccdatos th{font-family:var(--mono);font-size:9px;letter-spacing:.07em;text-transform:uppercase;color:#2B4A78; background:var(--tint-2);text-align:right;font-weight:600;padding:8px 12px;white-space:nowrap;border-bottom:1px solid var(--line)}
  html.pg-portal .fe .ccdatos th:first-child{text-align:left}
  html.pg-portal .fe .ccdatos td{font-family:var(--mono);font-size:11px;text-align:right;padding:7px 12px;border-bottom:1px solid var(--soft);white-space:nowrap}
  html.pg-portal .fe .ccdatos td:first-child{text-align:left;color:var(--muted)}
  html.pg-portal .fe .ccdatos tbody tr:last-child td{border-bottom:0}
  html.pg-portal .fe .ccdatos tbody tr:hover{background:#FBFCFD}
  html.pg-portal .fe .ccdatos .flag{color:#9A2E27;font-weight:600}
  html.pg-portal .fe .ccdatos tfoot td{border-bottom:1px solid var(--soft)}
  html.pg-portal .fe .ccdatos tfoot tr:last-child td{border-bottom:0}
  html.pg-portal .fe .ccdatos__ft{padding:8px 14px;font-size:10.5px;color:var(--muted);border-top:1px solid var(--soft);background:#FCFDFD}
  html.pg-portal .fe .ccinfo svg{flex:0 0 auto}
  html.pg-portal .fe .freq{margin-top:22px;border:1px solid var(--blue-200);border-top:3px solid var(--blue);border-radius:12px; overflow:hidden;background:var(--white);box-shadow:0 3px 12px rgba(10,37,84,.07)}
  html.pg-portal .fe .freq__hd{display:flex;align-items:center;justify-content:flex-start;gap:8px;padding:14px 18px 12px; background:linear-gradient(180deg,var(--blue-050),#fff);border-bottom:1px solid var(--soft)}
  html.pg-portal .fe .freq__hd::before{content:"";flex:0 0 4px;height:19px;border-radius:2px;background:var(--blue);margin-right:2px}
  html.pg-portal .fe .fchg__rec{border:1px solid var(--blue-200);background:var(--blue-050);border-radius:10px;padding:11px 14px;margin-bottom:12px}
  html.pg-portal .fe .fchg__recT{font-family:var(--body);font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--blue-600);margin-bottom:8px}
  html.pg-portal .fe .fchg__recG{display:flex;gap:22px;flex-wrap:wrap}
  html.pg-portal .fe .fchg__recG .m{font-family:var(--mono);font-size:12.5px}
  html.pg-portal .fe .fchg__recG .m i{display:block;font-style:normal;color:var(--muted);font-size:9px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:2px}
  html.pg-portal .fe .fchg__recG .m b{font-weight:700;color:var(--navy);font-size:14px}
  html.pg-portal .fe .freq__scope{margin:0 16px 16px;padding-top:11px;border-top:1px dashed var(--line); font-size:11.5px;line-height:1.55;color:var(--muted)}
  html.pg-portal .fe .freq__scope b{color:var(--navy)}
  html.pg-portal .fe .freq__t{font-family:var(--display);font-size:16.5px;font-weight:700;color:var(--navy);letter-spacing:-.01em}
  html.pg-portal .fe .freq__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;padding:14px 16px 6px}
  html.pg-portal .fe .freq__grid .m{font-family:var(--mono);font-size:12.5px}
  html.pg-portal .fe .freq__grid .m i{display:block;font-style:normal;color:var(--muted);font-size:9px;letter-spacing:.07em;text-transform:uppercase;margin-bottom:3px}
  html.pg-portal .fe .freq__grid .m b{font-weight:600;color:var(--ink)}
  html.pg-portal .fe .freq__rec{margin:6px 16px 16px;padding:12px 14px;border-radius:8px;font-size:13px;line-height:1.5;display:flex;gap:12px;align-items:flex-start}
  html.pg-portal .fe .freq__rec .big{font-family:var(--display);font-size:15px;font-weight:700;white-space:nowrap}
  html.pg-portal .fe .freq__rec--ext{background:var(--green-050);border:1px solid var(--green-200);color:#0F5A34}
  html.pg-portal .fe .freq__rec--ext .big{color:var(--green)}
  html.pg-portal .fe .freq__rec--keep{background:var(--blue-050);border:1px solid var(--blue-200);color:#2B4A78}
  html.pg-portal .fe .freq__rec--keep .big{color:var(--blue-600)}
  html.pg-portal .fe .freq__rec--red{background:var(--amber-050);border:1px solid #EFD9A6;color:#7A5410}
  html.pg-portal .fe .freq__rec--red .big{color:var(--amber)}
  html.pg-portal .fe .freq__rec--na{background:var(--paper);border:1px solid var(--line);color:var(--muted)}
  html.pg-portal .fe .fotoModal__bd{padding:20px 22px 24px;overflow:auto;display:flex;align-items:center;justify-content:center;min-height:160px}
  html.pg-portal .fe .fotoModal__bd img{max-width:100%;max-height:70vh;border-radius:8px;display:block}
  html.pg-portal .fe .modal__box--doc{max-width:600px;max-height:88vh;display:flex;flex-direction:column;border-top:4px solid var(--blue)}
  html.pg-portal .fe .fm__hd{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;border-bottom:1px solid var(--soft)}
  html.pg-portal .fe .fm__hd h3{font-family:var(--display);font-size:16px;font-weight:700;color:var(--navy);margin:0;letter-spacing:-.01em}
  html.pg-portal .fe .fm__x{background:transparent;border:0;font-size:22px;line-height:1;color:var(--muted);cursor:pointer;padding:0 4px}
  html.pg-portal .fe .fm__x:hover{color:var(--navy)}
  html.pg-portal .fe .fm__ft{display:flex;justify-content:flex-end;gap:10px;padding:16px 22px;border-top:1px solid var(--soft)}
  html.pg-portal .fe .mbtn--close{background:#C0433B;border-color:#C0433B;color:#fff}
  html.pg-portal .fe .mbtn--close:hover{background:#A5362F;border-color:#A5362F}
  html.pg-portal .fe .doc__bd{padding:20px 24px;overflow-y:auto}
  html.pg-portal .fe .doc__bd h4{font-family:var(--display);font-size:14px;font-weight:700;color:var(--navy);margin:18px 0 7px}
  html.pg-portal .fe .doc__bd h4:first-child{margin-top:0}
  html.pg-portal .fe .doc__bd p{font-size:13px;color:var(--ink);line-height:1.6;margin:0 0 10px}
  html.pg-portal .fe .doc__bd ul{margin:0 0 10px;padding-left:18px}
  html.pg-portal .fe .doc__bd li{font-size:13px;color:var(--ink);line-height:1.55;margin-bottom:5px}
  html.pg-portal .fe .doc__bd b{color:var(--navy)}
  html.pg-portal .fe .doc__form{font-family:var(--mono);font-size:12px;background:var(--tint);border:1px solid var(--line);border-radius:8px; padding:11px 13px;margin:0 0 10px;color:var(--navy);line-height:1.7;overflow-x:auto}
  html.pg-portal .fe .doc__ref{font-size:11.5px;color:var(--muted);border-top:1px solid var(--soft);padding-top:10px;margin-top:6px}
  html.pg-portal .fe .doc__ref b{color:var(--navy)}
  html.pg-portal .fe .ccnav__l{display:flex;align-items:center;gap:6px}
  html.pg-portal .fe .pg{font-family:var(--body);font-size:11.5px;font-weight:600;color:var(--navy); background:var(--white);border:1px solid var(--line);border-radius:7px;padding:6px 11px;cursor:pointer}
  html.pg-portal .fe .pg:hover:not(:disabled){border-color:var(--blue);color:var(--blue-600)}
  html.pg-portal .fe .pg:disabled{opacity:.38;cursor:default}
  html.pg-portal .fe .pg--ghost{background:transparent;border-color:transparent;color:var(--blue-600)}
  html.pg-portal .fe .pg--ghost:hover:not(:disabled){background:var(--blue-050);border-color:transparent}
  html.pg-portal .fe .ccrange{font-family:var(--mono);font-size:10.5px;color:var(--muted);white-space:nowrap;padding:0 4px}
  html.pg-portal .fe .ccstats{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;margin-top:12px;border-top:1px solid var(--soft);padding-top:12px}
  html.pg-portal .fe .ccstats .m{font-family:var(--mono);font-size:11.5px}
  html.pg-portal .fe .ccstats .m i{display:block;font-style:normal;color:var(--muted);font-size:9px;letter-spacing:.07em;text-transform:uppercase;margin-bottom:3px}
  html.pg-portal .fe .ccstats .m b{font-weight:600}
  html.pg-portal .fe .r2link{font-family:var(--body);font-size:10.5px;font-weight:600;color:var(--blue);background:none;border:0;padding:0; margin-left:6px;cursor:pointer;text-decoration:underline;vertical-align:baseline}
  html.pg-portal .fe .r2link:hover{color:var(--blue-600)}
  html.pg-portal .fe .ftag{font-family:var(--body);font-size:11px;font-weight:600;color:var(--blue);background:none;border:0;padding:0; margin-left:6px;cursor:pointer;text-decoration:underline;white-space:nowrap}
  html.pg-portal .fe .ftag:hover{color:var(--blue-600)}
  html.pg-portal .fe .ftag--pub{color:#1F7A4C}
  html.pg-portal .fe .ftag--pub:hover{color:#15633C}
  html.pg-portal .fe .frev{font-family:var(--body);font-size:11px;font-weight:600;color:#7A5410;white-space:nowrap}
  html.pg-portal .fe .fmeta{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
  html.pg-portal .fe .fby{font-family:var(--body);font-size:11px;color:var(--muted);line-height:1.3}
  html.pg-portal .fe .flist li.is-rev a{color:var(--muted);pointer-events:none}
  html.pg-portal .fe .flist li.is-rev .pdf{opacity:.55}
  html.pg-portal .fe .flist li .fdel{margin-left:auto;font-family:var(--body);font-size:11px;font-weight:600;color:#C0433B; background:none;border:0;padding:0 2px;cursor:pointer;text-decoration:underline;white-space:nowrap}
  html.pg-portal .fe .flist li .fdel:hover{color:#93312B}
  html.pg-portal .fe .flist li .fask{margin-left:auto;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
  html.pg-portal .fe .flist li .fask span{font-size:11px;color:var(--muted)}
  html.pg-portal .fe .flist li .fask button{font-family:var(--body);font-size:11px;font-weight:600;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline}
  html.pg-portal .fe .fask__yes{color:#C0433B}
  html.pg-portal .fe .fask__no{color:var(--muted)}
  html.pg-portal .fe .fhd__l{display:flex;align-items:center;gap:0;flex-wrap:wrap;min-width:0}
  html.pg-portal .fe .fhd__r{display:flex;align-items:center;gap:10px;flex:0 0 auto}
  html.pg-portal .fe .foot{background:linear-gradient(120deg,var(--navy) 0%,var(--navy-3) 60%,var(--navy-2) 100%);padding:0;margin-top:32px}
  html.pg-portal .fe .foot__strip{height:56px}
  html.pg-portal .fe .foot__in{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:36px;flex-wrap:wrap}
  html.pg-portal .fe .foot__i b{display:block;font-family:var(--mono);font-size:11.5px;font-weight:600;color:#fff;letter-spacing:.04em}
  html.pg-portal .fe .foot__i span{font-size:10.5px;color:#93AACB}
  html.pg-portal .fe .foot__c{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:#7C93B5}
  @media (max-width:1080px){
  html.pg-portal .fe .headrow{grid-template-columns:1fr 1fr}
  html.pg-portal .fe .files{grid-template-columns:1fr}
  }
  @media (max-width:640px){
  html.pg-portal .fe .dl{grid-template-columns:1fr}
  html.pg-portal .fe .ccstats{grid-template-columns:repeat(2,1fr);gap:10px}
  html.pg-portal .fe .headrow{display:contents}
  html.pg-portal .fe .hbox{margin:0}
  html.pg-portal .fe .hbox--data{order:2}
  html.pg-portal .fe .sec-hist{order:3}
  html.pg-portal .fe .hbox--ops{order:4}
  html.pg-portal .fe .hbox--qr{order:5}
  html.pg-portal .fe .sec-carta{order:6}
  html.pg-portal .fe .sec-arch{order:7}
  html.pg-portal .fe .sec-comp{order:8}
  html.pg-portal .fe .tbl-hist th:nth-child(2),html.pg-portal .fe .tbl-hist td:nth-child(2),html.pg-portal .fe .tbl-hist th:nth-child(3),html.pg-portal .fe .tbl-hist td:nth-child(3),html.pg-portal .fe .tbl-hist th:nth-child(6),html.pg-portal .fe .tbl-hist td:nth-child(6),html.pg-portal .fe .tbl-hist th:nth-child(7),html.pg-portal .fe .tbl-hist td:nth-child(7){display:none}
  }
  html.pg-portal .fe .printhead{display:none}
  html.pg-portal .fe .ccprint{display:none}
  @media print{
  @page{ size:A4 portrait; margin:14mm 11mm 15mm; }
  html.pg-portal .fe .printhead{display:flex !important;align-items:flex-end;justify-content:space-between;gap:16px; padding-bottom:7px;margin-bottom:12px;border-bottom:2px solid var(--navy)}
  html.pg-portal .fe .printhead .t{font-family:var(--display);font-size:15px;font-weight:700;color:var(--navy);line-height:1.2}
  html.pg-portal .fe .printhead .s{font-family:var(--mono);font-size:10.5px;color:#4A5A72;margin-top:3px}
  html.pg-portal .fe .printhead__r{text-align:right}
  html.pg-portal .fe .printhead .c{font-family:var(--body);font-size:10.5px;font-weight:600;color:var(--navy)}
  html.pg-portal .fe .printhead .f{font-family:var(--mono);font-size:9.5px;color:#6B7A90;margin-top:3px}
  html.pg-portal .fe .noprint,html.pg-portal .fe .novact,html.pg-portal .fe .pg,html.pg-portal .fe .ccbar,html.pg-portal .fe .ccdatos,html.pg-portal .fe .ccpanel,html.pg-portal .fe .ftag,html.pg-portal .fe .ccinfo,html.pg-portal .fe .ccseg,html.pg-portal .fe .ptsel,html.pg-portal .fe .fdrop,html.pg-portal .fe .fhd__r,html.pg-portal .fe #btnPdf,html.pg-portal .fe .opsbtns,html.pg-portal .fe .eq__acciones,html.pg-portal .fe .fchg__recG{display:none !important}
  html.pg-portal .fe [class*="iotcta"],html.pg-portal .fe [class*="__x"],html.pg-portal .fe [class*="btnAdd"]{display:none !important}
  html.pg-portal .fe .hbox,html.pg-portal .fe .freq,html.pg-portal .fe .ccstats,html.pg-portal .fe .ccnote,html.pg-portal .fe .opline,html.pg-portal .fe .ccprint__b{break-inside:avoid;page-break-inside:avoid}
  html.pg-portal .fe .hbox{box-shadow:none !important;border:1px solid #D8E0EA !important}
  html.pg-portal .fe .sec-carta{break-before:auto}
  html.pg-portal .fe .ccprint{display:block !important;margin-top:6px}
  html.pg-portal .fe .ccprint__b{margin-bottom:14px}
  html.pg-portal .fe .ccprint__t{font-family:var(--display);font-size:12.5px;font-weight:700;color:var(--navy); padding-bottom:3px;border-bottom:1px solid #D8E0EA;margin-bottom:3px}
  html.pg-portal .fe .ccprint__s{font-family:var(--mono);font-size:8.5px;color:#6B7A90;margin-bottom:6px;line-height:1.4}
  html.pg-portal .fe .ccprint svg{width:100%;height:auto}
  html.pg-portal .fe .printfoot{display:block !important;margin-top:10px;padding-top:7px;border-top:1px solid #D8E0EA; font-family:var(--mono);font-size:8px;color:#6B7A90;line-height:1.5}
  }
  html.pg-portal .fe .printfoot{display:none}
  /* tercer bloque de estilos de la ficha original (líneas de operaciones, novedad) */
  html.pg-portal .fe .opline{margin:9px 0 10px}
  html.pg-portal .fe .opline__bar{position:relative;height:6px;border-radius:99px;background:#E7ECF3}
  html.pg-portal .fe .opline__fill{position:absolute;left:0;top:0;bottom:0;border-radius:99px;width:0;transition:width .35s ease}
  html.pg-portal .fe .opline[data-s="green"] .opline__fill{background:linear-gradient(90deg,#3E9F6B,#57B884)}
  html.pg-portal .fe .opline[data-s="amber"] .opline__fill{background:linear-gradient(90deg,#D9A227,#E8B84B)}
  html.pg-portal .fe .opline[data-s="red"]   .opline__fill{background:linear-gradient(90deg,#C0433B,#D4574E)}
  html.pg-portal .fe .opline__now{position:absolute;top:50%;width:9px;height:9px;border-radius:50%;background:#fff; transform:translate(-50%,-50%);transition:left .35s ease;box-shadow:0 0 0 2px currentColor}
  html.pg-portal .fe .opline[data-s="green"] .opline__now{color:#3E9F6B}
  html.pg-portal .fe .opline[data-s="amber"] .opline__now{color:#D9A227}
  html.pg-portal .fe .opline[data-s="red"]   .opline__now{color:#C0433B}
  html.pg-portal .fe .opline__ends{display:flex;justify-content:space-between;gap:8px;margin-top:5px}
  html.pg-portal .fe .opline__ends span{font-family:var(--mono);font-size:9px;letter-spacing:.04em;color:var(--muted);white-space:nowrap;text-transform:uppercase}
  html.pg-portal .fe .opline__ends span:last-child{text-align:right}
  html.pg-portal .fe .opline__ends b{display:block;font-family:var(--body);font-size:10.5px;font-weight:600;color:var(--navy);letter-spacing:0;text-transform:none}
  html.pg-portal .fe .ocp__nov{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:auto;min-height:56px}
  /* añadidos al portarla (2026-10-19): la ficha sólo DIBUJA */
  html.pg-portal .fe h1{font-family:var(--display);font-size:22px;font-weight:700;color:var(--navy);margin:0 0 8px;letter-spacing:-.01em;line-height:1.2;overflow-wrap:break-word}
  html.pg-portal .fe{padding-top:18px}
  /* el título de la barra, como en la ficha original (2026-10-19) */
  html.pg-portal .topbar .t{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);white-space:nowrap;font-family:var(--display);font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#BFD2E9}
  @media (max-width:900px){html.pg-portal .topbar .t{position:static;transform:none;order:3;width:100%;text-align:center;white-space:normal}}
  html.pg-portal .fe-estado{padding:40px 16px;text-align:center;color:var(--muted);font-size:13px}
  html.pg-portal .fe-estado--err{color:var(--red)}
  html.pg-portal .fe .fe-val{font-weight:600;color:var(--ink)}
  html.pg-portal .fe .fe-sinfoto{display:flex;align-items:center;justify-content:center;aspect-ratio:19/25;width:100%;border-radius:10px;background:var(--tint);border:1px dashed var(--line);color:#9AA8BC}
  html.pg-portal .fe .fe-certs{margin-top:14px;border:1px solid var(--line);border-radius:10px;background:#fff}
  html.pg-portal .fe .fe-certs summary{cursor:pointer;padding:10px 14px;font-family:var(--display);font-size:12.5px;font-weight:700;color:var(--navy)}
  html.pg-portal .fe .fe-certs[open] summary{border-bottom:1px solid var(--soft)}
  html.pg-portal .fe .op__fr{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:6px}
  /* MODO CONSULTA (2026-10-20): sin nada que cambie datos ni lo privado del cliente */
  html.pg-portal .fe--consulta .fe-editar,html.pg-portal .fe--consulta .fe-privado{display:none !important}
  html.pg-portal .fe--consulta .files{grid-template-columns:1fr}
  /* el visor de la foto de la etiqueta (2026-10-21, como el de la original) */
  html.pg-portal .fe .fotoModal__bd{padding:20px 22px 24px;overflow:auto;display:flex;align-items:center;justify-content:center;min-height:160px}
  html.pg-portal .fe .fotoModal__bd img{max-width:100%;max-height:70vh;border-radius:8px;display:block}
  html.pg-portal .fe .fotoModal__bd img[hidden],html.pg-portal .fe .fotoModal__bd .empty[hidden]{display:none}
  html.pg-portal .fe .fotoModal__bd .empty{margin:0;text-align:center}
  html.pg-portal .fe .fotoModal__abrir{margin:10px 0 0;font-size:12.5px}
  html.pg-portal .fe .fotoModal__abrir a{color:var(--blue);font-weight:600}
  /* la etiqueta digital (2026-10-21) */
  html.pg-portal .fe .modal__box--etiq{max-width:420px}
  html.pg-portal .fe .etiq__lienzo{width:302px;max-width:100%;height:auto;display:block}
  /* NOVEDADES del equipo (2026-10-20, de la ficha original) */
  html.pg-portal .fe .ocp__nov{display:inline-flex;align-items:center;justify-content:center;gap:8px}
  html.pg-portal .modal__box--nov{max-width:560px;max-height:90vh;display:flex;flex-direction:column}
  html.pg-portal .modal__box--nov .modal__bd{overflow:auto}
  html.pg-portal .modal__box--nov .nov__intro{font-size:13px;color:var(--muted);line-height:1.55;margin:0 0 14px}
  html.pg-portal .nov__note{display:flex;align-items:flex-start;gap:8px;background:var(--amber-050);border:1px solid #EFD9A6;border-radius:10px;padding:10px 12px;font-size:12px;color:#7a5a1e;line-height:1.45;margin:0 0 18px}
  html.pg-portal .nov__note svg{flex:0 0 auto;margin-top:1px;color:var(--amber)}
  html.pg-portal .nov__lab{display:block;font-family:var(--body);font-size:11.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--navy);margin:0 0 9px}
  html.pg-portal .nov__ta{width:100%;box-sizing:border-box;font-family:var(--body);font-size:13.5px;color:var(--ink);line-height:1.5;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;resize:vertical;min-height:88px;background:#fff}
  html.pg-portal .nov__ta:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(66,146,195,.18)}
  html.pg-portal .nov__ok{font-size:12.5px;font-weight:700;color:#1f8a4c;opacity:0;transition:.2s;margin-right:auto;align-self:center}
  html.pg-portal .nov__ok.show{opacity:1}
  html.pg-portal .nov__list{border-top:1px solid var(--line);margin-top:20px;padding-top:16px}
  html.pg-portal #novForm[hidden]+.nov__list{border-top:0;margin-top:0;padding-top:0}
  html.pg-portal .nov__listT{font-family:var(--body);font-size:11.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--navy);margin:0 0 12px;display:flex;align-items:center;gap:8px}
  html.pg-portal .nov__count{font-size:11px;font-weight:700;color:var(--blue);background:rgba(66,146,195,.14);border-radius:999px;padding:1px 8px}
  html.pg-portal .nov__empty{font-size:13px;color:var(--muted);line-height:1.55;background:#F7F9FC;border:1px dashed var(--line);border-radius:12px;padding:16px}
  html.pg-portal .novitem{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid #EEF1F6}
  html.pg-portal .novitem:last-child{border-bottom:none}
  html.pg-portal .novitem__dot{flex:0 0 auto;width:10px;height:10px;border-radius:50%;background:var(--blue);margin-top:5px}
  html.pg-portal .novitem__bd{flex:1;min-width:0}
  html.pg-portal .novitem__top{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:3px}
  html.pg-portal .novitem__badge{font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--blue);background:rgba(66,146,195,.14);border-radius:6px;padding:1px 7px;margin-left:4px}
  /* INFORMES DE OTROS PROVEEDORES (2026-10-26): la ventana y su marca en el historial y las operaciones */
  html.pg-portal .modal__box--ext{max-width:620px;max-height:92vh;display:flex;flex-direction:column}
  html.pg-portal .modal__box--ext .modal__bd{overflow:auto}
  html.pg-portal .ext__intro{font-size:13px;color:var(--ink);line-height:1.6}
  html.pg-portal .ext__intro p{margin:0 0 10px}
  html.pg-portal .ext__intro .intro__note{background:var(--amber-050);border:1px solid #EFD9A6;border-radius:10px;padding:10px 12px;font-size:12px;color:#7a5a1e}
  html.pg-portal .ext__intro .intro__req{font-weight:700;color:var(--navy);margin-top:14px}
  html.pg-portal .ext__intro .intro__list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
  html.pg-portal .ext__intro .intro__list .ck{display:inline-block;width:18px;color:#1f8a4c;font-weight:700}
  html.pg-portal .ext__grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
  html.pg-portal .ext__campo{margin-bottom:12px}
  html.pg-portal .ext__campo label{display:block;font-size:11.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--navy);margin:0 0 6px}
  html.pg-portal .ext__campo input:not([type=checkbox]),html.pg-portal .ext__campo select{width:100%;box-sizing:border-box;font-family:var(--body);font-size:13.5px;color:var(--ink);border:1.5px solid var(--line);border-radius:10px;padding:9px 11px;background:#fff}
  html.pg-portal .ext__campo input:focus,html.pg-portal .ext__campo select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(66,146,195,.18)}
  html.pg-portal .ext__campo .bad{border-color:var(--red)!important;background:var(--red-050)!important}
  html.pg-portal .ext__file{display:flex;align-items:center;gap:10px;border:1.5px dashed var(--line);border-radius:10px;padding:7px 8px 7px 12px;background:#F7F9FC}
  html.pg-portal .ext__file.bad{border-color:var(--red);background:var(--red-050)}
  html.pg-portal .ext__fname{flex:1;min-width:0;font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  html.pg-portal .ext__fname.ok{color:var(--ink);font-weight:600}
  html.pg-portal label.ext__quitar{display:flex;align-items:center;gap:6px;text-transform:none;letter-spacing:0;font-weight:500;font-size:12.5px;color:var(--ink);margin:8px 0 0}
  html.pg-portal .ext__err{color:var(--red);font-size:12.5px;font-weight:600;margin:4px 0 0}
  html.pg-portal .ext-chip{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#6B4FA0;background:#F1ECFA;border-radius:5px;padding:1px 6px;margin-left:6px;vertical-align:1px}
  html.pg-portal .fe .hicon--ed{color:var(--muted)}
  /* «Editar datos» y «Eliminar» en la misma línea, a partes iguales; si sólo se ve uno, ocupa todo el ancho.
     El margen va en el botón: sin ninguno visible no queda hueco. Sin sitio para los dos, uno debajo del otro. */
  html.pg-portal .fe .eqe__btns{display:flex;flex-wrap:wrap;column-gap:8px}
  html.pg-portal .fe .eqe__btn{margin-top:10px;flex:1 1 0;min-width:max-content}
  /* «Eliminar equipo» (2026-11-04): en rojo, junto a «Editar datos del equipo» */
  html.pg-portal .fe .eqx__btn{color:var(--red);border-color:var(--red)}
  html.pg-portal .fe .eqx__btn:hover{background:var(--red);color:#fff}
  html.pg-portal .eqx__err{margin-top:10px;color:var(--red);font-weight:600}
  /* DESCARGA MÚLTIPLE POR PARTES (2026-10-26): el menú bajo el botón */
  html.pg-portal .zipmenu{position:absolute;z-index:200;width:300px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(10,37,84,.18);padding:10px}
  html.pg-portal .zipmenu__t{font-size:12.5px;color:var(--muted);line-height:1.45;margin:2px 4px 8px}
  html.pg-portal .zipmenu button{display:block;width:100%;text-align:left;font-family:var(--body);font-size:13px;color:var(--ink);background:none;border:0;border-radius:8px;padding:9px 10px;cursor:pointer}
  html.pg-portal .zipmenu button:hover,html.pg-portal .zipmenu button:focus{background:var(--blue-050);outline:none}
  html.pg-portal .zipmenu button.hecho::after{content:" ✓";color:#1f8a4c;font-weight:700}
  html.pg-portal .eqe__intro{font-size:13px;color:var(--muted);line-height:1.55;margin:0 0 14px}
  @media (max-width:600px){ html.pg-portal .ext__grid{grid-template-columns:1fr} }
  html.pg-portal .novitem__when{font-size:11.5px;color:var(--muted)}
  html.pg-portal .novitem__txt{font-size:13.5px;color:var(--ink);line-height:1.5;white-space:pre-wrap;word-break:break-word}
  html.pg-portal .novitem__by{font-size:11.5px;color:var(--muted);margin-top:2px}
  html.pg-portal .novitem__acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:7px}
  html.pg-portal .novact{font-family:var(--body);font-size:12px;font-weight:600;color:var(--blue);background:none;border:0;padding:0;cursor:pointer}
  html.pg-portal .novact:hover{text-decoration:underline}
  html.pg-portal .novact--danger{color:#C0433B}
  html.pg-portal .novitem__q{font-size:12px;color:var(--muted)}
  html.pg-portal .novitem__edited{font-size:11px;color:var(--muted)}
  html.pg-portal .novitem--editing{background:var(--blue-050);border-radius:10px;margin:0 -8px;padding-left:8px;padding-right:8px}
  html.pg-portal .novitem--anulada{opacity:.72}
  html.pg-portal .novitem--anulada .novitem__dot{background:var(--muted)}
  html.pg-portal .novitem--anulada .novitem__txt{text-decoration:line-through;color:var(--muted)}
  html.pg-portal .novitem__tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);background:#EEF1F6;border:1px solid var(--line);border-radius:6px;padding:1px 7px}
  /* EQUIPO INACTIVO (2026-10-20): nada que agregue o cambie salvo estado y ubicación */
  html.pg-portal .fe--inactivo .fe-noinactivo{display:none !important}
  html.pg-portal .fe .fe-avisoinact{margin:8px 0 10px;padding:8px 10px;border-radius:8px;background:#FFF6E5;border:1px solid #F2D29B;color:#7A4B00;font-size:12.5px;line-height:1.45}
  html.pg-portal .fe .fe-avisoinact[hidden]{display:none}
  html.pg-portal .fe-entrar{color:#fff;font-weight:600;text-decoration:underline}
  /* la etiqueta QR (2026-10-20) */
  html.pg-portal .fe .modal__box--qr{max-width:560px;border-top:4px solid var(--blue)}
  html.pg-portal .fe .qrm__bd{display:flex;gap:20px;padding:20px 22px;align-items:flex-start;flex-wrap:wrap}
  html.pg-portal .fe .qrm__vista{flex:0 0 auto;width:220px;height:220px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px dashed var(--line);border-radius:10px}
  html.pg-portal .fe .qrm__vista canvas{display:block;image-rendering:pixelated}
  html.pg-portal .fe .qrm__ctl{flex:1 1 200px;min-width:0;display:flex;flex-direction:column;gap:6px}
  html.pg-portal .fe .qrm__ctl label{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
  html.pg-portal .fe .qrm__ctl input{width:110px;font-family:var(--body);font-size:15px;padding:7px 9px;border:1px solid var(--line);border-radius:7px;color:var(--ink)}
  html.pg-portal .fe .qrm__aviso{font-size:12px;color:var(--muted);line-height:1.5;margin:6px 0 0}
  html.pg-portal .fe .qrm__aviso b{color:var(--navy)}
  html.pg-portal .fe .qrm__url{font-family:var(--mono);font-size:10px;color:var(--muted);word-break:break-all;margin:6px 0 0}
  /* el slot IoT y su ventana (2026-10-20), portados de la ficha original */
  html.pg-portal .fe .iotbtn{display:flex;align-items:center;gap:12px;min-height:56px;text-decoration:none;cursor:pointer;font-family:var(--body);text-align:left;background:linear-gradient(135deg,#3C9468,#2F8058);border:1px solid #276B49;border-radius:10px;padding:11px 14px;box-shadow:0 3px 10px rgba(47,128,88,.20);transition:.15s}
  html.pg-portal .fe .iotbtn[hidden]{display:none}
  html.pg-portal .fe .iotbtn:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(47,128,88,.26)}
  html.pg-portal .fe .iotbtn__live{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;color:#fff}
  html.pg-portal .fe .iotdot{width:9px;height:9px;border-radius:50%;background:#eafff4;box-shadow:0 0 0 0 rgba(234,255,244,.9);animation:iotpulse 1.6s infinite}
  @keyframes iotpulse{0%{box-shadow:0 0 0 0 rgba(234,255,244,.7)}70%{box-shadow:0 0 0 8px rgba(234,255,244,0)}100%{box-shadow:0 0 0 0 rgba(234,255,244,0)}}
  html.pg-portal .fe .iotbtn__tx{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;text-align:center;line-height:1.2;min-width:0}
  html.pg-portal .fe .iotbtn__tx b{font-family:var(--display);font-size:13.5px;font-weight:700;color:#fff}
  html.pg-portal .fe .iotbtn__tx small{font-family:var(--mono);font-size:9.5px;letter-spacing:.03em;color:#d6f5e6;margin-top:2px}
  html.pg-portal .fe .iotbtn__go{flex:0 0 auto;color:#eafff4}
  html.pg-portal .fe .modal__ic--info{background:var(--tint,#E9F1FF);border-color:#BFD7FF;color:#1D4ED8}
  html.pg-portal .fe .iotbtn--verificado{background:linear-gradient(135deg,#6B7684,#525C69);border-color:#3F4750;box-shadow:0 3px 10px rgba(82,92,105,.22)}
  html.pg-portal .fe .iotbtn--verificado:hover{box-shadow:0 5px 14px rgba(82,92,105,.28)}
  html.pg-portal .fe .iotbtn--verificado .iotbtn__live{font-family:var(--display);font-weight:700;font-size:13px}
  html.pg-portal .fe .iotbtn--verificado .iotbtn__tx small{color:#DCE1E7}
  html.pg-portal .fe .iotbtn--posible{background:#F4F5F7;border:1px solid #E1E5EA;box-shadow:none}
  html.pg-portal .fe .iotbtn--posible:hover{background:#ECEEF1;border-color:#D4D9DF;box-shadow:none}
  html.pg-portal .fe .iotbtn--posible .iotbtn__live{background:#E4E7EB;color:#5B6572;font-family:var(--display);font-weight:700;font-size:13px}
  html.pg-portal .fe .iotbtn--posible .iotbtn__tx b{color:var(--navy)}
  html.pg-portal .fe .iotbtn--posible .iotbtn__tx small{color:var(--muted);font-family:var(--body);letter-spacing:0}
  html.pg-portal .fe .iotbtn--posible .iotbtn__go{color:var(--muted)}
  html.pg-portal .fe .iotspecs{margin-top:14px;padding:11px 13px;background:var(--tint,#F6F8FB);border:1px solid var(--soft);border-radius:9px;font-size:12px;color:var(--ink);line-height:1.55}
  html.pg-portal .fe .iotspecs b{color:var(--navy);font-weight:700}
  html.pg-portal .fe .iotcta__ask{margin-top:16px;margin-bottom:0;font-size:12.5px;font-weight:700;color:var(--navy)}
  html.pg-portal .fe .iotcontact{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;border:1px solid var(--line);border-radius:10px;padding:11px 12px;margin-top:8px;transition:.15s}
  html.pg-portal .fe .iotcontact:hover{border-color:#9FBEFF;background:#F5F8FF;transform:translateY(-1px)}
  html.pg-portal .fe .iotcontact__ic{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:#E9F1FF;color:#1D4ED8;display:grid;place-items:center;font-size:15px}
  html.pg-portal .fe .iotcontact__ic--wa{background:#E4F8EC;color:#1DA851}
  html.pg-portal .fe .iotcontact__tx{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
  html.pg-portal .fe .iotcontact__tx b{font-family:var(--display);font-size:12.5px;font-weight:700;color:var(--navy)}
  html.pg-portal .fe .iotcontact__tx small{font-size:11px;color:var(--muted)}
  html.pg-portal .fe .iotcontact__phone{font-family:var(--mono);letter-spacing:.01em}
  html.pg-portal .fe .iotcontact__go{flex:0 0 auto;color:var(--muted);font-size:16px}
  @media print{html.pg-portal .fe .iotbtn,html.pg-portal .fe .iotcontact,html.pg-portal .fe .iotspecs{display:none !important}}
  /* los recuadros vacíos, como la original (caja punteada; el .empty del portal es más sencillo) */
  html.pg-portal .fe .empty{padding:20px 18px;text-align:center;color:var(--muted);font-size:12px;line-height:1.55;border:1px dashed var(--line);border-radius:8px;background:#FAFBFC}
  html.pg-portal .fe .empty b{color:var(--navy);font-family:var(--display);font-size:13px}
  html.pg-portal .fe #compEmpty{margin:12px 10px}
  /* lo editable de la ficha (2026-10-20): estado, ubicación y frecuencia, como la original */
  html.pg-portal .fe .ocp__s{font-family:var(--mono);font-size:10px;color:var(--muted);margin:-4px 0 10px;letter-spacing:.02em}
  html.pg-portal .fe .estado-sel,html.pg-portal .fe .op__sel{width:100%;font-family:var(--body);border:1px solid var(--line);border-radius:6px;background-color:#fff;color:var(--ink);appearance:none;-webkit-appearance:none;cursor:pointer;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1 5 5 9 1' fill='none' stroke='%234292C3' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;text-overflow:ellipsis}
  html.pg-portal .fe .estado-sel{font-size:12.5px;padding:6px 26px 6px 9px}
  html.pg-portal .fe .op__sel{font-size:11px;padding:6px 26px 6px 8px;margin-top:8px}
  html.pg-portal .fe .estado-sel:hover,html.pg-portal .fe .op__sel:hover{border-color:var(--blue)}
  html.pg-portal .fe .estado-sel:disabled,html.pg-portal .fe .op__sel:disabled{opacity:.55;cursor:progress}
  html.pg-portal .fe .estado-sel[data-s="activo"]{border-color:var(--green-200);background-color:var(--green-050);color:#0F7A3C;font-weight:600}
  html.pg-portal .fe .estado-sel[data-s="inactivo"]{background-color:#F1F3F6;color:#64748B;font-weight:600}
  html.pg-portal .fe-aviso .modal__box{border-top-color:var(--amber)}
  html.pg-portal .fe-aviso .modal__ic{background:var(--amber-050);border-color:#EFD9A6;color:#8E6210}
  html.pg-portal .mbtn--aviso{background:var(--amber);border-color:var(--amber);color:#fff}
  html.pg-portal .mbtn--aviso:hover{background:#B57C12;border-color:#B57C12}
  html.pg-portal .fe .ccestado{padding:30px 14px;text-align:center;color:var(--muted);font-size:12.5px}
  html.pg-portal .fe [data-nodisp]{cursor:pointer}
  @media print{html.pg-portal .fe .noprint{display:none}}
  /* la ficha en papel: sin la barra azul ni el carril, como la original (2026-10-20);
     pg-ficha sólo la lleva ficha.php, así el portal imprime como siempre */
  /* los colores son contenido (semáforo, barras, etiquetas): se imprimen aunque el
     navegador tenga quitados los «gráficos de fondo» — como la original (2026-10-20) */
  @media print{html.pg-portal.pg-ficha,html.pg-portal.pg-ficha *{-webkit-print-color-adjust:exact !important;print-color-adjust:exact !important}}
  @media print{html.pg-portal.pg-ficha .topbar,html.pg-portal.pg-ficha .rail{display:none !important}
    /* como la original: cada tarjeta entera (si no cabe, empieza en página nueva), sin sombra,
       y la cabecera de papel arriba del todo */
    html.pg-portal .fe .card{break-inside:avoid;page-break-inside:avoid;box-shadow:none !important;border:1px solid #D8E0EA !important;margin-bottom:10px}
    html.pg-portal .fe{padding-top:0}}

  /* =====================================================================
     INFORME DE CALIBRACIÓN · informe.php                     (2026-10-21)
     Portado del diseño del cliente (informe_CLC-…html) con el prefijo .inf;
     lo que el portal ya define (barra, tarjetas, botones) no se repite.
     ===================================================================== */
  html.pg-portal .inf{display:block;padding-bottom:60px}
  html.pg-portal .inf .wrap{max-width:1200px;margin:0 auto;padding:0 20px}
  html.pg-portal .inf-estado{max-width:1160px;margin:28px auto 0;padding:22px 20px;text-align:center;font-family:var(--mono);font-size:12px;color:var(--muted);
    background:var(--white);border:1px solid var(--line);border-radius:var(--r)}
  html.pg-portal .inf-estado--err{color:var(--red);background:var(--red-050);border-color:var(--red-200)}

  /* ---- pestañas ---- */
  html.pg-portal .inf-tabbar{max-width:1200px;margin:22px auto 0;padding:0 20px;display:flex;gap:10px;position:relative;top:1px}
  html.pg-portal .inf-tab{flex:1;display:flex;align-items:center;gap:11px;text-align:left;font-family:var(--body);color:var(--navy);background:var(--white);
    cursor:pointer;transition:.18s;border:1.5px solid var(--line);border-radius:10px 10px 0 0;padding:11px 14px;position:relative}
  html.pg-portal .inf-tab__ic{flex:0 0 auto;width:32px;height:32px;border-radius:8px;display:grid;place-items:center;
    background:var(--blue-050);color:var(--blue-600);border:1px solid var(--blue-200)}
  html.pg-portal .inf-tab__ic--ini{border-radius:50%;font-family:var(--display);font-size:12px;font-weight:700}
  html.pg-portal .inf-tab__tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;overflow:hidden}
  html.pg-portal .inf-tab__t{font-family:var(--display);font-size:12.5px;font-weight:700;letter-spacing:.01em;line-height:1.2}
  html.pg-portal .inf-tab__s{font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
  html.pg-portal .inf-tab__go{flex:0 0 auto;color:var(--blue);opacity:0;transform:translateX(-3px);transition:.18s}
  html.pg-portal .inf-tab:hover{background:var(--blue-050);border-color:var(--blue-200)}
  html.pg-portal .inf-tab:hover .inf-tab__go{opacity:1;transform:translateX(0)}
  html.pg-portal .inf-tab[aria-selected="true"]{background:var(--navy);border-color:var(--navy)}
  html.pg-portal .inf-tab[aria-selected="true"] .inf-tab__ic{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.24)}
  html.pg-portal .inf-tab[aria-selected="true"] .inf-tab__t{color:#fff}
  html.pg-portal .inf-tab[aria-selected="true"] .inf-tab__s{color:#BFD2E9}
  /* sin visitar: invitan a hacer clic */
  html.pg-portal .inf-tab[aria-selected="false"]:not(.visto){border-style:dashed;border-color:var(--blue);animation:infPulso 2.6s ease-in-out infinite}
  html.pg-portal .inf-tab[aria-selected="false"]:not(.visto) .inf-tab__s{color:var(--blue-600);font-weight:600}
  html.pg-portal .inf-tab[aria-selected="false"]:not(.visto) .inf-tab__go{opacity:1;animation:infEmpuje 1.5s ease-in-out infinite}
  @keyframes infPulso{0%,100%{box-shadow:0 0 0 0 rgba(66,146,195,0)}50%{box-shadow:0 0 0 4px rgba(66,146,195,.14)}}
  @keyframes infEmpuje{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
  html.pg-portal .inf-panel{display:none}
  html.pg-portal .inf-panel.activo{display:block}
  @media (max-width:820px){
    html.pg-portal .inf-tabbar{flex-wrap:wrap;top:0}
    html.pg-portal .inf-tab{flex:1 1 100%;border-radius:10px;margin-bottom:6px}
  }

  /* ---- el certificado ---- */
  html.pg-portal .inf-doc{background:var(--white);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;margin-top:20px}
  html.pg-portal .inf-doc__bar{padding:12px 16px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--tint),#fff)}
  html.pg-portal .inf-doc__top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
  html.pg-portal .inf-doc__t{font-family:var(--display);font-size:15px;font-weight:700;color:var(--navy)}
  html.pg-portal .inf-doc__meta{font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:2px}
  html.pg-portal .inf-doc__acc{display:flex;gap:8px}
  html.pg-portal .inf-doc__marco{background:#5c6b80;min-height:240px;display:flex;align-items:center;justify-content:center}
  html.pg-portal .inf-doc__marco iframe{display:block;width:100%;height:80vh;min-height:640px;border:0;background:#fff}
  html.pg-portal .inf-doc__aviso{color:#fff;font-family:var(--mono);font-size:12px;padding:40px 20px;text-align:center;max-width:520px;line-height:1.6}
  /* la vigencia del certificado */
  html.pg-portal .inf-doc__tl{margin-top:12px;padding-top:11px;border-top:1px dashed var(--line)}
  html.pg-portal .inf-tl__t{font-family:var(--mono);font-size:9px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:7px}
  html.pg-portal .inf-tl__bar{position:relative;height:4px;border-radius:99px;background:var(--soft)}
  html.pg-portal .inf-tl__fill{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:linear-gradient(90deg,var(--green-200),var(--green))}
  html.pg-portal .inf-tl__pin{position:absolute;top:50%;width:0;height:0}
  html.pg-portal .inf-tl__pin i{position:absolute;left:0;top:0;transform:translate(-50%,-68%);width:14px;height:14px;display:grid;place-items:center;color:var(--navy)}
  html.pg-portal .inf-tl__pin i svg{filter:drop-shadow(0 1px 2px rgba(10,37,84,.35))}
  html.pg-portal .inf-tl__pin.vencido i{color:var(--red)}
  html.pg-portal .inf-tl__ends{display:flex;justify-content:space-between;margin-top:5px;font-size:9.5px;color:var(--muted)}
  html.pg-portal .inf-tl__ends b{color:var(--ink);font-weight:600;font-family:var(--mono);font-size:9.5px}

  /* ---- los datos del informe ---- */
  html.pg-portal .inf-dl{display:grid;grid-template-columns:1fr 1fr;column-gap:28px;margin:0;padding:6px 18px 12px}
  html.pg-portal .inf-dl > div{display:grid;grid-template-columns:150px 1fr;gap:12px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--soft)}
  html.pg-portal .inf-dl dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
  html.pg-portal .inf-dl dd{margin:0;font-size:13px;font-weight:500;overflow-wrap:anywhere}
  @media (max-width:760px){
    html.pg-portal .inf-dl{grid-template-columns:1fr}
    html.pg-portal .inf-dl > div{grid-template-columns:120px 1fr}
  }

  /* ---- la tarjeta que invita a ver al técnico ---- */
  html.pg-portal .inf-nudges{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
  @media (max-width:820px){ html.pg-portal .inf-nudges{grid-template-columns:1fr} }
  html.pg-portal .inf-nudge{display:flex;align-items:center;gap:14px;text-align:left;width:100%;cursor:pointer;background:var(--white);
    border:1.5px dashed var(--blue);border-radius:12px;padding:14px 16px;font-family:var(--body);transition:.18s;animation:infPulso 2.6s ease-in-out infinite}
  html.pg-portal .inf-nudge:hover{background:var(--blue-050);border-style:solid;animation:none;transform:translateY(-1px)}
  html.pg-portal .inf-nudge.visto{border-style:solid;border-color:var(--line);animation:none}
  html.pg-portal .inf-nudge__ic{flex:0 0 auto;width:52px;height:52px;border-radius:10px;background:var(--blue-050);color:var(--blue-600);
    display:grid;place-items:center;border:1px solid var(--blue-200);font-family:var(--display);font-size:17px;font-weight:700}
  html.pg-portal .inf-nudge__tx{flex:1;min-width:0;display:flex;flex-direction:column}
  html.pg-portal .inf-nudge__eb{font-family:var(--mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--blue-600);font-weight:700;margin-bottom:2px}
  html.pg-portal .inf-nudge__t{font-family:var(--display);font-size:14px;font-weight:700;color:var(--navy);line-height:1.25}
  html.pg-portal .inf-nudge__s{font-size:11.5px;color:var(--muted);margin-top:2px}
  html.pg-portal .inf-nudge__go{flex:0 0 auto;color:var(--blue);animation:infEmpuje 1.5s ease-in-out infinite}
  html.pg-portal .inf-nudge.visto .inf-nudge__go{animation:none;color:var(--muted)}
  @media (prefers-reduced-motion:reduce){
    html.pg-portal .inf-tab,html.pg-portal .inf-tab__go,html.pg-portal .inf-nudge,html.pg-portal .inf-nudge__go{animation:none !important}
  }

  /* ---- el técnico ---- */
  html.pg-portal .inf-headrow{margin-top:24px;display:grid;grid-template-columns:minmax(380px,1fr) 300px;gap:16px;align-items:stretch}
  @media (max-width:980px){ html.pg-portal .inf-headrow{grid-template-columns:1fr} }
  html.pg-portal .inf-hbox{background:var(--white);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
  html.pg-portal .inf-hbox--data{padding:20px 22px 18px}
  html.pg-portal .inf-tec{display:flex;gap:20px;align-items:flex-start}
  html.pg-portal .inf-tec__ini{flex:0 0 96px;width:96px;height:96px;border-radius:50%;display:grid;place-items:center;
    background:linear-gradient(135deg,var(--navy),var(--navy-2));color:#fff;font-family:var(--display);font-size:32px;font-weight:700}
  /* la foto del técnico (personal.fotourl), vertical como en el diseño; sin foto, las iniciales */
  html.pg-portal .inf-tec__foto{flex:0 0 168px;width:168px;aspect-ratio:3/4;object-fit:cover;border-radius:8px;border:1px solid var(--line);display:block;background:var(--tint)}
  html.pg-portal .inf-fotomini{width:100%;height:100%;object-fit:cover;display:block}
  html.pg-portal .inf-confoto{padding:0;overflow:hidden}
  html.pg-portal .inf-tec__info{flex:1;min-width:0}
  html.pg-portal .inf-eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);font-weight:600;margin:0 0 6px}
  html.pg-portal .inf-tec h1{font-family:var(--display);font-size:22px;font-weight:700;color:var(--navy);margin:0 0 10px;letter-spacing:-.01em;line-height:1.2;overflow-wrap:break-word}
  html.pg-portal .inf-dl1{margin:0}
  html.pg-portal .inf-dl1 > div{display:grid;grid-template-columns:112px 1fr;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--soft)}
  html.pg-portal .inf-dl1 > div:last-child{border-bottom:0}
  html.pg-portal .inf-dl1 dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
  html.pg-portal .inf-dl1 dd{margin:0;font-size:13px;font-weight:500}
  /* los cargos del técnico (cargos_personal por personal.idcargossel), como el «role» del diseño */
  html.pg-portal .inf-tec__cargo{font-family:var(--body);font-size:13.5px;font-weight:600;color:var(--blue-600);margin:-6px 0 12px}
  /* autorizaciones del técnico: iconos PDF como los del diseño (.icobtn--pdf) */
  html.pg-portal .inf-auth th.c,html.pg-portal .inf-auth td.c{text-align:center}
  html.pg-portal .inf-auth td{font-size:11.5px}
  html.pg-portal .inf-auth td.mono{font-family:var(--mono);font-size:10.5px}
  html.pg-portal .inf-auth .vacio{color:var(--muted);text-align:center;padding:18px 12px}
  html.pg-portal .inf-pdf{width:26px;height:26px;border-radius:6px;display:inline-grid;place-items:center;border:1px solid var(--red-200);
    background:var(--red-050);color:var(--red);text-decoration:none;transition:.15s}
  html.pg-portal .inf-pdf:hover{background:var(--red-200)}
  html.pg-portal .inf-auth .sin{color:var(--muted)}
  /* formación: la etiqueta del tipo, un color por tipo_formacion.id (título, licencia y curso, los del diseño) */
  html.pg-portal .inf-form td.mono{font-family:var(--mono);font-size:10.5px}
  html.pg-portal .inf-ftipo{display:inline-flex;align-items:center;font-family:var(--body);font-size:10.5px;font-weight:600;
    padding:3px 9px;border-radius:999px;border:1px solid var(--line);background:#F1F3F6;color:#64748B;white-space:nowrap}
  html.pg-portal .inf-ftipo--1{background:var(--amber-050);color:#8E6210;border-color:#EFD9A6}
  html.pg-portal .inf-ftipo--2{background:var(--green-050);color:#0F7A3C;border-color:var(--green-200)}
  html.pg-portal .inf-ftipo--3{background:#F1ECFA;color:#5B3E96;border-color:#D9CCF0}
  html.pg-portal .inf-ftipo--5{background:var(--blue-050);color:#2B6A92;border-color:var(--blue-200)}
  html.pg-portal .inf-ftipo--6{background:#E6F6F4;color:#1C7068;border-color:#BFE3DE}
  /* experiencia: estrellas + línea + número (.expstars del diseño) */
  /* Formación y «Experiencia por procedimiento» lado a lado (pedido del cliente); en ≤ 980 px, una debajo de otra */
  html.pg-portal .inf-twocol{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start;margin-top:20px}
  html.pg-portal .inf-twocol > .card{margin-top:0}
  @media (max-width:980px){ html.pg-portal .inf-twocol{grid-template-columns:minmax(0,1fr)} }
  /* ---- 3 · Equipos / MRC / Estándares (los patrones del informe, 2026-10-21) ---- */
  html.pg-portal .inf-pat__bd{padding:16px 18px}
  html.pg-portal .inf-pinley{display:flex;align-items:center;gap:10px;background:var(--tint);border:1px solid var(--soft);border-radius:9px;padding:9px 12px;margin-bottom:16px}
  html.pg-portal .inf-pinley__ic{flex:0 0 auto;color:var(--navy);display:grid;place-items:center}
  html.pg-portal .inf-pinley__tx{font-size:11.5px;color:var(--muted);line-height:1.4}
  html.pg-portal .inf-pinley__tx b{color:var(--ink);font-weight:600}
  html.pg-portal .inf-refban{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,var(--navy),var(--navy-2));border-radius:12px;padding:16px 20px;margin-bottom:18px;box-shadow:0 6px 20px rgba(10,37,84,.18)}
  html.pg-portal .inf-refban[hidden]{display:none}
  html.pg-portal .inf-refban__ic{flex:0 0 auto;width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.14);display:grid;place-items:center;color:#fff}
  html.pg-portal .inf-refban__tx b{display:block;font-family:var(--display);font-size:15px;font-weight:700;color:#fff}
  html.pg-portal .inf-refban__tx span{display:block;font-family:var(--mono);font-size:11px;color:#BFD2E9;margin-top:2px}
  html.pg-portal .inf-patcard{background:var(--white);border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:9px}
  html.pg-portal .inf-patcard:last-child{margin-bottom:0}
  html.pg-portal .inf-patcard__hd{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:9px;flex-wrap:wrap}
  html.pg-portal .inf-patcard__id{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  html.pg-portal .inf-patcard__cod{font-family:var(--mono);font-size:10.5px;font-weight:700;color:var(--blue-600);background:var(--blue-050);border:1px solid var(--blue-200);border-radius:6px;padding:3px 8px}
  html.pg-portal .inf-patcard__nom{font-family:var(--display);font-size:14px;font-weight:700;color:var(--navy)}
  html.pg-portal .inf-patcard__meta{font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:3px}
  html.pg-portal .inf-patcard__docs{display:flex;gap:4px;flex:0 0 auto}
  html.pg-portal .inf-patcard__sin{font-family:var(--mono);font-size:10px;color:var(--muted);align-self:center}
  html.pg-portal .inf-icobtn{width:26px;height:26px;border-radius:6px;display:inline-grid;place-items:center;border:1px solid transparent;text-decoration:none;transition:.15s}
  html.pg-portal .inf-icobtn--pdf{background:var(--red-050);border-color:var(--red-200)}
  html.pg-portal .inf-icobtn--pdf:hover{background:var(--red-200)}
  html.pg-portal .inf-icobtn--dl{background:var(--blue-050);color:var(--blue-600);border-color:var(--blue-200)}
  html.pg-portal .inf-icobtn--dl:hover{background:var(--blue-200)}
  html.pg-portal .inf-pattl{margin-top:4px}
  html.pg-portal .inf-pattl .inf-tl__pin i{width:16px;height:16px}
  html.pg-portal .inf-pattl--sin{font-family:var(--mono);font-size:10px;color:var(--muted)}
  /* el informe fusionado (2026-10-21): las fichas que agrupa, bajo «Datos del informe» */
  html.pg-portal .inf-grupo{margin:0 18px 16px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
  html.pg-portal .inf-grupo[hidden]{display:none}
  html.pg-portal .inf-grupo__hd{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--tint);border-bottom:1px solid var(--line)}
  html.pg-portal .inf-grupo__ic{width:30px;height:30px;border-radius:8px;background:var(--blue-050);color:var(--blue-600);display:grid;place-items:center;flex:0 0 auto}
  html.pg-portal .inf-grupo__t{font-family:var(--display);font-size:13.5px;font-weight:700;color:var(--navy)}
  html.pg-portal .inf-grupo__s{font-size:11.5px;color:var(--muted)}
  html.pg-portal .inf-grupo table{width:100%;border-collapse:collapse}
  html.pg-portal .inf-grupo th{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:left;padding:8px 14px;border-bottom:1px solid var(--soft);font-weight:600}
  html.pg-portal .inf-grupo td{font-size:12.5px;padding:8px 14px;border-bottom:1px solid var(--soft);overflow-wrap:anywhere}
  html.pg-portal .inf-grupo tr:last-child td{border-bottom:0}
  html.pg-portal .inf-grupo td.n{font-family:var(--mono);font-size:10.5px;color:var(--muted);width:34px}
  html.pg-portal .inf-grupo td.f{font-family:var(--mono);font-size:11px;white-space:nowrap}
  html.pg-portal .inf-grupo__mas{display:block;width:100%;border:0;border-top:1px solid var(--soft);background:#fff;padding:9px;font:600 12px var(--body,Inter),system-ui,sans-serif;color:var(--blue-600);cursor:pointer}
  html.pg-portal .inf-grupo__mas:hover{background:var(--blue-050)}
  html.pg-portal .inf-patgrupo{font-size:11.5px;color:var(--muted);margin:-6px 0 14px}
  html.pg-portal .inf-patgrupo[hidden]{display:none}
  html.pg-portal .inf-patgrupo b{color:var(--ink);font-weight:600}
  /* ---- 4 · Videos del informe (2026-10-21): la tarjeta, la tabla y el reproductor ---- */
  html.pg-portal .inf-nudges--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  @media (max-width:980px){ html.pg-portal .inf-nudges--3{grid-template-columns:1fr} }
  html.pg-portal .inf-vid__bd{padding:0}
  html.pg-portal .inf-vid table{width:100%;border-collapse:collapse}
  html.pg-portal .inf-vid th{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:left;padding:9px 16px;border-bottom:1px solid var(--line);font-weight:600;background:var(--tint)}
  html.pg-portal .inf-vid td{font-size:12.5px;padding:10px 16px;border-bottom:1px solid var(--soft);vertical-align:middle}
  html.pg-portal .inf-vid tr:last-child td{border-bottom:0}
  html.pg-portal .inf-vid td.n{font-family:var(--mono);font-size:10.5px;color:var(--muted);width:34px}
  html.pg-portal .inf-vid td.acc{text-align:right;white-space:nowrap;width:1%}
  html.pg-portal .inf-vid__nom{display:flex;align-items:center;gap:10px;overflow-wrap:anywhere;font-weight:500;color:var(--ink)}
  html.pg-portal .inf-vid__ic{width:30px;height:30px;border-radius:7px;background:var(--navy);color:#fff;display:grid;place-items:center;flex:0 0 auto}
  html.pg-portal .inf-vid__fmt{font-family:var(--mono);font-size:10px;font-weight:700;color:var(--blue-600);background:var(--blue-050);border:1px solid var(--blue-200);border-radius:5px;padding:2px 7px}
  html.pg-portal .inf-vbtn{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:7px;font:600 12px Inter,system-ui,sans-serif;cursor:pointer;border:1px solid var(--blue-200);background:var(--blue-050);color:var(--blue-600);margin-left:6px}
  html.pg-portal .inf-vbtn:hover{background:var(--blue-200)}
  html.pg-portal .inf-vbtn--ver{background:var(--navy);border-color:var(--navy);color:#fff}
  html.pg-portal .inf-vbtn--ver:hover{background:var(--navy-2)}
  html.pg-portal .inf-vbtn[disabled]{background:#F1F3F5;border-color:var(--line);color:var(--muted);cursor:not-allowed}
  html.pg-portal .inf-vid__nota{font-size:11px;color:var(--muted);padding:10px 16px;border-top:1px dashed var(--line);background:#FAFBFC}
  html.pg-portal .inf-vid__nota[hidden]{display:none}
  /* en el móvil, cada video es un bloque: número, nombre y formato en una línea; los botones debajo */
  @media (max-width:600px){
    html.pg-portal .inf-vid thead{display:none}
    html.pg-portal .inf-vid tr{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:12px 14px;border-bottom:1px solid var(--soft)}
    html.pg-portal .inf-vid tr:last-child{border-bottom:0}
    html.pg-portal .inf-vid td{padding:0;border:0}
    html.pg-portal .inf-vid td.n{width:auto}
    html.pg-portal .inf-vid td:nth-child(2){flex:1 1 0;min-width:0}
    html.pg-portal .inf-vid td.acc{flex:1 1 100%;text-align:left;width:auto;white-space:normal}
    html.pg-portal .inf-vbtn{margin:0 6px 0 0}
  }
  html.pg-portal .inf-vmod{position:fixed;inset:0;background:rgba(6,20,45,.72);display:flex;align-items:center;justify-content:center;z-index:80;padding:16px}
  html.pg-portal .inf-vmod[hidden]{display:none}
  html.pg-portal .inf-vmod__box{background:#0B1220;border-radius:12px;width:min(900px,100%);overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.4)}
  html.pg-portal .inf-vmod__hd{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;color:#fff;font:600 13px Inter,system-ui,sans-serif}
  html.pg-portal .inf-vmod__hd #vidModalT{overflow-wrap:anywhere}
  html.pg-portal .inf-vmod__acc{display:flex;gap:6px;flex:0 0 auto}
  html.pg-portal .inf-vmod__hd button{background:rgba(255,255,255,.12);border:0;color:#fff;border-radius:6px;padding:6px 11px;cursor:pointer;font:inherit}
  html.pg-portal .inf-vmod__hd button:hover{background:rgba(255,255,255,.22)}
  html.pg-portal .inf-vmod video{display:block;width:100%;max-height:75vh;background:#000}
  html.pg-portal .inf-vmod__err{padding:14px;color:#FFD5D1;font-size:12.5px;text-align:center}
  html.pg-portal .inf-vmod__err[hidden]{display:none}
  html.pg-portal .inf-pattl .inf-tl__ends{align-items:center;gap:10px}
  html.pg-portal .inf-pattl__est{font-family:var(--mono);font-size:9.5px;font-weight:700;text-align:center}
  html.pg-portal .inf-pattl__est--ok{color:var(--green)}
  html.pg-portal .inf-pattl__est--fuera{color:var(--red)}
  @media (max-width:600px){ html.pg-portal .inf-pattl .inf-tl__ends{flex-wrap:wrap} html.pg-portal .inf-pattl__est{order:3;flex-basis:100%;text-align:left} }
  /* el filtro por servicio de «Experiencia por procedimiento» (los chips .calfil del portal) */
  html.pg-portal .inf-expfil{padding:12px 18px 2px}
  html.pg-portal .inf-auth th.r,html.pg-portal .inf-auth td.r{text-align:right}
  html.pg-portal .inf-xp{display:flex;flex-direction:column;gap:5px;min-width:130px}
  html.pg-portal .inf-xp__fila{display:flex;align-items:center;justify-content:space-between;gap:10px}
  html.pg-portal .inf-xp__n{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--ink)}
  html.pg-portal .inf-xp .inf-line{margin-top:0}
  html.pg-portal .inf-xp--vacio{font-family:var(--mono);font-size:10px;color:var(--muted);font-style:italic}
  html.pg-portal .inf-exp tfoot td{font-weight:700;color:var(--navy);background:var(--tint);border-top:2px solid var(--line);border-bottom:0}
  /* los dos botones de documento bajo la tabla (.docbar / .docbtn del diseño) */
  html.pg-portal .inf-docbar{display:flex;gap:12px;flex-wrap:wrap;padding:14px 18px 18px;border-top:1px solid var(--soft);background:linear-gradient(180deg,#fff,var(--tint))}
  html.pg-portal .inf-docbtn{flex:1 1 220px;display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;
    border:1px solid var(--line);border-radius:10px;padding:11px 13px;transition:.15s;background:var(--white)}
  html.pg-portal .inf-docbtn:hover{border-color:var(--blue);background:var(--blue-050);transform:translateY(-1px)}
  html.pg-portal .inf-docbtn__ic{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--red-050);color:var(--red);
    display:grid;place-items:center;border:1px solid var(--red-200)}
  html.pg-portal .inf-docbtn__tx{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
  html.pg-portal .inf-docbtn__tx b{font-family:var(--display);font-size:12.5px;font-weight:700;color:var(--navy)}
  html.pg-portal .inf-docbtn__tx small{font-size:11px;color:var(--muted);font-family:var(--mono)}
  /* el estado del técnico (personal.estado), como en el diseño */
  html.pg-portal .inf-estadot{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9.5px;font-weight:600;
    letter-spacing:.05em;text-transform:uppercase;padding:4px 9px;border-radius:999px;border:1px solid transparent}
  html.pg-portal .inf-estadot .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
  html.pg-portal .inf-estadot--activo{background:var(--green-050);color:#0F7A3C;border-color:var(--green-200)}
  html.pg-portal .inf-estadot--inactivo{background:#F1F3F6;color:#64748B;border-color:var(--line)}
  @media (max-width:640px){ html.pg-portal .inf-tec{flex-direction:column} html.pg-portal .inf-tec__foto{flex:0 0 auto;width:100%;max-width:200px} }
  /* resumen de experiencia */
  html.pg-portal .inf-sum{overflow:hidden}
  html.pg-portal .inf-sum__hd{padding:16px 18px 4px}
  html.pg-portal .inf-sum__t{font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--navy)}
  html.pg-portal .inf-sum__s{font-family:var(--mono);font-size:9.5px;color:var(--muted);margin-top:2px}
  html.pg-portal .inf-sum__grid{padding:12px 18px 16px;display:flex;flex-direction:column;gap:13px}
  html.pg-portal .inf-sumi{display:flex;flex-direction:column;gap:5px}
  html.pg-portal .inf-sumi__top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
  html.pg-portal .inf-sumi__lbl{font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
  html.pg-portal .inf-sumi__n{font-family:var(--display);font-size:16px;font-weight:700;color:var(--navy)}
  html.pg-portal .inf-line{height:2px;border-radius:99px;background:var(--soft);overflow:hidden;margin-top:6px}
  html.pg-portal .inf-line__fill{height:100%;border-radius:99px;background:var(--blue-200)}
  html.pg-portal .inf-sumi--man .inf-line__fill{background:#B9C6DC}
  html.pg-portal .inf-sumi--otr .inf-line__fill{background:#BEEFDA}
  /* estrellas por rango de intervenciones */
  html.pg-portal .inf-stars{display:inline-flex;align-items:center;gap:1px;cursor:pointer;transition:transform .12s}
  html.pg-portal .inf-stars:hover{transform:scale(1.06)}
  html.pg-portal .inf-star{width:13px;height:13px;flex:0 0 auto}
  html.pg-portal .inf-star--vacia path{fill:none;stroke:var(--line);stroke-width:1.1}
  html.pg-portal .inf-starpop{position:fixed;z-index:80;width:272px;background:var(--white);border:1px solid var(--line);border-radius:12px;
    box-shadow:0 14px 38px rgba(10,37,84,.24);padding:12px 14px;opacity:0;pointer-events:none;transform:translateY(-4px);transition:opacity .14s,transform .14s}
  html.pg-portal .inf-starpop.open{opacity:1;pointer-events:auto;transform:translateY(0)}
  html.pg-portal .inf-starpop__hd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--soft)}
  html.pg-portal .inf-starpop__hd b{font-family:var(--display);font-size:12px;font-weight:700;color:var(--navy)}
  html.pg-portal .inf-starpop__x{border:0;background:transparent;color:var(--muted);font-size:15px;line-height:1;cursor:pointer;padding:3px 6px;border-radius:6px}
  html.pg-portal .inf-starpop__x:hover{background:var(--soft);color:var(--ink)}
  html.pg-portal .inf-starpop__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
  html.pg-portal .inf-starpop__list li{display:flex;align-items:center;gap:9px;font-size:11px;color:var(--ink)}
  html.pg-portal .inf-mini{font-size:12px;letter-spacing:1px;min-width:64px;flex:0 0 auto}
  html.pg-portal .inf-mini--plata{color:#8B95A3}
  html.pg-portal .inf-mini--oro{color:#B9861B}
  html.pg-portal .inf-mini--platino{color:#5E93AA}

  /* =====================================================================
     REVISIÓN DE UN INFORME POR UN INVITADO · revision.php (2026-10-22)
     html.pg-portal.pg-revision; lo propio con el prefijo .rev
     ===================================================================== */
  html.pg-portal .rev{padding-top:18px;padding-bottom:40px}
  html.pg-portal .rev-estado{max-width:720px;margin:40px auto;text-align:center;color:var(--muted);font-size:14px}
  html.pg-portal .rev-estado--err{color:var(--red)}
  html.pg-portal .rev-inv{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--line);border-left:4px solid var(--blue);
         border-radius:12px;padding:14px 18px;margin-bottom:16px}
  html.pg-portal .rev-inv__ico{flex:0 0 40px;height:40px;border-radius:50%;background:var(--blue-050);color:var(--blue);display:grid;place-items:center}
  html.pg-portal .rev-inv__t{font-family:var(--head);font-weight:600;font-size:15px;color:var(--navy)}
  html.pg-portal .rev-inv__s{font-size:12.5px;color:var(--muted);margin-top:2px}
  html.pg-portal .rev-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(320px,1fr);gap:16px;align-items:start}
  @media (max-width:980px){ html.pg-portal .rev-grid{grid-template-columns:1fr} }
  html.pg-portal .rev .inf-doc__marco iframe{height:70vh;min-height:520px}
  html.pg-portal .rev-dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0;padding:14px 18px;font-size:13px}
  html.pg-portal .rev-dl dt{color:var(--muted)}
  html.pg-portal .rev-dl dd{margin:0;font-weight:500}
  html.pg-portal .rev-ok{padding:18px;text-align:center}
  html.pg-portal .rev-ok p{font-size:12.5px;color:var(--muted);margin:8px 0 14px;line-height:1.5}
  html.pg-portal .rev-ok .btn{width:100%;justify-content:center;padding:12px;font-size:14px}
  html.pg-portal .rev-ok .rev-rech{margin-top:8px;background:#fff;color:var(--red);border:1px solid var(--red-200)}
  html.pg-portal .rev-ok .rev-rech:hover{background:var(--red-050)}
  html.pg-portal .rev-hecho{display:flex;gap:12px;align-items:center;text-align:left;background:var(--green-050);border:1px solid var(--green-200);
         border-radius:10px;padding:14px;color:#0F7A3C;font-size:13px}
  html.pg-portal .rev-hecho b{display:block;font-size:14px}
  html.pg-portal .rev-chat{display:flex;flex-direction:column;height:480px;margin-top:16px}
  html.pg-portal .rev-chat .chatfeed{background:var(--bg,#F5F7FA)}
  html.pg-portal .rev-fin{max-width:520px;margin:60px auto;text-align:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:34px 28px}
  html.pg-portal .rev-fin h2{font-family:var(--head);color:var(--navy);margin:12px 0 6px}
  html.pg-portal .rev-fin p{color:var(--muted);font-size:13.5px;line-height:1.55}
  html.pg-portal .rev-fin--ok svg{color:var(--green)}
  html.pg-portal .rev-fin--aviso svg{color:var(--amber)}

  /* «N respuestas nuevas» de ELICROM bajo el estado de un informe (chatNuevo(), 2026-10-22) */
  html.pg-portal a.chatnuevo{display:inline-flex;align-items:center;gap:4px;margin-top:5px;padding:2px 8px;border-radius:999px;
         background:var(--blue);color:#fff;font-size:10.5px;font-weight:600;line-height:1.5;text-decoration:none;white-space:nowrap}
  html.pg-portal a.chatnuevo:hover{background:var(--blue-600,#1A6FB5)}

  /* =====================================================================================================
     CONSULTA DE QUEJAS · queja.php (2026-11-09) — html.pg-portal.pg-queja, prefijo .qj
     ===================================================================================================== */
  html.pg-portal .qj{padding-top:22px;padding-bottom:40px}
  html.pg-portal .qj-acc{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:6px 0 22px}
  html.pg-portal .qj-acc__b{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:10px;border:1px solid var(--line);
         background:#fff;color:var(--navy);font:600 13.5px/1.2 var(--body);cursor:pointer;text-decoration:none;box-shadow:var(--sh)}
  html.pg-portal .qj-acc__b:hover{border-color:var(--blue);color:var(--blue-600)}
  html.pg-portal .qj-acc__b[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
  html.pg-portal .qj-acc__b--ir{background:var(--blue);border-color:var(--blue);color:#fff}
  html.pg-portal .qj-acc__b--ir:hover{background:var(--blue-600);color:#fff}
  html.pg-portal .qj-banda{background:var(--navy);color:#fff;text-align:center;font:600 16px/1.3 var(--display);padding:9px 12px;border-radius:10px 10px 0 0}
  html.pg-portal .qj-form{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 14px;background:#fff;border:1px solid var(--line);
         border-top:0;border-radius:0 0 10px 10px;padding:18px 16px;margin-bottom:16px}
  html.pg-portal .qj-form label{font-weight:600;color:var(--ink);font-size:14px}
  html.pg-portal .qj-form input{width:220px;max-width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:8px;font:500 14px var(--mono);
         text-transform:uppercase}
  html.pg-portal .qj-form input:focus{outline:2px solid var(--blue-200);border-color:var(--blue)}
  html.pg-portal .qj-estado{text-align:center;color:var(--muted);font-size:14px;margin:18px 0}
  html.pg-portal .qj-estado--err{color:var(--red)}
  html.pg-portal .qj-datos{padding:14px 18px;margin-bottom:12px}
  html.pg-portal .qj-datos dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px 24px;margin:0}
  html.pg-portal .qj-datos dt{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:2px}
  html.pg-portal .qj-datos dd{margin:0;font-weight:600;color:var(--ink)}
  html.pg-portal .qj-aviso{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;background:var(--blue-050);
         border:1px solid var(--blue-200);border-radius:10px;padding:12px 16px;margin-bottom:12px;color:var(--navy);font-size:13.5px}
  html.pg-portal .qj-aviso a.mbtn{text-decoration:none}
  html.pg-portal .qj-tabla{padding:0;overflow:hidden}
  html.pg-portal .qj-tabla td{vertical-align:top}
  html.pg-portal .qj-tabla td.qj-desc{white-space:pre-line;min-width:240px}
  html.pg-portal .qj-tabla td.qj-f{white-space:nowrap;font-family:var(--mono);font-size:12px}
  html.pg-portal .qj-tabla a.qj-arch{display:block;color:var(--blue-600);font-size:12.5px;margin:1px 0}
  html.pg-portal .qj-ev{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:600;background:var(--soft);color:var(--ink)}
  html.pg-portal .qj-ev--proceso{background:var(--amber-050);color:#8a5a00}
  html.pg-portal .qj-ev--eval{background:var(--blue-050);color:var(--blue-600)}
  html.pg-portal .qj-ev--cerrada{background:var(--green-050);color:var(--green)}
  html.pg-portal .qj-formato{text-align:right;color:var(--muted);font-size:11px;margin-top:6px}
  html.pg-portal .qj-flujo{padding:18px 12px;display:flex;justify-content:center;border-radius:0 0 10px 10px}
  html.pg-portal .qj-flujo svg{width:100%;max-width:640px;height:auto}
  html.pg-portal .qj-flujo .fl-box{fill:#fff;stroke:var(--navy);stroke-width:1.4}
  html.pg-portal .qj-flujo .fl-pill{fill:var(--navy)}
  html.pg-portal .qj-flujo .fl-rombo{fill:var(--blue-050);stroke:var(--blue);stroke-width:1.6}
  html.pg-portal .qj-flujo .fl-lin{fill:none;stroke:var(--navy);stroke-width:1.6}
  html.pg-portal .qj-flujo .fl-flecha{fill:var(--navy)}
  html.pg-portal .qj-flujo text{font-family:var(--body);font-size:13px;fill:var(--ink)}
  html.pg-portal .qj-flujo .fl-pill-t{fill:#fff;font-weight:700;letter-spacing:.06em}
  html.pg-portal .qj-flujo .fl-rama{font-weight:700;fill:var(--blue-600)}
  @media (max-width:600px){
    html.pg-portal .qj-acc__b{width:100%;justify-content:center}
    html.pg-portal .qj-form label{width:100%;text-align:center}
    /* el diagrama no se encoge hasta ser ilegible: se desliza de lado dentro de su tarjeta */
    html.pg-portal .qj-flujo{justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch}
    html.pg-portal .qj-flujo svg{min-width:540px}
  }