/* ============================================================
   NOTA SOBRE LAS UNIDADES
   ------------------------------------------------------------
   portal.css fija html{font-size:62.5%}, es decir 1rem = 10px.
   Los valores de este archivo ya vienen convertidos a esa base:
   para leerlos en pixeles, multiplica por 10 (1.352rem = 13.5px).
   ============================================================ */
/* ============================================================
   PORTAL DOCUMENTAL — Rediseño de pantallas (2026-08)
   ============================================================
   Se carga DESPUÉS de portal.css y solo cambia la ESTRUCTURA de
   las pantallas: menos densidad, más panorama.

   No define colores propios: usa los tokens --pt-* que ya existen,
   así el tema claro/oscuro sigue funcionando con el mismo
   interruptor de siempre (tema.js).

   Pantallas: ingreso · carpetas · estados · calendario ·
              detalle de carpeta · usuarios y actividad
   ============================================================ */


/* ============================================================
   0) CAMPOS — borde coherente con el tema
   ------------------------------------------------------------
   En oscuro el borde de los campos se estaba resolviendo al valor
   del tema claro (#E2EAEC), demasiado brillante sobre superficie
   oscura. Se fija al token de borde, que es lo que pide el diseño.
   ============================================================ */
html[data-tema="oscuro"] .pt-campo input,
html[data-tema="oscuro"] .pt-campo select,
html[data-tema="oscuro"] .pt-campo textarea,
html[data-tema="oscuro"] .pt-chat-entrada textarea{
    border-color: var(--pt-borde);
}
html[data-tema="oscuro"] .pt-campo input:focus,
html[data-tema="oscuro"] .pt-campo select:focus,
html[data-tema="oscuro"] .pt-campo textarea:focus{
    border-color: var(--pt-marca-cian);
}


/* ============================================================
   1) INGRESO — panel partido
   ------------------------------------------------------------
   La marca y el estado del servicio a la izquierda, el formulario
   a la derecha. Un solo foco, sin caja flotando en el vacío.
   ============================================================ */
body.pt-cuerpo-login{
    display: block;
    padding: 0;
    margin: 0;
    min-height: 100vh;
    background: var(--pt-fondo);
}

.pt-ingreso{
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    min-height: 100vh;
}

/* ---- Panel de marca (siempre oscuro: es el chrome de la casa) ---- */
/* Logo arriba, título centrado. Antes iba con space-between porque
   había un tercer hijo abajo («Servicio operativo») que sujetaba el
   reparto; al quedarse en dos, el título se caía al pie del panel. */
.pt-ingreso__marca{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3.2rem;
    padding: 5.44rem 5.76rem;
    background: var(--pt-navy-900);
    color: var(--pt-blanco);
    overflow: hidden;
}
/* El panel de marca va en color plano. Antes llevaba un halo cian
   difuminado en la esquina; se quitó junto con el resto de los
   degradados para que la interfaz use un solo color sólido por
   superficie. */
.pt-ingreso__logo{
    display: flex;
    align-items: center;
    gap: 1.12rem;
    position: relative;
    z-index: 1;
}
.pt-ingreso__logo span{
    font-family: var(--pt-fuente-titulos);
    font-size: 1.696rem;
    font-weight: 600;
    color: var(--pt-blanco);
}
/* Marca de agua: el mismo dibujo del icono de la pestaña, enorme y
   tenue, saliéndose por la esquina inferior derecha. El panel se quedó
   con dos elementos arriba a la izquierda y el resto vacío; esto lo
   ocupa sin añadir texto. Va detrás de todo (z-index 0, y el logo y el
   título llevan z-index 1) y no recibe clics. */
.pt-ingreso__agua{
    position: absolute;
    right: -15%;
    top: 50%;
    transform: translateY(-42%);
    width: clamp(32rem, 58%, 84rem);   /* crece con el panel, no con la letra */
    height: auto;
    color: var(--pt-marca-cian);
    opacity: .11;
    pointer-events: none;
    z-index: 0;
}

/* margin:auto 0 lo centra en el hueco que deja el logo. */
.pt-ingreso__centro{ position: relative; z-index: 1; margin: auto 0; }
.pt-ingreso__centro h1{
    font-family: var(--pt-fuente-titulos);
    font-size: clamp(3.04rem, 3.6vw, 4.8rem);
    line-height: 1.12;
    font-weight: 600;
    color: var(--pt-blanco);
    margin-bottom: 1.6rem;
    max-width: 13ch;
}

/* ---- Panel del formulario (sigue el tema) ---- */
.pt-ingreso__forma{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2.4rem;
    padding: 5.44rem clamp(2.56rem, 5vw, 7.04rem);
    background: var(--pt-fondo);
}
.pt-ingreso__caja{ width: 100%; max-width: 48rem; margin: 0 auto; }
.pt-ingreso__caja h2{
    font-family: var(--pt-fuente-titulos);
    font-size: 2.208rem;
    font-weight: 600;
    margin-bottom: 0.48rem;
}
.pt-ingreso__caja > p.pt-nota{ margin-bottom: 2.56rem; }

/* El formulario reutiliza .pt-campo de portal.css; solo se ajusta el ritmo */
.pt-ingreso__caja #form-login{ display: flex; flex-direction: column; gap: 1.68rem; }
.pt-ingreso__caja #boton-entrar{ margin-top: 0.48rem; }

/* Etiqueta + enlace "olvidé" en la misma línea */
.pt-campo__fila{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.6rem;
}
.pt-campo__fila .pt-enlace-olvide{
    margin: 0;
    font-size: 1.216rem;
    padding: 0;
}

.pt-ingreso__pie{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    flex-wrap: wrap;
    margin-top: 3.04rem;
    padding-top: 1.76rem;
    border-top: 1px solid var(--pt-borde);
    font-size: 1.248rem;
}
.pt-ingreso__pie a{ color: var(--pt-gris); text-decoration: none; }
.pt-ingreso__pie a:hover{ color: var(--pt-azul); text-decoration: underline; }

/* El interruptor de tema va anclado a la esquina del panel derecho */
body.pt-cuerpo-login .pt-tema-flotante{
    position: absolute;
    top: 2.4rem;
    right: 2.4rem;
    bottom: auto;
    left: auto;
}
.pt-ingreso__forma{ position: relative; }

/* En pantallas angostas el panel de marca se vuelve una cabecera corta */
@media (max-width: 860px){
    .pt-ingreso{ grid-template-columns: 1fr; min-height: 100vh; }
    .pt-ingreso__marca{
        padding: 3.2rem 2.56rem 2.88rem;
        gap: 1.92rem;
    }
    .pt-ingreso__marca::after{ width: 300px; height: 300px; right: -120px; top: -120px; }
    .pt-ingreso__centro h1{ font-size: 2.4rem; max-width: none; }
    .pt-ingreso__forma{ padding: 3.52rem 2.56rem 4.8rem; justify-content: flex-start; }
    /* Apilado, el panel de marca es una franja de dos renglones: la
       marca de agua no cabe detrás sin pisar el título. */
    .pt-ingreso__agua{ display: none; }
}


/* ============================================================
   2) SHELL DE LA APLICACIÓN — navegación lateral
   ------------------------------------------------------------
   Las pestañas superiores pasan a una columna izquierda fija.
   Gana ancho útil para las tablas y deja sitio para el panorama.
   Los botones conservan sus IDs y su clase .activa: la lógica de
   roles de app.js sigue funcionando sin tocarla.
   ============================================================ */
body.pt-app{
    margin: 0;
    padding: 0;
    background: var(--pt-fondo);
    min-height: 100vh;
}
.pt-marco{
    display: grid;
    grid-template-columns: 216px minmax(0, 1fr);
    min-height: 100vh;
}
/* Barra plegada: la columna desaparece y el contenido ocupa todo.
   Se oculta con display:none en vez de deslizarla, porque una barra
   trasladada fuera del marco crea desplazamiento horizontal. */
.pt-marco--plegado{ grid-template-columns: minmax(0, 1fr); }
.pt-marco--plegado > .pt-lateral,
.pt-marco--plegado > .pt-lateral-tapa{ display: none; }

/* ---- Columna lateral ---- */
.pt-lateral{
    display: flex;
    flex-direction: column;
    gap: 2.24rem;
    padding: 2.4rem 1.6rem;
    background: var(--pt-superficie);
    border-right: 1px solid var(--pt-borde);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}
.pt-lateral__marca{
    display: flex;
    align-items: center;
    gap: 0.96rem;
    padding: 0 0.64rem;
}
/* Botón de plegar: discreto hasta que se pasa por encima. Se queda
   pegado al borde derecho de la barra. */
.pt-lateral__plegar{
    margin-left: auto;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 9px;
    background: none;
    color: var(--pt-gris);
    font: inherit;
    font-size: 1.28rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--pt-rapido), color var(--pt-rapido), border-color var(--pt-rapido);
}
.pt-lateral__plegar:hover{
    background: var(--pt-superficie-2);
    border-color: var(--pt-borde);
    color: var(--pt-tinta);
}
.pt-lateral__marca strong{
    font-family: var(--pt-fuente-titulos);
    font-size: 1.488rem;
    font-weight: 600;
    line-height: 1.15;
    color: var(--pt-tinta);
}

/* Navegación: los <button> ya existían, aquí solo cambian de forma */
.pt-lateral__nav{
    display: flex;
    flex-direction: column;
    gap: 0.352rem;
}

/* Enlaces a sitios de fuera. Van separados de la navegación por una
   línea y con la flecha de salida, porque no llevan a otra sección del
   portal sino a otra plataforma: sin esa distinción, quien lo pulsa
   cree que el portal lo echó a otro sitio. */
.pt-lateral__externos{
    display: flex;
    flex-direction: column;
    gap: 0.72rem;
    padding-top: 1.44rem;
    border-top: 1px solid var(--pt-borde);
}
/* Rótulo de grupo, con la misma letra pequeña en versales que el rol
   de la persona conectada: dice de una que lo de abajo sale del portal. */
.pt-lateral__rotulo{
    padding: 0 0.64rem;
    font-size: 0.928rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--pt-gris);
}
/* Tarjeta, no texto suelto: antes iba en --pt-azul-claro, que está
   pensado para leerse SOBRE el chrome oscuro. Sobre la barra blanca
   quedaba tan pálido que parecía una opción desactivada. */
.pt-lateral__externo{
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.72rem 0.88rem;
    border: 1px solid var(--pt-borde);
    border-radius: 14px;
    background: var(--pt-superficie-2);
    color: var(--pt-tinta);
    text-decoration: none;
    transition: border-color var(--pt-rapido), background var(--pt-rapido),
                box-shadow var(--pt-rapido);
}
.pt-lateral__externo:hover,
.pt-lateral__externo:focus-visible{
    border-color: var(--pt-marca-cian);
    background: var(--pt-superficie);
    box-shadow: var(--pt-sombra-1);
}
/* Cuadro cian de marca: el único punto de color de la barra, que es
   lo que hace que el ojo lo encuentre. */
