/* ==========================================================================
   Donde Yoyo — estilo.css
   Destino: la carpeta del subdominio cabanas.vision-inmobiliaria.cl

   El sistema visual se llama "Sur" y esta descrito en
   Documentacion/diseno-huesped.md. Los colores, los tamanos y los espacios de
   aca son LOS MISMOS de la aplicacion, a proposito: la web y la aplicacion
   tienen que sentirse del mismo negocio, no de dos.

   Tres reglas que no se rompen:

   1. Nunca se escribe texto encima de una foto. Ni el precio, ni el nombre, ni
      una etiqueta. Sobre un cielo claro el texto blanco desaparece, y con la
      letra en tamano grande se sale de la foto o la tapa entera. Es la decision
      que mas pantallas salva, y ademas la foto limpia se ve mejor.

   2. Ningun estilo va escrito dentro del HTML. La politica de contenido dice
      style-src 'self', o sea que un style="..." suelto no se aplicaria. Es a
      proposito: esa misma regla es la que impide que una inyeccion pinte un
      formulario falso encima de la pagina.

   3. No hay tamano de letra por debajo de 15px para nada que la persona
      necesite leer para decidir. Los 13px existen solo para el contador de
      fotos y el codigo de error, que se pueden no leer sin consecuencia.
   ========================================================================== */

/* --------------------------------------------------------------------------
   La paleta. Un solo lugar.
   -------------------------------------------------------------------------- */
:root {
  /* Fondos */
  --niebla: #FAF7F3;   /* fondo de pantalla, blanco calido */
  --nieve:  #FFFFFF;   /* fondo de tarjeta */
  --arena:  #F2ECE3;   /* bloques neutros y separadores */

  /* Texto */
  --tinta:       #1C1A17;  /* 16,3:1 sobre niebla */
  --tinta-suave: #57514A;  /* 7,3:1 sobre niebla. Incluso el secundario pasa 7:1 */

  /* Colores con significado */
  --bosque: #1F4A3D;  /* la marca, la accion principal */
  --brasa:  #8C3406;  /* atencion, hay que leer */
  --teja:   #8F0C18;  /* error de verdad */
  --lago:   #0B4F76;  /* informacion neutra */

  /* Fondos de bloque, medidos contra su color de texto */
  --verde-suave:   #D6F0E0;
  --ambar-suave:   #FFE9B8;
  --rosa-suave:    #FFE4E2;
  --celeste-suave: #D8ECF9;

  --esquina: 18px;    /* identidad, no accesibilidad: es el mismo de la app */
  --margen: 20px;
}

/* Modo oscuro. El fondo NUNCA es negro puro: #14120F tiene una pizca de calido
   y hace que las fotos de bosque no se vean recortadas sobre un agujero.
   Los colores con significado se ACLARAN en vez de conservarse: un verde
   bosque #1F4A3D sobre fondo negro es practicamente invisible. */
@media (prefers-color-scheme: dark) {
  :root {
    --niebla: #14120F;
    --nieve:  #1E1B17;
    --arena:  #2A2621;
    --tinta:       #F5F0E8;
    --tinta-suave: #C9C1B5;
    --bosque: #8FD9B6;
    --brasa:  #FFAB78;
    --teja:   #FF9A93;
    --lago:   #9CCFEE;
    --verde-suave:   #17352B;
    --ambar-suave:   #3A2E14;
    --rosa-suave:    #3A1B1B;
    --celeste-suave: #14303F;
  }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--niebla);
  color: var(--tinta);
  /* Se usa la letra del sistema. En un iPhone eso es San Francisco, que es la
     misma de la aplicacion: la web se ve de la familia sin descargar nada. */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
}

.ancho {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--margen);
}

img { max-width: 100%; }

a { color: var(--bosque); }
a:hover { text-decoration: none; }

/* El foco del teclado se ve, y se ve bien. Quitarlo deja a quien navega sin
   raton sin saber donde esta parado. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--brasa);
  outline-offset: 2px;
}

/* Enlace de salto, visible solo cuando se llega con el teclado. */
.salto {
  position: absolute;
  left: -9999px;
}
.salto:focus {
  position: static;
  display: block;
  padding: 12px var(--margen);
  background: var(--bosque);
  color: #fff;
}

/* --------------------------------------------------------------------------
   Cabecera y pie
   -------------------------------------------------------------------------- */
.cabecera {
  background: var(--nieve);
  border-bottom: 1px solid var(--arena);
}
.cabecera__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.marca {
  font-size: 20px;
  font-weight: 700;
  color: var(--bosque);
  text-decoration: none;
  margin-right: auto;
}
.menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
}
.menu a {
  /* 50px de alto minimo para cualquier cosa tocable: un dedo no acierta a un
     enlace de 20px. */
  display: inline-flex;
  align-items: center;
  min-height: 50px;
  font-size: 17px;
}
.menu__salir { margin: 0; }

