:root{
  --bg:#e8f1ff; --bg-2:#f6f9ff; --text:#0f172a; --muted:#475569;
  --surface:#ffffff; --surface-2:#f1f5f9; --border:#e2e8f0;
  --accent:#facc15; --wa:#22c55e; --primary:#0f172a;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans";
  color:var(--text);
  background:linear-gradient(180deg,#cfe8ff 0%,var(--bg) 30%,var(--bg-2) 100%);
}
.container{max-width:1100px;margin:0 auto;padding:0 16px}

/* Navbar */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.7);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.6)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px}

.brand__logo{
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 5px solid #F7F5F0;
  overflow: hidden;
  /* si querés mantener el fondo amarillo, dejalo, si no podés quitarlo */
  background-color: #F7F5F0;

  background-image: url("/toro.png");
  background-repeat: no-repeat;

  /* 🔍 un poco de zoom para que el cuerpo quede más cerca del borde */
  background-size: 105%;          /* probá 110–125% si querés ajustar */

  /* 🎯 centrado horizontal y un poco más abajo vertical */
  background-position: center 55%; /* 60% = baja la imagen; probá 55–65% */

  flex-shrink: 0;
  box-shadow: 0 0 4px rgba(0,0,0,0.25);
}


/* La imagen adentro del círculo */
.brand__logo img{
  width: 100%;
  height: 100%;
  object-fit: cover;        /* la imagen llena el círculo */
  display: block;
}


