/* ===========================================================================
   PORTAL PROVEEDORES — LA PANTALLA INTERNA (rol 1)
   ---------------------------------------------------------------------------
   Público: el Gerente, adentro de Moyco. Es la pantalla que administra lo que
   el cañero ve — sube sus liquidaciones y audita su portal.

   POR QUÉ NO TIENE SCOPE PROPIO. Cuelga de `.ptl-ui`, el mismo del portal del
   cañero, y no de un `.pta-ui` nuevo. No es pereza: media pantalla de acá ES
   el portal del cañero —el segmento «Ver como cañero» dibuja el marcado de
   portal-view.js, que está scopeado bajo `.ptl-ui`—, así que un scope nuevo
   obligaría a anidar los dos y a agregar el nuevo a las TRES listas de
   core/tokens.css (base tipográfica, .hidden y .tnum). Con el mismo scope, la
   tarjeta, la tabla, el KPI, la píldora, el aviso y el botón ya están escritos
   y el panel de auditoría deja de necesitar la clase puesta a mano.

   Antes de esto, `portal-admin.js` le ponía `.ptl-ui` SÓLO al div de la
   auditoría, con seis renglones de comentario explicando por qué. Ahora la
   clase está en la pantalla entera y el comentario sobra.

   QUÉ VIVE ACÁ Y QUÉ NO. Acá va únicamente lo que el cañero no tiene: el
   armazón maestro-detalle (rail de cañeros + panel), y las dos piezas de la
   ficha —la zona de arrastrar un PDF y la cabecera del cañero elegido—. Todo
   lo demás sale de portal-ui.css. Prefijo `pta-` para que se vea de un vistazo
   qué es de esta pantalla; si alguna clase `pta-` termina sirviéndole también
   al cañero, se muda a portal-ui.css y pierde el prefijo.

   TRATAMIENTO: plano + rail, acento navy (§3 del runbook, rama "columna al
   lado de un menú" — la misma de Configuración). SIN acento propio: la
   pantalla no apila cuatro zonas, así que navy alcanza y no se inventa un
   segundo azul.

   OJO CON EL ESPACIO: todas las reglas de acá son `.ptl-ui .pta-algo` CON
   espacio, porque la clase va en un hijo. La única sin espacio es
   `.ptl-ui.ptl-shell`, que vive en portal-ui.css y va en el propio
   `#page-portal-admin` — junto con el `.hidden` que hace que la app navegue.
   =========================================================================== */

/* ===========================================================================
   1. ARMAZÓN MAESTRO-DETALLE
   ===========================================================================
   Tres bandas: el aviso fijo arriba, y abajo el rail y el panel, cada uno con
   su propio scroll.

   QUÉ SOSTIENE LA CADENA DE ALTO, Y QUÉ NO. Lo que la sostiene son los dos
   `overflow-y: auto` —el del rail y el del panel—: un ítem flex con `overflow`
   distinto de `visible` tiene tamaño mínimo automático 0, así que puede
   achicarse y scrollear en vez de estirar. Sacale uno de los dos y la pantalla
   entera crece hasta pasarse del wrapper; el banco lo prueba con
   `--romperlo-alto`.

   Los `min-height: 0` de acá abajo son el cinturón, no los tirantes: hoy son
   INERTES, porque los hijos ya se limitan solos por su `overflow`. Se quedan
   escritos igual —el día que alguien le saque el scroll a uno de los dos, son
   lo que evita que el defecto se propague hacia arriba—, pero no hay que
   creerles el trabajo: sacarlos no rompe nada, y el banco lo comprobó dando
   verde cuando se los quitó. */
.ptl-ui .pta-avisos {
    flex: 0 0 auto;
    padding: var(--gutter) var(--gutter) 0;
}

.ptl-ui .pta-split {
    flex: 1;
    min-height: 0;
    display: flex;
    gap: 16px;
    padding: 14px var(--gutter) var(--gutter);
}

/* EL RAIL. Ancho fijo: si estirara, los nombres largos moverían la columna
   entera cada vez que se carga un cañero nuevo. */
.ptl-ui .pta-rail {
    flex: 0 0 250px;
    min-height: 0;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--hair);
    border-radius: var(--r-card);
    box-shadow: var(--e1);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ptl-ui .pta-grupo {
    font-size: .63rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--faint);
    padding: 11px 10px 5px;
}
.ptl-ui .pta-grupo:first-child { padding-top: 5px; }

/* El ítem del rail. Es un <button>: se navega con el teclado y lo lee un
   lector de pantalla como lo que es. */
.ptl-ui .pta-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    text-align: left;
    padding: 9px 10px;
    border: 0;
    border-left: 3px solid transparent;
    border-radius: 9px;
    background: none;
    font-family: inherit;
    font-size: .79rem;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    transition: background-color .16s var(--curva), color .16s var(--curva);
}
.ptl-ui .pta-item:hover { background: var(--navy-050); color: var(--ink); }
.ptl-ui .pta-item:focus-visible { outline: 2px solid var(--navy-300); outline-offset: -2px; }
.ptl-ui .pta-item.on {
    background: var(--navy-050);
    color: var(--navy);
    border-left-color: var(--navy);
}

