/*
    ══════════════════════════════════════════════════════════════════════════
    ACTIVOS FIJOS — lo que sólo es de este módulo
    ══════════════════════════════════════════════════════════════════════════

    El formato —cabecera, filtros, franja de indicadores, tarjeta de alto de
    ventana, ficha emergente, esqueleto, vacío— vive en pantalla.css con el
    prefijo .pan-. Aquí va únicamente lo que no se puede escribir sin saber que
    se está hablando de activos fijos: el reparto de las columnas de filtros, el
    semáforo de condición, la barra de vida útil, la galería con foto, el
    informe ejecutivo y —lo único de todo el sistema que se imprime en papel
    membretado— la Nota de Responsabilidad F-O-CSG-03.

    Se carga DESPUÉS de pantalla.css en index.html, que es lo que permite que
    las pistas de aquí ganen a las de allá sin recurrir a !important.

    Regla de oro del módulo: si una regla lleva el nombre de un dato del
    negocio —«vida útil», «condición», «nota de responsabilidad»— va aquí. Si
    describe una cabecera, un indicador o una celda, va en pantalla.css y la
    usan todas.
*/

/* ═══════════════════ Rejilla de filtros ═══════════════════ */

/*
    Ocho pistas, una por control.

    «Hueco» es la ancha de las cortas porque sus opciones son frases —«sin
    custodio asignado», «sin verificar desde hace más de un año»— y no palabras
    sueltas: recortarla obligaría a abrir el desplegable para leer lo elegido.
*/
.act-filtros {
    grid-template-columns:
        auto                /* Sección: ACTIVOS · NOTAS · TOMAS · INFORME */
        minmax(150px, 1fr)  /* Área */
        minmax(150px, 1fr)  /* Sitio */
        132px               /* Tipo */
        132px               /* Condición */
        168px               /* Hueco */
        minmax(170px, 1.2fr)/* Búsqueda */
        auto;               /* Acciones */
}

/*
    Marcadores sin efecto propio: el ancho lo pone la pista de la rejilla, por
    posición. Se conservan en el marcado porque dicen de un vistazo qué anchura
    le toca a cada control, y porque si algún día hay que reordenar las columnas
    son la única pista de cuál era cuál.
*/
.act-filtro-seccion,
.act-filtro-md,
.act-filtro-sm,
.act-filtro-hueco,
.act-filtro-busqueda { /* marcadores */ }

@media (max-width: 1500px) {
    .act-filtros {
        grid-template-columns: auto minmax(140px, 1fr) minmax(140px, 1fr) 124px 124px 156px 1fr auto;
    }
}

