/* subir-imagen.css — zona para subir una imagen, compartida por todo Acomer.
 *
 * Reemplaza al <input type="file"> nativo, que es el control más feo y menos consistente del
 * navegador: en cada sistema dice otra cosa ("Seleccionar archivo", "Choose File", "Examinar…"),
 * en otro idioma y con otro aspecto, y no se puede estilizar.
 *
 * Está en un archivo compartido y no repetido en cada página a propósito: se usa en nueve
 * pantallas distintas (crear plato, editar plato, logo al registrarse, logo del perfil, QR de
 * pago, anuncios…). Copiar el mismo CSS en las nueve garantiza que en seis meses tres de ellas se
 * vean distintas.
 *
 * Los colores usan var(--primary) con un valor de reserva, porque algunas de esas páginas definen
 * esa variable y otras no.
 */

.zona-imagen {
    border: 2px dashed #CBB89A;
    border-radius: 14px;
    background: #FDFAF5;
    padding: 20px;
    text-align: center;
    transition: border-color .2s, background .2s;
    box-sizing: border-box;
}
.zona-imagen.arrastrando {
    border-color: var(--primary, #B14B27);
    background: #FFF3EC;
}

/* El input real se esconde pero SIGUE ahí: es el que envía el archivo con el formulario. La
   <label> de abajo es la que se ve y, al pulsarla, abre el selector — comportamiento nativo del
   navegador, sin JavaScript de por medio. */
.zona-imagen input[type="file"] { display: none; }

.btn-subir-imagen {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    background: var(--primary, #B14B27);
    color: #fff;
    border: none;
    padding: 12px 22px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 15px;
    font-family: inherit;
    line-height: 1;
    box-shadow: 0 4px 10px rgba(177, 75, 39, 0.25);
    transition: background .2s, transform .15s;
}
.btn-subir-imagen:hover { background: #8C3B1E; }
.btn-subir-imagen:active { transform: scale(.98); }
.btn-subir-imagen svg { width: 20px; height: 20px; flex: 0 0 20px; }

.texto-zona-imagen { font-size: 13px; color: #7F7365; margin-top: 12px; line-height: 1.45; }

.nombre-archivo-imagen {
    font-size: 13.5px;
    color: #2A2018;
    font-weight: 700;
    margin-top: 12px;
    word-break: break-all;
}

/* Vista previa de la imagen recién elegida (todavía sin subir). */
.previsualizacion-imagen {
    max-width: 190px;
    border-radius: 12px;
    margin: 14px auto 0;
    display: block;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}

/* La imagen que ya está guardada, cuando la pantalla la muestra para comparar. */
.imagen-actual {
    max-width: 130px;
    border-radius: 10px;
    display: block;
    margin: 0 auto 14px;
    border: 1px solid #EDE1CD;
}


/* ============================================================================================
 * VARIANTE COMPACTA — para pantallas que piden VARIOS archivos seguidos
 * ============================================================================================
 *
 * La zona normal está pensada para UN archivo protagonista (el logo, la foto del plato): caja
 * grande, botón naranja sólido, vista previa amplia. Repetida tres veces seguidas -- cédula, RUT
 * y cámara de comercio -- deja de ayudar: tres botones naranjas idénticos apilados compiten entre
 * sí, y en un celular el paso se vuelve un scroll interminable.
 *
 * Esta variante mantiene lo que importa (arrastrar y soltar, el nombre del archivo, la vista
 * previa, y sobre todo NO enseñar el <input type="file"> nativo) y baja el volumen: botón de
 * contorno en vez de sólido, alineación a la izquierda y previa pequeña.
 */
.zona-imagen.compacta {
    padding: 12px 14px;
    border-radius: 12px;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Contorno, no relleno. El naranja sólido es la acción principal de la pantalla, y aquí la acción
   principal es el botón de "Siguiente": tres rellenos naranjas se lo comerían. */
.zona-imagen.compacta .btn-subir-imagen {
    padding: 9px 16px;
    font-size: 13.5px;
    background: #fff;
    color: var(--primary, #B14B27);
    border: 1.5px solid var(--primary, #B14B27);
    box-shadow: none;
    flex: 0 0 auto;
}
.zona-imagen.compacta .btn-subir-imagen:hover { background: #FFF3EC; color: var(--primary, #B14B27); }
.zona-imagen.compacta .btn-subir-imagen svg { width: 17px; height: 17px; flex: 0 0 17px; }

.zona-imagen.compacta .texto-zona-imagen { margin: 0; flex: 1; min-width: 130px; font-size: 12.5px; }
.zona-imagen.compacta .nombre-archivo-imagen { margin: 0; flex: 1; min-width: 130px; font-size: 13px; }
.zona-imagen.compacta .previsualizacion-imagen {
    max-width: 54px; max-height: 54px; margin: 0; object-fit: cover;
    box-shadow: none; border: 1px solid #EDE1CD; flex: 0 0 auto;
}

/* Confirmación de que el archivo quedó puesto. En un paso con tres adjuntos, el error fácil es
   creer que ya se subieron los tres cuando falta uno: el verde se ve de un vistazo, sin leer
   nombre por nombre.
   Va con .compacta a propósito y no suelto: la clase la pone el script en TODAS las zonas del
   sitio, y teñir de verde el logo o la foto del plato es un cambio que nadie pidió. */
.zona-imagen.compacta.con-archivo {
    border-style: solid;
    border-color: #A5D6A7;
    background: #F4FBF5;
}
.zona-imagen.compacta.con-archivo .nombre-archivo-imagen { color: #2e7d32; }