/* ============================================================
   MAISON BARRELIÉ — piel para el widget de reservas de Lorari
   ------------------------------------------------------------
   Esta hoja se inyecta DENTRO del Shadow DOM del widget
   (ver script.js → "Widget de reservas"). Sustituye el aspecto
   por defecto de Lorari por el lenguaje visual de la web.

   El widget usa clases utilitarias (Tailwind) y estilos inline,
   de ahí los !important. Si Lorari cambia su marcado, lo peor
   que ocurre es que vuelve a verse con su estilo por defecto.
   ============================================================ */

:host{
  --mb-ivory:      #FAF7F1;
  --mb-espresso:   #3A2D22;
  --mb-ink:        #241C15;
  --mb-taupe:      #8B7E6E;
  --mb-taupe-soft: #B3A695;
  --mb-line:       rgba(58,45,34,.13);
  --mb-line-soft:  rgba(58,45,34,.07);
  --mb-sage:       #9EB098;
  --mb-rose:       #D4B4B4;
  --mb-sand:       #DED3BF;
  --mb-display:    "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --mb-sans:       "Jost", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mb-ease:       cubic-bezier(.22,.61,.36,1);
}

/* ---------- Raíz ---------- */
.lorari-widget-root{
  font-family:var(--mb-sans) !important;
  transition:opacity .5s var(--mb-ease);
}
.brand-scope{
  background:transparent !important;
  color:var(--mb-espresso) !important;
  font-family:var(--mb-sans) !important;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
}

/* Colores de texto de Tailwind → paleta de la web */
.brand-scope .text-gray-900{ color:var(--mb-espresso) !important; }
.brand-scope .text-gray-800,
.brand-scope .text-gray-700,
.brand-scope .text-gray-600{ color:var(--mb-taupe) !important; }
.brand-scope .text-gray-500,
.brand-scope .text-gray-400{ color:var(--mb-taupe-soft) !important; }
.brand-scope .text-primary-600,
.brand-scope .text-primary-700{ color:var(--mb-espresso) !important; }
.brand-scope .bg-green-500{ background-color:var(--mb-sage) !important; }
.brand-scope .bg-red-500{ background-color:var(--mb-rose) !important; }
.brand-scope .bg-orange-500{ background-color:var(--mb-sand) !important; }
.brand-scope button{ font-family:inherit; cursor:pointer; }
.brand-scope button:disabled{ cursor:default; }

/* ---------- Tira de días ---------- */
.brand-scope > div:first-child{
  position:static !important;            /* sin sticky: la sección fluye con la página */
  background:transparent !important;
  border:0 !important;
}
.brand-scope > div:first-child > div{ padding:0 !important; max-width:none !important; }
.brand-scope > div:first-child button{
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  border-bottom:1px solid var(--mb-line) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:6px 0 16px !important;
  transition:border-color .35s var(--mb-ease);
}
.brand-scope > div:first-child button > div{ gap:7px; }
.brand-scope > div:first-child button span{
  opacity:1 !important;
  font-weight:400 !important;
  line-height:1 !important;
}
.brand-scope > div:first-child button span:first-child{
  font-size:9.5px !important;
  letter-spacing:.22em;
  text-transform:uppercase !important;
  color:var(--mb-taupe-soft) !important;
}
.brand-scope > div:first-child button span:last-child{
  font-family:var(--mb-display) !important;
  font-size:22px !important;
  color:var(--mb-taupe) !important;
  transition:color .35s var(--mb-ease);
}
.brand-scope > div:first-child button:hover span:last-child{ color:var(--mb-espresso) !important; }
.brand-scope > div:first-child button:disabled{ border-bottom:1px solid var(--mb-espresso) !important; }
.brand-scope > div:first-child button:disabled span:first-child{ color:var(--mb-espresso) !important; }
.brand-scope > div:first-child button:disabled span:last-child{ font-size:26px !important; color:var(--mb-espresso) !important; }

/* ---------- Cuerpo ---------- */
.brand-scope > div:nth-child(2){ padding:34px 0 0 !important; max-width:none !important; }

