/* ====== BASE GLOBAL ====== */
body{
  background: linear-gradient(#e0a5ae, #f2bac3);
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
}

/* Área que capturamos para la imagen (incluye logo + formulario) */
#captura{
  background: linear-gradient(#e0a5ae, #f2bac3);
  padding: 20px;
  border-radius: 12px;
}

/* ====== HEADER / LOGO ====== */
.logo-header{
  text-align: center;
  margin: 10px 0 15px;
}
.logo-header img{
  width: 200px;   /* Ajusta si lo quieres más pequeño en desktop */
  height: auto;
}

/* ====== CONTENEDOR PRINCIPAL ====== */
.container{
  background-color: #fff3f6;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
  max-width: 600px;
  margin: auto;
}

/* Encabezado de texto (frase, dirección, teléfono) */
.encabezado p{
  margin: 2px 0;
  text-align: center;
  font-weight: 600;
}

/* Fecha + número de pedido (#001) */
.fecha-pedido{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 14px 0 8px;
}
#date{
  max-width: 280px;
  width: 100%;
  font-size: 16px;
  padding: 10px;
  text-align: center;
  border: 1px solid #b28b93;
  border-radius: 6px;
  box-sizing: border-box;
}
#numeroPedido{
  margin: 0;
  font-size: 20px;
  text-decoration: underline;
}

/* ====== FORMULARIO ====== */
form{ display: flex; flex-direction: column; }
label{ font-weight: bold; margin-top: 10px; }

input, select, textarea{
  padding: 10px;
  border: 2px solid #4b1a21;
  border-radius: 5px;
  margin-bottom: 10px;
  font-size: 14px;
  box-sizing: border-box;
}

button{
  background: #d63384;
  color: #fff;
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  transition: .3s;
  margin-top: 12px;
  font-size: 14px;
}
button:hover{
  background: #a7fe03;
  color: #000;
}

/* Políticas al pie */
.footer-right{
  font-size: 12px;
  margin-top: 15px;
  text-align: center;
}

/* ====== RESPONSIVE ====== */
@media (max-width: 768px){
  .container{ width: 95%; padding: 16px; box-sizing: border-box; }
  .logo-header img{ width: 220px; }
  .fecha-pedido{ flex-direction: column; gap: 10px; }
  input, select, textarea, label{ width: 100%; font-size: 16px; }
  button[type="submit"]{ width: 100%; padding: 15px; font-size: 18px; }
}

@media (max-width: 480px){
  .container{ width: 95%; padding: 14px; margin: auto; }
  .logo-header img{ width: 180px; }
  #numeroPedido{ font-size: 18px; }
  input[type="date"]{ max-width: 280px; font-size: 16px; padding: 8px; }
}