/*
    En la tableta y el teléfono las ocho pistas fijas sumaban 880 px: la página
    entera se ensanchaba y la ficha del activo se abría a ese ancho (septiembre de
    2026). Vuelve la rejilla que se acomoda de .pan-filtros (pantalla.css), con la
    sección, la búsqueda y las acciones a lo ancho.
*/
@media (max-width: 1100px) {
    .act-filtros { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
    .act-filtros > .act-filtro-seccion,
    .act-filtros > .act-filtro-busqueda,
    .act-filtros > .pan-filtro-acciones { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
    .act-filtros { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
    .act-filtro-seccion .rz-selectbutton { display: flex; width: 100%; }
    .act-filtro-seccion .rz-selectbutton .rz-button { flex: 1 1 0; min-width: 0; justify-content: center; padding-inline: 4px; }
}

/* ═══════════════════ Franja de indicadores ═══════════════════ */

.act-tira {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1100px) {
    .act-tira {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ═══════════════════ Semáforo de condición ═══════════════════ */

/*
    El color lo pone el CATÁLOGO, no el código: quien mantiene las condiciones
    decide que «Usado» es ámbar y no un desarrollador. Por eso la regla sólo
    sabe pintar con la variable que le llega desde el marcado, y trae un color
    de reserva por si una condición vieja se quedó sin él.
*/
.act-condicion {
    --act-color: var(--pan-apagado);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--act-color);
    white-space: nowrap;
}

.act-condicion::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--act-color);
    flex: none;
}

/*
    Un activo que no sirve se dice tachando el punto, no cambiando el color: el
    color ya está diciendo la condición, y dos significados en la misma señal es
    la forma más rápida de que no se lea ninguno.
*/
.act-condicion-inactiva::before {
    background: transparent;
    border: 2px solid var(--act-color);
}

/* ═══════════════════ Vida útil ═══════════════════ */

/*
    Cuánto de la vida útil se ha consumido. Se lee de un vistazo y sustituye a
    la columna de «depreciación acumulada», que es la misma información en una
    cifra que nadie compara con nada.
*/
.act-vida {
    display: block;
    width: 100%;
    height: 5px;
    border-radius: 3px;
    background: var(--pan-linea);
    overflow: hidden;
}

.act-vida-barra {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--pan-azul);
    transition: width .25s ease;
}

/* Consumió su vida útil y sigue en servicio. Ni error ni alarma: dato de gestión. */
.act-vida-agotada .act-vida-barra {
    background: var(--pan-ambar);
}

/* Sin fecha, sin valor o sin tasa: no hay nada que medir y la barra no miente diciendo cero. */
.act-vida-sin {
    background: repeating-linear-gradient(
        135deg,
        var(--pan-linea) 0 4px,
        transparent 4px 8px
    );
}

.act-vida-pie {
    display: block;
    margin-top: 3px;
    font-size: .68rem;
    color: var(--pan-tenue);
    white-space: nowrap;
}

/* ═══════════════════ Huecos ═══════════════════ */

/*
    Un dato que falta se escribe en gris y en cursiva, nunca en rojo: al
    arrancar faltan las cuatro columnas de valor en las 206 filas, y una
    pantalla entera en rojo deja de significar «atiende esto» para significar
    «así es esta pantalla».
*/
.act-falta {
    color: var(--pan-tenue);
    font-style: italic;
    font-size: .78rem;
}

/* ═══════════════════ Selección para la nota ═══════════════════ */

/*
    La barra que aparece al marcar activos. Va pegada abajo porque la selección
    se hace recorriendo la tabla, y un botón en la cabecera obligaría a subir
    para usar lo que se acaba de elegir.
*/
.act-seleccion {
    position: sticky;
    bottom: 12px;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 10px 0 0;
    padding: 10px 16px;
    border-radius: var(--pan-radio);
    background: var(--pan-tinta);
    color: #fff;
    box-shadow: var(--pan-sombra);
}

.act-seleccion-texto {
    flex: 1;
    font-size: .82rem;
}

.act-seleccion-texto b {
    font-weight: 700;
}

/*
    El conmutador lista/galería. Se aprieta contra los botones vecinos de la
    barra de acciones y su alto se iguala al de los botones pequeños de Radzen,
    que es lo que impide que la fila de filtros crezca dos píxeles al aparecer.
*/
.act-vista .rz-button {
    min-width: 34px;
    padding-left: 8px;
    padding-right: 8px;
}

/* ═══════════════════ Galería ═══════════════════ */

/*
    La foto es la mitad del valor probatorio de un inventario de activos: sin
    ella, «Carcaza de turbina Pelton marca Gilkes 1999» describe cualquier
    carcasa. La tarjeta lleva la condición arriba —que es lo que se busca al
    mirar fotos— y el valor en libros abajo.
*/
.act-galeria-caja {
    padding: 14px;
    overflow: auto;
}

.act-galeria {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
    gap: 14px;
}

.act-ficha {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--pan-linea);
    border-radius: var(--pan-radio);
    background: var(--pan-papel);
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

.act-ficha:hover {
    transform: translateY(-2px);
    border-color: #cfdae6;
    box-shadow: var(--pan-sombra-tarjeta);
}

.act-ficha-imagen {
    position: relative;
    aspect-ratio: 4 / 3;
    display: grid;
    place-items: center;
    background: var(--pan-fondo);
    color: var(--pan-tenue);
    overflow: hidden;
}

.act-ficha-imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.act-ficha-imagen .rz-icon,
.act-ficha-imagen .material-symbols-outlined {
    font-size: 2.4rem;
}

/* La condición, encima de la foto: es lo que se compara al pasar la vista. */
.act-ficha-estado {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(2px);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Un activo dado de baja se ve, pero se ve apagado. */
.act-ficha-baja {
    opacity: .55;
}

.act-ficha-baja .act-ficha-imagen img {
    filter: grayscale(1);
}

.act-ficha-cuerpo {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px 12px;
}

.act-ficha-codigo {
    margin: 0;
    font-family: var(--pan-mono);
    font-size: .68rem;
    color: var(--pan-tenue);
    letter-spacing: .02em;
}

.act-ficha-nombre {
    margin: 0;
    font-size: .84rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--pan-tinta);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.act-ficha-sitio {
    margin: 2px 0 0;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: .72rem;
    color: var(--pan-apagado);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.act-ficha-sitio .rz-icon,
.act-ficha-sitio .material-symbols-outlined {
    font-size: .95rem;
}

.act-ficha-pie {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--pan-linea);
}

/* ═══════════════════ Ficha emergente ═══════════════════ */

.act-ficha-doc {
    display: block;
    font-family: var(--pan-mono);
    font-size: .72rem;
    letter-spacing: .04em;
    color: var(--pan-tenue);
}

.act-ficha-titulo {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--pan-tinta);
}

.act-resumen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--pan-linea);
    background: var(--pan-fondo);
}

