/* ================================================================
   TALLER FLUIDO — patrón wizard de una columna.
   Estructura lineal: cargar → configurar → procesar → descargar.
   Barra sticky superior con CTA siempre visible.
   Se carga en cada página de herramienta (corte, compresor, etc).
   ================================================================ */

/* Override del body global (styles.css fuerza height:100vh + overflow:hidden).
   En el taller fluido el scroll es natural, como datos-fiscales. */
body.taller-fluido {
    height: auto;
    min-height: 100vh;
    overflow: auto;
    background-color: var(--bg-light);
    /* Variables que el JS rellena con la altura real de header y comando.
       Permite mantener el offset correcto en cualquier viewport. */
    --altura-header: 90px;
    --altura-comando: 90px;
}

/* HEADER STICKY (solo en taller fluido) — siempre visible al hacer scroll */
body.taller-fluido .landing-header {
    position: sticky;
    top: 0;
    z-index: 101;
}

/* ================================
   BARRA STICKY DE COMANDO
   ================================ */
.taller-comando {
    position: sticky;
    top: var(--altura-header);
    z-index: 100;
    background-color: var(--text-main);
    color: var(--bg-light);
    border-bottom: 2px solid var(--text-main);
    box-shadow: 0 4px 0 0 rgba(26,28,30,0.15);
}

.taller-comando__inner {
    max-width: 760px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1.5rem;
}

.taller-comando__info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0; /* Permite que el nombre se trunque */
}

.taller-comando__estado {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--accent-brand);
    letter-spacing: 1px;
}

.taller-comando__archivo {
    font-family: var(--font-ui);
    font-weight: 800;
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.taller-comando__datos {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: rgba(244, 244, 240, 0.7);
}

.taller-comando__cta {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.taller-comando__cta .cta-brutalista,
.taller-comando__cta .btn-descarga {
    margin: 0;
    padding: 0.7rem 1.25rem;
    font-size: 0.85rem;
    white-space: nowrap;
}

/* Botón cancelar dentro del comando */
.taller-comando .btn-cancelar-fluido {
    font-family: var(--font-ui);
    font-weight: 800;
    font-size: 0.85rem;
    background: #c0392b;
    color: var(--bg-light);
    border: 2px solid var(--bg-light);
    padding: 0.7rem 1.25rem;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ================================
   CONTENEDOR PRINCIPAL (una columna)
   ================================ */
.taller-fluido-contenedor {
    max-width: 760px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.taller-volver {
    background: none;
    border: none;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-faint);
    text-align: left;
    cursor: pointer;
    padding: 0;
    align-self: flex-start;
    transition: color 0.2s;
}

.taller-volver:hover {
    color: var(--accent-brand);
}

/* Cabecera de la herramienta (título + descripción + cuota + reset) */
.taller-cabecera {
    border-bottom: 2px solid var(--text-main);
    padding-bottom: 1.25rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
}

.taller-cabecera__titulos {
    flex: 1;
    min-width: 0;
}

.taller-cabecera h1 {
    font-weight: 800;
    font-size: 2.2rem;
    letter-spacing: -1px;
    line-height: 1;
}

.taller-cabecera p {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
}

/* Botón EMPEZAR DE 0 — vive en la cabecera, separado de los CTAs del proceso.
   Acción destructiva: nunca al lado de PROCESAR para evitar clicks accidentales. */
.taller-cabecera__reset {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-main);
    background: transparent;
    border: 2px solid var(--text-main);
    padding: 0.6rem 1rem;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.taller-cabecera__reset:hover {
    background-color: var(--accent-brand);
    color: var(--bg-light);
    border-color: var(--accent-brand);
}

.taller-cabecera__reset .reset-icono {
    font-size: 1rem;
    line-height: 1;
}

/* ================================
   BANDAS DE CONFIGURACIÓN
   ================================ */
.taller-banda {
    border: 2px solid var(--text-main);
    background-color: var(--color-blanco);
    box-shadow: var(--shadow-hard);
    padding: 1.75rem;
}

.taller-banda__titulo {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--accent-brand);
    margin-bottom: 0.25rem;
}

.taller-banda__nombre {
    font-family: var(--font-ui);
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--text-main);
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--ui-border);
    padding-bottom: 0.75rem;
}

