:root{
  --azul:#1f4697;
  --azul-oscuro:#173b88;
  --azul-top:#163a7a;
  --azul-suave:#edf3ff;
  --azul-borde:#dbe5fb;
  --naranja:#f7a51a;
  --naranja-oscuro:#ef9800;
  --texto:#6b7aa3;
  --texto-fuerte:#29478f;
  --blanco:#ffffff;
  --fondo:#f5f8ff;
  --sombra:0 18px 45px rgba(31, 70, 151, 0.10);
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:"Segoe UI", Arial, sans-serif;
}

body{
  background:var(--fondo);
  color:var(--azul-oscuro);
  overflow-x:hidden;
  min-height:100vh;
  position:relative;
}

.hidden{
  display:none !important;
}

body.solo-login .topbar,
body.solo-login .navbar{
  display:none !important;
}

.shape{
  position:fixed;
  border-radius:50%;
  background:radial-gradient(circle, rgba(210,223,255,0.55), rgba(210,223,255,0.18));
  pointer-events:none;
  z-index:0;
  animation:flotar 8s ease-in-out infinite;
}

.shape-1{
  width:180px;
  height:180px;
  left:30px;
  top:110px;
}

.shape-2{
  width:120px;
  height:120px;
  left:48%;
  top:300px;
  animation-delay:1.5s;
}

.shape-3{
  width:220px;
  height:220px;
  right:50px;
  top:160px;
  animation-delay:3s;
}

.pantalla{
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:30px 18px;
  position:relative;
  z-index:2;
}

.panel-cliente{
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:34px 18px 50px;
  position:relative;
  z-index:2;
}

.mini-etiqueta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 18px;
  border-radius:999px;
  background:var(--azul-suave);
  border:1px solid #c6d8ff;
  color:#2d5ed0;
  font-size:0.95rem;
  font-weight:700;
  margin-bottom:22px;
}

.acceso-wrap{
  width:100%;
  max-width:560px;
  text-align:center;
}

.acceso-box{
  width:100%;
  max-width:560px;
  margin:0 auto;
  background:rgba(255,255,255,0.98);
  border:1px solid var(--azul-borde);
  border-radius:30px;
  box-shadow:var(--sombra);
  padding:38px 34px;
}

.icon-box{
  width:78px;
  height:78px;
  margin:0 auto 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#eef3ff;
  border-radius:24px;
  font-size:2rem;
}

.acceso-box h1{
  font-size:2.2rem;
  color:var(--azul-oscuro);
  font-weight:800;
  margin-bottom:12px;
}

.texto-acceso{
  color:var(--texto);
  font-size:1.08rem;
  line-height:1.7;
  margin-bottom:24px;
}

.campo-acceso{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}

input,
select{
  width:100%;
  padding:16px 18px;
  border-radius:20px;
  border:1px solid #cfdbf7;
  background:#fbfdff;
  font-size:1rem;
  color:var(--azul-oscuro);
  outline:none;
  transition:0.25s ease;
}

input::placeholder,
select{
  color:#93a3ca;
}

input:focus,
select:focus{
  border-color:#3f6df2;
  box-shadow:0 0 0 4px rgba(63,109,242,0.10);
}

.campo-acceso input{
  flex:1;
  min-width:230px;
  max-width:350px;
}

.btn-principal,
.btn-secundario{
  border:none;
  border-radius:18px;
  padding:15px 24px;
  font-size:1rem;
  font-weight:700;
  cursor:pointer;
  transition:0.25s ease;
  text-decoration:none;
  display:inline-flex;
  justify-content:center;
  align-items:center;
}