.act-resumen-dato {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* La cuadrícula de datos de la ficha: rótulo arriba, valor abajo, dos por fila. */
.act-datos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px 20px;
    padding: 16px;
}

.act-dato {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.act-dato-rotulo {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pan-tenue);
}

.act-dato-valor {
    font-size: .84rem;
    color: var(--pan-tinta);
    overflow-wrap: anywhere;
}

.act-bloque {
    padding: 0 16px 16px;
}

.act-bloque h6 {
    margin: 0 0 8px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pan-tenue);
}

/* ═══════════════════ Informe ejecutivo ═══════════════════ */

.act-informe {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 14px;
    padding: 14px;
    overflow: auto;
}

.act-panel {
    border: 1px solid var(--pan-linea);
    border-radius: var(--pan-radio);
    background: var(--pan-papel);
    padding: 14px 16px 16px;
}

.act-panel h5 {
    margin: 0 0 2px;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--pan-tinta);
}

.act-panel-pie {
    margin: 0 0 12px;
    font-size: .72rem;
    color: var(--pan-tenue);
}

/* Un renglón de desglose: nombre, barra proporcional y cifra. */
.act-renglon {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 12px;
    padding: 7px 0;
    border-bottom: 1px dashed var(--pan-linea);
}

.act-renglon:last-child {
    border-bottom: 0;
}

.act-renglon-nombre {
    font-size: .8rem;
    color: var(--pan-tinta);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.act-renglon-cifra {
    font-family: var(--pan-mono);
    font-size: .8rem;
    font-weight: 600;
    color: var(--pan-tinta);
    text-align: right;
    white-space: nowrap;
}

.act-renglon-barra {
    grid-column: 1 / -1;
    height: 4px;
    border-radius: 2px;
    background: var(--pan-linea);
    overflow: hidden;
}

.act-renglon-barra span {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: var(--pan-azul);
}

.act-renglon-pie {
    grid-column: 1 / -1;
    font-size: .68rem;
    color: var(--pan-tenue);
}

/*
    La serie de depreciación del ejercicio. Doce columnas y no un gráfico de
    biblioteca: son doce cifras que sólo hay que comparar entre sí, y un
    amCharts para eso pesa más que la pantalla entera.
*/
.act-serie {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: end;
    gap: 4px;
    height: 120px;
    margin-top: 6px;
}

.act-serie-mes {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    height: 100%;
}

.act-serie-barra {
    width: 100%;
    min-height: 2px;
    border-radius: 3px 3px 0 0;
    background: var(--pan-azul);
    transition: height .25s ease;
}

.act-serie-mes.act-serie-hoy .act-serie-barra {
    background: var(--pan-tinta);
}

.act-serie-rotulo {
    font-size: .62rem;
    letter-spacing: .04em;
    color: var(--pan-tenue);
    text-transform: uppercase;
}

/* La lista de trabajo: los cuatro huecos, con su enlace para ir a verlos. */
.act-huecos {
    display: grid;
    gap: 8px;
}

.act-hueco {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--pan-linea);
    border-radius: 8px;
    background: var(--pan-fondo);
}

.act-hueco-cifra {
    font-family: var(--pan-mono);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--pan-tinta);
    min-width: 42px;
    text-align: right;
}

