/* Etapa 2 del rediseño: estilos propios de las pantallas del grupo "propiedades".
   Solo reglas que el sistema de componentes de app.css no cubre. */

/* ---------- Propiedades: encabezado, tope del plan con barra, filtros ---------- */
.prop-cab{align-items:flex-start; gap:var(--e3) var(--e4); margin-bottom:var(--e3)}
.prop-cab-tit{flex:1 1 320px; min-width:0}
.prop-cab-tit .sub{margin:var(--e1) 0 0}
.prop-cab > .prop-alta{margin-left:0; align-items:center; gap:var(--e2)}
.prop-plan{width:210px; max-width:100%; margin:0; align-self:center}
.prop-plan .prop-tope{margin:0 0 var(--e1); font-size:var(--t-sm); font-weight:600}
.prop-plan-barra{height:6px; border-radius:var(--r-pill); background:var(--line); overflow:hidden}
.prop-plan-barra > i{display:block; height:100%; background:var(--accent); border-radius:inherit}
.prop-plan-barra.llena > i{background:var(--warn)}
.prop-filtros{display:flex; flex-wrap:wrap; align-items:center; gap:var(--e2); margin-bottom:var(--e3)}
.prop-filtros .prop-buscar{width:300px; max-width:100%; border-radius:var(--r-pill); padding-left:var(--e3)}
.prop-filtros select{width:auto; min-width:150px; border-radius:var(--r-pill); font-weight:600}
.prop-ocupa{display:flex; flex-direction:column; gap:5px; width:90px}
.prop-ocupa b{font-weight:600}
.tabla-prop .prop-id .dir{line-height:1.4}
@media (max-width:640px){
  .prop-cab > .prop-alta{width:100%}
  .prop-plan{width:100%}
  .prop-filtros .prop-buscar{width:100%}
  .prop-filtros select{flex:1 1 140px}
}

/* ---------- el link directo: campo + Copiar en un renglón ---------- */
.link-directo-fila{display:flex; align-items:center; gap:var(--e1); flex-wrap:wrap; margin-bottom:var(--e1)}
.link-directo-fila .link-directo{margin-right:0}

/* ---------- el menú de la fila (details nativo, sin JS) ---------- */
.prop-menu-celda{width:1%; white-space:nowrap; text-align:right}
details.fila-menu{position:relative; display:inline-block}
details.fila-menu > summary{list-style:none}
details.fila-menu > summary::-webkit-details-marker{display:none}
.fila-menu-lista{position:absolute; right:0; top:calc(100% + 4px); z-index:5; min-width:170px; text-align:left;
  display:flex; flex-direction:column; padding:var(--e1); background:var(--bg);
  border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--sh-float)}
.fila-menu-lista a{padding:8px 12px; border-radius:var(--r-sm); color:var(--ink); text-decoration:none; font-weight:500}
.fila-menu-lista a:hover{background:var(--crema)}
.fila-menu-lista a.peligro{color:var(--err)}
.fila-menu-lista a.peligro:hover{background:var(--err-bg)}

/* ---------- Calculadora: formulario a la izquierda, el desglose a la derecha ---------- */
.calc-pagina{max-width:1160px}
.calc-grid{display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:var(--e3); align-items:start}
.calc-grid > .card{margin-bottom:0}
.calc-grid .card-title{margin:0 0 var(--e3); font-size:var(--t-lg); font-weight:600}
.calc-calcular{width:100%}
.calc-noches{width:140px}
@media (max-width:820px){
  .calc-grid{grid-template-columns:minmax(0, 1fr)}
}
.calc-grid > .ari-publicado{background:var(--bg); border-radius:var(--r-lg); box-shadow:var(--sh-float); padding:var(--e4); border-top:0}

/* El desglose como recibo (maqueta Calculadora): cada línea es rótulo a la
   izquierda con su explicación debajo, y el monto a la derecha. Las
   explicaciones se conservan --son lo que dice por qué cada cifra es lo que
   es--, solo cambian de columna a segundo renglón. */
