:root {
  --anil: #0A0A0A;
  --anil-2: #1E1E1E;
  --sand: #FFFFFF;
  --sand-2: #F5F5F5;
  --line: #E4E4E4;
  --gold: #C9A227;
  --text: #1f1f1f;
  --muted: #6b6b6b;

  /* Paleta "Perfil" — tonos cálidos inspirados en el resto del sitio
     (negro/oro) pero con acentos volcánicos/tierra en vez de rojo-verde
     genéricos, para que las tarjetas de estado se sientan parte de la
     misma marca en lugar de un panel de alertas tipo bootstrap. */
  --pf-ink: #14110E;
  --pf-ink-2: #241F19;
  --pf-cream: #FBF8F1;
  --pf-cream-2: #F3EDDF;
  --pf-gold: #C9A227;
  --pf-gold-light: #E7C567;
  --pf-gold-soft: #F7EDCE;
  --pf-line: #E9E1CE;
  --pf-muted: #7C7466;
  --pf-emerald: #1F5C4C;
  --pf-emerald-soft: #E3EFE7;
  --pf-amber: #A85D2B;
  --pf-amber-soft: #F6E7D8;
  --pf-rose: #8C3B34;
  --pf-rose-soft: #F5E4E1;
  --pf-shadow: 0 18px 40px rgba(20, 17, 14, 0.08);

  --container-width: 1140px; /* 1200px - 5% */
}

* { box-sizing: border-box; }
/* El atributo hidden debe ganar siempre, aunque algún componente fije su
   propio display (flex/grid/etc.) con la misma especificidad. */
[hidden] { display: none !important; }
body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  color: var(--text);
  background: var(--sand);
}
a { text-decoration: none; color: inherit; }
/* Íconos de línea inline (Lucide) — ver icon() en app/views/perfil.php.
   display:block les quita el hueco de "descender" que un <svg> inline
   normal deja debajo (comportamiento de line-height heredado de texto). */
.icon { width: 1em; height: 1em; display: block; }
button, input, select, textarea { font: inherit; }

.rt-root { min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255,255,255,0.94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}
.topbar__inner {
  max-width: var(--container-width); margin: 0 auto; padding: 16px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.brand__mark { flex-shrink: 0; }
.brand span { display: block; font-size: 11px; letter-spacing: 0.2em; color: var(--gold); }
.topbar__nav { display: flex; gap: 12px; }
.topbar__nav a {
  padding: 12px 19px; border-radius: 999px; font-size: 14px; font-weight: 600;
  color: var(--text); background: var(--sand-2); transition: background .18s ease, color .18s ease;
}
.topbar__nav a.active,
.topbar__nav a:hover {
  background: var(--anil);
  color: white;
}
.topbar__actions {
  display: flex; align-items: center; gap: 14px;
}
.topbar__info {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted);
}
.topbar__icon {
  display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center;
  border-radius: 999px; background: #f2f2f2; color: var(--anil); font-size: 12px;
}
.topbar__welcome { display: flex; flex-direction: column; line-height: 1.3; font-size: 13px; font-weight: 600; color: var(--anil); white-space: nowrap; }
.topbar__welcome-role { font-size: 10.5px; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }

@media (max-width: 480px) {
  /* En celulares angostos alcanza con el nombre solo — "Bienvenido"
     entero al lado del ícono de hamburguesa aprieta demasiado. */
  .topbar__welcome { font-size: 12px; }
  .topbar__welcome-role { display: none; }
}
.topbar__auth { display: flex; align-items: center; gap: 10px; }
.topbar__account {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px; background: var(--pf-ink); color: white; border: 1px solid var(--pf-ink);
  font-size: 13px; font-weight: 700; transition: transform .15s ease, opacity .15s ease;
}
.topbar__account:hover { transform: translateY(-1px); opacity: .92; }
.topbar__account--ghost {
  background: transparent; color: var(--pf-ink); border-color: var(--line);
}
.topbar__account--ghost:hover { background: var(--sand-2); opacity: 1; }

.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  border-radius: 50%; background: var(--pf-ink); color: var(--pf-gold-light);
  font-family: 'Cormorant Garamond', serif; font-weight: 700;
}
.avatar--sm { width: 30px; height: 30px; font-size: 13px; }
.avatar--lg { width: 68px; height: 68px; font-size: 27px; border: 3px solid var(--pf-gold-soft); }

/* Menú de usuario (dropdown sin JS, vía <details>) */
.user-menu { position: relative; }
.user-menu__trigger {
  display: inline-flex; align-items: center; gap: 9px; padding: 6px 14px 6px 6px; border-radius: 999px;
  background: white; border: 1px solid var(--line); cursor: pointer; list-style: none; font-size: 13px; font-weight: 700;
  color: var(--pf-ink); user-select: none;
}
.user-menu__trigger::-webkit-details-marker { display: none; }
.user-menu__trigger::after { content: '▾'; font-size: 10px; color: var(--pf-muted); margin-left: 2px; }
.user-menu[open] .user-menu__trigger { border-color: var(--pf-ink); }
/* Variante sin sesión: el disparador es solo el ícono de hamburguesa (sin
   avatar/nombre), así que se le saca la píldora con borde y la flechita. */