.act-hueco-texto {
    font-size: .76rem;
    line-height: 1.3;
    color: var(--pan-apagado);
}

.act-hueco-texto b {
    display: block;
    font-size: .8rem;
    color: var(--pan-tinta);
}

/* Sin huecos no se pinta una tarjeta vacía: se dice que no hay nada que hacer. */
.act-hueco-limpio {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    font-size: .8rem;
    color: var(--pan-verde);
}

/* ═══════════════════ Toma física ═══════════════════ */

.act-recorrido {
    display: grid;
    grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
    gap: 14px;
    padding: 14px;
    overflow: hidden;
    height: 100%;
}

@media (max-width: 980px) {
    .act-recorrido {
        /* minmax(0, …) y no 1fr: con 1fr la pista crecía hasta lo que mide la fila
           de pestañas y a 360 px la guía quedaba cortada por la derecha. */
        grid-template-columns: minmax(0, 1fr);
        overflow: auto;
    }
}

/* En el teléfono: menos marco, y las tres pestañas de la lista se reparten el ancho. */
@media (max-width: 760px) {
    .act-recorrido { padding: 8px; gap: 10px; }
    .act-recorrido-cab .rz-selectbutton { display: flex; width: 100%; }
    .act-recorrido-cab .rz-selectbutton .rz-button {
        flex: 1 1 0; min-width: 0; min-height: 40px; padding-inline: 4px;
        justify-content: center; text-align: center; white-space: normal; line-height: 1.2;
    }
    .act-recorrido-cab .rz-selectbutton .rz-button-text { white-space: normal; font-size: 11.5px; }
}

@media (max-width: 760px), (pointer: coarse) {
    .act-recorrido-cab .pan-input { min-height: 40px; }
    /* En una tableta (táctil, más de 760 px) las pestañas de la lista también se tocan con el dedo. */
    .act-recorrido-cab .rz-selectbutton .rz-button { min-height: 40px; }
    /* «Aplicar» y «Expediente» de cada diferencia: se tocan con el dedo. */
    .act-hueco .rz-button { min-height: 40px; }
}

.act-recorrido-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border: 1px solid var(--pan-linea);
    border-radius: var(--pan-radio);
    background: var(--pan-papel);
}

.act-recorrido-cab {
    padding: 12px 14px;
    border-bottom: 1px solid var(--pan-linea);
}

.act-recorrido-cuerpo {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 12px 14px;
}

/* Los cuatro resultados posibles, como botones grandes: se toca con el pulgar. */
.act-resultados {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin: 10px 0;
}

.act-resultado {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid var(--pan-linea);
    border-radius: 8px;
    background: var(--pan-papel);
    cursor: pointer;
    text-align: left;
    transition: border-color .15s ease, background .15s ease;
}

.act-resultado:hover {
    border-color: var(--pan-azul);
    background: var(--pan-fondo);
}

.act-resultado[disabled] {
    opacity: .5;
    cursor: default;
}

.act-resultado b {
    font-size: .8rem;
    color: var(--pan-tinta);
}

.act-resultado span {
    font-size: .68rem;
    line-height: 1.25;
    color: var(--pan-tenue);
}

.act-resultado-elegido {
    border-color: var(--pan-tinta);
    background: var(--pan-fondo);
    box-shadow: inset 0 0 0 1px var(--pan-tinta);
}

/* La barra de cobertura de la toma: cuánto del alcance se ha visto ya. */
.act-cobertura {
    height: 8px;
    border-radius: 4px;
    background: var(--pan-linea);
    overflow: hidden;
    margin: 6px 0 4px;
}

.act-cobertura span {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: var(--pan-verde);
    transition: width .3s ease;
}

/* ═══════════════════ Campos de ventana ═══════════════════ */

/*
    .pan-filtro sólo está estilado como hijo de .pan-filtros, así que dentro de una
    ventana emergente no hereda nada. Este es su equivalente para los formularios
    cortos de las ventanas: rótulo arriba, control debajo.
*/
.act-campo {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

.act-campo:last-child {
    margin-bottom: 0;
}

.act-campo > label {
    margin: 0;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pan-tenue);
}

.act-campo-pie {
    font-size: .68rem;
    color: var(--pan-tenue);
}

/* El pie de una ventana: los botones a la derecha, separados del cuerpo. */
.act-ventana-pie {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--pan-linea);
    background: var(--pan-fondo);
}