.calc-grid .ari-publicado table, .calc-grid .ari-publicado tbody{display:block; width:100%}
.calc-grid .ari-publicado tr{display:grid; grid-template-columns:minmax(0, 1fr) auto; column-gap:var(--e3);
  align-items:baseline; padding:var(--e2) 0; border-top:1px solid var(--line)}
.calc-grid .ari-publicado tr:first-child{border-top:0}
.calc-grid .ari-publicado th{grid-column:1; text-align:left; font-weight:600; padding:0; border:0; background:none}
.calc-grid .ari-publicado td{padding:0; border:0; background:none}
.calc-grid .ari-publicado td:nth-child(2){grid-column:2; grid-row:1; text-align:right; font-weight:600;
  font-variant-numeric:tabular-nums; white-space:nowrap}
.calc-grid .ari-publicado td.hint{grid-column:1; grid-row:2; text-align:left; font-weight:400;
  font-size:var(--t-sm); color:var(--mute); margin-top:2px; white-space:normal}
.calc-grid .ari-publicado td strong{font-size:var(--t-lg); font-weight:700}
.calc-grid .ari-publicado .ari-h3{margin:0 0 var(--e2); font-size:var(--t-lg); font-weight:600}

/* La píldora que ya trae su propio glifo no lleva además el punto de color. */
.pill.sin-punto::before{content:none}

/* ---------- Tipo de alojamiento: cada opción es una tarjeta con su glosa ----------
   El mismo patrón de las opciones del alta de cuenta (`fieldset.opciones`), para
   el grupo de radios que usan el alta a mano y el asistente de Airbnb. */
p.opcion{background:var(--bg); border:1px solid var(--line); border-radius:var(--r-md);
  padding:12px var(--e3); margin-bottom:var(--e2); transition:border-color .15s ease}
p.opcion:hover, p.opcion:focus-within{border-color:var(--accent)}
p.opcion:has(input:checked){border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent)}
p.opcion label.marcable{font-weight:600; accent-color:var(--accent)}
p.opcion .hint.glosa{margin-top:2px}

/* En el teléfono la tabla de propiedades se apila: cada fila es una tarjeta y
   no hay que arrastrar de costado para llegar al link de reserva directa. */
@media (max-width:640px){
  .tabla-prop, .tabla-prop tbody, .tabla-prop tr, .tabla-prop td{display:block; width:auto}
  .tabla-prop thead{display:none}
  .tabla-prop tr{position:relative; padding:var(--e3) 0; border-bottom:1px solid var(--line)}
  .tabla-prop tr:last-child{border-bottom:0}
  .tabla-prop td{padding:var(--e1) var(--e3); border:0}
  .tabla-prop td.prop-menu-celda{position:absolute; top:var(--e2); right:var(--e2); width:auto; padding:0}
  .link-directo-fila .link-directo{width:100%}
}

/* ---------- Tarifas: estado de sincronización y "¿Cuánto me deja?" ---------- */
.cal-sync-tabla{width:100%; border-collapse:collapse; margin:var(--e2) 0 var(--e3)}
.cal-sync-tabla th, .cal-sync-tabla td{padding:var(--e1) var(--e2); text-align:left; vertical-align:top}
.cal-sync-aviso td{padding-top:0}
.cal-sync-cambios{list-style:none; margin:var(--e2) 0; padding:0; display:flex; flex-direction:column; gap:var(--e2)}
.cal-sync-cambios .pill{margin-right:var(--e1)}
.cal-cuanto{margin-bottom:var(--e3)}
.cal-cuanto > summary{cursor:pointer; font-weight:600}
.cal-cuanto .ari-campos{margin-top:var(--e2)}

