/* ==========================================================
   DASHBOARD DRAWER
   Compatible con widgets/assets/css/widget.css
========================================================== */

/*
|--------------------------------------------------------------------------
| Overlay
|--------------------------------------------------------------------------
*/
.dt-drawer {
    position: fixed;
    inset: 0;
    z-index: 1000;
    pointer-events: none;
}

.dt-drawer.open {
    pointer-events: auto;
}

.dt-drawer-overlay {
    position: absolute;
    inset: 0;
    background:
        rgba(15, 23, 42, .45);
    opacity: 0;
    transition:
        opacity .25s ease;
}

.dt-drawer.open .dt-drawer-overlay {
    opacity: 1;
}

/*
|--------------------------------------------------------------------------
| Panel
|--------------------------------------------------------------------------
*/
.dt-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: min(520px, 100%);
    height: 100%;
    background: #ffffff;
    box-shadow:
        -10px 0 35px rgba(0,0,0,.15);
    transform:
        translateX(100%);
    transition:
        transform .28s ease;
    display: flex;
    flex-direction: column;
}

.dt-drawer.open .dt-drawer-panel {
    transform:
        translateX(0);
}

/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/
.dt-drawer-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding:
        1rem 1.2rem;
    border-bottom:
        1px solid #e5e7eb;
}

.dt-drawer-header h2 {
    margin:0;
    font-size:
        1.1rem;
    font-weight:700;
    color:#111827;
}

.dt-drawer-location {
    margin-top:.25rem;
    color:#6b7280;
    font-size:.8rem;
}

.dt-drawer-close {
    width:36px;
    height:36px;
    border:0;
    background:#f3f4f6;
    border-radius:50%;
    cursor:pointer;
    font-size:1.2rem;
}

/*
|--------------------------------------------------------------------------
| Content
|--------------------------------------------------------------------------
*/
.dt-drawer-content {
    overflow-y:auto;
    flex:1;
    padding:1rem;
}

/*
|--------------------------------------------------------------------------
| Compatibilidad widget.css
|--------------------------------------------------------------------------
*/
.dt-drawer-content .dt-widget {
    margin:0;
    box-shadow:none;
    border:0;
}

.dt-drawer-content .dt-widget-body {
    padding:0;
}

/*
|--------------------------------------------------------------------------
| Detalle playa
|--------------------------------------------------------------------------
*/
.dt-drawer-beach {
    display:flex;
    flex-direction:column;
    gap:1rem;
}

.dt-drawer-beach .dt-widget-section {
    background:#f9fafb;
    border-radius:12px;
    padding:1rem;
}

/*
|--------------------------------------------------------------------------
| Grids heredados
|--------------------------------------------------------------------------
*/
.dt-drawer-grid {
    display:grid;
    grid-template-columns:
        repeat(2,1fr);
    gap:.75rem;
}

.dt-drawer-grid > div {
    background:#f9fafb;
    border-radius:10px;
    padding:.75rem;
}

.dt-drawer-grid span {
    display:block;
    font-size:.72rem;
    color:#6b7280;
}

.dt-drawer-grid strong {
    display:block;
    margin-top:.2rem;
    font-size:.95rem;
    color:#111827;
}

/*
|--------------------------------------------------------------------------
| Servicios
|--------------------------------------------------------------------------
*/
.dt-drawer-services {
    display:flex;
    flex-wrap:wrap;
    gap:.5rem;
}

.dt-drawer-services span {
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:32px;
    height:32px;
    padding:0 .5rem;
    background:#f3f4f6;
    border-radius:999px;
    font-size:.85rem;
}

/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/
@media(max-width:600px){

    .dt-drawer-panel {
        width:100%;
    }

    .dt-drawer-content {
        padding:.75rem;
    }

    .dt-drawer-grid {
        grid-template-columns:1fr;
    }
}
/* ==========================================================
   Compatibilidad widget.css dentro del drawer
========================================================== */

/*
|--------------------------------------------------------------------------
| Highlight estado
|--------------------------------------------------------------------------
*/
.dt-drawer-content .dt-highlight {
    margin-bottom:1rem;
    border-radius:14px;
    padding:1rem;
}

.dt-drawer-content .dt-beach-status {
    display:flex;
    align-items:center;
    gap:1rem;
}

.dt-drawer-content .dt-beach-status-icon {
    font-size:2rem;
}

.dt-drawer-content .dt-beach-status-caption {
    display:block;
    font-size:.75rem;
    color:#6b7280;
}

.dt-drawer-content .dt-beach-status-title {
    display:block;
    font-size:1.1rem;
}

.dt-drawer-content .dt-beach-status-text {
    display:block;
    margin-top:.25rem;
    color:#6b7280;
}

/*
|--------------------------------------------------------------------------
| Métricas rápidas
|--------------------------------------------------------------------------
*/
.dt-drawer-content .dt-beach-metrics {
    display:grid;
    grid-template-columns:
        repeat(3,1fr);
    gap:.75rem;
    margin-top:1rem;
}

.dt-drawer-content .dt-beach-metric {
    background:#f9fafb;
    border-radius:10px;
    padding:.75rem;
}

.dt-drawer-content .dt-beach-metric span {
    display:block;
    font-size:.75rem;
    color:#6b7280;
}

.dt-drawer-content .dt-beach-metric strong {
    display:block;
    margin-top:.25rem;
}

/*
|--------------------------------------------------------------------------
| Ubicación
|--------------------------------------------------------------------------
*/
.dt-drawer-content .dt-location {
    background:#fff;
    border-radius:12px;
    padding:1rem;
    border:1px solid #e5e7eb;
}

.dt-drawer-content .dt-location h2 {
    margin:0 0 .5rem;
    font-size:1rem;
}

/*
|--------------------------------------------------------------------------
| Detalles
|--------------------------------------------------------------------------
*/
.dt-drawer-content .dt-details {
    margin-top:1rem;
}

.dt-drawer-content .dt-details-header h2 {
    font-size:1.1rem;
}

.dt-drawer-content .dt-details-section {
    margin-top:1.2rem;
}

.dt-drawer-content .dt-details-section h3 {
    margin-bottom:.75rem;
    font-size:.95rem;
}

.dt-drawer-content .dt-details-grid {
    display:grid;
    grid-template-columns:
        repeat(2,1fr);
    gap:.6rem;
}

.dt-drawer-content .dt-detail-card {
    background:#f9fafb;
    border-radius:10px;
    padding:.65rem;
}

.dt-drawer-content .dt-detail-card span {
    display:block;
    font-size:.75rem;
    color:#6b7280;
}

.dt-drawer-content .dt-detail-card strong {
    display:block;
    margin-top:.2rem;
}

/*
|--------------------------------------------------------------------------
| Servicios
|--------------------------------------------------------------------------
*/
.dt-drawer-content .dt-service-list {
    display:flex;
    flex-wrap:wrap;
    gap:.5rem;
}

.dt-drawer-content .dt-service {
    display:flex;
    align-items:center;
    gap:.4rem;
    background:#f3f4f6;
    padding:.45rem .65rem;
    border-radius:999px;
    font-size:.85rem;
}

/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/
@media(max-width:600px){
    .dt-drawer-content .dt-beach-metrics {
        grid-template-columns:
            repeat(2,1fr);
    }

    .dt-drawer-content .dt-details-grid {
        grid-template-columns:1fr;
    }
}