.pt-lateral__externo__icono{
    width: 26px; height: 26px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--pt-marca-cian);
    color: var(--pt-blanco);
}
.pt-lateral__externo__icono svg{ width: 14px; height: 14px; }
.pt-lateral__externo__txt{ min-width: 0; line-height: 1.2; }
.pt-lateral__externo__txt b{
    display: block;
    font-size: 1.256rem;
    font-weight: 700;
    letter-spacing: .01em;
}
.pt-lateral__externo__txt small{
    display: block;
    font-size: 0.928rem;
    color: var(--pt-gris);
}
.pt-lateral__externo__flecha{
    margin-left: auto;
    width: 13px; height: 13px;
    flex: 0 0 auto;
    color: var(--pt-gris);
    transition: color var(--pt-rapido), transform var(--pt-rapido);
}
.pt-lateral__externo:hover .pt-lateral__externo__flecha,
.pt-lateral__externo:focus-visible .pt-lateral__externo__flecha{
    color: var(--pt-marca-cian);
    transform: translate(1px, -1px);
}

.pt-lateral__nav button{
    display: flex;
    align-items: center;
    gap: 0.96rem;
    width: 100%;
    min-height: 36px;
    padding: 0.8rem 1.12rem;
    border: none;
    border-radius: 14px;
    background: transparent;
    color: var(--pt-gris);
    font: inherit;
    font-size: 1.352rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background var(--pt-rapido), color var(--pt-rapido);
}
.pt-lateral__nav button:hover{
    background: var(--pt-superficie-2);
    color: var(--pt-tinta);
}
.pt-lateral__nav button.activa{
    background: var(--pt-navy-700);
    color: var(--pt-blanco);
    font-weight: 600;
}
.pt-lateral__nav button[hidden]{ display: none; }
/* Contador a la derecha del enlace (nº de carpetas, nº por vencer…) */
.pt-lateral__nav button .pt-nav-num{
    margin-left: auto;
    font-size: 1.152rem;
    font-weight: 600;
    color: var(--pt-gris);
    background: var(--pt-superficie-2);
    border-radius: 999px;
    padding: 0.16rem 0.72rem;
    min-width: 2.16rem;
    text-align: center;
}
.pt-lateral__nav button.activa .pt-nav-num{
    background: rgba(255,255,255,.16);
    color: var(--pt-blanco);
}

/* Tarjeta de almacenamiento */

/* Persona conectada */
.pt-lateral__yo{
    display: flex;
    align-items: center;
    gap: 0.88rem;
    padding: 0.16rem 0.48rem;
}
.pt-avatar{
    width: 28px; height: 28px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--pt-navy-700);
    color: var(--pt-blanco);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.056rem;
    font-weight: 700;
    letter-spacing: .02em;
}
.pt-lateral__yo div{ min-width: 0; }
.pt-lateral__yo b{
    display: block;
    font-size: 1.264rem;
    font-weight: 600;
    color: var(--pt-tinta);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pt-lateral__yo small{
    display: block;
    font-size: 0.992rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pt-gris);
}

/* ---- Columna de contenido ---- */
.pt-principal{ min-width: 0; display: flex; flex-direction: column; }
.pt-cabecera{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.8rem;
    padding: 1.44rem clamp(1.6rem, 2.4vw, 3.04rem);
    border-bottom: 1px solid var(--pt-borde);
    position: sticky;
    top: 0;
    z-index: var(--pt-z-encabezado);
    background: var(--pt-fondo);
}
.pt-cabecera__hueco{ margin-right: auto; }

/* Botón ☰: en móvil abre el cajón; en escritorio solo aparece
   cuando la barra está plegada, para poder traerla de vuelta. */
.pt-lateral-abrir{ display: none; }
.pt-marco--plegado .pt-lateral-abrir{
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 900px){
    .pt-marco,
    .pt-marco--plegado{ grid-template-columns: 1fr; }
    /* Debajo de 900px la barra es un cajón: el pliegue de escritorio
       no debe impedir abrirlo. La barra vuelve a ser flex, no block:
       es una columna con gap. */
    .pt-marco--plegado > .pt-lateral{ display: flex; }
    .pt-marco--plegado > .pt-lateral-tapa{ display: block; }
    .pt-lateral__plegar{ display: none; }
    .pt-lateral{
        position: fixed;
        z-index: calc(var(--pt-z-modal) - 1);
        width: 216px;
        transform: translateX(-100%);
        transition: transform var(--pt-normal);
        box-shadow: var(--pt-sombra-3);
    }
    .pt-lateral.abierta{ transform: none; }
    .pt-lateral-abrir{
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .pt-lateral-tapa{
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.45);
        z-index: calc(var(--pt-z-modal) - 2);
    }
    .pt-lateral-tapa[hidden]{ display: none; }
}


/* ============================================================
   3) FRANJA DE PANORAMA — 4 cifras sobre la lista
   ------------------------------------------------------------
   Responde «cómo va todo» antes de leer una sola fila.
   ============================================================ */
.pt-panorama{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.44rem;
    margin-bottom: 2.24rem;
}
.pt-panorama__caja{
    padding: 1.52rem 1.76rem;
    border: 1px solid var(--pt-borde);
    border-radius: 18px;
    background: var(--pt-superficie);
    min-width: 0;
}
.pt-panorama__tit{
    font-size: 1.008rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--pt-gris);
    margin-bottom: 0.56rem;
}
.pt-panorama__num{
    font-family: var(--pt-fuente-titulos);
    font-size: 2.64rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--pt-tinta);
}
.pt-panorama__pie{
    font-size: 1.152rem;
    color: var(--pt-gris);
    margin-top: 0.32rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pt-panorama__num--alerta{ color: var(--pt-rojo-txt); }
.pt-panorama__num--aviso{ color: var(--pt-ambar-txt); }

@media (max-width: 1100px){ .pt-panorama{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px){ .pt-panorama{ grid-template-columns: 1fr; } }


/* ============================================================
   4) LISTA DE CARPETAS — filas en vez de tarjetas
   ------------------------------------------------------------
   Tres columnas de tarjetas con cuatro botones cada una se
   vuelven una lista escaneable con UNA acción primaria; el resto
   se repliega en el menú «⋯».
   ============================================================ */
.pt-tabla-tarjeta{
    border: 1px solid var(--pt-borde);
    border-radius: 22px;
    background: var(--pt-superficie);
    /* Sin overflow:hidden. Recortaba el menú «⋯» de las filas: con
       una sola carpeta el menú caía entero fuera y parecía que no
       abría. Las esquinas se redondean fila por fila. */
    overflow: visible;
}
.pt-tabla-tarjeta > :first-child{
    border-top-left-radius: 21px;
    border-top-right-radius: 21px;
}
.pt-tabla-tarjeta > :last-child{
    border-bottom-left-radius: 21px;
    border-bottom-right-radius: 21px;
}
.pt-filas__cab,
.pt-fila-carpeta{
    display: grid;
    grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.9fr) minmax(0, 1.1fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.6rem;
    padding: 1.36rem 1.92rem;
}
.pt-filas__cab{
    font-size: 1.008rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--pt-gris);
    border-bottom: 1px solid var(--pt-borde);
    background: var(--pt-superficie-2);
}
.pt-fila-carpeta{
    border-bottom: 1px solid var(--pt-borde);
    transition: background var(--pt-rapido);
}
.pt-fila-carpeta:last-child{ border-bottom: none; }
.pt-fila-carpeta:hover{ background: var(--pt-superficie-2); }
.pt-fila-carpeta--inactiva{ opacity: .62; }

.pt-fila__nombre{
    font-weight: 600;
    font-size: 1.44rem;
    color: var(--pt-tinta);
    display: flex;
    align-items: center;
    gap: 0.72rem;
    margin-bottom: 0.288rem;
}
.pt-fila__sub,
.pt-fila__col{
    font-size: 1.224rem;
    color: var(--pt-gris);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pt-fila__col b{ display: block; color: var(--pt-tinta); font-weight: 600; }
.pt-fila__acciones{
    display: flex;
    align-items: center;
    gap: 0.56rem;
    justify-self: end;
}

/* Menú «⋯» de acciones secundarias */
.pt-menu{ position: relative; }
.pt-menu__boton{
    width: 30px; height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--pt-borde);
    border-radius: 10px;
    background: transparent;
    color: var(--pt-gris);
    cursor: pointer;
    font-size: 1.6rem;
    line-height: 1;
    transition: all var(--pt-rapido);
}
.pt-menu__boton:hover{ color: var(--pt-tinta); border-color: var(--pt-azul); }
.pt-menu__lista{
    position: absolute;
    right: 0;
    top: calc(100% + 0.48rem);
    z-index: var(--pt-z-encabezado);
    min-width: 17.6rem;
    padding: 0.48rem;
    background: var(--pt-superficie);
    border: 1px solid var(--pt-borde);
    border-radius: 14px;
    box-shadow: var(--pt-sombra-2);
}
.pt-menu__lista[hidden]{ display: none; }
.pt-menu__lista button{
    display: block;
    width: 100%;
    padding: 0.8rem 1.04rem;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--pt-tinta);
    font: inherit;
    font-size: 1.28rem;
    text-align: left;
    cursor: pointer;
}
.pt-menu__lista button:hover{ background: var(--pt-superficie-2); }
.pt-menu__lista button.pt-menu__peligro{ color: var(--pt-rojo-txt); }

/* En pantallas medianas la fila se pliega a dos líneas */
@media (max-width: 980px){
    .pt-filas__cab{ display: none; }
    .pt-fila-carpeta{
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 0.72rem;
    }
    .pt-fila__col{ grid-column: 1; }
    .pt-fila__acciones{ grid-row: 1; grid-column: 2; }
}


/* ============================================================
   5) ESTADOS — tablero por urgencia
   ------------------------------------------------------------
   El semáforo deja de ser una columna y pasa a ser la estructura
   de la pantalla: cada trámite cae en el grupo que le toca.
   El reloj 60/90 del trámite se dibuja como anillo.
   ============================================================ */
/* ---- El tablero: una columna por grupo ----
   Las columnas se estiran a la misma altura (comportamiento normal
   de grid), que es lo que hace que el tablero se lea como tablero
   y no como cuatro listas sueltas. El número de columnas lo pone
   el JS en --pt-columnas, porque "Pausados" solo aparece si hay. */
.pt-tablero{
    display: grid;
    grid-template-columns: repeat(var(--pt-columnas, 4), minmax(0, 1fr));
    gap: 1.44rem;
    align-items: stretch;
}
.pt-columna{
    display: flex;
    flex-direction: column;
    gap: 1.12rem;
    padding: 1.28rem;
    border: 1px solid var(--pt-borde);
    border-radius: 20px;
    background: var(--pt-fondo);
}
/* Cada columna toma un tinte de su color. El borde plano va primero
   como respaldo para navegadores sin color-mix. */
.pt-columna--rojo{    border-color: color-mix(in srgb, var(--pt-rojo-txt)   32%, var(--pt-borde)); }
.pt-columna--naranja{ border-color: color-mix(in srgb, var(--pt-ambar-txt)  38%, var(--pt-borde)); }
.pt-columna--cian{    border-color: color-mix(in srgb, var(--pt-marca-cian) 32%, var(--pt-borde)); }
.pt-columna--verde{   border-color: color-mix(in srgb, var(--pt-verde-txt)  28%, var(--pt-borde)); }