/* Fecha seleccionada */
.brand-scope > div:nth-child(2) h2{
  display:flex; align-items:baseline; gap:14px;
  margin:0 0 20px !important;
  font-family:var(--mb-display) !important;
  font-size:clamp(22px, 2.4vw, 28px) !important;
  font-weight:400 !important;
  letter-spacing:0;
  color:var(--mb-espresso) !important;
}
.brand-scope > div:nth-child(2) h2::first-letter{ text-transform:uppercase; }
.brand-scope > div:nth-child(2) h2 span{
  background:transparent !important;
  padding:0 !important; margin:0 !important;
  font-family:var(--mb-sans) !important;
  font-size:9.5px !important; letter-spacing:.22em; text-transform:uppercase;
  color:var(--mb-taupe-soft) !important;
}

/* Cargando */
.brand-scope .animate-spin{
  width:26px !important; height:26px !important;
  border-width:1px !important;
  border-color:var(--mb-line) !important;
  border-top-color:var(--mb-espresso) !important;
}
.brand-scope .animate-spin + p{
  font-size:10px !important; letter-spacing:.22em; text-transform:uppercase;
  color:var(--mb-taupe-soft) !important;
}

/* Lista de clases: de tarjetas a filas con filete */
.brand-scope .space-y-3 > *{ margin:0 !important; }
.brand-scope .space-y-3 > div{
  background:transparent !important;
  border:0 !important;
  border-bottom:1px solid var(--mb-line) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:22px 0 !important;
  opacity:1 !important;
}
.brand-scope .space-y-3 > div:first-child{ border-top:1px solid var(--mb-line) !important; }
.brand-scope .space-y-3 > div > span.absolute{ display:none !important; }   /* punto de nivel */
.brand-scope .space-y-3 h4{
  font-family:var(--mb-display) !important;
  font-weight:400 !important;
  color:var(--mb-espresso) !important;
  letter-spacing:-.005em;
  white-space:normal !important;
}
.brand-scope .space-y-3 > div.opacity-60 h4{ color:var(--mb-taupe-soft) !important; }

/* — variante escritorio (≥640px) — */
.brand-scope .space-y-3 > div > div.hidden{ align-items:center !important; }
.brand-scope .space-y-3 > div > div.hidden > div:first-child > div:first-child{
  display:flex; align-items:baseline; gap:12px; margin:0 0 8px !important;
}
.brand-scope .space-y-3 > div > div.hidden > div:first-child > div:first-child > span:first-child{
  font-family:var(--mb-display) !important;
  font-size:20px !important; font-weight:400 !important;
  color:var(--mb-espresso) !important;
}
.brand-scope .space-y-3 > div > div.hidden > div:first-child > div:first-child > span:nth-child(2){ display:none !important; }
.brand-scope .space-y-3 > div > div.hidden > div:first-child > div:first-child > span:last-child{
  font-size:10px !important; letter-spacing:.2em; text-transform:uppercase;
  color:var(--mb-taupe-soft) !important;
}
.brand-scope .space-y-3 > div > div.hidden h4{ font-size:24px !important; margin:0 0 6px !important; }
.brand-scope .space-y-3 > div > div.hidden > div:first-child > div:last-child{
  font-size:11px !important; letter-spacing:.06em; color:var(--mb-taupe) !important;
}
.brand-scope .space-y-3 > div > div.hidden > div:first-child > div:last-child svg,
.brand-scope .space-y-3 > div > div.hidden > div:first-child > div:last-child span.truncate,
.brand-scope .space-y-3 > div > div.hidden > div:first-child > div:last-child span.flex-shrink-0:not(.whitespace-nowrap){
  display:none !important;                /* dirección (siempre la misma) y separadores */
}
.brand-scope .space-y-3 > div > div.hidden > div:first-child > div:last-child span.whitespace-nowrap{ margin-left:0 !important; }
.brand-scope .space-y-3 > div > div.hidden > div:last-child{ margin-left:24px !important; }