/* ---------- Tarifas: encabezado con acciones, estado del envío y cuerpo en dos columnas ---------- */
.tar-cab{display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:var(--e3) var(--e4); margin-bottom:var(--e3)}
.tar-tit{flex:1 1 320px; min-width:0}
.tar-tit .sub{margin:var(--e1) 0 0}
.tar-acciones{display:flex; flex-wrap:wrap; align-items:center; gap:var(--e2)}
.tar-acciones .cal-publicar{margin:0}
.cal-envio{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--e2) var(--e4);
  padding:var(--e3) var(--e4); margin:0 0 var(--e3)}
.cal-envio-cuerpo{flex:1 1 420px; min-width:0}
.cal-envio-cuerpo p{margin:0 0 var(--e1)}
.cal-envio-cuerpo p:last-child{margin-bottom:0}
.cal-envio-acc{display:flex; flex-wrap:wrap; gap:var(--e2)}
.cal-envio .cal-frescura{margin:0 0 var(--e1)}
.cal-nav{margin-top:var(--e2)}
@media (max-width:640px){
  .cal-nav{flex-wrap:wrap}
  .cal-nav a{white-space:nowrap}
  .cal-nav .cal-salto{margin-left:0; width:100%}
  .cal-nav .cal-salto select{flex:1 1 0}
}
@media (min-width:1024px){
  main .cal-cuerpo{display:grid; grid-template-columns:minmax(0, 1fr) 360px; gap:var(--e3) var(--e4); align-items:start}
  main .cal-cuerpo > .cal-grilla{grid-column:1; grid-row:1 / span 6}
  main .cal-cuerpo > :not(.cal-grilla){grid-column:2; margin-top:0}
  main .cal-cuerpo > .ari-bulk{position:sticky; top:var(--e3)}
}

/* ---------- Propiedades (segunda pasada, maqueta Propiedades.dc.html) ---------- */
.prop-plan .prop-tope{display:flex; justify-content:space-between; align-items:baseline; gap:var(--e2)}
.prop-plan .prop-tope a{color:var(--accent); text-decoration:underline; font-weight:600}
.tabla-prop{table-layout:fixed; width:100%}
.tabla-prop th:nth-child(1){width:23%}
.tabla-prop th:nth-child(2){width:20%}
.tabla-prop th:nth-child(3){width:28%}
.tabla-prop th:nth-child(4){width:9%}
.tabla-prop th:nth-child(5){width:14%}
.tabla-prop th:nth-child(6){width:6%}
.tabla-prop td{vertical-align:middle; padding-top:var(--e3); padding-bottom:var(--e3)}
.tabla-prop .prop-tile{width:44px; height:44px; border-radius:12px; flex:none; display:inline-flex; align-items:center;
  justify-content:center; font-weight:700; font-size:14px}
.pp-chip{display:inline-flex; align-items:center; gap:7px; height:28px; padding:0 10px 0 4px; margin:0 6px 6px 0;
  border-radius:var(--r-pill); border:1px solid var(--line-strong); background:var(--bg); font-size:var(--t-sm); font-weight:600}
.pp-chip .lg{width:20px; height:20px; border-radius:50%; background:var(--crema); color:var(--accent); font-size:11px;
  font-weight:700; display:flex; align-items:center; justify-content:center}
.pp-chip .dot{width:8px; height:8px; border-radius:50%; background:var(--ok)}
.pp-chip.neu .dot{background:var(--line-input)}
/* El link directo: campo en píldora con Copiar adentro, y debajo Regenerar / Desactivar. */
.link-directo-fila{flex-wrap:nowrap; align-items:center; border:1px solid var(--line-input); border-radius:var(--r-pill);
  background:var(--bg); padding:3px 4px 3px 14px; min-width:0}
.link-directo-fila .link-directo{flex:1; min-width:0; width:auto; border:0; background:transparent; padding:0;
  font-size:var(--t-sm); color:var(--mute); text-overflow:ellipsis; box-shadow:none}