/* "Salir" es un boton de formulario porque cierra sesion, o sea cambia algo, y
   todo lo que cambia algo va por POST. Se le da apariencia de enlace para que
   no desentone con el resto del menu. */
.enlace {
  background: none;
  border: 0;
  padding: 0;
  min-height: 50px;
  font: inherit;
  color: var(--bosque);
  text-decoration: underline;
  cursor: pointer;
}

.pie {
  margin-top: 48px;
  padding: 24px 0 40px;
  background: var(--arena);
  color: var(--tinta-suave);
  font-size: 15px;
}
.pie__titulo { font-weight: 600; margin: 0 0 6px; }
.pie__contacto a { display: inline-block; min-height: 44px; line-height: 44px; margin-right: 16px; }

main { padding-top: 24px; padding-bottom: 8px; }

/* --------------------------------------------------------------------------
   Textos
   -------------------------------------------------------------------------- */
.portada { font-size: 30px; font-weight: 700; line-height: 1.2; margin: 0 0 8px; }
h2 { font-size: 24px; font-weight: 700; margin: 32px 0 12px; }
h3 { font-size: 20px; font-weight: 600; margin: 0 0 4px; }
.entrada { font-size: 17px; color: var(--tinta-suave); margin: 0 0 20px; }
.cuerpo { font-size: 17px; margin: 0 0 14px; }
.micro { font-size: 13px; color: var(--tinta-suave); margin: 6px 0; }
.miga { font-size: 15px; margin: 0 0 12px; }
.destacado {
  font-size: 17px;
  font-weight: 600;
  background: var(--verde-suave);
  color: var(--bosque);
  padding: 12px 16px;
  border-radius: var(--esquina);
  margin: 0 0 20px;
}

/* --------------------------------------------------------------------------
   El marco de una foto
   --------------------------------------------------------------------------
   La pieza que hace que la vitrina se vea digna con la mitad de las fotos sin
   cargar, que es el caso normal de hoy.

   Detras va SIEMPRE un bloque verde bosque con el nombre del lugar centrado en
   blanco. La foto va encima, tapandolo. Si la foto no existe, foto.php devuelve
   una imagen transparente y se sigue viendo el bloque.

   Resultado: la tarjeta mide siempre lo mismo, nunca aparece el icono de imagen
   rota, y un lugar sin foto se ve como una decision y no como una falla. Sin
   una linea de JavaScript. */
.marco {
  position: relative;
  aspect-ratio: 3 / 2;   /* la proporcion de una foto de telefono sin recortar */
  background: #1F4A3D;   /* fijo, no la variable: detras de una foto no hay modo oscuro */
  border-radius: var(--esquina);
  overflow: hidden;
}
.marco--tarjeta {
  /* En una tarjeta la foto llega al borde: redondeada arriba, recta abajo. */
  border-radius: var(--esquina) var(--esquina) 0 0;
}
.marco__vacio {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
}
.marco__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --------------------------------------------------------------------------
   Tarjetas
   -------------------------------------------------------------------------- */
.tarjetas {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  gap: 16px;
}
.tarjeta {
  background: var(--nieve);
  border-radius: var(--esquina);
  border: 1px solid var(--arena);
  overflow: hidden;
}
.tarjeta__enlace {
  display: block;
  color: inherit;
  text-decoration: none;
}
.tarjeta__cuerpo { padding: 16px; }
.tarjeta__nombre { font-size: 20px; font-weight: 600; margin: 0 0 2px; }
.tarjeta__lugar { font-size: 15px; color: var(--tinta-suave); margin: 0 0 8px; }
.tarjeta__precio {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 4px;
  /* Digitos de ancho fijo: los precios de una lista quedan alineados y se
     comparan de un vistazo. */
  font-variant-numeric: tabular-nums;
}
.tarjeta__precio--sin { font-size: 17px; font-weight: 400; color: var(--tinta-suave); }
.tarjeta__gente { font-size: 15px; color: var(--tinta-suave); margin: 0; }

/* En pantalla ancha, dos columnas. En telefono, una. */
@media (min-width: 620px) {
  .tarjetas { grid-template-columns: 1fr 1fr; }
}

.nota {
  padding: 12px 16px;
  border-radius: var(--esquina);
  font-size: 15px;
}
.nota--ambar { background: var(--ambar-suave); color: var(--tinta); }

/* --------------------------------------------------------------------------
   Galeria
   -------------------------------------------------------------------------- */
.galeria {
  display: grid;
  gap: 12px;
  margin: 0 0 20px;
}
@media (min-width: 620px) {
  .galeria { grid-template-columns: 1fr 1fr; }
}
.galeria__pieza { margin: 0; }
.galeria__pieza figcaption { margin-top: 4px; }