.user-menu__trigger--icon { background: transparent; border-color: transparent; padding: 6px; gap: 0; color: var(--anil); }
.user-menu__trigger--icon:hover { background: var(--sand-2); }
.user-menu__trigger--icon::after { content: none; }
.user-menu__trigger--icon .icon { width: 22px; height: 22px; }
.user-menu[open] .user-menu__trigger--icon { border-color: transparent; }
.user-menu__panel {
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 220px; background: white;
  border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--pf-shadow); padding: 8px; z-index: 30;
}
.user-menu__name { padding: 10px 12px 6px; font-size: 12px; color: var(--pf-muted); border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.user-menu__name strong { display: block; color: var(--pf-ink); font-size: 14px; }
.user-menu__panel a, .user-menu__panel button {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 10px;
  border: 0; background: transparent; font-size: 14px; font-weight: 600; color: var(--pf-ink); cursor: pointer;
}
.user-menu__panel a:hover, .user-menu__panel button:hover { background: var(--pf-cream-2); }
.user-menu__panel form { margin: 0; }
.user-menu__panel a .icon, .user-menu__panel button .icon { width: 17px; height: 17px; flex-shrink: 0; color: var(--pf-muted); }
.user-menu__panel .btn-logout-item { color: var(--pf-rose); }
.user-menu__panel .btn-logout-item .icon { color: var(--pf-rose); }
/* Separadores entre grupos del menú (Favoritos.../Por qué elegirnos.../
   Cerrar sesión), tal como se pidió el diseño. */
.user-menu__divider { height: 1px; background: var(--line); margin: 6px 4px; }
/* "Explorar"/"Ser anfitrión" solo tienen sentido adentro del menú de
   cuenta en mobile — en escritorio ya están en .topbar__nav, mostrarlos
   ahí también sería repetir el mismo link dos veces en la misma pantalla. */
.user-menu__mobile-only { display: none; }

@media (max-width: 420px) {
  .user-menu__panel { right: -12px; min-width: 0; width: calc(100vw - 32px); max-width: 280px; }
}

.hero {
  background: linear-gradient(120deg, var(--anil), #1c1c1c);
  color: white; padding: 36px 24px 28px;
  position: relative; overflow: hidden;
}
.hero--flat { background: var(--anil); }
.hero:not(.hero--flat) { padding-bottom: 18px; }
.hero__content { max-width: 1120px; margin: 0 auto; position: relative; z-index: 1; }
.eyebrow {
  text-transform: uppercase; letter-spacing: 0.24em; font-size: 11px; color: #d3d3d3; margin-bottom: 8px;
}
.hero h1 {
  margin: 0; font-family: 'Cormorant Garamond', serif; font-size: clamp(26px, 3.6vw, 38px); max-width: 700px; line-height: 1.1;
}
.hero p { max-width: 620px; color: #d9d9d9; line-height: 1.5; margin: 6px 0 0; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.hero-search { max-width: var(--container-width); margin: -40px auto 32px; }
.search-card { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; padding: 20px; border-radius: 24px; background: white; border: 1px solid var(--line); }
.search-field { display: flex; flex-direction: column; gap: 8px; }
.search-field label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted); }
.search-field input,
.search-field select { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; outline: none; }

/* Buscador estilo Turo: barra ancha tipo píldora con campos separados por
   divisores verticales y el botón de búsqueda al final. */
.turo-search {
  display: flex; align-items: stretch; margin-top: 16px; max-width: 680px;
  background: white; border-radius: 999px; padding: 5px; border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
  /* color-scheme: light fuerza que el <select> y el <input type="date">
     se pinten con la paleta clara del sistema — sin esto, un celular en
     modo oscuro les aplica su propio fondo/texto oscuro a partes nativas
     del control (flecha del select, ícono y texto del date picker) por
     encima del blanco que define esta caja, y el texto queda blanco
     sobre blanco o gris sobre gris, aunque `color` esté bien puesto acá. */
  color-scheme: light;
}
.turo-search__field { display: flex; flex-direction: column; gap: 2px; padding: 8px 16px; flex: 1 1 120px; min-width: 0; }
/* El ícono y el envoltorio de cada campo solo se usan en la versión mobile
   (ver @media más abajo) — display:contents en desktop hace que
   .turo-search__field-body sea invisible para el layout y su
   etiqueta+input sigan participando directo del flex column de arriba,
   exactamente como si no estuviera el wrapper. */
.turo-search__field-icon { display: none; }
.turo-search__field-body { display: contents; }
.turo-search__label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); white-space: nowrap; }
.turo-search__field select,
.turo-search__field input {
  border: 0; padding: 2px 0; font-size: 14px; color: var(--text); background: transparent; outline: none; width: 100%;
  color-scheme: light;
}
.turo-search__divider { width: 1px; background: var(--line); margin: 10px 0; flex-shrink: 0; }
.turo-search__submit { border-radius: 999px; flex-shrink: 0; margin: 2px; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
/* El ícono de lupa del botón solo se usa en el diseño mobile (barra estilo
   Turo) — en escritorio el botón sigue siendo el mismo de siempre, solo
   texto "Buscar". */
.turo-search__submit-icon { display: none; }

/* Motivo de "ruta" en el hero — solo desktop, decorativo */
.route-motif { display: none; }
@media (min-width: 901px) {
  .route-motif {
    display: block; position: absolute; right: 48px; top: 50%; transform: translateY(-50%);
    width: 280px; z-index: 1;
  }
}
.route-motif__line {
  height: 2px; position: relative;
  background-image: linear-gradient(to right, rgba(255,255,255,0.35) 55%, transparent 45%);
  background-size: 14px 2px; background-repeat: repeat-x; background-position: center;
}
.route-motif__point { position: absolute; top: -3px; display: flex; flex-direction: column; align-items: center; }
.route-motif__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); display: block; }
.route-motif__label { font-size: 9px; letter-spacing: .08em; color: #c7c7c7; margin-top: 6px; white-space: nowrap; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; padding: 12px 18px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: all 0.2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--gold); color: white; }
.btn--ghost { background: transparent; border-color: rgba(255,255,255,0.25); color: white; }
.btn--small { padding: 8px 12px; font-size: 13px; background: var(--anil); color: white; }

.section { max-width: var(--container-width); margin: 0 auto; padding: 48px 24px; }
.section--tight { padding-top: 16px; padding-bottom: 12px; }
.section--tight .section__head { margin-bottom: 10px; }
.section--tight .section__head h2 { font-size: 18px; }
.section--alt { background: var(--sand-2); }
.section__head { margin-bottom: 14px; }
[data-vehicle-section] { padding-top: 10px; }
.section__head h2 { font-family: 'Cormorant Garamond', serif; font-size: 28px; margin: 0 0 6px; }
.section__head p { margin: 0; color: var(--muted); }

.filters { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
.filter-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--line); background: white; border-radius: 999px; }
.filter-bar--chips { padding: 0; border: 0; background: transparent; flex-wrap: wrap; }
.filter-label { font-size: 13px; color: var(--muted); }
.input { border: 0; outline: none; background: transparent; }
.chip {
  border: 1px solid var(--line); background: white; color: var(--text); padding: 9px 14px; border-radius: 999px; cursor: pointer;
}
.chip.active { background: var(--anil); color: white; border-color: var(--anil); }

/* Fila de categorías (estilo Turo), scrolleable en mobile */
.category-row { display: flex; justify-content: center; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.category-row::-webkit-scrollbar { display: none; }
.category-chip {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  padding: 7px 14px; border: 1.5px solid var(--line); border-radius: 999px; background: white; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.category-chip:hover { border-color: var(--anil); }
.category-chip.active { background: var(--anil); border-color: var(--anil); }
.category-chip.active .category-chip__label { color: white; }
.category-chip__label { font-size: 13px; font-weight: 600; color: var(--text); }

/* Filtros de precio/asientos/transmisión, debajo de los chips de
   categoría — mismo estilo de píldora que el resto de los filtros. */
.filters-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.filters-row__field {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px;
  border: 1.5px solid var(--line); border-radius: 999px; background: white;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
  color-scheme: light;
}
.filters-row__field select {
  border: 0; background: transparent; font-size: 13px; font-weight: 600; color: var(--text);
  text-transform: none; letter-spacing: normal; cursor: pointer; outline: none;
}

/* Banner "hacete anfitrión" en Explorar, estilo Turo (ver anfitrion.php
   para la página completa a la que enlaza). */
.host-banner { background: var(--sand-2); border-bottom: 1px solid var(--line); }
.host-banner__content {
  max-width: var(--container-width); margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.host-banner__content strong { display: block; font-size: 15px; }
.host-banner__content p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }

/* Barra de confianza (value props tipo Turo) */
.trust-bar { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.trust-item { display: flex; align-items: flex-start; gap: 12px; }
.trust-item__icon { font-size: 24px; flex-shrink: 0; color: var(--anil); }
.trust-item strong { display: block; font-size: 14px; margin-bottom: 2px; }
.trust-item p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.4; }

.card-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
.card {
  background: white; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.04);
  position: relative;
}
.card--vehicle:hover { box-shadow: 0 14px 32px rgba(0,0,0,0.09); }
.card__photo {
  height: 180px; position: relative; padding: 16px;
}
.card__photo-icon {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 40px; opacity: .8; pointer-events: none; color: var(--muted);
}
.card__badge {
  position: relative; z-index: 2;
  display: inline-flex; padding: 6px 10px; background: rgba(10,10,10,0.55); color: white; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em;
}
.card__badge--plate {
  background: white; color: var(--anil); border: 2px solid var(--anil); border-radius: 6px;
  font-family: 'Courier New', monospace; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 6px 12px; font-size: 14px; line-height: 1;
  /* Sin esto, al ser hijo de .detail-card__top (flex, align-items por
     defecto "stretch") el cuadro se estiraba hasta la altura de su
     hermano (todo el bloque de título + reseñas), quedando mucho más
     alto de lo que el texto de la placa necesita. */
  align-self: flex-start;
}
.card__body { padding: 18px; display: flex; flex-direction: column; gap: 6px; }
.card__head { display: flex; justify-content: space-between; gap: 10px; }
.card__head h3 { margin: 0 0 4px; font-size: 18px; }
.card__head p { margin: 0; color: var(--muted); font-size: 13px; }
.card__stretched-link { color: inherit; text-decoration: none; }
.card__stretched-link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.price { font-size: 18px; font-weight: 700; white-space: nowrap; text-align: right; }
.price span { font-size: 12px; opacity: 0.7; margin-left: 2px; }
.price__total { display: block; font-size: 11px; font-weight: 400; color: var(--muted); white-space: nowrap; margin-top: 2px; }
.card__location { margin: 0; font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.card__specs { margin: 0; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.card__location .icon, .card__specs .icon { flex-shrink: 0; }
.card__specs--verified { color: var(--pf-emerald); font-weight: 700; }
.card__rating { margin: 2px 0 0; font-size: 12px; display: flex; align-items: center; gap: 5px; }
.card__rating .icon { width: 12px; height: 12px; color: var(--gold); fill: var(--gold); flex-shrink: 0; }
.card__rating strong { color: var(--text); font-weight: 700; }
.card__host { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.card__desc { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.5; }
.card__footer { display: flex; justify-content: space-between; align-items: center; margin-top: auto; }

.link-back { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; margin-bottom: 18px; opacity: .8; }
.link-back:hover { opacity: 1; }

.detail-layout { display: grid; grid-template-columns: 3fr 2fr; gap: 24px; align-items: start; }

.detail-card {
  display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 24px; background: white; overflow: hidden;
}
/* La galería vive en su propia tarjeta, ANTES de .detail-layout (ver
   detalle.php) — así queda a todo el ancho del container en vez de
   compartirlo con el panel de reserva desde arriba, como en Turo. */
.detail-card--gallery { margin-bottom: 24px; }
.detail-card__media { height: 480px; background: var(--anil); position: relative; }
.detail-card__media-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 64px; opacity: .85; color: white; }

/* Galería estilo Turo: foto grande a la izquierda + hasta 2 fotos
   apiladas a la derecha (en vez de una tira de miniaturas debajo). */
.detail-gallery { position: relative; }
.detail-gallery--split { display: grid; grid-template-columns: 2.2fr 1fr; gap: 6px; }
.detail-gallery__side { display: grid; grid-template-rows: 1fr 1fr; gap: 6px; height: 480px; }
.detail-gallery__thumb--side {
  width: 100%; height: 100%; border: 0; border-radius: 0; background-color: var(--anil);
  background-size: cover; background-position: center; cursor: pointer; padding: 0; position: relative;
}
.detail-gallery__thumb--empty { background-color: var(--sand-2); cursor: default; }
.detail-gallery__more {
  position: absolute; bottom: 10px; right: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.95); color: var(--anil); font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 999px;
}
.detail-gallery__count {
  position: absolute; bottom: 10px; right: 10px; z-index: 2; background: rgba(10,10,10,0.65); color: white;
  font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px;
}

/* Botón de favoritos (corazón), mismo lugar que en Turo: arriba a la
   derecha de la galería, con los colores de RENTA-KAR en vez de los suyos. */
.favorite-form { position: absolute; top: 14px; right: 14px; z-index: 5; margin: 0; }
.favorite-btn {
  width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.92); border: 0; cursor: pointer;
  display: grid; place-items: center; font-size: 19px; color: var(--anil); box-shadow: 0 2px 10px rgba(0,0,0,0.18);
  transition: transform .15s ease; text-decoration: none;
}
.favorite-btn:hover { transform: scale(1.08); }
.favorite-btn.is-active { color: var(--pf-rose, #8C3B34); }

/* Carrusel de fotos (tarjetas de explorar y detalle de vehículo) */
.carousel { position: relative; overflow: hidden; }
.carousel__track {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  display: flex; flex-wrap: nowrap; width: 100%; height: 100%; margin: 0; padding: 0;
  transition: transform .3s ease;
}
.carousel__slide {
  flex: 0 0 100%; max-width: 100%; width: 100%; height: 100%; min-height: 100%;
  background-size: cover; background-position: center; background-repeat: no-repeat; background-color: var(--anil);
}
.carousel__nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%;
  background: rgba(10,10,10,0.55); color: white; border: 0; cursor: pointer; display: grid; place-items: center;
  font-size: 16px; line-height: 1; z-index: 2; transition: background .15s ease;
}
.carousel__nav:hover { background: rgba(10,10,10,0.8); }
.carousel__nav--prev { left: 8px; }
.carousel__nav--next { right: 8px; }
.carousel__dots {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 2;
}
.carousel__dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.55); border: 0; padding: 0; cursor: pointer; transition: all .15s ease; }
.carousel__dot.is-active { background: white; width: 8px; height: 8px; }
.detail-card__body { padding: 24px; display: flex; flex-direction: column; gap: 20px; }
/* Una sola línea, arriba de "Anfitrión de" — no entre todos los bloques. */
.detail-section:has(.host-card-v2) { border-top: 1px solid var(--line); padding-top: 20px; }
/* Misma línea, arriba de "Características del vehículo" — separa ese
   bloque del de "Anfitrión de" que queda justo arriba. */