.btn-principal{
  background:linear-gradient(135deg, var(--naranja), #ffb52f);
  color:white;
  box-shadow:0 14px 30px rgba(247,165,26,0.25);
}

.btn-principal:hover{
  transform:translateY(-2px);
  background:linear-gradient(135deg, var(--naranja-oscuro), #ffaa17);
}

.btn-secundario{
  background:linear-gradient(135deg, #2f63f0, #4579ff);
  color:white;
  box-shadow:0 14px 30px rgba(47,99,240,0.18);
}

.btn-secundario:hover{
  transform:translateY(-2px);
}

.error{
  color:#cf2f2f;
  font-weight:700;
  min-height:22px;
  margin-top:14px;
}

.mensaje-box{
  width:100%;
  max-width:720px;
  margin:0 auto;
  background:rgba(255,255,255,0.98);
  border:1px solid var(--azul-borde);
  border-radius:34px;
  box-shadow:var(--sombra);
  text-align:center;
  padding:42px 34px;
}

.mensaje-box .icon-box{
  width:86px;
  height:86px;
  font-size:2.1rem;
  margin-bottom:22px;
}

.mensaje-box h2{
  font-size:2.35rem;
  font-weight:800;
  color:var(--azul-oscuro);
  margin-bottom:14px;
  line-height:1.2;
}

.mensaje-box p{
  max-width:540px;
  margin:0 auto;
  color:var(--texto);
  font-size:1.14rem;
  line-height:1.8;
}

.loader{
  width:58px;
  height:58px;
  margin:0 auto 24px;
  border-radius:50%;
  border:6px solid #dfe7ff;
  border-top:6px solid #3f6df2;
  animation:giro 1s linear infinite;
}

.panel-wrapper{
  width:100%;
  max-width:1080px;
  background:rgba(255,255,255,0.98);
  border:1px solid var(--azul-borde);
  border-radius:34px;
  box-shadow:var(--sombra);
  padding:30px;
}

.panel-header{
  margin-bottom:26px;
}

.panel-header h2{
  color:var(--azul-oscuro);
  font-size:2rem;
  font-weight:800;
  margin:6px 0 8px;
}

.panel-header p{
  color:var(--texto);
  font-size:1.07rem;
}

.formulario-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:16px;
  margin-bottom:26px;
}

.resumen-total{
  background:#f8fbff;
  border:1px solid #dfe8ff;
  border-radius:28px;
  text-align:center;
  padding:26px 18px;
  margin-bottom:24px;
}

.resumen-total span{
  display:block;
  color:var(--texto);
  font-size:1rem;
  margin-bottom:8px;
}

.resumen-total h3{
  color:var(--naranja);
  font-size:2.5rem;
  font-weight:800;
}

.acciones{
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:24px;
}

.lista-envios{
  display:grid;
  gap:14px;
}

.envio-card{
  background:#f8fbff;
  border:1px solid #dbe7ff;
  border-radius:22px;
  padding:18px;
  color:var(--azul-oscuro);
  line-height:1.7;
  box-shadow:0 8px 20px rgba(42,80,160,0.06);
}

.autocomplete-wrapper{
  position:relative;
  width:100%;
}

.sugerencias-box{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  width:100%;
  background:#ffffff;
  border:1px solid #dce6fb;
  border-radius:18px;
  box-shadow:0 18px 40px rgba(31,70,151,0.12);
  overflow:hidden;
  z-index:9999;
  max-height:260px;
  overflow-y:auto;
}

.sugerencia-item{
  padding:12px 16px;
  border-top:1px solid #eef3ff;
  cursor:pointer;
  background:#fff;
  transition:0.2s ease;
}

.sugerencia-item:first-child{
  border-top:none;
}

.sugerencia-item:hover{
  background:#f5f8ff;
}

.sugerencia-titulo{
  font-size:0.97rem;
  font-weight:700;
  color:var(--azul-oscuro);
  margin-bottom:3px;
}

.sugerencia-sub{
  font-size:0.84rem;
  color:var(--texto);
  line-height:1.45;
}

.oculto{
  display:none;
}

.anim-fade-up{
  animation:fadeUp 0.65s ease;
}

.anim-scale{
  animation:scaleIn 0.45s ease;
}

@keyframes fadeUp{
  from{
    opacity:0;
    transform:translateY(24px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes scaleIn{
  from{
    opacity:0;
    transform:scale(0.94);
  }
  to{
    opacity:1;
    transform:scale(1);
  }
}

@keyframes giro{
  to{
    transform:rotate(360deg);
  }
}

@keyframes flotar{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-14px); }
}

@media (max-width: 768px){
  .acceso-box{
    padding:30px 20px;
    border-radius:24px;
  }

  .acceso-box h1{
    font-size:1.85rem;
  }

  .mensaje-box{
    padding:30px 22px;
    border-radius:26px;
  }

  .mensaje-box h2{
    font-size:1.9rem;
  }

  .mensaje-box p{
    font-size:1.02rem;
  }

  .campo-acceso{
    flex-direction:column;
  }

  .campo-acceso input,
  .campo-acceso button{
    width:100%;
    max-width:none;
  }

  .formulario-grid{
    grid-template-columns:1fr;
  }

  .panel-wrapper{
    padding:22px 18px;
    border-radius:26px;
  }

  .panel-header h2{
    font-size:1.7rem;
  }

  .acciones{
    flex-direction:column;
  }

  .acciones button{
    width:100%;
  }
}
.input-group{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.input-group label{
  font-size:0.95rem;
  font-weight:700;
  color:var(--texto-fuerte);
  padding-left:4px;
}

.input-group.full{
  grid-column:1 / -1;
}