:root {
  --primary: #ff6b00;
  --primary-dark: #cc5600;
  --accent: #f2a154;
  --bg: #f5f3f1;
  --card-bg: #ffffff;
  --text: #111111;
  --text-muted: #6e6259;
  --border: #e6ddd6;
  --error: #b3261e;
  --exito: #1a8a68;
  --exito-dark: #0f6b4f;
  --shadow: 0 8px 24px rgba(40, 25, 15, 0.08), 0 2px 6px rgba(40, 25, 15, 0.05);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Plus Jakarta Sans", "Segoe UI", -apple-system, Roboto, Arial, sans-serif;
  /* Color sólido de marca: fallback si la foto de fondo no llega a cargar. */
  background: #1c2029;
  color: var(--text);
  position: relative;
  min-height: 100vh;
}

/* Fondo fotográfico full-bleed compartido por todas las pantallas (login,
   wizard, Mis inmuebles, Ajustes...). El overlay oscuro garantiza contraste
   AA para el texto blanco encima, tanto con la foto de exterior por defecto
   como con la variante de interior (paso de fotos). */
.fondo-hero {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(10, 8, 6, 0.35) 0%, rgba(10, 8, 6, 0.55) 55%, rgba(10, 8, 6, 0.8) 100%),
    url('/static/img/hero-exterior.jpg') center/cover no-repeat;
}

.fondo-hero.fondo-hero-interior {
  background-image:
    linear-gradient(180deg, rgba(10, 8, 6, 0.35) 0%, rgba(10, 8, 6, 0.55) 55%, rgba(10, 8, 6, 0.8) 100%),
    url('/static/img/hero-interior.jpg');
}

.container {
  max-width: 640px;
  margin: 0 auto;
  padding: 48px 20px 72px;
  position: relative;
}

header {
  text-align: center;
  margin-bottom: 28px;
}

.logo-mark {
  display: inline-flex;
  align-items: center;
  margin-bottom: 22px;
}

.logo-mark img {
  height: 64px;
  display: block;
}

h1 {
  color: #ffffff;
  font-size: 30px;
  line-height: 1.25;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}

h2 {
  font-size: 19px;
  margin-top: 0;
}

.subtitle {
  color: rgba(255, 255, 255, 0.85);
  margin: 0 auto;
  max-width: 460px;
  font-size: 16px;
}

/* Indicador de pasos */
.pasos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 32px;
}

.paso {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0.65;
}

.paso.activo, .paso.hecho { opacity: 1; }

.paso-numero {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.6);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}

/* "Completado" y "activo" comparten el mismo estilo (relleno naranja); solo
   los pasos futuros quedan en outline. */
.paso.activo .paso-numero,
.paso.hecho .paso-numero {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.paso.activo .paso-numero {
  box-shadow: 0 0 0 4px rgba(255, 107, 0, 0.25);
}

.paso-nombre {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
}

.paso.activo .paso-nombre, .paso.hecho .paso-nombre { color: #ffffff; }

.paso-linea {
  width: 32px;
  height: 2px;
  background: rgba(255, 255, 255, 0.35);
  margin-bottom: 20px;
}

.paso-linea.hecho { background: var(--primary); }

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 26px;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
}

.card-centrada {
  text-align: center;
}

.metricas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 18px;
  margin-top: 12px;
}

.metrica-item {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}

.metrica-numero {
  font-size: 28px;
  font-weight: 700;
  color: var(--primary-dark);
}

.metrica-etiqueta {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 4px;
}

.paso-icono {
  font-size: 40px;
  margin-bottom: 6px;
}

.ayuda {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
}

.chip-ia {
  display: inline-block;
  background: #fff3e6;
  color: #9a5b12;
  border: 1px solid #f3d8ad;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 20px;
}

.etiqueta-ia {
  display: inline-block;
  background: #fff3e6;
  color: #9a5b12;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  vertical-align: middle;
  margin-left: 6px;
}

.field {
  margin-bottom: 18px;
  text-align: left;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 14px;
}

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"],
input[type="password"],
select,
textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 15px;
  font-family: inherit;
  background: #fbfdfc;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.campo-password {
  position: relative;
}

.campo-password input {
  padding-right: 80px;
}

.btn-ver-password {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--primary);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  padding: 6px 8px;
}

.btn-ver-password:hover { text-decoration: underline; }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
  background: white;
}

textarea { resize: vertical; }

.checkbox-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}

.checkbox {
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 6px;
}

.checkbox input { width: auto; }

/* Zona de subida de fotos */
.dropzone-input { display: none; }

.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  border: 2px dashed var(--border);
  border-radius: 14px;
  padding: 36px 20px;
  margin: 20px 0 8px;
  cursor: pointer;
  color: var(--text-muted);
  font-weight: 600;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.dropzone:hover {
  border-color: var(--primary);
  background: #fdf3ee;
}