.pt-columna__cab{
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding-bottom: 1.04rem;
    border-bottom: 1px solid var(--pt-borde);
}
.pt-columna__tit{
    font-family: var(--pt-fuente-titulos);
    font-size: 1.44rem;
    font-weight: 600;
    color: var(--pt-tinta);
    margin-right: auto;
}
.pt-columna__num{
    font-size: 1.152rem;
    font-weight: 700;
    color: var(--pt-gris);
    background: var(--pt-superficie-2);
    border-radius: 999px;
    padding: 0.16rem 0.72rem;
}
.pt-columna__lista{
    display: flex;
    flex-direction: column;
    gap: 0.96rem;
    flex: 1;
}
.pt-columna__vacio{
    padding: 1.6rem 1.44rem;
    border: 1px dashed var(--pt-borde);
    border-radius: 16px;
    font-size: 1.224rem;
    line-height: 1.5;
    color: var(--pt-gris);
    text-align: center;
}
/* Atajo para el caso más común de columna vacía: hay carpetas
   activas a las que todavía no se les definió ningún proceso. */
.pt-columna__crear{
    padding: 1.28rem 1.2rem;
    border: 1px dashed var(--pt-borde);
    border-radius: 16px;
    background: none;
    font: inherit;
    font-size: 1.192rem;
    line-height: 1.45;
    color: var(--pt-gris);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--pt-rapido), color var(--pt-rapido);
}
.pt-columna__crear:hover{ border-color: var(--pt-azul); color: var(--pt-azul); }

.pt-grupo__punto{
    width: 9px; height: 9px;
    border-radius: 50%;
    flex: 0 0 auto;
}
.pt-grupo__punto--rojo{ background: var(--pt-rojo-txt); }
.pt-grupo__punto--naranja{ background: var(--pt-ambar-txt); }
.pt-grupo__punto--cian{ background: var(--pt-marca-cian); }
.pt-grupo__punto--verde{ background: var(--pt-verde-txt); }
.pt-grupo__punto--gris{ background: var(--pt-gris); }

/* ---- Tarjeta de trámite: nombre arriba, plazo y detalle abajo ---- */
.pt-tramite{
    display: flex;
    flex-direction: column;
    gap: 1.04rem;
    padding: 1.28rem 1.36rem;
    border: 1px solid var(--pt-borde);
    border-radius: 16px;
    background: var(--pt-superficie);
    transition: border-color var(--pt-rapido);
}
.pt-tramite:hover{ border-color: var(--pt-azul); }
.pt-tramite__cab{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.04rem;
}
/* min-width:0 para que el título pueda encogerse dentro del flex en vez
   de forzar el ancho de la columna del tablero */
.pt-tramite__titulo{ min-width: 0; }
.pt-tramite__nombre{
    font-weight: 600;
    font-size: 1.352rem;
    line-height: 1.35;
    color: var(--pt-tinta);
    overflow-wrap: break-word;
}
.pt-tramite__op{
    font-size: 1.16rem;
    color: var(--pt-gris);
    margin-top: 0.24rem;
}
.pt-tramite__cuerpo{
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding-top: 1.04rem;
    border-top: 1px solid var(--pt-borde);
}
.pt-tramite__linea{ font-size: 1.192rem; line-height: 1.5; color: var(--pt-gris); }
.pt-tramite__linea strong{ color: var(--pt-tinta); font-weight: 600; }
.pt-tramite__acciones{ display: flex; align-items: center; gap: 0.56rem; }
.pt-tramite__ver{ flex: 1; justify-content: center; }

/* El anillo del conteo 60/90 vivía aquí. Lo sustituyó .pt-plazo, que
   dice la fecha de vencimiento en vez de cuántos días van. */

/* ---- Pie del tablero ---- */
.pt-tablero__pie{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    flex-wrap: wrap;
    padding: 1.36rem 1.92rem;
    border: 1px solid var(--pt-borde);
    border-radius: 18px;
    background: var(--pt-superficie-2);
    font-size: 1.224rem;
    color: var(--pt-gris);
}
.pt-tablero__pie .pt-acciones{ display: flex; gap: 0.72rem; flex-wrap: wrap; }

/* Cuatro columnas solo caben con pantalla ancha. Debajo se reparten
   en dos y al final se apilan, sin dejar de ser columnas. */
@media (max-width: 1180px){
    .pt-tablero{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px){
    .pt-tablero{ grid-template-columns: minmax(0, 1fr); }
}


/* ============================================================
   6) DETALLE DE CARPETA — cabecera compacta y cifras
   ------------------------------------------------------------
   Los documentos son la pantalla, no el formulario de subida:
   la zona de carga se repliega detrás de un botón y la cabecera
   resume el expediente en cuatro cifras.
   ============================================================ */
.pt-detalle-cifras{
    display: flex;
    flex-wrap: wrap;
    gap: 3.04rem;
    padding: 1.44rem 0 0.32rem;
    margin-bottom: 1.44rem;
    border-bottom: 1px solid var(--pt-borde);
}
.pt-cifra__num{
    font-family: var(--pt-fuente-titulos);
    font-size: 2.272rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--pt-tinta);
}
.pt-cifra__tit{
    font-size: 0.976rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--pt-gris);
    margin-top: 0.192rem;
}
.pt-cifra__num--alerta{ color: var(--pt-rojo-txt); }
.pt-cifra__num--aviso{ color: var(--pt-ambar-txt); }

/* Migas de pan sobre el título */
.pt-migas{
    display: flex;
    align-items: center;
    gap: 0.64rem;
    font-size: 1.184rem;
    color: var(--pt-gris);
    margin-bottom: 0.56rem;
}
.pt-migas button{
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    color: var(--pt-gris);
    cursor: pointer;
    text-decoration: none;
}
.pt-migas button:hover{ color: var(--pt-azul); text-decoration: underline; }
.pt-migas span{ opacity: .5; }

/* La zona de carga aparece solo al pedirla */
.pt-zona-subida[hidden]{ display: none; }
.pt-barra-archivos{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    flex-wrap: wrap;
    margin-bottom: 1.44rem;
}


/* ============================================================
   7) USUARIOS — crear usuario en panel lateral
   ------------------------------------------------------------
   El formulario de alta ocupaba media pantalla encima de la
   tabla. Ahora se abre como panel lateral: la lista de personas
   es lo que se ve al entrar.
   ============================================================ */
.pt-cajon{
    position: fixed;
    top: 0;
    right: 0;
    z-index: var(--pt-z-modal);
    width: min(48rem, 100%);
    height: 100vh;
    overflow-y: auto;
    padding: 2.56rem;
    background: var(--pt-superficie);
    border-left: 1px solid var(--pt-borde);
    box-shadow: var(--pt-sombra-3);
    transform: translateX(100%);
    transition: transform var(--pt-normal);
}
.pt-cajon.abierto{ transform: none; }
.pt-cajon__cab{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.6rem;
    margin-bottom: 1.92rem;
}
.pt-cajon__cab h3{
    font-family: var(--pt-fuente-titulos);
    font-size: 1.84rem;
    font-weight: 600;
    margin: 0;
}
.pt-cajon__cerrar{
    width: 30px; height: 30px;
    flex: 0 0 auto;
    border: 1px solid var(--pt-borde);
    border-radius: 10px;
    background: transparent;
    color: var(--pt-gris);
    font-size: 1.68rem;
    line-height: 1;
    cursor: pointer;
}
.pt-cajon__cerrar:hover{ color: var(--pt-tinta); border-color: var(--pt-azul); }
.pt-cajon-tapa{
    position: fixed;
    inset: 0;
    z-index: calc(var(--pt-z-modal) - 1);
    background: rgba(0,0,0,.45);
}
.pt-cajon-tapa[hidden]{ display: none; }

/* Dentro del cajón el formulario se apila en una columna */
.pt-cajon .pt-form-usuario{
    display: flex;
    flex-direction: column;
    gap: 1.44rem;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
}
.pt-cajon .pt-form-usuario .pt-campo{ align-self: stretch; }


/* ============================================================
   8) CALENDARIO — mes + agenda al lado
   ------------------------------------------------------------
   El mes deja de ser una rejilla que hay que interrogar: la
   columna derecha responde «qué sigue» sin hacer clic.
   ============================================================ */
.pt-cal-marco{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 32rem;
    gap: 2.24rem;
    align-items: start;
}

/* ---- El mes, dentro de su propia tarjeta ---- */
.pt-calv-tarjeta{
    padding: 1.76rem 1.92rem 1.92rem;
    border: 1px solid var(--pt-borde);
    border-radius: 20px;
    background: var(--pt-superficie);
}
.pt-calv-tarjeta__cab{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.8rem;
}
.pt-calv-tarjeta .pt-cal__barra{
    max-width: none;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
}
.pt-calv-leyenda{
    display: flex;
    align-items: center;
    gap: 1.28rem;
    flex-wrap: wrap;
    font-size: 1.088rem;
    color: var(--pt-gris);
}
.pt-calv-leyenda span{ display: inline-flex; align-items: center; gap: 0.4rem; }

/* ---- Cifras del resumen: etiqueta a la izquierda, número a la derecha ---- */
.pt-agenda__cifra{
    display: flex;
    align-items: center;
    gap: 0.72rem;
    padding: 0.72rem 0;
    border-top: 1px solid var(--pt-borde);
    font-size: 1.216rem;
    color: var(--pt-gris);
}
.pt-agenda__cifra:first-of-type{ border-top: none; padding-top: 0; }
.pt-agenda__cifra span{ margin-right: auto; }
.pt-agenda__cifra strong{
    font-family: var(--pt-fuente-titulos);
    font-size: 1.68rem;
    font-weight: 600;
    color: var(--pt-tinta);
}

.pt-agenda{
    position: sticky;
    top: 7.2rem;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}
.pt-agenda__caja{
    padding: 1.6rem 1.76rem;
    border: 1px solid var(--pt-borde);
    border-radius: 18px;
    background: var(--pt-superficie);
}
.pt-agenda__tit{
    font-size: 1.008rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--pt-gris);
    margin-bottom: 1.12rem;
}
.pt-agenda__item{
    display: grid;
    grid-template-columns: 4.16rem minmax(0, 1fr);
    gap: 1.12rem;
    padding: 0.96rem 0;
    border-top: 1px solid var(--pt-borde);
}
.pt-agenda__item:first-of-type{ border-top: none; padding-top: 0; }
.pt-agenda__fecha{ text-align: center; line-height: 1.1; }
.pt-agenda__dia{
    font-family: var(--pt-fuente-titulos);
    font-size: 1.84rem;
    font-weight: 600;
    color: var(--pt-tinta);
}
.pt-agenda__mes{
    font-size: 0.928rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pt-gris);
}
.pt-agenda__que{
    font-size: 1.264rem;
    font-weight: 600;
    color: var(--pt-tinta);
    margin-bottom: 0.16rem;
}
.pt-agenda__det{ font-size: 1.152rem; color: var(--pt-gris); }
.pt-agenda__plazo{
    display: inline-block;
    margin-top: 0.32rem;
    font-size: 1.056rem;
    font-weight: 600;
    padding: 0.16rem 0.72rem;
    border-radius: 999px;
    background: var(--pt-superficie-2);
    color: var(--pt-gris);
}
.pt-agenda__plazo--rojo{ background: var(--pt-rojo-suave); color: var(--pt-rojo-txt); }
.pt-agenda__plazo--naranja{ background: var(--pt-ambar-suave); color: var(--pt-ambar-txt); }
.pt-agenda__vacio{ font-size: 1.248rem; color: var(--pt-gris); }