.detail-section--features { border-top: 1px solid var(--line); padding-top: 20px; }

.features-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 640px) { .features-grid { grid-template-columns: 1fr; gap: 16px; } }
.features-grid__col h5 { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; margin: 0 0 10px; }
.features-grid__col h5 .icon { width: 17px; height: 17px; color: var(--muted); flex-shrink: 0; }
.features-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.features-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; color: var(--text); }
.features-list .icon { width: 15px; height: 15px; color: var(--gold); flex-shrink: 0; margin-top: 1px; }

.features-adicional { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 16px; }
.features-adicional__item { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text); margin: 0; }
.features-adicional__item .icon { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; }
.features-legal { font-size: 11.5px; color: var(--muted); margin: 10px 0 0; }

.features-toggle {
  display: inline-flex; margin-top: 14px; padding: 0; border: 0; background: transparent; cursor: pointer;
  font-size: 13px; font-weight: 700; color: var(--anil); text-decoration: underline;
}
.features-toggle:hover { opacity: .8; }

/* Misma línea, arriba de "Incluido en el precio" — separa ese bloque del
   de "Características del vehículo" que queda justo arriba. */
.detail-section--included { border-top: 1px solid var(--line); padding-top: 20px; }
/* "Ubicación" ya no vive apilada dentro de la tarjeta junto a las demás
   secciones (ver detalle.php) — ahora es su propio bloque a todo el ancho
   del contenedor, igual que "Vehículos similares" más abajo, así que ya
   no necesita la línea divisoria de arriba (le alcanza con el
   margin-top que ya trae inline, mismo criterio que ese otro bloque). */
.included-group { margin-top: 16px; }
.included-group:first-of-type { margin-top: 12px; }
.included-group__title { font-size: 14px; font-weight: 700; margin: 0 0 12px; }
.included-item { display: flex; align-items: flex-start; gap: 12px; margin-top: 14px; }
.included-item:first-of-type { margin-top: 0; }
.included-item__icon {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--gold); color: var(--gold);
}
.included-item__icon .icon { width: 18px; height: 18px; }
.included-item__text { display: flex; flex-direction: column; gap: 2px; padding-top: 4px; }
.included-item__titulo { font-size: 13.5px; font-weight: 700; color: var(--text); }
.included-item__desc { font-size: 12px; color: var(--muted); }

/* Tarjeta de info del vehículo: pastilla de tipo + placa arriba, título,
   línea de confianza (reseñas/viajes/mínimo de renta), y una fila delgada
   de specs con divisores — todo compacto, sin las cajas grandes de antes. */
.detail-top { display: flex; flex-direction: column; gap: 4px; }
.detail-top__badges { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.detail-badge-pill {
  display: inline-flex; padding: 6px 14px; background: var(--muted); color: white; border-radius: 999px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
}
.detail-top__title { margin: 2px 0 0; font-size: 26px; font-weight: 800; }

.detail-trust-line__min-rent { display: inline-flex; align-items: center; gap: 5px; margin-left: 4px; }
.detail-trust-line__min-rent .icon { width: 14px; height: 14px; }

.detail-specs-row {
  display: flex; align-items: stretch; border-top: 1px solid var(--line); padding-top: 10px; padding-bottom: 2px;
}
.detail-specs-row__item {
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 6px; border-left: 1px solid var(--line); font-size: 13.5px; font-weight: 600; color: var(--text);
}
.detail-specs-row__item:first-child { border-left: 0; }
.detail-specs-row__item .icon { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; }
.detail-specs-row__item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.detail-section { display: flex; flex-direction: column; gap: 8px; }
.detail-section__title { font-family: 'Cormorant Garamond', serif; font-size: 19px; margin: 0; }

/* Tarjeta "Anfitrión de": avatar circular (foto real o inicial de
   respaldo) con una insignia de calificación superpuesta en la esquina
   inferior izquierda, nombre y stats (viajes · se unió en fecha) al lado. */
.host-card-v2 { display: flex; align-items: center; gap: 14px; }
.host-card-v2__avatar-wrap { position: relative; flex-shrink: 0; width: 64px; height: 64px; }
/* transform-origin explícito: la foto trae su propio zoom guardado desde
   Perfil (transform: scale() inline, ver detalle.php) — el border-radius
   ya está en la propia <img>, así que se mantiene circular sin importar
   el zoom, nunca un cuadrado recortado. */
.host-card-v2__avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; display: block; transform-origin: center center; }
.host-card-v2__avatar--fallback {
  display: flex; align-items: center; justify-content: center; background: var(--pf-ink); color: var(--pf-gold-light);
  font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 700;
}
.host-card-v2__rating {
  position: absolute; bottom: -4px; left: -6px; display: inline-flex; align-items: center; gap: 3px;
  background: white; border: 1px solid var(--line); border-radius: 999px; padding: 3px 8px 3px 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15); font-size: 11px; font-weight: 700; color: var(--anil); white-space: nowrap;
}
.host-card-v2__rating .icon { width: 11px; height: 11px; color: var(--gold); fill: var(--gold); }
.host-card-v2__name { font-weight: 700; font-size: 16px; display: block; }
.host-card-v2__stats { margin: 3px 0 0; font-size: 13px; color: var(--muted); }

.detail-card__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--muted); }