/* --------------------------------------------------------------------------
   Avisos
   --------------------------------------------------------------------------
   El bloque de "cómo se reserva" va en arena con borde, NO en rojo. En este
   sistema el rojo significa "algo se rompió". Que transferir no reserve la
   cabaña no es una falla: es una condicion del negocio que hay que entender.
   Pintarla de rojo la convierte en alarma, y las alarmas se aprenden a
   ignorar justo cuando mas importa leerlas. */
.aviso {
  border-radius: var(--esquina);
  padding: 16px;
  margin: 0 0 24px;
  border-left: 6px solid var(--tinta-suave);
  background: var(--arena);
}
.aviso__titulo { font-weight: 700; font-size: 17px; margin: 0 0 6px; }
.aviso p { margin: 0 0 8px; }
.aviso p:last-child { margin-bottom: 0; }

.aviso--arena { background: var(--arena); border-left-color: var(--bosque); }
.aviso--brasa { background: var(--ambar-suave); border-left-color: var(--brasa); color: var(--tinta); }
.aviso--ambar { background: var(--ambar-suave); border-left-color: var(--brasa); color: var(--tinta); }
.aviso--teja  { background: var(--rosa-suave);  border-left-color: var(--teja);  color: var(--tinta); }
.aviso--lago  { background: var(--celeste-suave); border-left-color: var(--lago); color: var(--tinta); }

/* --------------------------------------------------------------------------
   Datos, tablas
   -------------------------------------------------------------------------- */
.datos { margin: 0 0 24px; }
.datos__fila {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--arena);
}
.datos dt { font-size: 15px; color: var(--tinta-suave); min-width: 120px; margin: 0; }
.datos dd { margin: 0; font-size: 17px; }

table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 12px;
  font-size: 15px;
}
caption { text-align: left; padding-bottom: 6px; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--arena); }
th[scope="col"] { font-size: 13px; color: var(--tinta-suave); font-weight: 600; }
.desglose td, .tarifas td { font-variant-numeric: tabular-nums; }
tfoot th, tfoot td { border-bottom: 0; border-top: 2px solid var(--tinta-suave); font-size: 17px; }

/* La tabla no cabe en un telefono si se aprieta: se deja desplazar de lado,
   que es preferible a achicar la letra hasta que no se lea. */
.desglose, .tarifas { display: block; overflow-x: auto; }

/* --------------------------------------------------------------------------
   Formularios
   -------------------------------------------------------------------------- */
.formulario { margin: 0 0 24px; }
fieldset {
  border: 1px solid var(--arena);
  border-radius: var(--esquina);
  padding: 16px;
  margin: 0 0 16px;
  background: var(--nieve);
}
legend { font-size: 20px; font-weight: 600; padding: 0 6px; }
.campo { display: flex; flex-direction: column; gap: 4px; margin: 0 0 14px; }
.campo label { font-size: 15px; color: var(--tinta-suave); }
input[type="date"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="text"] {
  font: inherit;
  min-height: 50px;
  padding: 10px 12px;
  border: 1px solid var(--tinta-suave);
  border-radius: 10px;
  background: var(--nieve);
  color: var(--tinta);
  max-width: 340px;
}

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; }
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 12px 20px;
  border-radius: 12px;
  border: 2px solid var(--bosque);
  background: transparent;
  color: var(--bosque);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.boton--principal {
  background: var(--bosque);
  border-color: var(--bosque);
  /* Blanco fijo y no una variable: en modo oscuro el bosque se aclara y el
     texto encima tiene que oscurecerse, no aclararse tambien. */
  color: var(--nieve);
}
@media (prefers-color-scheme: dark) {
  .boton--principal { color: #14120F; }
}

/* --------------------------------------------------------------------------
   Grupos de resultados
   --------------------------------------------------------------------------
   El color nunca va solo. Cada grupo se distingue primero por su titulo en
   palabras y despues por el color. Quien no distingue verde de ambar lee
   exactamente la misma informacion. */
.grupo { padding-left: 14px; border-left: 6px solid var(--tinta-suave); }
.grupo--libre { border-left-color: var(--bosque); }
.grupo--cola  { border-left-color: var(--brasa); }

.plegado {
  background: var(--arena);
  border-radius: var(--esquina);
  padding: 14px 16px;
  margin: 0 0 24px;
}
.plegado summary { cursor: pointer; font-weight: 600; min-height: 44px; line-height: 44px; }
.lista-simple { margin: 8px 0 0; padding-left: 20px; }
.lista-simple li { margin-bottom: 8px; }

.precio-grande {
  font-size: 24px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin: 0 0 16px;
}
.precio-grande--sin { font-size: 17px; font-weight: 400; color: var(--tinta-suave); }

/* Quien pidio que el sistema no anime nada, no ve animaciones. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}