/* ==========================================================================
   Panel de administración
   Reusa los tokens y el vidrio de styles.css; acá solo van los controles.
   ========================================================================== */

.admin{min-height:100dvh}

/* Cualquier regla de display le gana al atributo hidden, y .login usa grid.
   Sin esto la pantalla de ingreso no se va nunca al entrar al panel. */
[hidden]{display:none !important}

/* --- Ingreso -------------------------------------------------------------- */

.login{display:grid;place-items:center;min-height:100dvh;padding:var(--space-4)}
.login-caja{
  width:min(100%,380px);padding:var(--space-6);
  display:flex;flex-direction:column;gap:var(--space-2);
}
.login-logo{width:180px;margin:0 auto var(--space-4)}
.login-caja h1{
  margin:0 0 var(--space-4);text-align:center;
  font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-soft);
}
.login-caja .btn{margin-top:var(--space-4);justify-content:center}

/* --- Controles ------------------------------------------------------------ */

label{
  display:block;margin-bottom:var(--space-1);
  font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-soft);
}
label + label{margin-top:var(--space-4)}

input[type="text"],input[type="email"],input[type="url"],
input[type="password"],textarea{
  width:100%;padding:.6rem .8rem;
  font-family:var(--font);font-size:.95rem;color:var(--text);
  background:rgba(255,255,255,.7);
  border:1px solid var(--glass-edge);border-radius:var(--r-md);
  transition:border-color .2s var(--ease-out);
}
input:focus,textarea:focus{outline:none;border-color:var(--text)}
textarea{resize:vertical;line-height:1.5}

.ayuda{margin:var(--space-2) 0 0;font-size:.8rem;color:var(--text-soft)}

.error{
  margin:var(--space-3) 0 0;padding:var(--space-3);
  border:1px solid rgba(150,40,40,.3);border-radius:var(--r-md);
  background:rgba(190,60,60,.08);color:#8a2b2b;font-size:.85rem;
}

.enlace-boton{
  border:0;background:none;padding:0;cursor:pointer;
  font-family:var(--font);font-size:.82rem;color:var(--text-mut);
}
.enlace-boton:hover{color:var(--text)}

/* --- Bloques -------------------------------------------------------------- */

.panel{padding:var(--space-6) 0 140px;display:grid;gap:var(--space-4)}

.bloque{padding:var(--space-5)}
.bloque h2{
  margin:0 0 var(--space-4);
  font-size:.74rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-soft);
}
.bloque-cabeza{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-3);flex-wrap:wrap;
}
.bloque-cabeza h2{margin:0}

.campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-4)}
.campos label{margin-top:0}

/* --- Paquetes ------------------------------------------------------------- */

.lista-paquetes{display:grid;gap:var(--space-3);margin-top:var(--space-4)}

.paquete-fila{
  display:grid;grid-template-columns:120px 1fr;gap:var(--space-4);
  padding:var(--space-3);
  border:1px solid var(--glass-edge);border-radius:var(--r-md);
  background:rgba(255,255,255,.35);
}

.miniatura{display:flex;flex-direction:column;gap:var(--space-2)}
.miniatura img{
  width:120px;height:120px;object-fit:cover;
  border-radius:var(--r-md);background:rgba(0,0,0,.05);
}
.miniatura img[hidden]{display:none}

.subir{
  margin:0;text-align:center;cursor:pointer;
  padding:.35rem;border:1px dashed var(--hair);border-radius:var(--r-md);
  font-size:.6rem;letter-spacing:.1em;
}
.subir:hover{border-color:var(--text);color:var(--text)}

.paquete-campos{display:flex;flex-direction:column;gap:var(--space-2)}
.paquete-campos label{margin-top:0}

.paquete-acciones{
  display:flex;align-items:center;gap:var(--space-3);
  flex-wrap:wrap;margin-top:auto;
}
.check{
  display:flex;align-items:center;gap:.4rem;margin:0;
  text-transform:none;letter-spacing:.02em;font-size:.82rem;font-weight:400;
  color:var(--text-mut);cursor:pointer;
}
.check input{margin:0}

.mover,.borrar{
  padding:.3rem .7rem;cursor:pointer;
  font-family:var(--font);font-size:.8rem;color:var(--text-mut);
  background:rgba(255,255,255,.6);
  border:1px solid var(--glass-edge);border-radius:var(--r-md);
}
.mover:hover{color:var(--text);border-color:var(--text)}
.borrar{margin-left:auto}
.borrar:hover{color:#8a2b2b;border-color:rgba(150,40,40,.4)}

/* --- Barra de guardado ---------------------------------------------------- */

.barra-guardar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  padding:var(--space-3) 0;
  background:var(--glass-3);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border-top:1px solid var(--glass-edge);
}
.barra-guardar .contenedor{
  display:flex;align-items:center;justify-content:flex-end;gap:var(--space-4);
}

.estado{font-size:.85rem;color:var(--text-mut)}
.estado.ok{color:#1f6b45}
.estado.error{color:#8a2b2b}
.estado.pendiente{color:#8a5a2a}

@media (max-width:560px){
  .paquete-fila{grid-template-columns:1fr}
  .miniatura img{width:100%;height:180px}
  .barra-guardar .contenedor{justify-content:space-between}
}