/* — variante móvil (<640px) — */
.brand-scope .space-y-3 > div > div.block > div:first-child{ margin-bottom:10px !important; }
.brand-scope .space-y-3 > div > div.block .bg-primary-50{
  background:transparent !important; padding:0 !important; border-radius:0 !important;
}
.brand-scope .space-y-3 > div > div.block .bg-primary-50 span{
  font-family:var(--mb-display) !important;
  font-size:22px !important; font-weight:400 !important;
  color:var(--mb-espresso) !important;
}
.brand-scope .space-y-3 > div > div.block .bg-primary-50 + span{
  font-size:10px !important; letter-spacing:.2em; text-transform:uppercase;
  color:var(--mb-taupe-soft) !important;
}
.brand-scope .space-y-3 > div > div.block h4{ font-size:24px !important; margin:0 0 4px !important; }
.brand-scope .space-y-3 > div > div.block > div.flex.justify-between.mb-4{ margin-bottom:18px !important; }
.brand-scope .space-y-3 > div > div.block > div.flex.justify-between.mb-4 > div:first-child{ display:none !important; }  /* dirección */
.brand-scope .space-y-3 > div > div.block > div.flex.justify-between.mb-4 > div:last-child{ margin-left:0 !important; }
.brand-scope .space-y-3 > div > div.block > div.flex.justify-between.mb-4 span{
  font-size:11px !important; letter-spacing:.06em; font-weight:400 !important; color:var(--mb-taupe) !important;
}

/* ---------- Botones ---------- */
/* Reservar (escritorio): píldora hueca */
.brand-scope .space-y-3 > div > div.hidden button{
  background:transparent !important; background-image:none !important;
  border:1px solid var(--mb-espresso) !important;
  color:var(--mb-espresso) !important;
  border-radius:999px !important;
  padding:12px 26px !important;
  font-size:10.5px !important; letter-spacing:.2em; text-transform:uppercase; font-weight:400 !important;
  box-shadow:none !important;
  transition:background .4s var(--mb-ease), color .4s var(--mb-ease);
}
.brand-scope .space-y-3 > div > div.hidden button:hover{
  background:var(--mb-espresso) !important; color:var(--mb-ivory) !important;
}
/* Completa (escritorio) */
.brand-scope .space-y-3 > div > div.hidden > div:last-child > div{
  background:transparent !important; border:0 !important; padding:0 !important;
  font-size:10.5px !important; letter-spacing:.2em; text-transform:uppercase; font-weight:400 !important;
  color:var(--mb-taupe-soft) !important;
}
/* Reservar (móvil): píldora hueca, igual que en escritorio */
.brand-scope .space-y-3 > div > div.block button{
  background:transparent !important; background-image:none !important;
  border:1px solid var(--mb-espresso) !important;
  color:var(--mb-espresso) !important;
  border-radius:999px !important;
  padding:14px !important;
  font-size:10.5px !important; letter-spacing:.2em; text-transform:uppercase; font-weight:400 !important;
  box-shadow:none !important;
  transition:background .4s var(--mb-ease), color .4s var(--mb-ease);
}
.brand-scope .space-y-3 > div > div.block button:active{
  background:var(--mb-espresso) !important; color:var(--mb-ivory) !important;
}
/* Clase completa (móvil) */
.brand-scope .space-y-3 > div > div.block > div.bg-gray-100{
  background:transparent !important;
  border:1px solid var(--mb-line) !important;
  border-radius:999px !important;
  color:var(--mb-taupe-soft) !important;
  font-size:10.5px !important; letter-spacing:.2em; text-transform:uppercase; font-weight:400 !important;
}

/* ---------- Sin clases ---------- */
.brand-scope > div:nth-child(2) > div.text-center.py-12{
  padding:56px 0 !important;
  border-top:1px solid var(--mb-line); border-bottom:1px solid var(--mb-line);
}
.brand-scope > div:nth-child(2) > div.text-center.py-12 svg{ display:none !important; }
.brand-scope > div:nth-child(2) > div.text-center.py-12 p{
  font-family:var(--mb-display) !important; font-style:italic;
  font-size:20px !important; color:var(--mb-taupe) !important;
}