.link-directo-fila .btn-chico{flex:none}
.lk-act{display:flex; flex-wrap:wrap; gap:var(--e2); margin-top:var(--e2)}
.tabla-prop td a{white-space:normal}
.tabla-prop td .hint.chica{display:block; margin:6px 0 0; white-space:normal}
.tabla-prop td .dato-chico{margin-top:6px}
.prop-cab .prop-plan{width:240px}
@media (max-width:640px){
  .tabla-prop{table-layout:auto}
  .tabla-prop th, .tabla-prop td{width:auto}
}

/* "Agregar una propiedad a mano": el formulario como el artboard, campos en dos columnas y radios en tarjeta. */
/* Abierto, el formulario baja a su propio renglón, a todo el ancho de la cabecera. */
.prop-cab:has(details.alta[open]) > .prop-alta{flex-basis:100%}
.prop-alta details.alta[open]{flex-basis:100%; order:5}
.prop-alta form.card{padding:22px 24px; margin-top:var(--e2); max-width:820px}
.prop-alta form.card .grid{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:var(--e3) var(--e4)}
.prop-alta form.card .grid > .ancho{grid-column:1 / -1}
.prop-alta form.card label .req{color:var(--err); margin-left:2px}
@media (max-width:640px){ .prop-alta form.card .grid{grid-template-columns:minmax(0, 1fr)} }

/* Dadas de baja: tarjeta plegable con una lista nombre / fecha y quién. */
.pp-bajas .kv{display:grid; grid-template-columns:1fr auto; gap:0}
.pp-bajas .kv dt, .pp-bajas .kv dd{margin:0; padding:var(--e2) 0; border-top:1px solid var(--line)}
.pp-bajas .kv dd{text-align:right; font-weight:500}
.pp-bajas .kv dt:first-of-type, .pp-bajas .kv dt:first-of-type + dd{border-top:0}

/* ---------- Canales: una tarjeta por canal y chip de canal en la lista ---------- */
.canal-tarjetas{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:var(--e3); margin:var(--e2) 0 var(--e4)}
.canal-tarjeta{display:flex; flex-direction:column; gap:var(--e1)}
.canal-tarjeta-cab{display:flex; align-items:center; gap:var(--e2)}
.canal-logo{display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:var(--r-md);
  background:var(--crema); color:var(--ink); font-weight:700}
.canal-nombre{font-weight:600; margin-bottom:2px}
.canal-cuenta{margin:var(--e1) 0 0}
.canal-tarjeta .btn-chico{align-self:flex-start; margin-top:auto}
.canal-chip{display:inline-block; margin-left:var(--e1); padding:1px 8px; border-radius:var(--r-pill); background:var(--crema);
  color:var(--ink); font-size:.8em; font-weight:500; white-space:nowrap}

/* ---------- Sitio web: el editor de una puerta (maqueta SitioWebEditor) ----------
   Dos columnas en escritorio (secciones 5fr / vista previa 7fr, la vista previa
   fija al hacer scroll) y una sola bajo 980px. Cada sección es un `<details>`
   nativo, abierto de entrada: un error de validación nunca queda escondido en
   una sección plegada. Sin JavaScript. */
.sitio-ed{max-width:1240px}
.sitio-tabs-fila{display:flex; flex-wrap:wrap; align-items:flex-end; gap:0 var(--e4);
  border-bottom:1px solid var(--line); margin-bottom:var(--e4)}
.sitio-tabs-fila .chips.tabs{border-bottom:0; margin:0; flex:0 1 auto}
.sitio-nota{margin:0 0 var(--e3) auto; font-size:var(--t-sm); color:var(--mute)}
.sitio-nota a{color:var(--accent); font-weight:600; text-decoration:none}
.sitio-nota a:hover{text-decoration:underline}

.sitio-cab{display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between;
  gap:var(--e3) var(--e5); margin-bottom:var(--e4)}
