/* Reseteo global */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  background: #fff;
}

/* Cabecera fija con logo */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 64px;
  background: transparent;
  display: flex;
  align-items: center;
  padding-left: 32px;
  z-index: 1000;
  box-sizing: border-box;
}
.logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  user-select: none;
}

/* Layout principal en tres bloques */
.main-layout {
  display: grid;
  grid-template-columns: 260px minmax(420px, 820px) 260px;
  width: 100vw;          /* <--- ahora 100vw */
  min-height: 100vh;
  margin: 0;
  padding: 0;
  margin-top: 64px;
  background: #fff;
  box-sizing: border-box;
  overflow-x: hidden;    /* <--- agrega esta línea */
}


/* Bloques laterales */
.sidebar {
  background: #f5faff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 10px;
  min-width: 160px;
  max-width: 260px;
  height: 100vh;
  box-shadow: 0 2px 12px rgba(30,42,79,0.05);
  border-radius: 20px;
  margin: 0;
}

.right-sidebar {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* Bloque central */
.central-content {
  background: #fff;
  max-width: 820px;
  width: 100%;
  margin: 32px 0;
  padding: 42px 0;
  border-radius: 20px;
  box-shadow: 0 2px 16px 0 rgba(60,80,180,0.05), 0 0.5px 2px 0 rgba(0,0,0,0.01);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 80vh;
}

/* Inputs y formulario */
.input-ancho80 {
  width: 100%;
  max-width: 510px;
  min-width: 220px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.form-central-80 {
  width: 100%;
  max-width: 510px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

/* Responsive para pantallas pequeñas */
@media (max-width: 1050px) {
  .main-layout {
    grid-template-columns: 1fr;
  }
  .sidebar {
    display: none !important;
  }
  .central-content {
    max-width: 98vw;
    margin: 24px auto;
    padding: 22px 2vw;
  }
}

.page-title {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 28px;
  letter-spacing: 0.01em;
  color: #183153;
  line-height: 1.14;
  margin-left: auto;      /* <-- agrega esto */
  margin-right: auto;     /* <-- agrega esto */
}

.label-main {
  font-size: 1.3rem;
  font-weight: 700;
  color: #1976d2;
  margin-bottom: 4px;
  width: 100%;         /* 100% del input */
  text-align: left;
}

.input-main.input-ancho80 {
  width: 100%;
  max-width: 510px;
  min-width: 220px;
  margin: 0;
  display: block;
}

.input-main {
  width: 100%;
  padding: 16px 18px;
  border-radius: 2rem;
  border: 1.5px solid #bbb;
  font-size: 1.13rem;
  outline: none;
  transition: border 0.2s, box-shadow 0.2s;
  background: #fafcff;
  box-shadow: 0 1.5px 8px 0 rgba(50,80,180,0.05);
}

.input-main:focus {
  border: 2px solid #1976d2;
  box-shadow: 0 4px 12px 0 rgba(30,118,210,0.07);
}

.input-main::placeholder {
  color: #adb5bd;
  font-size: 1.08rem;
  opacity: 1;
}

.sugerencia {
  padding: 12px 20px;
  font-size: 1rem;
  color: #222;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
  background: #fff;
}
.sugerencia:hover,
.sugerencia.active {
  background: #e3f0ff;
  color: #1976d2;
}

.input-fecha-wrapper {
  width: 100%;
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;    /* Centra horizontalmente el bloque */
  position: relative;
}


.input-wrap {
  width: 80%; /* <-- input para el ancho de ciudad */
  max-width: 510px;
  min-width: 220px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;  /* <-- alineación a la izquierda para el label */
  position: relative;
}

.sugerencias-box {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  background: #fff;
  border: 1.5px solid #c4d0e1;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(30,60,120,0.05);
  max-height: 210px;
  overflow-y: auto;
  z-index: 200;
  padding: 4px 0;
  font-size: 1rem;
  display: none;
  margin: 0;
  box-sizing: border-box;
}

#inputFecha.input-main.input-ancho80 {
  width: 80% !important;
  max-width: 510px !important;
  min-width: 220px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
  box-sizing: border-box;
}

.input-fecha-wrapper > .label-main {
  width: 80%;
  max-width: 510px;
  min-width: 220px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  text-align: left;
}

.litepicker {
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.btn-main {
  background: linear-gradient(90deg, #1976d2 0%, #48b5fa 100%);
  color: #fff;
  font-size: 1.15rem;
  font-weight: 600;
  padding: 12px 0;
  border: none;
  border-radius: 1.8rem;
  width: 100%;
  max-width: 320px;
  margin: 18px auto 0 auto;
  box-shadow: 0 2px 12px 0 rgba(30,100,200,0.08);
  cursor: pointer;
  transition: background 0.22s, box-shadow 0.22s, transform 0.10s;
  display: block;
  outline: none;
  letter-spacing: 0.03em;
}

.btn-main:hover {
  background: linear-gradient(90deg, #1560a9 0%, #27a1e0 100%);
  box-shadow: 0 6px 24px 0 rgba(30,118,210,0.09);
  transform: translateY(-1px) scale(1.035);
}

.btn-main.input-ancho80 {
  width: 80% !important;
  max-width: 510px;
  min-width: 220px;
  margin-left: auto;
  margin-right: auto;
  display: block;         /* ¡Esto es la clave para que use el ancho! */
  box-sizing: border-box;
}

#ad-block {
  margin: 32px auto 0 auto;
  width: 80%;
  max-width: 510px;
  min-width: 220px;
  min-height: 54px;
  background: #f8fafc;
  border: 1.5px dashed #48b5fa;
  border-radius: 15px;
  color: #1976d2;
  font-size: 1.18rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px 0 rgba(30, 118, 210, 0.07);
}

.banner-lateral {
  position: sticky;
  top: 40px; /* Puedes ajustar este valor si tu header es más alto o más bajo */
  /* Ajusta el ancho si lo necesitas: */
  width: 140px;
  /* El resto de tus estilos visuales aquí, por ejemplo: */
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

#result-block,
#clima-recomendacion {
  width: 80%;
  max-width: 510px;
  min-width: 220px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  box-sizing: border-box;
}


.result-warning {
  width: 100%;
  max-width: 510px;
  min-width: 220px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  box-sizing: border-box;
  margin-top: 20px;
  color: #ff6600;     /* <-- AGREGAR ESTA LÍNEA */
  font-weight: bold;  /* Opcional: hace que destaque más */
}

.result-block-center {
  width: 100%;
  max-width: 510px;
  min-width: 220px;
  margin: 0 auto 18px auto;
  display: block;
  text-align: left;
}

.result-block-center,
.result-warning,
#result-block,
#clima-recomendacion {
  padding-left: 0;
  padding-right: 0;
}


.reco-card {
  display: flex;
  align-items: flex-start;
  margin-top: 18px;
  width: 100%;
  max-width: 510px;
  margin-left: auto;
  margin-right: auto;
}

.reco-icon {
  flex: 0 0 24px;        /* ícono ocupa 24px de ancho fijo */
  width: 24px;
  margin-right: 6px;     /* espacio entre ícono y texto */
  font-size: 1.2rem;
  line-height: 1.4;
}

.reco-text {
  flex: 1;
  display: block;
  text-align: left;
  font-size: 1.05rem;
  line-height: 1.45;
  color: #223355;
}

#cookie-banner {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
}

@media (max-width: 600px) {
  #cookie-banner {
    font-size: 0.95rem;
    padding: 11px 2vw 10px 2vw;
  }
}

#footer-info {
  margin-bottom: 70px; /* Ajusta si tu banner de cookies es más alto o bajo */
}


