/* =====================================
   GLOBAL MODAL OVERLAY
===================================== */

.modal-overlay{

position:fixed;
inset:0;

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

padding:20px;

background:rgba(
15,
23,
42,
.65
);

overflow-y:auto;

-webkit-overflow-scrolling:touch;

backdrop-filter:blur(6px);

z-index:99999;

opacity:0;
visibility:hidden;

transition:.2s ease;

}

.modal-overlay.show{

opacity:1;
visibility:visible;

}

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

.global-modal{

width:100%;
max-width:520px;

background:#0f172a;

border:1px solid rgba(
255,
255,
255,
.08
);

border-radius:18px;

box-shadow:
0 25px 60px rgba(
0,
0,
0,
.45
);

overflow:hidden;

transform:translateY(12px);

transition:.2s ease;

/* NUEVO */

max-height:90vh;

display:flex;
flex-direction:column;

}

.modal-overlay.show
.global-modal{

transform:translateY(0);

}

/* =====================================
   COLORS
===================================== */

.global-modal.success{
border-top:4px solid #22c55e;
}

.global-modal.warning{
border-top:4px solid #f59e0b;
}

.global-modal.error{
border-top:4px solid #ef4444;
}

.global-modal.purple{
border-top:4px solid #8b5cf6;
}

/* =====================================
   BODY
===================================== */

.modal-body{

padding:22px;

overflow-y:auto;

}

.modal-title{

font-size:22px;
font-weight:800;

color:#fff;

margin-bottom:10px;

}

.modal-message{

font-size:14px;
line-height:1.6;

color:#cbd5e1;

}

/* =====================================
   ACTIONS
===================================== */

.modal-actions{

display:flex;
justify-content:flex-end;
align-items:flex-start;

gap:12px;

padding:16px 22px;

border-top:1px solid rgba(
255,
255,
255,
.06
);

}

/* =====================================
   ICON BUTTON
===================================== */

.modal-action-item{

display:flex;
flex-direction:column;
align-items:center;

gap:6px;

min-width:62px;

}

.modal-action-btn{

width:42px;
height:42px;

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

border-radius:12px;

border:1px solid rgba(
255,
255,
255,
.18
);

background:rgba(
255,
255,
255,
.04
);

cursor:pointer;

transition:.18s ease;

padding:0;

}

.modal-action-btn:hover{

transform:translateY(-1px);

background:rgba(
255,
255,
255,
.08
);

border-color:rgba(
255,
255,
255,
.35
);

}

.modal-action-btn svg{

width:20px;
height:20px;

stroke:#fff;
stroke-width:2;

fill:none;

}

.modal-action-label{

font-size:10px;

line-height:1.2;

text-align:center;

color:rgba(
255,
255,
255,
.65
);

font-weight:500;

max-width:70px;

}

/* =====================================
   MOBILE
===================================== */

@media(max-width:768px){

.modal-actions{

justify-content:center;

}

.modal-action-btn{

width:48px;
height:48px;

}

.modal-action-btn svg{

width:22px;
height:22px;

}

.modal-action-label{

font-size:9px;

}

}

.room-photo-content{

padding:24px;

display:flex;
flex-direction:column;

}

.room-photo-title{

margin:28px 0 14px 0;

font-size:18px;
font-weight:800;

color:#111827;

padding-top:20px;

border-top:1px solid rgba(255,255,255,.08);

}

.room-photo-grid{

display:grid;

grid-template-columns:
repeat(auto-fill,minmax(220px,1fr));

gap:18px;

max-height:420px;

overflow-y:auto;

padding-right:6px;

}

.room-photo-content label{

display:block;

margin-bottom:8px;

font-weight:700;

}

.room-photo-content textarea{

width:100%;

min-height:120px;

padding:14px;

border:1px solid #d1d5db;

border-radius:12px;

resize:vertical;

}

/* =====================================
   MODAL SIZES
===================================== */

.global-modal-sm{
max-width:520px;
}

.global-modal-md{
max-width:720px;
}

.global-modal-lg{
max-width:960px;
}

.global-modal-xl{
max-width:1280px;
}

/* =====================================
   DARK FORM
===================================== */

.modal-dark-form{

display:flex;
flex-direction:column;
gap:18px;

}

