/*
 * Subida de fotos al album colaborativo.
 *
 * Se usa con una mano, de pie y con mala señal, casi siempre el mismo dia del
 * evento. Antes habia que abrir un modal y pelear con el selector nativo del
 * navegador ("Choose Files / No file chosen"); ahora las dos formas de elegir
 * foto -camara y galeria- estan a la vista y se tocan directo.
 *
 * El componente se inyecta dentro de 13 plantillas distintas, asi que todo su
 * color sale de variables propias con valor por defecto claro: la pagina que lo
 * hospeda solo redefine `--adbw-*` y no necesita pelear especificidad.
 */

.adbw {
    --adbw-surface: rgba(255, 255, 255, 0.82);
    --adbw-surface-soft: rgba(17, 24, 39, 0.04);
    --adbw-ink: #1f2937;
    --adbw-muted: #4b5563;
    --adbw-line: rgba(17, 24, 39, 0.14);
    --adbw-accent: #111827;
    --adbw-accent-ink: #ffffff;
    --adbw-ok: #166534;
    --adbw-error: #b91c1c;
    --adbw-radius: 16px;

    margin-top: 20px;
    padding: 18px;
    border: 1px solid var(--adbw-line);
    border-radius: var(--adbw-radius);
    background: var(--adbw-surface);
    color: var(--adbw-ink);
    text-align: left;
}

.adbw__intro {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 12px;
}

.adbw__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
    color: inherit;
}

/* Cuantas lleva ya esta persona: el limite se entiende sin leer la letra chica. */
.adbw__hechas {
    margin: 0;
    font-size: 0.78rem;
    color: var(--adbw-muted);
}

.adbw__hechas:empty {
    display: none;
}

.adbw__lead {
    margin: 6px 0 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--adbw-muted);
}

/*
 * Zona de arrastre: solo donde arrastrar existe. En un telefono no hay nada
 * que arrastrar y ocuparia la mitad de la pantalla para no hacer nada.
 */
.adbw__zona {
    display: none;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 132px;
    margin-top: clamp(14px, 2vw, 18px);
    padding: 22px 18px;
    border: 1.5px dashed var(--adbw-line);
    border-radius: 18px;
    background: var(--adbw-surface-soft);
    color: inherit;
    cursor: pointer;
    transition: border-color 0.28s ease, background 0.28s ease;
}

@media (pointer: fine) {
    .adbw__zona {
        display: flex;
    }
}

.adbw__zona svg {
    width: 28px;
    height: 28px;
}

.adbw__zona-titulo {
    font-size: 0.98rem;
    font-weight: 600;
}

.adbw__zona-pista {
    font-size: 0.78rem;
    color: var(--adbw-muted);
}

.adbw__zona--encima {
    border-color: var(--adbw-borde-vivo, currentColor);
    background: var(--adbw-surface);
}

/* Las dos maneras de dar una foto, ambas del tamaño de un pulgar. */
.adbw__pickers {
    display: grid;
    gap: 10px;
    margin: 16px 0 10px;
}

.adbw__pick {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 56px;
    padding: 14px 18px;
    border: 1px dashed var(--adbw-line);
    border-radius: calc(var(--adbw-radius) - 4px);
    background: var(--adbw-surface-soft);
    font-size: 0.98rem;
    font-weight: 600;
    color: inherit;
    cursor: pointer;
}

.adbw__pick svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.adbw__pick--principal {
    border-style: solid;
    background: var(--adbw-accent);
    color: var(--adbw-accent-ink);
}

/*
 * Sin camara detras, "Tomar foto" abriria otro explorador de archivos. Se
 * esconde el campo tambien, no solo su etiqueta: un input sin etiqueta visible
 * se queda en el arbol de accesibilidad como un control sin nombre.
 */
@media (pointer: fine) {
    .adbw__pick--camara,
    .adbw__file--camara {
        display: none;
    }
}

.adbw__file {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.adbw__file:focus-visible + .adbw__pick {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.adbw__hint {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--adbw-muted);
}

.adbw__tray[hidden] {
    display: none;
}

.adbw__thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 8px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.adbw__thumb {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid var(--adbw-line);
    aspect-ratio: 1;
}

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

/* Elegir de mas y no poder deshacer obligaba a cerrar y volver a empezar. */
.adbw__quitar {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(17, 24, 39, 0.72);
    color: #fff;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.adbw__acciones {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.adbw__btn {
    min-height: 52px;
    padding: 14px 18px;
    border: 1px solid transparent;
    border-radius: var(--radius-full, 999px);
    font-size: 0.98rem;
    font-weight: 700;
    cursor: pointer;
}

.adbw__btn--enviar {
    background: var(--adbw-accent);
    color: var(--adbw-accent-ink);
}

.adbw__btn--limpiar {
    background: transparent;
    border-color: var(--adbw-line);
    color: inherit;
    font-weight: 600;
}

.adbw__btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.adbw__progress {
    height: 8px;
    margin-top: 12px;
    border-radius: 999px;
    background: var(--adbw-surface-soft);
    overflow: hidden;
}

.adbw__progress[hidden] {
    display: none;
}

.adbw__bar {
    width: 0;
    height: 100%;
    background: var(--adbw-accent);
    transition: width 0.2s ease;
}

.adbw__msg {
    margin: 12px 0 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--adbw-muted);
}

.adbw__msg:empty {
    margin: 0;
}

.adbw__msg--error {
    color: var(--adbw-error);
}

/* El acuse de recibo se ve de reojo, con la foto todavia en la mano. */
.adbw__msg--ok {
    padding: 12px 16px;
    border: 1px solid var(--adbw-ok);
    border-radius: 14px;
    background: var(--adbw-surface-soft);
    color: var(--adbw-ok);
    font-weight: 600;
    animation: adbwSube 0.3s ease both;
}

@keyframes adbwSube {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* Cada archivo rechazado dice por que y que hacer, no desaparece en silencio. */
.adbw__rechazos {
    margin: 8px 0 0;
    padding-left: 18px;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--adbw-error);
}

.adbw__rechazos:empty {
    display: none;
}

@media (min-width: 560px) {
    .adbw {
        padding: 22px;
    }

    .adbw__pickers {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    .adbw__acciones {
        grid-template-columns: 1fr auto;
        align-items: center;
    }

    .adbw__btn--limpiar {
        order: -1;
        justify-self: start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .adbw__bar,
    .adbw__zona {
        transition: none;
    }

    .adbw__msg--ok {
        animation: none;
    }
}