*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{

    --verde:#16A34A;
    --verde2:#22C55E;

    --blanco:#FFFFFF;

    --gris:#F4F6F9;

    --texto:#1F2937;

    --texto2:#64748B;

    --borde:#E8EDF2;

    --sombra:0 15px 35px rgba(0,0,0,.08);

    --radio:22px;

}

body{

    background:#E8ECF1;

    font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

    display:flex;

    justify-content:center;

    padding:30px;

}

/* CONTENEDOR */

.iphone{

    width:420px;

    min-height:100vh;

    background:white;

    border-radius:35px;

    overflow:hidden;

    box-shadow:
    0 25px 70px rgba(0,0,0,.15);

    position:relative;

    padding-bottom:120px;

}


/* HEADER */

.topbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:25px;

}

.logo{

    display:flex;

    align-items:center;

    gap:12px;

}

.logo img{

    width:48px;

}

.logo h2{

    font-size:18px;

    color:var(--texto);

}

.logo span{

    color:var(--texto2);

    font-size:13px;

}

.acciones{

    display:flex;

    align-items:center;

    gap:18px;

}

.avatar{

    width:46px;

    height:46px;

    border-radius:50%;

    object-fit:cover;

}

.campana{

    position:relative;

    font-size:22px;

    color:#555;

}

.campana span{

    position:absolute;

    top:-7px;

    right:-8px;

    background:#EF4444;

    color:white;

    width:18px;

    height:18px;

    border-radius:50%;

    font-size:11px;

    display:flex;

    justify-content:center;

    align-items:center;

}

/* SALUDO */

.saludo{

    padding:0 25px;

    margin-bottom:20px;

}

.saludo h1{

    font-size:33px;

    color:var(--texto);

    margin-bottom:5px;

}

.saludo p{

    color:var(--texto2);

    font-size:15px;

}

/* BANNER */

.banner{

    margin:0 20px 28px;

    border-radius:28px;

    overflow:hidden;

    box-shadow:var(--sombra);

}

.banner img{

    width:100%;

    display:block;

}

/* MENU */

.menu{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

    padding:0 20px;

    margin-bottom:28px;

}

.card{

    background:white;

    border-radius:22px;

    padding:25px 15px;

    text-align:center;

    box-shadow:var(--sombra);

    transition:.25s;

    cursor:pointer;
    
    text-decoration:none;

    color:inherit;

}

.card:hover{

    transform:translateY(-5px);

}

.card:active{

    transform:scale(.97);

}

.card i{

    font-size:28px;

    color:var(--verde);

    margin-bottom:14px;

}

.card h3{

    color:var(--texto);

    font-size:17px;

    margin-bottom:4px;

}

.card p{

    color:var(--texto2);

    font-size:13px;

}

/* BLOQUES */

.bloque{

    padding:0 20px;

    margin-bottom:30px;

}

.titulo{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:18px;

}

.titulo h2{

    font-size:22px;

    color:var(--texto);

}

.titulo a{

    color:var(--verde);

    text-decoration:none;

    font-size:14px;

}

/* ITEMS */

.item{

    display:flex;

    gap:15px;

    align-items:center;

    background:white;

    border-radius:20px;

    padding:18px;

    box-shadow:var(--sombra);

    margin-bottom:15px;

}

.icono{

    width:48px;

    height:48px;

    border-radius:15px;

    display:flex;

    justify-content:center;

    align-items:center;

    color:white;

}

.naranja{

    background:#F59E0B;

}

.azul{

    background:#2563EB;

}

.texto strong{

    color:var(--texto);

}

.texto p{

    color:var(--texto2);

    font-size:14px;

    margin-top:4px;

}

/* EVENTOS */