.modal-dark-form label{

font-size:13px;
font-weight:700;
color:#fff;

margin-bottom:6px;

display:block;

}

.modal-dark-input,
.modal-dark-textarea{

width:100%;

background:rgba(
255,
255,
255,
.05
);

border:1px solid rgba(
255,
255,
255,
.12
);

border-radius:12px;

color:#fff;

padding:14px;

}

.modal-dark-input::placeholder,
.modal-dark-textarea::placeholder{

color:#94a3b8;

}

.modal-dark-textarea{

min-height:120px;
resize:vertical;

}

.modal-dark-input:focus,
.modal-dark-textarea:focus{

outline:none;

border-color:#8b5cf6;

box-shadow:
0 0 0 3px rgba(
139,
92,
246,
.15
);

}

/* =====================================
   UPLOAD BUTTON
===================================== */

.modal-upload-btn{

width:100%;

height:48px;

border:none;

border-radius:12px;

background:rgba(
255,
255,
255,
.06
);

border:1px solid rgba(
255,
255,
255,
.12
);

color:#fff;

font-weight:700;

cursor:pointer;

transition:.18s;

}

.modal-upload-btn:hover{

background:rgba(
255,
255,
255,
.1
);

}

/* =====================================
   ROOM PHOTO MODAL
===================================== */

.room-photo-window{

width:100%;

max-width:560px;

background:#081224;

border-radius:18px;

border-top:4px solid #f59e0b;

overflow:hidden;

box-shadow:
0 25px 60px rgba(
0,
0,
0,
.45
);

}

.room-photo-content{

padding:22px;

display:flex;
flex-direction:column;

gap:18px;

}

/* =====================================
   UPLOAD CARD
===================================== */

.room-upload-card{

background:rgba(
255,
255,
255,
.03
);

border:1px solid rgba(
255,
255,
255,
.08
);

border-radius:18px;

padding:20px;

display:flex;
flex-direction:column;

gap:16px;

}

.room-upload-actions{

display:flex;
justify-content:flex-end;

margin-top:8px;

}

.room-upload-btn{

width:auto;

padding:0 24px;

height:42px;

border-radius:12px;

background:rgba(
255,
255,
255,
.06
);

border:1px solid rgba(
255,
255,
255,
.15
);

color:#fff;

font-weight:700;

cursor:pointer;

}

.room-upload-btn:hover{

background:rgba(
255,
255,
255,
.12
);

}

.global-modal-header{

display:flex;

align-items:center;

justify-content:space-between;

padding:18px 22px;

border-bottom:1px solid rgba(
255,
255,
255,
.08
);

}

.global-modal-title{

font-size:18px;

font-weight:800;

color:#fff;

}

.global-modal-close{

background:none;

border:none;

color:#fff;

font-size:22px;

cursor:pointer;

}

.modal-icon-btn{

width:42px;
height:42px;

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

border-radius:12px;

background:rgba(
255,
255,
255,
.05
);

border:1px solid rgba(
255,
255,
255,
.12
);

color:#fff;

cursor:pointer;

transition:.15s;

}

.modal-icon-btn:hover{

background:rgba(
255,
255,
255,
.10
);

}

.room-upload-actions{

display:flex;

justify-content:flex-end;

gap:10px;

margin-top:14px;

}

/* =====================================
   NUEVO PARA ITEMS
===================================== */

.modal-html{

padding:0;

}

.modal-html .form-input,
.modal-html .form-textarea{

width:100%;

}

.modal-html label{

display:block;

margin-bottom:6px;

font-weight:700;

color:#fff;

}

.modal-html textarea,
.modal-html input{

background:rgba(
255,
255,
255,
.05
);

border:1px solid rgba(
255,
255,
255,
.12
);

color:#fff;

border-radius:12px;

}

.modal-html textarea{

min-height:120px;

}

/* =====================================
   ITEM MODAL MOBILE
===================================== */

@media(max-width:768px){

.modal-html .editor-grid{

display:flex !important;
flex-direction:column !important;

}

.modal-html .editor-actions{

display:flex !important;
flex-direction:column !important;

gap:12px;

}

.modal-html .editor-actions button{

width:100% !important;

}

.modal-html input{

min-height:48px;

}

.modal-html textarea{

min-height:90px;

}

}