.dropzone:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.dropzone-icono {
  font-size: 26px;
}

.btn-primary {
  display: inline-block;
  background: var(--primary);
  color: white;
  border: none;
  padding: 13px 22px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background 0.15s ease, transform 0.1s ease;
}

.btn-primary:hover { background: var(--primary-dark); transform: translateY(-1px); }

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--primary);
  transform: none;
}

.btn-block { display: block; width: 100%; margin-top: 8px; }

.btn-secondary {
  background: white;
  color: var(--primary);
  border: 1px solid var(--primary);
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.btn-secondary:hover { background: #fdece0; transform: translateY(-1px); }

.form-inline { display: inline; }

.btn-peligro { color: var(--error); border-color: var(--error); }
.btn-peligro:hover { background: #fdeceb; }

.opciones-si-no {
  display: flex;
  gap: 12px;
}

.btn-opcion {
  flex: 1;
  background: white;
  color: var(--primary);
  border: 1px solid var(--border);
  padding: 14px 20px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease, border-color 0.15s ease;
}

.btn-opcion:hover { border-color: var(--primary); transform: translateY(-1px); }

.btn-opcion.activo {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.btn-instagram, .btn-pinterest, .btn-youtube, .btn-linkedin {
  display: block;
  width: 100%;
  border: none;
  padding: 13px 20px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  color: white;
  cursor: pointer;
  transition: transform 0.1s ease, filter 0.15s ease;
}

.btn-instagram:hover, .btn-pinterest:hover, .btn-youtube:hover, .btn-linkedin:hover { filter: brightness(1.06); transform: translateY(-1px); }

.btn-instagram {
  background: linear-gradient(135deg, #4f5bd5, #962fbf, #d62976, #fa7e1e, #feda75);
}

.btn-pinterest {
  background: #e60023;
}

.btn-linkedin {
  background: #0a66c2;
}

.btn-youtube {
  background: #ff0000;
}

.separador-publicaciones {
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 18px 0 10px;
  position: relative;
}

.separador-publicaciones::before, .separador-publicaciones::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 30%;
  height: 1px;
  background: var(--border);
}

.separador-publicaciones::before { left: 0; }
.separador-publicaciones::after { right: 0; }

.result-box {
  white-space: pre-wrap;
  background: #f9faf9;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 12px;
  line-height: 1.55;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
}

.instagram-preview {
  width: 100%;
  max-width: 380px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--border);
  display: block;
  margin: 0 auto 16px;
  box-shadow: var(--shadow);
}

.photo-grid img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--border);
  display: block;
}

.photo-item {
  position: relative;
}

.photo-badge-portada {
  position: absolute;
  top: 5px;
  left: 5px;
  background: var(--primary);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  pointer-events: none;
}

.photo-btn-portada {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.55);
  color: white;
  font-size: 10.5px;
  font-weight: 600;
  border: none;
  border-radius: 0 0 10px 10px;
  padding: 4px 0;
  cursor: pointer;
}

.photo-btn-portada:hover {
  background: rgba(0, 0, 0, 0.72);
}

.photo-add-tile {
  height: 100px;
  border-radius: 10px;
  border: 2px dashed var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.photo-add-tile:hover {
  border-color: var(--primary);
  background: rgba(255, 107, 0, 0.06);
}

.photo-add-tile.subiendo {
  opacity: 0.5;
  pointer-events: none;
}

.photo-add-tile-signo {
  font-size: 36px;
  line-height: 1;
  color: var(--primary);
  font-weight: 300;
}

.alert {
  padding: 13px 16px;
  border-radius: 10px;
  margin-bottom: 16px;
  font-size: 14px;
}

.alert-error {
  background: #fbeaea;
  color: var(--error);
  border: 1px solid #f2c6c3;
}

.alert-exito {
  background: #e9f7f0;
  color: var(--exito-dark);
  border: 1px solid #bfe3d5;
}

.alert-info {
  background: #fff8e8;
  color: #8a6414;
  border: 1px solid #f0dfa8;
}

.publicar-form {
  margin-top: 10px;
}

.video-preview {
  width: 100%;
  max-width: 280px;
  aspect-ratio: 9 / 16;
  border-radius: 12px;
  border: 1px solid var(--border);
  display: block;
  margin: 0 auto 16px;
  background: black;
  box-shadow: var(--shadow);
}

.progress-bar {
  width: 100%;
  height: 10px;
  background: #eef1ef;
  border-radius: 6px;
  overflow: hidden;
  margin-top: 14px;
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transition: width 0.3s ease;
}

/* Se usa cuando no hay forma de saber el % real (por ejemplo, mientras la IA
   analiza las fotos): una franja que se mueve, en vez de fingir un avance que
   no es real. */
.progress-fill.indeterminado {
  width: 40% !important;
  animation: progreso-indeterminado 1.1s ease-in-out infinite;
}

@keyframes progreso-indeterminado {
  0% { margin-left: -40%; }
  100% { margin-left: 100%; }
}

#video-estado-texto {
  color: var(--text-muted);
  font-size: 14px;
  margin-top: 8px;
}

