/* ═══════════════════════════════════════════════════════════════════════
   TAREAS DE ALTO RIESGO — zona interactiva
   ═══════════════════════════════════════════════════════════════════════
   Se monta sobre la hoja de Inspecciones (module-insp.css): la bienvenida,
   la tira de datos, las tres columnas, los paneles, las respuestas, la
   evidencia y los botones son los mismos. Aquí va solo lo que el permiso
   trae de nuevo: las etapas, la cuadrilla, el ATS, las firmas, el permiso
   emitido, el anemómetro y la bitácora.

   Igual que allá: nada de cajas ni de líneas que dividan, el contenido se
   separa con aire, y los tamaños en px porque el diseño los fija así.
   ═══════════════════════════════════════════════════════════════════════ */

/* ══════════════════ Las etapas ══════════════════ */
.tr-step.is-locked { opacity: 0.42; cursor: default; }
.tr-step.is-locked:hover { background: none; }

/* Los nueve puntos cuelgan de su etapa, un escalón más adentro */
.tr-points {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 2px 0 10px 1.9rem;
}

.tr-point {
    display: grid;
    grid-template-columns: 0.5rem minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 5px 6px 5px 0;
    background: none;
    border: 0;
    color: var(--pi-ink-3);
    font-family: inherit;
    font-size: 12px;
    text-align: left;
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-smooth);
}

.tr-point:hover { color: var(--pi-ink-2); }
.tr-point.is-on { color: var(--pi-ink); font-weight: 600; }

.tr-point__dot {
    width: 0.44rem;
    height: 0.44rem;
    border: 1.5px solid var(--pi-line-2);
    border-radius: 50%;
    box-sizing: border-box;
}

.tr-point__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ══════════════════ La tarea ══════════════════ */
.tr-rows { display: flex; flex-direction: column; gap: 14px; }
.tr-row { display: flex; flex-direction: column; gap: 5px; }
.tr-row__v { font-size: 15px; font-weight: 400; line-height: 1.4; color: var(--pi-ink); }

.tr-aside { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; }

.tr-aside__p {
    margin: 0;
    max-width: 44ch;
    font-size: 13px;
    line-height: 1.5;
    color: var(--pi-ink-2);
    text-wrap: pretty;
}

/* ══════════════════ La cuadrilla ══════════════════ */
/* Una fila por persona: iniciales, nombre y rol, y los tres requisitos
   como iconos. Se lee de un vistazo quién está en regla y quién no. */
.tr-crew { display: flex; flex-direction: column; gap: 4px; }

.tr-mate {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px 14px;
    padding: 10px 0;
    transition: opacity var(--duration-normal) var(--ease-smooth);
}