/* ---------- Powered by Lorari ---------- */
.brand-scope > div:nth-child(2) > div:last-child{ padding-top:22px !important; }
.brand-scope > div:nth-child(2) > div:last-child a{
  font-family:var(--mb-sans) !important;
  opacity:.6; transition:opacity .35s var(--mb-ease);
}
.brand-scope > div:nth-child(2) > div:last-child a:hover{ opacity:1; }
.brand-scope > div:nth-child(2) > div:last-child a > span:first-child{
  font-size:8.5px !important; letter-spacing:.2em; text-transform:uppercase; color:var(--mb-taupe-soft) !important;
}
.brand-scope > div:nth-child(2) > div:last-child a > span:last-child{ margin-top:5px !important; gap:6px !important; }
.brand-scope > div:nth-child(2) > div:last-child img{
  width:16px !important; height:16px !important; border-radius:4px !important; border:0 !important;
}
.brand-scope > div:nth-child(2) > div:last-child a > span:last-child > span{
  font-size:12px !important; letter-spacing:.04em; font-weight:400 !important; color:var(--mb-taupe) !important;
}

/* ---------- Modal de reserva ---------- */
.brand-scope .fixed.inset-0{
  background:rgba(36,28,21,.48) !important;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  padding:20px !important;
}
.brand-scope .fixed.inset-0 > div{
  background:var(--mb-ivory) !important;
  border-radius:2px !important;
  max-width:440px !important;
  box-shadow:0 30px 80px rgba(36,28,21,.25);
}
.brand-scope .fixed.inset-0 > div > div{ padding:28px 32px 30px !important; }
.brand-scope .fixed.inset-0 h3{
  font-family:var(--mb-display) !important;
  font-size:26px !important; font-weight:300 !important;
  color:var(--mb-espresso) !important;
}
.brand-scope .fixed.inset-0 > div > div > div:first-child > button{
  color:var(--mb-taupe) !important; background:transparent !important;
}
.brand-scope .fixed.inset-0 > div > div > div:first-child > button:hover{ color:var(--mb-espresso) !important; }
.brand-scope .fixed.inset-0 img.object-cover{ border-radius:2px !important; height:190px !important; }
.brand-scope .fixed.inset-0 .bg-gray-50{
  background:transparent !important;
  border-radius:0 !important;
  padding:18px 0 0 !important;
  border-top:1px solid var(--mb-line);
}
.brand-scope .fixed.inset-0 .bg-gray-50 h4{
  font-family:var(--mb-display) !important;
  font-size:24px !important; font-weight:400 !important;
  color:var(--mb-espresso) !important;
  margin-bottom:8px !important;
}
.brand-scope .fixed.inset-0 .bg-gray-50 > p{
  font-size:13.5px !important; line-height:1.7 !important; color:var(--mb-taupe) !important;
}
.brand-scope .fixed.inset-0 .space-y-1{
  font-size:12.5px !important; letter-spacing:.02em; color:var(--mb-taupe) !important;
  padding-top:12px; border-top:1px solid var(--mb-line-soft);
}
.brand-scope .fixed.inset-0 .space-y-1 svg{ width:14px !important; height:14px !important; color:var(--mb-taupe-soft) !important; }
.brand-scope .fixed.inset-0 > div > div > button{
  background:var(--mb-espresso) !important; background-image:none !important;
  color:var(--mb-ivory) !important;
  border-radius:999px !important;
  padding:16px !important;
  font-size:10.5px !important; letter-spacing:.2em; text-transform:uppercase; font-weight:400 !important;
  box-shadow:none !important;
  transition:background .4s var(--mb-ease);
}
.brand-scope .fixed.inset-0 > div > div > button:hover{ background:var(--mb-ink) !important; }
.brand-scope .fixed.inset-0 > div > div > p.text-center{
  font-size:11px !important; color:var(--mb-taupe-soft) !important; margin-top:14px !important;
}