/* La rejilla de dos columnas del formulario del activo. */
.act-formulario {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0 20px;
    padding: 16px;
}

.act-formulario-ancho {
    grid-column: 1 / -1;
}

.act-formulario h6 {
    grid-column: 1 / -1;
    margin: 10px 0 6px;
    padding-top: 10px;
    border-top: 1px solid var(--pan-linea);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pan-tenue);
}

.act-formulario h6:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/*
    ══════════════════════════════════════════════════════════════════════════
    NOTA DE RESPONSABILIDAD F-O-CSG-03
    ══════════════════════════════════════════════════════════════════════════

    Es lo único del sistema que se imprime para firmarse a mano y archivarse en
    papel, así que su medida no es la pantalla sino la HOJA CARTA: 21.6 cm de
    ancho con 1.5 cm de margen. Todo lo de aquí está en centímetros y en puntos
    por ese motivo, y no por gusto.

    El formato reproduce el del archivo de Servicios Generales —marco, membrete
    con logo y código de formato, tabla de seis columnas, rejilla de fotos,
    cláusulas y dos firmas— porque las 93 notas ya emitidas están en ese
    formato y una nota nueva tiene que poder archivarse junto a ellas sin que se
    note el cambio de sistema.
*/

.act-nota {
    width: 21.6cm;
    min-height: 27.9cm;
    margin: 16px auto;
    padding: 1.5cm;
    background: #fff;
    color: #000;
    font-family: var(--pan-sans);
    font-size: 10pt;
    line-height: 1.35;
    box-shadow: var(--pan-sombra);
}

.act-nota-marco {
    border: 1.5pt solid #000;
    padding: 0;
}

/* ── Membrete ─────────────────────────────────────────────────────────── */

.act-nota-cab {
    display: grid;
    grid-template-columns: 2.6cm minmax(0, 1fr) 4.2cm;
    align-items: center;
    border-bottom: 1.5pt solid #000;
}

.act-nota-cab > * {
    padding: 6pt 8pt;
}

.act-nota-cab > * + * {
    border-left: 1pt solid #000;
}

.act-nota-logo img {
    width: 100%;
    max-height: 1.9cm;
    object-fit: contain;
}

.act-nota-titulo {
    text-align: center;
}

.act-nota-titulo b {
    display: block;
    font-size: 12pt;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.act-nota-titulo span {
    display: block;
    font-size: 8.5pt;
    letter-spacing: .02em;
}

.act-nota-codigo {
    font-size: 8pt;
    line-height: 1.5;
}

.act-nota-codigo b {
    font-family: var(--pan-mono);
}

/* ── Encabezado de datos ──────────────────────────────────────────────── */

.act-nota-datos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-bottom: 1.5pt solid #000;
}

.act-nota-campo {
    display: flex;
    align-items: baseline;
    gap: 6pt;
    padding: 5pt 8pt;
    font-size: 9.5pt;
    min-height: .95cm;
}

.act-nota-campo + .act-nota-campo {
    border-left: 1pt solid #000;
}

.act-nota-campo:nth-child(2n + 1) {
    border-left: 0;
}

.act-nota-campo:nth-child(n + 3) {
    border-top: 1pt solid #000;
}

.act-nota-campo label {
    margin: 0;
    font-size: 8pt;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.act-nota-campo span {
    flex: 1;
    border-bottom: .75pt dotted #000;
    min-height: 12pt;
}

/* ── Tabla de bienes ──────────────────────────────────────────────────── */

.act-nota-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 9pt;
}

.act-nota-tabla th,
.act-nota-tabla td {
    border: 1pt solid #000;
    padding: 4pt 6pt;
    vertical-align: top;
}

.act-nota-tabla th {
    background: #e9e9e9;
    font-size: 8pt;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-align: center;
}

.act-nota-tabla thead {
    display: table-header-group;
}

.act-nota-tabla td.act-nota-c {
    text-align: center;
}

.act-nota-tabla tr {
    break-inside: avoid;
    page-break-inside: avoid;
}

/* Renglones en blanco: el formato de papel los lleva para escribir a mano. */
.act-nota-vacio td {
    height: .7cm;
}

/* ── Rejilla de fotografías ───────────────────────────────────────────── */

