.buscar { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.buscar input[type="search"] { flex: 1 1 14rem; max-width: 26rem; }
.pizarra .campo { background: transparent; color: var(--pizarra-texto); border-color: #3c5148; }
.pizarra .campo option { color: #10231c; }
.pizarra input[type="search"] { background: transparent; color: var(--pizarra-texto); border-color: #3c5148; }
.pizarra button.primario { background: var(--oro); color: #10231c; }
.pizarra button.chip { background: transparent; color: var(--pizarra-texto); border-color: #3c5148; }
.pizarra button.chip[aria-pressed="true"] { background: var(--pizarra-texto); color: #10231c; }

.lugares { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }

.actual h2 { margin: 1.5rem 0 0; font-size: 1.125rem; font-weight: 600; color: var(--pizarra-suave); }
.actual .vacio { color: var(--pizarra-suave); margin-top: 1.5rem; }
.temperatura { margin: .25rem 0 0; font-size: clamp(3.5rem, 14vw, 7rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.condicion { margin: .25rem 0 0; font-size: 1.375rem; }
.datos { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; color: var(--pizarra-suave); }

.dias { list-style: none; margin: 0; padding: 0; background: var(--papel); border: 1px solid var(--linea); border-radius: .5rem; }
.dia { display: grid; grid-template-columns: 6rem 1fr auto auto; gap: .25rem 1rem; align-items: baseline; padding: .75rem 1rem; border-bottom: 1px solid var(--linea); }
.dia:last-child { border-bottom: 0; }
.dia-nombre { font-weight: 700; text-transform: capitalize; }
.dia-condicion { color: var(--tinta-suave); }
.dia-lluvia { grid-column: 2; color: var(--tinta-suave); font-size: .875rem; }
.dia-max { grid-row: 1; grid-column: 3; font-weight: 700; font-variant-numeric: tabular-nums; }
.dia-min { grid-row: 1; grid-column: 4; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
@media (min-width: 40rem) {
  .dia { grid-template-columns: 7rem 1fr 8rem 4rem 4rem; }
  .dia-lluvia { grid-column: 3; grid-row: 1; }
  .dia-max { grid-column: 4; }
  .dia-min { grid-column: 5; }
}

/* Aspecto de app de clima para el celular: columna angosta, cabecera azul y hoja oscura con tarjetas redondeadas. */
:root { --hoja: #0e1a2f; --papel: #172440; --tinta: #eef2fb; --tinta-suave: #9fb0d0; --linea: #22335a; --cobalto: #4a9dff; --cobalto-texto: #ffffff; }
html { background: #060d19; }
body { max-width: 30rem; margin-inline: auto; min-height: 100vh; }

.pizarra { padding: 1.25rem 0 3.5rem; color: #fff; background: linear-gradient(#1a67d0 0%, #2f86ea 100%); }
.pizarra h1 { color: #fff; font-size: .9375rem; font-weight: 600; letter-spacing: .04em; }
.pizarra .buscar { margin-top: .75rem; flex-wrap: nowrap; }
.pizarra .buscar input[type="search"] { flex: 1 1 auto; min-width: 0; max-width: none; }
.pizarra input[type="search"], .pizarra .campo { background: rgba(255, 255, 255, .18); color: #fff; border: 0; border-radius: 999px; padding-inline: 1rem; }
.pizarra input[type="search"]::placeholder { color: rgba(255, 255, 255, .75); }
.pizarra .campo option { color: #10231c; }
.pizarra button.primario { background: #fff; color: #1a67d0; border-radius: 999px; }
.pizarra button.chip { background: rgba(255, 255, 255, .18); color: #fff; border: 0; }
.pizarra button.chip[aria-pressed="true"] { background: #fff; color: #1a67d0; }
.pizarra a, .pizarra .pizarra-nota { color: rgba(255, 255, 255, .85); }

.actual { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .25rem 1rem; margin-top: 1rem; }
.actual h2 { grid-column: 1 / -1; margin: 0; font-size: .9375rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #fff; }
.actual .temperatura { grid-row: 2 / 4; font-size: clamp(3.5rem, 20vw, 5rem); font-weight: 500; letter-spacing: -.02em; }
.actual .condicion { grid-column: 2; margin: 0; font-size: 1.125rem; font-weight: 600; text-align: right; }
.actual .datos { grid-column: 2; margin: 0; flex-direction: column; gap: 0; text-align: right; font-size: .875rem; color: #fff; }
.actual .vacio { grid-column: 1 / -1; color: #fff; }
.pizarra .pizarra-nota { margin-top: 1rem; font-size: .875rem; }

main { position: relative; margin-top: -2rem; background: var(--hoja); border-radius: 1.5rem 1.5rem 0 0; padding: 1.5rem 1rem 3rem; width: 100%; }
h2#titulo-dias { font-size: 1.25rem; font-weight: 700; }

.dias { background: transparent; border: 0; display: grid; gap: .5rem; }
.dia { background: var(--papel); border: 0; border-radius: 1rem; padding: .875rem 1rem; }
.dia-max { color: #fff; }
main.contenedor { width: 100%; }
.dia { grid-template-columns: 5.5rem 1fr auto auto; }
.dia-lluvia { grid-column: 2; grid-row: 2; }
.dia-max { grid-column: 3; grid-row: 1; }
.dia-min { grid-column: 4; grid-row: 1; }

.actual .esq { background: rgba(255, 255, 255, .25); }
.esq-lugar { grid-column: 1 / -1; width: 60%; height: 1rem; }
.esq-temp { grid-row: 2 / 4; width: 8rem; height: 4rem; border-radius: .75rem; }
.esq-cond { grid-column: 2; width: 6rem; height: 2.5rem; justify-self: end; }
.esq-dia { height: 4.25rem; border-radius: 1rem; margin-bottom: .5rem; background: var(--papel); }