/* 1. Reset y Estructura Base */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: black;
    color: #bfbfbf;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    align-items: center; 
    padding-top: 50px;
}

#cabecera {
    margin-bottom: 40px;
    width: 600px;
}

/* Corrección para que el logo no rompa la caja */
#cabecera img {
    max-width: 100%;
    height: auto;
}

#caja {
    width: 600px;
    padding: 30px;
    border: 1px dashed #e0e0e0;
    background-color: #000;
}

/* 2. Elementos del Formulario */
.campo {
    display: flex;
    flex-direction: column;
    margin-bottom: 5px; /* Ajustado para que el label no se aleje de la caja */
}

.campo label {
    margin-bottom: 8px;
    font-weight: bold;
    color: #fff;
}

/* 3. Las Cajas (Email y URL de descarga) */
/* Unificamos aquí para que midan exactamente lo mismo */
.input-email {
    display: block;
    width: 100% !important;
    height: 40px;      /* Altura idéntica verificada */
    padding: 0 10px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    background-color: white;
    color: black;
    font-family: Helvetica, Arial, Sans-Serif;
    font-size: 13px;
    margin-top: 5px;
}

/* Separación específica para la caja de email antes de 'Archivo:' */
#email.input-email {
    margin-bottom: 20px; 
}

/* Estilo para la URL de descarga (solo lectura) */
input[readonly].input-email {
    background-color: #f4f4f4;
    cursor: text;
    font-family: monospace;
    margin-bottom: 25px;
}

/* 4. Selector de Archivo y Botón Enviar */
.contenedor-archivo {
    display: block;
    margin-top: 5px;
    margin-bottom: 35px;
}

.acciones {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.boton-enviar {
    /* Dimensiones y Espaciado */
    display: inline-block;
    padding: 12px 50px;
    height: 40px;            /* Forzamos la misma altura */
    line-height: 16px;       /* Alineación vertical del texto */
    
    /* Tipografía (Copiada de tu body) */
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;         /* Tamaño idéntico al index */
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 0.5px;
    
    /* Colores Originales */
    background-color: #eee;
    color: #000;
    border: none;
    
    /* Otros */
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s;
    border-radius: 0;        /* Mantener esquinas rectas */
}

.boton-enviar:disabled { 
	background-color: #444 !important; 
	color: #888 !important; 
	cursor: not-allowed; 
}

/* El efecto que quieres: al pasar el ratón se vuelve VERDE */
.boton-enviar:hover {
    background-color: #5cb85c; /* El verde que me has pedido */
    color: white;              /* Texto blanco */
}

/* Para que el enlace parezca un botón en la página de error. Se utiliza en descarga.php*/
a.boton-enviar:hover {
    background-color: #5cb85c;
    color: white;
}

/* Contenedor para alinear input y botón */
.contenedor-copiar {
    display: flex;
    gap: 10px; /* Espacio entre la caja y el botón */
    width: 100%;
    margin-bottom: 25px;
}

/* Ajustamos el input para que no empuje al botón fuera de la caja */
.contenedor-copiar .input-email {
    flex-grow: 1; /* El input ocupa todo el espacio que sobre */
    margin-top: 0;
    margin-bottom: 0;
}

/* Estilo del botón de copiar */
.boton-copiar {
    height: 40px; /* Misma altura que definimos para la caja */
    padding: 0 20px;
    background-color: #eee;
    border: 1px solid #ccc;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s;
}

.boton-copiar:hover {
    background-color: #ddd;
}

 /* Estilos Barra de Progreso */
	/* Contenedor de la barra (el fondo gris) */
	#progreso-contenedor {
		display: none; 
		width: 100%; 
		background-color: #333; 
		height: 30px; 
		margin-top: 25px; 
		border-radius: 4px; 
		overflow: hidden; 
		border: 1px solid #444; 
		position: relative; /* Necesario para centrar el texto */
	}
	/* La barra que se llena (verde) */
	#barra-progreso {
		width: 0%;
		height: 100%;
		background-color: #5cb85c;
		transition: width 0.1s;
		
		display: flex; 
		align-items: center; 
		justify-content: center; 
	}

	/* El texto centrado (Capa superior) */
	#porcentaje-texto { 
		position: absolute; 
		width: 100%; 
		height: 100%; 
		top: 0; 
		left: 0; 
		display: flex; 
		align-items: center; 
		justify-content: center; 
		color: white; 
		font-weight: bold; 
		font-size: 13px; 
		pointer-events: none; /* Para que no interfiera con clics */
		text-shadow: 1px 1px 2px rgba(0,0,0,0.5); /* Sombra para que se lea bien sobre el verde y el gris */
	}

/* 5. Validaciones y Mensajes */
.input-email:focus {
    outline: none;
}

.input-email:invalid:not(:placeholder-shown) {
    border: 2px solid #ff4444 !important;
    background-color: #fff0f0;
}

.input-email:valid:not(:placeholder-shown) {
    border: 2px solid #5cb85c !important;
    background-color: #f0fff0;
}

.rojo_b {
    color: #ff4444;
    font-weight: bold;
    display: block;
    margin-top: 20px;
    line-height: 1.5;
}

/* Estilos para el Drag & Drop */
.campo-archivo {
    border: 2px dashed #555;
    padding: 40px 20px;
    text-align: center;
    border-radius: 8px;
    transition: all 0.3s ease;
    background: rgba(255,255,255,0.05);
    cursor: pointer;
    margin-top: 10px;
}

.campo-archivo.dragover {
    border-color: #5cb85c;
    background: rgba(92, 184, 92, 0.1);
    transform: scale(1.01);
}

#nombre-archivo-seleccionado {
    display: block;
    margin-top: 15px;
    color: #5cb85c;
    font-weight: bold;
    word-break: break-all;
}

.instrucciones-drag { 
	font-size: 14px;
	color: #aaa; 
}