/* ---- Caja de acción sugerida: la única con relleno de marca ---- */
/* El cian de marca puro deja el texto blanco en 3.1:1, por debajo del
   mínimo legible. Se oscurece con el slate de la estructura hasta
   ~4.9:1 sin salirse de los colores de la casa. */
.pt-agenda__caja--accion{
    --pt-accion-fondo: #067B8F;
    --pt-accion-fondo: color-mix(in srgb, var(--pt-marca-cian) 70%, var(--pt-navy-900));
    border-color: transparent;
    background: var(--pt-accion-fondo);
    color: var(--pt-blanco);
}
.pt-agenda__caja--accion .pt-agenda__tit{ color: rgba(255,255,255,.78); }
.pt-agenda__accion-que{
    font-family: var(--pt-fuente-titulos);
    font-size: 1.44rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--pt-blanco);
}
.pt-agenda__accion-det{
    font-size: 1.152rem;
    color: rgba(255,255,255,.82);
    margin-top: 0.32rem;
}
.pt-agenda__accion-btns{
    display: flex;
    gap: 0.64rem;
    flex-wrap: wrap;
    margin-top: 1.28rem;
}
/* Sobre el cian, los botones se invierten: blanco sólido y contorno */
.pt-agenda__accion-btns .pt-boton{
    background: var(--pt-blanco);
    border-color: var(--pt-blanco);
    color: var(--pt-accion-fondo);
}
.pt-agenda__accion-btns .pt-boton--fantasma{
    background: transparent;
    border-color: rgba(255,255,255,.5);
    color: var(--pt-blanco);
}
.pt-agenda__accion-btns .pt-boton--fantasma:hover{
    background: rgba(255,255,255,.14);
    border-color: var(--pt-blanco);
    color: var(--pt-blanco);
}

@media (max-width: 1050px){
    .pt-cal-marco{ grid-template-columns: 1fr; }
    .pt-agenda{ position: static; }
}


/* ============================================================
   9) DENSIDAD Y ESCALA — el tema, aplicado a TODO el programa
   ------------------------------------------------------------
   Lo anterior cambió la estructura de las pantallas; esto ajusta
   el ritmo tipográfico y la altura de los controles a la escala
   del diseño, incluidos los componentes que ya existían
   (encabezados, sub-pestañas, buscadores, botones, tablas,
   modales, leyes, chats).

   Medidas tomadas del propio diseño:
     título de pantalla ...... 25px Lora 600
     nota bajo el título ..... 13px Krub
     etiqueta de sección ..... 10px Krub 500, ls .8px, mayúsculas
     cifra grande ............ 20–26px Krub 600  (Krub, no Lora)
     botón ................... 12.5–13px 600 · alto 34 · r 14
     sub-pestaña ............. 12px · alto 28
     buscador / campo ........ 12.5px · alto 36 · r 14
     nav lateral ............. 13.5px · alto 36 · r 14

   Todo va bajo body.pt-app para no encoger la pantalla de
   ingreso, que en el diseño usa controles más grandes (46px).
   ============================================================ */

/* ---- Lienzo ---- */
body.pt-app .pt-contenido{
    padding: 2.4rem clamp(1.6rem, 2.4vw, 3.04rem) 4.8rem;
    max-width: none;
    /* portal.css trae "margin: 0 auto". Dentro de un contenedor flex el
       margen automático CANCELA el estirado: la vista se encogía a su
       contenido y quedaba centrada con un hueco a la izquierda. */
    margin: 0;
    width: 100%;
}

/* ---- Encabezado de pantalla ---- */
body.pt-app .pt-barra-seccion{
    align-items: center;
    gap: 1.6rem;
    margin-bottom: 0.8rem;
}
body.pt-app .pt-barra-seccion h2,
body.pt-app .pt-contenido > section > h2{
    font-family: var(--pt-fuente-titulos);
    font-size: 2.496rem;      /* 25px */
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.005em;
}
body.pt-app .pt-detalle-cabecera h2{
    font-size: 2.4rem;
    line-height: 1.15;
}
body.pt-app .pt-contenido .pt-nota{
    font-size: 1.28rem;        /* 13px */
    line-height: 1.5;
}
body.pt-app #estados-nota{ margin-bottom: 1.76rem !important; }

/* ---- Sub-pestañas (Activas / Desactivadas, pestañas de carpeta) ---- */
body.pt-app .pt-sub-pestanas{
    gap: 0.48rem;
    margin: 1.44rem 0 1.76rem;
    border-bottom: 1px solid var(--pt-borde);
    padding-bottom: 0.88rem;
}
body.pt-app .pt-sub-pestanas button{
    min-height: 28px;
    padding: 0.48rem 1.2rem;
    font-size: 1.2rem;       /* 12px */
    font-weight: 500;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: var(--pt-gris);
}
body.pt-app .pt-sub-pestanas button svg{ width: 14px; height: 14px; }
body.pt-app .pt-sub-pestanas button.activa{
    background: var(--pt-navy-700);
    color: var(--pt-blanco);
    font-weight: 600;
}

/* ---- Buscador ---- */
body.pt-app .pt-buscador{
    max-width: 38.4rem;
    margin: 0 0 1.76rem;
}
body.pt-app .pt-buscador input{
    height: 36px;
    padding: 0 1.28rem 0 3.36rem;
    font-size: 1.248rem;       /* 12.5px */
    border-radius: 14px;
}
body.pt-app .pt-buscador > span[data-icono]{ left: 1.12rem; }

/* ---- Botones ---- */
body.pt-app .pt-boton{
    min-height: 34px;
    padding: 0.72rem 1.52rem;
    font-size: 1.296rem;       /* 13px */
    font-weight: 600;
    border-radius: 14px;
}
body.pt-app .pt-boton--mini{
    min-height: 28px;
    padding: 0.48rem 1.12rem;
    font-size: 1.2rem;
    border-radius: 12px;
}
body.pt-app .pt-boton svg{ width: 15px; height: 15px; }
body.pt-app .pt-boton--mini svg{ width: 13px; height: 13px; }

/* ---- Campos ---- */
body.pt-app .pt-campo input,
body.pt-app .pt-campo select,
body.pt-app .pt-campo textarea{
    min-height: 36px;
    padding: 0.72rem 1.2rem;
    font-size: 1.296rem;
    border-radius: 14px;
}
body.pt-app .pt-campo textarea{ min-height: 7.2rem; }
body.pt-app .pt-campo > span,
body.pt-app .pt-campo > legend{
    font-size: 1.152rem;
    font-weight: 500;
    margin-bottom: 0.48rem;
}

/* ---- Tablas ---- */
body.pt-app .pt-tabla{ font-size: 1.28rem; }
body.pt-app .pt-tabla th{
    font-size: 1rem;      /* 10px */
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pt-gris);
    padding: 0.96rem 1.2rem;
}
body.pt-app .pt-tabla td{ padding: 0.96rem 1.2rem; }
body.pt-app .pt-tabla-envoltura{ border-radius: 18px; }

/* ---- Cifras: Krub, no Lora (así están en el diseño) ---- */
.pt-panorama__num{
    font-family: var(--pt-fuente-texto);
    font-size: 2.592rem;      /* 26px */
    font-weight: 600;
    letter-spacing: -.01em;
}
.pt-cifra__num{
    font-family: var(--pt-fuente-texto);
    font-size: 2rem;      /* 20px */
    font-weight: 600;
}
.pt-agenda__dia{ font-family: var(--pt-fuente-texto); font-size: 1.68rem; }

/* Nombre de trámite en el tablero: Lora, como en el diseño */
.pt-tramite__nombre{
    font-family: var(--pt-fuente-titulos);
    font-size: 1.352rem;      /* 13.5px */
}
.pt-columna__tit{ font-size: 1.28rem; font-weight: 600; font-family: var(--pt-fuente-texto); }
.pt-columna__num{ font-size: 1.088rem; }
.pt-tramite__acciones .pt-boton{ border-radius: 22px; }

/* Nombre de carpeta en la fila: Lora */
.pt-fila__nombre{
    font-family: var(--pt-fuente-titulos);
    font-size: 1.352rem;
}

/* ---- Leyes de insolvencia: mismo ritmo que el resto ---- */
body.pt-app .pt-leyes{
    margin-top: 2.88rem;
    padding: 1.92rem 2.08rem;
    border-radius: 18px;
}
body.pt-app .pt-leyes > h3{
    font-size: 1.52rem;
    gap: 0.8rem;
    margin-bottom: 0.48rem;
}
body.pt-app .pt-leyes > h3 svg{ width: 16px; height: 16px; }
body.pt-app .pt-ley__txt strong{ font-size: 1.296rem; }
body.pt-app .pt-ley__txt span{ font-size: 1.184rem; }

/* ---- Modales ---- */
body.pt-app .pt-modal__caja{ border-radius: 20px; }
body.pt-app .pt-modal__caja h3{ font-size: 1.76rem; }

/* ---- Cabecera superior: más discreta ---- */
body.pt-app .pt-cabecera .pt-boton{
    min-height: 30px;
    font-size: 1.224rem;
    font-weight: 500;
    border-radius: 12px;
}


/* ---- Ingreso: controles a la altura del diseño (46px) ----
   La pantalla de ingreso usa controles más grandes que la
   aplicación: es un solo foco, no una herramienta densa. */
body.pt-cuerpo-login .pt-campo input{
    min-height: 4.6rem;          /* 46px */
    padding: 0 1.4rem;
    font-size: 1.4rem;           /* 14px */
    border-radius: 1.6rem;       /* 16px */
}
body.pt-cuerpo-login .pt-campo-clave input{ padding-right: 4.4rem; }
body.pt-cuerpo-login #boton-entrar{
    min-height: 4.6rem;
    font-size: 1.45rem;          /* 14.5px */
    font-weight: 600;
    border-radius: 1.6rem;
}
body.pt-cuerpo-login .pt-campo > span{
    font-size: 1.1rem;           /* 11px */
    font-weight: 500;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--pt-gris);
    margin-bottom: .6rem;
}


/* ============================================================
   10) AJUSTES VISUALES — pulido tras revisar en pantalla
   ============================================================ */

/* ---- Filtros en línea (Actividad, Calendario) ----
   Eran una caja con borde que competía con el contenido. Ahora
   son una fila de controles discretos, como el resto del tema. */
