/* ==========================================================================
   APP.CSS - ESTILOS GLOBALES Y COMPONENTES UNIFICADOS
   ========================================================================== */
@import url('site.css');
@import url('client.css');
@import url('admin.css');

/* Utilidades Base */
[x-cloak] { display: none !important; }
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-margin { margin: 0; padding: 0; overflow-x: hidden; }

/* Tipografía y Colores Globales del Sistema */
.font-serif { font-family: 'Playfair Display', serif; }
.bg-amber { background-color: #FFBF00; }
.text-amber { color: #D49A00; }
.bg-gray-100 { background-color: #f8f9fa; }
.text-dim { color: #999; }

/* Transiciones Globales */
.transition-all { transition: all 0.3s ease-in-out; }
.clickable { cursor: pointer; }

/* Componentes Compartidos (Admin y Cliente) */
.luxury-card {
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}
.luxury-card:hover {
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
    transform: translateY(-5px);
}
.indicator-dot {
    width: 8px; height: 8px; border-radius: 50%; display: inline-block;
}
.preview-container {
    background-color: #f8f9fa; border-radius: 20px;
    display: flex; align-items: center; justify-content: center; position: relative;
}

/* ==========================================================================
   SISTEMA UNIFICADO DE MOCKUPS (SMARTPHONES)
   ========================================================================== */

/* 1. MOCKUP LUXURY (Para Vistas de Previsualización en Cliente y Admin) */


.phone-mockup-luxury {
    width: 375px; 
    height: 812px; /* Proporción exacta iPhone */
    max-height: 85vh; 
    max-width: 100%;
    background: #111; 
    border-radius: 40px; 
    padding: 14px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.15);
    display: flex; flex-direction: column; position: relative;
    margin: 0 auto;
}

/* 2. MOCKUP MINI (Para el Editor en create-template) */
.iphone-frame-sm {
    width: 260px; height: 530px; 
    background: #1a1a1a; border-radius: 40px; padding: 10px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
    display: flex; flex-direction: column; position: relative;
}

/* Componentes Internos del Mockup (Compartidos por ambos) */
.phone-notch {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 120px; height: 25px; background: #111;
    border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; z-index: 10;
}
.iphone-frame-sm .phone-notch {
    width: 100px; height: 20px; background: #1a1a1a;
}

.template-iframe-inner, 
.preview-window {
    width: 100%; height: 100%; border: none; background: #fff;
    border-radius: 28px; overflow-y: auto; display: block;
    position: relative;
    transform: translateZ(0); 
    overflow-x: hidden;
}