/* Arrastrar y soltar fotos (2026-10-28) — ver js/megaphoto/arrastrar-fotos.js */

.arr-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 180px;
    margin: 10px 0 20px;
    padding: 24px 16px;
    border: 2px dashed #bbb;
    border-radius: 8px;
    color: #555;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}
.arr-vacio:hover { border-color: #111; background: #fafafa; }
.arr-vacio-txt b { display: block; font-size: 14px; color: #111; }
.arr-vacio--bloqueado { cursor: default; opacity: .6; }
.arr-vacio--bloqueado:hover { border-color: #bbb; background: none; }

/* Enmarcados y canvas: el recuadro ocupa el lugar de la vista previa */
.arr-vacio--enmarcados,
.arr-vacio--canvas { min-height: 460px; margin: 0 10px 20px; }
.arr-vacio--enmarcados .arr-vacio-txt b,
.arr-vacio--canvas .arr-vacio-txt b { font-size: 14px; }
.arr-vacio--canvas { align-self: stretch; width: auto; margin: 0 0 20px; }
#falsopreview.arr-sin-carrusel #carouselExampleIndicators { display: none; }

.arr-capa {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100000;
    padding: 24px;
    background: rgba(17, 17, 17, .55);
    pointer-events: none;
}
.arr-capa--visible { display: flex; align-items: center; justify-content: center; }
.arr-capa-caja {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border: 3px dashed #fff;
    border-radius: 14px;
}
.arr-capa-txt {
    max-width: 520px;
    padding: 18px 28px;
    border-radius: 10px;
    background: #fff;
    color: #111;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
}
.arr-capa--bloqueado .arr-capa-caja { border-color: rgba(255, 255, 255, .5); }
.arr-capa--bloqueado .arr-capa-txt { font-size: 17px; font-weight: 500; }

/* ---- Fila al lado del botón de cargar: Google Drive y "Arrastrá más" (30-oct-26) ---- */
/* copias: en la misma línea que el botón; enmarcados (columna angosta) y canvas (botón a todo el ancho): debajo.
   El alto lo copia del botón de la página (--arr-alto, lo pone arrastrar-fotos.js). */
.arr-botones { display: inline-flex; gap: 8px; margin-left: 8px; vertical-align: bottom; }
.arr-botones--enmarcados,
.arr-botones--canvas { display: flex; margin: 8px 0 0; }
.arr-botones--canvas > * { flex: 1 1 0; justify-content: center; }
.arr-botones > * { margin: 0 !important; } /* las páginas les ponen margen a los button */
.drv-btn,
.arr-mas {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    height: var(--arr-alto, 38px);
    padding: 0 16px;
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
}
.drv-btn { gap: 10px; border: 1px solid #bbb; background: #fff; color: #111; cursor: pointer; }
.drv-btn:hover { border-color: #111; }
/* No es un botón: solo recuerda que se puede seguir arrastrando (borde punteado como el recuadro) */
.arr-mas { border: 1px dashed #999; color: #555; font-weight: 600; cursor: default; }
.drv-logo { width: 20px; height: 18px; flex: none; }
/* tablet: el botón de la página se achica (29px) */
.arr-botones--chico .drv-btn,
.arr-botones--chico .arr-mas { padding: 0 10px; font-size: 12px; gap: 6px; }
.arr-botones--chico .drv-logo { width: 16px; height: 14px; }

/* Copias (31-oct-26): "Agregá imágenes", "Google Drive" y "Arrastrá más imágenes" del mismo ancho,
   en fila, achicándose con la pantalla. .arr-fila es el div del botón de la página (lo marca arrastrar-fotos.js). */
.arr-fila { display: flex; gap: 8px; left: 0; right: 0; }
.arr-fila .arr-botones { display: contents; }
.arr-fila > #btn-add-files,
.arr-fila > #botonQuitar,
.arr-fila .drv-btn,
.arr-fila .arr-mas {
    flex: 1 1 0;
    min-width: 0;
    max-width: 220px;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 8px;
    justify-content: center;
    font-size: 14px;
    text-align: center;
}
.arr-fila > #btn-add-files,
.arr-fila > #botonQuitar { /* enmarcados v3: "Cambiar la imagen" */
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    border: 1px solid #111;
    background: #fff;
    color: #111;
    letter-spacing: normal;
    text-transform: none;
    line-height: 1;
    white-space: nowrap;
}
.arr-fila .drv-btn { border-color: #111; gap: 8px; }
.arr-fila > #btn-add-files:hover,
.arr-fila > #botonQuitar:hover,
.arr-fila .drv-btn:hover { background: #f3f3f3; color: #111; }
.arr-fila .arr-mas { white-space: normal; line-height: 1.15; } /* si no entra en una línea, va en dos */
.arr-fila .drv-logo { width: 18px; height: 16px; }
/* desde 992 px va (o puede ir) "Arrastrá más imágenes": cada uno ocupa un tercio, así no saltan cuando aparece */
@media (min-width: 992px) {
    .arr-fila > #btn-add-files,
    .arr-fila > #botonQuitar,
    .arr-fila .drv-btn,
    .arr-fila .arr-mas { flex: 0 0 calc((100% - 16px) / 3); max-width: none; }
}

/* Canvas (31-oct-26): el botón de cargar blanco con borde negro y en minúsculas, como los otros
   (el texto lo corrige arrastrar-fotos.js; .arr-boton también lo pone él). */
#btn_upload.arr-boton { background: #fff; color: #111; border: 1px solid #111; text-transform: none; letter-spacing: normal; font-size: 14px; }
#btn_upload.arr-boton:hover { background: #f3f3f3; }
#btn_upload.arr-boton:disabled { background: #fff; color: #999; border-color: #ccc; }
.arr-botones--canvas .drv-btn { border-color: #111; }
.arr-botones--canvas .drv-btn, .arr-botones--canvas .arr-mas { border-radius: 3px; } /* como el botón de la página */
.arr-botones--canvas .drv-btn:hover { background: #f3f3f3; }
/* En pantallas táctiles el "hover" y el foco quedan pegados después de tocar: sin gris ni borde grueso */
@media (hover: none) {
    .drv-btn:hover, .arr-fila > #btn-add-files:hover, .arr-fila > #botonQuitar:hover, #btn_upload.arr-boton:hover { background: #fff !important; }
}
.drv-btn:focus:not(:focus-visible), .arr-fila > #btn-add-files:focus:not(:focus-visible), .arr-fila > #botonQuitar:focus:not(:focus-visible), #btn_upload.arr-boton:focus:not(:focus-visible) { outline: none; }

/* Presupuesto en modo lectura (presupuesto.js): sin botones para cargar */
html.presu-lectura .arr-botones, html.presu-lectura .drv-btn, html.presu-lectura .arr-vacio { display: none !important; }

/* ---- Cartel "Trayendo de Google Drive…" (drive-fotos.js) ---- */
.drv-espera {
    position: fixed;
    inset: 0;
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(17, 17, 17, .45);
}
.drv-espera-caja {
    width: 320px;
    max-width: calc(100% - 32px);
    padding: 22px 24px;
    border-radius: 10px;
    background: #fff;
    color: #111;
    text-align: center;
}
.drv-espera-caja .drv-logo { width: 34px; height: 30px; }
.drv-espera-txt { margin: 10px 0 14px; font-size: 16px; line-height: 1.4; }
.drv-espera-txt small { color: #777; font-size: 13px; }
.drv-espera-barra { height: 4px; border-radius: 2px; background: #eee; overflow: hidden; }
.drv-espera-barra span { display: block; height: 100%; width: 0; background: #111; transition: width .3s; }
/* Celular: "Cargando imágenes…" (lo baja el teléfono, no sabemos cuánto falta) */
.drv-espera--simple .drv-logo,
.drv-espera--simple .drv-espera-barra { display: none; }
.drv-espera--simple .drv-espera-txt { margin: 0; }