/* ======================================== DASHBOARD CSS LIMPIO - SIN DUPLICADOS ======================================== */ /* Espaciado para vitrina rating row - Especificidad máxima */ .dashboard-container .vitrina-rating-row, div.vitrina-rating-row, .vitrina-rating-row { margin-bottom: 1rem !important; padding-bottom: 1rem !important; } /* Variables CSS */ :root { --color-emerald: #10b981; --color-emerald-dark: #059669; --color-sky: #0ea5e9; --color-sky-dark: #0284c7; --color-mint: #34d399; --color-mustard: #f59e0b; --color-mustard-dark: #d97706; } /* ======================================== LAYOUT BASE ======================================== */ .dashboard-container { min-height: 100vh; } .dashboard-container .sidebar { background: #1f2937; color: #ffffff; min-height: 100vh; height: 100vh; } .dashboard-container .sidebar nav a { color: #ffffff; } .dashboard-container .sidebar nav a:hover { color: #ffffff; } .dashboard-container .sidebar .text-white { color: #ffffff; } /* Desktop: Flex layout */ @media (min-width: 1024px) { .dashboard-container { display: flex; align-items: stretch; } .dashboard-container .sidebar { position: sticky; top: 0; height: 100vh; min-height: 100vh; width: 260px; flex: 0 0 260px; padding-top: 16px; transform: none; box-shadow: none; z-index: 20; } .dashboard-container .main-content { flex: 1 1 auto; width: auto; margin-left: 0; } .dashboard-container #menu-toggle { display: none; } .sidebar-overlay { display: none; } } /* Mobile/Tablet: Block layout */ @media (max-width: 1023px) { html, body { height: auto; min-height: 100%; overflow-y: auto; overflow-x: hidden; } body { -webkit-overflow-scrolling: touch; } .dashboard-container { display: block; min-height: auto; } .dashboard-container .main-content { margin-left: 0; width: 100%; overflow: visible; -webkit-overflow-scrolling: touch; } .dashboard-container .sidebar { position: fixed; top: 0; left: 0; height: 100dvh; min-height: 100dvh; width: 78vw; max-width: 300px; transform: translateX(-100%); transition: transform 0.25s ease; z-index: 40; padding-top: 14px; box-shadow: 10px 0 24px rgba(0,0,0,0.25); } .dashboard-container.sidebar-open .sidebar, .sidebar.open, #sidebar.open { transform: translateX(0); } .sidebar-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 30; display: none; backdrop-filter: blur(1px); } .dashboard-container.sidebar-open .sidebar-overlay, .sidebar-overlay.open { display: block; } .dashboard-container #menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: #374151; color: #ffffff; border: 1px solid #4b5563; border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.12); } .dashboard-container #menu-toggle:hover { background: #3f4856; border-color: #5b6472; } } /* ======================================== BOTONES ESTANDARIZADOS ======================================== */ /* Botón base */ .dashboard-container .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.5rem; border-radius: 0.5rem; font-weight: 600; text-decoration: none; border: none; cursor: pointer; transition: all 0.2s ease; font-size: 0.875rem; line-height: 1.25rem; min-height: 44px; white-space: nowrap; } /* Botón primario (Guardar, Confirmar, Agregar) */ .dashboard-container .btn-primary, .dashboard-container .btn-save, .dashboard-container .btn-confirm, .dashboard-container .btn-add { background: #10b981; color: white; border: 1px solid #10b981; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } /* Fallback cuando el modal se mueve al (edición) */ #vp-modal .btn-primary, #vp-modal .btn-save, #vp-modal .btn-confirm, #vp-modal .btn-add { background: #10b981; color: white; border: 1px solid #10b981; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .dashboard-container .btn-primary, .dashboard-container .btn-save, .dashboard-container .btn-confirm, .dashboard-container .btn-add { background: #10b981; color: white; border: 1px solid #10b981; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .dashboard-container .btn-primary:hover, #vp-modal .btn-primary:hover, #vp-modal .btn-save:hover, #vp-modal .btn-confirm:hover, #vp-modal .btn-add:hover, .dashboard-container .btn-save:hover, .dashboard-container .btn-confirm:hover, .dashboard-container .btn-add:hover { background: #059669; border-color: #059669; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transform: translateY(-1px); } /* Botón cancelar (Rojo) */ .dashboard-container .btn-cancel { background: #ef4444; color: white; border: 1px solid #ef4444; } /* Fallback modal edición */ #vp-modal .btn-cancel { background: #ef4444; color: white; border: 1px solid #ef4444; } .dashboard-container .btn-cancel { background: #ef4444; color: white; border: 1px solid #ef4444; } .dashboard-container .btn-cancel:hover { background: #dc2626; border-color: #dc2626; } /* Botón secundario (Cerrar) */ .dashboard-container .btn-secondary, .dashboard-container .btn-close { background: #f9fafb; color: #374151; border: 1px solid #d1d5db; } .dashboard-container .btn-secondary:hover, .dashboard-container .btn-close:hover { background: #f3f4f6; border-color: #9ca3af; color: #111827; } /* Botón de peligro (Eliminar) */ .dashboard-container .btn-danger, .dashboard-container .btn-delete { background: #ef4444; color: white; border: 1px solid #ef4444; } .dashboard-container .btn-danger:hover, .dashboard-container .btn-delete:hover { background: #dc2626; border-color: #dc2626; } /* Botón de información/acción (Editar, Ver) */ .dashboard-container .btn-info, .dashboard-container .btn-view { background: #3b82f6; color: white; border: 1px solid #3b82f6; } .dashboard-container .btn-edit { background: #f3f4f6; color: #374151; border: 1px solid #d1d5db; } .dashboard-container .btn-info:hover, .dashboard-container .btn-view:hover { background: #2563eb; border-color: #2563eb; } .dashboard-container .btn-edit:hover { background: #e5e7eb; border-color: #9ca3af; } /* Color para spans solo en el sidebar (evitar afectar otros módulos) */ .dashboard-container .sidebar span, .sidebar-menu-item span { color: #ffffff !important; } /* Color negro solo para texto dentro de ul específico */ ul.space-y-3 span { color: #111827 !important; } /* ======================================== SIDEBAR MENU ITEMS - DISEÑO COMPLETO DEL DASHBOARD ======================================== */ .sidebar-menu-item { display: flex; align-items: center; padding: 12px 16px; color: #d1d5db; text-decoration: none; border-radius: 8px; transition: all 0.2s ease; margin-bottom: 4px; } .sidebar-menu-item i { width: 20px; margin-right: 12px; text-align: center; font-size: 16px; } .sidebar-menu-item span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-menu-item:hover { background-color: #374151; color: #ffffff; text-decoration: none; } .sidebar-menu-item.active-section { background-color: #4b5563; color: #ffffff; } /* Sidebar bottom section */ .sidebar-bottom { margin-top: auto; padding-top: 16px; } .sidebar-bottom .border-t { border-top: 1px solid #374151; } .sidebar-bottom .w-10 { width: 2.5rem; height: 2.5rem; } .sidebar-bottom .bg-green-500 { background-color: #10b981; } .sidebar-bottom .rounded-full { border-radius: 50%; } .sidebar-bottom .text-white { color: #ffffff; } .sidebar-bottom .text-gray-400 { color: #9ca3af; } .sidebar-bottom .text-sm { font-size: 0.875rem; } .sidebar-bottom .text-xs { font-size: 0.75rem; } .sidebar-bottom .font-medium { font-weight: 500; } .sidebar-bottom .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar-bottom button { transition: all 0.2s ease; } .sidebar-bottom button:hover { background-color: #374151; color: #ffffff; } /* Botón Cerrar Sesión específico */ #logout-btn { background-color: #374151; color: #ffffff; border: none; } #logout-btn:hover { background-color: #4b5563; color: #ffffff; } /* Colores específicos del dashboard */ /* Título principal azul */ .dashboard-section h3, #vitrina-section h3, h3 { color: #f59e0b; } /* Subtítulos naranja */ .dashboard-section h4, #info-basica-title, #info-contacto-title, #info-imagen-title { color: #f59e0b; border-bottom: 2px solid #f59e0b; padding-bottom: 4px; display: inline-block; } /* Badge PREMIUM naranja */ .badge-premium, #premium-sticker { background-color: #E8941E !important; color: #ffffff !important; } /* Estados "Publicado" verde */ #publish-status, #vp-publish-status { background-color: #10b981 !important; color: #ffffff !important; } /* Botón "Copiar link" verde */ .btn-success, button[id*="copy"] { background-color: #10b981; border-color: #10b981; } .btn-success:hover, button[id*="copy"]:hover { background-color: #059669; border-color: #059669; } /* Estados disabled */ .dashboard-container .btn[disabled], .dashboard-container .btn.disabled, .dashboard-container button[disabled] { opacity: 0.6; cursor: not-allowed; box-shadow: none; transform: none; } /* Sobrescribir TailwindCSS disabled states */ .dashboard-container .btn-add[disabled] { background: #9ca3af; border-color: #9ca3af; } .dashboard-container .btn-add:not([disabled]) { background: #10b981; border-color: #10b981; color: white; } /* Botones pequeños */ .dashboard-container .btn-sm { padding: 0.5rem 1rem; font-size: 0.75rem; min-height: 36px; } /* Botones grandes */ .dashboard-container .btn-lg { padding: 1rem 2rem; font-size: 1rem; min-height: 52px; } .premium-hero { margin-bottom: var(--space-8); } .premium-hero h4 { margin-bottom: 1.5rem; } /* ======================================== VISTA PREVIA - LOGO CIRCULAR ======================================== */ .vitrina-card-logo img, #preview-logo { border-radius: 50% !important; object-fit: cover !important; width: 50px !important; height: 50px !important; } .vitrina-card .vitrina-card-logo { position: absolute !important; bottom: 8px !important; left: 8px !important; width: 50px !important; height: 50px !important; overflow: hidden !important; border-radius: 50% !important; border: 2px solid #fff !important; box-shadow: 0 2px 6px rgba(0,0,0,0.2) !important; } /* ======================================== VISTA PREVIA – COLORES DE TEXTO Todo negro excepto el nombre del negocio ======================================== */ /* Descripción en negro */ #vitrinaCardPreview .vitrina-description-new { color: #111827 !important; } /* Ítems de contacto (icono y texto) en negro */ #vitrinaCardPreview .vitrina-contact-item-new { color: #111827 !important; } /* Reseñas/número en negro */ #vitrinaCardPreview .vitrina-reviews, #vitrinaCardPreview .vitrina-rating-num { color: #111827 !important; } /* Mantener estrellas doradas */ #vitrinaCardPreview .vitrina-stars i { color: #fbbf24 !important; } /* Vencer regla global: span { color:#fff !important } */ #vitrinaCardPreview .vitrina-contact-item-new span, #vitrinaCardPreview .vitrina-contact-item-new a { color: #111827 !important; } /* ======================================== GENERIC MODAL COMPONENT (Framework) ======================================== */ .modal-overlay { position: fixed; inset: 0; z-index: 10000; background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(2px); display: none; } .modal-overlay[style*="display: block"], .modal-overlay.open { display: flex; align-items: flex-start; justify-content: center; padding: 5vh 4vw; box-sizing: border-box; } .modal-content { position: relative; max-width: 780px; width: 92vw; max-height: 90vh; background: #ffffff; border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,0.35); overflow: hidden; display: flex; flex-direction: column; } @media (max-width: 767px) { .modal-overlay.open { align-items: stretch; } .modal-content { width: 100vw; max-width: none; height: 100vh; max-height: none; border-radius: 0; } } /* ======================================== VITRINA PLUS MODAL ======================================== */ /* Align & center when visible (mimics #productos-modal) */ #vp-modal[style*="display: block"] { display: flex; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; background: rgba(0, 0, 0, 0.5); } #vp-modal > .modal-content { position: relative; max-width: 900px; width: 100%; max-height: 90vh; margin: auto; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } /* Responsive breakpoints */ @media (max-width: 768px) { #vp-modal[style*="display: block"] { padding: 10px; align-items: flex-start; padding-top: 20px; } #vp-modal > .modal-content { width: 95vw; max-height: 95vh; border-radius: 8px; } } /* iPhone específico */ @media (max-width: 480px) { #vp-modal[style*="display: block"] { padding: 5px; padding-top: 10px; } #vp-modal > .modal-content { width: 98vw; max-height: 98vh; border-radius: 6px; } } /* iPad específico */ @media (min-width: 768px) and (max-width: 1024px) { #vp-modal > .modal-content { max-width: 700px; width: 90vw; max-height: 85vh; } } /* Desktop overrides */ @media (min-width: 1024px) { /* Centrar verticalmente el modal */ .modal-overlay.open { align-items: center; } /* Header verde sólido y textos oscuros */ #vp-modal .modal-header, #vp-modal .vp-modal-header { background: var(--color-emerald) !important; position: relative; } /* Barra de color decorativa debajo del título */ #vp-modal .modal-header::after, #vp-modal .vp-modal-header::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--color-emerald), var(--color-sky)); } #vp-modal #vp-modal-title, #vp-modal .vp-title--edit { color: #111827 !important; } } @media (max-width: 767px) { /* Modal full-screen en móvil */ .dashboard-container #vp-modal { align-items: flex-start; padding-top: 10px; } .dashboard-container #vp-modal > div { position: relative; width: 98vw; max-height: 95vh; margin: 0 auto; border-radius: 8px; display: flex; flex-direction: column; overflow: hidden; } /* Header responsivo */ #vp-modal .modal-header { background: linear-gradient(90deg, var(--color-emerald), var(--color-sky)); padding: 1rem 1.5rem; border-radius: 0; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; min-height: 70px; } @media (max-width: 767px) { #vp-modal .modal-header { padding: 0.75rem 1rem; min-height: 60px; } } @media (max-width: 480px) { #vp-modal .modal-header { padding: 0.5rem 0.75rem; min-height: 50px; flex-wrap: wrap; gap: 0.5rem; } #vp-modal .modal-header h3 { font-size: 0.875rem; } #vp-modal .modal-header .flex { flex-wrap: wrap; gap: 0.25rem; } #vp-modal .modal-header button { padding: 0.25rem 0.5rem; font-size: 0.75rem; } } /* Título blanco */ #vp-modal #vp-modal-title { font-size: 1rem; font-weight: 600; margin: 0; color: #ffffff; } #vp-modal .vp-title--edit { color: #ffffff; } /* Botones en header */ #vp-modal .vp-header-actions { display: flex; gap: 0.5rem; flex-shrink: 0; } #vp-modal .vp-header-actions button { padding: 0.5rem 0.75rem; font-size: 0.875rem; border-radius: 6px; font-weight: 500; min-width: 70px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } /* Formulario scrolleable */ #vp-modal .modal-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 1.5rem; max-height: calc(90vh - 120px); } /* Ajustes móvil */ @media (max-width: 767px) { #vp-modal .modal-body { padding: 1rem; padding-bottom: 2rem; max-height: calc(95vh - 80px); overflow-y: scroll; } } /* iPhone específico */ @media (max-width: 480px) { #vp-modal .modal-body { padding: 0.75rem; padding-bottom: 1.5rem; max-height: calc(98vh - 70px); } } /* iPad */ @media (min-width: 768px) and (max-width: 1024px) { #vp-modal .modal-body { max-height: calc(85vh - 100px); } } /* Grid responsivo del formulario */ #vp-modal .grid { display: grid; gap: 1.5rem; } @media (max-width: 767px) { #vp-modal .grid { grid-template-columns: 1fr; gap: 1rem; } } @media (min-width: 768px) { #vp-modal .grid.lg\:grid-cols-2 { grid-template-columns: 1fr 1fr; } } /* Campos compactos */ #vp-modal .form-group { display: flex; flex-direction: column; gap: 0.25rem; } #vp-modal .form-group label { font-size: 0.875rem; font-weight: 500; color: #374151; } #vp-modal .form-group input, #vp-modal .form-group textarea { padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.875rem; } /* Sección de imágenes compacta */ #vp-modal .images-section { margin-top: 1rem; } #vp-modal .images-section h4 { font-size: 0.875rem; font-weight: 600; color: #374151; margin-bottom: 0.5rem; } #vp-modal .images-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; } #vp-modal .image-upload-container { border: 2px dashed #d1d5db; border-radius: 8px; padding: 1rem; text-align: center; background: #f9fafb; } #vp-modal .image-upload-container.has-image { border-color: var(--color-emerald); background: #ecfdf5; } /* Ocultar footer original */ #vp-modal .vp-modal-footer { display: none; } } /* ======================================== PRODUCTOS MODAL ======================================== */ #productos-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; z-index: 10000; background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(2px); display: none; } #productos-modal[style*="display: block"] { display: flex; align-items: flex-start; justify-content: center; padding: 2vh 2.5vw; box-sizing: border-box; } #productos-modal > div { position: relative; max-width: 900px; width: 100%; max-height: 96vh; background: #ffffff; border-radius: 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35); overflow: hidden; display: flex; flex-direction: column; } #productos-form { overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; position: relative; min-height: 0; } /* Mobile adjustments */ @media (max-width: 768px) { #productos-modal > div { width: 94vw; max-height: 90vh; } #productos-form { padding: 0.75rem; } } /* ======================================== MODAL BODY LOCK ======================================== */ body.modal-open { overflow: hidden; position: fixed; width: 100%; height: 100%; -webkit-overflow-scrolling: auto; } @media (max-width: 767px) { body.modal-open { touch-action: none; } } /* ======================================== TOUCH OPTIMIZATIONS ======================================== */ @media (max-width: 767px) { /* Optimizaciones táctiles */ button, .btn, [data-action] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } /* Feedback táctil */ .touch-active { transform: scale(0.98); opacity: 0.8; } } /* ======================================== UTILITIES ======================================== */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { * { animation: none; transition: none; } } /* ======================================== VITRINA PLUS MODAL – Mobile & Tablet overrides ======================================== */ @media (max-width: 1023px) { #vp-modal .vp-modal-header { background: #ffffff !important; } #vp-modal #vp-modal-title, #vp-modal .vp-title--edit { color: #111827 !important; } } #upgrade-premium-btn { margin-bottom: 1rem; } /* Uniformar altura cuando no hay descripción en tarjetas VP */ .vp-card .body .desc { min-height: 2.5rem; /* ~2 líneas para mantener alineación consistente */ } /* Vitrina Plus (dashboard): cambiar botón verde a gris solo en tarjetas VP */ .vp-card .btn-success { background-color: #6b7280; /* gray-500 */ border-color: #6b7280; } .vp-card .btn-success:hover { background-color: #4b5563; /* gray-600 */ border-color: #4b5563; }