.act-nota-fotos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1.5pt solid #000;
}

.act-nota-foto {
    height: 5.2cm;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #fff;
}

.act-nota-foto + .act-nota-foto {
    border-left: 1pt solid #000;
}

.act-nota-foto:nth-child(2n + 1) {
    border-left: 0;
}

.act-nota-foto:nth-child(n + 3) {
    border-top: 1pt solid #000;
}

.act-nota-foto img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.act-nota-foto-vacia {
    font-size: 8pt;
    color: #999;
}

/* ── Cláusulas ────────────────────────────────────────────────────────── */

.act-nota-clausulas {
    border-top: 1.5pt solid #000;
    padding: 8pt 10pt;
    font-size: 8.5pt;
    text-align: justify;
    line-height: 1.4;
}

.act-nota-clausulas p {
    margin: 0 0 5pt;
}

.act-nota-clausulas p:last-child {
    margin-bottom: 0;
}

/* ── Firmas ───────────────────────────────────────────────────────────── */

.act-nota-firmas {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1.5pt solid #000;
}

.act-nota-firma {
    padding: 8pt 10pt 10pt;
    text-align: center;
}

.act-nota-firma + .act-nota-firma {
    border-left: 1pt solid #000;
}

.act-nota-firma-caja {
    height: 2.4cm;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.act-nota-firma-caja img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/*
    El lienzo de firma. Ancho completo del hueco y alto fijo: si el alto lo
    pusiera el CSS en porcentaje, el mapa de bits del canvas y su tamaño en
    pantalla dejarían de coincidir y el trazo saldría desplazado del puntero.
*/
.act-firma-lienzo {
    width: 100%;
    height: 2.4cm;
    border: 1pt dashed #999;
    border-radius: 4px;
    background: #fff;
    touch-action: none;
    cursor: crosshair;
}

.act-nota-firma-linea {
    margin-top: 2pt;
    padding-top: 3pt;
    border-top: .75pt solid #000;
    font-size: 8.5pt;
}

.act-nota-firma-linea b {
    display: block;
    font-size: 9pt;
}

.act-nota-firma-linea span {
    display: block;
    font-size: 7.5pt;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #444;
}

/* ── Pie del formato ──────────────────────────────────────────────────── */

.act-nota-pie {
    border-top: 1pt solid #000;
    padding: 4pt 8pt;
    font-size: 7.5pt;
    color: #444;
    display: flex;
    justify-content: space-between;
    gap: 10pt;
}

/* ── Barra de trabajo (no se imprime) ─────────────────────────────────── */

.act-nota-barra {
    width: 21.6cm;
    margin: 12px auto 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--pan-radio);
    background: var(--pan-papel);
    border: 1px solid var(--pan-linea);
    box-shadow: var(--pan-sombra-tarjeta);
}

.act-nota-barra-texto {
    flex: 1;
    font-size: .8rem;
    color: var(--pan-apagado);
}

/*
    ── Impresión ─────────────────────────────────────────────────────────
    En papel desaparecen la sombra, los márgenes de pantalla y todo lo que
    lleve .hideWhenPrint. El marco y la tipografía ya están en centímetros, así
    que no hay nada que reescalar.
*/
@media print {
    .act-nota {
        width: auto;
        min-height: 0;
        margin: 0;
        padding: 0;
        box-shadow: none;
    }

    .act-nota-barra {
        display: none !important;
    }

    .act-firma-lienzo {
        display: none;
    }

    .act-nota-tabla thead th {
        background: #e9e9e9 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    @page {
        size: letter;
        margin: 1.5cm;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   CATÁLOGOS DE ACTIVOS  ·  prefijo .cta-
   Tipos y condiciones en una sola pantalla. Dos paneles a la par, cada uno
   con su rejilla, más los dos diálogos de alta y edición.
   ══════════════════════════════════════════════════════════════════════════ */

/* Los dos paneles. Es hijo directo de .pan-pantalla, así que NO lleva margen:
   la separación la pone el «gap» del envoltorio y un margen se le sumaría,
   descuadrando esta pantalla contra las demás. */
.cta-doble {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 8px;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
}

@media (max-width: 1180px) {
    .cta-doble {
        grid-template-columns: minmax(0, 1fr);
        overflow: auto;
    }

    .cta-panel {
        min-height: 320px;
    }
}

/* .pan-tarjeta trae padding 0 —está hecha para rejillas a sangre—, así que el
   título y el pie ponen el suyo y la tabla sigue pegada a los bordes. */
.cta-panel {
    min-width: 0;
}

.cta-titulo {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0;
    padding: 11px 18px 9px;
    border-bottom: 1px solid var(--pan-linea);
    background: #f7f9fb;
    font-family: var(--pan-sans);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--pan-tinta);
}

.cta-titulo .rzi,
.cta-titulo .rz-icon,
.cta-titulo .notranslate {
    font-size: 17px;
    line-height: 1;
    color: var(--pan-apagado);
    align-self: center;
}

.cta-titulo small {
    flex: 1 1 260px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--pan-apagado);
}