.brand__name{font-weight:900;letter-spacing:.5px}
.nav__links{display:none;gap:20px}
.nav__links a{color:var(--text);text-decoration:none;opacity:.9}
@media(min-width:760px){.nav__links{display:flex}}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;background:#111827;color:#fff;border:1px solid #111827;
  padding:12px 16px;border-radius:14px;text-decoration:none;cursor:pointer;
  transition:.2s ease;font-weight:700
}
.btn--primary{background:var(--primary);border-color:var(--primary)}
.btn:hover{opacity:.92}
.btn--ghost{background:#fff;color:var(--text);border:1px solid var(--border)}
.btn--icon{background:#fff;color:var(--text);border:1px solid var(--border);padding:8px 12px}
.btn--block{width:100%}
.btn--lg{padding:14px 18px;font-size:16px}

/* Hero */
.hero{padding:56px 0}
.hero__grid{display:grid;gap:28px}
@media(min-width:900px){.hero__grid{grid-template-columns:1.1fr .9fr}}
.hero__copy h1{font-size:40px;line-height:1.1;margin:0}
.hero__copy p{margin:14px 0 0;color:var(--muted);font-size:18px}
.u-underline{box-shadow:inset 0 -10px 0 0 var(--accent)}
.hero__cta{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap}
.hero__bullets{display:grid;gap:6px;margin:16px 0 0;padding-left:18px}
.hero__bullets li{color:#1f2937}

/* === SOLO IMAGEN (sin marco atrás) =============================== */
.hero__media{
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero__img{
  display:block;
  width:100%;
  height:100%;
  border-radius:22px;
  box-shadow:0 18px 38px rgba(15,23,42,.18), 0 4px 10px rgba(15,23,42,.12);
}
@media (min-width: 900px){
  .hero__img{
    max-height:520px;
    object-fit:contain;
  }
}

.media__placeholder{color:#64748b;font-size:14px}
.hint{color:#64748b;font-size:12px;margin-top:6px}

/* Sections */
.section{padding:56px 0}
.section--muted{background:rgba(255,255,255,.6)}
.section__title{font-size:28px;margin:0 0 8px}
.section__subtitle{color:var(--muted);margin:0}
.section__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}

/* Cards (precios) */
.cards{display:grid;gap:16px;margin-top:16px}
.cards--pricing .card{position:relative;overflow:hidden}
@media(min-width:900px){.cards{grid-template-columns:repeat(2,1fr)}}
.card{
  background:rgba(255,255,255,.9);border:1px solid var(--border);border-radius:18px;
  padding:18px;box-shadow:0 6px 18px rgba(0,0,0,.06)
}
.card--featured{background:#fff;border-color:#fde68a}
.card__head{display:flex;align-items:center;justify-content:space-between}
.badge{font-size:12px;background:#fde047;border-radius:999px;padding:3px 8px}
.card__price{font-size:36px;font-weight:900;margin:10px 0}
.card__price span{font-size:14px;font-weight:600}
.card__list{color:#374151;display:grid;gap:6px;margin:10px 0 14px;padding-left:18px}
.card__note{color:#64748b;font-size:12px;margin-top:8px}

/* Calendar */
.grid{display:grid;gap:20px}
@media(min-width:900px){.grid{grid-template-columns:2fr 1fr}}
.cal{background:rgba(255,255,255,.9);border:1px solid var(--border);border-radius:18px;padding:16px}
.cal__head{display:flex;align-items:center;justify-content:space-between}
.cal__week{margin-top:10px;display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center;color:#64748b;font-size:12px}
.cal__grid{margin-top:6px;display:grid;grid-template-columns:repeat(7,1fr);gap:6px}

/* mejor contraste + estados */
.cal__day{
  aspect-ratio:1/1;display:grid;place-items:center;border:1px solid var(--border);
  border-radius:12px;background:#fff;font-size:14px;cursor:pointer;color:#0f172a;
  transition:background .15s ease, color .15s ease, border-color .15s ease
}
.cal__day:hover{background:#eef2ff;border-color:#c7d2fe;color:#0f172a}
.cal__day--muted{opacity:0;pointer-events:none}
.cal__day--selected{background:#0f172a;color:#fff;border-color:#0f172a}
.cal__day--selected:hover{background:#0f172a;color:#fff;border-color:#0f172a}
.cal__day--full{background:#f1f5f9;color:#94a3b8;text-decoration:line-through;cursor:not-allowed;border-style:dashed}
.cal__day--full:hover{background:#f1f5f9;color:#94a3b8;border-color:#e2e8f0}

.cal__nav{display:flex;gap:8px}

.slot{background:rgba(255,255,255,.9);border:1px solid var(--border);border-radius:18px;padding:16px}
.slot__title{margin:0 0 8px}
.slot__hours{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.slot__btn{padding:10px;border:1px solid var(--border);border-radius:12px;background:#fff;cursor:pointer}
.slot__btn--active{background:#0f172a;color:#fff;border-color:#0f172a}
.slot__btn--active:hover{background:#0f172a;color:#fff;border-color:#0f172a}
.slot__btn--disabled{background:#f1f5f9;color:#94a3b8;border-style:dashed;cursor:not-allowed}
.slot__summary{margin-top:14px;background:#f8fafc;border:1px solid var(--border);border-radius:12px;padding:12px}
.summary__label{color:#475569}
.summary__value{font-weight:700;margin-top:4px}
#goToForm{margin-top:14px}

/* Gallery */
.gallery{margin-top:14px;display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){.gallery{grid-template-columns:repeat(3,1fr)}}
.gallery__item{
  aspect-ratio:16/9;border-radius:16px;background:#e2e8f0;border:1px solid rgba(255,255,255,.7);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.05)
}

/* FAQ */
.faq{display:grid;gap:12px;margin-top:12px}
.faq__item{background:rgba(255,255,255,.9);border:1px solid var(--border);border-radius:14px;padding:12px}
.faq__item summary{cursor:pointer;font-weight:700}
.faq__item p{color:#475569;margin:8px 0 0}

/* Form */
.form{display:grid;gap:12px;background:rgba(255,255,255,.9);border:1px solid var(--border);border-radius:18px;padding:16px}
.form--elevated{box-shadow:0 10px 26px rgba(0,0,0,.08)}
.form--flat{box-shadow:none}
.form input,.form textarea,.form select{width:100%;padding:12px;border:1px solid var(--border);border-radius:12px;background:#fff}
.form__row{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:900px){.form__row{grid-template-columns:1fr 1fr}}

/* Planes mejorados (sin radios rojos) */
.plan{border:1px solid var(--border);border-radius:14px;padding:12px}
.plan--pretty .plan__opt{display:block}
.plan__opt input{display:none}
.plan__card{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-top:8px;background:#fff;border:1px solid var(--border);
  border-radius:12px;padding:14px 16px;cursor:pointer;transition:.2s
}
.plan__card strong{font-size:20px}
.plan__card em{font-style:normal;color:#334155}
.plan__card:hover{border-color:#cbd5e1;background:#f8fafc}
.plan__card--pop{border-color:#fde68a;background:#fffbe8}
.plan__opt input:checked + .plan__card{
  background:var(--primary);color:#fff;border-color:var(--primary)
}
.plan__opt input:checked + .plan__card em{color:#e5e7eb}

/* Opiniones */
.rating{display:flex;flex-direction:row-reverse;gap:6px}
.rating input{display:none}
.rating label{font-size:24px;cursor:pointer;color:#cbd5e1}
.rating input:checked ~ label, .rating label:hover, .rating label:hover ~ label{color:#fbbf24}
.reviews{margin-top:12px;display:grid;gap:12px}
.review{background:#fff;border:1px solid var(--border);border-radius:14px;padding:12px}
.review__meta{font-size:12px;color:#64748b}

/* Tarjetas del flujo (segundo paso / pago) */
.flow-card{
  margin-top:22px;background:#fff;border:1px solid var(--border);border-radius:16px;
  padding:16px;box-shadow:0 10px 26px rgba(0,0,0,.08)
}
.hidden{display:none}

/* Footer */
.footer{border-top:1px solid rgba(255,255,255,.6);background:rgba(255,255,255,.7);padding:24px 0}
.footer__inner{display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:space-between}
@media(min-width:760px){.footer__inner{flex-direction:row}}
.footer__links{display:flex;gap:16px}
.footer__links a{text-decoration:none;color:var(--text);opacity:.85}

/* === 1) Quitar flechitas (spinners) del input de Edad === */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

/* === 2) Select de Localidad con estilo (tipo Petcare) === */
#fLocality {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;

  background:
    linear-gradient(#fff, #fff) padding-box,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'><path fill='%230f172a' d='M7 10l5 5 5-5'/></svg>") no-repeat right 14px center / 18px 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 44px 12px 12px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.04);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
  color: var(--text);
  background-color: #fff;
}
#fLocality:hover { border-color: #cbd5e1; background-color: #f8fafc; }
#fLocality:focus { outline: none; border-color: #94a3b8; box-shadow: 0 0 0 3px rgba(148,163,184,.25); }
#fLocality:invalid { color: #94a3b8; }
#fLocality option { color: var(--text); }

/* === Select custom “lindo” ====================================== */
.nice-select-wrap { position: relative; }
.nice-select-wrap select {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; pointer-events: none;
}
.nice-select-display{
  width:100%; text-align:left; cursor:pointer;
  background:#fff; color:var(--text);
  border:1px solid var(--border); border-radius:12px;
  padding:12px 44px 12px 12px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.04);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.nice-select-display:hover{ background:#f8fafc; border-color:#cbd5e1; }
.nice-select-display:focus{ outline: none; }
.nice-select-caret{
  position:absolute; right:12px; top:50%; translate:0 -50%;
  width:18px; height:18px; pointer-events:none;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'><path fill='%230f172a' d='M7 10l5 5 5-5'/></svg>")
    no-repeat center / 18px 18px;
  transition: transform .15s ease;
}
.nice-select-display[aria-expanded="true"] .nice-select-caret{ transform: rotate(180deg) translateY(50%); }
.nice-select-list{
  position:absolute; z-index:40; left:0; right:0; top:calc(100% + 6px);
  list-style:none; margin:0; padding:6px;
  background:#fff; border:1px solid var(--border); border-radius:12px;
  box-shadow:0 16px 30px rgba(2,6,23,.12);
  max-height:280px; overflow:auto; display:none;
}
.nice-select-display[aria-expanded="true"] + .nice-select-list{ display:block; }
.nice-select-list li{
  padding:10px 12px; border-radius:10px; cursor:pointer;
  transition: background .12s ease, color .12s ease;
}
.nice-select-list li[aria-selected="true"]{ background:#0f172a; color:#fff; }
.nice-select-list li:hover{ background:#eef2ff; }
.nice-select-wrap.is-empty .nice-select-text{ color:#94a3b8; }
.nice-select-display:focus-visible{
  box-shadow: 0 0 0 3px rgba(148,163,184,.25);
  border-color:#94a3b8;
}

/* Campos bloqueados (fecha/hora en el form) */
.locked-input{
  background: #f8fafc;
  color: var(--text);
  border-color: var(--border);
  cursor: not-allowed;
}
.locked-input::-webkit-calendar-picker-indicator{
  opacity: 0; pointer-events: none;
}


/* ====== Ubicación (autocomplete + mapa pequeño) ====== */
.suggest{position:relative;z-index:5;margin-top:6px;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 20px rgba(0,0,0,.08);max-height:220px;overflow:auto}
.suggest.hidden{display:none}
.suggest .s-item{padding:10px 12px;border-top:1px solid #eef2ff;cursor:pointer}
.suggest .s-item:first-child{border-top:0}
.suggest .s-item:hover,.suggest .s-item.active{background:#eef2ff}

.map-wrap{display:block;width:100%}
.map{height:220px;border:1px solid var(--border);border-radius:12px;margin-top:8px}
.hidden{display:none}


/* === Bloque de pago mitad/mitad con línea divisoria === */
.pay-split{
  display:grid; grid-template-columns:1fr 1px 1fr; gap:0;
  background:#fff; border:1px solid var(--border); border-radius:16px; padding:16px;
}
.pay-left,.pay-right{
  display:flex; flex-direction:column; align-items:center; gap:10px; padding:10px;
  text-align:center;
}
.pay-divider{ background:#e5e7eb; }
.pay-sub{ margin:0; color:#475569; }
.pay-brand{ color:#64748b; font-size:12px; }
#mp-qr-1ars{
  width:240px; height:240px; border-radius:12px; border:1px solid #e5e7eb; object-fit:contain;
}
@media (max-width:700px){
  .pay-split{ grid-template-columns:1fr; }
  .pay-divider{ display:none; }
}

/* Header del calendario con flechas a los costados del mes */
.cal__head{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 56px;
  min-height: 44px;
}
.cal__head h3{
  margin: 0;
  font-size: 20px;
  font-weight: 800;
}
.cal__arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  padding: 8px 0;
}
.cal__head .cal__arrow:first-of-type{ left: 8px; }
.cal__head .cal__arrow:last-of-type{  right: 8px; }
@media (max-width: 420px){
  .cal__head{ padding: 0 48px; }
}

/* Bajar un poco el texto del hero en desktop */
@media (min-width: 900px){
  .hero__copy{ margin-top: 27px; }
}

/* 1) Subtítulos (labels) 3px más separados del campo */
.form label{ display:block; margin-bottom: 0; }
.form label > input,
.form label > textarea,
.form label > select{ margin-top: 3px; }

/* Subir más el mapa solo en desktop */
@media (min-width: 900px){
  #addrMap{ margin-top: -53px; }
}
@media (max-width: 899px){
  #addrMap{ margin-top: 8px; }
}

/* ===== Admin Floating Badge — centrado en la navbar ===== */
:root{
  --nav-h: 64px;
  --badge: 48px;
}
.admin-badge{
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + (var(--nav-h) - var(--badge))/2);
  left: calc(env(safe-area-inset-left, 0px) + 12px);
  z-index: 10000;
  width: var(--badge);
  height: var(--badge);
  border-radius: 9999px;
  padding: 0;
  margin: 0;
  border: 2px solid #111827;
  box-sizing: border-box;
  background: rgba(255,255,255,0.94);
  appearance: none;
  -webkit-appearance: none;
  line-height: 1;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06);
  backdrop-filter: saturate(160%) blur(6px);
  -webkit-backdrop-filter: saturate(160%) blur(6px);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.admin-badge.hidden{ display: none; }
.admin-badge:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.16), 0 4px 10px rgba(0,0,0,.08);
  background: rgba(255,255,255,0.98);
}
.admin-badge:active{
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
.admin-badge:focus-visible{
  box-shadow: 0 0 0 3px rgba(59,130,246,.35), 0 6px 18px rgba(0,0,0,.12);
}
.admin-badge__icon{
  width: 22px;
  height: 22px;
  display: block;
  fill: #111827;
  pointer-events: none;
}
header .admin-badge{ position: fixed !important; }
@media (max-width: 420px){
  :root{ --badge: 44px; }
  .admin-badge__icon{ width: 20px; height: 20px; }
}

/* ===== Admin: overlay a pantalla completa ===== */
.overlay{
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10,15,25,.45);
  backdrop-filter: blur(2px);
}
.overlay.hidden{ display:none; }

.ov-card{
  width: 100%;
  max-width: 520px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  padding: 24px 20px 16px;
  font-family: inherit;
}
.ov-title{ font-size: 22px; margin: 0 0 6px; }
.ov-sub{ color:#475569; margin:0 0 16px; }
.ov-row{ display:flex; flex-direction:column; gap:8px; margin:12px 0; }
.ov-input{
  width:100%; padding:12px 14px; border:1px solid #cbd5e1; border-radius:12px; font-size:16px;
}
.ov-code{ letter-spacing:.35em; text-align:center; font-weight:700; font-size:20px; }
.ov-btn{
  display:inline-block; width:100%; padding:12px 14px; border-radius:12px; border:none; cursor:pointer;
  background:#0f172a; color:#fff; font-weight:600; font-size:16px;
}
.ov-btn[disabled]{ opacity:.6; cursor:not-allowed; }
.ov-ghost{ background:#fff; color:#0f172a; border:1px solid #cbd5e1; }
.ov-actions{ display:flex; gap:10px; margin-top:8px; }
.ov-hint{ color:#475569; font-size:13px; margin-top:6px; }
.ov-step{ display:none; }
.ov-step.active{ display:block; }

/* ===== Admin: badge flotante (flecha) ===== */
:root{ --nav-h: 64px; --badge: 48px; }
.admin-badge{
  position: fixed;
  top: calc(env(safe-area-inset-top,0px) + (var(--nav-h) - var(--badge))/2);
  left: calc(env(safe-area-inset-left,0px) + 12px);
  z-index: 10000;
  width: var(--badge);
  height: var(--badge);
  border-radius: 9999px;
  padding: 0; margin: 0;
  border: 2px solid #111827;
  background: rgba(255,255,255,.94);
  display: flex; align-items:center; justify-content:center;
  box-shadow: 0 6px 18px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, background .15s;
}
.admin-badge.hidden{ display:none; }
.admin-badge:hover{ transform: translateY(-1px); }
.admin-badge__icon{ width:22px; height:22px; display:block; fill:#111827; }

/* Evitar scroll del body cuando el overlay está visible (opcional) */
body.has-admin-overlay{ overflow:hidden; }


.plan-edit__row{ display:flex; flex-direction:column; gap:6px }
.plan-edit__label{ font-size:13px; color:#475569 }
.plan-edit__input{
  width:100%; padding:10px 12px; border:1px solid var(--border);
  border-radius:12px; background:#fff; font-size:16px;
}
.plan-edit__actions{ display:flex; gap:10px; margin-top:12px }

/* Items dentro del modal de reservas del día */
.day-item{
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  margin:10px 0;
  background:#fff;
}
.day-item h4{ margin:0 0 6px; font-size:16px; }
.day-item .meta{ color:#475569; margin:2px 0; font-size:14px; }
.day-item .actions{ margin-top:8px; display:flex; gap:10px; }
.day-item .btn-map{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 12px; border-radius:10px; text-decoration:none;
  background:#0ea5e9; color:#fff;
}

/* ===== Árbol de relaciones ===== */
#forestSection .forest__controls{
  display:flex; align-items:center; gap:.75rem; margin: .5rem 0 1rem;
}
#forestSection .btn--ghost{
  background:transparent; border:1px solid #e5e7eb; padding:.5rem .75rem; border-radius:10px; cursor:pointer;
}
#forestSection .forest__root{
  flex:1; text-align:center; font-weight:600;
}
#forestSection .forest__tree ul{ margin-left:1rem; }
#forestSection .forest__tree li{ line-height:1.6; }
#forestSection .forest__tree{
  min-height: 120px; padding: 12px; border:1px solid #e5e7eb; border-radius:12px; background:#fff;
  overflow:auto; max-height: 360px;
}

/* === Overrides / mejoras para Árbol de Referidos === */
#forestSection .container { padding-left: 20px; padding-right: 20px; }
#forestSection .forest__controls{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin:12px 0 16px;
}
#forestSection .btn--icon{
  min-width:40px; height:36px; padding:0 6px;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid #e5e7eb; border-radius:10px; cursor:pointer;
}
#forestSection .forest__root{ text-align:center; font-weight:600; opacity:.95; }
#forestSection .forest__tree{
  background:#fff; border:1px solid #e5e7eb; border-radius:12px;
  padding:16px 20px; min-height:120px; max-height:360px; overflow:auto;
}
#forestSection .forest__tree ul{ margin:6px 0; padding-left:1.25rem; list-style:disc; }
#forestSection .forest__tree li{ margin:6px 0; line-height:1.6; }
#forestSection .forest__tree li > strong{ font-weight:600; }

/* ===== Sección de Alcance (Reach) ===== */
.admin-only[hidden]{ display:none!important; }
.card { background: var(--paper,#fff); border-radius: 14px; padding: 16px; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.muted { color: var(--muted,#555); }

.reach-grid { display: grid; gap: 16px; grid-template-columns: 1.2fr 1fr; }
.reach-map svg { width: 100%; height: auto; display: block; }
.shape-pba { fill: #e8f4ff; stroke: #7aa7c7; stroke-width: 2; }
.shape-caba { fill: #ffe7e7; stroke: #c77a7a; stroke-width: 2; }
.label { font-size: 12px; fill: #333; }

#reachSection .reach-controls .row { display: flex; gap: 8px; align-items: center; margin: 8px 0; flex-wrap: wrap; }
#reachSection .reach-controls label { width: 140px; font-weight: 600; }
#reachSection .reach-controls select,
#reachSection .reach-controls input { flex: 1 1 220px; padding: 6px 8px; }
#reachSection .reach-controls .end { justify-content: flex-end; }


/* ⬇⬇⬇ Encapsulado para que NO pise los botones globales */
#reachSection .btn {
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid #ddd;
  background: #fff;
  color: var(--text);
  cursor: pointer;
}
#reachSection .btn.primary {
  background: var(--blue, #0ea5e9);
  color: #fff;
  border-color: transparent;
}
/* ⬆⬆⬆ Fin del encapsulado */

.tags { display: flex; gap: 8px; flex-wrap: wrap; }
.tag { background: #eef3ff; border: 1px solid #cfdcff; padding: 6px 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; }
.tag .x { cursor: pointer; font-weight: 700; }

.msg { margin-left: 10px; font-size: 13px; }
.msg.ok { color: #1a7f37; }
.msg.err { color: #b42318; }

/* Zonas con restricciones: compacto */
.advisory {
  margin-top: 8px;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  padding: 8px 12px;
  background: #f8fafc;
}
.advisory > summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
.advisory > summary::-webkit-details-marker { display:none; }
.badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 12px;
  border-radius: 999px;
  background: #e5edff;
  border: 1px solid #cfdcff;
}
.advisory-note {
  margin: 8px 0 6px;
  font-size: 12px;
  color: var(--muted, #5b6573);
}
.pill-list { display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none; }
.pill {
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #fff;
  font-size: 12px;
  white-space: nowrap;
}


.cards--reviews-admin { display:grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap:12px; }
.card--review-admin .review__stars { font-size: 18px; margin: 6px 0; }
.card--review-admin .review__comment { white-space: pre-wrap; }
.btn--danger { background:#dc2626; color:#fff; }


/* ===== Admin: Zonas (compacto y centrado) ===== */
#zonesPanel { max-width: 900px; margin: 24px auto; }

#zonesPanel .reach-controls--compact {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Form en columna: Provincia arriba, Ciudad/Partido debajo */
#zonesPanel .zp-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
}
#zonesPanel .zp-field label {
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
}

/* Selects “lindos” con caret */
#zonesPanel .select { position: relative; }
#zonesPanel select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 12px 40px 12px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.04);
  font: inherit;
  line-height: 1.2;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
#zonesPanel select:hover { border-color: #cbd5e1; background-color: #f8fafc; }
#zonesPanel select:focus { outline: none; border-color: #94a3b8; box-shadow: 0 0 0 3px rgba(148,163,184,.25); }
#zonesPanel .sel-caret {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 18px;
  color: #111827;
  opacity: .6;
}

/* Botones y orden */
#zonesPanel #btnAddZone,
#zonesPanel #zonesSaveBtn {
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
}
#zonesPanel #btnAddZone { margin-top: 4px; }

/* Guardar debajo del form */
#zonesPanel .zp-save {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

/* Lista de zonas debajo del título */
#zonesPanel .zp-list-title {
  display: block;
  font-weight: 600;
  margin: 6px 0 6px;
}
#zonesPanel .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* Responsive */
@media (min-width: 720px) {
  #zonesPanel .zp-form { gap: 14px; }
  #zonesPanel #btnAddZone,
  #zonesPanel #zonesSaveBtn { width: 280px; }
}


/* Flechas del Árbol de relaciones en negro (match con el resto) */
#forestSection .btn--icon{
  min-width:40px; height:36px; padding:0 6px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#0f172a;          /* negro */
  color:#fff;
  border:none;
  border-radius:12px;
  cursor:pointer;
  box-shadow:0 4px 10px rgba(0,0,0,.12);
  transition:opacity .15s ease, transform .08s ease;
}
#forestSection .btn--icon:hover{ opacity:.92; }
#forestSection .btn--icon:active{ transform:translateY(1px); }
#forestSection .btn--icon:disabled{
  opacity:.5; cursor:default; transform:none;
}

/* wrapper y visibilidad */
.tm-select{ position:absolute !important; opacity:0 !important; pointer-events:none; width:0; height:0; }
.tm-select-wrap{ position:relative; display:block; }

/* botón cerrado */
.tm-select-btn{
  display:flex; align-items:center; justify-content:space-between;
  height:44px; padding:0 14px; width:100%;
  background:#0b1324; color:#fff; font-weight:600;
  border:1px solid #0b1324; border-radius:12px; cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.tm-select-btn:focus{ outline:2px solid #101827; outline-offset:2px; }

/* flecha */
.tm-select-btn::after{
  content:""; width:10px; height:10px; margin-left:10px; flex:0 0 10px;
  background:
    linear-gradient(45deg, transparent 50%, #fff 50%) left,
    linear-gradient(-45deg, transparent 50%, #fff 50%) right;
  background-size:50% 100%; background-repeat:no-repeat;
}

/* lista (siempre debajo) */
.tm-select-list{
  position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:9999;
  max-height:260px; overflow:auto; padding:6px;
  background:#111827; color:#fff; border:1px solid #0b1324; border-radius:12px;
  box-shadow:0 10px 24px rgba(0,0,0,.35); display:none;
}
.tm-open .tm-select-list{ display:block; }

/* ítems */
.tm-option{
  padding:10px 12px; border-radius:8px; cursor:pointer; line-height:1.2;
}
.tm-option:hover, .tm-option[aria-selected="true"]{ background:#1f2937; }

/* por si el bloque es muy alto, deja aire abajo para que no tape */
.tm-select-wrap{ margin-bottom:12px; }


/* === Reseñas: 4 por vista, sin flechas ni barra, sombras completas (FINAL) === */
#resenas .h-actions.is-hidden { display: none !important; }

/* La viewport se desborda 16px a cada lado (igual al padding del .container)
   para que no se vea ningún corte y las sombras respiren. */
#resenas .rev-viewport{
  overflow: hidden;
  position: relative;
  margin-left: -16px;
  margin-right: -16px;
  padding-left: 16px;
  padding-right: 16px;
}

/* Tira scrolleable con drag; sin barra visible */
#resenas .rev-strip{
  --gap: 16px;
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  padding: 0;                 /* sin padding para que 1ª y última queden llenas */
  -ms-overflow-style: none;   /* IE/Edge legacy */
  scrollbar-width: none;      /* Firefox */
}
#resenas .rev-strip::-webkit-scrollbar{ display: none; } /* WebKit */

/* 4 tarjetas exactas dentro del ancho del contenedor */
#resenas .rev-card{
  flex: 0 0 calc((100% - 3*var(--gap)) / 4);
  max-width: calc((100% - 3*var(--gap)) / 4);
  scroll-snap-align: start;

  background:#fff;
  border-radius:14px;
  padding:14px 16px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* Tipografía de la tarjeta */
#resenas .rev-stars{ font-size:18px; letter-spacing:1px; }
#resenas .rev-name{ font-weight:600; color:#0f172a; }
#resenas .rev-text{ color:#374151; line-height:1.4; }
#resenas .rev-date{ color:#6b7280; font-size:12px; }

/* Responsivo: 3 / 2 / 1 por vista */
@media (max-width: 1200px){
  #resenas .rev-card{
    flex-basis: calc((100% - 2*var(--gap)) / 3);
    max-width: calc((100% - 2*var(--gap)) / 3);
  }
}
@media (max-width: 900px){
  #resenas .rev-card{
    flex-basis: calc((100% - 1*var(--gap)) / 2);
    max-width: calc((100% - 1*var(--gap)) / 2);
  }
}
@media (max-width: 620px){
  #resenas .rev-card{ flex-basis: 100%; max-width: 100%; }
}

#fMsg {
  resize: none;
}