.taller-banda__cuerpo {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* ================================
   ESTADOS DE BANDA (wizard)
   ================================ */
.taller-banda {
    position: relative;
    transition: opacity 0.3s ease, box-shadow 0.3s ease, border-color 0.2s ease;
    /* scroll-margin compensa header + comando para que el scroll automático
       no oculte el inicio de la banda detrás de las barras pegadas arriba. */
    scroll-margin-top: calc(var(--altura-header, 90px) + var(--altura-comando, 90px) + 24px);
}

/* Bloqueada: previo no confirmado */
.taller-banda[data-estado="bloqueada"] {
    opacity: 0.35;
    pointer-events: none;
    box-shadow: 4px 4px 0 0 var(--ui-border);
    border-color: var(--ui-border);
}

.taller-banda[data-estado="bloqueada"] .taller-banda__titulo {
    color: var(--text-faint);
}

/* Activa: turno actual del usuario */
.taller-banda[data-estado="activa"] {
    border-color: var(--accent-brand);
    box-shadow: 6px 6px 0 0 var(--accent-brand);
}

/* Completada: ya confirmado, contenido visible pero readonly */
.taller-banda[data-estado="completada"] {
    background-color: var(--bg-light);
    box-shadow: 4px 4px 0 0 var(--text-main);
}

.taller-banda[data-estado="completada"] .taller-banda__cuerpo {
    pointer-events: none;
    opacity: 0.65;
}

/* Badge de check en banda completada */
.taller-banda__check {
    display: none;
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--bg-light);
    background-color: var(--text-main);
    padding: 0.3rem 0.6rem;
    letter-spacing: 1px;
}

.taller-banda[data-estado="completada"] .taller-banda__check {
    display: inline-block;
}

/* Botón EDITAR (visible solo en banda completada) */
.taller-banda__editar {
    display: none;
    background: none;
    border: 2px solid var(--text-main);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.4rem 0.8rem;
    cursor: pointer;
    margin-top: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background-color: var(--color-blanco);
    pointer-events: auto;
    align-self: flex-start;
}

.taller-banda__editar:hover {
    background-color: var(--text-main);
    color: var(--bg-light);
}

.taller-banda[data-estado="completada"] .taller-banda__editar {
    display: inline-block;
}

/* Botón CONFIRMAR Y CONTINUAR (visible solo en banda activa) */
.taller-banda__confirmar {
    display: none;
    width: 100%;
    margin-top: 1.25rem;
    padding: 1rem 1.5rem;
    background-color: var(--accent-brand);
    color: var(--bg-light);
    border: 2px solid var(--text-main);
    box-shadow: var(--shadow-hard);
    font-family: var(--font-ui);
    font-weight: 800;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.taller-banda__confirmar:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 0 var(--text-main);
}

.taller-banda[data-estado="activa"] .taller-banda__confirmar {
    display: inline-block;
}

/* Resumen mostrado en banda completada (texto chico debajo del nombre) */
.taller-banda__resumen {
    display: none;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: -0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px dashed var(--ui-border);
}

.taller-banda[data-estado="completada"] .taller-banda__resumen {
    display: block;
}

/* En completada, ocultamos el cuerpo editable y mostramos solo el resumen */
.taller-banda[data-estado="completada"] .taller-banda__cuerpo {
    display: none;
}

/* ================================
   CONTROL DE BOTONES EN COMANDO
   ================================ */
/* CTA principal (PROCESAR / COMPRIMIR / etc) solo se ve cuando el wizard
   está completo (data-listo="true"). Cuando el motor le pone .oculto durante
   el proceso, sigue oculto. */
.taller-comando:not([data-listo="true"]) #btn-procesar,
.taller-comando:not([data-listo="true"]) #btn-comprimir {
    display: none !important;
}


/* ================================
   BANDA 1: ARCHIVO
   ================================ */
.taller-drop {
    border: 2px dashed var(--text-main);
    background-color: var(--bg-light);
    padding: 3rem 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

.taller-drop:hover, .taller-drop.dragover {
    background-color: var(--color-blanco);
    border-color: var(--accent-brand);
}

/* Tarjeta del archivo cargado (reemplaza al iframe) */
.taller-archivo {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 1.5rem;
    align-items: start;
}

.taller-archivo__thumbnail {
    background-color: var(--color-pdf-viewer);
    border: 2px solid var(--text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    min-height: 200px;
    box-shadow: 4px 4px 0px 0px var(--text-main);
}

.taller-archivo__thumbnail canvas {
    max-width: 100%;
    max-height: 180px;
    background-color: var(--color-blanco);
    display: block;
}

.taller-archivo__placeholder {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--bg-light);
    text-align: center;
    line-height: 1.6;
    letter-spacing: 0.5px;
}

.taller-archivo__metadatos {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.taller-archivo__nombre {
    font-weight: 800;
    font-size: 1.05rem;
    word-break: break-all;
    line-height: 1.3;
}

.taller-archivo__datos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 1rem;
    margin-top: 0.25rem;
}

.taller-archivo__datos > div {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.taller-archivo__datos strong {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-faint);
    font-weight: 700;
    letter-spacing: 0.5px;
}

.taller-archivo__datos span {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-main);
    font-weight: 700;
}

