/* ==========================================================================
   Industria · Antes y después
   El mismo lote, en papel y conectado. Una matriz "dónde queda el dato"
   (filas: medios; columnas: estaciones) donde la ficha del lote avanza,
   una bitácora que se escribe y un marcador con conteos de la simulación.
   Usa los tokens de industria.css. Todas las clases llevan el prefijo ad-.
   ========================================================================== */

.ad {
    container: ad / inline-size;
    display: grid;
    gap: 14px;
    --ad-gap: 6px;
    --ad-col-medio: 116px;
    --ad-nodo: 96px;
}

.ad button, .ad a { touch-action: manipulation; }

/* --------------------------------------------------------------------------
   Mando: vista, acciones y aviso de datos de ejemplo
   -------------------------------------------------------------------------- */

.ad-mando {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}
.ad-mando .segmento { grid-column: 1 / -1; display: flex; }
.ad-mando .segmento button { flex: 1; min-height: 40px; }
.ad-mando .btn { min-width: 0; padding-inline: .7rem; font-size: .9rem; gap: .45rem; }
.ad-mando__pie { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ad-mando .ejemplo { font-size: .78rem; white-space: nowrap; }

@container ad (min-width: 640px) {
    .ad-mando { display: flex; flex-wrap: wrap; gap: 10px; }
    .ad-mando__pie { display: contents; }
    .ad-mando .ejemplo { font-size: .8rem; }
    .ad-mando .segmento { display: inline-flex; margin-right: 4px; }
    .ad-mando .segmento button { flex: none; min-width: 104px; min-height: 36px; }
    .ad-mando .btn { padding-inline: 1.05rem; font-size: .95rem; gap: .55rem; }
    .ad-mando .ejemplo { margin-left: auto; }
}

/* --------------------------------------------------------------------------
   Cuerpo: escena y bitácora
   -------------------------------------------------------------------------- */

.ad-cuerpo { display: grid; gap: 14px; }

@container ad (min-width: 1000px) {
    .ad-cuerpo { grid-template-columns: minmax(0, 1fr) 300px; align-items: stretch; }
    /* La bitácora no define el alto: toma el de la escena y hace scroll adentro. */
    .ad-bitacora { contain: size; }
    .ad-bitacora__lista { overflow-y: auto; overscroll-behavior: contain; }
}

.ad-escena {
    display: grid;
    gap: 14px;
    align-content: start;
    min-width: 0;
    padding: 16px;
}

.ad-escena__cabeza {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
}
.ad-escena__titulo { font-size: 1.02rem; letter-spacing: -.014em; line-height: 1.3; }
.ad-escena__estado { font-size: .84rem; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.ad[data-fase="fin"] .ad-escena__estado { color: var(--tinta); font-weight: 600; }

/* --------------------------------------------------------------------------
   Mapa en celular: estaciones en columna, cada dato dice en qué medio quedó
   -------------------------------------------------------------------------- */

.ad-mapa { position: relative; }
.ad-esquina, .ad-medios, .ad-banda, .ad-carril, .ad-linea, .ad-sin-sistema { display: none; }

.ad-estaciones { display: grid; }
.ad-estacion { position: relative; min-width: 0; padding-bottom: 14px; }
.ad-estacion:last-child { padding-bottom: 0; }
.ad-estacion::before {
    content: "";
    position: absolute;
    left: 17.5px;
    top: 40px;
    bottom: 4px;
    width: 1px;
    background: var(--linea);
    transition: background-color 320ms ease;
}
.ad-estacion:last-child::before { display: none; }
.ad[data-vista="conectada"] .ad-estacion[data-estado="pasada"]::before { background: var(--rojo); }

.ad-estacion__cabeza { display: flex; align-items: center; gap: 12px; min-height: 36px; }
.ad-estacion__icono {
    width: 36px;
    height: 36px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: var(--radio-btn);
    background: var(--blanco);
    border: 1px solid var(--linea);
    color: var(--tinta-3);
    transition: background-color 220ms ease, border-color 220ms ease, color 220ms ease;
}
.ad-estacion__icono .icono { width: 18px; height: 18px; }
.ad-estacion__nombre { font-size: .92rem; font-weight: 600; line-height: 1.25; color: var(--tinta-2); transition: color 220ms ease; }
.ad-estacion[data-estado] .ad-estacion__nombre { color: var(--tinta); }
.ad-estacion[data-estado="pasada"] .ad-estacion__icono { color: var(--tinta); border-color: #c9cfd5; }
.ad-estacion[data-estado="activa"] .ad-estacion__icono { background: var(--tinta); border-color: var(--tinta); color: #fff; }

.ad-estacion__lote {
    display: none;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 99px;
    background: var(--tinta);
    color: #fff;
    font-size: .74rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.ad[data-vista="conectada"] .ad-estacion__lote { background: var(--rojo); }
.ad[data-accion="recibir"] .ad-estacion[data-estado="activa"] .ad-estacion__lote { display: inline-flex; }

.ad-marcas { display: grid; gap: 6px; margin: 8px 0 0 48px; }
.ad-marcas:empty { display: none; }

/* Dato en un medio */
.ad-marca {
    position: relative;
    display: grid;
    gap: 1px;
    min-width: 0;
    padding: 6px 9px 7px;
    border-radius: var(--radio-chico);
    background: var(--blanco);
    border: 1px solid var(--linea);
    line-height: 1.25;
    transition: opacity 260ms ease, border-color 220ms ease, background-color 220ms ease, box-shadow 220ms ease;
}
.ad-marca__medio {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 2px;
    font-size: .76rem;
    font-weight: 600;
    color: var(--tinta-3);
}
.ad-marca__medio .icono { width: 13px; height: 13px; }
.ad-marca__valor { font-size: .86rem; font-weight: 600; color: var(--tinta); font-variant-numeric: tabular-nums; }
.ad-marca__detalle { font-size: .77rem; color: var(--tinta-3); }
.ad-marca__detalle:empty { display: none; }
/* Problema en texto: toda marca en rojo dice qué está mal (rojo-tinta sobre
   rojo-piso, 7.2:1), con el triángulo de alerta */
.ad-marca__problema {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 1px;
    font-size: .77rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--rojo-tinta);
}
.ad-marca__problema .icono { width: 13px; height: 13px; stroke-width: 2.25; color: var(--rojo); }
.ad-marca__nota { display: flex; align-items: center; gap: 4px; margin-top: 3px; font-size: .76rem; font-weight: 600; color: var(--rojo-tinta); }
.ad-marca__nota .icono { width: 13px; height: 13px; color: var(--rojo); }

.ad-marca[data-error] { background: var(--rojo-piso); border-color: rgba(212, 32, 26, .4); }
.ad-marca[data-error] .ad-marca__valor { color: var(--rojo); }
.ad-marca[data-conflicto] { border-color: var(--rojo); }
.ad-marca[data-medio="sistema"] { border-color: rgba(212, 32, 26, .38); }

/* Reclamo: los datos del lote quedan de fondo; lo consultado resalta */
.ad[data-base="tenue"] .ad-marca:not([data-consultada]) { opacity: .42; }
.ad-marca[data-consultada] { border-color: var(--tinta); box-shadow: 0 0 0 1px var(--tinta), 0 6px 16px rgba(20, 24, 28, .08); }
.ad-marca[data-consultada="antes"] { box-shadow: 0 0 0 1px #9aa3ac; border-color: #9aa3ac; }
.ad-marca[data-alerta] { border-color: var(--rojo); box-shadow: 0 0 0 1px var(--rojo), 0 6px 16px rgba(212, 32, 26, .1); }
.ad-marca__lupa {
    position: absolute;
    top: -9px;
    right: -7px;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 99px;
    background: var(--tinta);
    color: #fff;
    box-shadow: 0 2px 6px rgba(20, 24, 28, .18);
}
.ad-marca[data-consultada="antes"] .ad-marca__lupa { background: #9aa3ac; }
.ad-marca__lupa .icono { width: 12px; height: 12px; stroke-width: 2.25; }

/* --------------------------------------------------------------------------
   Mapa en pantalla ancha: matriz de medios por estación
   -------------------------------------------------------------------------- */

@container ad (min-width: 640px) {
    .ad-mapa {
        display: grid;
        grid-template-columns: var(--ad-col-medio) repeat(5, minmax(0, 1fr));
        grid-template-rows: auto 34px repeat(5, minmax(48px, auto));
        column-gap: var(--ad-gap);
    }

    .ad-esquina {
        display: flex;
        grid-column: 1;
        grid-row: 1 / 3;
        align-items: flex-end;
        padding: 0 8px 8px 0;
        line-height: 1.3;
        font-size: .8rem;
        font-weight: 600;
        color: var(--tinta-3);
    }

    .ad-medios { display: grid; grid-column: 1; grid-row: 3 / 8; grid-template-rows: subgrid; }
    .ad-medio-fila {
        display: flex;
        align-items: center;
        gap: 8px;
        padding-right: 8px;
        font-size: .84rem;
        line-height: 1.25;
        color: var(--tinta-3);
        transition: color 220ms ease;
    }
    .ad-medio-fila .icono { width: 16px; height: 16px; color: #aab2ba; transition: color 220ms ease; }
    .ad-medio-fila[data-uso] { color: var(--tinta); font-weight: 600; }
    .ad-medio-fila[data-uso] .icono { color: var(--tinta-2); }
    .ad[data-vista="conectada"] .ad-medio-fila[data-medio="sistema"] { color: var(--rojo-tinta); font-weight: 600; }
    .ad[data-vista="conectada"] .ad-medio-fila[data-medio="sistema"] .icono { color: var(--rojo); }

    .ad-banda { display: block; grid-column: 1 / -1; border-top: 1px solid var(--linea-2); pointer-events: none; }

    .ad-estaciones {
        grid-column: 2 / -1;
        grid-row: 1 / -1;
        display: grid;
        grid-template-columns: subgrid;
        grid-template-rows: subgrid;
        position: relative;
        z-index: 1;
    }
    .ad-estacion { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; padding: 0; }
    .ad-estacion::before { display: none; }
    .ad-estacion__cabeza { grid-row: 1; flex-direction: column; gap: 6px; padding-bottom: 2px; text-align: center; }
    .ad-estacion__nombre { font-size: .86rem; }
    .ad-estacion__lote { display: none !important; }

    .ad-marcas { display: contents; }
    .ad-marca { grid-row: var(--fila); align-self: center; margin: 4px 0; }
    .ad-marca__medio {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    /* Carril con la ficha del lote */
    .ad-carril { display: block; grid-column: 2 / -1; grid-row: 2; position: relative; }
    .ad-carril::before {
        content: "";
        position: absolute;
        left: 10%;
        right: 10%;
        top: 50%;
        height: 1px;
        background: var(--linea);
    }
    .ad-carril__punto {
        position: absolute;
        top: 50%;
        width: 7px;
        height: 7px;
        margin: -3.5px 0 0 -3.5px;
        border-radius: 99px;
        background: var(--blanco);
        border: 1px solid #c9cfd5;
    }

    /* Línea de datos: une todo en Conectada */
    .ad-linea {
        display: block;
        grid-column: 2 / -1;
        grid-row: 7;
        align-self: center;
        height: 2px;
        border-radius: 2px;
        background: var(--rojo);
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform 600ms var(--ease-in-out);
    }
    .ad[data-vista="hoy"] .ad-linea { visibility: hidden; }

    .ad-sin-sistema {
        display: flex;
        grid-column: 2 / -1;
        grid-row: 7;
        align-items: center;
        justify-content: center;
        font-size: .8rem;
        color: var(--tinta-3);
    }
    .ad[data-vista="conectada"] .ad-sin-sistema { display: none; }
}

/* Ficha del lote */
.ad-ficha__riel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 20%;
    display: grid;
    place-items: center;
    transition: transform 600ms var(--ease-in-out);
}
.ad-ficha {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 10px 0 8px;
    border-radius: 99px;
    background: var(--tinta);
    color: #fff;
    font-size: .76rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(20, 24, 28, .18);
    transition: background-color 260ms ease, opacity 220ms ease;
}
.ad-ficha .icono { width: 14px; height: 14px; }
.ad-ficha__conectada { display: none; }
.ad[data-vista="conectada"] .ad-ficha { background: var(--rojo); box-shadow: 0 2px 8px rgba(212, 32, 26, .26); }
.ad[data-vista="conectada"] .ad-ficha__hoy { display: none; }
.ad[data-vista="conectada"] .ad-ficha__conectada { display: block; }
.ad[data-accion="reclamo"] .ad-ficha { opacity: 0; }

/* --------------------------------------------------------------------------
   Genealogía del lote (Conectada, reclamo)
   -------------------------------------------------------------------------- */

.ad-arbol[hidden] { display: none; }
.ad[data-arbol] .ad-estaciones { display: none; }

.ad-arbol { display: grid; gap: 10px; }
.ad-arbol__titulo { display: grid; gap: 1px; font-size: .9rem; line-height: 1.35; }
.ad-arbol__titulo b { font-family: var(--display); font-weight: 700; letter-spacing: -.012em; color: var(--tinta); }
.ad-arbol__titulo span { font-size: .8rem; color: var(--tinta-3); }
.ad-arbol__linea { display: none; }

.ad-arbol__nodos { position: relative; display: grid; gap: 8px; padding-left: 20px; }
.ad-arbol__nodos::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 18px;
    bottom: 18px;
    width: 2px;
    border-radius: 2px;
    background: var(--rojo);
}
.ad-nodo {
    position: relative;
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    column-gap: 8px;
    align-content: center;
    padding: 8px 10px;
    border-radius: var(--radio-btn);
    background: var(--blanco);
    border: 1px solid rgba(212, 32, 26, .38);
    line-height: 1.28;
}
.ad-nodo .icono { grid-row: 1 / 3; width: 16px; height: 16px; margin-top: 1px; color: var(--rojo); }
.ad-nodo__valor { font-size: .86rem; font-weight: 600; color: var(--tinta); font-variant-numeric: tabular-nums; }
.ad-nodo__detalle { font-size: .76rem; color: var(--tinta-3); }
.ad-nodo--rama { margin-left: 16px; }

@container ad (min-width: 640px) {
    .ad[data-arbol] .ad-estaciones { display: grid; }
    .ad-arbol {
        grid-column: 1 / -1;
        grid-row: 3 / 8;
        z-index: 2;
        grid-template-columns: subgrid;
        grid-template-rows: auto var(--ad-nodo) var(--ad-nodo);
        row-gap: 10px;
        align-content: center;
        background: var(--blanco);
    }
    .ad-arbol__titulo { grid-column: 1 / -1; grid-row: 1; }
    .ad-arbol__linea {
        display: block;
        grid-column: 1 / -1;
        grid-row: 2;
        align-self: center;
        height: 2px;
        margin-inline: 20px;
        border-radius: 2px;
        background: var(--rojo);
        transform-origin: left center;
    }
    .ad-arbol__nodos { display: contents; }
    .ad-arbol__nodos::before { display: none; }
    .ad-nodo {
        grid-column: var(--col);
        grid-row: var(--fila-arbol);
        z-index: 1;
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
        row-gap: 1px;
        height: var(--ad-nodo);
        padding: 9px 10px;
        overflow: hidden;
        margin: 0;
    }
    .ad-nodo .icono { grid-row: auto; margin: 0 0 5px; }
    .ad-nodo:not(:first-child) { margin-left: 8px; }
    .ad-nodo--rama { overflow: visible; }
    /* Rama al segundo pedido: baja desde la línea y entra por la izquierda */
    .ad-nodo--rama::before {
        content: "";
        position: absolute;
        left: -7px;
        bottom: 50%;
        width: 7px;
        height: calc(var(--ad-nodo) + 10px);
        border-left: 2px solid var(--rojo);
        border-bottom: 2px solid var(--rojo);
        border-bottom-left-radius: 8px;
    }
}

/* --------------------------------------------------------------------------
   Marcador: conteos que produce la simulación
   -------------------------------------------------------------------------- */

.ad-marcador {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--linea);
    border: 1px solid var(--linea);
    border-radius: 12px;
    overflow: hidden;
}
/* Cada celda ocupa tres filas en subgrid (nombre, número, aviso): los números
   quedan alineados aunque una celda lleve aviso debajo. */
.ad-marcador__celda {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 3px;
    padding: 10px 12px 11px;
    background: var(--nieve-2);
}
.ad-marcador__celda dt { align-self: start; }
.ad-marcador__celda dd { align-self: end; }
.ad-marcador__celda:last-child:nth-child(odd) { grid-column: 1 / -1; }
.ad-marcador dt { font-size: .78rem; line-height: 1.3; color: var(--tinta-2); }
.ad-marcador dd {
    font-family: var(--display);
    font-size: 1.32rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    color: var(--tinta);
    transition: color 220ms ease;
}
.ad-marcador__celda[data-rojo] dd { color: var(--rojo); }
/* Conteo que es un problema: ícono y texto debajo del número, no solo color */
.ad-marcador dd.ad-marcador__alerta {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--texto);
    font-size: .77rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
    color: var(--rojo-tinta);
    align-self: start;
}
.ad-marcador dd.ad-marcador__alerta[hidden] { display: none; }
.ad-marcador__alerta .icono { width: 14px; height: 14px; stroke-width: 2.25; color: var(--rojo); }

@container ad (min-width: 640px) {
    .ad-marcador { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
    .ad-marcador__celda:last-child:nth-child(odd) { grid-column: auto; }
}

/* --------------------------------------------------------------------------
   Bitácora
   -------------------------------------------------------------------------- */

.ad-bitacora { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.ad-bitacora__cabeza {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--linea-2);
}
.ad-bitacora__titulo { font-size: 1.02rem; letter-spacing: -.014em; }
.ad-bitacora__cuenta { font-size: .82rem; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.ad-bitacora__vacio { padding: 14px 16px; font-size: .9rem; color: var(--tinta-2); text-wrap: pretty; }
.ad-bitacora__vacio[hidden] { display: none; }
.ad-bitacora__vacio b { color: var(--tinta); font-weight: 600; }
.ad-bitacora__lista { flex: 1 1 auto; min-height: 0; padding: 0 16px; }
.ad-bitacora__lista:empty { display: none; }
.ad-bitacora__lista:focus-visible { outline-offset: -2px; border-radius: 0; }

.ad-evento { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; padding: 10px 0 11px; }
.ad-evento + .ad-evento { border-top: 1px solid var(--linea-2); }
.ad-evento__hora { padding-top: 2px; font-size: .78rem; font-weight: 600; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.ad-evento__marca {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 99px;
    background: var(--nieve);
    border: 1px solid var(--linea);
    color: var(--tinta-2);
}
.ad-evento__marca .icono { width: 13px; height: 13px; }
.ad-evento__marca--paso { margin-top: -3px; font-size: .76rem; font-weight: 700; color: var(--tinta); background: var(--blanco); border-color: #c9cfd5; }
.ad-evento--aviso .ad-evento__hora { padding-top: 0; }
.ad-evento--aviso .ad-evento__marca { background: var(--tinta); border-color: var(--tinta); color: #fff; }

.ad-evento__quien {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 8px;
    font-size: .88rem;
    line-height: 1.3;
}
.ad-evento__quien b { font-weight: 600; color: var(--tinta); }
.ad-medio {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px 2px 6px;
    border-radius: 99px;
    background: var(--nieve);
    border: 1px solid var(--linea);
    font-size: .74rem;
    font-weight: 600;
    color: var(--tinta-2);
    white-space: nowrap;
}
.ad-medio .icono { width: 13px; height: 13px; }
.ad-medio[data-medio="sistema"] { background: var(--rojo-piso); border-color: rgba(212, 32, 26, .3); color: var(--rojo-tinta); }
.ad-medio[data-medio="sistema"] .icono { color: var(--rojo); }

.ad-evento__texto { margin-top: 3px; font-size: .86rem; line-height: 1.42; color: var(--tinta-2); text-wrap: pretty; }
.ad-evento__texto em { font-style: normal; font-weight: 600; color: var(--rojo); }
.ad-nw { white-space: nowrap; }
.ad-evento__alerta {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 6px;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--rojo-tinta);
}
.ad-evento__alerta .icono { width: 15px; height: 15px; margin-top: 1px; color: var(--rojo); }
.ad-evento__persona { display: flex; align-items: flex-start; gap: 6px; margin-top: 5px; font-size: .8rem; line-height: 1.35; color: var(--tinta-3); }
.ad-evento__persona .icono { width: 14px; height: 14px; margin-top: 1px; }

/* Cierre: resultado y siguiente paso */
.ad-cierre {
    display: grid;
    gap: 10px;
    padding: 12px 16px 16px;
    border-top: 1px solid var(--linea);
    background: var(--nieve-2);
}
.ad-cierre[hidden] { display: none; }
.ad-cierre__resumen { font-size: .92rem; font-weight: 600; line-height: 1.4; color: var(--tinta); text-wrap: pretty; }
.ad-cierre__pregunta { margin-top: -6px; font-size: .86rem; color: var(--tinta-2); }
.ad-cierre .btn { justify-self: start; }

@container ad (min-width: 640px) and (max-width: 999px) {
    .ad-cierre { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 20px; }
    .ad-cierre__pregunta { grid-column: 1; margin-top: -8px; }
    .ad-cierre .btn { grid-column: 2; grid-row: 1 / 3; }
}

/* --------------------------------------------------------------------------
   Movimiento reducido: todo aparece en su lugar, sin desplazamientos
   -------------------------------------------------------------------------- */

.ad[data-reducido] *,
.ad[data-reducido] *::before,
.ad[data-reducido] *::after { transition: none !important; animation: none !important; }