/* El conteo de bienes: es el dato que convierte el catálogo en lista de trabajo. */
.cta-conteo {
    display: inline-block;
    min-width: 30px;
    padding: 1px 7px;
    border-radius: 9px;
    background: #eef2f7;
    font-family: var(--pan-mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--pan-tinta);
}

.cta-conteo-cero {
    background: transparent;
    font-weight: 500;
    color: #b3bdc8;
}

/* El escalón de la condición, con su color. Es la muestra del semáforo. */
.cta-escalon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.cta-apagado {
    color: #97a3b0;
    text-decoration: line-through;
}

.cta-marca {
    margin-left: 6px;
    padding: 0 6px;
    border: 1px solid #d3dae2;
    border-radius: 8px;
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #8593a1;
}

.cta-pie {
    display: block;
    font-size: 11px;
    line-height: 1.25;
}

.cta-si  { color: #1c8a5a; font-size: 17px; }
.cta-no  { color: #c2cbd4; font-size: 17px; }

/* ── Los diálogos ─────────────────────────────────────────────────────────── */

.cta-dlg {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-family: var(--pan-sans);
}

.cta-dlg-intro {
    margin: 0;
    font-size: 12px;
}

.cta-campos {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 12px 14px;
}

.cta-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.cta-c4  { grid-column: span 4; }
.cta-c5  { grid-column: span 5; }
.cta-c6  { grid-column: span 6; }
.cta-c7  { grid-column: span 7; }
.cta-c8  { grid-column: span 8; }
.cta-c12 { grid-column: span 12; }

@media (max-width: 720px) {
    .cta-c4, .cta-c5, .cta-c6, .cta-c7, .cta-c8 { grid-column: span 12; }
}

.cta-pista {
    font-size: 11px;
    line-height: 1.3;
    color: var(--pan-apagado);
}

.cta-subtitulo {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin: 4px 0 -2px;
    padding-top: 10px;
    border-top: 1px solid var(--pan-linea);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--pan-tinta);
}

.cta-subtitulo small {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--pan-apagado);
}

.cta-interruptor {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 32px;
}

.cta-interruptor > span {
    font-size: 11.5px;
    line-height: 1.3;
    color: var(--pan-apagado);
}

.cta-color { display: flex; align-items: center; gap: 8px; }

.cta-color-selector {
    width: 38px;
    height: 32px;
    padding: 2px;
    border: 1px solid var(--pan-linea);
    border-radius: var(--pan-radio);
    background: #fff;
    cursor: pointer;
}

.cta-preview {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 32px;
    padding: 4px 10px;
    border: 1px solid var(--pan-linea);
    border-radius: var(--pan-radio);
    background: #fbfcfd;
}

.cta-preview-nombre { font-size: 13px; font-weight: 600; color: var(--pan-tinta); }

.cta-aviso,
.cta-estado {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 9px 12px;
    border: 1px solid #dbe3ea;
    border-radius: var(--pan-radio);
    background: #f5f8fb;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--pan-apagado);
}

.cta-aviso .rzi,
.cta-estado .rzi,
.cta-aviso .notranslate,
.cta-estado .notranslate { font-size: 16px; line-height: 1.2; }

.cta-aviso b, .cta-estado b { color: var(--pan-tinta); }