.sitio-cab h1{margin:0; line-height:1.2}
.sitio-cab-info{min-width:0; flex:1 1 360px}
.sitio-prop{display:inline-flex; align-items:center; gap:var(--e2); height:40px; padding:0 16px;
  border:1px solid var(--line-input); border-radius:var(--r-pill); background:var(--bg);
  font-weight:600; font-size:var(--t-sm); color:var(--ink); text-decoration:none; margin-bottom:var(--e3)}
.sitio-prop svg{width:16px; height:16px}
.sitio-url{display:flex; flex-wrap:wrap; align-items:center; gap:var(--e2); margin-top:var(--e2)}
.sitio-url .u{font-weight:600; font-variant-numeric:tabular-nums; overflow-wrap:anywhere}
.sitio-cab-acc{display:flex; flex-wrap:wrap; align-items:center; gap:var(--e3)}
.sitio-cab-acc form{margin:0}
.sitio-cab-acc .btn-icono{width:44px; min-height:44px; border-color:var(--line-input)}
.sitio-menu{position:relative}
.sitio-menu > summary{list-style:none; display:inline-flex; align-items:center; justify-content:center; cursor:pointer}
.sitio-menu > summary::-webkit-details-marker{display:none}
.sitio-menu-lista{position:absolute; right:0; top:calc(100% + 6px); z-index:5; width:300px; max-width:calc(100vw - 32px);
  padding:var(--e1); background:var(--bg); border:1px solid var(--line-strong); border-radius:var(--r-md);
  box-shadow:var(--sh-lift)}
.sitio-menu-lista form{margin:0}
.sitio-menu-lista button{display:block; width:100%; height:auto; min-height:0; text-align:left; border:0;
  background:transparent; border-radius:var(--r-sm); padding:10px 12px; font-size:var(--t-md);
  font-weight:600; color:var(--err)}
.sitio-menu-lista button:hover{background:var(--crema)}
.sitio-menu-lista button span{display:block; font-weight:500; color:var(--mute); font-size:var(--t-sm); margin-top:2px}

/* La tarjeta de Airbnb: icono, texto y botón en una fila. */
.sitio-airbnb-cab{display:flex; align-items:center; gap:var(--e3)}
.sitio-airbnb-cab .ic, .sitio-sec-h .ic{flex:none; width:40px; height:40px; border-radius:50%;
  background:var(--brand-tint); color:var(--accent); display:flex; align-items:center; justify-content:center}
.sitio-airbnb-cab .ic svg, .sitio-sec-h .ic svg{width:20px; height:20px}
.sitio-airbnb-cab .t{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px}
.sitio-airbnb-cab .t b{font-size:var(--t-lg); font-weight:600}
.sitio-airbnb-cab .t span{font-size:var(--t-sm); color:var(--mute); line-height:1.5}
.sitio-airbnb-cab form{flex:none; margin:0}
.sitio-airbnb .card-aviso{margin:var(--e3) 0 0}

/* Los números: rótulo arriba, cifra abajo. Solo lo que existe (solicitudes de
   ESTA puerta); "Visitas" no se cuenta: el sitio va sin cookies ni rastreo. */
.sitio-kpis{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--e3); margin:0 0 var(--e4)}
.sitio-kpi{display:flex; flex-direction:column; gap:2px; padding:var(--e3) var(--e4);
  background:var(--bg); border-radius:var(--r-lg); box-shadow:var(--sh-float)}
.sitio-kpi .rot{font-size:var(--t-xs); font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--mute)}
.sitio-kpi .cifra{font-size:var(--cifra); font-weight:600; letter-spacing:-.02em; line-height:1.2;
  font-variant-numeric:tabular-nums}
.sitio-publicar:not(:has(*)){display:none}

/* Las dos columnas. */
.sitio-grid{display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:var(--e4); align-items:start}
.sitio-acc{display:flex; flex-direction:column; gap:var(--e3); min-width:0}
.sitio-acc > .card, .sitio-acc > form > .card{margin-bottom:0}
.sitio-acc > form{display:flex; flex-direction:column; gap:var(--e3)}

