/* LUUPIGO objects-public-ux-o4b-20260722-01 */

:root {
  --obj-page-max: 520px;
  --obj-card-radius: 18px;
  --obj-line-soft: #dbe7fb;
  --obj-text: #071a3a;
  --obj-muted: #53627a;
  --obj-purple: #6f35dc;
  --obj-blue: #1f6feb;
  --obj-green: #18b35b;
}

/* Base pública común */
html {
  min-width: 320px;
}

body {
  color: var(--obj-text);
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

.objects-app,
.objects-submit-shell,
.object-detail-app,
.manage-app {
  width: min(100% - 24px, var(--obj-page-max));
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

/* La barra inferior no debe tapar CTA ni contenido */
.objects-shell-bottom,
.bottom-nav {
  width: min(100% - 24px, 420px);
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%);
  border: 1px solid rgba(204, 220, 245, 0.92);
  box-shadow: 0 -12px 34px rgba(17, 32, 66, 0.12);
  z-index: 50;
}

body {
  padding-bottom: max(108px, calc(88px + env(safe-area-inset-bottom))) !important;
}

/* Ficha: imagen completa, estable y bonita */
.object-detail-content,
.object-detail-loading,
.object-detail-error {
  border-radius: var(--obj-card-radius);
}

.object-photo {
  width: 100%;
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,.22), transparent 32%),
    linear-gradient(135deg, #7c3aed, #1f78ff);
  display: grid;
  place-items: center;
}

.object-photo img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain !important;
  object-position: center center !important;
  background: transparent;
}

.object-main h1,
[data-object-title] {
  overflow-wrap: anywhere;
  hyphens: auto;
  line-height: 1.08;
}

.object-actions,
.object-detail-actions {
  margin-bottom: 18px;
}

.object-primary,
.object-secondary,
.object-2h-secondary,
.objects-submit-primary,
.objects-submit-secondary,
.objects-soft-btn,
.objects-choice {
  min-height: 48px;
  touch-action: manipulation;
}

/* Mapa detalle */
.object-detail-leaflet-map,
.object-map,
[data-object-map] {
  min-height: 220px;
  border-radius: 14px;
  overflow: hidden;
}

/* Home/listado */
.objects-app {
  padding-bottom: 20px;
}

.objects-list,
[data-object-list] {
  display: grid;
  gap: 12px;
}

.object-card,
.pro-card {
  border-radius: 16px;
  min-height: 92px;
}

.object-card-main strong,
.object-card-main span,
.object-card-main small {
  overflow-wrap: anywhere;
}

/* Mapa público */
.map-preview {
  width: min(100% - 20px, 760px);
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%);
  border-radius: 20px 20px 0 0;
}

.fake-map,
.objects-leaflet-map {
  min-height: 420px;
}

/* Publicar */
.objects-submit-body,
.objects-submit-hero,
.objects-submit-form,
.objects-success {
  border-radius: 18px;
}

.objects-category-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.objects-field,
.objects-native-select,
.objects-location-btn {
  min-height: 46px;
  font-size: 16px;
}

/* PC: mantener estética app, pero con más aire y mejor encuadre */
@media (min-width: 760px) {
  :root {
    --obj-page-max: 560px;
  }

  body.objects-desktop .objects-app {
    width: min(100% - 48px, 1120px);
    max-width: 1120px;
  }

  body.objects-desktop .object-detail-app,
  body.objects-desktop .objects-submit-shell,
  body.objects-desktop .manage-app {
    width: min(100% - 48px, 520px);
    max-width: 520px;
  }

  body.objects-desktop .object-photo {
    aspect-ratio: 4 / 3;
    max-height: 440px;
  }

  body.objects-desktop .object-photo img {
    object-fit: contain !important;
  }

  body.objects-desktop .objects-shell-bottom,
  body.objects-desktop .bottom-nav {
    width: 420px;
  }

  body.objects-desktop .objects-list,
  body.objects-desktop [data-object-list] {
    max-height: none;
  }

  body.objects-desktop .map-preview {
    width: min(100% - 48px, 960px);
    top: 86px;
    bottom: 24px;
    border-radius: 20px;
  }

  body.objects-desktop .fake-map,
  body.objects-desktop .objects-leaflet-map {
    min-height: 520px;
  }
}

/* Móviles estrechos */
@media (max-width: 420px) {
  .objects-app,
  .objects-submit-shell,
  .object-detail-app,
  .manage-app {
    width: min(100% - 18px, 100%);
  }

  .object-photo {
    aspect-ratio: 1 / 1;
    border-radius: 14px;
  }

  .objects-category-grid {
    grid-template-columns: 1fr;
  }

  .object-main h1,
  [data-object-title] {
    font-size: clamp(22px, 7vw, 30px);
  }

  .map-preview {
    width: 100%;
    border-radius: 18px 18px 0 0;
  }
}


/* LUUPIGO objects-public-ux-o4c-polish-20260722-01 */

@media (min-width: 900px) {
  body.objects-desktop {
    min-height: 100vh;
  }

  body.objects-desktop .objects-app {
    width: min(1180px, calc(100vw - 56px)) !important;
    max-width: 1180px !important;
    margin: 48px auto 120px !important;
    padding: 28px !important;
    display: grid !important;
    grid-template-columns: minmax(330px, 420px) minmax(520px, 1fr) !important;
    gap: 28px !important;
    align-items: start !important;
  }

  body.objects-desktop .object-detail-app {
    width: min(520px, calc(100vw - 56px)) !important;
    max-width: 520px !important;
    margin: 34px auto 128px !important;
    padding: 18px !important;
  }

  body.objects-desktop .objects-submit-shell,
  body.objects-desktop .manage-app {
    width: min(700px, calc(100vw - 56px)) !important;
    max-width: 700px !important;
    margin: 48px auto 128px !important;
  }

  body.objects-desktop .object-photo {
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    min-height: 260px !important;
    max-height: 380px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  body.objects-desktop .object-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
  }

  body.objects-desktop .objects-list,
  body.objects-desktop [data-object-list] {
    max-height: none !important;
    overflow: visible !important;
  }

  body.objects-desktop .objects-shell-bottom,
  body.objects-desktop .bottom-nav {
    width: min(420px, calc(100vw - 56px)) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    bottom: 14px !important;
    border-radius: 0 !important;
  }
}

@media (max-width: 899px) {
  .objects-app,
  .object-detail-app,
  .objects-submit-shell,
  .manage-app {
    width: min(100%, 430px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .object-photo {
    aspect-ratio: 1 / 1 !important;
    max-height: 360px !important;
  }

  .object-photo img {
    object-fit: contain !important;
  }

  .objects-shell-bottom,
  .bottom-nav {
    width: min(100%, 430px) !important;
  }
}