/* =========================================
   VARIABLES Y BASE
   ========================================= */
:root {
    --bg-body: #f1f5f9;       
    --bg-card: #ffffff;       
    --border: #e2e8f0;        
    --border-focus: #94a3b8;  
    --text-main: #0f172a;     
    --text-muted: #64748b;    
    --accent: #0f172a;        
    --accent-hover: #1e293b;
    --danger: #ef4444;
    --danger-hover: #dc2626;
    --radius-box: 12px;        
    --radius-btn: 6px;
}

body { 
    font-family: 'Inter', system-ui, -apple-system, sans-serif; 
    background: var(--bg-body); 
    color: var(--text-main); 
    margin: 0; 
    padding-bottom: 60px; 
    letter-spacing: -0.01em; 
    -webkit-font-smoothing: antialiased;
}

hr { border: none; border-top: 1px solid var(--border); margin: 32px 0; }

/* =========================================
   HEADER Y CONTENEDORES
   ========================================= */
header { 
    background: var(--bg-card); 
    border-bottom: 1px solid var(--border); 
    padding: 16px 32px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    position: sticky; 
    top: 0; 
    z-index: 100; 
    box-shadow: 0 1px 2px rgba(0,0,0,0.02); 
}

header h2 { font-weight: 600; font-size: 1.15em; color: var(--text-main); margin: 0; }

header a.back-link { 
    color: var(--text-muted); 
    text-decoration: none; 
    font-size: 0.95em; 
    font-weight: 500; 
    transition: color 0.2s; 
    display: inline-flex; 
    align-items: center; 
    gap: 6px; 
}
header a.back-link:hover { color: var(--text-main); }

.brand { font-size: 1.8em; font-weight: 700; color: var(--text-main); letter-spacing: -0.04em; }
.user-controls { display: flex; align-items: center; gap: 20px; }
#userEmail { font-size: 0.9em; color: var(--text-muted); font-weight: 500; }

#publicLink { 
    color: var(--text-main); 
    font-weight: 600; 
    background: var(--bg-body); 
    padding: 8px 16px; 
    border-radius: var(--radius-btn); 
    text-decoration: none;
    font-size: 0.85em;
    border: 1px solid var(--border);
    transition: all 0.2s;
}
#publicLink:hover { background: #e2e8f0; border-color: #cbd5e1; }

/* Variantes de Contenedor según la pantalla */
.container { max-width: 1040px; margin: 40px auto; padding: 0 24px; }
.container.sm { max-width: 560px; }
.container.md { max-width: 760px; }

/* =========================================
   TIPOGRAFÍA Y TÍTULOS
   ========================================= */
h2.page-title { font-size: 1.6em; font-weight: 600; margin: 0 0 24px 0; letter-spacing: -0.02em; text-align: center; }
.section-title { font-size: 1.1em; font-weight: 600; margin: 0 0 24px 0; padding-bottom: 12px; border-bottom: 1px solid var(--border); color: var(--text-main); }
.header-actions { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 32px; }
.header-actions h2 { margin: 0; font-size: 1.8em; font-weight: 600; letter-spacing: -0.02em; }
.header-actions h3 { margin: 0 0 4px 0; font-size: 1.25em; font-weight: 600; letter-spacing: -0.02em; }
.header-actions p { margin: 0; color: var(--text-muted); font-size: 0.9em; }

/* =========================================
   TARJETAS (CARDS)
   ========================================= */
.card { 
    background: var(--bg-card); 
    padding: 32px; 
    border-radius: var(--radius-box); 
    border: 1px solid var(--border); 
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02), 0 2px 4px -1px rgba(0,0,0,0.02); 
    margin-bottom: 24px; 
}
.card.auth-card { padding: 40px 32px; width: 100%; max-width: 380px; box-sizing: border-box; margin: 0 auto; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.05), 0 4px 6px -2px rgba(0,0,0,0.025); }

/* =========================================
   FORMULARIOS E INPUTS
   ========================================= */
