/* ============================================================================
   J&L Asesores Patrimoniales — estilos complementarios
   (se cargan después de site.css y sólo añaden lo necesario para el sitio
   generado desde el servidor: marcadores de posición, toasts, formularios
   largos, video y estados de disponibilidad)
   ========================================================================== */

/* ------------------------------------------------------------- Accesibilidad */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:#163B57;color:#fff;padding:12px 18px;border-radius:0 0 6px 0;font-size:14px;
}
.skip-link:focus{left:0;}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ------------------------------------------------------------------- Layout */
#app{min-height:55vh;}

.muted-copy{color:var(--muted);margin-bottom:14px;font-size:14.5px;}

.listing-head-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;}

/* --------------------------------------------------- Tarjetas de propiedades */
.prop-card-link{display:block;color:inherit;text-decoration:none;}

.prop-img-placeholder{
  width:100%;height:100%;min-height:190px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:linear-gradient(140deg,#E7F2F5 0%,#D3E5EB 60%,#C4DCE4 100%);
  color:#2C5D70;text-align:center;padding:18px;
}
.prop-img-placeholder span{font-size:16px;font-weight:600;letter-spacing:.01em;}
.prop-img-placeholder small{font-size:12px;color:#5B7E8C;max-width:200px;line-height:1.4;}
.prop-img-placeholder-lg{min-height:340px;border:1px solid var(--rule);}

/* --------------------------------------------------- Tarjetas operaciones */
.sold-case-placeholder-v14{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(150deg,#1B3A4B,#0F2734);color:#9FC7D4;z-index:1;
}
.sold-case-placeholder-v14 svg{width:38px;height:38px;stroke:currentColor;}
.sold-case-placeholder-v14 span{font-size:14px;letter-spacing:.04em;text-transform:uppercase;}

/* --------------------------------------------------------- Galería y video */
.gallery-thumbs .gallery-video-thumb{
  aspect-ratio:4/3;background-size:cover;background-position:center;background-color:#163B57;
  border:1px solid transparent;cursor:pointer;opacity:.75;position:relative;padding:0;
  display:flex;align-items:center;justify-content:center;transition:opacity .15s ease,border-color .15s ease;
}
.gallery-thumbs .gallery-video-thumb:hover{opacity:1;}
.gallery-thumbs .gallery-video-thumb.active{opacity:1;border-color:var(--ink);}
.video-play{
  width:42px;height:42px;border-radius:50%;background:rgba(13,38,56,.78);
  display:flex;align-items:center;justify-content:center;
}
.video-play svg{width:20px;height:20px;stroke:#fff;}

.video-panel{margin-top:14px;}
.video-frame{position:relative;aspect-ratio:16/9;background:#0D2638;border:1px solid var(--rule);}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.video-player{width:100%;max-height:560px;background:#0D2638;border:1px solid var(--rule);display:block;}

.map-embed{aspect-ratio:16/9;border:1px solid var(--rule);overflow:hidden;background:var(--surface);}
.map-embed iframe{width:100%;height:100%;border:0;display:block;}

.inquiry-meta{margin-top:22px;padding-top:18px;border-top:1px solid var(--rule);display:flex;flex-direction:column;gap:10px;}
.inquiry-meta div{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;color:var(--ink-soft);}
.inquiry-meta div span{color:var(--muted);}

/* --------------------------------------------------------- Formularios largos */
.lead-form-card{
  background:var(--surface);border:1px solid var(--rule);border-radius:20px;
  padding:34px;box-shadow:0 18px 48px rgba(22,50,71,.06);
}
.lead-form-card .form-block-title{
  font-size:15px;letter-spacing:.02em;text-transform:uppercase;color:var(--brand-gold-dark);
  margin:26px 0 14px;font-weight:600;
}
.lead-form-card .form-block-title:first-of-type{margin-top:0;}
.form-block-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.form-block-grid-4{grid-template-columns:repeat(4,1fr);}
.lead-form-card .field{margin-bottom:6px;}
.lead-form-card .btn-block{margin-top:22px;}
.lead-form-card select{
  width:100%;padding:13px 14px;border:1px solid var(--rule);background:var(--paper);
  font-family:inherit;font-size:15px;color:var(--ink);border-radius:var(--radius);
}
.lead-form-card select:focus{outline:2px solid var(--brand-gold);outline-offset:1px;}

.contact-appointment-note{margin:14px 0 0;font-size:12.5px;color:#AEC6D0;}

/* --------------------------------------------------------- Horarios y citas */
.time-slot[disabled], .time-slot.disabled{
  cursor:not-allowed;opacity:.45;background:#EFF4F6;display:flex;flex-direction:column;gap:2px;align-items:center;
}
.time-slot small{font-size:10.5px;color:#9C3528;text-transform:uppercase;letter-spacing:.04em;}

button.cal-day, button.time-slot, button.option-btn{font-family:inherit;color:inherit;}
button.cal-day .d{display:block;}

/* ------------------------------------------------------------------- Toasts */
.toast-stack{position:fixed;right:20px;bottom:96px;z-index:120;display:flex;flex-direction:column;gap:10px;max-width:340px;}
.toast{
  background:#0D2638;color:#F7FBFB;padding:14px 16px;border-radius:10px;font-size:14px;line-height:1.5;
  box-shadow:0 14px 36px rgba(13,38,56,.28);border-left:3px solid #36A9B8;
  animation:toast-in .22s ease;
}
.toast-error{border-left-color:#C4553F;}
.toast-success{border-left-color:#4FA97C;}
.toast-out{opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .3s ease;}

@keyframes toast-in{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

/* --------------------------------------------------------- Página de error */
.error-page{padding:96px 0;text-align:center;}
.error-code{font-size:64px;font-weight:600;color:var(--brand-gold);line-height:1;}
.error-page h1{font-size:30px;margin-top:14px;}
.error-page p{color:var(--muted);margin-top:14px;max-width:520px;margin-left:auto;margin-right:auto;}
.error-actions{margin-top:28px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

/* ------------------------------------------------------------------ Botones */
.btn-accent{background:var(--brand-gold);color:#fff;border-color:var(--brand-gold);}
.btn-accent:hover{background:var(--brand-gold-dark);}
.btn-glass{background:rgba(255,255,255,.10);color:#F7FBFB;border-color:rgba(255,255,255,.28);}
.btn-glass:hover{background:rgba(255,255,255,.18);}
.btn-accent-blue{background:#36A9B8;color:#fff;border-color:#36A9B8;}
.btn-accent-blue:hover{background:#287F9B;}
.btn[disabled]{opacity:.5;cursor:not-allowed;}

/* ----------------------------------------------------- Instalación / avisos */
.install-issues{margin:26px 0;text-align:left;}
.install-issue{
  background:#FCEDEA;border:1px solid #F1D0C8;color:#96382A;border-radius:10px;
  padding:14px 16px;margin-bottom:10px;font-size:14.5px;line-height:1.6;
}
.install-steps{margin-top:26px;text-align:left;display:grid;gap:16px;}
.install-step{background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:22px;box-shadow:0 12px 34px rgba(22,50,71,.05);}
.install-step h3{font-size:17px;color:var(--brand-green);}
.install-step p{color:var(--ink-soft);font-size:14.5px;line-height:1.7;margin:10px 0 0;}
.install-step code{background:#EBF2F5;padding:2px 6px;border-radius:5px;font-size:13px;}

/* -------------------------------------------------------------- Responsive */
@media (max-width:1024px){
  .form-block-grid-4{grid-template-columns:repeat(2,1fr);}
  .form-block-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:760px){
  .lead-form-card{padding:22px;border-radius:14px;}
  .form-block-grid, .form-block-grid-4{grid-template-columns:1fr;}
  .toast-stack{left:16px;right:16px;bottom:88px;max-width:none;}
  .error-code{font-size:52px;}
}