/* ============================================================================
   BRASAS — calendario

   Hoja compartida por index.html y admin.html. Los colores salen de variables
   que las dos hojas ya definen (--ash, --bone, --ember…), asi que el calendario
   toma el tono de la pagina donde caiga sin saber en cual esta.
   ========================================================================== */

.cal-ancla{ position:relative; }

.cal{
  position:absolute; z-index:60; top:calc(100% + 8px); left:0;
  width:min(320px, calc(100vw - 40px));
  background:var(--ash, #17120F);
  border:1px solid rgba(237,228,214,.14); border-radius:4px;
  box-shadow:0 18px 50px rgba(0,0,0,.55);
  padding:14px;
}
.cal[hidden]{ display:none; }

/* Si abajo no entra —tipico en el celular con el boton en la mitad baja de
   la pantalla— se abre para arriba. Lo decide calendario.js al abrirlo. */
.cal--arriba{ top:auto; bottom:calc(100% + 8px); }

.cal__top{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-bottom:12px;
}
.cal__mes{
  font-size:.95rem; text-transform:capitalize; letter-spacing:.02em;
  color:var(--bone, #EDE4D6);
}
.cal__nav{
  width:32px; height:32px; flex:none; border-radius:3px; cursor:pointer;
  background:transparent; border:1px solid rgba(237,228,214,.14);
  color:var(--bone-dim, #A79C8C); font-size:1.05rem; line-height:1;
}
.cal__nav:hover:not(:disabled){ color:var(--bone, #EDE4D6); border-color:rgba(237,228,214,.3); }
.cal__nav:disabled{ opacity:.28; cursor:default; }

.cal__cabecera,
.cal__grilla{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }

.cal__cabecera{
  margin-bottom:6px; text-align:center;
  font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted, #6E6459);
}

.cal__vacio{ aspect-ratio:1; }

.cal__dia{
  aspect-ratio:1; display:grid; place-items:center;
  background:transparent; border:1px solid transparent; border-radius:3px;
  font-size:.9rem; color:var(--bone, #EDE4D6); cursor:pointer;
  transition:background .14s, color .14s, border-color .14s;
}
.cal__dia:hover:not(:disabled){ background:rgba(226,87,31,.16); }

/* Hoy: un punto abajo, no un relleno. Que no compita con el dia elegido. */
.cal__dia.es-hoy{ position:relative; font-weight:400; }
.cal__dia.es-hoy::after{
  content:''; position:absolute; bottom:5px; left:50%; transform:translateX(-50%);
  width:3px; height:3px; border-radius:50%; background:var(--ember, #E2571F);
}

.cal__dia.es-elegido{
  background:var(--ember, #E2571F); color:#fff; border-color:var(--ember, #E2571F);
}
.cal__dia.es-elegido.es-hoy::after{ background:#fff; }

/* Cerrado y fuera de rango se ven distinto a proposito: el primero es "ese dia
   no abrimos", el segundo es "todavia no tomamos reservas tan lejos". */
.cal__dia.es-cerrado{
  color:var(--muted, #6E6459); text-decoration:line-through;
  text-decoration-thickness:1px;
}
.cal__dia.es-cerrado:disabled{ cursor:not-allowed; }
.cal__dia:disabled:not(.es-cerrado){ color:rgba(237,228,214,.22); cursor:default; }

.cal__pie{
  margin:12px 0 0; padding-top:10px; border-top:1px solid rgba(237,228,214,.1);
  font-size:.74rem; color:var(--muted, #6E6459); line-height:1.5;
}

/* ------------------------------------------------------- boton que lo abre --
   Imita al resto de los campos del formulario donde caiga, pero es un <button>:
   asi el celular no abre teclado numerico ni el datepicker del sistema.
   -------------------------------------------------------------------------- */
.calbtn{
  width:100%; text-align:left; cursor:pointer;
  background:transparent; border:0; padding:0;
  color:var(--bone, #EDE4D6);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.calbtn::after{
  content:'▾'; font-size:.75rem; color:var(--muted, #6E6459); flex:none;
}
.calbtn.es-vacio{ color:var(--muted, #6E6459); }
.calbtn:focus-visible{ outline:1px solid var(--ember, #E2571F); outline-offset:4px; }

/* Dentro del formulario publico tiene que pasar por un campo mas. Copia las
   mismas reglas que styles.css le da a .field input; si aquellas cambian, estas
   tambien. Es el precio de que el boton no sea un <input>. */
.field .calbtn{
  border-bottom:1px solid rgba(237,228,214,.16);
  padding:8px 0; font-size:.98rem; transition:border-color .4s;
}
.field.has-error .calbtn{ border-bottom-color:#B7361F; }
/* Igual que los campos de al lado: 16px en el celular. Aca no es por el zoom
   (un <button> no lo dispara) sino para que la fecha no se vea mas chica que
   el nombre que tiene encima. */
@media (max-width:820px){ .field .calbtn{ font-size:16px; } }

/* En el panel el boton vive en la barra, no en un formulario: ahi si lleva
   fondo y borde, como el resto de los controles de esa fila. */
.fecha .calbtn{
  background:var(--ash); border:1px solid rgba(237,228,214,.10); border-radius:3px;
  padding:9px 12px; font-size:.85rem; width:auto; min-width:150px;
}
.fecha .calbtn:hover{ border-color:rgba(237,228,214,.28); }