.eventos{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.evento{

    display:flex;

    gap:18px;

    background:white;

    border-radius:20px;

    padding:18px;

    box-shadow:var(--sombra);

}

.fecha{

    width:70px;

    background:#F3F7F4;

    border-radius:18px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

}

.fecha span{

    color:var(--verde);

    font-size:13px;

    font-weight:bold;

}

.fecha strong{

    font-size:30px;

    color:var(--texto);

}

/* COMUNIDAD */

.crear-post{

    background:white;

    margin:0 25px 30px;

    border-radius:26px;

    padding:22px;

    box-shadow:0 10px 35px rgba(0,0,0,.08);

}

.crear-top{

    display:flex;

    align-items:flex-start;

    gap:18px;

}

.post-avatar{

    width:55px;

    height:55px;

    border-radius:50%;

    object-fit:cover;

}

.crear-input{

    flex:1;

}

.crear-input textarea{

    width:100%;

    border:none;

    resize:none;

    outline:none;

    background:none;

    font-family:inherit;

    font-size:17px;

    line-height:1.6;

    min-height:90px;

    color:var(--texto);

}

.crear-input textarea::placeholder{

    color:#94A3B8;

}

.crear-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:20px;

    padding-top:18px;

    border-top:1px solid #F0F0F0;

}