.tr-mate__av {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: color-mix(in srgb, #22D3EE 12%, transparent);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #22D3EE 35%, transparent);
    color: var(--pi-ink);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.tr-mate__t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tr-mate__name { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }

.tr-mate__role {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pi-ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tr-mate__chk { display: flex; align-items: center; gap: 12px; }

.tr-ic { display: flex; color: #22c55e; cursor: help; }
.tr-ic.is-bad { color: #ef4444; }

/* Quien bloquea el permiso: filete rojo, el motivo y el botón debajo */
.tr-mate.is-bad {
    padding: 12px 0 14px 14px;
    margin: 4px 0 4px -14px;
    box-shadow: inset 3px 0 0 0 #ef4444;
}

.tr-mate.is-bad .tr-mate__av {
    background: color-mix(in srgb, #ef4444 18%, transparent);
    box-shadow: inset 0 0 0 1.5px #ef4444;
}

.tr-mate.is-new .tr-mate__av {
    background: color-mix(in srgb, #22c55e 18%, transparent);
    box-shadow: inset 0 0 0 1.5px #22c55e;
    animation: dcFadeUp var(--duration-normal) var(--ease-smooth) both;
}

.tr-mate.is-off { opacity: 0.5; }

.tr-mate__why {
    grid-column: 2 / -1;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 500;
    color: #fca5a5;
}

.tr-mate__why--ok { color: #86efac; }

.tr-mate__act { grid-column: 2 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 8px; }
.tr-mate__no { grid-column: 2 / -1; font-size: 12px; color: var(--pi-ink-3); }

/* El botón principal en tamaño de fila */
.tr-go--sm { padding: 9px 18px; font-size: 13px; }

/* Los disponibles cuelgan de la fila que reemplazan */
.tr-bench {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 12px;
}

.tr-bench .tr-mate { padding: 8px 0; }

/* El aviso de bloqueo: icono y frase en rojo, sin caja alrededor */
.tr-alert {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    max-width: 46ch;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    color: #fca5a5;
}

.tr-alert svg { margin-top: 1px; }

/* ══════════════════ El ATS ══════════════════ */
.tr-ats { display: flex; flex-direction: column; gap: 6px; }

.tr-ats__step { display: flex; flex-direction: column; gap: 8px; padding-bottom: 8px; }

.tr-ats__top {
    display: grid;
    grid-template-columns: 1.4rem minmax(0, 1fr) 1rem;
    align-items: start;
    gap: 10px;
    width: 100%;
    padding: 6px 0;
    background: none;
    border: 0;
    color: inherit;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.tr-ats__n {
    padding-top: 3px;
    font-size: 10px;
    font-weight: 700;
    color: var(--pi-ink-3);
    font-variant-numeric: tabular-nums;
}

.tr-ats__t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tr-ats__name { font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--pi-ink-2); }
.tr-ats__step.is-open .tr-ats__name { font-size: 18px; font-weight: 600; color: var(--pi-ink); }
.tr-ats__hz { font-size: 12px; line-height: 1.4; color: #fbbf24; }
.tr-ats__step.is-done:not(.is-open) .tr-ats__hz { color: var(--pi-ink-3); }
.tr-ats__mark { padding-top: 3px; }

.tr-ats__ctrl { padding-left: calc(1.4rem + 10px); font-size: 12.5px; line-height: 1.45; color: #86efac; }

.tr-ats__pick {
    padding-left: calc(1.4rem + 10px);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--pi-cyan);
}

.tr-ats__step .pi-ans { padding-left: calc(1.4rem + 10px); }
.tr-ats__warn { padding-left: calc(1.4rem + 10px); font-size: 13px; line-height: 1.4; }

/* Las opciones son frases, no palabras sueltas como Cumple o No cumple */
.tr-opt { grid-template-columns: 1.375rem minmax(0, 1fr); padding-top: 11px; padding-bottom: 11px; }
.tr-opt__t { font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--pi-ink); }
.tr-opt.is-on .tr-opt__t { font-weight: 600; }

/* ══════════════════ Las firmas ══════════════════ */
/* Lo que falta corregir: una fila por hallazgo, con la foto en miniatura */
.tr-fix { display: flex; flex-direction: column; gap: 6px; }

.tr-fix__k {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
}

.tr-find {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    padding: 10px 0 10px 14px;
    margin-left: -14px;
    box-shadow: inset 3px 0 0 0 #ef4444;
    transition: box-shadow var(--duration-normal) var(--ease-smooth);
}

.tr-find.is-done { box-shadow: inset 3px 0 0 0 #22c55e; }

.tr-find__shot {
    display: block;
    width: 5.5rem;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(250, 250, 250, 0.04);
}

.tr-find__shot img { width: 100%; height: 100%; object-fit: cover; }

.tr-find__t { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.tr-find__name { font-size: 15px; font-weight: 600; line-height: 1.25; }

.tr-find__obs {
    max-width: 100%;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--pi-ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tr-find__act { margin-top: 6px; display: inline-flex; align-items: center; gap: 7px; }

.tr-find__ok,
.tr-sign__ok {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: #86efac;
}

.tr-find__ok { margin-top: 4px; }

/* Las tres firmas son filas como las de la cuadrilla */
.tr-signs { display: flex; flex-direction: column; gap: 2px; padding-top: 14px; }
.tr-sign .pi-go { justify-self: end; display: inline-flex; align-items: center; gap: 6px; }
.tr-sign .pi-go:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.tr-signs.is-locked .tr-mate__av { opacity: 0.5; }
.tr-sign .tr-mate__role { white-space: normal; line-height: 1.35; }

/* ══════════════════ El permiso emitido ══════════════════ */
.tr-permit { display: flex; align-items: center; gap: 20px; }

/* El QR necesita su fondo claro para leerse, como el del certificado */
.tr-permit__qr {
    flex: none;
    display: flex;
    padding: 9px;
    background: #fafafa;
    border-radius: 12px;
    box-shadow: var(--glass-shadow-light);
}

.tr-permit__info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tr-permit__no { font-size: 22px; font-weight: 700; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.tr-permit__scan { font-size: 12px; line-height: 1.45; color: var(--pi-ink-3); }

/* ══════════════════ El anemómetro ══════════════════ */
.tr-wind { display: flex; flex-direction: column; gap: 10px; }
.tr-wind__top { display: flex; align-items: baseline; gap: 10px; }

.tr-wind__num {
    font-size: 62px;
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 0.88;
    font-variant-numeric: tabular-nums;
    transition: color var(--duration-normal) var(--ease-smooth);
}

.tr-wind__unit { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; color: var(--pi-ink-3); }

/* Las lecturas recientes, con la línea del límite marcada encima */
.tr-wind__bars {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 4.5rem;
}

.tr-wind__bars::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--tr-limite, 80%);
    border-top: 1px dashed rgba(239, 68, 68, 0.7);
    pointer-events: none;
}

.tr-wind__bars i {
    flex: none;
    display: block;
    width: calc((100% - 35 * 3px) / 36);
    min-height: 2px;
    border-radius: 2px 2px 0 0;
    transition: height var(--duration-fast) var(--ease-smooth),
                background-color var(--duration-fast) var(--ease-smooth);
}

.tr-wind__limit { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: #fca5a5; }

/* ══════════════════ La bitácora ══════════════════ */
.tr-log { display: flex; flex-direction: column; gap: 11px; }

.tr-log__row {
    display: grid;
    grid-template-columns: 2.9rem 0.5rem minmax(0, 1fr);
    align-items: baseline;
    gap: 10px;
}

.tr-log__h { font-size: 12px; font-weight: 600; color: var(--pi-ink-3); font-variant-numeric: tabular-nums; }
.tr-log__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; transform: translateY(-1px); }
.tr-log__t { font-size: 14px; line-height: 1.4; color: var(--pi-ink-2); }

/* ══════════════════ Escritorio ══════════════════ */
@media (min-width: 1024px) {
    /* Las etapas con sus nueve puntos no caben repartidas: se apilan */
    .tr-steps { justify-content: flex-start; }
    .pi-cols { grid-template-columns: 13rem minmax(0, 2fr) minmax(22rem, 0.95fr); }
}

@media (min-width: 1440px) {
    .pi-cols { grid-template-columns: 14rem minmax(0, 2.2fr) minmax(23rem, 0.9fr); }
}

/* ══════════════════ La portada ══════════════════ */
/* El andamio es alto y delgado: detrás del título centrado lo atraviesa.
   En celular se queda centrado con más sombra tras el texto; desde
   escritorio el texto va a la izquierda y el andamio a la derecha. */
.tr .pi-hello__veil {
    background-image: radial-gradient(ellipse 60% 38% at 50% 50%,
        rgba(6, 6, 16, 0.88) 0%,
        rgba(6, 6, 16, 0.66) 50%,
        rgba(6, 6, 16, 0) 92%);
}

@media (min-width: 1024px) {
    .tr .pi-hello { align-items: flex-start; text-align: left; }

    .tr .pi-hello__say {
        align-items: flex-start;
        max-width: 34rem;
        margin-inline: 0;
        padding-left: clamp(0px, 4vw, 64px);
    }

    .tr .pi-hello__veil {
        background-image: radial-gradient(ellipse 46% 56% at 22% 50%,
            rgba(6, 6, 16, 0.82) 0%,
            rgba(6, 6, 16, 0.5) 55%,
            rgba(6, 6, 16, 0) 92%);
    }
}

/* ══════════════════ El cierre ══════════════════ */
/* Casillas cuadradas: se marcan todas, no se elige una */
.tr-checks { display: flex; flex-direction: column; gap: 4px; }

.tr-check {
    display: grid;
    grid-template-columns: 1.375rem minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 12px 0;
    background: none;
    border: 0;
    color: var(--pi-ink);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.tr-check__box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    border: 1.5px solid var(--pi-ink-3);
    border-radius: 6px;
    box-sizing: border-box;
    color: #060610;
    transition: background-color var(--duration-fast) var(--ease-smooth),
                border-color var(--duration-fast) var(--ease-smooth);
}

.tr-check:hover .tr-check__box { border-color: var(--pi-ink); }
.tr-check.is-on .tr-check__box { background: #22c55e; border-color: #22c55e; }

.tr-check__t { font-size: 15px; font-weight: 500; line-height: 1.35; }
.tr-check.is-on .tr-check__t { color: #86efac; }

.tr-go--off,
.tr-go--off:hover { display: inline-flex; align-items: center; gap: 8px; opacity: 0.45; cursor: not-allowed; transform: none; }

/* El botón de cerrar va junto a sus casillas, no al fondo del panel */
@media (min-width: 1024px) {
    .pi-panel__foot.tr-foot--near { margin-top: 0; }
}

/* Debajo de las barras: qué se está viendo y dónde está el límite */
.tr-wind__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 16px;
    font-size: 11px;
    color: var(--pi-ink-3);
}

/* ══════════════════ La tira de datos en celular ══════════════════ */
/* El avance ocupa su propio renglón a todo el ancho: en una columna
   estrecha el rótulo se partía o se cortaba. Solo desde escritorio, donde
   hay espacio, vuelve a la fila con los demás datos. */
.pi-strip .pi-dato--grow {
    flex: 1 1 100%;
    order: 10;
    padding: 14px 0 0;
}

.pi-strip .pi-dato--grow .pi-dato__k { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (min-width: 1024px) {
    .pi-strip .pi-dato--grow {
        flex: 1 1 12rem;
        min-width: 12rem;
        order: 0;
        padding: 0 22px;
    }
}