.form-group { margin-bottom: 24px; }
.form-group.margin-0 { margin-bottom: 0; }
label { display: block; font-weight: 600; margin-bottom: 8px; font-size: 0.85em; color: #334155; text-transform: uppercase; letter-spacing: 0.05em; }

input[type="text"], input[type="number"], input[type="email"], input[type="password"], select, textarea { 
    width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-btn); 
    box-sizing: border-box; font-family: inherit; font-size: 0.95em; color: var(--text-main); 
    transition: all 0.2s; background: #fff; outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.05); }

.hint { font-size: 0.85em; color: var(--text-muted); margin-top: 8px; display: block; background: #f8fafc; padding: 8px 12px; border-radius: 6px; border: 1px solid var(--border); }
#urlPreview { color: var(--accent); font-weight: 600; }
.error-msg { color: var(--danger); font-size: 0.9em; text-align: center; margin-bottom: 16px; min-height: 20px; font-weight: 500; }
#statusMsg { text-align: center; font-weight: 500; margin-top: 16px; font-size: 0.95em; min-height: 20px; }

/* Elementos Especiales Formulario */
.flex-row { display: flex; gap: 16px; align-items: flex-end; }
.flex-row > div { flex: 1; }
.design-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.layout-split { display: flex; gap: 40px; align-items: flex-start; flex-wrap: wrap; }

.upload-area, .upload-box { 
    background: #f8fafc; padding: 20px; border-radius: var(--radius-box); border: 2px dashed #cbd5e1; transition: border-color 0.2s; text-align: center; 
}
.upload-area:hover, .upload-box:hover { border-color: var(--border-focus); }
.upload-area input[type="file"], .upload-box input[type="file"] { width: 100%; margin-top: 8px; font-size: 0.9em; color: var(--text-muted); }
.upload-hint, .upload-box p.hint { font-size: 0.8em; color: var(--text-muted); margin: 0 0 8px 0; font-weight: normal; text-transform: none; letter-spacing: normal; }
.upload-box img { max-width: 100%; max-height: 120px; margin-top: 16px; border-radius: 6px; object-fit: contain; border: 1px solid var(--border); background: #fff; }

.toggle-box { display: flex; align-items: center; gap: 12px; background: #fff; padding: 16px 20px; border-radius: var(--radius-box); border: 1px solid var(--border); cursor: pointer; transition: border-color 0.2s; }
.toggle-box:hover { border-color: var(--border-focus); }
.toggle-box input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; margin: 0;}
.toggle-box label { margin: 0; cursor: pointer; font-weight: 500; color: var(--text-main); text-transform: none; letter-spacing: normal; font-size: 0.95em;}

.info-box { background: #f8fafc; padding: 16px 20px; border-radius: var(--radius-box); border: 1px solid var(--border); }
.info-box label { color: var(--accent); display: flex; align-items: center; gap: 6px; }
.info-box p { color: var(--text-muted); font-size: 0.85em; margin: 0 0 12px 0; }

/* =========================================
   BOTONES
   ========================================= */
.btn { 
    padding: 12px 20px; background: var(--accent); color: white; text-decoration: none; border-radius: var(--radius-btn); 
    font-weight: 500; cursor: pointer; border: 1px solid transparent; font-size: 0.95em; transition: all 0.2s; 
    display: inline-flex; align-items: center; justify-content: center; 
}
.btn:hover:not(:disabled) { background: var(--accent-hover); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-secondary { background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; }
.btn-secondary:hover:not(:disabled) { background: #e2e8f0; color: var(--text-main); }

.btn-outline { background: transparent; color: var(--text-main); border-color: var(--border); }
.btn-outline:hover:not(:disabled) { background: var(--bg-body); border-color: var(--border-focus); box-shadow: none; }

.btn-danger { background: var(--danger); color: white; }
.btn-danger:hover:not(:disabled) { background: var(--danger-hover); }

.btn-icon { padding: 12px; font-weight: bold; line-height: 1; }

#btnAIEnhance { margin-top: 16px; width: 100%; border: 1px solid #8b5cf6; color: #6d28d9; background: #f5f3ff; font-weight: 600; }
#btnAIEnhance:hover:not(:disabled) { background: #ede9fe; box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1); }

/* =========================================
   PESTAÑAS (TABS) Y NAVEGACIÓN
   ========================================= */
nav { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 32px; overflow-x: auto; scrollbar-width: none; }
nav::-webkit-scrollbar { display: none; }
nav a { padding: 12px 20px; color: var(--text-muted); text-decoration: none; border-bottom: 2px solid transparent; cursor: pointer; font-weight: 500; transition: all 0.2s; font-size: 0.95em; white-space: nowrap; }
nav a:hover { color: var(--text-main); }
nav a.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.tab-content { display: none; animation: fadeIn 0.3s ease; }
.tab-content.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* =========================================
   COMPONENTES MULTI-TIENDA (DASHBOARD)
   ========================================= */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; }
.store-card { 
    background: var(--bg-card); padding: 24px; border-radius: var(--radius-box); border: 1px solid var(--border); 
    box-shadow: 0 1px 3px rgba(0,0,0,0.04); text-decoration: none; color: inherit; display: flex; flex-direction: column; 
    gap: 16px; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; 
}
.store-card:hover { transform: translateY(-4px); border-color: var(--border-focus); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04); }
.store-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--accent); opacity: 0; transition: opacity 0.2s; }
.store-card:hover::before { opacity: 1; }
.card-header { display: flex; justify-content: space-between; align-items: flex-start; }
.card-title { margin: 0; font-size: 1.25em; font-weight: 600; color: var(--text-main); }
.card-body { display: flex; flex-direction: column; gap: 8px; }
.card-text { margin: 0; color: var(--text-muted); font-size: 0.9em; display: flex; align-items: center; gap: 8px; }
.card-text span { color: #94a3b8; font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; width: 60px; }
.card-text strong { color: var(--text-main); font-weight: 500; }
.empty-state { grid-column: 1 / -1; text-align: center; padding: 60px 20px; background: transparent; border: 2px dashed var(--border); border-radius: var(--radius-box); color: var(--text-muted); }

/* =========================================
   TABLAS, LISTAS Y BADGES
   ========================================= */
table { width: 100%; border-collapse: collapse; text-align: left; }
th { padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: 0.75em; font-weight: 600; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.05em; background: #f8fafc; }
td { padding: 16px; border-bottom: 1px solid var(--border); font-size: 0.9em; vertical-align: middle; color: #334155; }
tbody tr { transition: background 0.2s; }
tbody tr:hover { background: #f8fafc; }

.badge, .status { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 0.75em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.badge.active { background: #dcfce7; color: #166534; }
.badge.inactive { background: #f1f5f9; color: #475569; }
.status { padding: 4px 12px; font-size: 0.85em; }
.status.pending { background: #fef3c7; color: #92400e; }
.status.completed { background: #dcfce7; color: #166534; }

.product-list-item { display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--border); padding: 12px; border-radius: var(--radius-box); margin-bottom: 12px; transition: box-shadow 0.2s; }
.product-list-item:hover { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); border-color: var(--border-focus); }
.product-list-item img { width: 50px; height: 50px; object-fit: cover; border-radius: 6px; margin-right: 16px; border: 1px solid var(--border); }
.product-list-item .no-img { width: 50px; height: 50px; background: var(--bg-body); border-radius: 6px; margin-right: 16px; display: flex; align-items: center; justify-content: center; font-size: 0.8em; color: var(--text-muted); border: 1px dashed var(--border); }
.actions-group { display: flex; gap: 8px; }

.category-sort-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius-box); margin-bottom: 8px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.02); }
.btn-sort { background: #f1f5f9; border: 1px solid #e2e8f0; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-weight: 600; color: #475569; font-size: 0.8em; transition: all 0.2s;}
.btn-sort:hover:not(:disabled) { background: #e2e8f0; color: #0f172a; border-color: #cbd5e1;}
.btn-sort:disabled { opacity: 0.4; cursor: not-allowed; }

/* Filtros y Buscador */
.search-container input { background-color: #f8fafc; }
.category-pills { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-bottom: 24px; padding-bottom: 4px; }
.pill { padding: 6px 14px; font-size: 0.85em; cursor: pointer; white-space: nowrap; border-radius: 999px; font-weight: 500; background: var(--bg-card); border: 1px solid var(--border); color: var(--text-muted); transition: all 0.2s; }
.pill:hover { border-color: var(--border-focus); color: var(--text-main); }
.pill.active { background: var(--text-main); color: white; border-color: var(--text-main); }

/* =========================================
   ELEMENTOS DE CREACIÓN DE PRODUCTO
   ========================================= */
#imagePreview { max-width: 100%; height: 240px; margin-top: 20px; border-radius: 8px; display: none; object-fit: cover; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06); border: 1px solid var(--border); background: #fff; }
.modifier-group { border: 1px solid var(--border); padding: 24px; border-radius: var(--radius-box); background: #f8fafc; margin-top: 20px; position: relative; box-shadow: 0 1px 2px rgba(0,0,0,0.01); }
.remove-group-btn { position: absolute; right: 16px; top: 16px; background: transparent; color: var(--text-muted); border: none; cursor: pointer; font-size: 1.4em; line-height: 1; transition: color 0.2s; padding: 4px 8px; }
.remove-group-btn:hover { color: var(--danger); }
.option-row { display: flex; gap: 12px; margin-top: 12px; align-items: center; }

/* =========================================
   MODALES Y MAPA
   ========================================= */
.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(4px); z-index: 1000; justify-content: center; align-items: center; }
.modal-overlay.active { display: flex; animation: fadeIn 0.2s ease; }
.modal-content { background: white; padding: 32px; border-radius: 16px; width: 90%; max-width: 500px; max-height: 90vh; overflow-y: auto; position: relative; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); }
.modal-close { position: absolute; top: 16px; right: 16px; background: #f1f5f9; border: none; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2em; cursor: pointer; color: #64748b; transition: all 0.2s; }
.modal-close:hover { background: #e2e8f0; color: #0f172a; }

.order-item { border-bottom: 1px solid var(--border); padding: 12px 0; }
.order-item:last-child { border-bottom: none; }
.order-meta { background: #f8fafc; padding: 16px; border-radius: var(--radius-box); margin-top: 20px; font-size: 0.9em; line-height: 1.6; border: 1px solid var(--border); color: #334155; }

.autocomplete-results { position: absolute; background: white; width: 100%; max-height: 200px; overflow-y: auto; z-index: 1000; border: 1px solid var(--border); border-top: none; border-radius: 0 0 var(--radius-btn) var(--radius-btn); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); display: none; }
.autocomplete-item { padding: 12px 16px; border-bottom: 1px solid var(--border); cursor: pointer; font-size: 0.9em; color: #334155;}
.autocomplete-item:hover { background: #f8fafc; color: var(--accent); font-weight: 500;}
#adminMap { height: 160px; width: 100%; border-radius: var(--radius-btn); margin-top: 10px; display: none; z-index: 1; border: 1px solid var(--border); }

/* =========================================
   MOCKUP (CELULAR PREVIEW) & COLORIS
   ========================================= */
.mockup-wrapper { 
    border: 10px solid #0f172a; border-radius: 44px; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15); 
    background: #0f172a; aspect-ratio: 1 / 2.16; height: 80vh; min-height: 600px; max-height: 850px; min-width: 320px; 
    max-width: 400px; position: sticky; top: 100px; flex: 1; 
}
.mockup-wrapper iframe { width: 100%; height: 100%; border: none; border-radius: 34px; background: #fff; }

.clr-field button { border-radius: 4px; }
.clr-field input { padding-left: 40px !important; }

/* Links Login/Register */
.links { text-align: center; margin-top: 24px; font-size: 0.9em; color: var(--text-muted); }
.links a { color: var(--accent); text-decoration: none; font-weight: 600; transition: color 0.2s; }
.links a:hover { text-decoration: underline; }

/* =========================================
   ESTILOS ESPECÍFICOS PARA LOGIN / REGISTRO
   ========================================= */
body.auth-page { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; box-sizing: border-box; padding-bottom: 20px; }
.auth-page .brand { font-size: 2em; font-weight: 800; margin-bottom: 32px; letter-spacing: -0.05em; }
.card.auth-card { padding: 40px 32px; width: 100%; max-width: 400px; box-sizing: border-box; margin: 0; box-shadow: 0 10px 25px -5px rgba(0,0,0,0.05), 0 8px 10px -6px rgba(0,0,0,0.01); }
.auth-card h2 { margin: 0 0 8px 0; text-align: center; font-size: 1.6em; font-weight: 700; letter-spacing: -0.02em; }
.auth-card .subtitle { text-align: center; color: var(--text-muted); font-size: 0.95em; margin: 0 0 24px 0; }
.auth-card .form-group { margin-bottom: 20px; }
.auth-card button { margin-top: 10px; }
.auth-card .links { text-align: center; margin-top: 24px; font-size: 0.9em; color: var(--text-muted); padding-top: 20px; border-top: 1px solid var(--border); }