/* Banner de cookies: estilo compacto y flotante */
#cookie-banner{
  /* anula el 100vw y el text-align center inline */
  width: auto !important;
  max-width: 680px;
  left: 16px !important;
  right: 16px !important;
  bottom: 16px !important;

  margin: 0 auto;
  text-align: left !important;

  /* tarjeta limpia */
  background: #ffffff !important;
  color: #333 !important;
  padding: 12px 14px !important;
  border: 1px solid #e0e0e0 !important;
  border-top: 1px solid #e0e0e0 !important; /* anula la l�nea azulita */
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  z-index: 9999 !important;

  /* layout */
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  font-size: .92rem;
  line-height: 1.35;
}

#cookie-banner b { font-weight: 600; }
#cookie-banner a { color: #1976d2; text-decoration: underline; }

/* Bot�n OK m�s limpio (anula estilos inline si los dejas) */
#cookie-close{
  background: #1976d2 !important;
  color: #fff !important;
  border: 0 !important;
  padding: 6px 12px !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  font-weight: 600;
}
#cookie-close:hover{ filter: brightness(0.95); }

/* Responsive */
@media (max-width: 520px){
  #cookie-banner{
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    font-size: .9rem;
  }
}

/* Subir el bloque principal */
.form-central-80 { margin-top: 0 !important; }

/* Por si el padre a�ade espacio arriba */
main.central-content,
.central-content { padding-top: 0 !important; margin-top: 0 !important; }

/* Quitar margen superior del t�tulo */
.form-central-80 h1 { margin-top: 0 !important; }

/* Si el contenedor blanco redondeado usa padding grande arriba */
.form-central-80 .card, 
.form-central-80 .panel, 
.form-central-80 > div {
  padding-top: 12px !important; /* ajusta si lo ves necesario */
}


/* 1) Quitar relleno extra del contenedor central */
.central-content { 
  padding-top: 0 !important; 
  margin-top: 0 !important;
}

/* 2) Reducir el espacio entre el logo y el contenido */
img.logo { 
  display: block;              /* evita espacios raros por inline images */
  margin-bottom: 2px !important; /* antes probablemente mayor o por defecto */
}

/* 3) Un peque�o margen arriba del bloque del formulario */
.form-central-80 { 
  margin-top: 2px !important;   /* NO negativo */
}

/* Asegurar que el t�tulo no se �coma� el espacio */
.form-central-80 h1 { 
  margin-top: 8px !important; 
}


/* En m�vil/anchos peque�os, oculta los banners laterales y quita espacio arriba */
@media (max-width: 992px){
  .banner-lateral,
  .left-banner,
  .right-banner {
    display: none !important;
  }

  .main-layout {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  .central-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  .form-central-80 {
    margin-top: 8px !important; /* peque�o respiro bajo el logo */
  }

  .form-central-80 h1 {
    margin-top: 8px !important;
  }
}