body.pt-app .pt-calv-filtros{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    background: none;
    border: none;
    padding: 0;
    gap: 1.2rem;
    margin: 0 !important;   /* vive en la cabecera de la sección */
}
body.pt-app .pt-calv-filtros:empty{ display: none; }
body.pt-app .pt-calv-filtros label{
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-size: 1.2rem;
    color: var(--pt-gris);
}
body.pt-app .pt-calv-filtros select{
    min-height: 3.2rem;
    padding: .3rem 2.4rem .3rem .9rem;
    font-size: 1.248rem;
    border-radius: 1.2rem;
    border: 1px solid var(--pt-borde);
    background-color: var(--pt-superficie);
    color: var(--pt-tinta);
}

/* ---- Calendario: celdas grandes, con el detalle dentro del día ----
   La rejilla ocupa el ancho de su tarjeta en vez de quedarse en 52rem,
   y cada día tiene sitio para dos etiquetas. Se puede leer el mes sin
   ir día por día. */
body.pt-app .pt-calv__semana,
body.pt-app .pt-calv__rejilla{ max-width: none; }
body.pt-app .pt-calv__semana span{
    font-size: .96rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pt-gris);
    text-align: left;
    padding-left: .6rem;
}
body.pt-app .pt-calv__rejilla{ gap: .6rem; }
body.pt-app .pt-calv__dia{
    min-height: 9.6rem;
    border-radius: 1.2rem;
    align-items: stretch;
    justify-content: flex-start;
    gap: .5rem;
    padding: .7rem .6rem;
    text-align: left;
    overflow: hidden;
}
body.pt-app .pt-calv__num{
    font-size: 1.28rem;
    font-weight: 600;
    color: var(--pt-tinta);
}
body.pt-app .pt-calv__dia--nohabil .pt-calv__num{ color: var(--pt-gris); }
body.pt-app .pt-calv__dia--vacio{ min-height: 0; }
/* El día de hoy se marca con contorno, no con relleno: el relleno
   está reservado para el estado del vencimiento. */
body.pt-app .pt-calv__dia--hoy{
    border-color: var(--pt-tinta);
    box-shadow: inset 0 0 0 1px var(--pt-tinta);
}
body.pt-app .pt-calv__dia--marca-rojo{ background: var(--pt-rojo-suave); }
body.pt-app .pt-calv__dia--marca-naranja{ background: var(--pt-ambar-suave); }
body.pt-app .pt-calv__dia--marca-verde{ background: var(--pt-verde-suave); }

.pt-calv__chips{
    display: flex;
    flex-direction: column;
    gap: .3rem;
    min-width: 0;
}
.pt-calv__chip{
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: .22rem .56rem;
    border-radius: .8rem;
    font-size: 1.008rem;
    line-height: 1.5;
    font-weight: 500;
    background: var(--pt-superficie-2);
    color: var(--pt-gris);
}
.pt-calv__chip--rojo{ background: var(--pt-rojo); color: #fff; }
.pt-calv__chip--naranja{ background: var(--pt-ambar); color: #fff; }
.pt-calv__chip--verde{ background: var(--pt-verde); color: #fff; }
.pt-calv__chip--pausado{ background: var(--pt-gris); color: #fff; }
.pt-calv__mas{ font-size: .96rem; color: var(--pt-gris); padding-left: .2rem; }

/* En móvil una celda mide ~38px: no cabe ninguna etiqueta. Las mismas
   marcas se dibujan como puntos y el detalle se lee tocando el día. */
@media (max-width: 720px){
    body.pt-app .pt-calv__dia{
        min-height: 5.6rem;
        align-items: center;
        padding: .5rem .2rem;
    }
    body.pt-app .pt-calv__semana span{ text-align: center; padding-left: 0; }
    .pt-calv__chips{ flex-direction: row; flex-wrap: wrap; justify-content: center; gap: .25rem; }
    .pt-calv__chip{
        width: 7px;
        height: 7px;
        padding: 0;
        border-radius: 50%;
        overflow: hidden;
        text-indent: -999px;
    }
    .pt-calv__mas{ font-size: .88rem; padding: 0; }
    .pt-calv-tarjeta{ padding: 1.28rem 1.12rem 1.44rem; }
}

/* Los filtros comparten fila con «Actualizar»; en pantallas angostas
   se reparten en líneas en vez de empujar la página a lo ancho. */
body.pt-app .pt-calv-filtros{ max-width: 100%; min-width: 0; }
body.pt-app .pt-calv-filtros label{ min-width: 0; max-width: 100%; }
body.pt-app .pt-calv-filtros select{ min-width: 0; max-width: 100%; }
@media (max-width: 620px){
    body.pt-app .pt-calv-filtros{ width: 100%; }
    body.pt-app .pt-calv-filtros label{ flex: 1 1 100%; }
    body.pt-app .pt-calv-filtros select{ flex: 1; }
}

/* ---- Registro de actividad: filas más juntas ---- */
body.pt-app .pt-notif-lista > *{ font-size: 1.328rem; }
body.pt-app .pt-notif-lista li,
body.pt-app .pt-notif-lista .pt-notif{
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* ---- Leyes de insolvencia: rejilla más apretada ---- */
body.pt-app .pt-leyes__lista{ gap: .8rem; }
body.pt-app .pt-leyes__lista a{
    padding: .9rem 1.1rem;
    border-radius: 1.4rem;
}

/* ---- Burbuja de soporte: que no tape el contenido ---- */
body.pt-app .pt-soporte-burbuja{
    width: 4.4rem;
    height: 4.4rem;
    right: 1.6rem;
    bottom: 1.6rem;
    box-shadow: var(--pt-sombra-2);
}
body.pt-app .pt-contenido{ padding-bottom: 8rem; }

/* ---- Insignia de estado en la fila: más discreta ---- */
.pt-fila__nombre .pt-insignia{
    font-size: .96rem;
    padding: .15rem .6rem;
    letter-spacing: .04em;
}

/* ---- Cabecera superior: separarla del contenido ---- */
body.pt-app .pt-cabecera{ gap: .8rem; }
body.pt-app .pt-cabecera .pt-campana{ margin-right: .4rem; }

/* Fila del título: buscador y acción primaria a la derecha */
body.pt-app .pt-barra-seccion__acciones{
    display: flex;
    align-items: center;
    gap: .8rem;
    flex-wrap: wrap;
}
body.pt-app .pt-barra-seccion__acciones .pt-buscador{
    margin: 0;
    width: 26rem;
    max-width: 100%;
}
@media (max-width: 720px){
    body.pt-app .pt-barra-seccion__acciones{ width: 100%; }
    body.pt-app .pt-barra-seccion__acciones .pt-buscador{ flex: 1 1 100%; width: auto; }
}

/* ---- Buscador: un solo control de 36px, no una píldora con un
   campo dentro. La envoltura ES el control; el input va desnudo. ---- */
body.pt-app .pt-buscador{
    display: flex;
    align-items: center;
    gap: .7rem;
    min-height: 3.6rem;
    height: 3.6rem;
    padding: 0 1.2rem;
    border: 1px solid var(--pt-borde);
    border-radius: 1.4rem;
    background: var(--pt-superficie);
    box-shadow: none;
}
body.pt-app .pt-buscador > span[data-icono]{
    position: static;
    display: inline-flex;
    color: var(--pt-gris);
    flex: 0 0 auto;
}
body.pt-app .pt-buscador input{
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    padding: 0;
    border: none;
    background: none;
    border-radius: 0;
    font-size: 1.248rem;
    color: var(--pt-tinta);
}
body.pt-app .pt-buscador input:focus{ outline: none; box-shadow: none; }
body.pt-app .pt-buscador:focus-within{ border-color: var(--pt-marca-cian); }

/* El menú «⋯» se abre hacia arriba si no cabe debajo */
.pt-menu__lista--arriba{
    top: auto;
    bottom: calc(100% + .3rem);
}


/* ============================================================
   11) SUBCARPETAS dentro de una carpeta
   ------------------------------------------------------------
   Un solo nivel. La carpeta sigue siendo el trámite; la
   subcarpeta solo agrupa sus documentos («Audiencias»,
   «Notificaciones»…). Se navegan como fichas, no como árbol:
   con pocas subcarpetas un árbol estorba más de lo que ayuda.
   ============================================================ */
.pt-subcarpetas{
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    margin-bottom: 1.2rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--pt-borde);
}
.pt-subcarpeta{
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-height: 3.2rem;
    padding: .4rem 1.1rem;
    border: 1px solid var(--pt-borde);
    border-radius: 999px;
    background: var(--pt-superficie);
    color: var(--pt-gris);
    font: inherit;
    font-size: .78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--pt-rapido);
}
.pt-subcarpeta:hover{ border-color: var(--pt-azul); color: var(--pt-tinta); }
.pt-subcarpeta.activa{
    background: var(--pt-navy-700);
    border-color: var(--pt-navy-700);
    color: var(--pt-blanco);
    font-weight: 600;
}
.pt-subcarpeta svg{ width: 15px; height: 15px; flex: 0 0 auto; }
.pt-subcarpeta__num{
    font-size: .68rem;
    font-weight: 600;
    padding: .05rem .45rem;
    border-radius: 999px;
    background: var(--pt-superficie-2);
    color: var(--pt-gris);
}
.pt-subcarpeta.activa .pt-subcarpeta__num{
    background: rgba(255,255,255,.18);
    color: var(--pt-blanco);
}
/* Botón para crear: se distingue por el borde discontinuo */
.pt-subcarpeta--nueva{
    border-style: dashed;
    border-color: var(--pt-marca-cian);
    color: var(--pt-marca-cian);
    background: transparent;
}
.pt-subcarpeta--nueva:hover{
    background: var(--pt-superficie-2);
    color: var(--pt-marca-cian);
}

/* Acciones de la subcarpeta abierta (renombrar / eliminar) */
.pt-subcarpeta-barra{
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
}

/* Selector de destino al mover un documento */
.pt-mover{
    min-height: 2.8rem;
    padding: .3rem .7rem;
    font-size: .75rem;
    border: 1px solid var(--pt-borde);
    border-radius: 1.2rem;
    background: var(--pt-superficie);
    color: var(--pt-tinta);
    font-family: inherit;
    cursor: pointer;
}

@media (max-width: 620px){
    .pt-subcarpeta-barra{ margin-left: 0; width: 100%; }
}


/* ============================================================
   12) ESQUELETO DE CARGA
   ------------------------------------------------------------
   Solo aparece la primera vez que se entra a una sección, cuando
   todavía no hay copia guardada de los datos. En las siguientes
   navegaciones se pinta directamente con la caché.

   Da la forma de lo que viene en vez de dejar el hueco vacío, que
   es lo que hacía parecer que el portal se había colgado.
   ============================================================ */
.pt-esqueleto{
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: 0.8rem 0;
}
.pt-esqueleto__fila{
    height: 6.4rem;
    border-radius: 16px;
    background: var(--pt-superficie-2);
    animation: pt-latido 1.4s ease-in-out infinite;
}
/* El desfase evita que las filas parpadeen todas a la vez */
.pt-esqueleto__fila:nth-child(2){ animation-delay: .12s; }
.pt-esqueleto__fila:nth-child(3){ animation-delay: .24s; }
.pt-esqueleto__fila:nth-child(4){ animation-delay: .36s; }
.pt-esqueleto__fila:nth-child(5){ animation-delay: .48s; }

@keyframes pt-latido{
    0%, 100%{ opacity: 1; }
    50%{ opacity: .55; }
}


/* ============================================================
   13) NOTARÍAS
   ------------------------------------------------------------
   El portal atiende varias oficinas. Quien trabaja en dos o más
   elige al entrar; quien trabaja en una sola no ve nada de esto.
   ============================================================ */

/* ---- La notaría abierta, en la barra lateral ---- */
.pt-notaria{ padding: 0 0.64rem; margin-top: -1.12rem; }
.pt-notaria__boton,
.pt-notaria__fijo{
    display: flex;
    flex-direction: column;
    gap: 0.16rem;
    width: 100%;
    padding: 0.8rem 1.04rem;
    border: 1px solid var(--pt-borde);
    border-radius: 14px;
    background: var(--pt-superficie-2);
    font: inherit;
    text-align: left;
}
.pt-notaria__boton{
    cursor: pointer;
    transition: border-color var(--pt-rapido), background var(--pt-rapido);
}
/* Quien solo tiene una oficina ve la caja, pero no es un boton: sin
   cursor de mano, sin hover y sin flecha. Que no parezca que se puede
   pulsar algo que no lleva a ningun lado. */
.pt-notaria__fijo{
    cursor: default;
    border-style: dashed;
    opacity: .88;
}
.pt-notaria__boton:hover{
    border-color: var(--pt-marca-cian);
    background: var(--pt-superficie);
}
/* La flecha solo aparece donde hay a dónde cambiar */
.pt-notaria__boton::after{
    content: '⌄';
    position: absolute;
    right: 1.6rem;
    color: var(--pt-gris);
    font-size: 1.28rem;
    line-height: 1;
}
.pt-notaria__boton{ position: relative; }
.pt-notaria__ciudad{
    font-family: var(--pt-fuente-titulos);
    font-size: 1.28rem;
    font-weight: 600;
    color: var(--pt-tinta);
    padding-right: 1.6rem;
}
.pt-notaria__nombre{
    font-size: 1.024rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--pt-gris);
}

/* ---- Casillas de notaría en el formulario de usuario ---- */
.pt-notarias-casillas{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: 0.64rem;
    margin-top: 0.48rem;
}
.pt-notaria-casilla{
    display: flex;
    align-items: center;
    gap: 0.72rem;
    padding: 0.8rem 1.04rem;
    border: 1px solid var(--pt-borde);
    border-radius: 12px;
    background: var(--pt-superficie);
    font-size: 1.216rem;
    cursor: pointer;
}
.pt-notaria-casilla:hover{ border-color: var(--pt-marca-cian); }
.pt-notaria-casilla input{ flex: 0 0 auto; margin: 0; }
.pt-notaria-casilla b{ font-weight: 600; color: var(--pt-tinta); }


/* ---- Pantalla de selección de oficina ----
   Panel partido, como el ingreso: la marca a la izquierda y la decisión
   a la derecha. A diferencia del ingreso, el panel derecho sigue el tema
   claro u oscuro, porque a esta pantalla se entra a diario. */
.pt-elegir{
    position: fixed;
    inset: 0;
    z-index: var(--pt-z-modal);
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    background: var(--pt-fondo);
    overflow-y: auto;
}
.pt-elegir[hidden]{ display: none; }

/* Panel de marca: siempre oscuro, es el chrome de la casa */
.pt-elegir__marca{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 3.2rem;
    padding: 4.16rem 4.48rem;
    background: var(--pt-navy-900);
    color: var(--pt-blanco);
}
.pt-elegir__logo{
    display: flex;
    align-items: center;
    gap: 1.12rem;
    font-family: var(--pt-fuente-titulos);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--pt-blanco);
}
.pt-elegir__logo i{
    width: 26px; height: 26px;
    border-radius: 12px;
    background: var(--pt-marca-cian);
    flex: 0 0 auto;
}
.pt-elegir__centro h1{
    font-family: var(--pt-fuente-titulos);
    font-size: clamp(2.4rem, 3vw, 3.36rem);
    line-height: 1.15;
    font-weight: 600;
    color: var(--pt-blanco);
    margin-bottom: 1.44rem;
    max-width: 16ch;
}
.pt-elegir__centro > p{
    font-size: 1.312rem;
    line-height: 1.65;
    color: var(--pt-azul-claro);
    max-width: 44ch;
    margin-bottom: 2.72rem;
}
.pt-elegir__sesion{
    padding: 1.44rem 1.6rem;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 18px;
    background: rgba(255,255,255,.04);
    max-width: 34rem;
}
.pt-elegir__sesion-eti{
    display: block;
    font-size: 0.96rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255,255,255,.5);
    margin-bottom: 0.8rem;
}
.pt-elegir__sesion-yo{ display: flex; align-items: center; gap: 0.96rem; }
.pt-elegir__sesion-yo b{
    display: block;
    font-size: 1.28rem;
    font-weight: 600;
    color: var(--pt-blanco);
}
.pt-elegir__sesion-yo small{
    display: block;
    font-size: 0.96rem;
    letter-spacing: .06em;
    color: var(--pt-azul-claro);
}
.pt-elegir__estado{
    display: flex;
    align-items: center;
    gap: 0.72rem;
    font-size: 1.152rem;
    color: var(--pt-azul-claro);
}
.pt-elegir__estado i{
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #35C46B;
    flex: 0 0 auto;
}

