/* =============================================================================
   iFix · Campo de carga del CV (solo lo usa vacantes.html)
   -----------------------------------------------------------------------------
   Todo el formulario reutiliza las clases .q-* de style.css. Lo único que no
   existía es el selector de archivo, y va aparte para no cargar bytes de más
   en index.html ni en cotizacion.html.

   El <input type="file"> nativo no se puede estilar de forma consistente entre
   navegadores, así que se oculta (sin sacarlo del flujo de accesibilidad: sigue
   siendo enfocable y el <label> lo activa) y se dibuja la zona visible encima.
   ============================================================================= */

.q-file-zone {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px;
  padding: 26px 20px;
  text-align: center;
  background: var(--surface);
  border: 1.5px dashed var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--ease-fast), background var(--ease-fast), box-shadow var(--ease-fast);
}
.q-file-zone:hover { border-color: var(--primary-light); background: var(--pale); }

/* El input cubre la zona completa: así el clic y el arrastrar-soltar funcionan
   en toda la superficie, no solo sobre el texto. */
.q-file-input {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}

/* Foco por teclado: el input es invisible, así que el anillo lo pinta la zona. */
.q-file-input:focus-visible + .q-file-face,
.q-file-zone:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}

.q-file-face {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none;
}
.q-file-ico {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  font-size: 18px; color: var(--primary);
  background: var(--pale2); border-radius: 50%;
}
.q-file-title {
  font-family: 'IBM Plex Sans', sans-serif; font-weight: 600; font-size: 15px;
  color: var(--ink);
}
.q-file-hint { font-size: 13px; color: var(--muted); }

/* --- Estado: archivo seleccionado --- */
.q-file-zone.has-file {
  border-style: solid; border-color: var(--green);
  background: rgba(22, 163, 74, .06);
}
.q-file-zone.has-file .q-file-ico { color: var(--green); background: rgba(22, 163, 74, .14); }

/* --- Estado: archivo rechazado (no es PDF o pesa de más) --- */
.q-file-zone.has-error {
  border-style: solid; border-color: #DC2626;
  background: rgba(220, 38, 38, .05);
}
.q-file-zone.has-error .q-file-ico { color: #DC2626; background: rgba(220, 38, 38, .12); }

/* --- Arrastrar y soltar --- */
.q-file-zone.is-dragging {
  border-color: var(--primary); background: var(--pale);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}

/* --- Nombre del archivo elegido + botón para quitarlo --- */
.q-file-picked {
  display: none; align-items: center; gap: 10px;
  width: 100%; margin-top: 12px; padding: 11px 13px;
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  text-align: left;
}
.q-file-zone.has-file .q-file-picked { display: flex; }
.q-file-picked i { color: #DC2626; font-size: 17px; flex-shrink: 0; }
.q-file-picked-name {
  flex: 1; min-width: 0;
  font-size: 14px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.q-file-picked-size { font-size: 12.5px; color: var(--muted); flex-shrink: 0; }

.q-file-clear {
  position: relative; z-index: 2;   /* por encima del input que cubre la zona */
  display: grid; place-items: center;
  width: 26px; height: 26px; flex-shrink: 0;
  color: var(--muted); font-size: 13px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 50%;
  cursor: pointer; pointer-events: auto;
  transition: color var(--ease-fast), border-color var(--ease-fast), background var(--ease-fast);
}
.q-file-clear:hover { color: #DC2626; border-color: #DC2626; background: rgba(220, 38, 38, .07); }

@media (prefers-reduced-motion: reduce) {
  .q-file-zone, .q-file-clear { transition: none; }
}