/* Una sección: cabecera con icono, título y resumen; adentro, el contenido. */
.card.sitio-sec{padding:0}
.sitio-sec-h{display:flex; align-items:center; gap:var(--e3); padding:var(--e3) var(--e4); cursor:pointer; list-style:none}
.sitio-sec-h::-webkit-details-marker{display:none}
.sitio-sec-h .t{flex:1 1 auto; min-width:0; display:flex; flex-direction:column}
.sitio-sec-h .t b{font-size:var(--t-lg); font-weight:600}
.sitio-sec-h .t span{font-size:var(--t-sm); color:var(--mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sitio-sec-h .pill{flex:none}
.sitio-sec-h .chev{flex:none; color:var(--mute); display:flex}
.sitio-sec-h .chev svg{width:18px; height:18px; transition:transform .15s ease}
.sitio-sec:not([open]) .sitio-sec-h .chev svg{transform:rotate(-90deg)}
.sitio-sec-h:focus-visible{outline:3px solid var(--accent-hover); outline-offset:-3px; border-radius:var(--r-lg)}
.sitio-sec-b{padding:var(--e3) var(--e4) var(--e4); border-top:1px solid var(--line)}
.sitio-sec-b > .card-aviso:first-child{margin-top:0}
@media (max-width:1180px){ .sitio-sec-b .grid{grid-template-columns:minmax(0, 1fr)} }

/* Fotos: mosaico de tres con la portada marcada, borrar arriba a la derecha y
   el orden abajo a la izquierda (son formularios, cero JavaScript). */
.sitio-ed .sitio-fotos{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--e2); margin-bottom:var(--e3)}
.sitio-ed .sitio-foto{position:relative; display:block}
.sitio-ed .sitio-foto .evid-foto{display:block; width:100%}
.sitio-ed .sitio-foto img, .sitio-ed .sitio-foto .sin-mini{width:100%; height:auto; aspect-ratio:4 / 3;
  object-fit:cover; border-radius:var(--r-md); border:0; background:var(--crema)}
.sitio-ed .sitio-foto .sin-mini{display:flex; align-items:center; justify-content:center}
.sitio-ed .sitio-foto .evid-borrar{top:6px; right:6px}
.sitio-ed .sitio-foto .evid-borrar button{background:var(--bg); color:var(--ink); border:1px solid var(--line-strong)}
.sitio-ed .sitio-foto .portada{position:absolute; left:8px; top:8px; background:var(--accent); color:#fff;
  border-radius:var(--r-pill); font-size:var(--t-xs); font-weight:700; padding:0 8px; line-height:20px}
.sitio-ed .sitio-orden{position:absolute; left:6px; bottom:6px; gap:4px}
.sitio-ed .sitio-orden form{margin:0}
.sitio-ed .sitio-orden button{width:28px; height:28px; min-width:0; min-height:0; padding:0; border-radius:50%;
  background:var(--bg); border:1px solid var(--line-strong); color:var(--ink); font-size:var(--t-sm)}
.sitio-ed .sitio-orden button[disabled]{opacity:.4}

/* Las amenidades como chips: la casilla sigue siendo la del formulario. */
.sitio-ed .sitio-amenidades{display:flex; flex-wrap:wrap; gap:var(--e2)}
.sitio-ed .sitio-amenidades .marcable{display:inline-flex; align-items:center; height:34px; padding:0 14px;
  margin:0; border:1px solid var(--line-input); border-radius:var(--r-pill); background:var(--bg);
  font-size:var(--t-sm); font-weight:600; cursor:pointer}
.sitio-ed .sitio-amenidades .marcable input{position:absolute; opacity:0; width:1px; height:1px}
.sitio-ed .sitio-amenidades .marcable:has(input:checked){background:var(--brand-tint);
  border-color:var(--accent); color:var(--accent)}
.sitio-ed .sitio-amenidades .marcable:has(input:focus-visible){outline:3px solid var(--accent-hover); outline-offset:2px}

/* Dirección del sitio publicada: el subdominio como dato, no como campo. */
.sitio-ed .sitio-dir{font-weight:600; font-size:var(--t-md)}

/* La barra de "cambios sin guardar": píldora oscura con el botón en ámbar. */
.sitio-ed #barra-cambios{background:var(--dark); color:var(--on-dark); border:0; border-radius:var(--r-pill);
  padding:var(--e1) var(--e1) var(--e1) var(--e5); font-weight:600}