/* Panel de decisión: sigue el tema del usuario */
.pt-elegir__panel{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2.72rem;
    padding: 4.16rem clamp(2.4rem, 3.5vw, 4.16rem);
    background: var(--pt-fondo);
}
.pt-elegir__tema{ position: absolute; top: 2.24rem; right: 2.24rem; }
.pt-elegir__eti{
    display: block;
    font-size: 1.008rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pt-gris);
    margin-bottom: 1.12rem;
}
.pt-elegir__lista{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
    gap: 1.12rem;
}

/* Una oficina. Las cifras van dentro para poder decidir sin entrar. */
.pt-oficina{
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
    padding: 1.44rem 1.6rem;
    border: 1px solid var(--pt-borde);
    border-radius: 18px;
    background: var(--pt-superficie);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--pt-rapido), box-shadow var(--pt-rapido);
}
.pt-oficina:hover{ border-color: var(--pt-marca-cian); }
.pt-oficina.activa{
    border-color: var(--pt-marca-cian);
    box-shadow: inset 0 0 0 1px var(--pt-marca-cian);
}
.pt-oficina__cab{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}
.pt-oficina__ciudad{
    font-family: var(--pt-fuente-titulos);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--pt-tinta);
}
/* El tic solo se dibuja en la oficina marcada */
.pt-oficina__tic{
    position: relative;
    width: 20px; height: 20px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--pt-marca-cian);
    opacity: 0;
    transition: opacity var(--pt-rapido);
}
.pt-oficina.activa .pt-oficina__tic{ opacity: 1; }
.pt-oficina__tic::after{
    content: "";
    position: absolute;
    left: 7px; top: 4px;
    width: 4px; height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.pt-oficina__nombre{ font-size: 1.216rem; color: var(--pt-gris); }
.pt-oficina__cifras{
    display: flex;
    gap: 2.24rem;
    margin-top: 1.12rem;
    padding-top: 1.04rem;
    border-top: 1px solid var(--pt-borde);
}
.pt-oficina__cifra b{
    display: block;
    font-family: var(--pt-fuente-titulos);
    font-size: 1.92rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--pt-tinta);
}
.pt-oficina__cifra small{
    display: block;
    font-size: 0.928rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--pt-gris);
    margin-top: 0.16rem;
}
/* Lo que aprieta va en ámbar y lo vencido en rojo, como en el resto
   del portal. Solo cuando hay algo: un cero no se pinta de color. */
.pt-oficina__cifra--alerta b{ color: var(--pt-ambar-txt); }
.pt-oficina__cifra--rojo b{ color: var(--pt-rojo-txt); }

/* «Todas las notarías» es un panorama, no una oficina: borde
   discontinuo para que no se confunda con una más */
.pt-oficina--todas{ border-style: dashed; }

/* Lo que ocupa la oficina en el servidor (solo administrador) */
.pt-oficina__espacio{
    display: flex;
    flex-direction: column;
    gap: 0.56rem;
    margin-top: 1.12rem;
    font-size: 1.12rem;
    color: var(--pt-gris);
}
.pt-oficina__espacio b{ color: var(--pt-tinta); font-weight: 600; }
.pt-oficina__barra{
    display: block;
    height: .6rem;
    border-radius: 999px;
    background: var(--pt-borde);
    overflow: hidden;
}
.pt-oficina__barra i{
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--pt-marca-cian);
    transition: width var(--pt-normal);
}

/* ---- Espacio en el servidor ---- */
.pt-elegir__espacio[hidden]{ display: none; }
.pt-elegir__edad{ font-size: 1.008rem; color: var(--pt-gris); white-space: nowrap; }
.pt-elegir__disco{
    margin-top: 1.12rem;
    padding: 1.44rem 1.6rem;
    border: 1px solid var(--pt-borde);
    border-radius: 18px;
    background: var(--pt-superficie);
}
.pt-elegir__disco .pt-disco__barra{ margin-bottom: 1.12rem; }
.pt-elegir__disco-datos{
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem 2.4rem;
    font-size: 1.152rem;
    color: var(--pt-gris);
}
.pt-elegir__disco-datos span{ display: inline-flex; align-items: center; gap: 0.56rem; }
.pt-elegir__disco-datos b{ color: var(--pt-tinta); font-weight: 600; }
.pt-elegir__punto{
    width: 8px; height: 8px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--pt-borde);
}
.pt-elegir__punto--docs{ background: var(--pt-marca-cian); }
.pt-elegir__punto--otros{ background: color-mix(in srgb, var(--pt-gris) 45%, transparent); }
.pt-disco--aviso  .pt-elegir__punto--docs{ background: var(--pt-ambar-txt); }
.pt-disco--alerta .pt-elegir__punto--docs{ background: var(--pt-rojo-txt); }
.pt-elegir__disco-nota{
    margin: 1.12rem 0 0;
    padding: 1.2rem 1.44rem;
    border: 1px dashed var(--pt-borde);
    border-radius: 14px;
    font-size: 1.152rem;
    color: var(--pt-gris);
}
.pt-elegir__disco-nota b{ color: var(--pt-tinta); }
.pt-oficina__cifras--texto{
    display: block;
    font-size: 1.152rem;
    line-height: 1.55;
    color: var(--pt-gris);
}
.pt-elegir__entrar{ width: 100%; margin-top: 1.44rem; }

