/* Subidor propio (web/js/subidas.js) y visor de adjuntos (web/js/visor.js).
   Sustituyen a jquery.uploadfile y a fancybox, que arrastraban jQuery. */

/* ---------------- una sola caja para todo ---------------- */
.subidas { margin: .5rem 0 1rem; }

.subidas-zona {
    border: 2px dashed #c9c9c9;
    border-radius: 8px;
    background: #fafafa;
    padding: 1.75rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.subidas-zona:hover,
.subidas-zona:focus-visible { border-color: #f2849e; background: #fff; }
.subidas-zona-activa { border-color: #f2849e; background: #fff5f8; }
.subidas-zona:focus-visible { outline: 2px solid #f2849e; outline-offset: 2px; }

.subidas-titulo { font-weight: 600; color: #585858; margin: 0 0 .25rem; }
.subidas-ayuda { font-size: 13px; color: #6c7d8e; margin: 0; }
.subidas-entrada { display: none; }

/* ---------------- la lista de adjuntos ---------------- */
.subidas-lista { list-style: none; margin: .75rem 0 0; padding: 0; }

.subidas-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .6rem;
    border: 1px solid #e4e4e4;
    border-radius: 6px;
    margin-bottom: .4rem;
    background: #fff;
}
.subidas-item-ok { border-color: #cfe9dc; }
.subidas-item-error { border-color: #f0c2c2; background: #fff8f8; }

.subidas-icono { font-size: 20px; width: 34px; text-align: center; flex: 0 0 34px; }
.subidas-mini {
    width: 46px; height: 46px; object-fit: cover;
    border-radius: 4px; border: 1px solid #e4e4e4; flex: 0 0 46px;
}
.subidas-texto { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.subidas-nombre {
    font-size: 14px; color: #585858;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.subidas-meta { font-size: 12px; color: #6c7d8e; }
.subidas-item-error .subidas-meta { color: #b33; }

/* Vista previa: la miniatura (o el icono del tipo) y el nombre abren el visor.
   A 46 px no se distingue una matrícula ni un vertido, y de un vídeo o un PDF no
   había forma de ver el contenido sin guardar el reporte primero. */
.subidas-ver { display: flex; flex: 0 0 auto; cursor: zoom-in; text-decoration: none; }
.subidas-ver:focus-visible { outline: 2px solid #f2849e; outline-offset: 2px; border-radius: 4px; }

.subidas-nombre-ver { cursor: zoom-in; }
.subidas-nombre-ver:hover { text-decoration: underline; }
.subidas-nombre-ver:focus-visible { outline: 2px solid #f2849e; outline-offset: 1px; }

.subidas-barra {
    flex: 0 0 110px; height: 6px;
    background: #eee; border-radius: 3px; overflow: hidden;
}
.subidas-progreso { height: 100%; width: 0; background: #f2849e; transition: width .15s; }

.subidas-quitar {
    flex: 0 0 auto;
    border: 1px solid #e4e4e4; background: #fff;
    color: #b33; font-size: 12px;
    border-radius: 4px; padding: .2rem .55rem; cursor: pointer;
}
.subidas-quitar:hover { background: #fff0f0; border-color: #f0c2c2; }
.subidas-quitar:disabled { opacity: .5; cursor: progress; }

.subidas-avisos { margin-top: .5rem; }
.subidas-aviso {
    font-size: 13px; padding: .45rem .6rem;
    border-radius: 4px; margin-bottom: .3rem;
}
.subidas-aviso-error { background: #fff0f0; color: #a33; border: 1px solid #f0c2c2; }
.subidas-aviso-ok { background: #eefaf3; color: #1b7d55; border: 1px solid #cfe9dc; }

/* ---------------- visor ---------------- */
body.visor-abierto { overflow: hidden; }

.visor {
    position: fixed; inset: 0; z-index: 1080;
    background: rgba(20, 20, 24, .92);
    display: flex; align-items: center; justify-content: center;
    padding: 3.5rem 1rem 3rem;
}
.visor[hidden] { display: none; }

.visor-contenido {
    max-width: 92vw; max-height: 82vh;
    display: flex; flex-direction: column; align-items: center; gap: .75rem;
}
.visor-contenido img,
.visor-contenido video { max-width: 92vw; max-height: 78vh; border-radius: 4px; }
.visor-contenido iframe {
    width: min(90vw, 900px); height: 78vh;
    border: 0; background: #fff; border-radius: 4px;
}
.visor-aparte { color: #fff; font-size: 14px; text-decoration: underline; }

.visor-cerrar {
    position: absolute; top: .75rem; right: 1rem;
    background: none; border: 0; color: #fff;
    font-size: 34px; line-height: 1; cursor: pointer; padding: .25rem .5rem;
}
.visor-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(0,0,0,.35); border: 0; color: #fff;
    font-size: 34px; line-height: 1; cursor: pointer;
    padding: .5rem .8rem; border-radius: 4px;
}
.visor-anterior { left: .75rem; }
.visor-siguiente { right: .75rem; }
.visor-nav:hover { background: rgba(0,0,0,.6); }
.visor-cerrar:focus-visible,
.visor-nav:focus-visible { outline: 2px solid #f2849e; }

.visor-pie {
    position: absolute; bottom: .9rem; left: 0; right: 0;
    text-align: center; color: #ddd; font-size: 13px; padding: 0 1rem;
}

@media (max-width: 576px) {
    .subidas-barra { display: none; }
    .visor-contenido iframe { width: 94vw; height: 70vh; }
}