/* =====================================================================
   Módulo Desarrollos Verticales — estilos
   Usa las variables :root de app.css
   ===================================================================== */

/* ---- Admin: grilla de fotos ---- */
.dev-photos {
    display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .8rem;
}
.dev-photo {
    position: relative;
    width: 160px; max-width: 100%;
    border-radius: 10px; overflow: hidden;
    box-shadow: 0 1px 6px rgba(1,42,80,.12);
    background: #eef1f5;
}
/* thumbnail fijo: la foto NUNCA se ve gigante, siempre recuadro 4:3 */
.dev-photo img {
    display: block;
    width: 160px; max-width: 100%; height: 120px;
    object-fit: cover;
    border-radius: 10px;
}
.dev-photo__del {
    position: absolute; top: 7px; right: 7px; width: 30px; height: 30px;
    border: 0; border-radius: 50%; background: rgba(215,11,38,.92); color: #fff;
    cursor: pointer; font-size: .9rem; line-height: 1; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,.25); transition: transform .12s, background .12s;
}
.dev-photo__del:hover { background: #b00a20; transform: scale(1.08); }

/* =====================================================================
   PÚBLICO
   ===================================================================== */
.dev-hero {
    background: linear-gradient(135deg, var(--rp-ink,#012A50), var(--rp-forest,#013F78));
    color: #fff; padding: 3rem 0;
}
.dev-hero__title { font-size: 2.2rem; margin: 0 0 .4rem; }
.dev-hero__sub { opacity: .85; margin: 0; font-size: 1.1rem; }

.dev-list { padding: 2.5rem 0; }
.dev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.6rem; }
.dev-card {
    background: #fff; border-radius: 14px; overflow: hidden; text-decoration: none; color: inherit;
    box-shadow: 0 2px 12px rgba(1,42,80,.08); transition: transform .15s, box-shadow .15s;
}
.dev-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(1,42,80,.16); }
.dev-card__img { position: relative; aspect-ratio: 16/10; background: #eef1f5; }
.dev-card__img img { width: 100%; height: 100%; object-fit: cover; }
.dev-card__noimg { width: 100%; height: 100%; background: linear-gradient(135deg,#dce3ec,#eef1f5); }
.dev-card__status {
    position: absolute; top: .8rem; left: .8rem; color: #fff; font-size: .78rem;
    padding: .25rem .7rem; border-radius: 30px; background: var(--rp-navy-light,#0A5A9E);
}
.dev-card__status--activo { background: #1a9e5a; }
.dev-card__status--en_obra { background: #d98c00; }
.dev-card__status--futuro { background: #64707F; }
.dev-card__status--entregado { background: var(--rp-navy-light,#0A5A9E); }
.dev-card__feat {
    position: absolute; top: .8rem; right: .8rem; background: var(--rp-gold,#C79A3E);
    color: #fff; font-size: .72rem; padding: .2rem .6rem; border-radius: 30px;
}
.dev-card__body { padding: 1.1rem; }
.dev-card__title { font-size: 1.2rem; margin: 0 0 .3rem; color: var(--rp-forest,#013F78); }
.dev-card__loc { color: #64707F; font-size: .9rem; margin: 0 0 .6rem; }
.dev-card__meta { display: flex; gap: 1rem; font-size: .82rem; color: #64707F; margin: 0; }

/* ---- Ficha ---- */
.dev-detail { padding: 2rem 0; }
.dev-detail__back { color: var(--rp-navy-light,#0A5A9E); text-decoration: none; font-size: .9rem; display: inline-block; margin-bottom: 1rem; }
.dev-gallery__noimg { width: 100%; height: 320px; background: #eef1f5; border-radius: 14px; }

/* ---- Carrusel de fotos ---- */
.dev-carousel { margin-bottom: 1rem; }
.dev-carousel__viewport {
    position: relative; width: 100%; border-radius: 14px; overflow: hidden;
    background: #0a1621; aspect-ratio: 16/9;
}
.dev-carousel__track { position: absolute; inset: 0; }
.dev-carousel__slide {
    position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease;
    pointer-events: none;
}
.dev-carousel__slide.is-active { opacity: 1; pointer-events: auto; }
.dev-carousel__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* flechas */
.dev-carousel__nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 46px; height: 46px; border: 0; border-radius: 50%;
    background: rgba(1,42,80,.55); color: #fff; font-size: 1.8rem; line-height: 1;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background .15s; z-index: 3; padding-bottom: 4px;
}
.dev-carousel__nav:hover { background: rgba(1,42,80,.85); }
.dev-carousel__nav--prev { left: 12px; }
.dev-carousel__nav--next { right: 12px; }

/* play/pausa */
.dev-carousel__play {
    position: absolute; bottom: 12px; right: 12px; z-index: 3;
    width: 44px; height: 44px; border: 0; border-radius: 50%;
    background: rgba(215,11,38,.9); color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: .9rem;
    transition: background .15s, transform .12s; box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.dev-carousel__play:hover { background: var(--rp-accent,#D70B26); transform: scale(1.06); }

/* contador */
.dev-carousel__counter {
    position: absolute; bottom: 14px; left: 14px; z-index: 3;
    background: rgba(1,42,80,.6); color: #fff; font-size: .82rem;
    padding: .2rem .7rem; border-radius: 20px;
}

/* dots */
.dev-carousel__dots { display: flex; justify-content: center; gap: .4rem; margin-top: .7rem; flex-wrap: wrap; }
.dev-carousel__dot {
    width: 9px; height: 9px; border: 0; border-radius: 50%; padding: 0;
    background: #cbd6e2; cursor: pointer; transition: background .15s, transform .15s;
}
.dev-carousel__dot.is-active { background: var(--rp-accent,#D70B26); transform: scale(1.25); }

/* thumbs */
.dev-carousel__thumbs { display: flex; gap: .5rem; margin-top: .7rem; overflow-x: auto; padding-bottom: .3rem; }
.dev-carousel__thumb {
    width: 92px; height: 66px; flex: 0 0 auto; object-fit: cover; border-radius: 8px;
    cursor: pointer; border: 3px solid transparent; opacity: .65; transition: opacity .15s, border-color .15s;
}
.dev-carousel__thumb:hover { opacity: 1; }
.dev-carousel__thumb.is-active { opacity: 1; border-color: var(--rp-accent,#D70B26); }

/* ---- Mapa ---- */
.dev-map { margin-top: 1.6rem; }
.dev-map h2 { font-size: 1.25rem; color: var(--rp-forest,#013F78); margin-bottom: .6rem; }
.dev-map__frame { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 12px rgba(1,42,80,.1); }
.dev-map__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

.dev-detail__grid { display: grid; grid-template-columns: 1fr 320px; gap: 2rem; margin-top: 1.5rem; }
/* permitir que las columnas del grid se achiquen: si no, el contenido ancho
   (como la tabla) impide encoger y desborda la página en móvil */
.dev-detail__main { min-width: 0; }
.dev-detail__aside { min-width: 0; }
.dev-detail__status { background: var(--rp-navy-light,#0A5A9E); color: #fff; font-size: .82rem; padding: .25rem .8rem; border-radius: 30px; }
.dev-detail__title { font-size: 1.9rem; color: var(--rp-forest,#013F78); margin: .6rem 0 .3rem; }
.dev-detail__loc { color: #64707F; margin: 0 0 .3rem; }
.dev-detail__dev { color: #3a4652; font-size: .95rem; }
.dev-detail__desc, .dev-typologies, .dev-payment { margin-top: 1.6rem; }
.dev-detail__desc h2, .dev-typologies h2, .dev-payment h2 { font-size: 1.25rem; color: var(--rp-forest,#013F78); margin-bottom: .6rem; }
.dev-detail__desc p, .dev-payment p { line-height: 1.7; color: var(--rp-ink,#012A50); }

/* wrapper con scroll horizontal: la tabla nunca desborda la página en móvil */
.dev-typologies { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dev-typ-table { width: 100%; border-collapse: collapse; min-width: 480px; }
.dev-typ-table th, .dev-typ-table td { padding: .7rem .6rem; text-align: left; border-bottom: 1px solid #e3e8ee; font-size: .92rem; white-space: nowrap; }
.dev-typ-table th { background: #f5f7fa; color: var(--rp-forest,#013F78); font-weight: 600; }
.dev-typ-table td:last-child { font-weight: 700; color: var(--rp-accent,#D70B26); }

/* ---- Aside: interés + comisión ---- */
.dev-interest {
    background: #fff; border-radius: 14px; padding: 1.4rem; box-shadow: 0 2px 12px rgba(1,42,80,.1);
    position: sticky; top: 1rem; margin-bottom: 1rem;
}
.dev-interest h3 { font-size: 1.15rem; color: var(--rp-forest,#013F78); margin: 0 0 .5rem; }
.dev-interest p { color: #64707F; font-size: .92rem; margin: 0 0 1rem; }

.dev-commission { background: #fff; border-radius: 14px; padding: 1.4rem; box-shadow: 0 2px 12px rgba(1,42,80,.1); border-top: 4px solid var(--rp-gold,#C79A3E); }
.dev-commission__badge { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--rp-gold,#C79A3E); font-weight: 700; }
.dev-commission__pct { font-size: 2.6rem; font-weight: 800; color: var(--rp-forest,#013F78); line-height: 1; margin: .3rem 0; }
.dev-commission__terms { color: #3a4652; font-size: .9rem; }
.dev-commission__hint { color: #8894a3; font-size: .78rem; margin: .6rem 0 0; }
.dev-commission--locked { border-top-color: #cbd6e2; }
.dev-commission--locked .dev-commission__lock { font-weight: 700; color: #64707F; margin-bottom: .5rem; }
.dev-commission--locked p { color: #64707F; font-size: .9rem; margin: 0; }
.dev-commission--locked a { color: var(--rp-accent,#D70B26); font-weight: 600; }

/* ---- Login franquiciados ---- */
.fa-login { padding: 3rem 0; }
.fa-login__box { max-width: 400px; margin: 0 auto; background: #fff; border-radius: 14px; padding: 2.2rem; box-shadow: 0 10px 40px rgba(1,42,80,.12); }
.fa-login__title { font-size: 1.5rem; color: var(--rp-forest,#013F78); margin: 0 0 .3rem; }
.fa-login__sub { color: #64707F; font-size: .95rem; margin: 0 0 1.4rem; }
.fa-login__foot { text-align: center; color: #8894a3; font-size: .85rem; margin: 1.2rem 0 0; }

@media (max-width: 768px) {
    .dev-detail__grid { grid-template-columns: 1fr; }
    .container { padding-left: 18px !important; padding-right: 18px !important; }
}

/* =====================================================================
   Vitrina pública (captación) + Área privada del franquiciado
   ===================================================================== */

/* Bloque de captación en ficha pública */
.dev-captacion { background: #fff; border-radius: 14px; padding: 1.4rem; box-shadow: 0 2px 12px rgba(1,42,80,.1); border-top: 4px solid var(--rp-gold,#C79A3E); }
.dev-captacion__badge { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--rp-gold,#C79A3E); font-weight: 700; }
.dev-captacion__text { color: #3a4652; font-size: .92rem; margin: .5rem 0; }
.dev-captacion__cta { color: #64707F; font-size: .88rem; margin: 0; }
.dev-captacion__cta a { color: var(--rp-accent,#D70B26); font-weight: 600; }

/* Área privada: cabecera */
.fa-area { padding: 2rem 0; }
.fa-area__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; }
.fa-area__title { font-size: 1.7rem; color: var(--rp-forest,#013F78); margin: 0 0 .3rem; }
.fa-area__sub { color: #64707F; margin: 0; }
.fa-empty { background: #fff; border-radius: 14px; padding: 2rem; text-align: center; color: #64707F; box-shadow: 0 2px 12px rgba(1,42,80,.08); }

/* badges en tarjetas del panel */
.dev-card__req { position: absolute; top: .8rem; right: .8rem; color: #fff; font-size: .72rem; padding: .2rem .6rem; border-radius: 30px; }
.dev-card__commission { font-size: .95rem; color: var(--rp-forest,#013F78); margin: 0; }
.dev-card__commission strong { color: var(--rp-accent,#D70B26); }

/* detalle privado */
.fa-detail .dev-detail__back { margin: 0; }

/* estado de la solicitud */
.fa-request { border-radius: 14px; padding: 1.2rem; margin-top: 1rem; box-shadow: 0 2px 12px rgba(1,42,80,.1); }
.fa-request--pendiente { background: #fff8ec; border-left: 4px solid #d98c00; }
.fa-request--aprobada { background: #eefaf971; border-left: 4px solid #1a9e5a; }
.fa-request--rechazada { background: #f5f6f8; border-left: 4px solid #8894a3; }
.fa-request__title { font-weight: 700; color: var(--rp-forest,#013F78); margin-bottom: .3rem; }
.fa-request__text { font-size: .9rem; color: #3a4652; margin: 0 0 .4rem; }
.fa-request__note { font-size: .85rem; color: #3a4652; background: rgba(255,255,255,.6); padding: .4rem .6rem; border-radius: 6px; }
.fa-request__date { font-size: .78rem; color: #8894a3; margin: .4rem 0 0; }

/* formulario de solicitud */
.fa-request-form { background: #fff; border-radius: 14px; padding: 1.4rem; margin-top: 1rem; box-shadow: 0 2px 12px rgba(1,42,80,.1); }
.fa-request-form h3 { font-size: 1.1rem; color: var(--rp-forest,#013F78); margin: 0 0 .4rem; }
.fa-request-form p { color: #64707F; font-size: .88rem; margin: 0 0 .8rem; }
.fa-request-form .form-check-label { font-size: .88rem; }

/* =====================================================================
   Admin: fotos por tipología
   ===================================================================== */
.typ-photos-block {
    background: #f7f9fc;
    border: 1px solid #e3e8ee;
    border-radius: 12px;
    padding: 1rem 1.1rem 1.1rem;
    margin-bottom: 1rem;
}
.typ-photos-block:last-child { margin-bottom: 0; }
.typ-photos-block__head { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: .8rem; }
.typ-photos-block__head strong { font-size: 1.02rem; color: var(--rp-forest,#013F78); }
.typ-photos-block__count { color: #8894a3; font-size: .82rem; }
.dev-photo__actions { position: absolute; top: 7px; right: 7px; display: flex; gap: 5px; }
.dev-photo__actions form { margin: 0; }
.dev-photo__star {
    width: 30px; height: 30px; border: 0; border-radius: 50%;
    background: rgba(199,154,62,.95); color: #fff; cursor: pointer; font-size: .9rem; line-height: 1;
    display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,.25);
    transition: transform .12s;
}
.dev-photo__star:hover { transform: scale(1.08); }
.dev-photo--plan { outline: 3px solid var(--rp-gold,#C79A3E); outline-offset: -2px; }
.dev-photo__planbadge {
    position: absolute; bottom: 7px; left: 7px; background: var(--rp-gold,#C79A3E); color: #fff;
    font-size: .68rem; padding: .16rem .55rem; border-radius: 20px; font-weight: 700;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

/* Botón "elegir foto" bonito (label estilizado sobre el input file) */
.photo-upload-btn {
    display: inline-flex; align-items: center; gap: .45rem;
    background: var(--rp-navy-light,#0A5A9E); color: #fff;
    padding: .5rem .95rem; border-radius: 9px; font-size: .9rem; font-weight: 600;
    cursor: pointer; border: 0; transition: background .12s, transform .12s;
}
.photo-upload-btn:hover { background: var(--rp-forest,#013F78); transform: translateY(-1px); }
.photo-upload-btn input[type="file"] { display: none; }
.photo-status { font-size: .82rem; color: #64707F; }
.photo-status--ok { color: #1a9e5a; }
.photo-status--err { color: var(--rp-accent,#D70B26); }

/* Cabecera de cada sección de fotos */
.photos-section__title { display: flex; align-items: center; gap: .5rem; }
.photos-section__title .badge-count {
    background: #e3e8ee; color: #3a4652; font-size: .72rem; padding: .12rem .55rem; border-radius: 20px; font-weight: 600;
}

/* =====================================================================
   Recuadro destacado de Formas de pago + contenido rich-text
   ===================================================================== */
.dev-payment-box {
    margin-top: 1.8rem;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(1,42,80,.12);
    border: 1px solid #e3e8ee;
}
.dev-payment-box__head {
    display: flex; align-items: center; gap: .7rem;
    background: linear-gradient(135deg, var(--rp-forest,#013F78), var(--rp-navy-light,#0A5A9E));
    color: #fff; padding: 1rem 1.4rem;
}
.dev-payment-box__head h2 { margin: 0; font-size: 1.2rem; color: #fff; }
.dev-payment-box__icon {
    font-size: 1.5rem; line-height: 1;
    background: rgba(255,255,255,.18); border-radius: 10px; padding: .35rem .5rem;
}
.dev-payment-box__body {
    padding: 1.3rem 1.4rem;
    background: #fff;
    line-height: 1.7; color: var(--rp-ink,#012A50);
}
.dev-payment-box__body ul, .dev-payment-box__body ol { margin: .4rem 0 .4rem 1.1rem; }
.dev-payment-box__body li { margin-bottom: .35rem; }
.dev-payment-box__body p:last-child { margin-bottom: 0; }

/* Contenido rich-text (descripción y pago): que el HTML del editor se vea prolijo */
.dev-richtext { line-height: 1.7; }
.dev-richtext p { margin: 0 0 .8rem; }
.dev-richtext p:last-child { margin-bottom: 0; }
.dev-richtext ul, .dev-richtext ol { margin: .4rem 0 .8rem 1.2rem; }
.dev-richtext li { margin-bottom: .35rem; }
.dev-richtext h1, .dev-richtext h2, .dev-richtext h3, .dev-richtext h4 { color: var(--rp-forest,#013F78); margin: 1rem 0 .5rem; }
.dev-richtext a { color: var(--rp-navy-light,#0A5A9E); text-decoration: underline; }
.dev-richtext blockquote { border-left: 3px solid var(--rp-gold,#C79A3E); margin: .8rem 0; padding: .3rem 0 .3rem 1rem; color: #3a4652; }
.dev-richtext table { width: 100%; border-collapse: collapse; margin: .6rem 0; }
.dev-richtext table td, .dev-richtext table th { border: 1px solid #e3e8ee; padding: .5rem .6rem; }

/* =====================================================================
   Cartelera de franquiciados
   ===================================================================== */
.cartelera-card__owner { font-size: .82rem; color: #64707F; margin: .4rem 0 0; }
.cartelera-card__owner strong { color: var(--rp-forest,#013F78); }

.cartelera-ops { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1rem 0; }
.cartelera-op {
    background: #f5f7fa; border-radius: 10px; padding: .6rem 1rem; font-size: 1rem; color: #3a4652;
}
.cartelera-op strong { color: var(--rp-accent,#D70B26); }

.cartelera-specs { display: flex; flex-wrap: wrap; gap: 1.4rem; margin: 1rem 0; padding: 1rem 0; border-top: 1px solid #e3e8ee; border-bottom: 1px solid #e3e8ee; }
.cartelera-specs div { font-size: .9rem; color: #64707F; }
.cartelera-specs span { font-size: 1.3rem; font-weight: 700; color: var(--rp-forest,#013F78); display: block; }

.cartelera-features { display: flex; flex-wrap: wrap; gap: .5rem; }
.cartelera-feature { background: #eef4fb; color: var(--rp-navy-light,#0A5A9E); border-radius: 20px; padding: .3rem .8rem; font-size: .85rem; }

/* =====================================================================
   Cartelera — botón "ver más propiedades de la franquicia"
   ===================================================================== */
.rp-btn--gold {
    background: linear-gradient(135deg, var(--rp-gold,#C79A3E), #b8862f);
    color: #fff; font-weight: 700;
    box-shadow: 0 3px 12px rgba(199,154,62,.35);
    transition: transform .12s, box-shadow .12s;
}
.rp-btn--gold:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(199,154,62,.45); color: #fff; }
.cartelera-vermas { margin-top: 1rem; background: #fff; border-radius: 14px; padding: 1.2rem; box-shadow: 0 2px 12px rgba(1,42,80,.1); text-align: center; }
.cartelera-vermas__note { font-size: .78rem; color: #8894a3; margin: .5rem 0 0; }