/* ---- Administrar oficinas ---- */
.pt-elegir__admin[hidden]{ display: none; }
.pt-elegir__admin-cab{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.28rem;
}
.pt-elegir__admin-cab .pt-elegir__eti{ margin-bottom: 0; }
.pt-elegir__admin-lista{
    display: flex;
    flex-direction: column;
    margin-top: 1.12rem;
    border: 1px solid var(--pt-borde);
    border-radius: 18px;
    background: var(--pt-superficie);
    overflow: hidden;
}
.pt-elegir__admin-fila{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.12rem;
    flex-wrap: wrap;
    padding: 1.04rem 1.44rem;
    border-top: 1px solid var(--pt-borde);
    font-size: 1.216rem;
    color: var(--pt-gris);
}
.pt-elegir__admin-fila:first-child{ border-top: none; }
.pt-elegir__admin-fila.apagada{ opacity: .6; }
.pt-elegir__admin-txt b{ color: var(--pt-tinta); font-weight: 600; }
.pt-elegir__admin-txt em{
    font-style: normal;
    font-size: 1.024rem;
    color: var(--pt-ambar-txt);
}
/* Con las cifras de espacio la fila tiene tres partes. En rejilla, el
   nombre es el que se parte en dos renglones si no cabe; en flex eran
   los botones los que se caían a la línea de abajo. */
.pt-elegir__admin-fila{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    column-gap: 1.6rem;
}
.pt-elegir__admin-acc{ grid-column: 3; }

/* Lo que ocupa cada oficina, entre el nombre y los botones */
.pt-elegir__admin-uso{
    display: flex;
    align-items: center;
    gap: 0.64rem 1.6rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    font-size: 1.088rem;
}
.pt-elegir__admin-peso{ display: inline-flex; align-items: center; gap: 0.8rem; }
.pt-elegir__admin-peso b{ color: var(--pt-tinta); font-weight: 600; font-variant-numeric: tabular-nums; }
.pt-elegir__admin-peso .pt-reparto{ width: 7rem; }
.pt-elegir__admin-acc{ display: flex; gap: 0.48rem; }
.pt-elegir__admin-acc button{
    padding: 0.4rem 0.96rem;
    border: 1px solid var(--pt-borde);
    border-radius: 999px;
    background: var(--pt-superficie);
    font: inherit;
    font-size: 1.088rem;
    color: var(--pt-gris);
    cursor: pointer;
    transition: border-color var(--pt-rapido), color var(--pt-rapido);
}
.pt-elegir__admin-acc button:hover{
    border-color: var(--pt-marca-cian);
    color: var(--pt-tinta);
}
.pt-elegir__admin-vacio{
    padding: 1.44rem;
    font-size: 1.216rem;
    color: var(--pt-gris);
}

/* Portal sin ninguna oficina: ocupa el sitio de las tarjetas para que
   el bloque no se desplome y diga a dónde ir. La lista es una rejilla
   de columnas; sin grid-column el aviso se metería en una sola y
   quedaría como una tarjeta más, que es justo lo que no es. */
.pt-elegir__vacio{
    grid-column: 1 / -1;
    margin: 0;
    padding: 2.4rem 1.6rem;
    border: 1px dashed var(--pt-borde);
    border-radius: 12px;
    text-align: center;
    font-size: 1.36rem;
    line-height: 1.55;
    color: var(--pt-gris);
}

.pt-elegir__pie{ display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: auto; }

/* En pantallas angostas el panel de marca se vuelve cabecera corta */
@media (max-width: 940px){
    .pt-elegir{ grid-template-columns: 1fr; }
    .pt-elegir__marca{ padding: 2.72rem 2.24rem 2.24rem; gap: 1.6rem; }
    .pt-elegir__centro h1{ font-size: 2.08rem; max-width: none; }
    .pt-elegir__centro > p{ display: none; }
    .pt-elegir__sesion{ max-width: none; }
    .pt-elegir__estado{ display: none; }
    .pt-elegir__panel{ padding: 2.72rem 2.24rem 3.52rem; }
    .pt-elegir__lista{ grid-template-columns: 1fr; }
    .pt-elegir__admin-fila{ grid-template-columns: 1fr; row-gap: 0.8rem; }
    .pt-elegir__admin-uso{ justify-content: flex-start; }
    .pt-elegir__admin-acc{ grid-column: auto; }
}

/* ---- Casillas de notaría en los formularios de usuario ----
   Estaban rotas: el cuadro se estiraba a todo el alto de la tarjeta y
   el texto se salía por el lado. La casilla lleva tamaño fijo y el
   texto ocupa el resto, con min-width 0 para que pueda partirse. */
.pt-notarias-casillas{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
    gap: 0.64rem;
    margin-top: 0.64rem;
}
.pt-notaria-casilla{
    display: flex;
    align-items: center;
    gap: 0.88rem;
    min-width: 0;
    padding: 0.96rem 1.12rem;
    border: 1px solid var(--pt-borde);
    border-radius: 14px;
    background: var(--pt-superficie);
    font-size: 1.216rem;
    line-height: 1.4;
    cursor: pointer;
    transition: border-color var(--pt-rapido), background var(--pt-rapido);
}
.pt-notaria-casilla:hover{ border-color: var(--pt-marca-cian); }
/* Las casillas viven dentro de un .pt-campo, y esa regla les impone
   min-height 36px y padding de campo de texto. Por eso el cuadro salía
   estirado. Se gana en especificidad para devolverle su tamaño real. */
body.pt-app .pt-campo .pt-notaria-casilla input,
.pt-notaria-casilla input{
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    min-width: 18px;
    margin: 0;
    min-height: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    accent-color: var(--pt-marca-cian);
    cursor: pointer;
}
.pt-notaria-casilla span{ min-width: 0; }
.pt-notaria-casilla b{ font-weight: 600; color: var(--pt-tinta); }
/* La marcada se distingue sin depender solo del cuadro */
.pt-notaria-casilla:has(input:checked){
    border-color: var(--pt-marca-cian);
    background: var(--pt-superficie-2);
}

/* ============================================================
   14) CARPETAS EN TARJETAS
   ------------------------------------------------------------
   Vuelven a ser tarjetas en rejilla en vez de filas anchas: caben
   más en pantalla y cada carpeta se lee entera sin recorrer
   columnas. La tarjeta completa abre el expediente.
   ============================================================ */
.pt-rejilla-carpetas{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
    gap: 1.28rem;
}
.pt-tarjeta-carpeta{
    display: flex;
    flex-direction: column;
    gap: 0.72rem;
    padding: 1.52rem 1.6rem 1.28rem;
    border: 1px solid var(--pt-borde);
    border-radius: 20px;
    background: var(--pt-superficie);
    cursor: pointer;
    transition: border-color var(--pt-rapido), box-shadow var(--pt-rapido);
}
.pt-tarjeta-carpeta:hover{ border-color: var(--pt-azul); }
.pt-tarjeta-carpeta:focus-visible{
    outline: 2px solid var(--pt-marca-cian);
    outline-offset: 2px;
}
.pt-tarjeta-carpeta--inactiva{ opacity: .62; }

.pt-tarjeta-carpeta__cab{
    display: flex;
    align-items: center;
    gap: 0.64rem;
}
.pt-tarjeta-carpeta__ic{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    flex: 0 0 auto;
    border-radius: 12px;
    background: var(--pt-superficie-2);
    color: var(--pt-gris);
}
/* El menú se va al extremo y no propaga el clic a la tarjeta */
.pt-tarjeta-carpeta__cab .pt-menu{ margin-left: auto; }
.pt-tarjeta-carpeta__cab .pt-insignia{ margin-left: auto; }
.pt-tarjeta-carpeta__cab .pt-insignia + .pt-menu{ margin-left: 0; }

.pt-tarjeta-carpeta__nombre{
    font-family: var(--pt-fuente-titulos);
    font-size: 1.44rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--pt-tinta);
    margin: 0;
}
.pt-tarjeta-carpeta__tipo{
    align-self: flex-start;
    padding: 0.16rem 0.72rem;
    border-radius: 999px;
    background: var(--pt-superficie-2);
    font-size: 1.024rem;
    color: var(--pt-gris);
}
.pt-tarjeta-carpeta__proceso{ font-size: 1.184rem; color: var(--pt-gris); }

/* ---- El plazo: la fecha, no el conteo ---- */
.pt-tarjeta-carpeta__plazo{
    font-size: 1.184rem;
    color: var(--pt-gris);
    padding-top: 0.64rem;
    border-top: 1px solid var(--pt-borde);
}
.pt-tarjeta-carpeta__plazo strong{ color: var(--pt-tinta); font-weight: 600; }
.pt-tarjeta-carpeta__plazo--sin{ color: var(--pt-gris); font-style: italic; }
.pt-tarjeta-carpeta__prorroga{
    font-size: 1.024rem;
    padding: 0.08rem 0.56rem;
    border-radius: 999px;
    background: var(--pt-ambar-suave);
    color: var(--pt-ambar-txt);
}

/* ---- Quiénes están en el expediente ---- */
.pt-gente{
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding-top: 0.64rem;
    border-top: 1px solid var(--pt-borde);
}
.pt-gente__grupo{ display: flex; align-items: baseline; gap: 0.64rem; min-width: 0; }
.pt-gente__eti{
    flex: 0 0 auto;
    font-size: 0.928rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--pt-gris);
}
.pt-gente__nombres{
    display: flex;
    flex-wrap: wrap;
    gap: 0.32rem;
    min-width: 0;
}
.pt-gente__chip{
    padding: 0.16rem 0.64rem;
    border-radius: 999px;
    background: var(--pt-superficie-2);
    font-size: 1.088rem;
    color: var(--pt-tinta);
    max-width: 18rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pt-tarjeta-carpeta__pie{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-top: auto;
    padding-top: 0.96rem;
    border-top: 1px solid var(--pt-borde);
}
.pt-tarjeta-carpeta__docs{ font-size: 1.152rem; color: var(--pt-gris); }
.pt-tarjeta-carpeta__docs b{ color: var(--pt-tinta); font-weight: 600; }

@media (max-width: 640px){
    .pt-rejilla-carpetas{ grid-template-columns: 1fr; }
}

/* ---- El plazo de los 60 días, en la tarjeta del tablero ----
   Sustituye al anillo con "8/60": la fecha es lo que se necesita.

   Ocupa una fila entera bajo el nombre. Estuvo al lado del nombre y no
   cabía: la fecha empujaba el título hasta dejarlo en una palabra por
   línea y se salía de la columna. Rejilla de dos huecos (etiqueta y
   fecha) con el resto debajo a lo ancho; el color va en la barra
   izquierda para leerse de un vistazo sin teñir el bloque entero. */
.pt-plazo{
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    column-gap: 0.56rem;
    row-gap: 0.16rem;
    padding: 0.64rem 0.88rem;
    border-radius: 12px;
    border-left: 3px solid var(--pt-gris);
    background: var(--pt-superficie-2);
}
.pt-plazo__eti{
    font-size: 0.928rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--pt-gris);
    white-space: nowrap;
}
.pt-plazo__fecha{
    font-family: var(--pt-fuente-titulos);
    font-size: 1.28rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--pt-tinta);
    overflow-wrap: break-word;
}
/* El resto ("52 días hábiles · prórroga") baja a su propia línea */
.pt-plazo__resto{
    grid-column: 1 / -1;
    font-size: 1.024rem;
    line-height: 1.4;
    color: var(--pt-gris);
}
.pt-plazo--rojo{ border-left-color: var(--pt-rojo-txt); }
.pt-plazo--rojo .pt-plazo__fecha{ color: var(--pt-rojo-txt); }
.pt-plazo--naranja{ border-left-color: var(--pt-ambar-txt); }
.pt-plazo--naranja .pt-plazo__fecha{ color: var(--pt-ambar-txt); }
.pt-plazo--verde{ border-left-color: var(--pt-verde-txt); }
.pt-plazo--verde .pt-plazo__fecha{ color: var(--pt-verde-txt); }
.pt-plazo--sin .pt-plazo__fecha,
.pt-plazo--gris .pt-plazo__fecha{ color: var(--pt-gris); font-size: 1.152rem; }