.detail-trust-line { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.detail-trust-line span { color: var(--gold); font-weight: 700; }

/* Calificaciones y reseñas */
.review-score { display: flex; align-items: baseline; gap: 8px; }
.review-score strong { font-family: 'Inter', sans-serif; font-size: 40px; font-weight: 800; line-height: 1; }
.review-score__star { color: var(--gold); font-size: 26px; }
.review-score__count { margin: 2px 0 0; color: var(--muted); font-size: 14px; }

.review-bars { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.review-bar { display: grid; grid-template-columns: 110px 1fr 32px; align-items: center; gap: 12px; font-size: 13px; }
.review-bar__label { color: var(--text); }
.review-bar__track { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.review-bar__fill { display: block; height: 100%; background: var(--gold); border-radius: 999px; }
.review-bar__value { color: var(--muted); text-align: right; }

.review-list__title { margin: 22px 0 4px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.review-list { display: flex; flex-direction: column; gap: 16px; margin-top: 12px; }
.review-item { padding-top: 16px; border-top: 1px solid var(--line); }
.review-item:first-child { padding-top: 0; border-top: 0; }
.review-item__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.review-item__head strong { font-size: 13px; }
.review-item__stars { color: var(--gold); font-size: 12px; letter-spacing: 1px; }
.review-item p { margin: 0; font-size: 14px; color: var(--text); line-height: 1.5; }

/* Detalles/requisitos y reglas del anfitrión (listas de dos columnas) */
.detail-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px 18px; margin: 0; padding: 0; list-style: none; }
.detail-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--text); line-height: 1.4; }
.detail-list li span:first-child { flex-shrink: 0; font-size: 16px; color: var(--anil); margin-top: 1px; }

.policy-card {
  border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; background: var(--sand-2);
  display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--text); line-height: 1.5;
}
.policy-card__icon { font-size: 20px; flex-shrink: 0; color: var(--anil); }

.booking-form { display: flex; flex-direction: column; gap: 14px; padding-top: 6px; }
.booking-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.booking-form label { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--muted); }
.booking-form input { border: 1px solid var(--line); padding: 10px 12px; border-radius: 10px; background: white; }
.form-note { margin: 0; color: var(--muted); font-size: 13px; text-align: center; }

/* Calendario de disponibilidad (reemplaza los <input type="date"> nativos
   por un selector visual: días ocupados por otras reservas se ven
   tachados/deshabilitados, y el cliente elige el rango tocando los días
   libres — el mismo patrón que Airbnb/Turo). */
.booking-dates { position: relative; }
.booking-dates__summary {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: white;
  font-size: 13.5px; font-weight: 600; color: var(--text);
}