.cta-estado-ok  { border-color: #b7e0c9; background: #f1faf5; color: #1f6d4b; }
.cta-estado-mal { border-color: #e8d2a8; background: #fdf8ef; color: #8a6d1f; }

.cta-dlg-pie {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px solid var(--pan-linea);
}

/* ══════════════════════════════════════════════════════════════════════════
   FOTOGRAFÍAS DEL ACTIVO  ·  prefijo .act-foto-
   La zona de soltar hereda .pan-form-soltar (pantalla.css): el input cubre la
   zona entera, transparente, así el clic y el arrastre son los nativos.
   ══════════════════════════════════════════════════════════════════════════ */

.act-fotos-zona {
    padding: 12px 14px;
}

.act-fotos-zona .rzi,
.act-fotos-zona .notranslate {
    font-size: 22px;
    color: #8c98a4;
}

.act-fotos-pista {
    margin-top: 2px;
    font-size: 11px;
    color: #8c98a4;
}

.act-fotos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.act-foto {
    position: relative;
    margin: 0;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--pan-linea);
    border-radius: var(--pan-radio);
    background: #f4f6f8;
    overflow: hidden;
}

.act-foto > a,
.act-foto > img {
    display: block;
    width: 100%;
    height: 100%;
}

.act-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.act-foto-pendiente {
    border-style: dashed;
    border-color: #b7c3d0;
}

.act-foto-pendiente img { opacity: .78; }

.act-foto-principal {
    position: absolute;
    left: 5px;
    bottom: 5px;
    padding: 1px 7px;
    border-radius: 9px;
    background: rgba(15, 23, 32, .76);
    color: #fff;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.act-foto-espera { background: rgba(138, 109, 31, .88); }

.act-foto-quitar {
    position: absolute !important;
    top: 4px;
    right: 4px;
    opacity: 0;
    transition: opacity .15s;
}

.act-foto:hover .act-foto-quitar,
.act-foto:focus-within .act-foto-quitar { opacity: 1; }

/* En pantalla táctil no hay hover: el botón se queda puesto. */
@media (hover: none) {
    .act-foto-quitar { opacity: .92; }
}

@media print {
    .act-fotos-zona,
    .act-foto-quitar { display: none !important; }
}

/*
    ══════════════════════════════════════════════════════════════════════════
    PRODUCTO DEL CATÁLOGO EN LA FICHA
    ══════════════════════════════════════════════════════════════════════════

    El bien enlazado a su artículo del catálogo de compras: una tarjeta con la
    foto, el nombre, lo que lo distingue y sus especificaciones, o —mientras no
    hay enlace— un buscador corto con los hallados debajo. Sin líneas duras:
    fondo apenas distinto y el mismo radio de las demás tarjetas.
*/
.act-producto {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px 12px;
    border: 1px solid var(--pan-linea);
    border-radius: var(--pan-radio);
    background: #fafafa;
}

.act-producto-foto {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--pan-linea);
}

.act-producto-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.act-producto-texto {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Los nombres del catálogo son largos («Carda (cepillo) de copa, alambre
   trenzado, 5/8" x 4"…»): aquí se dejan partir en vez de cortarlos con puntos. */
.act-producto-texto .pan-principal,
.act-producto-lista .pan-principal {
    white-space: normal;
    overflow-wrap: anywhere;
}

.act-producto-desc {
    font-size: .78rem;
    color: var(--pan-tinta);
    overflow-wrap: anywhere;
}

.act-producto-specs {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 3px 10px;
    font-size: .72rem;
    color: var(--pan-tenue);
}

.act-producto-specs b {
    font-weight: 600;
    color: var(--pan-tinta);
}

.act-producto-specs b::after { content: ":"; }

.act-producto .pan-acciones {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: stretch;
}

.act-producto-buscar {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.act-producto-buscar .rz-textbox { min-width: 200px; }

.act-producto-lista {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin-top: 4px;
}

.act-producto-lista td {
    padding: 4px 6px;
    border-bottom: 1px dashed var(--pan-linea);
    vertical-align: top;
}

.act-producto-lista tr:last-child td { border-bottom: 0; }

.act-producto-lista tr:hover td { background: #f6f8fa; }

.act-producto-usar {
    width: 72px;
    text-align: right;
    white-space: nowrap;
}

@media (max-width: 560px) {
    .act-producto { flex-wrap: wrap; }
    .act-producto .pan-acciones { flex-direction: row; width: 100%; }
}

@media print {
    .act-producto-buscar,
    .act-producto-lista { display: none !important; }
}