/* ---- Quiénes están en el expediente, en el detalle de la carpeta ---- */
.pt-detalle-gente{
    margin-top: 1.12rem;
    padding-top: 1.12rem;
    border-top: 1px dashed var(--pt-borde);
}
.pt-detalle-gente[hidden]{ display: none; }
.pt-detalle-gente .pt-gente{ border-top: none; padding-top: 0; gap: 0.64rem; }
.pt-detalle-gente .pt-gente__chip{ max-width: none; }
.pt-detalle-gente .pt-gente__chip em{
    font-style: normal;
    font-size: 0.96rem;
    color: var(--pt-gris);
    margin-left: 0.32rem;
}

/* ============================================================
   PROGRESO DE SUBIDA
   ------------------------------------------------------------
   Entre elegir veinte archivos y el aviso de «subidos» no pasaba
   nada en pantalla: parecía que el portal se había quedado
   quieto. Esta barra aparece al elegir, antes de que empiece a
   subir nada, y va contando.

   Mide archivos terminados, no bytes: la subida usa una sola
   petición por archivo y el navegador no informa del avance
   dentro de cada una. Por eso además se nombra el archivo en
   curso, que es lo que dice que algo se está moviendo cuando uno
   es grande y tarda.
   ============================================================ */
.pt-progreso{
    background: var(--pt-superficie);
    border: 1px solid var(--pt-borde);
    border-radius: 1rem;
    padding: 1.2rem 1.4rem;
    margin-bottom: 1.44rem;
    box-shadow: var(--pt-sombra-1);
}
.pt-progreso[hidden]{ display: none; }

.pt-progreso__cab{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.2rem;
    margin-bottom: .7rem;
}
.pt-progreso__eti{ font-size: 1.3rem; font-weight: 600; }
.pt-progreso__num{
    font-size: 1.2rem;
    color: var(--pt-gris);
    /* Cifras de ancho fijo: sin esto el contador brinca al pasar
       de 9 a 10 y la barra parece temblar */
    font-variant-numeric: tabular-nums;
}

.pt-progreso__pista{
    height: .8rem;
    border-radius: 999px;
    background: var(--pt-borde);
    overflow: hidden;
}
.pt-progreso__pista i{
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--pt-marca-cian);
    transition: width .25s ease;
}
.pt-progreso--listo .pt-progreso__pista i{ background: var(--pt-verde-txt); }
.pt-progreso--fallo .pt-progreso__pista i{ background: var(--pt-rojo-txt); }

.pt-progreso__archivo{
    display: block;
    margin-top: .6rem;
    font-size: 1.168rem;
    color: var(--pt-gris);
    /* Un nombre largo no debe ensanchar el panel ni partirse en
       tres renglones */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pt-progreso__archivo:empty{ display: none; }

@media (prefers-reduced-motion: reduce){
    .pt-progreso__pista i{ transition: none; }
}

/* ============================================================
   TABLA DE DOCUMENTOS CON MUCHAS FILAS
   ------------------------------------------------------------
   Con nombres largos y expedientes de mil documentos la tabla se
   rompía: el nombre empujaba a las demás columnas, «Andres Felipe
   Madrid Villar» se partía en cuatro renglones, la fecha en otros
   cuatro, y cada fila quedaba tres veces más alta de lo necesario.
   Encima aparecía barra horizontal y «Descargar» se salía.

   El reparto: el nombre se queda con lo que sobre y se corta con
   puntos suspensivos; las demás ocupan lo justo y no se parten.
   El nombre completo y el del autor quedan en el `title`.
   ============================================================ */
.pt-tabla .pt-col-archivo{
    /* Se queda con el espacio sobrante */
    width: 100%;
    max-width: 0;               /* deja que el ellipsis funcione en tabla */
    white-space: nowrap;
}
.pt-nombre-archivo{
    display: inline-block;
    max-width: calc(100% - 3rem);   /* descontando el icono */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.pt-tabla .pt-col-tamano{
    white-space: nowrap;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.pt-tabla .pt-col-fecha{
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--pt-gris);
}
.pt-tabla .pt-col-autor{
    max-width: 18rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pt-tabla .pt-col-acciones{ white-space: nowrap; width: 1%; }

/* Filas más bajas: con mil documentos, cada pixel de alto son mil
   pixeles de recorrido */
.pt-tabla td{ padding-top: .9rem; padding-bottom: .9rem; }

@media (max-width: 900px){
    /* En pantalla estrecha el autor sobra antes que el nombre */
    .pt-tabla .pt-col-autor{ max-width: 10rem; }
}

/* ============================================================
   CONSEJO DE LOS VIDEOS
   ------------------------------------------------------------
   Antes vivía dentro del panel de progreso y se iba con la barra
   al terminar la subida, justo cuando el consejo todavía vale
   para la próxima tanda. Ahora es una caja propia con su botón
   de cerrar: se queda hasta que la quiten.
   ============================================================ */
.pt-consejo{
    position: relative;
    margin-bottom: 1.44rem;
    padding: 1.1rem 4rem 1.1rem 1.4rem;
    border-radius: .9rem;
    background: color-mix(in srgb, var(--pt-ambar-txt) 12%, var(--pt-superficie));
    border: 1px solid color-mix(in srgb, var(--pt-ambar-txt) 35%, transparent);
    color: var(--pt-tinta);
    font-size: 1.25rem;
    line-height: 1.5;
}
.pt-consejo[hidden]{ display: none; }
.pt-consejo p{ margin: 0; }
.pt-consejo__cerrar{
    position: absolute;
    top: .6rem;
    right: .8rem;
    border: none;
    background: none;
    font-size: 2.2rem;
    line-height: 1;
    color: var(--pt-gris);
    cursor: pointer;
    padding: .2rem .6rem;
    border-radius: .5rem;
}
.pt-consejo__cerrar:hover{
    color: var(--pt-tinta);
    background: color-mix(in srgb, var(--pt-ambar-txt) 18%, transparent);
}

/* El nombre del archivo en curso y el botón de parar, en la misma
   fila. El botón iba flotando sobre la esquina y se montaba encima del
   contador «19 de 21». */
.pt-progreso__pie{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    margin-top: .6rem;
}
.pt-progreso__pie .pt-progreso__archivo{ margin-top: 0; }
#subida-cancelar[hidden]{ display: none; }

/* ============================================================
   SECCIÓN: ALMACENAMIENTO (solo administrador)
   ------------------------------------------------------------
   Antes esto era una cajita en el lateral que además mentía:
   cuando no podía leer la medición caía a un tope escrito a mano
   y pintaba 1 GB donde había 231. Ahora es una sección propia,
   con la misma tarjeta, panorama y tabla que el resto del
   portal, y los tres estados —hay dato, no hay dato, no se pudo
   leer— se ven distintos.
   ============================================================ */
.pt-disco{
    background: var(--pt-superficie);
    border: 1px solid var(--pt-borde);
    border-radius: 1.4rem;
    padding: 1.8rem 2rem;
    margin-bottom: 1.8rem;
    box-shadow: var(--pt-sombra-1);
}
.pt-disco__cab{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.2rem;
    margin-bottom: 1.1rem;
}
.pt-disco__tit{
    font-size: 1.15rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06rem;
    color: var(--pt-gris);
}
/* Si esto se queda en «hace 2 h», la tarea del servidor dejó de
   correr y el número de arriba ya no es de fiar */
.pt-disco__edad{ font-size: 1.15rem; color: var(--pt-gris); white-space: nowrap; }

/* Dos tramos en la misma barra: documentos y todo lo demás. Saber
   cuál de los dos crece dice si hay que borrar expedientes o
   mirar el servidor. */
.pt-disco__barra{
    display: flex;
    height: 1.2rem;
    border-radius: 999px;
    background: var(--pt-borde);
    overflow: hidden;
    margin-bottom: 1.4rem;
}
.pt-disco__barra i{ display: block; height: 100%; transition: width .3s ease; }
.pt-disco__docs { background: var(--pt-marca-cian); }
.pt-disco__otros{ background: color-mix(in srgb, var(--pt-gris) 45%, transparent); }
.pt-disco--aviso  .pt-disco__docs{ background: var(--pt-ambar-txt); }
.pt-disco--alerta .pt-disco__docs{ background: var(--pt-rojo-txt); }

.pt-disco__datos{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1.4rem;
}
.pt-disco__dato{ display: flex; flex-direction: column; gap: .2rem; }
.pt-disco__dato span{
    font-size: 1.15rem; color: var(--pt-gris);
    text-transform: uppercase; letter-spacing: .05rem;
}
.pt-disco__dato b{ font-size: 2rem; font-variant-numeric: tabular-nums; }
.pt-disco__dato small{ font-size: 1.15rem; color: var(--pt-gris); }

.pt-disco--sin-dato .pt-disco__aviso{
    margin: 0 0 .5rem; font-size: 1.5rem; font-weight: 600;
}
.pt-disco--sin-dato code{
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    background: var(--pt-superficie-2);
    padding: .1rem .4rem; border-radius: .4rem;
}

.pt-almacen-sub{
    font-size: 1.6rem;
    margin: 2.2rem 0 1rem;
}

/* El reparto por expediente. La barra se mide contra el expediente
   MÁS grande, no contra el total: con veinte carpetas parejas,
   medir contra el total las deja a todas como una rayita y no se
   compara nada. El porcentaje de al lado sí es sobre el total. */
.pt-reparto{
    display: inline-block;
    vertical-align: middle;
    width: 12rem;
    height: .7rem;
    border-radius: 999px;
    background: var(--pt-borde);
    overflow: hidden;
}
.pt-reparto i{
    display: block; height: 100%;
    background: var(--pt-marca-cian);
    border-radius: 999px;
}
.pt-reparto__pct{
    margin-left: .8rem;
    font-size: 1.2rem;
    color: var(--pt-gris);
    font-variant-numeric: tabular-nums;
}
.pt-tabla .pt-col-reparto{ white-space: nowrap; width: 1%; }

@media (max-width: 900px){
    .pt-reparto{ width: 6rem; }
}
@media (prefers-reduced-motion: reduce){
    .pt-disco__barra i{ transition: none; }
}

/* Los dos botones de la campana, uno al lado del otro */
.pt-campana-dropdown__acciones{ display: flex; gap: .5rem; }