/* Botón cambiar archivo (link sutil bajo el nombre) */
.taller-archivo__cambiar {
    background: none;
    border: none;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--accent-brand);
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    align-self: flex-start;
    margin-top: 0.5rem;
}

.taller-archivo__cambiar:hover {
    color: var(--text-main);
}

/* ================================
   BANDA: ACCIONES FINALES (al pie)
   ================================ */
.taller-acciones-pie {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.taller-acciones-pie .cta-brutalista,
.taller-acciones-pie .btn-descarga {
    width: 100%;
    padding: 1.1rem 1.5rem;
    font-size: 1rem;
}

/* Iframe oculto: lo dejamos en DOM porque main.js lo referencia,
   pero NO se muestra. La preview real es el thumbnail PDF.js. */
.iframe-cristal-oculto {
    display: none !important;
}

/* Barra de progreso dentro del comando o pie */
.taller-progreso {
    width: 100%;
    background: var(--ui-border);
    height: 4px;
    margin-top: 0.5rem;
}

/* ================================
   TARJETAS DE MODO (Compresor)
   Apiladas verticalmente, título + detalle a la izquierda.
   Convive con .tarjeta-radio ya existente en app.css.
   ================================ */
.tarjetas-modo {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.tarjeta-modo {
    border: 2px solid var(--ui-border);
    padding: 1rem 1.25rem;
    background-color: var(--bg-light);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tarjeta-modo__titulo {
    font-family: var(--font-ui);
    font-weight: 800;
    font-size: 0.9rem;
    color: var(--text-main);
}

.tarjeta-modo__detalle {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.tarjeta-radio input:checked + .tarjeta-modo {
    border-color: var(--accent-brand);
    box-shadow: 4px 4px 0 0 var(--accent-brand);
    transform: translate(-2px, -2px);
}

.tarjeta-radio input:checked + .tarjeta-modo .tarjeta-modo__titulo {
    color: var(--accent-brand);
}

/* Separador entre modos automáticos y modo avanzado/destructivo */
.tarjetas-modo__separador {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-faint);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--ui-border);
}

/* Tarjeta EXTREMO: cabecera con título + badge a la derecha */
.tarjeta-modo__cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Badge "⚠ DESTRUCTIVO" en la tarjeta peligro */
.tarjeta-modo__badge {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--bg-light);
    background-color: var(--accent-brand);
    padding: 0.25rem 0.55rem;
    letter-spacing: 0.5px;
    white-space: nowrap;
    line-height: 1;
}

/* Tarjeta de modo destructivo en estado NO seleccionado:
   borde rojo punteado para señalar el peligro sin gritar. */
.tarjeta-modo--peligro {
    border-style: dashed;
    border-color: var(--accent-brand);
}

/* Al pasar el mouse sobre la tarjeta destructiva, se intensifica
   sutilmente para reforzar la decisión consciente. */
.tarjeta-radio:hover .tarjeta-modo--peligro {
    background-color: #FEECEB;
}

/* Cuando está seleccionada vuelve al estilo sólido como las otras
   (la selección ya indica que se confirma el modo). */
.tarjeta-radio input:checked + .tarjeta-modo--peligro {
    border-style: solid;
}

/* ================================
   BANDA PROCESO (Compresor)
   Aparece cuando se aprieta COMPRIMIR. Contiene terminal log,
   reporte de ahorro y comparador antes/después.
   No usa el sistema de data-estado (no se "completa" como las otras bandas).
   ================================ */
.taller-banda--proceso {
    border-color: var(--accent-brand);
    box-shadow: 6px 6px 0 0 var(--accent-brand);
}

.taller-banda--proceso .taller-banda__cuerpo {
    pointer-events: auto;
    opacity: 1;
    gap: 1rem;
}

/* Indicador grande de estado del proceso.
   Cambia de fase: activo (procesando) → completado.
   Comunica claramente "empezó" y "terminó" al usuario. */
.proceso-estado {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border: 2px solid var(--text-main);
    background-color: var(--bg-light);
}

.proceso-estado__indicador {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background-color: var(--accent-brand);
    border: 2px solid var(--text-main);
}

.proceso-estado__textos {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.proceso-estado__titulo {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: 1px;
}

.proceso-estado__detalle {
    font-family: var(--font-ui);
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Fase ACTIVO: el indicador rojo pulsa para mostrar que está trabajando. */
.proceso-estado[data-fase="activo"] .proceso-estado__indicador {
    animation: proceso-pulso 1.2s ease-in-out infinite;
}

.proceso-estado[data-fase="activo"] .proceso-estado__titulo {
    color: var(--accent-brand);
}

@keyframes proceso-pulso {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.35;
        transform: scale(0.85);
    }
}

/* Fase COMPLETADO: indicador verde fijo, sin animación. */
.proceso-estado[data-fase="completado"] {
    border-color: #2D8E3F;
    background-color: #EAF7EC;
}

.proceso-estado[data-fase="completado"] .proceso-estado__indicador {
    background-color: #2D8E3F;
    border-color: #2D8E3F;
    animation: none;
}

.proceso-estado[data-fase="completado"] .proceso-estado__titulo {
    color: #2D8E3F;
}

/* Fase ERROR: indicador rojo apagado, fondo rojizo. */
.proceso-estado[data-fase="error"] {
    border-color: var(--accent-brand);
    background-color: #FEECEB;
}

.proceso-estado[data-fase="error"] .proceso-estado__indicador {
    background-color: var(--accent-brand);
    border-color: var(--accent-brand);
    animation: none;
}

.proceso-estado[data-fase="error"] .proceso-estado__titulo {
    color: var(--accent-brand);
}

/* Aviso "preview no disponible" del compresor: obsoleto en patrón wizard.
   El thumbnail PDF.js ya se ve perfecto al cargar el archivo. Cuando
   termina la compresión, el motor cambia el texto a "usá descargar" —
   ese sí lo mostramos (lo destapa con :not([data-tipo="inicial"])). */
body.taller-fluido #mensaje-error-preview-compresor {
    display: none !important;
}

/* ================================
   AVISOS DE LA BANDA AJUSTE FINAL
   ================================ */
.aviso-modo-auto {
    border: 2px solid var(--text-main);
    background-color: var(--bg-light);
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.aviso-modo-auto__titulo {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: 1px;
}

.aviso-modo-auto__detalle {
    font-family: var(--font-ui);
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.aviso-extremo {
    padding: 0.85rem 1.1rem;
    border: 2px solid var(--accent-brand);
    background-color: #FEECEB;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--accent-brand);
    font-weight: 700;
    line-height: 1.5;
}

/* ================================
   COMPARADOR ANTES/DESPUÉS (Compresor)
   ================================ */
.comparador-fluido__cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    background-color: var(--text-main);
    color: var(--bg-light);
    padding: 0.6rem 1rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.5px;
}

.comparador-fluido__botones {
    display: flex;
    gap: 0.5rem;
}

.comparador-fluido__botones button {
    background: none;
    border: 1px solid var(--bg-light);
    color: var(--bg-light);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    padding: 0.35rem 0.85rem;
    cursor: pointer;
    font-weight: 700;
    opacity: 0.65;
    transition: opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.comparador-fluido__botones button.activo,
.comparador-fluido__botones button:hover {
    background-color: var(--accent-brand);
    border-color: var(--accent-brand);
    opacity: 1;
}

/* ================================
   RESPONSIVE TABLET (<=1023px)
   ================================ */
@media (max-width: 1023px) {
    .taller-comando__inner,
    .taller-fluido-contenedor {
        max-width: 100%;
    }
}

/* ================================
   RESPONSIVE MOBILE (<=767px)
   ================================ */
@media (max-width: 767px) {
    .taller-comando__inner {
        grid-template-columns: 1fr;
        gap: 0.75rem;
        padding: 0.85rem 1rem;
    }
    .taller-comando__cta {
        width: 100%;
    }
    .taller-comando__cta .cta-brutalista,
    .taller-comando__cta .btn-descarga,
    .taller-comando .btn-cancelar-fluido {
        flex: 1;
        font-size: 0.8rem;
        padding: 0.7rem 0.5rem;
    }
    .taller-fluido-contenedor {
        padding: 1.25rem 1rem 3rem;
        gap: 1rem;
    }
    .taller-cabecera h1 {
        font-size: 1.6rem;
    }
    /* En mobile el botón EMPEZAR DE 0 se compacta a solo ícono */
    .taller-cabecera__reset {
        padding: 0.6rem 0.7rem;
    }
    .taller-cabecera__reset .reset-texto {
        display: none;
    }
    .taller-cabecera__reset .reset-icono {
        font-size: 1.2rem;
    }
    .taller-banda {
        padding: 1.25rem;
    }
    /* Archivo: thumbnail arriba, datos abajo en mobile */
    .taller-archivo {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .taller-archivo__thumbnail {
        max-width: 200px;
        margin: 0 auto;
    }
    .taller-drop {
        padding: 2rem 1rem;
        min-height: 160px;
    }
}