/* ============================================================
   Estudio Raíz — agenda de citas
   Paleta terracota y crema, deliberadamente distinta de zHomes
   (oscuro/neón) y de La Fonda (verde botella/dorado).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');

:root{
  --crema: #FDF8F4;
  --panel: #FFFFFF;
  --tierra: #C0714A;
  --tierra-honda: #8E4E30;
  --tierra-suave: #F2E3DA;
  --tinta: #2E2420;
  --tinta-suave: #7A6A61;
  --linea: rgba(46,36,32,0.12);
  --linea-tenue: rgba(46,36,32,0.06);
  --verde-ok: #4A8055;
  --rojo-no: #C0503C;
  --radio: 10px;
  --sans: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --alto-media-hora: 34px;
}

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

body{
  margin:0;
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.envoltorio{ max-width: 1180px; margin: 0 auto; padding: 1.25rem clamp(.75rem, 3vw, 1.75rem) 3rem; }

/* --- cabecera --- */
.cabecera{ display:flex; justify-content:space-between; align-items:center; gap:1rem;
           flex-wrap:wrap; padding-bottom:1rem; border-bottom:1px solid var(--linea); }
.marca{ display:flex; align-items:center; gap:.6rem; font-weight:800; font-size:1.15rem; }
.marca em{ font-style:normal; color:var(--tierra); }
.marca small{ display:block; font-size:.7rem; font-weight:600; color:var(--tinta-suave);
              letter-spacing:.04em; text-transform:uppercase; }

/* --- barra de navegación de día --- */
.barra-dia{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin:1.1rem 0 .9rem; }
/* Solo la primera letra. text-transform:capitalize pondria mayuscula
   en cada palabra y saldria "Sabado 15 De Agosto". */
.fecha-titulo{ font-weight:800; font-size:1.05rem; margin-right:auto; }
.fecha-titulo::first-letter{ text-transform:uppercase; }

.boton{ font-family:inherit; font-size:.85rem; font-weight:700; border-radius:8px;
        border:1px solid var(--linea); background:var(--panel); color:var(--tinta);
        padding:.45rem .8rem; cursor:pointer; }
.boton:hover{ border-color:var(--tierra); color:var(--tierra-honda); }
.boton-primario{ background:var(--tierra); border-color:var(--tierra); color:#fff; }
.boton-primario:hover{ background:var(--tierra-honda); border-color:var(--tierra-honda); color:#fff; }

/* --- rejilla --- */
.rejilla{ background:var(--panel); border:1px solid var(--linea); border-radius:var(--radio);
          overflow:hidden; }
.rejilla-cabeza{ display:grid; border-bottom:1px solid var(--linea); }
.rejilla-cabeza .hueco-esquina{ border-right:1px solid var(--linea-tenue); }
.col-nombre{ padding:.6rem .5rem; text-align:center; font-weight:800; font-size:.9rem;
             border-right:1px solid var(--linea-tenue); }
.col-nombre span{ display:block; font-size:.7rem; font-weight:600; color:var(--tinta-suave); }
.col-nombre.libra{ color:var(--tinta-suave); }

.rejilla-cuerpo{ display:grid; position:relative; }
.columna-horas{ border-right:1px solid var(--linea-tenue); }
.marca-hora{ height:var(--alto-media-hora); font-size:.7rem; color:var(--tinta-suave);
             text-align:right; padding-right:.5rem; transform:translateY(-.5em); }
.columna-prof{ position:relative; border-right:1px solid var(--linea-tenue); }
.franja{ height:var(--alto-media-hora); border-top:1px solid var(--linea-tenue); }
.franja.en-punto{ border-top-color:var(--linea); }
.franja.fuera{ background:repeating-linear-gradient(45deg, transparent, transparent 6px,
               rgba(46,36,32,.045) 6px, rgba(46,36,32,.045) 12px); }
.franja.libre{ cursor:pointer; }
.franja.libre:hover{ background:var(--tierra-suave); }

.cita{ position:absolute; left:3px; right:3px; border-radius:6px; padding:4px 6px;
       font-size:.72rem; line-height:1.25; overflow:hidden; cursor:pointer;
       border-left:3px solid rgba(0,0,0,.25); touch-action:none; }
.cita b{ display:block; font-weight:800; white-space:nowrap; overflow:hidden;
         text-overflow:ellipsis; }
.cita span{ opacity:.8; }
.cita:hover{ filter:brightness(.96); }
.cita.arrastrando{ opacity:.5; }

/* Cartel de dia cerrado: ocupa el sitio de la rejilla. Las
   franjas rayadas del fondo son las mismas del .franja.fuera, para
   que se lea como "esta zona no esta disponible" sin decirlo. */
.dia-cerrado{ display:flex; flex-direction:column; align-items:center; justify-content:center;
              gap:1rem; text-align:center; padding:3.5rem 1.25rem;
              background:repeating-linear-gradient(45deg, transparent, transparent 6px,
                         rgba(46,36,32,.045) 6px, rgba(46,36,32,.045) 12px); }
.dia-cerrado-texto{ margin:0; font-size:1.05rem; font-weight:800; color:var(--tinta-suave);
                    max-width:32ch; }

/* --- avisos --- */
.aviso{ display:flex; gap:.6rem; align-items:flex-start; background:var(--tierra-suave);
        border:1px solid rgba(192,113,74,.3); border-radius:var(--radio);
        padding:.75rem .9rem; font-size:.85rem; margin-bottom:1rem; }
.aviso p{ margin:0; }
.aviso .cerrar{ margin-left:auto; background:none; border:none; cursor:pointer;
                font-size:1.1rem; color:var(--tinta-suave); line-height:1; }

/* Imprescindible: sin esta regla el atributo hidden no oculta nada.
   El navegador trae [hidden]{display:none} en su hoja de estilos, pero
   las hojas del autor siempre le ganan, y .aviso declara display:flex.
   Sin esto, el aviso de "no se puede guardar" sale siempre y la X de
   cerrar no hace nada. */
.aviso[hidden]{ display:none; }

.mensaje{ position:fixed; left:50%; bottom:1.25rem; transform:translateX(-50%);
          background:var(--tinta); color:#fff; padding:.65rem 1rem; border-radius:8px;
          font-size:.85rem; max-width:min(90vw,460px); box-shadow:0 6px 20px rgba(0,0,0,.2);
          z-index:60; }
.mensaje.error{ background:var(--rojo-no); }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition-duration:.001ms !important; animation-duration:.001ms !important; }
}