/* El nombre se corta; la marca de estado y el contador nunca. */
.ptl-ui .pta-item .pta-nm {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ptl-ui .pta-item .material-symbols-outlined { font-size: 17px; flex-shrink: 0; }

/* LA MARCA DE ATENCIÓN, y sólo la de atención. Un punto verde al lado de cada
   cañero que está bien es ruido: lo que hay que ver de un vistazo es cuál
   está sin snapshot. Lo que está bien no lleva nada. */
.ptl-ui .pta-marca {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--warn);
    flex-shrink: 0;
}

/* EL PANEL. Scrollea él, no la pantalla: el rail tiene que quedarse quieto. */
.ptl-ui .pta-panel {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
}
.ptl-ui .pta-panel-in {
    display: flex;
    flex-direction: column;
    gap: 14px;
    /* Ancho de lectura, el mismo que el portal del cañero. Sin esto, la tabla
       de la auditoría se estira a 1600 px y las cifras quedan en una punta y
       las etiquetas en la otra — que es justo lo que el cañero NO ve. */
    max-width: 1080px;
}

/* ===========================================================================
   2. LA CABECERA DEL CAÑERO ELEGIDO
   ===========================================================================
   No es un `.ptl-hero`: el hero navy es la cara de Moyco al productor y ésta
   es una pantalla interna, donde el nombre del módulo ya lo dice la barra de
   arriba. Acá el nombre del cañero es un dato del panel, no un cartel. */
.ptl-ui .pta-cab {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.ptl-ui .pta-cab h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -.02em;
}
.ptl-ui .pta-cab .pta-sub {
    margin: 3px 0 0;
    font-size: .74rem;
    color: var(--faint);
    font-variant-numeric: tabular-nums;
}

/* ===========================================================================
   3. LA ZONA DE ARRASTRAR UN PDF
   ===========================================================================
   Reemplaza al botón «Subir PDF» que abría el selector de archivos. El borde
   punteado dice "esto recibe algo" sin parecer un control macizo. */
.ptl-ui .pta-drop {
    border: 1.5px dashed var(--hair-strong);
    border-radius: 11px;
    padding: 18px 16px;
    text-align: center;
    font-size: .78rem;
    color: var(--muted);
    background: #fafbfd;
    cursor: pointer;
    transition: border-color .16s var(--curva), background-color .16s var(--curva);
}
.ptl-ui .pta-drop:hover,
.ptl-ui .pta-drop:focus-visible { border-color: var(--navy-300); background: var(--navy-050); }
.ptl-ui .pta-drop:focus-visible { outline: 2px solid var(--navy-300); outline-offset: 2px; }
.ptl-ui .pta-drop.encima {
    border-color: var(--navy);
    border-style: solid;
    background: var(--navy-050);
    color: var(--navy);
}
.ptl-ui .pta-drop b { color: var(--navy); font-weight: 650; }
.ptl-ui .pta-drop.ocupado { pointer-events: none; opacity: .55; }

/* Las acciones de una fila de archivo, juntas a la derecha. Ver el porqué en
   `lpHTML()`: `.ptl-fila` reparte el sobrante entre sus hijos, así que tres
   hermanos dejaban los botones flotando en el medio. */
.ptl-ui .pta-fila-a { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }

/* El campo de período va PEGADO a la zona de arrastre porque etiqueta lo que
   se está por subir. Suelto arriba, parecía un buscador. */
.ptl-ui .pta-periodo {
    width: 100%;
    padding: 8px 11px;
    border: 1px solid var(--hair-strong);
    border-radius: 9px;
    font-family: inherit;
    font-size: .8rem;
    color: var(--ink);
    background: var(--surface);
    margin-bottom: 9px;
}
.ptl-ui .pta-periodo:focus {
    outline: 2px solid var(--navy-300);
    outline-offset: -1px;
    border-color: var(--navy-300);
}

/* ===========================================================================
   4. LA GRILLA DE DOCUMENTACIÓN GENERAL
   ===========================================================================
   Dos documentos, uno al lado del otro. `minmax(0, 1fr)` y no `1fr`: con `1fr`
   el nombre largo del instructivo ensancha su columna y las dos tarjetas
   dejan de medir lo mismo. */
.ptl-ui .pta-docs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 12px;
}
.ptl-ui .pta-doc {
    border: 1px solid var(--hair);
    border-radius: 11px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.ptl-ui .pta-doc.pendiente { border-color: var(--warn-hair); background: var(--warn-050); }
.ptl-ui .pta-doc-t {
    display: flex; align-items: center; gap: 8px;
    font-size: .82rem; font-weight: 650;
}
.ptl-ui .pta-doc-t .material-symbols-outlined { color: var(--navy-500); font-size: 18px; }
.ptl-ui .pta-doc-e { font-size: .72rem; color: var(--faint); font-variant-numeric: tabular-nums; }
.ptl-ui .pta-doc-a { display: flex; gap: 7px; flex-wrap: wrap; margin-top: auto; }

/* ===========================================================================
   5. TELÉFONO
   ===========================================================================
   El rail se acuesta arriba del panel con su propio scroll y un tope de alto:
   sin el tope, con 40 cañeros hay que pasar la lista entera para llegar al
   contenido. */
@media (max-width: 860px) {
    .ptl-ui .pta-split { flex-direction: column; gap: 12px; padding: 12px; }
    .ptl-ui .pta-avisos { padding: 12px 12px 0; }
    .ptl-ui .pta-rail { flex: 0 0 auto; max-height: 34vh; }
    .ptl-ui .pta-panel { flex: 1 1 auto; }
    .ptl-ui .pta-docs { grid-template-columns: 1fr; }
}