.publicar{

    background:linear-gradient(180deg,#22C55E,#16A34A);

    color:white;

    border:none;

    padding:12px 24px;

    border-radius:16px;

    font-size:15px;

    font-weight:700;

    display:flex;

    align-items:center;

    gap:8px;

}

/* MENU INFERIOR */

.bottom{

    position:fixed;

    bottom:20px;

    width:390px;

    background:white;

    border-radius:30px;

    box-shadow:0 15px 40px rgba(0,0,0,.15);

    display:flex;

    justify-content:space-around;

    align-items:center;

    padding:15px;

}

.bottom a{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-decoration:none;

    color:#777;

    font-size:12px;

    gap:5px;

}

.bottom i{

    font-size:20px;

}

.activo{

    color:var(--verde)!important;

}



/* RESPONSIVE */

@media(max-width:430px){

body{

padding:0;

background:white;

}

.iphone{

width:100%;

border-radius:0;

box-shadow:none;

}

.bottom{

width:95%;

left:50%;

transform:translateX(-50%);

}

/*======================================
COMUNIDAD
======================================*/

.crear-post{

    background:#FFFFFF;

    margin:0 20px 25px;

    border-radius:24px;

    padding:20px;

    box-shadow:var(--sombra);

}

.crear-top{

    display:flex;

    gap:15px;

    align-items:flex-start;

}

.post-avatar{

    width:52px;

    height:52px;

    border-radius:50%;

    object-fit:cover;

    flex-shrink:0;

}

.crear-input{

    flex:1;

}

.crear-input textarea{

    width:100%;

    border:none;

    resize:none;

    outline:none;

    font-family:inherit;

    font-size:15px;

    line-height:1.6;

    min-height:90px;

    color:var(--texto);

    background:transparent;

}

.crear-input textarea::placeholder{

    color:#94A3B8;

}

.crear-bottom{

    margin-top:20px;

    padding-top:18px;

    border-top:1px solid #EFEFEF;

    display:flex;

    justify-content:center;

    align-items:center;

}

.foto{

    border:none;

    background:#EEF8F1;

    color:var(--verde);

    padding:12px 18px;

    border-radius:14px;

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

.foto:hover{

    background:#DDF5E5;

}

.publicar{

    border:none;

    background:linear-gradient(180deg,#22C55E,#16A34A);

    color:white;

    padding:13px 26px;

    border-radius:16px;

    font-size:15px;

    font-weight:700;

    display:flex;

    align-items:center;

    gap:8px;

    cursor:pointer;

    transition:.25s;

    box-shadow:0 8px 20px rgba(22,163,74,.25);

}

.publicar:hover{

    transform:translateY(-2px);

}

.feed{

    padding:0 20px 120px;

}




/*======================================
POSTS
======================================*/

.post{

    background:#fff;

    border-radius:24px;

    box-shadow:var(--sombra);

    margin-bottom:22px;

    overflow:hidden;

}

.post-header{

    display:flex;

    align-items:center;

    padding:18px;

    gap:15px;

}

.post-header img{

    width:52px;

    height:52px;

    border-radius:50%;

    object-fit:cover;

}

.post-info{

    flex:1;

}

.post-info h3{

    font-size:17px;

    color:var(--texto);

}

.post-info span{

    font-size:13px;

    color:var(--texto2);

}

.post-menu{

    border:none;

    background:none;

    font-size:18px;

    color:#999;

    cursor:pointer;

}

.post-texto{

    padding:0 18px 18px;

    font-size:15px;

    line-height:1.7;

    color:var(--texto);

}

.post-imagen{

    width:100%;

    display:block;

}

.post-stats{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:15px 18px;

    color:#777;

    font-size:14px;

    border-bottom:1px solid #F2F2F2;

}

.likes{

    color:#EF4444;

    font-weight:600;

}

.comments{

    color:#666;

}

.post-buttons{

    display:flex;

}

.post-buttons button{

    flex:1;

    border:none;

    background:white;

    padding:16px;

    cursor:pointer;

    font-size:15px;

    color:#555;

    transition:.25s;

}

.post-buttons button:hover{

    background:#F7F7F7;

}

.post-buttons i{

    margin-right:8px;

}

.like-btn{

display:flex;
align-items:center;
justify-content:center;
gap:8px;

flex:1;

background:none;
border:none;

padding:14px 0;

font-size:15px;
font-weight:600;

cursor:pointer;

color:#666;

text-decoration:none;

transition:.2s;

}

.like-btn.activo{

color:#e63946;

font-weight:bold;

}

.comment-btn i{

    color:#16A34A;

}

/*======================================
CABECERA COMUNIDAD
======================================*/

.cabecera-comunidad{

    padding:10px 25px 25px;

}

.subtitulo{

    display:inline-flex;

    align-items:center;

    gap:8px;

    background:#EEF8F1;

    color:var(--verde);

    padding:8px 16px;

    border-radius:30px;

    font-size:14px;

    font-weight:600;

    margin-bottom:15px;

}

.cabecera-comunidad h1{

    font-size:38px;

    line-height:1.2;

    color:var(--texto);

    margin-bottom:12px;

}

.cabecera-comunidad p{

    color:var(--texto2);

    font-size:16px;

    line-height:1.6;

}

/*======================================
BOTON PRINCIPAL
======================================*/

.btn-principal{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    background:var(--verde);

    color:white;

    text-decoration:none;

    padding:18px;

    border-radius:22px;

    font-size:17px;

    font-weight:700;

    box-shadow:var(--sombra);

    transition:.25s;

}

.btn-principal:hover{

    background:#15803D;

}

/*======================================
FORMULARIOS
======================================*/

.form-card{

    background:white;

    border-radius:22px;

    padding:25px;

    box-shadow:var(--sombra);

}

.form-card label{

    display:block;

    margin-bottom:8px;

    margin-top:18px;

    color:var(--texto);

    font-weight:600;

}

.form-card label:first-child{

    margin-top:0;

}

.form-card input{

    width:100%;

    padding:14px;

    border:1px solid #E5E7EB;

    border-radius:14px;

    font-size:15px;

    outline:none;

}

.form-card input:focus{

    border-color:var(--verde);

}

.radio-group{

    display:flex;

    gap:30px;

    margin:15px 0 25px;

}

.radio-group label{

    display:flex;

    align-items:center;

    gap:8px;

    margin:0;

    font-weight:500;

}

.btn-secundario{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    text-decoration:none;

    padding:18px;

    border-radius:20px;

    background:#F3F4F6;

    color:#374151;

    font-weight:bold;

    box-shadow:var(--sombra);

}

.btn-secundario:hover{

    background:#E5E7EB;

}

/*======================================
TORRES
======================================*/

.torre-card{

    display:flex;

    align-items:center;

    gap:18px;

    background:white;

    border-radius:22px;

    padding:20px;

    margin-bottom:18px;

    box-shadow:var(--sombra);

    text-decoration:none;

    color:inherit;

    transition:.25s;

}

.torre-card:hover{

    transform:translateY(-3px);

}

.torre-icono{

    width:60px;

    height:60px;

    border-radius:18px;

    background:#EEF7F1;

    display:flex;

    justify-content:center;

    align-items:center;

    color:var(--verde);

    font-size:28px;

}

.torre-info{

    flex:1;

}

.torre-info h3{

    font-size:20px;

    color:var(--texto);

    margin-bottom:6px;

}

.torre-info p{

    color:var(--texto2);

    font-size:15px;

    margin-bottom:5px;

}

.torre-info small{

    color:var(--verde);

    font-size:14px;

    font-weight:bold;

}

.flecha{

    color:#999;

    font-size:18px;

}

/*======================================
RESUMEN TORRE
======================================*/

.card-resumen{

    background:white;

    border-radius:22px;

    padding:22px;

    display:flex;

    justify-content:space-around;

    align-items:center;

    box-shadow:var(--sombra);

    margin-bottom:20px;

}

.card-resumen div{

    text-align:center;

}

.card-resumen strong{

    display:block;

    font-size:34px;

    color:var(--verde);

    margin-bottom:8px;

}

.card-resumen span{

    color:var(--texto2);

    font-size:14px;

}

/*=====================================
APARTAMENTOS
=====================================*/

.apartamentos-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

}

.apartamento-card{

    background:#fff;

    border-radius:22px;

    padding:22px;

    text-decoration:none;

    text-align:center;

    box-shadow:var(--sombra);

    transition:.25s;

}

.apartamento-card:hover{

    transform:translateY(-4px);

}

.apartamento-card h2{

    font-size:34px;

    color:var(--texto);

    margin-bottom:12px;

}

.ocupado{

    color:#d9534f;

    font-weight:600;

}

.libre{

    display:inline-block;

    color:#18a957;

    font-weight:600;

}

/*=========================
APARTAMENTO
=========================*/

.apartamento-info{

    background:#fff;

    border-radius:22px;

    padding:30px;

    text-align:center;

    box-shadow:var(--sombra);

}

.apartamento-info i{

    font-size:45px;

    color:var(--verde);

    margin-bottom:15px;

}

.apartamento-info h2{

    margin:10px 0;

}

.estado-ocupado{

    display:inline-block;

    margin-top:15px;

    padding:10px 18px;

    background:#e8f8ef;

    color:#18a957;

    border-radius:30px;

    font-weight:600;

}

.estado-libre{

    display:inline-block;

    margin-top:15px;

    padding:10px 18px;

    background:#fff3cd;

    color:#c68a00;

    border-radius:30px;

    font-weight:600;

}

.sin-residentes{

    background:#fff;

    border-radius:22px;

    padding:35px;

    text-align:center;

    box-shadow:var(--sombra);

}

.sin-residentes i{

    font-size:48px;

    color:#ff9800;

    margin-bottom:15px;

}

.sin-residentes h2{

    margin-bottom:10px;

}

.sin-residentes p{

    color:#777;

    margin-bottom:25px;

}

.residente-card{

    background:#fff;

    border-radius:22px;

    padding:20px;

    box-shadow:var(--sombra);

    margin-bottom:18px;

}

.residente-header{

    display:flex;

    align-items:center;

    gap:15px;

}

.avatar-residente{

    width:55px;

    height:55px;

    border-radius:50%;

    background:#eaf8ef;

    display:flex;

    justify-content:center;

    align-items:center;

    color:var(--verde);

    font-size:22px;

}

.badge-principal{

    margin-top:15px;

    color:#ff9800;

    font-weight:600;

}

.badge-app{

    margin-top:8px;

    color:var(--verde);

    font-weight:600;

}

.acciones-residente{

    margin-top:18px;

    display:flex;

    justify-content:flex-end;

    gap:18px;

}

.acciones-residente a{

    color:#444;

    font-size:18px;

}

/*======================================
APARTAMENTO PREMIUM
======================================*/

.card-apartamento{

    background:#fff;

    border-radius:26px;

    padding:30px;

    text-align:center;

    box-shadow:var(--sombra);

}

.icono-apartamento{

    width:90px;

    height:90px;

    border-radius:50%;

    background:#eef9f2;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 20px;

}

.icono-apartamento i{

    font-size:42px;

    color:var(--verde);

}

.card-apartamento h2{
    font-size:26px;
    margin-bottom:12px;
}


.badge-disponible{

    display:inline-block;

    background:#e8f8ef;

    color:#18a957;

    padding:10px 22px;

    border-radius:40px;

    font-weight:600;

    margin-bottom:25px;

}

.badge-ocupado{

    display:inline-block;

    background:#fdeaea;

    color:#d9534f;

    padding:10px 22px;

    border-radius:40px;

    font-weight:600;

    margin-bottom:25px;

}

}

.resumen-apartamento{

    display:flex;

    justify-content:space-around;

    margin-top:15px;

    padding-top:20px;

    border-top:1px solid #eee;

}

.resumen-apartamento strong{

    display:block;

    font-size:28px;

    color:var(--verde);

}

.resumen-apartamento span{

    color:#777;

    font-size:14px;

}

/*======================================
FORMULARIOS
======================================*/

.form-card{

    background:#fff;

    border-radius:24px;

    padding:28px;

    box-shadow:var(--sombra);

}

.form-card label{

    display:block;

    font-size:15px;

    font-weight:600;

    color:var(--texto);

    margin-bottom:8px;

    margin-top:18px;

}

.form-card input,

.form-card select{

    width:100%;

    height:52px;

    border:1px solid #e5e7eb;

    border-radius:14px;

    padding:0 16px;

    font-size:15px;

    outline:none;

    transition:.2s;

    background:#fff;

    box-sizing:border-box;

}

.form-card input:focus,

.form-card select:focus{

    border-color:var(--verde);

    box-shadow:0 0 0 3px rgba(24,169,87,.12);

}

.check-opcion{

    margin-top:22px;

}

.check-opcion label{

    display:flex;

    align-items:center;

    gap:12px;

    cursor:pointer;

    margin:0;

    font-weight:500;

}

.check-opcion input{

    width:18px;

    height:18px;

}

.form-card .btn-principal{

    width:100%;

    margin-top:28px;

}

.datos-residente{

    margin-top:10px;

    color:#666;

    font-size:14px;

    line-height:1.6;

}

.datos-residente strong{

    color:#222;

    font-size:13px;

}

.btn-eliminar{

    display:block;

    width:260px;

    margin:25px auto 0;

}

/*======================================
MENSAJES
======================================*/

.mensaje-error{

    background:#fdeaea;

    color:#c0392b;

    padding:16px;

    border-radius:16px;

    margin-top:20px;

    margin-bottom:20px;

    text-align:center;

    font-weight:600;

}

.imagen-comunicado{

    flex-shrink:0;

}

.imagen-comunicado img{

    width:55px;

    height:55px;

    object-fit:cover;

    border-radius:10px;

    display:block;

}

.prioridad{

    display:inline-block;

    padding:3px 10px;

    border-radius:20px;

    color:#fff;

    font-size:10px;

    font-weight:bold;

    margin-bottom:6px;

}

.item{

    display:flex;

    align-items:center;

    gap:12px;

}

.texto{

    flex:1;

}

.card-comunicado{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    margin-bottom:25px;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

}

.foto-comunicado{

    width:100%;

    height:220px;

    object-fit:contain;

    background:#f5f5f5;

    display:block;

}

.contenido-comunicado h2{

    font-size:19px;

}

.contenido-comunicado h2{

    margin:15px 0 10px;

    font-size:22px;

    color:#222;

}

.fecha-comunicado{

    color:#888;

    font-size:13px;

    margin-bottom:15px;

}

.contenido-comunicado p{

    color:#555;

    line-height:1.7;

}


/*====================================
PUBLICACIÓN
====================================*/

.post{

background:#fff;
border-radius:22px;
padding:18px;
margin-top:18px;
box-shadow:0 8px 25px rgba(0,0,0,.05);

}

.post-stats{

display:flex;
justify-content:space-between;
align-items:center;

padding:14px 5px;

font-size:14px;

color:#65676b;

border-top:1px solid #ececec;

border-bottom:1px solid #ececec;

margin-top:15px;

}

.post-stats i{

margin-right:6px;

}

.likes i{

color:#ef4444;

}

.comments i{

color:#777;

}

.post-buttons{

display:flex;

}

.post-buttons button{

flex:1;

height:48px;

background:white;

border:none;

font-size:15px;

font-weight:600;

color:#666;

cursor:pointer;

transition:.20s;

display:flex;

justify-content:center;

align-items:center;

gap:8px;

}

.post-buttons button:hover{

background:#f6f6f6;

}

.like-btn.activo{

color:#16a34a;

}

.like-btn.activo i{

color:#16a34a;

}

.comment-btn{

color:#666;

}

/*=========================================
PANEL DE COMENTARIOS
=========================================*/

.comentarios-panel{

    margin-top:15px;

    border-top:1px solid #ececec;

    padding-top:15px;

}

.lista-comentarios{

    margin-bottom:15px;

}

.comentario{

    background:#f7f8fa;

    border-radius:16px;

    padding:12px 15px;

    margin-bottom:10px;

}

.comentario strong{

    display:block;

    font-size:14px;

    color:#222;

    margin-bottom:6px;

}

.comentario small{

    color:#888;

    font-size:12px;

}

.nuevo-comentario{

margin-top:15px;

}

.input-comentario{

position:relative;

}

.input-comentario textarea{

width:100%;

min-height:52px;

padding:15px 55px 15px 18px;

border:none;

background:#f4f5f7;

border-radius:28px;

resize:none;

outline:none;

font-size:15px;

font-family:inherit;

box-sizing:border-box;

}

.enviar-comentario{

position:absolute;

right:8px;

bottom:8px;

width:38px;

height:38px;

border:none;

border-radius:50%;

background:#18a957;

color:white;

cursor:pointer;

display:flex;

justify-content:center;

align-items:center;

transition:.2s;

}

.enviar-comentario:hover{

transform:scale(1.08);

background:#15904a;

}

/*====================================
MODAL ELIMINAR
====================================*/

.modal-eliminar{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(0,0,0,.45);

display:flex;

justify-content:center;

align-items:center;

z-index:9999;

animation:fade .20s;

}

.modal-contenido{

background:#fff;

width:90%;

max-width:340px;

border-radius:22px;

padding:28px;

text-align:center;

box-shadow:0 20px 40px rgba(0,0,0,.18);

}

.modal-contenido i{

font-size:42px;

color:#ef4444;

margin-bottom:18px;

}

.modal-contenido h3{

margin:0;

font-size:22px;

}

.modal-contenido p{

margin:15px 0 25px;

color:#666;

line-height:1.5;

}

.modal-botones{

display:flex;

gap:12px;

}

.modal-botones button{

flex:1;

height:46px;

border:none;

border-radius:14px;

font-size:15px;

font-weight:600;

cursor:pointer;

}

.cancelar{

background:#ececec;

}

.eliminar{

background:#ef4444;

color:white;

}

@keyframes fade{

from{

opacity:0;

}

to{

opacity:1;

}

/*=====================================
ELIMINAR COMENTARIO
======================================*/

.comentario-top{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:8px;

}

.btn-eliminar-comentario{

background:none;

border:none;

cursor:pointer;

color:#999;

font-size:14px;

transition:.2s;

}

.btn-eliminar-comentario:hover{

color:#d62828;

}

.menu-publicacion{

    position:relative;

    display:flex;

    justify-content:flex-end;

}

.btn-menu-publicacion{

    background:none;

    border:none;

    font-size:22px;

    cursor:pointer;

    color:#666;

    padding:8px;

}

.menu-publicacion-opciones{

    position:absolute;

    top:35px;

    right:0;

    background:#fff;

    border-radius:12px;

    min-width:180px;

    box-shadow:0 10px 30px rgba(0,0,0,.15);

    overflow:hidden;

    z-index:999;

}

.menu-publicacion-opciones button{

    width:100%;

    border:none;

    background:#fff;

    padding:12px 15px;

    text-align:left;

    cursor:pointer;

    font-size:14px;

}

.menu-publicacion-opciones button:hover{

    background:#f5f5f5;

}

.menu-publicacion-opciones i{

    margin-right:8px;

    color:#e53935;

}

.comentario-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:6px;

}

.btn-eliminar-comentario{

    background:none;

    border:none;

    cursor:pointer;

    color:#999;

    font-size:14px;

    padding:4px;

    transition:.2s;

}

.btn-eliminar-comentario:hover{

    color:#e53935;

}

.preview-card{

    margin-top:20px;
    background:#f8f9fc;
    border:1px solid #e5e7eb;
    border-radius:14px;
    padding:18px;

}

.preview-card h3{

    margin-bottom:15px;
    font-size:17px;
    color:#1d3557;

}

.preview-piso{

    margin-bottom:18px;

}

.preview-piso strong{

    display:block;
    margin-bottom:8px;
    color:#18a957;

}

.preview-numeros{

    display:flex;
    flex-wrap:wrap;
    gap:8px;

}

.preview-numero{

    background:white;
    border:1px solid #ddd;
    border-radius:8px;
    padding:8px 12px;
    font-size:14px;
    min-width:52px;
    text-align:center;
}