.sitio-ed #barra-cambios button{background:var(--brand); color:var(--brand-ink); border-color:transparent}

/* La vista previa: un "navegador" con su barra de dirección, fijo al scroll. */
.sitio-pv{position:sticky; top:var(--e4); min-width:0}
.sitio-pv-h{display:flex; align-items:center; justify-content:space-between; gap:var(--e3); margin-bottom:var(--e3)}
.sitio-pv-h h2{margin:0; font-size:var(--t-h2); font-weight:600}
.sitio-navegador{background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-lift); overflow:hidden}
.sitio-navegador-barra{display:flex; align-items:center; gap:var(--e3); padding:var(--e2) var(--e3);
  background:var(--crema); border-bottom:1px solid var(--line)}
.sitio-navegador-barra .puntos{display:flex; gap:var(--e1)}
.sitio-navegador-barra .puntos i{display:block; width:10px; height:10px; border-radius:50%; background:var(--line-strong)}
.sitio-navegador-barra .urlbox{flex:1; min-width:0; height:28px; display:flex; align-items:center; padding:0 12px;
  border-radius:var(--r-pill); background:var(--bg); border:1px solid var(--line); color:var(--mute);
  font-size:var(--t-sm); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sitio-previa{display:block; width:100%; height:clamp(480px, calc(100vh - 230px), 760px); border:0; border-radius:0; background:var(--bg); margin:0 auto}
.sitio-previa-vacia{padding:var(--e5) var(--e4); margin:0}
/* Modo teléfono: el mismo iframe a 375px, centrado. Sin JavaScript: lo decide
   el radio de arriba. */
.sitio-pv:has(#pv-tel:checked) .sitio-previa{width:375px; max-width:100%; border-left:1px solid var(--line); border-right:1px solid var(--line)}
.sitio-pv:has(#pv-tel:checked) .sitio-navegador{background:var(--crema)}

@media (max-width:980px){
  .sitio-grid{grid-template-columns:minmax(0, 1fr)}
  .sitio-pv{position:static}
}
@media (max-width:640px){
  .sitio-kpis{grid-template-columns:1fr}
  .sitio-previa{height:480px}
  .sitio-nota{margin-left:0}
  .sitio-cab-acc{width:100%}
  .sitio-cab-acc > .btn, .sitio-cab-acc > form{flex:1 1 auto}
  .sitio-cab-acc > form .btn{width:100%}
  .sitio-airbnb-cab{flex-wrap:wrap}
  .sitio-airbnb-cab form{width:100%}
  .sitio-airbnb-cab form button{width:100%}
  .sitio-sec-h{padding:var(--e3)}
  .sitio-sec-b{padding:var(--e3)}
}

/* ---------- Editar datos: el aviso fiscal del tipo de alojamiento ---------- */
.aviso-fiscal{border-left:3px solid var(--warn); padding-left:var(--e2); margin:var(--e1) 0 var(--e2)}

/* ---------- menú ⋯ de la fila: que no lo recorte la tabla ----------
   `.tabla-scroll` tiene `overflow-x:auto`, y eso también recorta en vertical:
   con una o dos filas el menú abierto quedaba cortado. Mientras un menú está
   abierto, el contenedor deja ver lo que sobresale. */
.tabla-scroll:has(.fila-menu[open]){overflow:visible}