.calendar {
  /* Siempre visible y en el flujo normal del documento (nunca
     position:absolute ni [hidden]): un popover flotante se superponía
     sobre el resto del formulario en mobile, y además el cliente pidió
     explícitamente que el calendario quede fijo, sin ocultarse nunca. */
  margin-top: 8px; background: white; border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08); padding: 16px; user-select: none;
}
.calendar__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.calendar__month-label { font-weight: 700; font-size: 14px; text-transform: capitalize; }
.calendar__nav {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: white; cursor: pointer;
  font-size: 16px; line-height: 1; display: grid; place-items: center; color: var(--text); padding: 0;
}
.calendar__nav:hover { background: var(--sand-2); }
.calendar__weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 11px;
  color: var(--muted); font-weight: 700; margin-bottom: 4px;
}
.calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.calendar__day {
  aspect-ratio: 1; border: 0; border-radius: 10px; background: transparent; font-size: 13px; cursor: pointer;
  color: var(--text); display: grid; place-items: center; transition: background .12s ease; padding: 0;
}
.calendar__day:hover:not(:disabled) { background: var(--sand-2); }
.calendar__day--empty { visibility: hidden; cursor: default; }
.calendar__day--disabled { color: #d0d0d0; cursor: not-allowed; }
.calendar__day--busy {
  color: var(--pf-rose, #8C3B34); text-decoration: line-through; cursor: not-allowed; font-weight: 600;
  background: repeating-linear-gradient(45deg, rgba(140,59,52,0.07), rgba(140,59,52,0.07) 4px, transparent 4px, transparent 8px);
}
.calendar__day.is-start,
.calendar__day.is-end,
.calendar__day.is-start:hover,
.calendar__day.is-end:hover {
  background: var(--anil); color: white; font-weight: 700; cursor: grab;
  box-shadow: 0 0 0 2px white, 0 0 0 3px var(--anil);
}
.calendar__day.is-start:active,
.calendar__day.is-end:active { cursor: grabbing; }
.calendar__day.is-in-range { background: var(--pf-gold-soft, #F7EDCE); border-radius: 0; }
.calendar__day.is-start { border-radius: 10px 0 0 10px; }
.calendar__day.is-end { border-radius: 0 10px 10px 0; }
.calendar__day.is-start.is-end { border-radius: 10px; }
.calendar.is-dragging .calendar__day:not(.is-start):not(.is-end) { cursor: grabbing; }
.calendar__legend { display: flex; gap: 14px; margin-top: 12px; font-size: 11px; color: var(--muted); }
.calendar__hint { margin: 8px 0 0; font-size: 11px; color: var(--muted); line-height: 1.4; }
.calendar__dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; }
.calendar__dot--free { background: white; border: 1px solid var(--line); }
.calendar__dot--busy { background: var(--pf-rose, #8C3B34); opacity: .6; }
.calendar__footer { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; }

.booking-sidebar { min-width: 0; }
.booking-panel { border: 1px solid var(--line); border-radius: 22px; background: var(--sand-2); padding: 18px; }
.booking-panel__price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.booking-panel__price strong { font-size: 28px; }
@media (min-width: 901px) {
  .booking-panel { position: sticky; top: 90px; }
}

.booking-occupied { margin: 0; font-size: 11px; color: var(--muted); }
.booking-conflict {
  font-size: 13px; padding: 10px 12px; border-radius: 12px; background: var(--pf-rose-soft); color: var(--pf-rose);
  display: flex; align-items: center; gap: 8px; font-weight: 600;
}
.booking-empty-hint { font-size: 13px; color: var(--muted); margin: 0; }

.price-breakdown { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.price-breakdown__row { display: flex; justify-content: space-between; color: var(--muted); }
.price-breakdown__row--total { font-weight: 700; font-size: 16px; color: var(--text); padding-top: 8px; border-top: 1px dashed var(--line); }
.price-breakdown__row--deposit { font-size: 12px; opacity: .85; }

.payment-methods { display: flex; flex-direction: column; gap: 8px; }
.payment-methods__label { font-size: 12px; }

/* 3 columnas fijas — en pantallas angostas se achica la letra (clamp) en
   vez de apilarse, para que las 3 tarjetas sigan viéndose una al lado de
   la otra como pide el diseño. */
.payment-methods__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.payment-method-card {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  padding: 12px 6px 10px; border-radius: 14px; border: 1.5px solid var(--line);
  background: white; cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.payment-method-card.is-active { border-width: 2px; border-color: var(--gold); background: var(--sand-2); }
.payment-method-card input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.payment-method-card__icon { font-size: 20px; color: var(--anil); }
.payment-method-card__icon .icon { width: 20px; height: 20px; }
.payment-method-card__label { font-size: clamp(10px, 2.6vw, 13px); font-weight: 700; line-height: 1.2; }
.payment-method-card__sub { font-size: clamp(9px, 2.2vw, 11px); line-height: 1.2; }
.payment-method-card__radio {
  display: inline-block; width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--line);
  margin-top: 2px; position: relative; flex-shrink: 0;
}
.payment-method-card.is-active .payment-method-card__radio { border-color: var(--gold); border-width: 5px; }

.booking-extras { display: flex; flex-direction: column; gap: 8px; }
.booking-extras__label { font-size: 12px; }
.extra-driver-box {
  display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--line); border-radius: 14px;
  padding: 10px 12px; background: white; cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.extra-driver-box:has(input:checked) { border-color: var(--gold); background: var(--sand-2); }
.extra-driver-box__icon { font-size: 18px; flex-shrink: 0; color: var(--gold); display: flex; }
.extra-driver-box__icon .icon { width: 18px; height: 18px; }
.extra-driver-box__text { flex: 1; }
.extra-driver-box__label { display: block; font-size: 13px; font-weight: 600; }
.extra-driver-box__sub { display: block; font-size: 11px; }
.extra-driver-box input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--gold); flex-shrink: 0; }
.extra-driver-box--disabled { cursor: default; opacity: .6; }
.extra-driver-box--disabled .extra-driver-box__icon { color: var(--muted); }

.contract-box { border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: white; }
.contract-box__accept { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; cursor: pointer; }
.contract-box__accept input { margin-top: 2px; }
.contract-box__toggle { background: none; border: 0; padding: 0; font: inherit; text-decoration: underline; font-weight: 600; cursor: pointer; color: inherit; }
.contract-box__text { font-size: 11px; color: var(--muted); margin: 10px 0 0; padding-top: 10px; border-top: 1px dashed var(--line); line-height: 1.5; }

.booking-submit { width: 100%; }
.booking-submit:disabled { background: #C9BFA6; color: #8A806B; cursor: not-allowed; transform: none; }
.list-simple { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.list-simple li { padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; background: white; }
.card--empty { padding: 30px; text-align: center; border: 1px solid var(--line); border-radius: 24px; background: white; }
.auth-card,
.host-form {
  display: grid; gap: 14px; padding: 24px; background: white; border: 1px solid var(--line); border-radius: 24px;
}
.auth-card label,
.host-form label { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--muted); }
.auth-card input,
.auth-card textarea,
.host-form input,
.host-form textarea,
.host-form select { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; outline: none; }
.auth-role { display: flex; flex-wrap: wrap; gap: 10px; }
.auth-switch { margin-top: 18px; }
.text-muted { color: var(--muted); }

/* Recordatorio "mañana recogés tu vehículo" — Explorar y Perfil, ver
   ReservationModel::findStartingTomorrow(). Aparece solo el día antes del
   inicio de la reserva y desaparece solo (la consulta deja de traerlo). */
.reminder-card {
  display: flex; align-items: center; gap: 16px; padding: 18px 22px; border-radius: 20px;
  background: var(--pf-ink); color: white; margin-bottom: 14px; flex-wrap: wrap;
}
.reminder-card:last-child { margin-bottom: 0; }
.reminder-card__icon { width: 26px; height: 26px; color: white; flex-shrink: 0; }
.reminder-card__icon .icon { width: 100%; height: 100%; display: block; }
.reminder-card__body { flex: 1; min-width: 180px; }
.reminder-card__body strong { display: block; font-size: 15px; margin-bottom: 2px; }
.reminder-card__body span { font-size: 13px; color: #c9c1b1; }
.reminder-card .btn--small { flex-shrink: 0; }

/* Aviso de estado de licencia, arriba de "Mi cuenta" — mismo criterio
   que ReservationController::create() usa para bloquear una reserva. */
.license-status {
  display: flex; align-items: flex-start; gap: 14px; padding: 18px 22px; border-radius: 20px;
  margin: 0 auto 18px; max-width: 640px;
}
.license-status--warn { background: var(--pf-amber-soft); border: 1px solid #e6d2b5; }
.license-status--ok { background: var(--pf-emerald-soft); border: 1px solid #bcd9c9; }
.license-status__icon { flex-shrink: 0; width: 22px; height: 22px; color: var(--pf-ink); }
.license-status__icon .icon { width: 100%; height: 100%; display: block; }
.license-status strong { display: block; color: var(--pf-ink); font-size: 14px; margin-bottom: 2px; }
.license-status__desc { font-size: 13px; }
.license-status--warn .license-status__desc { color: var(--pf-amber); }
.license-status--ok .license-status__desc { color: var(--pf-emerald); }

/* Formulario "Mi cuenta": tarjeta única dividida en secciones (datos
   personales / licencia / seguridad) en vez de una sola lista larga de
   campos sin jerarquía — cada sección tiene su propio ícono, título y
   grid de 2 columnas que colapsa a 1 en mobile. */
.account-card {
  max-width: 640px; margin: 0 auto; border: 1px solid var(--pf-line); border-radius: 26px;
  background: white; overflow: hidden; box-shadow: var(--pf-shadow);
}
.account-card__errors { padding: 20px 28px 0; }
.account-form { display: flex; flex-direction: column; }
.account-form__section { padding: 24px 28px; border-bottom: 1px solid var(--pf-line); }
.account-form__section:last-of-type { border-bottom: 0; }
.account-form__section-head { margin-bottom: 18px; }
.account-form__section-head h3 {
  margin: 0; display: flex; align-items: center; gap: 8px; font-size: 16px; color: var(--pf-ink);
}
.account-form__section-head h3 .icon { width: 18px; height: 18px; color: var(--pf-ink); flex-shrink: 0; }
.account-form__section-head p { margin: 4px 0 0; font-size: 13px; color: var(--pf-muted); }
.account-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.account-form__grid .span-2 { grid-column: 1 / -1; }
.account-form__grid .form-actions { margin: 4px 0 0; justify-content: flex-start; }
.account-form__grid label {
  display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: var(--pf-ink);
}
.account-form__grid input,
.account-form__grid select {
  border: 1.5px solid var(--pf-line); border-radius: 12px; padding: 11px 14px; font-size: 14px;
  background: var(--pf-cream); transition: border-color .15s ease, background .15s ease; font-weight: 400;
}
.account-form__grid input:focus,
.account-form__grid select:focus { outline: none; border-color: var(--pf-gold); background: white; }
.account-form__grid input:disabled { background: var(--pf-cream-2); color: var(--pf-muted); cursor: not-allowed; }
.account-form__hint { font-size: 12px; font-weight: 600; color: var(--pf-muted); min-height: 15px; }
.account-form__hint--ok { color: var(--pf-emerald); }
.account-form__hint--warn { color: var(--pf-amber); }
.account-form__hint--bad { color: var(--pf-rose); }
.account-form .form-actions { padding: 22px 28px 28px; margin: 0; justify-content: flex-start; }

/* Zona de peligro: eliminar cuenta — separada visualmente del resto
   (fondo rosado, borde propio) para que no se confunda con una acción
   más de la tarjeta de arriba. */
.danger-zone {
  max-width: 640px; margin: 16px auto 0; padding: 24px 28px; border-radius: 26px;
  background: var(--pf-rose-soft); border: 1px solid #e3bdb6;
}
.danger-zone h3 { margin: 0 0 4px; color: var(--pf-rose); font-size: 16px; }
.danger-zone p { margin: 0 0 16px; font-size: 13px; color: var(--pf-ink); }
.danger-zone label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: var(--pf-ink); max-width: 320px; }
.danger-zone input {
  border: 1.5px solid #e3bdb6; border-radius: 12px; padding: 11px 14px; background: white; font-size: 14px;
}
.danger-zone .form-actions { margin-top: 16px; justify-content: flex-start; }

@media (max-width: 640px) {
  .account-form__grid { grid-template-columns: 1fr; }
  .account-form__section { padding: 20px; }
  .danger-zone { padding: 20px; margin-left: 12px; margin-right: 12px; }
}

/* Resumen compacto de "Mis reservas": el detalle completo vive en el
   modal (ver .modal), acá solo hay un conteo y el botón que lo abre —
   a propósito nada llamativo, es solo la puerta de entrada. */
.reservas-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px; flex-wrap: wrap;
}
.reservas-summary strong { font-size: 20px; color: var(--pf-ink); }

.reservas-filter {
  display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
  padding: 16px; margin-bottom: 18px; background: var(--pf-cream-2); border-radius: 16px;
}
.reservas-filter label {
  display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--pf-muted); font-weight: 600;
}
.reservas-filter input[type="date"] {
  border: 1px solid var(--pf-line); border-radius: 10px; padding: 9px 12px; background: white; font-size: 14px;
}

.reservation-list { display: grid; gap: 16px; }
.reservation-card { padding: 22px; border: 1px solid var(--line); border-radius: 22px; background: white; }
.reservation-card__header { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.reservation-card__meta-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.reservation-card__meta { display: flex; flex-wrap: wrap; gap: 12px; color: var(--muted); margin: 14px 0; }
.reservation-card__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Reseñas: selector de estrellas puro CSS (radios en orden inverso +
   flex-direction:row-reverse, sin JS) y la tarjeta de resumen de una
   reseña ya dejada. */
.star-rating { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.star-rating input { position: absolute; opacity: 0; width: 0; height: 0; }
.star-rating label { font-size: 26px; line-height: 1; color: var(--pf-line, #E9E1CE); cursor: pointer; transition: color .1s ease; }
.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label { color: var(--gold, #C9A227); }

.review-category-input {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0;
  border-bottom: 1px solid var(--pf-line, #E9E1CE);
}
.review-category-input__label { font-size: 13px; color: var(--text); }
.review-category-input .star-rating label { font-size: 18px; }

.review-summary {
  margin-top: 12px; padding: 12px 14px; border: 1px solid var(--pf-line, #E9E1CE); border-radius: 12px;
  background: var(--pf-cream-2, #F3EDDF);
}
.review-summary__stars { color: var(--gold, #C9A227); font-size: 15px; letter-spacing: 2px; }
.review-summary p { margin: 6px 0 0; font-size: 13px; color: var(--text); line-height: 1.5; }

/* Account / auth page styles */
.auth-page { max-width: 760px; margin: 36px auto 60px; padding: 0 16px; }
.auth-page .section__head.text-center { text-align: center; margin-bottom: 18px; }
.auth-card--large { background: #FFFDF8; border: 1px solid var(--line); padding: 32px; border-radius: 18px; max-width: 520px; margin: 0 auto; }
.auth-card--large label { display: block; margin-bottom: 12px; }
.auth-card--large input, .auth-card--large textarea { width: 100%; height: 48px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: white; }
.auth-card--large textarea { height: auto; min-height: 96px; }
.auth-role { display: flex; flex-direction: column; gap: 12px; margin: 10px 0 16px; }
.role-btn { text-align: left; width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: white; font-weight: 600; cursor: pointer; }
.role-btn.active, .role-btn:has(input:checked) { background: white; border-color: var(--anil); box-shadow: 0 0 0 3px rgba(169,149,60,0.06); }
.role-btn input { position: absolute; opacity: 0; pointer-events: none; }
.role-btn__desc { display: block; font-weight: 400; font-size: 13px; color: var(--muted); margin-top: 2px; }
.form-actions { display: flex; justify-content: center; margin-top: 8px; }
.text-center { text-align: center; }

@media (max-width: 700px) {
  .auth-card--large { padding: 20px; margin: 0 12px; }
}
.steps { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.step { background: white; border: 1px solid var(--line); border-radius: 18px; padding: 20px; }
.step strong { display: inline-flex; width: 36px; height: 36px; border-radius: 50%; background: var(--gold); color: white; align-items: center; justify-content: center; margin-bottom: 10px; }
.step h3 { margin: 0 0 6px; }
.step p { margin: 0; color: var(--muted); line-height: 1.5; }

.footer {
  margin-top: auto; background: var(--anil); color: white; padding: 24px; display: flex; justify-content: space-between; gap: 16px; align-items: center; font-size: 14px;
}
.footer p { margin: 4px 0 0; color: #bdbdbd; }

/* ============ Perfil ============ */
.profile-shell { background: var(--pf-cream); }

.profile-hero {
  background: radial-gradient(120% 160% at 100% 0%, #2A241C 0%, var(--pf-ink) 55%, #0B0A08 100%);
  color: white; padding: 52px 24px 64px;
}
.profile-hero__inner { max-width: var(--container-width); margin: 0 auto; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.profile-hero .eyebrow { color: var(--pf-gold-light); }
.profile-hero__name { font-family: 'Cormorant Garamond', serif; font-size: clamp(28px, 4vw, 40px); margin: 4px 0 4px; }
.profile-hero__meta { color: #cfc7b6; margin: 0; font-size: 14px; }
.profile-hero__stats { display: flex; gap: 28px; margin-left: auto; flex-wrap: wrap; }
.profile-stat { text-align: right; }
.profile-stat strong { display: block; font-family: 'Inter', sans-serif; font-size: 26px; font-weight: 800; color: var(--pf-gold-light); line-height: 1; }
.profile-stat span { font-size: 12px; color: #b9b0a0; text-transform: uppercase; letter-spacing: .12em; }

.banner-success {
  border: 1px solid #bcd9c9; background: var(--pf-emerald-soft); color: var(--pf-emerald);
  text-align: left; padding: 16px 20px; margin-top: -28px; position: relative; z-index: 2;
  border-radius: 18px; box-shadow: var(--pf-shadow); font-weight: 600;
}
.banner-error {
  border: 1px solid #e3bdb6; background: var(--pf-rose-soft); color: var(--pf-rose);
  text-align: left; padding: 16px 20px; margin: 0 0 20px; border-radius: 18px; font-weight: 600;
}
.banner-error .list-simple li, .banner-success .list-simple li { background: transparent; border: 0; padding: 2px 0; }

.path-intro { color: var(--pf-muted); margin-bottom: 18px; font-size: 15px; }
.path-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
.path-card {
  display: flex; flex-direction: column; gap: 6px; padding: 28px; border-radius: 24px; position: relative;
  transition: transform .18s ease, box-shadow .18s ease; overflow: hidden;
}
.path-card:hover { transform: translateY(-3px); box-shadow: var(--pf-shadow); }
.path-card__icon {
  width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center;
  font-size: 22px; margin-bottom: 8px;
}
.path-card h3 { margin: 0 0 4px; font-family: 'Cormorant Garamond', serif; font-size: 24px; }
.path-card p { margin: 0; }
.path-card__cta { margin-top: 14px; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }

.path-card--renter {
  background: var(--pf-cream-2); border: 1px solid var(--pf-line); color: var(--pf-ink);
}
.path-card--renter .path-card__icon { background: var(--pf-gold-soft); color: var(--pf-amber); }
.path-card--renter p { color: var(--pf-muted); }
.path-card--renter .path-card__cta { color: var(--pf-ink); }

.path-card--host {
  background: var(--pf-ink); color: white; border: 1px solid var(--pf-ink-2);
}
.path-card--host .path-card__icon { background: rgba(231,197,103,0.16); color: var(--pf-gold-light); }
.path-card--host p { color: #c9c1b1; }
.path-card--host .path-card__cta { color: var(--pf-gold-light); }

.mini-steps { display: flex; flex-wrap: wrap; gap: 14px; }
.mini-step {
  flex: 1; min-width: 220px; background: white; border: 1px solid var(--pf-line); border-radius: 18px;
  padding: 18px; display: flex; align-items: center; gap: 14px; font-size: 14px; color: var(--pf-ink);
  box-shadow: 0 6px 16px rgba(20,17,14,0.03);
}
.mini-step span {
  width: 30px; height: 30px; border-radius: 50%; background: var(--pf-ink); color: var(--pf-gold-light);
  display: grid; place-items: center; font-weight: 800; flex-shrink: 0; font-family: 'Inter', sans-serif; font-size: 14px;
}
.btn-row { margin-top: 20px; }

.vehicle-status-grid { display: grid; gap: 18px; margin-bottom: 22px; }
.vehicle-status-card { padding: 0; border: 1px solid var(--pf-line); overflow: hidden; }
.vehicle-status-card__thumb { height: 10px; }
.vehicle-status-card__body { padding: 22px; }
.vehicle-status-card__head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.vehicle-status-card__head h3 { margin: 0 0 4px; font-size: 18px; color: var(--pf-ink); }
.vehicle-status-card__meta { color: var(--pf-muted); font-size: 14px; margin: 12px 0 0; }

.admin-check-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px 16px; font-size: 13px;
  margin-top: 14px; padding: 12px; border: 1px solid var(--pf-line); border-radius: 12px; background: white;
}
.vehicle-status-card__note { margin-top: 10px; font-size: 13px; color: var(--pf-amber); }

.badge {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px 7px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 700; white-space: nowrap;
}
.badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.badge--busy { background: var(--pf-rose-soft); color: var(--pf-rose); }
.badge--soon { background: var(--pf-amber-soft); color: var(--pf-amber); }
.badge--free { background: var(--pf-emerald-soft); color: var(--pf-emerald); }

.history-toggle { margin-top: 14px; }
.history-toggle summary { cursor: pointer; font-size: 13px; color: var(--pf-muted); font-weight: 700; }
.history-toggle .list-simple { margin-top: 10px; }
.history-toggle .list-simple li { border-color: var(--pf-line); }

.host-empty {
  text-align: left; background: white; border: 1px dashed var(--pf-line); border-radius: 22px;
  padding: 32px; display: flex; align-items: center; gap: 18px; box-shadow: none;
}
.host-empty__icon { font-size: 30px; flex-shrink: 0; }
.host-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }

.vehicle-form-card { margin-top: 22px; border: 1px solid var(--pf-line); }
.vehicle-form-toggle summary {
  cursor: pointer; padding: 18px 22px; font-weight: 700; list-style: none; color: var(--pf-ink);
  display: flex; align-items: center; gap: 10px;
}
.vehicle-form-toggle summary::-webkit-details-marker { display: none; }
.vehicle-form-toggle summary::before { content: '+'; font-size: 18px; color: var(--pf-gold); font-weight: 700; }
.vehicle-form-toggle[open] summary { border-bottom: 1px solid var(--pf-line); }
.vehicle-form-toggle[open] summary::before { content: '−'; }

.host-form {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px;
  padding: 22px; background: transparent; border: 0; border-radius: 0;
}
.host-form label.span-2 { grid-column: 1 / -1; }
.host-form .form-actions { grid-column: 1 / -1; justify-content: flex-start; margin-top: 4px; }

/* Dropzone de fotos */
.dropzone {
  border: 2px dashed var(--pf-line); border-radius: 16px; background: var(--pf-cream-2);
  padding: 22px; text-align: center; cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.dropzone:hover, .dropzone:focus-visible { border-color: var(--pf-gold); outline: none; }
.dropzone.is-dragover { border-color: var(--pf-gold); background: var(--pf-gold-soft); }
.dropzone__hint { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--pf-muted); }
.dropzone__icon { font-size: 26px; margin-bottom: 4px; }
.dropzone__hint strong { color: var(--pf-ink); font-size: 14px; }
.dropzone__hint small { font-size: 12px; margin-top: 4px; }
.dropzone__previews {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; margin-top: 16px;
}
.dropzone__previews:empty { margin-top: 0; }
.dropzone__preview { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 1px solid var(--pf-line); }
.dropzone__preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dropzone__remove {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: 0;
  background: rgba(20,17,14,0.75); color: white; font-size: 11px; cursor: pointer; display: grid; place-items: center;
}
.dropzone__remove:hover { background: var(--pf-rose); }
.dropzone__error { margin: 10px 0 0; font-size: 12px; color: var(--pf-rose); }

/* Mapa de la ficha de Detalle: Google Maps real (iframe embed público, sin
   API key), fijo por departamento — ver HomeController::DEPARTAMENTO_MAPS. */
.map-display { margin-top: 10px; }
.map-display__map {
  display: block; width: 100%; height: 420px; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--pf-line); background: var(--pf-cream-2);
}
.map-display__caption { margin: 10px 0 0; font-size: 13px; color: var(--pf-muted); display: flex; align-items: center; gap: 6px; }
.map-display__caption-icon { flex-shrink: 0; font-size: 15px; color: var(--anil); margin-top: 1px; }

.photo-strip { display: flex; gap: 8px; overflow-x: auto; margin-top: 14px; padding-bottom: 2px; }
.photo-strip img {
  width: 64px; height: 64px; object-fit: cover; border-radius: 10px; border: 1px solid var(--pf-line); flex-shrink: 0;
}
.vehicle-status-card__thumb--photo { background-size: cover; background-position: center; }

/* Botón "Publicar mi vehículo" del hero, ahora un <button> (abre el
   modal) en vez de un <a>: se resetean los estilos nativos de botón para
   que siga viéndose igual que el resto de las path-card. */
button.path-card { border: 0; text-align: left; width: 100%; cursor: pointer; }

/* Modal "Publicar un nuevo vehículo": <dialog> nativo — sin librería,
   con foco/backdrop/Escape gratis del navegador. El propio <dialog> se
   estira a toda la ventana y queda transparente; la tarjeta visible es
   .modal__box adentro, centrada por flexbox. Clickear afuera de
   esa tarjeta (pero dentro del <dialog>) lo cierra — ver app.js. */
.modal {
  border: 0; padding: 20px; margin: 0; max-width: 100vw; max-height: 100vh;
  width: 100%; height: 100%; background: transparent;
}
.modal[open] { display: flex; align-items: center; justify-content: center; }
.modal::backdrop {
  background: rgba(20, 17, 14, 0.55); backdrop-filter: blur(6px);
}
.modal__box {
  width: min(92vw, 760px); max-height: min(88vh, 900px); overflow-y: auto;
  background: var(--pf-cream); border-radius: 26px; box-shadow: 0 30px 70px rgba(20, 17, 14, 0.35);
}
.modal__header {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 22px 24px; background: var(--pf-ink); color: white; border-radius: 26px 26px 0 0;
}
.modal__header h2 { margin: 2px 0 0; font-family: 'Cormorant Garamond', serif; font-size: 26px; }
.modal__header .eyebrow { color: var(--pf-gold-light); margin-bottom: 2px; }
.modal__close {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,0.12); color: white; font-size: 15px; display: grid; place-items: center;
  transition: background .15s ease;
}
.modal__close:hover { background: rgba(255,255,255,0.22); }
.modal__body { padding: 22px 24px 26px; }
.modal__body .host-form { padding: 0; }
/* Modal "Publicar nuevo vehículo" del menú (ver layout.php): reutiliza el
   wizard de Perfil, que necesita un ancestro .rk para sus variables de
   color — pero .rk trae su propio fondo de página, que acá se anula para
   que se siga viendo la tarjeta crema de .modal__box de siempre. */
.modal__body .rk { background: transparent; }

/* Modal de login: diseño propio (tarjeta blanca chica, esquinas de 12px,
   sin la barra de header oscura que usan los demás modales) — a
   propósito no reutiliza .modal__box/.modal__header para no afectar el
   look de los otros modales del sitio (licencia, publicar vehículo). */
.login-modal__box {
  width: 340px; max-width: 92vw; background: white; border: 1px solid var(--line); border-radius: 12px;
  padding: 28px; box-shadow: 0 24px 60px rgba(10, 10, 10, 0.22);
}
.login-modal__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.login-modal__header h2 { margin: 0; font-size: 19px; font-weight: 700; color: var(--text); }
.login-modal__close {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; border: 0; cursor: pointer;
  background: transparent; color: var(--muted); display: grid; place-items: center; transition: background .15s ease, color .15s ease;
}
.login-modal__close:hover { background: var(--sand-2); color: var(--text); }
.login-modal__close .icon { width: 16px; height: 16px; }

.login-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.login-field label { font-size: 13px; font-weight: 600; color: var(--text); }
.login-field input {
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; font-family: inherit;
  color: var(--text); background: white;
}
.login-field input:focus { outline: none; border-color: var(--anil); box-shadow: 0 0 0 3px rgba(10,10,10,0.08); }

.login-password { position: relative; display: flex; }
.login-password input { width: 100%; padding-right: 42px; }
.login-password__toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; cursor: pointer; color: var(--muted); width: 30px; height: 30px;
  display: grid; place-items: center; border-radius: 6px;
}
.login-password__toggle:hover { color: var(--text); }
.login-password__icon { display: flex; }
.login-password__icon .icon { width: 18px; height: 18px; }
.login-password__icon--hide { display: none; }
.login-password.is-visible .login-password__icon--show { display: none; }
.login-password.is-visible .login-password__icon--hide { display: flex; }

.login-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 20px; font-size: 13px; }
.login-remember { display: flex; align-items: center; gap: 6px; color: var(--text); cursor: pointer; }
.login-remember input { margin: 0; accent-color: var(--anil); }
.login-forgot { color: #2563eb; }
.login-forgot:hover { text-decoration: underline; }

.login-submit {
  width: 100%; padding: 12px; border-radius: 8px; border: 0; background: var(--anil); color: white;
  font-size: 14px; font-weight: 700; cursor: pointer; transition: opacity .15s ease;
}
.login-submit:hover { opacity: .88; }

.login-footer { text-align: center; margin-top: 18px; font-size: 13px; color: var(--muted); }
.login-footer a { color: #2563eb; font-weight: 600; }
.login-footer a:hover { text-decoration: underline; }

@media (max-width: 420px) {
  .login-modal__box { width: 100%; padding: 22px; }
}

/* Animación de entrada/salida nativa del <dialog> (progressive
   enhancement: en navegadores sin soporte de @starting-style el modal
   simplemente aparece sin transición, sin romper nada). */
@media (prefers-reduced-motion: no-preference) {
  .modal {
    transition: opacity .22s ease, display .22s allow-discrete, overlay .22s allow-discrete;
    opacity: 1;
  }
  .modal:not([open]) { opacity: 0; }
  .modal__box, .login-modal__box {
    transition: transform .22s ease, opacity .22s ease;
    transform: translateY(0) scale(1);
  }
  @starting-style {
    .modal[open] { opacity: 0; }
    .modal[open] .modal__box, .modal[open] .login-modal__box { transform: translateY(14px) scale(0.97); opacity: 0; }
  }
}

/* El fondo no debe poder scrollear con el modal abierto — :has() lo
   resuelve de forma declarativa, sin tener que trackear estado en JS ni
   arriesgarse a que quede "pegado" si el modal se cierra por una
   navegación PJAX en vez de un cierre normal. */
body:has(dialog.modal[open]) { overflow: hidden; }

/* Modal de "Publicando…" (ver initWizard en app.js): se muestra apenas se
   toca el botón final del wizard de publicar vehículo, antes de que
   termine de subirse el formulario (fotos incluidas, puede tardar unos
   segundos) — sin esto, un clic sin respuesta inmediata se sentía como
   que no había pasado nada. Se crea por JS y se agrega a <body>, así que
   usa variables globales (no las de .rk) y no tiene botón para cerrarla:
   se cierra sola cuando la página se reemplaza (éxito o error del envío). */
.loading-modal { border: 0; padding: 0; margin: 0; background: transparent; max-width: 100vw; max-height: 100vh; }
.loading-modal[open] { display: flex; align-items: center; justify-content: center; }
.loading-modal::backdrop { background: rgba(20, 17, 14, 0.55); backdrop-filter: blur(4px); }
.loading-modal__box {
  background: white; border-radius: 16px; padding: 34px 44px; display: flex; flex-direction: column;
  align-items: center; gap: 14px; box-shadow: 0 24px 60px rgba(10, 10, 10, 0.28);
}
.loading-modal__spinner {
  width: 32px; height: 32px; border-radius: 50%; border: 3px solid rgba(10, 10, 10, 0.12);
  border-top-color: var(--pf-ink); animation: loading-modal-spin 0.8s linear infinite;
}
@keyframes loading-modal-spin { to { transform: rotate(360deg); } }
.loading-modal__box p { margin: 0; font-weight: 700; font-size: 14px; color: var(--pf-ink); }
@media (prefers-reduced-motion: reduce) {
  .loading-modal__spinner { animation-duration: 2s; }
}

/* Modal "Registro enviado exitosamente" (ver initPublishSuccessModal en
   app.js): aparece en la página a la que se llega DESPUÉS de que el modal
   de "Publicando…" de arriba termina (esa se cierra sola al reemplazarse
   la página con la respuesta del servidor) — a diferencia de esa, esta sí
   se puede cerrar (botón, clic afuera, Escape) y además se cierra sola a
   los pocos segundos. */
.success-modal { border: 0; padding: 0; margin: 0; background: transparent; max-width: 100vw; max-height: 100vh; }
.success-modal[open] { display: flex; align-items: center; justify-content: center; }
.success-modal::backdrop { background: rgba(20, 17, 14, 0.55); backdrop-filter: blur(4px); }
.success-modal__box {
  position: relative; max-width: 320px; background: white; border-radius: 16px; padding: 34px 30px;
  display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
  box-shadow: 0 24px 60px rgba(10, 10, 10, 0.28);
}
.success-modal__icon {
  width: 44px; height: 44px; border-radius: 50%; background: rgba(59, 103, 64, 0.12); color: var(--pf-emerald);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.success-modal__icon .icon { width: 24px; height: 24px; }
.success-modal__box p { margin: 0; font-weight: 700; font-size: 15px; color: var(--pf-ink); }
.success-modal__close {
  position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 50%; border: 0;
  background: transparent; color: var(--pf-muted); display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .15s ease;
}
.success-modal__close:hover { background: rgba(0, 0, 0, 0.06); }
.success-modal__close .icon { width: 15px; height: 15px; }

@media (max-width: 700px) {
  .path-grid { grid-template-columns: 1fr; }
  .profile-hero__inner { align-items: flex-start; }
  .profile-hero__stats { margin-left: 0; gap: 20px; }
  .profile-stat { text-align: left; }
  .host-form { grid-template-columns: 1fr; }
  .host-empty { flex-direction: column; text-align: center; }
  .modal { padding: 0; }
  .modal__box { width: 100vw; max-height: 100vh; height: 100%; border-radius: 0; }
  .modal__header { border-radius: 0; }
}

@media (max-width: 900px) {
  .card-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .detail-layout { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .hero-search { margin-top: 0; }
}

@media (max-width: 700px) {
  .topbar__nav { display: none; }
  /* "Explorar"/"Ser anfitrión" (normalmente en .topbar__nav, oculto acá
     arriba) pasan a vivir adentro del mismo menú de cuenta — antes había
     un botón de hamburguesa aparte para esto, y con sesión iniciada
     terminaban apareciendo DOS hamburguesas a la vez en la misma pantalla
     (una para "cuenta", otra para "explorar"). Un solo menú, mismo ícono,
     para cualquier caso: sin sesión, cliente o anfitrión. */
  .user-menu__panel a.user-menu__mobile-only { display: flex; }
  .user-menu__divider.user-menu__mobile-only { display: block; }
  /* Dos por fila (no una sola columna) en celulares: la tarjeta se achica
     acá abajo (foto más baja, menos padding, título/precio apilados en
     vez de lado a lado) para que siga siendo legible a ese ancho. */
  .card-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  .card__photo { height: 110px; padding: 10px; }
  .card__photo-icon { font-size: 28px; }
  .card__badge { font-size: 9px; padding: 4px 8px; letter-spacing: 0.1em; }
  .card__body { padding: 10px; gap: 4px; }
  .card__head { flex-direction: column; align-items: flex-start; gap: 2px; }
  .card__head h3 { font-size: 14px; margin: 0; }
  .card__head p { font-size: 11px; }
  .price { font-size: 14px; }
  .price span { font-size: 10px; }
  .card__location, .card__specs { font-size: 11px; }
  .booking-form__row { grid-template-columns: 1fr; }
  /* Achicar tipografía/espaciado antes que romper a otra fila — la fila
     de specs se pidió expresamente compacta y de una sola línea. */
  .detail-specs-row__item { font-size: 11.5px; gap: 4px; padding: 8px 3px; }
  .detail-specs-row__item .icon { width: 14px; height: 14px; }
  .detail-top__title { font-size: 21px; }
  .detail-list { grid-template-columns: 1fr; }
  .detail-card__media { height: 260px; }
  .detail-gallery--split { grid-template-columns: 1fr; }
  .detail-gallery__side { grid-template-rows: 1fr; grid-auto-flow: column; height: 100px; }
  /* Buscador de Explorar en mobile: una sola barra tipo píldora, igual al
     buscador real de turo.com en celular (campo de texto + botón circular
     de lupa a la derecha, todo en una línea) — no la tarjeta apilada de
     antes. Desde/Hasta se esconden (Turo tampoco los muestra en esa barra
     mobile); el JS ya ignora el filtro de fechas si quedan vacíos, sin
     tocar nada de la lógica. Selectores (data-filter-ubicacion, etc.) y
     atributos no se tocan, solo el diseño. */
  .turo-search {
    flex-direction: row; align-items: center; gap: 0;
    background: white; border-radius: 999px; border: 0; box-shadow: 0 4px 18px rgba(0,0,0,0.18);
    padding: 4px 4px 4px 18px;
  }
  .turo-search__divider { display: none; }
  .turo-search__field {
    flex-direction: row; align-items: center; gap: 0; min-height: 0;
    background: transparent; border: 0; box-shadow: none; padding: 0; flex: 1; min-width: 0;
  }
  .turo-search__field-icon { display: none; }
  .turo-search__label { display: none; }
  .turo-search__field-body { display: flex; flex: 1; min-width: 0; }
  .turo-search__field select { font-size: 16px; padding: 14px 0; }
  .turo-search__field--date { display: none; }
  .turo-search__submit {
    width: 44px; height: 44px; flex-shrink: 0; margin: 0; padding: 0;
    display: flex; align-items: center; justify-content: center;
  }
  .turo-search__submit-icon { display: flex; }
  .turo-search__submit-icon .icon { width: 20px; height: 20px; }
  .turo-search__submit-text { display: none; }
  /* Con justify-content:center (desktop, donde los chips entran sin
     scroll), una fila más ancha que la pantalla arranca centrada — el
     scroll inicial queda a mitad de camino y el primer chip ("Todos",
     activo y en negro) se ve cortado a la mitad en el borde izquierdo.
     En mobile, donde la fila si o si desborda y scrollea, tiene que
     arrancar alineada a la izquierda para verse completa desde el inicio. */
  .category-row { justify-content: flex-start; }
  .trust-bar { grid-template-columns: 1fr; }
  .footer { flex-direction: column; align-items: flex-start; }
  .topbar__inner { flex-wrap: wrap; }
  /* Un solo menú de cuenta, siempre visible, con o sin sesión iniciada —
     ver el comentario de arriba. */
  .topbar__info, .topbar__auth { display: none; }
  .search-card { grid-template-columns: 1fr; }
  .reservation-card__header { flex-direction: column; align-items: flex-start; }
}