/* Navegación de usuario: logo centrado arriba, chip + links centrados
   debajo, todo sobre el hero fotográfico. */
.nav-usuario {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
  margin-bottom: 28px;
  font-size: 14px;
}

.logo-nav {
  display: block;
  height: 20px;
}

.nav-usuario-derecha {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

.nav-usuario-nombre {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-link {
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 999px;
  transition: background 0.15s ease, opacity 0.15s ease;
}

.nav-link:hover { opacity: 0.8; }

.nav-link.nav-link-activo {
  background: var(--primary);
}

.nav-link.nav-link-activo:hover {
  opacity: 1;
  background: var(--primary-dark);
}

/* Panel Mis inmuebles */
.ficha-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.ficha-item-foto {
  width: 110px;
  height: 110px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.ficha-item-info { flex: 1; }

.ficha-item-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.ficha-item-precio {
  font-size: 18px;
  font-weight: 700;
  color: var(--primary-dark);
}

.ficha-item-fecha {
  color: var(--text-muted);
  font-size: 13px;
  white-space: nowrap;
}

.ficha-item-barrio {
  font-weight: 700;
  color: var(--text);
  margin: 2px 0 0;
}

.ficha-item-ubicacion {
  color: var(--text-muted);
  margin: 2px 0;
}

.ficha-item-detalle {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 4px 0 2px;
  font-size: 13px;
  color: var(--text-muted);
}

.ficha-item-tipo {
  display: inline-block;
  background: var(--bg);
  color: var(--text-muted);
  border: 1px solid var(--border);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
}

.buscar-inmuebles {
  margin-bottom: 16px;
}

.ficha-item-botones {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.ficha-item-botones .btn-secondary {
  padding: 8px 14px;
  font-size: 13px;
}

/* Programar publicación */
.programar-caja {
  margin-top: 10px;
  padding: 12px;
  background: #fbfdfc;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.programar-caja label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  margin-bottom: 0;
}

.programar-caja input[type="checkbox"] { width: auto; }

.programar-campos {
  display: none;
  margin-top: 10px;
  gap: 10px;
}

.programar-campos.activo { display: grid; grid-template-columns: 1fr; }

/* Formulario tipo Typeform: una pregunta por pantalla */
.typeform-progreso {
  height: 4px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 32px;
}

.typeform-progreso-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transition: width 0.35s ease;
}

.pregunta {
  display: none;
  min-height: 180px;
}

.pregunta.activa {
  display: block;
  animation: pregunta-entrada 0.35s ease;
}

@keyframes pregunta-entrada {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.pregunta-titulo {
  display: block;
  font-size: 23px;
  font-weight: 700;
  margin-bottom: 22px;
  line-height: 1.35;
}

.pregunta-input {
  font-size: 20px;
  padding: 14px 16px;
}

.pregunta textarea.pregunta-input {
  font-size: 17px;
}

.typeform-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.typeform-nav .btn-primary {
  margin-top: 0;
}

.card-portada { position: relative; }

.campo-icono { position: relative; }

/* Selector directo (>) a propósito: el ícono del ojo vive en un <svg> anidado
   dentro de .btn-ver-password-icono, dos niveles más adentro. Con un
   selector descendiente normal esta regla también lo alcanzaba, lo sacaba
   del centrado flex del botón (position:absolute) y lo dejaba sin poder
   recibir clics (pointer-events:none) — el botón terminaba colapsado a un
   cuadrito de 8x8px en vez de sus 20x20px reales. */
.campo-icono > svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  transition: color 0.15s ease;
}

.campo-icono input { padding-left: 42px; }

.campo-icono:focus-within > svg { color: var(--primary); }

.btn-ver-password-icono {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 4px;
  display: flex;
  cursor: pointer;
  color: var(--text-muted);
}

.btn-ver-password-icono:hover { color: var(--primary); }

/* Al final del archivo a propósito: en CSS, con la misma especificidad gana
   la regla que aparece último en el código, sin importar el @media. Estas
   tienen que quedar después de la regla base de .logo-mark img (más arriba)
   para que realmente apliquen en pantallas chicas. */
@media (max-width: 767px) {
  .logo-mark img { height: 44px; }
}

@media (max-width: 480px) {
  .logo-mark img { height: 30px; }
}

.campo-icono.campo-password input { padding-right: 42px; }