/* --- ventana modal --- */
.velo{ position:fixed; inset:0; background:rgba(46,36,32,.45); display:flex;
       align-items:center; justify-content:center; padding:1rem; z-index:50; }
.ventana{ background:var(--panel); border-radius:var(--radio); width:min(460px,100%);
          max-height:90vh; overflow:auto; padding:1.25rem; }
.ventana h2{ margin:0 0 1rem; font-size:1.1rem; }
.campo{ margin-bottom:.8rem; }
.campo label{ display:block; font-size:.78rem; font-weight:700; color:var(--tinta-suave);
              margin-bottom:.25rem; }
.campo input, .campo select, .campo textarea{
  width:100%; font-family:inherit; font-size:.9rem; padding:.5rem .6rem;
  border:1px solid var(--linea); border-radius:8px; background:var(--crema); color:var(--tinta); }
.campo textarea{ min-height:70px; resize:vertical; }
.fila-campos{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.acciones{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:1rem; }
.acciones .separador{ margin-left:auto; }
.boton-peligro{ border-color:rgba(192,80,60,.4); color:var(--rojo-no); background:var(--panel); }
.boton-peligro:hover{ background:var(--rojo-no); color:#fff; border-color:var(--rojo-no); }
.error-form{ background:rgba(192,80,60,.1); border:1px solid rgba(192,80,60,.35);
             border-radius:8px; padding:.5rem .65rem; font-size:.82rem;
             color:#8E3B2E; margin-bottom:.8rem; }

/* --- buscador de huecos --- */
.lista-huecos{ display:flex; flex-direction:column; gap:.35rem; max-height:46vh;
               overflow:auto; margin-top:.75rem; }
.hueco{ display:flex; align-items:center; gap:.6rem; padding:.5rem .65rem;
        border:1px solid var(--linea); border-radius:8px; background:var(--crema);
        cursor:pointer; font-size:.88rem; text-align:left; font-family:inherit;
        color:var(--tinta); width:100%; }
.hueco:hover{ border-color:var(--tierra); background:var(--tierra-suave); }
.hueco .hora{ font-weight:800; font-variant-numeric:tabular-nums; }
.hueco .con{ color:var(--tinta-suave); font-size:.8rem; }
.hueco .punto{ width:9px; height:9px; border-radius:99px; flex:0 0 9px; }
.sin-huecos{ padding:.75rem; background:var(--crema); border:1px dashed var(--linea);
             border-radius:8px; font-size:.86rem; color:var(--tinta-suave); margin-top:.75rem; }

/* --- ficha de cliente --- */
.ficha-datos{ display:flex; flex-direction:column; gap:.25rem; font-size:.86rem;
              background:var(--crema); border-radius:8px; padding:.7rem .8rem;
              margin-bottom:1rem; }
.ficha-datos .etiqueta{ color:var(--tinta-suave); font-size:.75rem; font-weight:700;
                        text-transform:uppercase; letter-spacing:.03em; }
.visita{ display:flex; gap:.6rem; align-items:baseline; padding:.5rem 0;
         border-top:1px solid var(--linea-tenue); font-size:.86rem; cursor:pointer; }
.visita:hover{ background:var(--crema); }
.visita .cuando{ font-variant-numeric:tabular-nums; color:var(--tinta-suave);
                 font-size:.78rem; flex:0 0 6.5rem; }
.visita .que{ flex:1; }
.visita.anulada .que{ text-decoration:line-through; opacity:.65; }
.marca-anulada{ font-size:.7rem; font-weight:700; color:var(--rojo-no); }
.enlace-cliente{ background:none; border:none; padding:0; font:inherit; color:var(--tierra-honda);
                 text-decoration:underline; cursor:pointer; }

/* --- movil ---
   Tres columnas no caben en un movil sin volverse ilegibles, asi
   que se muestra un profesional cada vez con pestanas. */
.pestanas-prof{ display:flex; gap:.4rem; margin-bottom:.6rem; overflow-x:auto; }
.pestana{ font-family:inherit; font-size:.85rem; font-weight:700; padding:.4rem .75rem;
          border:1px solid var(--linea); border-radius:99px; background:var(--panel);
          color:var(--tinta); cursor:pointer; white-space:nowrap; }
.pestana[aria-selected="true"]{ background:var(--tierra); border-color:var(--tierra); color:#fff; }

/* Mismo fallo que ya se corrigio en .aviso: .pestanas-prof declara
   display:flex, asi que sin esto el atributo hidden no la ocultaria
   en escritorio. */
.pestanas-prof[hidden]{ display:none; }

@media (max-width: 720px){
  .barra-dia{ gap:.35rem; }
  .fecha-titulo{ width:100%; margin-bottom:.3rem; }
  .boton{ padding:.4rem .6rem; font-size:.8rem; }
  .cita{ font-size:.75rem; }
  .fila-campos{ grid-template-columns:1fr; }
}