body { font-family: Fira Sans,sans-serif }
     


      {} *{} 
     


      #IE-warning {
        display: none;
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 9999;
        background: white;
      }
      .IE-warning-message {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
      }
    



 /* Reset & Fonts */ :root { --primary: #2563eb; --primary-hover: #1d4ed8; --bg-main: #f8fafc; --bg-panel: #ffffff; --text-main: #1e293b; --text-muted: #64748b; --border: #e2e8f0; --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); } .auge-wrapper { font-family: 'Inter', sans-serif; color: var(--text-main); background: var(--bg-main); display: flex; flex-direction: column; min-height: 80vh; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); } /* Header */ header.crm-header { background: white; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; } .brand { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 1.25rem; color: var(--primary); } .header-controls { display: flex; gap: 1rem; flex-grow: 1; justify-content: flex-end; align-items: center; } .search-form { display: flex; gap: 0.5rem; } .search-form input, .filter-select { padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: 0.375rem; font-size: 0.875rem; } /* Layout */ .main-container { display: flex; flex: 1; overflow: hidden; } .contact-panel { width: 320px; background: white; border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 1.5rem; } .content-area { flex: 1; display: flex; flex-direction: column; background: var(--bg-main); } /* Form Elements */ .form-group { margin-bottom: 1rem; } .form-label { display: block; font-size: 0.75rem; font-weight: 600; margin-bottom: 0.25rem; color: var(--text-muted); } .form-input, .form-textarea { width: 100%; padding: 0.5rem; border: 1px solid var(--border); border-radius: 0.25rem; font-size: 0.875rem; } .form-textarea { min-height: 80px; resize: vertical; } /* Collapsible */ .collapsible { border-bottom: 1px solid var(--border); margin-bottom: 0.5rem; } .collapsible-header { padding: 0.75rem 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center; } .collapsible-content { display: none; padding-bottom: 1rem; } .collapsible-content.open { display: block; } /* Properties Grid */ .properties-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; padding: 1.5rem; } .prop-card { background: white; border: 1px solid var(--border); border-radius: 0.5rem; overflow: hidden; transition: transform 0.2s; } .prop-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .prop-card-body { padding: 1rem; } .prop-title { font-weight: 600; margin-bottom: 0.5rem; } .prop-meta { font-size: 0.75rem; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 0.5rem; } /* Buttons */ .btn-primary { background: var(--primary); color: white; border: none; padding: 0.625rem; border-radius: 0.375rem; font-weight: 600; cursor: pointer; width: 100%; } .btn-sm { background: #f1f5f9; color: var(--text-main); padding: 0.25rem 0.5rem; border-radius: 0.25rem; text-decoration: none; font-size: 0.75rem; border: 1px solid var(--border); } /* Tabs */ .tabs { display: flex; border-bottom: 1px solid var(--border); background: white; } .tab { padding: 1rem 1.5rem; cursor: pointer; border-bottom: 2px solid transparent; font-weight: 500; } .tab.active { border-color: var(--primary); color: var(--primary); } /* Map */ #map { height: 100%; min-height: 400px; width: 100%; } /* Status Bar */ .status-bar { padding: 0.5rem 1rem; text-align: center; font-size: 0.875rem; } .status-success { background: #dcfce7; color: #166534; } .status-error { background: #fee2e2; color: #991b1b; } .hidden { display: none !important; } /* Loader */ .loader { width: 16px; height: 16px; border: 2px solid #fff; border-bottom-color: transparent; border-radius: 50%; display: inline-block; animation: rotation 1s linear infinite; } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Responsive */ @media (max-width: 768px) { .main-container { flex-direction: column; } .contact-panel { width: 100%; border-right: none; border-bottom: 1px solid var(--border); } header.crm-header { flex-direction: column; align-items: flex-start; } } 

 /* Reset & Fonts */ :root { --primary: #2563eb; --primary-hover: #1d4ed8; --bg-main: #f8fafc; --bg-panel: #ffffff; --text-main: #1e293b; --text-muted: #64748b; --border: #e2e8f0; --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); } .auge-wrapper { font-family: 'Inter', sans-serif; color: var(--text-main); background: var(--bg-main); display: flex; flex-direction: column; min-height: 80vh; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); } /* Header */ header.crm-header { background: white; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; } .brand { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 1.25rem; color: var(--primary); } .header-controls { display: flex; gap: 1rem; flex-grow: 1; justify-content: flex-end; align-items: center; } .search-form { display: flex; gap: 0.5rem; } .search-form input, .filter-select { padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: 0.375rem; font-size: 0.875rem; } /* Layout */ .main-container { display: flex; flex: 1; overflow: hidden; } .contact-panel { width: 320px; background: white; border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 1.5rem; } .content-area { flex: 1; display: flex; flex-direction: column; background: var(--bg-main); overflow: hidden; } /* Form Elements */ .form-group { margin-bottom: 1rem; } .form-label { display: block; font-size: 0.75rem; font-weight: 600; margin-bottom: 0.25rem; color: var(--text-muted); } .form-input, .form-textarea { width: 100%; padding: 0.5rem; border: 1px solid var(--border); border-radius: 0.25rem; font-size: 0.875rem; } .form-textarea { min-height: 80px; resize: vertical; } /* Collapsible */ .collapsible { border-bottom: 1px solid var(--border); margin-bottom: 0.5rem; } .collapsible-header { padding: 0.75rem 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center; } .collapsible-content { display: none; padding-bottom: 1rem; } .collapsible-content.open { display: block; } /* Properties Grid */ .properties-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; padding: 1.5rem; } /* Informe HTML Container */ #reportContainer { padding: 1rem; background: #f0f2f5; height: 100%; overflow-y: auto; } .prop-card { background: white; border: 1px solid var(--border); border-radius: 0.5rem; overflow: hidden; transition: transform 0.2s; } .prop-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .prop-card-body { padding: 1rem; } .prop-title { font-weight: 600; margin-bottom: 0.5rem; } .prop-meta { font-size: 0.75rem; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 0.5rem; } /* Buttons */ .btn-primary { background: var(--primary); color: white; border: none; padding: 0.625rem; border-radius: 0.375rem; font-weight: 600; cursor: pointer; width: 100%; display: flex; align-items: center; justify-content: center; } .btn-sm { background: #f1f5f9; color: var(--text-main); padding: 0.25rem 0.5rem; border-radius: 0.25rem; text-decoration: none; font-size: 0.75rem; border: 1px solid var(--border); } /* Tabs */ .tabs { display: flex; border-bottom: 1px solid var(--border); background: white; } .tab { padding: 1rem 1.5rem; cursor: pointer; border-bottom: 2px solid transparent; font-weight: 500; } .tab.active { border-color: var(--primary); color: var(--primary); } /* Map */ #map { height: 100%; min-height: 400px; width: 100%; } /* Status Bar */ .status-bar { padding: 0.5rem 1rem; text-align: center; font-size: 0.875rem; } .status-success { background: #dcfce7; color: #166534; } .status-error { background: #fee2e2; color: #991b1b; } .hidden { display: none !important; } /* Loader */ .loader { width: 16px; height: 16px; border: 2px solid #fff; border-bottom-color: transparent; border-radius: 50%; display: inline-block; animation: rotation 1s linear infinite; } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Responsive */ @media (max-width: 768px) { .main-container { flex-direction: column; } .contact-panel { width: 100%; border-right: none; border-bottom: 1px solid var(--border); } header.crm-header { flex-direction: column; align-items: flex-start; } } 

 /* Reset & Fonts */ :root { --primary: #2563eb; --primary-hover: #1d4ed8; --bg-main: #f8fafc; --bg-panel: #ffffff; --text-main: #1e293b; --text-muted: #64748b; --border: #e2e8f0; --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); } .auge-wrapper { font-family: 'Inter', sans-serif; color: var(--text-main); background: var(--bg-main); display: flex; flex-direction: column; min-height: 80vh; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); } /* Header */ header.crm-header { background: white; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; } .brand { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 1.25rem; color: var(--primary); } .header-controls { display: flex; gap: 1rem; flex-grow: 1; justify-content: flex-end; align-items: center; } .search-form { display: flex; gap: 0.5rem; } .search-form input, .filter-select { padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: 0.375rem; font-size: 0.875rem; } /* Layout */ .main-container { display: flex; flex: 1; overflow: hidden; } .contact-panel { width: 320px; background: white; border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 1.5rem; } .content-area { flex: 1; display: flex; flex-direction: column; background: var(--bg-main); overflow: hidden; } /* Form Elements */ .form-group { margin-bottom: 1rem; } .form-label { display: block; font-size: 0.75rem; font-weight: 600; margin-bottom: 0.25rem; color: var(--text-muted); } .form-input, .form-textarea { width: 100%; padding: 0.5rem; border: 1px solid var(--border); border-radius: 0.25rem; font-size: 0.875rem; } .form-textarea { min-height: 80px; resize: vertical; } /* Collapsible */ .collapsible { border-bottom: 1px solid var(--border); margin-bottom: 0.5rem; } .collapsible-header { padding: 0.75rem 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center; } .collapsible-content { display: none; padding-bottom: 1rem; } .collapsible-content.open { display: block; } /* Properties Grid */ .properties-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; padding: 1.5rem; } /* Informe HTML Container */ #reportContainer { padding: 1rem; background: #f0f2f5; height: 100%; overflow-y: auto; } .prop-card { background: white; border: 1px solid var(--border); border-radius: 0.5rem; overflow: hidden; transition: transform 0.2s; } .prop-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .prop-card-body { padding: 1rem; } .prop-title { font-weight: 600; margin-bottom: 0.5rem; } .prop-meta { font-size: 0.75rem; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 0.5rem; } /* Buttons */ .btn-primary { background: var(--primary); color: white; border: none; padding: 0.625rem; border-radius: 0.375rem; font-weight: 600; cursor: pointer; width: 100%; display: flex; align-items: center; justify-content: center; } .btn-sm { background: #f1f5f9; color: var(--text-main); padding: 0.25rem 0.5rem; border-radius: 0.25rem; text-decoration: none; font-size: 0.75rem; border: 1px solid var(--border); } /* Tabs */ .tabs { display: flex; border-bottom: 1px solid var(--border); background: white; } .tab { padding: 1rem 1.5rem; cursor: pointer; border-bottom: 2px solid transparent; font-weight: 500; } .tab.active { border-color: var(--primary); color: var(--primary); } /* Map */ #map { height: 100%; min-height: 400px; width: 100%; } /* Status Bar */ .status-bar { padding: 0.5rem 1rem; text-align: center; font-size: 0.875rem; } .status-success { background: #dcfce7; color: #166534; } .status-warning { background: #fef9c3; color: #854d0e; } .status-error { background: #fee2e2; color: #991b1b; } .hidden { display: none !important; } /* Loader */ .loader { width: 16px; height: 16px; border: 2px solid #fff; border-bottom-color: transparent; border-radius: 50%; display: inline-block; animation: rotation 1s linear infinite; } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Responsive */ @media (max-width: 768px) { .main-container { flex-direction: column; } .contact-panel { width: 100%; border-right: none; border-bottom: 1px solid var(--border); } header.crm-header { flex-direction: column; align-items: flex-start; } } 

 /* Reset & Fonts */ :root { --primary: #2563eb; --primary-hover: #1d4ed8; --bg-main: #f8fafc; --bg-panel: #ffffff; --text-main: #1e293b; --text-muted: #64748b; --border: #e2e8f0; --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); } .auge-wrapper { font-family: 'Inter', sans-serif; color: var(--text-main); background: var(--bg-main); display: flex; flex-direction: column; min-height: 80vh; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); } /* Header */ header.crm-header { background: white; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; } .brand { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 1.25rem; color: var(--primary); } .header-controls { display: flex; gap: 1rem; flex-grow: 1; justify-content: flex-end; align-items: center; } .search-form { display: flex; gap: 0.5rem; } .search-form input, .filter-select { padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: 0.375rem; font-size: 0.875rem; min-width: 150px; } /* Layout */ .main-container { display: flex; flex: 1; overflow: hidden; } .contact-panel { width: 320px; background: white; border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 1.5rem; } .content-area { flex: 1; display: flex; flex-direction: column; background: var(--bg-main); overflow: hidden; } /* Form Elements */ .form-group { margin-bottom: 1rem; } .form-label { display: block; font-size: 0.75rem; font-weight: 600; margin-bottom: 0.25rem; color: var(--text-muted); } .form-input, .form-textarea { width: 100%; padding: 0.5rem; border: 1px solid var(--border); border-radius: 0.25rem; font-size: 0.875rem; } /* Collapsible */ .collapsible { border-bottom: 1px solid var(--border); margin-bottom: 0.5rem; } .collapsible-header { padding: 0.75rem 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center; } .collapsible-content { display: none; padding-bottom: 1rem; } .collapsible-content.open { display: block; } /* Properties Grid */ .properties-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; padding: 1.5rem; } #reportContainer { padding: 1rem; background: #f0f2f5; height: 100%; overflow-y: auto; } .prop-card { background: white; border: 1px solid var(--border); border-radius: 0.5rem; overflow: hidden; } .prop-card-body { padding: 1rem; } .prop-title { font-weight: 600; margin-bottom: 0.5rem; } /* Buttons */ .btn-primary { background: var(--primary); color: white; border: none; padding: 0.625rem; border-radius: 0.375rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; } /* Tabs */ .tabs { display: flex; border-bottom: 1px solid var(--border); background: white; } .tab { padding: 1rem 1.5rem; cursor: pointer; border-bottom: 2px solid transparent; font-weight: 500; } .tab.active { border-color: var(--primary); color: var(--primary); } /* Status Bar */ .status-bar { padding: 0.5rem 1rem; text-align: center; font-size: 0.875rem; } .status-success { background: #dcfce7; color: #166534; } .status-warning { background: #fef9c3; color: #854d0e; } .status-error { background: #fee2e2; color: #991b1b; } .hidden { display: none !important; } .loader { width: 14px; height: 14px; border: 2px solid #fff; border-bottom-color: transparent; border-radius: 50%; display: inline-block; animation: rotation 1s linear infinite; } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @media (max-width: 768px) { .main-container { flex-direction: column; } .contact-panel { width: 100%; } } 

 /* Reset & Fonts */ :root { --primary: #2563eb; --primary-hover: #1d4ed8; --bg-main: #f8fafc; --bg-panel: #ffffff; --text-main: #1e293b; --text-muted: #64748b; --border: #e2e8f0; --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); } .auge-wrapper { font-family: 'Inter', sans-serif; color: var(--text-main); background: var(--bg-main); display: flex; flex-direction: column; min-height: 80vh; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); } /* Header */ header.crm-header { background: white; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; } .brand { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 1.25rem; color: var(--primary); } .header-controls { display: flex; gap: 1rem; flex-grow: 1; justify-content: flex-end; align-items: center; } .search-form { display: flex; gap: 0.5rem; } .search-form input, .filter-select { padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: 0.375rem; font-size: 0.875rem; min-width: 150px; } /* Layout */ .main-container { display: flex; flex: 1; overflow: hidden; } .contact-panel { width: 320px; background: white; border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 1.5rem; } .content-area { flex: 1; display: flex; flex-direction: column; background: var(--bg-main); overflow: hidden; } /* Form Elements */ .form-group { margin-bottom: 1rem; } .form-label { display: block; font-size: 0.75rem; font-weight: 600; margin-bottom: 0.25rem; color: var(--text-muted); } .form-input { width: 100%; padding: 0.5rem; border: 1px solid var(--border); border-radius: 0.25rem; font-size: 0.875rem; } /* Properties Grid */ .properties-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; padding: 1.5rem; } #reportContainer { padding: 1rem; background: #f0f2f5; height: 100%; overflow-y: auto; } .prop-card { background: white; border: 1px solid var(--border); border-radius: 0.5rem; padding: 1rem; } /* Buttons */ .btn-primary { background: var(--primary); color: white; border: none; padding: 0.625rem; border-radius: 0.375rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; } /* Tabs */ .tabs { display: flex; border-bottom: 1px solid var(--border); background: white; } .tab { padding: 1rem 1.5rem; cursor: pointer; border-bottom: 2px solid transparent; font-weight: 500; } .tab.active { border-color: var(--primary); color: var(--primary); } /* Status Bar */ .status-bar { padding: 0.5rem 1rem; text-align: center; font-size: 0.875rem; } .status-success { background: #dcfce7; color: #166534; } .status-error { background: #fee2e2; color: #991b1b; } .hidden { display: none !important; } .loader { width: 14px; height: 14px; border: 2px solid #fff; border-bottom-color: transparent; border-radius: 50%; display: inline-block; animation: rotation 1s linear infinite; } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @media (max-width: 768px) { .main-container { flex-direction: column; } .contact-panel { width: 100%; } } 

 /* Estilos base optimizados */ :root { --primary: #2563eb; --primary-hover: #1d4ed8; --bg-main: #f8fafc; --bg-panel: #ffffff; --text-main: #1e293b; --text-muted: #64748b; --border: #e2e8f0; --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); } .auge-wrapper { font-family: 'Inter', sans-serif; color: var(--text-main); background: var(--bg-main); display: flex; flex-direction: column; min-height: 80vh; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); } header.crm-header { background: white; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; } .brand { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 1.25rem; color: var(--primary); } .header-controls { display: flex; gap: 1rem; flex-grow: 1; justify-content: flex-end; align-items: center; } .search-form { display: flex; gap: 0.5rem; } .search-form input, .filter-select { padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: 0.375rem; font-size: 0.875rem; min-width: 150px; } .main-container { display: flex; flex: 1; overflow: hidden; } .contact-panel { width: 320px; background: white; border-right: 1px solid var(--border); padding: 1.5rem; } .content-area { flex: 1; display: flex; flex-direction: column; background: var(--bg-main); overflow: hidden; } .form-group { margin-bottom: 1rem; } .form-label { display: block; font-size: 0.75rem; font-weight: 600; margin-bottom: 0.25rem; color: var(--text-muted); } .form-input { width: 100%; padding: 0.5rem; border: 1px solid var(--border); border-radius: 0.25rem; font-size: 0.875rem; } .properties-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; padding: 1.5rem; } #reportContainer { padding: 1rem; background: #f0f2f5; height: 100%; overflow-y: auto; } .btn-primary { background: var(--primary); color: white; border: none; padding: 0.625rem; border-radius: 0.375rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; } .tabs { display: flex; border-bottom: 1px solid var(--border); background: white; } .tab { padding: 1rem 1.5rem; cursor: pointer; border-bottom: 2px solid transparent; font-weight: 500; } .tab.active { border-color: var(--primary); color: var(--primary); } .status-bar { padding: 0.5rem 1rem; text-align: center; font-size: 0.875rem; } .status-error { background: #fee2e2; color: #991b1b; } .status-warning { background: #fef9c3; color: #854d0e; } .hidden { display: none !important; } .loader { width: 14px; height: 14px; border: 2px solid #fff; border-bottom-color: transparent; border-radius: 50%; display: inline-block; animation: rotation 1s linear infinite; } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @media (max-width: 768px) { .main-container { flex-direction: column; } .contact-panel { width: 100%; } } 

 :root { --primary: #2563eb; --primary-hover: #1d4ed8; --bg-main: #f8fafc; --bg-panel: #ffffff; --text-main: #1e293b; --text-muted: #64748b; --border: #e2e8f0; --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); } .auge-wrapper { font-family: 'Inter', sans-serif; color: var(--text-main); background: var(--bg-main); display: flex; flex-direction: column; min-height: 80vh; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); } header.crm-header { background: white; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; } .brand { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 1.25rem; color: var(--primary); } .header-controls { display: flex; gap: 1rem; flex-grow: 1; justify-content: flex-end; align-items: center; } .search-form { display: flex; gap: 0.5rem; } .search-form input, .filter-select { padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: 0.375rem; font-size: 0.875rem; min-width: 150px; } .main-container { display: flex; flex: 1; overflow: hidden; } .contact-panel { width: 320px; background: white; border-right: 1px solid var(--border); padding: 1.5rem; } .content-area { flex: 1; display: flex; flex-direction: column; background: var(--bg-main); overflow: hidden; } .form-group { margin-bottom: 1rem; } .form-label { display: block; font-size: 0.75rem; font-weight: 600; margin-bottom: 0.25rem; color: var(--text-muted); } .form-input { width: 100%; padding: 0.5rem; border: 1px solid var(--border); border-radius: 0.25rem; font-size: 0.875rem; } .properties-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; padding: 1.5rem; } #reportContainer { padding: 1rem; background: #f0f2f5; height: 100%; overflow-y: auto; } .btn-primary { background: var(--primary); color: white; border: none; padding: 0.625rem; border-radius: 0.375rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; } .tabs { display: flex; border-bottom: 1px solid var(--border); background: white; } .tab { padding: 1rem 1.5rem; cursor: pointer; border-bottom: 2px solid transparent; font-weight: 500; } .tab.active { border-color: var(--primary); color: var(--primary); } .status-bar { padding: 0.5rem 1rem; text-align: center; font-size: 0.875rem; z-index: 10; } .status-error { background: #fee2e2; color: #991b1b; } .status-warning { background: #fef9c3; color: #854d0e; } .hidden { display: none !important; } .loader { width: 14px; height: 14px; border: 2px solid #fff; border-bottom-color: transparent; border-radius: 50%; display: inline-block; animation: rotation 1s linear infinite; } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @media (max-width: 768px) { .main-container { flex-direction: column; } .contact-panel { width: 100%; } } 

 :root { --primary: #2563eb; --primary-hover: #1d4ed8; --bg-main: #f8fafc; --bg-panel: #ffffff; --text-main: #1e293b; --text-muted: #64748b; --border: #e2e8f0; --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); } .auge-wrapper { font-family: 'Inter', sans-serif; color: var(--text-main); background: var(--bg-main); display: flex; flex-direction: column; min-height: 80vh; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); } header.crm-header { background: white; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; } .brand { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 1.25rem; color: var(--primary); } .header-controls { display: flex; gap: 1rem; flex-grow: 1; justify-content: flex-end; align-items: center; } .search-form { display: flex; gap: 0.5rem; } .search-form input, .filter-select { padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: 0.375rem; font-size: 0.875rem; min-width: 150px; } .main-container { display: flex; flex: 1; overflow: hidden; } .contact-panel { width: 320px; background: white; border-right: 1px solid var(--border); padding: 1.5rem; } .content-area { flex: 1; display: flex; flex-direction: column; background: var(--bg-main); overflow: hidden; } .form-group { margin-bottom: 1rem; } .form-label { display: block; font-size: 0.75rem; font-weight: 600; margin-bottom: 0.25rem; color: var(--text-muted); } .form-input { width: 100%; padding: 0.5rem; border: 1px solid var(--border); border-radius: 0.25rem; font-size: 0.875rem; } .properties-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; padding: 1.5rem; } .prop-card { background: white; border: 1px solid var(--border); border-radius: 0.5rem; padding: 1rem; box-shadow: var(--shadow); transition: transform 0.2s; } .prop-card:hover { transform: translateY(-2px); } .prop-image { width: 100%; height: 150px; background: #e2e8f0; border-radius: 0.25rem; margin-bottom: 0.75rem; object-fit: cover; } #reportContainer { padding: 1rem; background: #f0f2f5; height: 100%; overflow-y: auto; } .btn-primary { background: var(--primary); color: white; border: none; padding: 0.625rem; border-radius: 0.375rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; } .tabs { display: flex; border-bottom: 1px solid var(--border); background: white; } .tab { padding: 1rem 1.5rem; cursor: pointer; border-bottom: 2px solid transparent; font-weight: 500; } .tab.active { border-color: var(--primary); color: var(--primary); } .status-bar { padding: 0.5rem 1rem; text-align: center; font-size: 0.875rem; z-index: 10; } .status-error { background: #fee2e2; color: #991b1b; } .status-warning { background: #fef9c3; color: #854d0e; } .hidden { display: none !important; } .loader { width: 14px; height: 14px; border: 2px solid #fff; border-bottom-color: transparent; border-radius: 50%; display: inline-block; animation: rotation 1s linear infinite; } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @media (max-width: 768px) { .main-container { flex-direction: column; } .contact-panel { width: 100%; } } 

 :root { --primary: #2563eb; --primary-hover: #1d4ed8; --bg-main: #f8fafc; --bg-panel: #ffffff; --text-main: #1e293b; --text-muted: #64748b; --border: #e2e8f0; --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); } .auge-wrapper { font-family: 'Inter', sans-serif; color: var(--text-main); background: var(--bg-main); display: flex; flex-direction: column; min-height: 80vh; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); } header.crm-header { background: white; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; } .brand { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 1.25rem; color: var(--primary); } .header-controls { display: flex; gap: 1rem; flex-grow: 1; justify-content: flex-end; align-items: center; } .search-form { display: flex; gap: 0.5rem; } .search-form input, .filter-select { padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: 0.375rem; font-size: 0.875rem; min-width: 150px; } .main-container { display: flex; flex: 1; overflow: hidden; } .contact-panel { width: 300px; background: white; border-right: 1px solid var(--border); padding: 1.5rem; } .content-area { flex: 1; display: flex; flex-direction: column; background: var(--bg-main); overflow: hidden; } .properties-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; padding: 1.5rem; } /* Estilos de Tarjeta */ .prop-card { background: white; border: 1px solid var(--border); border-radius: 0.75rem; overflow: hidden; box-shadow: var(--shadow); transition: transform 0.2s, box-shadow 0.2s; display: flex; flex-direction: column; } .prop-card:hover { transform: translateY(-4px); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); } .prop-image { width: 100%; height: 180px; background: #e2e8f0; object-fit: cover; } .prop-content { padding: 1rem; flex-grow: 1; } .prop-price { font-size: 1.25rem; font-weight: 800; color: var(--text-main); margin-bottom: 0.25rem; } .prop-meta { font-size: 0.875rem; color: var(--text-muted); display: flex; gap: 0.5rem; margin-bottom: 0.75rem; } /* Modal de Detalles */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 1rem; } .modal-content { background: white; border-radius: 1rem; width: 100%; max-width: 800px; max-height: 90vh; overflow-y: auto; position: relative; padding: 2rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); } .close-modal { position: absolute; top: 1rem; right: 1rem; background: #f1f5f9; border: none; padding: 0.5rem; border-radius: 50%; cursor: pointer; font-weight: bold; } .btn-primary { background: var(--primary); color: white; border: none; padding: 0.625rem; border-radius: 0.375rem; font-weight: 600; cursor: pointer; transition: background 0.2s; } .btn-primary:hover { background: var(--primary-hover); } .status-bar { padding: 0.5rem 1rem; text-align: center; font-size: 0.875rem; z-index: 10; } .status-error { background: #fee2e2; color: #991b1b; } .status-warning { background: #fef9c3; color: #854d0e; } .hidden { display: none !important; } .loader { width: 14px; height: 14px; border: 2px solid #fff; border-bottom-color: transparent; border-radius: 50%; display: inline-block; animation: rotation 1s linear infinite; } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @media (max-width: 768px) { .main-container { flex-direction: column; } .contact-panel { width: 100%; } .modal-content { padding: 1rem; } } 

 :root { --primary: #2563eb; --primary-hover: #1d4ed8; --bg-main: #f8fafc; --bg-panel: #ffffff; --text-main: #1e293b; --text-muted: #64748b; --border: #e2e8f0; --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); } .auge-wrapper { font-family: 'Inter', sans-serif; color: var(--text-main); background: var(--bg-main); display: flex; flex-direction: column; min-height: 80vh; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); } header.crm-header { background: white; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; } .brand { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 1.25rem; color: var(--primary); } .header-controls { display: flex; gap: 1rem; flex-grow: 1; justify-content: flex-end; align-items: center; } .search-form { display: flex; gap: 0.5rem; } .search-form input, .filter-select { padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: 0.375rem; font-size: 0.875rem; min-width: 150px; } .main-container { display: flex; flex: 1; overflow: hidden; } .contact-panel { width: 300px; background: white; border-right: 1px solid var(--border); padding: 1.5rem; } .content-area { flex: 1; display: flex; flex-direction: column; background: var(--bg-main); overflow: hidden; } .properties-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; padding: 1.5rem; } .prop-card { background: white; border: 1px solid var(--border); border-radius: 0.75rem; overflow: hidden; box-shadow: var(--shadow); transition: transform 0.2s, box-shadow 0.2s; display: flex; flex-direction: column; } .prop-card:hover { transform: translateY(-4px); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); } .prop-image { width: 100%; height: 180px; background: #e2e8f0; object-fit: cover; } .prop-content { padding: 1rem; flex-grow: 1; } .prop-title { font-size: 1.125rem; font-weight: 700; color: var(--text-main); line-height: 1.3; margin-bottom: 0.25rem; display: block; } .prop-price { font-size: 0.95rem; font-weight: 600; color: var(--primary); margin-bottom: 0.75rem; } .prop-meta { font-size: 0.8125rem; color: var(--text-muted); display: flex; gap: 0.5rem; margin-bottom: 0.75rem; } .btn-primary { background: var(--primary); color: white; border: none; padding: 0.625rem; border-radius: 0.375rem; font-weight: 600; cursor: pointer; transition: background 0.2s; text-align: center; text-decoration: none; display: inline-block; } .btn-primary:hover { background: var(--primary-hover); } .status-bar { padding: 0.5rem 1rem; text-align: center; font-size: 0.875rem; z-index: 10; } .status-error { background: #fee2e2; color: #991b1b; } .status-warning { background: #fef9c3; color: #854d0e; } .hidden { display: none !important; } .loader { width: 14px; height: 14px; border: 2px solid #fff; border-bottom-color: transparent; border-radius: 50%; display: inline-block; animation: rotation 1s linear infinite; } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @media (max-width: 768px) { .main-container { flex-direction: column; } .contact-panel { width: 100%; } } 

 :root { --primary: #2563eb; --primary-hover: #1d4ed8; --bg-main: #f8fafc; --bg-panel: #ffffff; --text-main: #1e293b; --text-muted: #64748b; --border: #e2e8f0; --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); } .auge-wrapper { font-family: 'Inter', sans-serif; color: var(--text-main); background: var(--bg-main); display: flex; flex-direction: column; min-height: 80vh; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); } header.crm-header { background: white; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; } .brand { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 1.25rem; color: var(--primary); } .header-controls { display: flex; gap: 1rem; flex-grow: 1; justify-content: flex-end; align-items: center; } .search-form { display: flex; gap: 0.5rem; } .search-form input, .filter-select { padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: 0.375rem; font-size: 0.875rem; min-width: 150px; } .main-container { display: flex; flex: 1; overflow: hidden; } .contact-panel { width: 300px; background: white; border-right: 1px solid var(--border); padding: 1.5rem; } .content-area { flex: 1; display: flex; flex-direction: column; background: var(--bg-main); overflow: hidden; } .properties-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; padding: 1.5rem; } .prop-card { background: white; border: 1px solid var(--border); border-radius: 0.75rem; overflow: hidden; box-shadow: var(--shadow); transition: transform 0.2s, box-shadow 0.2s; display: flex; flex-direction: column; } .prop-card:hover { transform: translateY(-4px); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); } .prop-image { width: 100%; height: 180px; background: #e2e8f0; object-fit: cover; } .prop-content { padding: 1rem; flex-grow: 1; } .prop-title { font-size: 1.125rem; font-weight: 700; color: var(--text-main); line-height: 1.3; margin-bottom: 0.25rem; display: block; } .prop-price { font-size: 0.95rem; font-weight: 600; color: var(--primary); margin-bottom: 0.75rem; } .btn-primary { background: var(--primary); color: white; border: none; padding: 0.625rem; border-radius: 0.375rem; font-weight: 600; cursor: pointer; transition: background 0.2s; text-align: center; text-decoration: none; } .btn-primary:hover { background: var(--primary-hover); } .status-bar { padding: 0.5rem 1rem; text-align: center; font-size: 0.875rem; z-index: 10; } .status-error { background: #fee2e2; color: #991b1b; } .status-warning { background: #fef9c3; color: #854d0e; } .hidden { display: none !important; } /* Contenedor para la ficha inyectada por el buscador */ #reportContainer { padding: 1.5rem; background: white; flex: 1; overflow-y: auto; } .loader { width: 14px; height: 14px; border: 2px solid #fff; border-bottom-color: transparent; border-radius: 50%; display: inline-block; animation: rotation 1s linear infinite; } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @media (max-width: 768px) { .main-container { flex-direction: column; } .contact-panel { width: 100%; } } 

 :root { --primary: #2563eb; --primary-hover: #1d4ed8; --bg-main: #f8fafc; --bg-panel: #ffffff; --text-main: #1e293b; --text-muted: #64748b; --border: #e2e8f0; --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); } .auge-wrapper { font-family: 'Inter', sans-serif; color: var(--text-main); background: var(--bg-main); display: flex; flex-direction: column; min-height: 80vh; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); } header.crm-header { background: white; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; } .brand { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 1.25rem; color: var(--primary); } .header-controls { display: flex; gap: 1rem; flex-grow: 1; justify-content: flex-end; align-items: center; } .search-form { display: flex; gap: 0.5rem; } .search-form input, .filter-select { padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: 0.375rem; font-size: 0.875rem; min-width: 180px; } .main-container { display: flex; flex: 1; overflow: hidden; } .contact-panel { width: 300px; background: white; border-right: 1px solid var(--border); padding: 1.5rem; } .content-area { flex: 1; display: flex; flex-direction: column; background: var(--bg-main); overflow: hidden; } .properties-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; padding: 1.5rem; } .prop-card { background: white; border: 1px solid var(--border); border-radius: 0.75rem; overflow: hidden; box-shadow: var(--shadow); transition: transform 0.2s, box-shadow 0.2s; display: flex; flex-direction: column; } .prop-card:hover { transform: translateY(-4px); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); } .prop-image { width: 100%; height: 180px; background: #e2e8f0; object-fit: cover; } .prop-content { padding: 1rem; flex-grow: 1; } .prop-title { font-size: 1.125rem; font-weight: 700; color: var(--text-main); line-height: 1.3; margin-bottom: 0.25rem; display: block; } .prop-price { font-size: 0.95rem; font-weight: 600; color: var(--primary); margin-bottom: 0.75rem; } .btn-primary { background: var(--primary); color: white; border: none; padding: 0.625rem; border-radius: 0.375rem; font-weight: 600; cursor: pointer; transition: background 0.2s; text-align: center; } .btn-primary:hover { background: var(--primary-hover); } .status-bar { padding: 0.5rem 1rem; text-align: center; font-size: 0.875rem; z-index: 10; } .status-error { background: #fee2e2; color: #991b1b; } .status-warning { background: #fef9c3; color: #854d0e; } .hidden { display: none !important; } #reportContainer { padding: 1.5rem; background: white; flex: 1; overflow-y: auto; } .loader { width: 14px; height: 14px; border: 2px solid #fff; border-bottom-color: transparent; border-radius: 50%; display: inline-block; animation: rotation 1s linear infinite; } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @media (max-width: 768px) { .main-container { flex-direction: column; } .contact-panel { width: 100%; } } 

 :root { --primary: #2563eb; --primary-hover: #1d4ed8; --bg-main: #f8fafc; --bg-panel: #ffffff; --text-main: #1e293b; --text-muted: #64748b; --border: #e2e8f0; --shadow: 0 1px 2px rgba(0,0,0,0.05); } * { box-sizing: border-box; } body { margin: 0; background: var(--bg-main); overflow: hidden; } .auge-wrapper { font-family: 'Inter', sans-serif; color: var(--text-main); display: flex; flex-direction: column; height: 100vh; } header.crm-header { background: white; padding: 0.5rem 1rem; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; z-index: 20; } .brand { font-weight: 800; font-size: 1.1rem; color: var(--primary); letter-spacing: -0.5px; } .header-controls { display: flex; gap: 0.5rem; align-items: center; } .search-form { display: flex; gap: 0.4rem; } .search-form input, .filter-select { padding: 0.35rem 0.6rem; border: 1px solid var(--border); border-radius: 0.375rem; font-size: 0.8rem; outline: none; } .main-container { display: flex; flex: 1; overflow: hidden; } /* Panel Lateral */ .contact-panel { width: 260px; background: white; border-right: 1px solid var(--border); display: flex; flex-direction: column; } .panel-scroll { flex: 1; overflow-y: auto; padding: 0.75rem; } .panel-footer { padding: 0.75rem; border-top: 1px solid var(--border); } /* Panel Central */ .content-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: #f1f5f9; } #contentScroll { overflow-y: auto; flex: 1; padding: 0.75rem; } .form-group { margin-bottom: 0.75rem; } /* Etiquetas con enlaces */ .form-label { font-size: 0.6rem; font-weight: 800; color: var(--text-muted); display: block; margin-bottom: 0.2rem; text-transform: uppercase; letter-spacing: 0.5px; } .label-link { color: var(--primary); text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; } .label-link:hover { text-decoration: underline; } .form-input, .phase-select { width: 100%; padding: 0.4rem; border: 1px solid var(--border); border-radius: 4px; font-size: 0.8rem; background: white; } .phase-select { cursor: pointer; font-weight: 600; } /* Colores Fases */ option[value="inicio"] { background: #e2e8f0; } option[value="info"] { background: #d9f99d; } option[value="oferta"] { background: #fef08a; } option[value="pbc"] { background: #fed7aa; } option[value="escrituras"] { background: #ef4444; color: white; } option[value="buscando"] { background: #6d28d9; color: white; } option[value="noInteresado"] { background: #1d4ed8; color: white; } .btn-primary { background: var(--primary); color: white; border: none; padding: 0.4rem 0.8rem; border-radius: 0.375rem; font-weight: 600; font-size: 0.85rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.4rem; } /* Reporte Central */ .lead-report { max-width: 1000px; margin: 0 auto; width: 100%; } .report-card { background: white; border-radius: 6px; padding: 0.75rem; margin-bottom: 0.5rem; border: 1px solid var(--border); shadow: var(--shadow); } .report-grid { display: flex; flex-direction: column; gap: 0.5rem; } .editable-area { width: 100%; min-height: 60px; border: 1px solid transparent; border-radius: 4px; padding: 0.5rem; font-size: 0.9rem; line-height: 1.4; background: #f8fafc; resize: vertical; font-family: inherit; } /* Iframe para vista de Referencia */ #refView { width: 100%; height: 100%; border: none; background: white; } .status-bar { padding: 0.3rem; text-align: center; font-size: 0.7rem; font-weight: 600; display: none; position: absolute; top: 0; width: 100%; z-index: 100; } .status-success { background: #dcfce7; color: #166534; display: block; } .status-error { background: #fee2e2; color: #991b1b; display: block; } .loader { width: 12px; height: 12px; border: 2px solid #fff; border-bottom-color: transparent; border-radius: 50%; animation: rotation 0.8s linear infinite; } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .hidden { display: none !important; } 

 :root { --primary: #2563eb; --primary-hover: #1d4ed8; --bg-main: #f8fafc; --bg-panel: #ffffff; --text-main: #1e293b; --text-muted: #64748b; --border: #e2e8f0; --shadow: 0 1px 2px rgba(0,0,0,0.05); } * { box-sizing: border-box; } body { margin: 0; background: var(--bg-main); font-family: 'Inter', sans-serif; height: 100vh; display: flex; flex-direction: column; overflow: hidden; } /* Cabecera Responsiva y Alineada */ header.crm-header { background: white; padding: 0.6rem 1rem; border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; /* Permite que baje en móviles */ justify-content: space-between; align-items: center; gap: 1rem; z-index: 20; } .brand { font-weight: 800; font-size: 1.1rem; color: var(--primary); letter-spacing: -0.5px; } /* Contenedor central de búsqueda alineado */ .header-controls { flex: 1; display: flex; justify-content: center; /* Centrado horizontal */ align-items: center; gap: 0.5rem; max-width: 800px; /* Evita que se estire demasiado en pantallas gigantes */ } .search-form { display: flex; gap: 0.4rem; width: 100%; max-width: 400px; /* Tamaño ideal buscador */ } .search-form input, .filter-select { flex: 1; padding: 0.45rem 0.75rem; border: 1px solid var(--border); border-radius: 0.375rem; font-size: 0.85rem; outline: none; min-width: 100px; } .main-container { display: flex; flex: 1; overflow: hidden; position: relative; } /* Panel Lateral Adaptable */ .contact-panel { width: 280px; background: white; border-right: 1px solid var(--border); display: flex; flex-direction: column; transition: transform 0.3s ease; } .panel-scroll { flex: 1; overflow-y: auto; padding: 1rem; } .panel-footer { padding: 1rem; border-top: 1px solid var(--border); } /* Panel Central */ .content-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: #f1f5f9; } #contentScroll { overflow-y: auto; flex: 1; padding: 1rem; } .form-group { margin-bottom: 0.85rem; } .form-label { font-size: 0.65rem; font-weight: 800; color: var(--text-muted); display: block; margin-bottom: 0.25rem; text-transform: uppercase; letter-spacing: 0.5px; } .label-link { color: var(--primary); text-decoration: none; cursor: pointer; } .form-input, .phase-select { width: 100%; padding: 0.5rem; border: 1px solid var(--border); border-radius: 4px; font-size: 0.85rem; background: white; } /* Colores Fases */ option[value="inicio"] { background: #e2e8f0; } option[value="info"] { background: #d9f99d; } option[value="oferta"] { background: #fef08a; } option[value="pbc"] { background: #fed7aa; } option[value="escrituras"] { background: #ef4444; color: white; } option[value="buscando"] { background: #6d28d9; color: white; } option[value="noInteresado"] { background: #1d4ed8; color: white; } .btn-primary { background: var(--primary); color: white; border: none; padding: 0.5rem 1rem; border-radius: 0.375rem; font-weight: 600; font-size: 0.85rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.5rem; white-space: nowrap; } /* Rejilla de Reporte Responsiva */ .lead-report { max-width: 1200px; margin: 0 auto; width: 100%; } .report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsivo automático */ gap: 1rem; } .report-card { background: white; border-radius: 8px; padding: 1rem; border: 1px solid var(--border); box-shadow: var(--shadow); height: 100%; display: flex; flex-direction: column; } .editable-area { width: 100%; min-height: 120px; border: 1px solid #f1f5f9; border-radius: 4px; padding: 0.6rem; font-size: 0.9rem; line-height: 1.5; background: #f8fafc; resize: none; font-family: inherit; flex: 1; } #refView { width: 100%; height: 100%; border: none; background: white; border-radius: 8px; } /* Barra de Estado */ .status-bar { padding: 0.4rem; text-align: center; font-size: 0.75rem; font-weight: 600; display: none; position: fixed; top: 0; width: 100%; z-index: 100; } .status-success { background: #dcfce7; color: #166534; display: block; } .status-error { background: #fee2e2; color: #991b1b; display: block; } .loader { width: 14px; height: 14px; border: 2px solid #fff; border-bottom-color: transparent; border-radius: 50%; animation: rotation 0.8s linear infinite; } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .hidden { display: none !important; } /* --- MEDIA QUERIES PARA RESPONSIVE --- */ @media (max-width: 768px) { header.crm-header { flex-direction: column; padding: 1rem; } .header-controls { width: 100%; flex-direction: column; } .search-form { width: 100%; } .filters { width: 100%; } .filter-select { width: 100%; } .main-container { flex-direction: column; overflow-y: auto; } .contact-panel { width: 100%; border-right: none; border-bottom: 1px solid var(--border); } .content-area { min-height: 500px; } .report-grid { grid-template-columns: 1fr; } /* Una columna en móvil */ } 

 :root { --primary: #2563eb; --primary-hover: #1d4ed8; --bg-main: #f8fafc; --bg-panel: #ffffff; --text-main: #1e293b; --text-muted: #64748b; --border: #e2e8f0; --shadow: 0 1px 2px rgba(0,0,0,0.05); } * { box-sizing: border-box; } body { margin: 0; background: var(--bg-main); font-family: 'Inter', sans-serif; height: 100vh; display: flex; flex-direction: column; overflow: hidden; } /* Cabecera Responsiva y Alineada */ header.crm-header { background: white; padding: 0.6rem 1.5rem; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; z-index: 20; } .brand { font-weight: 800; font-size: 1.1rem; color: var(--primary); letter-spacing: -0.5px; min-width: 100px; } /* Contenedor central de búsqueda alineado y centrado */ .header-controls { flex: 1; display: flex; justify-content: center; align-items: center; gap: 0.75rem; } .search-form { display: flex; gap: 0; /* Unimos input y botón visualmente */ width: 100%; max-width: 500px; /* Aumentamos el ancho máximo */ } .search-form input { flex: 1; padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-right: none; /* Quitamos borde derecho para unir con botón */ border-radius: 0.375rem 0 0 0.375rem; font-size: 0.9rem; outline: none; min-width: 280px; /* Asegura espacio para 25+ caracteres */ } .search-form button { padding: 0 1rem; border-radius: 0 0.375rem 0.375rem 0; min-width: 48px; } .filter-select { padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: 0.375rem; font-size: 0.85rem; outline: none; background: white; min-width: 150px; } .main-container { display: flex; flex: 1; overflow: hidden; position: relative; } /* Panel Lateral */ .contact-panel { width: 280px; background: white; border-right: 1px solid var(--border); display: flex; flex-direction: column; } .panel-scroll { flex: 1; overflow-y: auto; padding: 1rem; } .panel-footer { padding: 1rem; border-top: 1px solid var(--border); } /* Panel Central */ .content-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: #f1f5f9; } #contentScroll { overflow-y: auto; flex: 1; padding: 1rem; } .form-group { margin-bottom: 0.85rem; } .form-label { font-size: 0.65rem; font-weight: 800; color: var(--text-muted); display: block; margin-bottom: 0.25rem; text-transform: uppercase; letter-spacing: 0.5px; } .label-link { color: var(--primary); text-decoration: none; cursor: pointer; } .form-input, .phase-select { width: 100%; padding: 0.5rem; border: 1px solid var(--border); border-radius: 4px; font-size: 0.85rem; background: white; } /* Colores Fases */ option[value="inicio"] { background: #e2e8f0; } option[value="info"] { background: #d9f99d; } option[value="oferta"] { background: #fef08a; } option[value="pbc"] { background: #fed7aa; } option[value="escrituras"] { background: #ef4444; color: white; } option[value="buscando"] { background: #6d28d9; color: white; } option[value="noInteresado"] { background: #1d4ed8; color: white; } .btn-primary { background: var(--primary); color: white; border: none; padding: 0.5rem 1rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; } .btn-primary:hover { background: var(--primary-hover); } /* Rejilla de Reporte Responsiva */ .lead-report { max-width: 1200px; margin: 0 auto; width: 100%; } .report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; } .report-card { background: white; border-radius: 8px; padding: 1rem; border: 1px solid var(--border); box-shadow: var(--shadow); } .editable-area { width: 100%; min-height: 120px; border: 1px solid #f1f5f9; border-radius: 4px; padding: 0.6rem; font-size: 0.9rem; line-height: 1.5; background: #f8fafc; resize: none; font-family: inherit; } #refView { width: 100%; height: 100%; border: none; background: white; border-radius: 8px; } /* Barra de Estado */ .status-bar { padding: 0.4rem; text-align: center; font-size: 0.75rem; font-weight: 600; display: none; position: fixed; top: 0; width: 100%; z-index: 100; } .status-success { background: #dcfce7; color: #166534; display: block; } .status-error { background: #fee2e2; color: #991b1b; display: block; } .loader { width: 16px; height: 16px; border: 2px solid #fff; border-bottom-color: transparent; border-radius: 50%; animation: rotation 0.8s linear infinite; } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .hidden { display: none !important; } /* --- MEDIA QUERIES --- */ @media (max-width: 768px) { header.crm-header { flex-direction: column; padding: 1rem; height: auto; } .header-controls { width: 100%; flex-direction: column; } .search-form { width: 100%; max-width: none; } .search-form input { min-width: 0; } .filters { width: 100%; } .filter-select { width: 100%; } .main-container { flex-direction: column; overflow-y: auto; } .contact-panel { width: 100%; border-right: none; border-bottom: 1px solid var(--border); } .content-area { min-height: 600px; } } 

 :root { --primary: #2563eb; --primary-hover: #1d4ed8; --bg-main: #f8fafc; --bg-panel: #ffffff; --text-main: #1e293b; --text-muted: #64748b; --border: #e2e8f0; --shadow: 0 1px 2px rgba(0,0,0,0.05); } * { box-sizing: border-box; } body { margin: 0; background: var(--bg-main); font-family: 'Inter', sans-serif; height: 100vh; display: flex; flex-direction: column; overflow: hidden; } /* Cabecera Responsiva y Alineada */ header.crm-header { background: white; padding: 0.6rem 1.5rem; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; z-index: 20; } .brand { font-weight: 800; font-size: 1.1rem; color: var(--primary); letter-spacing: -0.5px; min-width: 100px; } .header-controls { flex: 1; display: flex; justify-content: center; align-items: center; gap: 0.75rem; } .search-form { display: flex; gap: 0; width: 100%; max-width: 450px; } .search-form input { flex: 1; padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-right: none; border-radius: 0.375rem 0 0 0.375rem; font-size: 0.9rem; outline: none; min-width: 200px; } .search-form button { padding: 0 1rem; border-radius: 0 0.375rem 0.375rem 0; min-width: 48px; } .filters-group { display: flex; gap: 0.5rem; } .filter-select { padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: 0.375rem; font-size: 0.85rem; outline: none; background: white; min-width: 140px; max-width: 180px; } .main-container { display: flex; flex: 1; overflow: hidden; position: relative; } /* Panel Lateral */ .contact-panel { width: 280px; background: white; border-right: 1px solid var(--border); display: flex; flex-direction: column; } .panel-scroll { flex: 1; overflow-y: auto; padding: 1rem; } .panel-footer { padding: 1rem; border-top: 1px solid var(--border); } /* Panel Central */ .content-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: #f1f5f9; } #contentScroll { overflow-y: auto; flex: 1; padding: 1rem; } .form-group { margin-bottom: 0.85rem; } .form-label { font-size: 0.65rem; font-weight: 800; color: var(--text-muted); display: block; margin-bottom: 0.25rem; text-transform: uppercase; letter-spacing: 0.5px; } .label-link { color: var(--primary); text-decoration: none; cursor: pointer; } .form-input, .phase-select { width: 100%; padding: 0.5rem; border: 1px solid var(--border); border-radius: 4px; font-size: 0.85rem; background: white; } .btn-primary { background: var(--primary); color: white; border: none; padding: 0.5rem 1rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; } .btn-primary:hover { background: var(--primary-hover); } /* Rejilla de Reporte */ .lead-report { max-width: 1200px; margin: 0 auto; width: 100%; } .report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; } .report-card { background: white; border-radius: 8px; padding: 1rem; border: 1px solid var(--border); box-shadow: var(--shadow); } .editable-area { width: 100%; min-height: 120px; border: 1px solid #f1f5f9; border-radius: 4px; padding: 0.6rem; font-size: 0.9rem; line-height: 1.5; background: #f8fafc; resize: none; font-family: inherit; } #refView { width: 100%; height: 100%; border: none; background: white; border-radius: 8px; } /* Barra de Estado */ .status-bar { padding: 0.4rem; text-align: center; font-size: 0.75rem; font-weight: 600; display: none; position: fixed; top: 0; width: 100%; z-index: 100; } .status-success { background: #dcfce7; color: #166534; display: block; } .status-error { background: #fee2e2; color: #991b1b; display: block; } .loader { width: 16px; height: 16px; border: 2px solid #fff; border-bottom-color: transparent; border-radius: 50%; animation: rotation 0.8s linear infinite; } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .hidden { display: none !important; } /* --- MEDIA QUERIES --- */ @media (max-width: 1024px) { .header-controls { flex-direction: column; gap: 0.5rem; } .filters-group { width: 100%; justify-content: center; } } @media (max-width: 768px) { header.crm-header { flex-direction: column; padding: 1rem; height: auto; } .search-form { width: 100%; max-width: none; } .filters-group { flex-direction: column; width: 100%; } .filter-select { width: 100%; max-width: none; } .main-container { flex-direction: column; overflow-y: auto; } .contact-panel { width: 100%; border-right: none; border-bottom: 1px solid var(--border); } .content-area { min-height: 600px; } } 

 :root { --primary: #2563eb; --primary-hover: #1d4ed8; --bg-main: #f8fafc; --bg-panel: #ffffff; --text-main: #1e293b; --text-muted: #64748b; --border: #e2e8f0; --shadow: 0 1px 2px rgba(0,0,0,0.05); } * { box-sizing: border-box; } body { margin: 0; background: var(--bg-main); font-family: 'Inter', sans-serif; height: 100vh; display: flex; flex-direction: column; overflow: hidden; } /* Cabecera Responsiva y Alineada */ header.crm-header { background: white; padding: 0.6rem 1.5rem; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; z-index: 20; } .brand { font-weight: 800; font-size: 1.1rem; color: var(--primary); letter-spacing: -0.5px; min-width: 100px; } .header-controls { flex: 1; display: flex; justify-content: center; align-items: center; gap: 0.75rem; } .search-form { display: flex; gap: 0; width: 100%; max-width: 450px; } .search-form input { flex: 1; padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-right: none; border-radius: 0.375rem 0 0 0.375rem; font-size: 0.9rem; outline: none; min-width: 200px; } .search-form button { padding: 0 1rem; border-radius: 0 0.375rem 0.375rem 0; min-width: 48px; } .filters-group { display: flex; gap: 0.5rem; } .filter-select { padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: 0.375rem; font-size: 0.85rem; outline: none; background: white; min-width: 140px; max-width: 180px; } .main-container { display: flex; flex: 1; overflow: hidden; position: relative; } /* Panel Lateral */ .contact-panel { width: 280px; background: white; border-right: 1px solid var(--border); display: flex; flex-direction: column; } .panel-scroll { flex: 1; overflow-y: auto; padding: 1rem; } .panel-footer { padding: 1rem; border-top: 1px solid var(--border); } /* Panel Central */ .content-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: #f1f5f9; } #contentScroll { overflow-y: auto; flex: 1; padding: 1rem; } .form-group { margin-bottom: 0.85rem; } .form-label { font-size: 0.65rem; font-weight: 800; color: var(--text-muted); display: block; margin-bottom: 0.25rem; text-transform: uppercase; letter-spacing: 0.5px; } .label-link { color: var(--primary); text-decoration: none; cursor: pointer; } .form-input, .phase-select { width: 100%; padding: 0.5rem; border: 1px solid var(--border); border-radius: 4px; font-size: 0.85rem; background: white; } .btn-primary { background: var(--primary); color: white; border: none; padding: 0.5rem 1rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; } .btn-primary:hover { background: var(--primary-hover); } /* Rejilla de Reporte */ .lead-report { max-width: 1200px; margin: 0 auto; width: 100%; } .report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; } .report-card { background: white; border-radius: 8px; padding: 1rem; border: 1px solid var(--border); box-shadow: var(--shadow); } .editable-area { width: 100%; min-height: 120px; border: 1px solid #f1f5f9; border-radius: 4px; padding: 0.6rem; font-size: 0.9rem; line-height: 1.5; background: #f8fafc; resize: none; font-family: inherit; } #refView { width: 100%; height: 100%; border: none; background: white; border-radius: 8px; } /* Barra de Estado */ .status-bar { padding: 0.4rem; text-align: center; font-size: 0.75rem; font-weight: 600; display: none; position: fixed; top: 0; width: 100%; z-index: 100; } .status-success { background: #dcfce7; color: #166534; display: block; } .status-error { background: #fee2e2; color: #991b1b; display: block; } .loader { width: 16px; height: 16px; border: 2px solid #fff; border-bottom-color: transparent; border-radius: 50%; animation: rotation 0.8s linear infinite; } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .hidden { display: none !important; } /* --- MEDIA QUERIES --- */ @media (max-width: 1024px) { .header-controls { flex-direction: column; gap: 0.5rem; } .filters-group { width: 100%; justify-content: center; } } @media (max-width: 768px) { header.crm-header { flex-direction: column; padding: 1rem; height: auto; } .search-form { width: 100%; max-width: none; } .filters-group { flex-direction: column; width: 100%; } .filter-select { width: 100%; max-width: none; } .main-container { flex-direction: column; overflow-y: auto; } .contact-panel { width: 100%; border-right: none; border-bottom: 1px solid var(--border); } .content-area { min-height: 600px; } } 

 :root { --primary: #2563eb; --primary-hover: #1d4ed8; --bg-main: #f8fafc; --bg-panel: #ffffff; --text-main: #1e293b; --text-muted: #64748b; --border: #e2e8f0; --shadow: 0 1px 2px rgba(0,0,0,0.05); } * { box-sizing: border-box; } body { margin: 0; background: var(--bg-main); font-family: 'Inter', sans-serif; height: 100vh; display: flex; flex-direction: column; overflow: hidden; } /* Cabecera Corregida */ header.crm-header { background: white; padding: 0.5rem 1.25rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 1rem; z-index: 50; /* Prioridad alta para selectores */ height: 60px; flex-shrink: 0; } .brand { font-weight: 800; font-size: 1.1rem; color: var(--primary); letter-spacing: -0.5px; flex-shrink: 0; } /* Contenedor de controles centralizado y flexible */ .header-controls { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; min-width: 0; /* Evita desbordamiento */ } /* Buscador con proporciones fijas */ .search-form { display: flex; align-items: stretch; width: 100%; max-width: 380px; flex-shrink: 1; } .search-form input { flex: 1; padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-right: none; border-radius: 0.375rem 0 0 0.375rem; font-size: 0.9rem; outline: none; min-width: 0; } .search-form button { width: 46px; /* Ancho fijo para evitar deformación */ height: 38px; border-radius: 0 0.375rem 0.375rem 0; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } /* Grupo de Filtros con espacio garantizado */ .filters-group { display: flex; gap: 0.5rem; flex-shrink: 0; } .filter-select { padding: 0.5rem 0.5rem; border: 1px solid var(--border); border-radius: 0.375rem; font-size: 0.85rem; outline: none; background: white; width: 130px; cursor: pointer; height: 38px; } .filter-select:disabled { background: #f1f5f9; cursor: not-allowed; opacity: 0.7; } .main-container { display: flex; flex: 1; overflow: hidden; position: relative; } /* Panel Lateral */ .contact-panel { width: 280px; background: white; border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; } .panel-scroll { flex: 1; overflow-y: auto; padding: 1rem; } .panel-footer { padding: 1rem; border-top: 1px solid var(--border); } /* Panel Central */ .content-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: #f1f5f9; } #contentScroll { overflow-y: auto; flex: 1; padding: 1rem; } .form-group { margin-bottom: 0.85rem; } .form-label { font-size: 0.65rem; font-weight: 800; color: var(--text-muted); display: block; margin-bottom: 0.25rem; text-transform: uppercase; letter-spacing: 0.5px; } .label-link { color: var(--primary); text-decoration: none; cursor: pointer; } .form-input, .phase-select { width: 100%; padding: 0.5rem; border: 1px solid var(--border); border-radius: 4px; font-size: 0.85rem; background: white; } .btn-primary { background: var(--primary); color: white; border: none; font-weight: 600; cursor: pointer; transition: background 0.2s; } .btn-primary:hover { background: var(--primary-hover); } /* Rejilla de Reporte */ .lead-report { max-width: 1200px; margin: 0 auto; width: 100%; } .report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; } .report-card { background: white; border-radius: 8px; padding: 1rem; border: 1px solid var(--border); box-shadow: var(--shadow); } .editable-area { width: 100%; min-height: 120px; border: 1px solid #f1f5f9; border-radius: 4px; padding: 0.6rem; font-size: 0.9rem; line-height: 1.5; background: #f8fafc; resize: none; font-family: inherit; } #refView { width: 100%; height: 100%; border: none; background: white; border-radius: 8px; } /* Barra de Estado */ .status-bar { padding: 0.4rem; text-align: center; font-size: 0.75rem; font-weight: 600; display: none; position: fixed; top: 0; width: 100%; z-index: 100; } .status-success { background: #dcfce7; color: #166534; display: block; } .status-error { background: #fee2e2; color: #991b1b; display: block; } .loader { width: 16px; height: 16px; border: 2px solid #fff; border-bottom-color: transparent; border-radius: 50%; animation: rotation 0.8s linear infinite; } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .hidden { display: none !important; } /* --- MEDIA QUERIES --- */ @media (max-width: 900px) { header.crm-header { height: auto; flex-wrap: wrap; padding: 0.75rem; } .header-controls { justify-content: space-between; width: 100%; } .search-form { max-width: none; } } @media (max-width: 600px) { .header-controls { flex-direction: column; align-items: stretch; } .filters-group { justify-content: space-between; } .filter-select { flex: 1; } .main-container { flex-direction: column; } .contact-panel { width: 100%; height: 300px; border-right: none; border-bottom: 1px solid var(--border); } } 

 :root { --primary: #2563eb; --primary-hover: #1d4ed8; --bg-main: #f8fafc; --bg-panel: #ffffff; --text-main: #1e293b; --text-muted: #64748b; --border: #e2e8f0; --shadow: 0 1px 2px rgba(0,0,0,0.05); } * { box-sizing: border-box; } body { margin: 0; background: var(--bg-main); font-family: 'Inter', sans-serif; height: 100vh; display: flex; flex-direction: column; overflow: hidden; } header.crm-header { background: white; padding: 0 1.25rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 1rem; z-index: 1000; height: 64px; flex-shrink: 0; } .brand { font-weight: 800; font-size: 1.1rem; color: var(--primary); letter-spacing: -0.5px; flex-shrink: 0; } .header-controls { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; height: 100%; } .search-form { display: flex; align-items: stretch; width: 100%; max-width: 320px; } .search-form input { flex: 1; padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-right: none; border-radius: 0.375rem 0 0 0.375rem; font-size: 0.9rem; outline: none; } .search-form button { width: 44px; height: 38px; border-radius: 0 0.375rem 0.375rem 0; display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; background: var(--primary); color: white; } .filters-group { display: flex; gap: 0.4rem; } .filter-select { padding: 0.4rem 0.5rem; border: 1px solid var(--border); border-radius: 0.375rem; font-size: 0.85rem; background: white; width: 135px; height: 38px; cursor: pointer; } .main-container { display: flex; flex: 1; overflow: hidden; position: relative; } .contact-panel { width: 300px; background: white; border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; } .panel-scroll { flex: 1; overflow-y: auto; padding: 1.25rem; } .panel-footer { padding: 1rem; border-top: 1px solid var(--border); } .content-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: #f1f5f9; } #contentScroll { overflow-y: auto; flex: 1; padding: 1.5rem; } .form-group { margin-bottom: 1rem; } .form-label { font-size: 0.65rem; font-weight: 800; color: var(--text-muted); display: block; margin-bottom: 0.3rem; text-transform: uppercase; } .label-link { color: var(--primary); text-decoration: none; cursor: pointer; } .form-input, .phase-select { width: 100%; padding: 0.6rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.9rem; } .btn-primary { background: var(--primary); color: white; border: none; font-weight: 600; cursor: pointer; border-radius: 0.5rem; padding: 0.75rem; } .report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem; } .report-card { background: white; border-radius: 10px; padding: 1.25rem; border: 1px solid var(--border); } .editable-area { width: 100%; min-height: 140px; border: 1px solid #f1f5f9; border-radius: 6px; padding: 0.75rem; font-size: 0.95rem; background: #f8fafc; resize: none; } #refView { width: 100%; height: 100%; border: none; background: white; border-radius: 12px; } /* DEBUG PANEL */ #debugPanel { background: #1e293b; color: #38bdf8; font-family: 'Courier New', monospace; font-size: 11px; padding: 10px; height: 150px; overflow-y: auto; border-top: 2px solid #334155; } .debug-line { margin-bottom: 4px; border-bottom: 1px solid #334155; padding-bottom: 2px; } .debug-url { color: #fbbf24; } .debug-res { color: #4ade80; } .status-bar { padding: 0.5rem; text-align: center; font-size: 0.8rem; font-weight: 700; display: none; position: fixed; top: 0; width: 100%; z-index: 2000; } .status-success { background: #dcfce7; color: #166534; display: block; } .status-error { background: #fee2e2; color: #991b1b; display: block; } .loader { width: 18px; height: 18px; border: 2px solid #fff; border-bottom-color: transparent; border-radius: 50%; animation: rotation 0.8s linear infinite; } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .hidden { display: none !important; } 

 :root { --primary: #2563eb; --primary-hover: #1d4ed8; --bg-main: #f8fafc; --bg-panel: #ffffff; --text-main: #1e293b; --text-muted: #64748b; --border: #e2e8f0; --shadow: 0 1px 2px rgba(0,0,0,0.05); } * { box-sizing: border-box; } body { margin: 0; background: var(--bg-main); font-family: 'Inter', sans-serif; height: 100vh; display: flex; flex-direction: column; overflow: hidden; } header.crm-header { background: white; padding: 0 1.25rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 1rem; z-index: 1000; height: 64px; flex-shrink: 0; } .brand { font-weight: 800; font-size: 1.1rem; color: var(--primary); letter-spacing: -0.5px; flex-shrink: 0; } .header-controls { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; height: 100%; } .search-form { display: flex; align-items: stretch; width: 100%; max-width: 320px; } .search-form input { flex: 1; padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-right: none; border-radius: 0.375rem 0 0 0.375rem; font-size: 0.9rem; outline: none; } .search-form button { width: 44px; height: 38px; border-radius: 0 0.375rem 0.375rem 0; display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; background: var(--primary); color: white; } .filters-group { display: flex; gap: 0.4rem; } .filter-select { padding: 0.4rem 0.5rem; border: 1px solid var(--border); border-radius: 0.375rem; font-size: 0.85rem; background: white; width: 135px; height: 38px; cursor: pointer; } .main-container { display: flex; flex: 1; overflow: hidden; position: relative; } .contact-panel { width: 300px; background: white; border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; } .panel-scroll { flex: 1; overflow-y: auto; padding: 1.25rem; } .panel-footer { padding: 1rem; border-top: 1px solid var(--border); } .content-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: #f1f5f9; } #contentScroll { overflow-y: auto; flex: 1; padding: 1.5rem; } .form-group { margin-bottom: 1rem; } .form-label { font-size: 0.65rem; font-weight: 800; color: var(--text-muted); display: block; margin-bottom: 0.3rem; text-transform: uppercase; } .label-link { color: var(--primary); text-decoration: none; cursor: pointer; } .form-input, .phase-select { width: 100%; padding: 0.6rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.9rem; } .btn-primary { background: var(--primary); color: white; border: none; font-weight: 600; cursor: pointer; border-radius: 0.5rem; padding: 0.75rem; } .report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem; } .report-card { background: white; border-radius: 10px; padding: 1.25rem; border: 1px solid var(--border); } .editable-area { width: 100%; min-height: 140px; border: 1px solid #f1f5f9; border-radius: 6px; padding: 0.75rem; font-size: 0.95rem; background: #f8fafc; resize: none; } #refView { width: 100%; height: 100%; border: none; background: white; border-radius: 12px; } /* DEBUG PANEL */ #debugPanel { background: #1e293b; color: #38bdf8; font-family: 'Courier New', monospace; font-size: 11px; padding: 10px; height: 150px; overflow-y: auto; border-top: 2px solid #334155; } .debug-line { margin-bottom: 4px; border-bottom: 1px solid #334155; padding-bottom: 2px; } .debug-url { color: #fbbf24; } .debug-res { color: #4ade80; } .status-bar { padding: 0.5rem; text-align: center; font-size: 0.8rem; font-weight: 700; display: none; position: fixed; top: 0; width: 100%; z-index: 2000; } .status-success { background: #dcfce7; color: #166534; display: block; } .status-error { background: #fee2e2; color: #991b1b; display: block; } .loader { width: 18px; height: 18px; border: 2px solid #fff; border-bottom-color: transparent; border-radius: 50%; animation: rotation 0.8s linear infinite; } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .hidden { display: none !important; } 

 :root { --primary: #2563eb; --primary-hover: #1d4ed8; --bg-main: #f8fafc; --bg-panel: #ffffff; --text-main: #1e293b; --text-muted: #64748b; --border: #e2e8f0; --shadow: 0 1px 2px rgba(0,0,0,0.05); } * { box-sizing: border-box; } body { margin: 0; background: var(--bg-main); font-family: 'Inter', sans-serif; height: 100vh; display: flex; flex-direction: column; overflow: hidden; } header.crm-header { background: white; padding: 0 1.25rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 1rem; z-index: 1000; height: 64px; flex-shrink: 0; } .brand { font-weight: 800; font-size: 1.1rem; color: var(--primary); letter-spacing: -0.5px; flex-shrink: 0; } .header-controls { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; height: 100%; } .search-form { display: flex; align-items: stretch; width: 100%; max-width: 320px; } .search-form input { flex: 1; padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-right: none; border-radius: 0.375rem 0 0 0.375rem; font-size: 0.9rem; outline: none; } .search-form button { width: 44px; height: 38px; border-radius: 0 0.375rem 0.375rem 0; display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; background: var(--primary); color: white; } .filters-group { display: flex; gap: 0.4rem; } .filter-select { padding: 0.4rem 0.5rem; border: 1px solid var(--border); border-radius: 0.375rem; font-size: 0.85rem; background: white; width: 135px; height: 38px; cursor: pointer; } .main-container { display: flex; flex: 1; overflow: hidden; position: relative; } .contact-panel { width: 300px; background: white; border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; } .panel-scroll { flex: 1; overflow-y: auto; padding: 1.25rem; } .panel-footer { padding: 1rem; border-top: 1px solid var(--border); } .content-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: #f1f5f9; } #contentScroll { overflow-y: auto; flex: 1; padding: 1.5rem; } .form-group { margin-bottom: 1rem; } .form-label { font-size: 0.65rem; font-weight: 800; color: var(--text-muted); display: block; margin-bottom: 0.3rem; text-transform: uppercase; } .label-link { color: var(--primary); text-decoration: none; cursor: pointer; } .form-input, .phase-select { width: 100%; padding: 0.6rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.9rem; } .btn-primary { background: var(--primary); color: white; border: none; font-weight: 600; cursor: pointer; border-radius: 0.5rem; padding: 0.75rem; } .report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem; } .report-card { background: white; border-radius: 10px; padding: 1.25rem; border: 1px solid var(--border); } .editable-area { width: 100%; min-height: 140px; border: 1px solid #f1f5f9; border-radius: 6px; padding: 0.75rem; font-size: 0.95rem; background: #f8fafc; resize: none; } #refView { width: 100%; height: 100%; border: none; background: white; border-radius: 12px; } /* DEBUG PANEL */ #debugPanel { background: #1e293b; color: #38bdf8; font-family: 'Courier New', monospace; font-size: 11px; padding: 10px; height: 150px; overflow-y: auto; border-top: 2px solid #334155; } .debug-line { margin-bottom: 4px; border-bottom: 1px solid #334155; padding-bottom: 2px; } .debug-url { color: #fbbf24; } .debug-res { color: #4ade80; } .status-bar { padding: 0.5rem; text-align: center; font-size: 0.8rem; font-weight: 700; display: none; position: fixed; top: 0; width: 100%; z-index: 2000; } .status-success { background: #dcfce7; color: #166534; display: block; } .status-error { background: #fee2e2; color: #991b1b; display: block; } .loader { width: 18px; height: 18px; border: 2px solid #fff; border-bottom-color: transparent; border-radius: 50%; animation: rotation 0.8s linear infinite; } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .hidden { display: none !important; } 

 :root { --primary: #2563eb; --primary-hover: #1d4ed8; --bg-main: #f8fafc; --bg-panel: #ffffff; --text-main: #1e293b; --text-muted: #64748b; --border: #e2e8f0; --shadow: 0 1px 2px rgba(0,0,0,0.05); } * { box-sizing: border-box; } body { margin: 0; background: var(--bg-main); font-family: 'Inter', sans-serif; height: 100vh; display: flex; flex-direction: column; overflow: hidden; } header.crm-header { background: white; padding: 0 1.25rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 1rem; z-index: 1000; height: 64px; flex-shrink: 0; } .brand { font-weight: 800; font-size: 1.1rem; color: var(--primary); letter-spacing: -0.5px; flex-shrink: 0; } .header-controls { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; height: 100%; } .search-form { display: flex; align-items: stretch; width: 100%; max-width: 320px; } .search-form input { flex: 1; padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-right: none; border-radius: 0.375rem 0 0 0.375rem; font-size: 0.9rem; outline: none; } .search-form button { width: 44px; height: 38px; border-radius: 0 0.375rem 0.375rem 0; display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; background: var(--primary); color: white; } .filters-group { display: flex; gap: 0.4rem; } .filter-select { padding: 0.4rem 0.5rem; border: 1px solid var(--border); border-radius: 0.375rem; font-size: 0.85rem; background: white; width: 135px; height: 38px; cursor: pointer; } .main-container { display: flex; flex: 1; overflow: hidden; position: relative; } .contact-panel { width: 300px; background: white; border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; } .panel-scroll { flex: 1; overflow-y: auto; padding: 1.25rem; } .panel-footer { padding: 1rem; border-top: 1px solid var(--border); } .content-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: #f1f5f9; } #contentScroll { overflow-y: auto; flex: 1; padding: 1.5rem; } .form-group { margin-bottom: 1rem; } .form-label { font-size: 0.65rem; font-weight: 800; color: var(--text-muted); display: block; margin-bottom: 0.3rem; text-transform: uppercase; } .label-link { color: var(--primary); text-decoration: none; cursor: pointer; } .form-input, .phase-select { width: 100%; padding: 0.6rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.9rem; } .btn-primary { background: var(--primary); color: white; border: none; font-weight: 600; cursor: pointer; border-radius: 0.5rem; padding: 0.75rem; } .report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem; } .report-card { background: white; border-radius: 10px; padding: 1.25rem; border: 1px solid var(--border); } .editable-area { width: 100%; min-height: 140px; border: 1px solid #f1f5f9; border-radius: 6px; padding: 0.75rem; font-size: 0.95rem; background: #f8fafc; resize: none; } #refView { width: 100%; height: 100%; border: none; background: white; border-radius: 12px; } /* DEBUG PANEL (Plegable) */ #debugWrapper { display: flex; flex-direction: column; background: #1e293b; border-top: 2px solid #334155; flex-shrink: 0; transition: height 0.3s ease; } #debugHeader { background: #0f172a; color: #38bdf8; padding: 6px 12px; font-size: 10px; font-weight: bold; cursor: pointer; display: flex; justify-content: space-between; align-items: center; user-select: none; } #debugHeader:hover { background: #1e293b; } #debugPanel { color: #38bdf8; font-family: 'Courier New', monospace; font-size: 11px; padding: 10px; height: 150px; overflow-y: auto; } .debug-line { margin-bottom: 4px; border-bottom: 1px solid #334155; padding-bottom: 2px; } .debug-url { color: #fbbf24; } .debug-res { color: #4ade80; } .status-bar { padding: 0.5rem; text-align: center; font-size: 0.8rem; font-weight: 700; display: none; position: fixed; top: 0; width: 100%; z-index: 2000; } .status-success { background: #dcfce7; color: #166534; display: block; } .status-error { background: #fee2e2; color: #991b1b; display: block; } .loader { width: 18px; height: 18px; border: 2px solid #fff; border-bottom-color: transparent; border-radius: 50%; animation: rotation 0.8s linear infinite; } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .hidden { display: none !important; } 

 :root { --primary: #2563eb; --primary-hover: #1d4ed8; --bg-main: #f8fafc; --bg-panel: #ffffff; --text-main: #1e293b; --text-muted: #64748b; --border: #e2e8f0; --shadow: 0 1px 2px rgba(0,0,0,0.05); } * { box-sizing: border-box; } body { margin: 0; background: var(--bg-main); font-family: 'Inter', sans-serif; height: 100vh; display: flex; flex-direction: column; overflow: hidden; } header.crm-header { background: white; padding: 0 1.25rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 1rem; z-index: 1000; height: 64px; flex-shrink: 0; } .brand-container { display: flex; align-items: baseline; gap: 6px; } .brand { font-weight: 800; font-size: 1.1rem; color: var(--primary); letter-spacing: -0.5px; } .version-tag { font-size: 0.7rem; color: #94a3b8; font-weight: 600; } .header-controls { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; height: 100%; } .search-form { display: flex; align-items: stretch; width: 100%; max-width: 320px; } .search-form input { flex: 1; padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-right: none; border-radius: 0.375rem 0 0 0.375rem; font-size: 0.9rem; outline: none; } .search-form button { width: 44px; height: 38px; border-radius: 0 0.375rem 0.375rem 0; display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; background: var(--primary); color: white; } .filters-group { display: flex; gap: 0.4rem; } .filter-select { padding: 0.4rem 0.5rem; border: 1px solid var(--border); border-radius: 0.375rem; font-size: 0.85rem; background: white; width: 135px; height: 38px; cursor: pointer; } .main-container { display: flex; flex: 1; overflow: hidden; position: relative; } .contact-panel { width: 300px; background: white; border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; } .panel-scroll { flex: 1; overflow-y: auto; padding: 1.25rem; } .panel-footer { padding: 1rem; border-top: 1px solid var(--border); } .content-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: #f1f5f9; } #contentScroll { overflow-y: auto; flex: 1; padding: 1.5rem; } .form-group { margin-bottom: 1rem; } .form-label { font-size: 0.65rem; font-weight: 800; color: var(--text-muted); display: block; margin-bottom: 0.3rem; text-transform: uppercase; } .label-link { color: var(--primary); text-decoration: none; cursor: pointer; } .form-input, .phase-select { width: 100%; padding: 0.6rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.9rem; } .btn-primary { background: var(--primary); color: white; border: none; font-weight: 600; cursor: pointer; border-radius: 0.5rem; padding: 0.75rem; } .report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem; } .report-card { background: white; border-radius: 10px; padding: 1.25rem; border: 1px solid var(--border); } .editable-area { width: 100%; min-height: 140px; border: 1px solid #f1f5f9; border-radius: 6px; padding: 0.75rem; font-size: 0.95rem; background: #f8fafc; resize: none; } #refView { width: 100%; height: 100%; border: none; background: white; border-radius: 12px; } /* DEBUG PANEL */ #debugWrapper { display: flex; flex-direction: column; background: #1e293b; border-top: 2px solid #334155; flex-shrink: 0; } #debugHeader { background: #0f172a; color: #38bdf8; padding: 6px 12px; font-size: 10px; font-weight: bold; cursor: pointer; display: flex; justify-content: space-between; align-items: center; user-select: none; } #debugPanel { color: #38bdf8; font-family: 'Courier New', monospace; font-size: 11px; padding: 10px; height: 150px; overflow-y: auto; } .debug-line { margin-bottom: 4px; border-bottom: 1px solid #334155; padding-bottom: 2px; } .debug-url { color: #fbbf24; } .debug-res { color: #4ade80; } .status-bar { padding: 0.5rem; text-align: center; font-size: 0.8rem; font-weight: 700; display: none; position: fixed; top: 0; width: 100%; z-index: 2000; transition: all 0.3s; } .status-success { background: #dcfce7; color: #166534; display: block; } .status-error { background: #fee2e2; color: #991b1b; display: block; } .loader { width: 18px; height: 18px; border: 2px solid #fff; border-bottom-color: transparent; border-radius: 50%; animation: rotation 0.8s linear infinite; } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .hidden { display: none !important; } 

 :root { --primary: #2563eb; --primary-hover: #1d4ed8; --bg-main: #f8fafc; --bg-panel: #ffffff; --text-main: #1e293b; --text-muted: #64748b; --border: #e2e8f0; --shadow: 0 1px 2px rgba(0,0,0,0.05); } * { box-sizing: border-box; } body { margin: 0; background: var(--bg-main); font-family: 'Inter', sans-serif; height: 100vh; display: flex; flex-direction: column; overflow: hidden; } /* ========================================= CABECERA (HEADER) - BLOQUE PRINCIPAL ========================================= */ header.crm-header { background: white; padding: 0 1.25rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 1rem; z-index: 1000; height: 64px; flex-shrink: 0; } .brand-container { display: flex; align-items: baseline; gap: 6px; } .brand { font-weight: 800; font-size: 1.1rem; color: var(--primary); letter-spacing: -0.5px; } .version-tag { font-size: 0.7rem; color: #94a3b8; font-weight: 600; } .header-controls { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; height: 100%; } .search-form { display: flex; align-items: stretch; width: 100%; max-width: 320px; } .search-form input { flex: 1; padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-right: none; border-radius: 0.375rem 0 0 0.375rem; font-size: 0.9rem; outline: none; } .search-form button { width: 44px; height: 38px; border-radius: 0 0.375rem 0.375rem 0; display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; background: var(--primary); color: white; } .filters-group { display: flex; gap: 0.4rem; } .filter-select { padding: 0.4rem 0.5rem; border: 1px solid var(--border); border-radius: 0.375rem; font-size: 0.85rem; background: white; width: 135px; height: 38px; cursor: pointer; } /* ========================================= CONTENEDOR PRINCIPAL ========================================= */ .main-container { display: flex; flex: 1; overflow: hidden; position: relative; } /* PANEL IZQUIERDO */ .contact-panel { width: 300px; background: white; border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; } .panel-scroll { flex: 1; overflow-y: auto; padding: 1.25rem; } .panel-footer { padding: 1rem; border-top: 1px solid var(--border); } .content-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: #f1f5f9; } #contentScroll { overflow-y: auto; flex: 1; padding: 1.5rem; } .form-group { margin-bottom: 1rem; } .form-label { font-size: 0.65rem; font-weight: 800; color: var(--text-muted); display: block; margin-bottom: 0.3rem; text-transform: uppercase; } /* Estilo para los hipervínculos funcionales */ .label-link { color: var(--primary); text-decoration: none; cursor: pointer; transition: color 0.2s; } .label-link:hover { color: var(--primary-hover); text-decoration: underline; } .form-input, .phase-select { width: 100%; padding: 0.6rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.9rem; } .btn-primary { background: var(--primary); color: white; border: none; font-weight: 600; cursor: pointer; border-radius: 0.5rem; padding: 0.75rem; } .report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem; } .report-card { background: white; border-radius: 10px; padding: 1.25rem; border: 1px solid var(--border); } .editable-area { width: 100%; min-height: 140px; border: 1px solid #f1f5f9; border-radius: 6px; padding: 0.75rem; font-size: 0.95rem; background: #f8fafc; resize: none; } #refView { width: 100%; height: 100%; border: none; background: white; border-radius: 12px; } /* DEBUG PANEL */ #debugWrapper { display: flex; flex-direction: column; background: #1e293b; border-top: 2px solid #334155; flex-shrink: 0; } #debugHeader { background: #0f172a; color: #38bdf8; padding: 6px 12px; font-size: 10px; font-weight: bold; cursor: pointer; display: flex; justify-content: space-between; align-items: center; user-select: none; } #debugPanel { color: #38bdf8; font-family: 'Courier New', monospace; font-size: 11px; padding: 10px; height: 150px; overflow-y: auto; } .debug-line { margin-bottom: 4px; border-bottom: 1px solid #334155; padding-bottom: 2px; } .debug-url { color: #fbbf24; } .debug-res { color: #4ade80; } .status-bar { padding: 0.5rem; text-align: center; font-size: 0.8rem; font-weight: 700; display: none; position: fixed; top: 0; width: 100%; z-index: 2000; transition: all 0.3s; } .status-success { background: #dcfce7; color: #166534; display: block; } .status-error { background: #fee2e2; color: #991b1b; display: block; } .loader { width: 18px; height: 18px; border: 2px solid #fff; border-bottom-color: transparent; border-radius: 50%; animation: rotation 0.8s linear infinite; } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .hidden { display: none !important; } 

 :root { --primary: #2563eb; --primary-hover: #1d4ed8; --bg-main: #f8fafc; --bg-panel: #ffffff; --text-main: #1e293b; --text-muted: #64748b; --border: #e2e8f0; --shadow: 0 1px 2px rgba(0,0,0,0.05); } * { box-sizing: border-box; } body { margin: 0; background: var(--bg-main); font-family: 'Inter', sans-serif; height: 100vh; display: flex; flex-direction: column; overflow: hidden; } /* ========================================= CABECERA (HEADER) - BLOQUE BLOQUEADO ========================================= */ header.crm-header { background: white; padding: 0 1.25rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 1rem; z-index: 1000; height: 64px; flex-shrink: 0; } .brand-container { display: flex; align-items: baseline; gap: 6px; } .brand { font-weight: 800; font-size: 1.1rem; color: var(--primary); letter-spacing: -0.5px; } .version-tag { font-size: 0.7rem; color: #94a3b8; font-weight: 600; } .header-controls { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; height: 100%; } .search-form { display: flex; align-items: stretch; width: 100%; max-width: 320px; } .search-form input { flex: 1; padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-right: none; border-radius: 0.375rem 0 0 0.375rem; font-size: 0.9rem; outline: none; } .search-form button { width: 44px; height: 38px; border-radius: 0 0.375rem 0.375rem 0; display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; background: var(--primary); color: white; } .filters-group { display: flex; gap: 0.4rem; } .filter-select { padding: 0.4rem 0.5rem; border: 1px solid var(--border); border-radius: 0.375rem; font-size: 0.85rem; background: white; width: 135px; height: 38px; cursor: pointer; } /* ========================================= CONTENEDOR PRINCIPAL ========================================= */ .main-container { display: flex; flex: 1; overflow: hidden; position: relative; } /* PANEL IZQUIERDO */ .contact-panel { width: 300px; background: white; border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; } .panel-scroll { flex: 1; overflow-y: auto; padding: 1.25rem; } .panel-footer { padding: 1rem; border-top: 1px solid var(--border); } .content-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: #f1f5f9; } #contentScroll { overflow-y: auto; flex: 1; padding: 1.5rem; } .form-group { margin-bottom: 1rem; } .form-label { font-size: 0.65rem; font-weight: 800; color: var(--text-muted); display: block; margin-bottom: 0.3rem; text-transform: uppercase; } .label-link { color: var(--primary); text-decoration: none; cursor: pointer; transition: color 0.2s; } .label-link:hover { color: var(--primary-hover); text-decoration: underline; } .form-input, .phase-select { width: 100%; padding: 0.6rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.9rem; } .btn-primary { background: var(--primary); color: white; border: none; font-weight: 600; cursor: pointer; border-radius: 0.5rem; padding: 0.75rem; } /* REPORTES ANCHO COMPLETO */ .report-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; max-width: 1000px; margin: 0 auto; } .report-card { background: white; border-radius: 10px; padding: 1.25rem; border: 1px solid var(--border); box-shadow: var(--shadow); transition: all 0.3s ease; } .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; cursor: pointer; } .editable-area { width: 100%; min-height: 80px; border: 1px solid #f1f5f9; border-radius: 6px; padding: 0.75rem; font-size: 0.95rem; background: #f8fafc; resize: vertical; overflow: hidden; } .collapse-btn { background: none; border: none; color: var(--text-muted); font-size: 0.8rem; cursor: pointer; } #refView { width: 100%; height: 100%; border: none; background: white; border-radius: 0; } /* DEBUG PANEL */ #debugWrapper { display: flex; flex-direction: column; background: #1e293b; border-top: 2px solid #334155; flex-shrink: 0; } #debugHeader { background: #0f172a; color: #38bdf8; padding: 6px 12px; font-size: 10px; font-weight: bold; cursor: pointer; display: flex; justify-content: space-between; align-items: center; user-select: none; } #debugPanel { color: #38bdf8; font-family: 'Courier New', monospace; font-size: 11px; padding: 10px; height: 120px; overflow-y: auto; } .debug-line { margin-bottom: 4px; border-bottom: 1px solid #334155; padding-bottom: 2px; } .status-bar { padding: 0.5rem; text-align: center; font-size: 0.8rem; font-weight: 700; display: none; position: fixed; top: 0; width: 100%; z-index: 2000; transition: all 0.3s; } .status-success { background: #dcfce7; color: #166534; display: block; } .status-error { background: #fee2e2; color: #991b1b; display: block; } .loader { width: 18px; height: 18px; border: 2px solid #fff; border-bottom-color: transparent; border-radius: 50%; animation: rotation 0.8s linear infinite; } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .hidden { display: none !important; } .collapsed { height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; margin: 0; pointer-events: none; } 

 :root { --primary: #2563eb; --primary-hover: #1d4ed8; --bg-main: #f8fafc; --bg-panel: #ffffff; --text-main: #1e293b; --text-muted: #64748b; --border: #e2e8f0; --shadow: 0 1px 2px rgba(0,0,0,0.05); --success: #10b981; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg-main); font-family: 'Inter', sans-serif; height: 100vh; display: flex; flex-direction: column; overflow: hidden; } header.crm-header { background: white; padding: 0 1.25rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 1rem; z-index: 1000; height: 64px; flex-shrink: 0; } .brand-container { display: flex; align-items: baseline; gap: 6px; } .brand { font-weight: 800; font-size: 1.1rem; color: var(--primary); letter-spacing: -0.5px; } .version-tag { font-size: 0.7rem; color: #94a3b8; font-weight: 600; } .header-controls { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; height: 100%; } .search-form { display: flex; align-items: stretch; width: 100%; max-width: 320px; } .search-form input { flex: 1; padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-right: none; border-radius: 0.375rem 0 0 0.375rem; font-size: 0.9rem; outline: none; } .search-form button { width: 44px; height: 38px; border-radius: 0 0.375rem 0.375rem 0; display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; background: var(--primary); color: white; } .main-container { display: flex; flex: 1; overflow: hidden; position: relative; } .contact-panel { width: 300px; background: white; border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; } .panel-scroll { flex: 1; overflow-y: auto; padding: 1.25rem; } .panel-footer { padding: 1rem; border-top: 1px solid var(--border); } .content-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: #f1f5f9; } #contentScroll { overflow-y: auto; flex: 1; padding: 1rem; } .form-group { margin-bottom: 0.75rem; } .form-label { font-size: 0.65rem; font-weight: 800; color: var(--text-muted); display: block; margin-bottom: 0.2rem; text-transform: uppercase; } .label-link { color: var(--primary); text-decoration: none; cursor: pointer; transition: color 0.2s; } .label-link:hover { color: var(--primary-hover); text-decoration: underline; } .form-input, .phase-select { width: 100%; padding: 0.5rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.85rem; } .btn-primary { background: var(--primary); color: white; border: none; font-weight: 600; cursor: pointer; border-radius: 0.5rem; padding: 0.75rem; transition: background 0.2s; } .btn-primary:hover { background: var(--primary-hover); } /* REPORT CARDS v1.6 */ .report-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; max-width: 1200px; margin: 0 auto; } .report-card { background: white; border-radius: 8px; padding: 0.5rem 0.75rem; border: 1px solid var(--border); box-shadow: var(--shadow); } .card-header { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; padding: 2px 0; } .card-header .form-label { margin-bottom: 0; flex: 1; } .triangle-icon { font-size: 10px; color: var(--primary); transition: transform 0.2s; display: inline-block; width: 12px; } .report-card.is-collapsed .triangle-icon { transform: rotate(-90deg); } .card-content { margin-top: 0.5rem; overflow: hidden; } .report-card.is-collapsed .card-content { display: none !important; } .editable-area { width: 100%; min-height: 40px; border: 1px solid transparent; border-radius: 4px; padding: 0.25rem 0.5rem; font-size: 0.9rem; background: transparent; resize: none; overflow: hidden; display: block; color: var(--text-main); line-height: 1.5; outline: none; } /* Áreas editables tienen un fondo ligero para distinguirse */ .is-editable .editable-area { background: #f8fafc; border-color: #f1f5f9; resize: vertical; } .card-actions { display: flex; justify-content: flex-end; margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px dashed var(--border); } .btn-action { background: var(--success); color: white; border: none; font-size: 0.7rem; font-weight: 700; padding: 4px 10px; border-radius: 4px; cursor: pointer; text-transform: uppercase; } #refView { width: 100%; height: 100%; border: none; background: white; } /* DEBUG */ #debugWrapper { display: flex; flex-direction: column; background: #1e293b; border-top: 2px solid #334155; } #debugHeader { background: #0f172a; color: #38bdf8; padding: 6px 12px; font-size: 10px; font-weight: bold; cursor: pointer; display: flex; justify-content: space-between; } #debugPanel { color: #38bdf8; font-family: monospace; font-size: 11px; padding: 10px; height: 100px; overflow-y: auto; } .status-bar { padding: 0.5rem; text-align: center; font-size: 0.8rem; font-weight: 700; display: none; position: fixed; top: 0; width: 100%; z-index: 2000; } .status-success { background: #dcfce7; color: #166534; display: block; } .status-error { background: #fee2e2; color: #991b1b; display: block; } .loader { width: 18px; height: 18px; border: 2px solid #fff; border-bottom-color: transparent; border-radius: 50%; animation: rotation 0.8s linear infinite; } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .hidden { display: none !important; } 

 :root { --primary: #2563eb; --primary-hover: #1d4ed8; --bg-main: #f1f5f9; --bg-panel: #ffffff; --text-main: #1e293b; --text-muted: #64748b; --border: #e2e8f0; --shadow: 0 1px 2px rgba(0,0,0,0.05); --whatsapp: #25d366; --ia-color: #8b5cf6; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg-main); font-family: 'Inter', sans-serif; height: 100vh; display: flex; flex-direction: column; overflow: hidden; color: var(--text-main); } header.crm-header { background: white; padding: 0 0.75rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 0.75rem; z-index: 1000; height: 48px; flex-shrink: 0; } .header-left { display: flex; align-items: center; gap: 0.5rem; } .btn-save-header { background: none; border: none; color: var(--primary); cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center; transition: transform 0.2s; } .btn-save-header:hover { transform: scale(1.1); } .brand-box { display: flex; align-items: baseline; gap: 0.3rem; } .brand { font-weight: 800; font-size: 1rem; color: var(--primary); letter-spacing: -0.5px; } .version-tag { font-size: 0.65rem; color: var(--text-muted); font-weight: 500; } .header-controls { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 0.4rem; } .search-form { display: flex; align-items: stretch; width: 220px; } .search-form input { flex: 1; padding: 0.35rem 0.5rem; border: 1px solid var(--border); border-right: none; border-radius: 4px 0 0 4px; font-size: 0.8rem; outline: none; } .search-form button { padding: 0 0.5rem; border-radius: 0 4px 4px 0; border: none; background: var(--primary); color: white; cursor: pointer; display: flex; align-items: center; } .header-select { padding: 0.35rem; border: 1px solid var(--border); border-radius: 4px; font-size: 0.8rem; background: white; width: 110px; cursor: pointer; outline: none; } .main-container { display: flex; flex: 1; overflow: hidden; } /* PANEL IZQUIERDO */ .contact-panel { width: 240px; background: white; border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; } .panel-scroll { flex: 1; overflow-y: auto; padding: 0.75rem; } .content-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; } #contentScroll { overflow-y: auto; flex: 1; padding: 0.75rem; } .form-group { margin-bottom: 0.6rem; } .form-label { font-size: 0.6rem; font-weight: 800; color: var(--text-muted); display: block; margin-bottom: 0.15rem; text-transform: uppercase; } .label-link { color: var(--primary); text-decoration: none; cursor: pointer; } .label-link:hover { text-decoration: underline; } .form-input, .phase-select { width: 100%; padding: 0.35rem 0.5rem; border: 1px solid var(--border); border-radius: 4px; font-size: 0.8rem; background: #fff; outline: none; } /* TARJETAS COLAPSABLES */ .report-grid { display: grid; grid-template-columns: 1fr; gap: 0.6rem; max-width: 1000px; margin: 0 auto; } .report-card { background: white; border-radius: 6px; border: 1px solid var(--border); box-shadow: var(--shadow); overflow: hidden; } .card-header { padding: 0.5rem 0.75rem; background: #fafafa; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .card-title { font-size: 0.65rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; } .card-body { padding: 0.5rem 0.75rem; position: relative; } .collapsed .card-body { display: none; } .editable-area { width: 100%; min-height: 40px; border: 1px solid transparent; padding: 0.25rem; font-size: 0.85rem; background: transparent; resize: vertical; outline: none; line-height: 1.4; color: var(--text-main); } .is-editable .editable-area { background: #f8fafc; border: 1px solid #f1f5f9; border-radius: 4px; } /* BOTONES DE ACCIÓN */ .card-actions { display: flex; gap: 0.5rem; position: absolute; top: 0.5rem; right: 0.75rem; } .action-btn { background: white; border: 1px solid var(--border); border-radius: 4px; padding: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); } .action-btn:hover { background: #f8fafc; } .btn-ia { color: var(--ia-color); } .btn-ws { color: var(--whatsapp); } /* PANEL LOGS */ #logPanel { background: #1e293b; border-top: 1px solid #0f172a; flex-shrink: 0; } .log-header { padding: 4px 10px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; background: #0f172a; color: #64748b; font-size: 9px; font-weight: 700; } #debugContent { height: 80px; overflow-y: auto; padding: 6px; font-family: monospace; font-size: 9px; color: #38bdf8; } .collapsed-logs #debugContent { display: none; } .status-bar { padding: 0.35rem; text-align: center; font-size: 0.75rem; font-weight: 700; display: none; width: 100%; position: absolute; top: 0; left: 0; z-index: 1001; } .status-success { background: #dcfce7; color: #166534; display: block; } .loader { width: 12px; height: 12px; border: 2px solid #fff; border-bottom-color: transparent; border-radius: 50%; animation: rotation 1s linear infinite; } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .hidden { display: none !important; } 

 :root { --primary: #2563eb; --primary-hover: #1d4ed8; --bg-main: #f1f5f9; --bg-panel: #ffffff; --text-main: #1e293b; --text-muted: #64748b; --border: #e2e8f0; --shadow: 0 1px 2px rgba(0,0,0,0.05); --whatsapp: #25d366; --ia-color: #8b5cf6; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg-main); font-family: 'Inter', sans-serif; height: 100vh; display: flex; flex-direction: column; overflow: hidden; color: var(--text-main); } header.crm-header { background: white; padding: 0 0.75rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 0.75rem; z-index: 1000; height: 48px; flex-shrink: 0; } .header-left { display: flex; align-items: center; gap: 0.5rem; } .btn-save-header { background: none; border: none; color: var(--primary); cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center; transition: transform 0.2s; } .btn-save-header:hover { transform: scale(1.1); } .brand-box { display: flex; align-items: baseline; gap: 0.3rem; } .brand { font-weight: 800; font-size: 1rem; color: var(--primary); letter-spacing: -0.5px; } .version-tag { font-size: 0.65rem; color: var(--text-muted); font-weight: 500; } .header-controls { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 0.4rem; } .search-form { display: flex; align-items: stretch; width: 220px; } .search-form input { flex: 1; padding: 0.35rem 0.5rem; border: 1px solid var(--border); border-right: none; border-radius: 4px 0 0 4px; font-size: 0.8rem; outline: none; } .search-form button { padding: 0 0.5rem; border-radius: 0 4px 4px 0; border: none; background: var(--primary); color: white; cursor: pointer; display: flex; align-items: center; } .header-select { padding: 0.35rem; border: 1px solid var(--border); border-radius: 4px; font-size: 0.8rem; background: white; width: 120px; cursor: pointer; outline: none; } .main-container { display: flex; flex: 1; overflow: hidden; } /* PANEL IZQUIERDO */ .contact-panel { width: 240px; background: white; border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; } .panel-scroll { flex: 1; overflow-y: auto; padding: 0.75rem; } .content-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; } #contentScroll { overflow-y: auto; flex: 1; padding: 0.75rem; } .form-group { margin-bottom: 0.6rem; } .form-label { font-size: 0.6rem; font-weight: 800; color: var(--text-muted); display: block; margin-bottom: 0.15rem; text-transform: uppercase; } .label-link { color: var(--primary); text-decoration: none; cursor: pointer; } .label-link:hover { text-decoration: underline; } .form-input, .phase-select { width: 100%; padding: 0.35rem 0.5rem; border: 1px solid var(--border); border-radius: 4px; font-size: 0.8rem; background: #fff; outline: none; } /* TARJETAS COLAPSABLES */ .report-grid { display: grid; grid-template-columns: 1fr; gap: 0.6rem; max-width: 1000px; margin: 0 auto; } .report-card { background: white; border-radius: 6px; border: 1px solid var(--border); box-shadow: var(--shadow); overflow: hidden; } .card-header { padding: 0.5rem 0.75rem; background: #fafafa; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .card-title { font-size: 0.65rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; } .card-body { padding: 0.5rem 0.75rem; position: relative; } .collapsed .card-body { display: none; } .editable-area { width: 100%; min-height: 40px; border: 1px solid transparent; padding: 0.25rem; font-size: 0.85rem; background: transparent; resize: vertical; outline: none; line-height: 1.4; color: var(--text-main); } .is-editable .editable-area { background: #f8fafc; border: 1px solid #f1f5f9; border-radius: 4px; } /* BOTONES DE ACCIÓN */ .card-actions { display: flex; gap: 0.5rem; position: absolute; top: 0.5rem; right: 0.75rem; } .action-btn { background: white; border: 1px solid var(--border); border-radius: 4px; padding: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); } .action-btn:hover { background: #f8fafc; } .btn-ia { color: var(--ia-color); } .btn-ws { color: var(--whatsapp); } /* PANEL LOGS */ #logPanel { background: #1e293b; border-top: 1px solid #0f172a; flex-shrink: 0; } .log-header { padding: 4px 10px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; background: #0f172a; color: #64748b; font-size: 9px; font-weight: 700; } #debugContent { height: 80px; overflow-y: auto; padding: 6px; font-family: monospace; font-size: 9px; color: #38bdf8; } .collapsed-logs #debugContent { display: none; } .status-bar { padding: 0.35rem; text-align: center; font-size: 0.75rem; font-weight: 700; display: none; width: 100%; position: absolute; top: 0; left: 0; z-index: 1001; } .status-success { background: #dcfce7; color: #166534; display: block; } .status-error { background: #fecaca; color: #991b1b; display: block; } .loader { width: 12px; height: 12px; border: 2px solid #fff; border-bottom-color: transparent; border-radius: 50%; animation: rotation 1s linear infinite; } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .hidden { display: none !important; } 

 :root { --primary: #2563eb; --primary-hover: #1d4ed8; --bg-main: #f1f5f9; --bg-panel: #ffffff; --text-main: #1e293b; --text-muted: #64748b; --border: #e2e8f0; --shadow: 0 1px 3px rgba(0,0,0,0.1); --whatsapp: #25d366; --ia-color: #8b5cf6; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg-main); font-family: 'Inter', system-ui, sans-serif; height: 100vh; display: flex; flex-direction: column; overflow: hidden; color: var(--text-main); } header.crm-header { background: white; padding: 0 1rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; z-index: 1000; height: 56px; flex-shrink: 0; flex-wrap: wrap; } .header-left { display: flex; align-items: center; gap: 0.75rem; } .brand-box { display: flex; align-items: baseline; gap: 0.3rem; } .brand { font-weight: 800; font-size: 1.1rem; color: var(--primary); letter-spacing: -0.5px; } .version-tag { font-size: 0.6rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; } .header-controls { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .search-form { display: flex; align-items: stretch; min-width: 200px; } .search-form input { flex: 1; padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-right: none; border-radius: 6px 0 0 6px; font-size: 0.85rem; outline: none; } .search-form button { padding: 0 0.75rem; border-radius: 0 6px 6px 0; border: none; background: var(--primary); color: white; cursor: pointer; display: flex; align-items: center; } .header-select { padding: 0.5rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.85rem; background: white; width: 130px; cursor: pointer; outline: none; } .main-container { display: flex; flex: 1; overflow: hidden; position: relative; } /* PANEL IZQUIERDO MINIMALISTA */ .contact-panel { width: 260px; background: white; border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; padding: 0; } .panel-scroll { flex: 1; overflow-y: auto; padding: 1rem 0.5rem; } .content-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; } #contentScroll { overflow-y: auto; flex: 1; padding: 1rem; } .form-group { margin-bottom: 0.75rem; padding: 0 0.25rem; } .form-label { font-size: 0.65rem; font-weight: 800; color: var(--text-muted); display: block; margin-bottom: 0.25rem; text-transform: uppercase; letter-spacing: 0.025em; } .label-link { color: var(--primary); text-decoration: none; cursor: pointer; } .form-input, .phase-select { width: 100%; padding: 0.6rem 0.75rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.9rem; background: #fff; outline: none; transition: border-color 0.2s; } .form-input:focus { border-color: var(--primary); } /* TARJETAS */ .report-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; max-width: 900px; margin: 0 auto; width: 100%; } .report-card { background: white; border-radius: 8px; border: 1px solid var(--border); box-shadow: var(--shadow); overflow: hidden; } .card-header { padding: 0.75rem 1rem; background: #fafafa; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .card-title { font-size: 0.7rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; } .card-body { padding: 0.75rem 1rem; position: relative; } .collapsed .card-body { display: none; } .editable-area { width: 100%; min-height: 60px; border: 1px solid transparent; padding: 0.5rem; font-size: 0.95rem; background: transparent; resize: vertical; outline: none; line-height: 1.5; color: var(--text-main); } .is-editable .editable-area { background: #f8fafc; border: 1px solid #f1f5f9; border-radius: 6px; } /* ACCIONES */ .card-actions { display: flex; gap: 0.5rem; position: absolute; top: 0.75rem; right: 1rem; z-index: 10; } .action-btn { background: white; border: 1px solid var(--border); border-radius: 6px; padding: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); } .btn-ia { color: var(--ia-color); } .btn-ws { color: var(--whatsapp); } /* LOGS */ #logPanel { background: #0f172a; border-top: 1px solid #1e293b; flex-shrink: 0; transition: height 0.3s; } .log-header { padding: 6px 12px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; color: #94a3b8; font-size: 10px; font-weight: 700; text-transform: uppercase; } #debugContent { height: 100px; overflow-y: auto; padding: 8px 12px; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #38bdf8; line-height: 1.4; } .collapsed-logs #debugContent { display: none; } .status-bar { padding: 0.5rem; text-align: center; font-size: 0.85rem; font-weight: 700; display: none; width: 100%; position: absolute; top: 0; left: 0; z-index: 1100; } .status-success { background: #dcfce7; color: #166534; display: block; } .status-error { background: #fecaca; color: #991b1b; display: block; } .loader { width: 14px; height: 14px; border: 2px solid #fff; border-bottom-color: transparent; border-radius: 50%; animation: rotation 1s linear infinite; } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .hidden { display: none !important; } /* RESPONSIVE */ @media (max-width: 768px) { .main-container { flex-direction: column; } .contact-panel { width: 100%; height: auto; border-right: none; border-bottom: 1px solid var(--border); } .header-controls { justify-content: center; padding-bottom: 0.5rem; } header.crm-header { height: auto; padding: 0.5rem; } .search-form { width: 100%; } } 

 :root { --primary: #2563eb; --primary-hover: #1d4ed8; --bg-main: #f1f5f9; --bg-panel: #ffffff; --text-main: #1e293b; --text-muted: #64748b; --border: #e2e8f0; --shadow: 0 1px 3px rgba(0,0,0,0.1); --whatsapp: #25d366; --ia-color: #8b5cf6; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg-main); font-family: 'Inter', system-ui, sans-serif; height: 100vh; display: flex; flex-direction: column; overflow: hidden; color: var(--text-main); } header.crm-header { background: white; padding: 0 1rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; z-index: 1000; height: 56px; flex-shrink: 0; flex-wrap: wrap; } .header-left { display: flex; align-items: center; gap: 0.75rem; } .brand-box { display: flex; align-items: baseline; gap: 0.3rem; } .brand { font-weight: 800; font-size: 1.1rem; color: var(--primary); letter-spacing: -0.5px; } .version-tag { font-size: 0.6rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; } .header-controls { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .search-form { display: flex; align-items: stretch; min-width: 200px; } .search-form input { flex: 1; padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-right: none; border-radius: 6px 0 0 6px; font-size: 0.85rem; outline: none; } .search-form button { padding: 0 0.75rem; border-radius: 0 6px 6px 0; border: none; background: var(--primary); color: white; cursor: pointer; display: flex; align-items: center; } .header-select { padding: 0.5rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.85rem; background: white; width: 130px; cursor: pointer; outline: none; } .main-container { display: flex; flex: 1; overflow: hidden; position: relative; } /* PANEL IZQUIERDO */ .contact-panel { width: 260px; background: white; border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; padding: 0; } .panel-scroll { flex: 1; overflow-y: auto; padding: 1rem 0.5rem; } .content-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; } #contentScroll { overflow-y: auto; flex: 1; padding: 1rem; } .form-group { margin-bottom: 0.75rem; padding: 0 0.25rem; } .form-label { font-size: 0.65rem; font-weight: 800; color: var(--text-muted); display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.25rem; text-transform: uppercase; letter-spacing: 0.025em; } .label-link { color: var(--primary); text-decoration: none; cursor: pointer; } /* Botones de acción en etiquetas */ .label-action-btn { background: none; border: none; color: var(--primary); cursor: pointer; padding: 2px; display: flex; align-items: center; border-radius: 4px; transition: background 0.2s; } .label-action-btn:hover { background: #eff6ff; } .form-input, .phase-select { width: 100%; padding: 0.65rem 0.75rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.9rem; background: #fff; outline: none; transition: border-color 0.2s; } .form-input:focus { border-color: var(--primary); } /* TARJETAS */ .report-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; max-width: 900px; margin: 0 auto; width: 100%; } .report-card { background: white; border-radius: 8px; border: 1px solid var(--border); box-shadow: var(--shadow); overflow: hidden; } .card-header { padding: 0.75rem 1rem; background: #fafafa; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .card-title { font-size: 0.7rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; } .card-body { padding: 0.75rem 1rem; position: relative; } .collapsed .card-body { display: none; } .editable-area { width: 100%; min-height: 60px; border: 1px solid transparent; padding: 0.5rem; font-size: 0.95rem; background: transparent; resize: vertical; outline: none; line-height: 1.5; color: var(--text-main); } .is-editable .editable-area { background: #f8fafc; border: 1px solid #f1f5f9; border-radius: 6px; } /* ACCIONES */ .card-actions { display: flex; gap: 0.5rem; position: absolute; top: 0.75rem; right: 1rem; z-index: 10; } .action-btn { background: white; border: 1px solid var(--border); border-radius: 6px; padding: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); } .btn-ia { color: var(--ia-color); } .btn-ws { color: var(--whatsapp); } /* LOGS */ #logPanel { background: #0f172a; border-top: 1px solid #1e293b; flex-shrink: 0; transition: height 0.3s; } .log-header { padding: 6px 12px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; color: #94a3b8; font-size: 10px; font-weight: 700; text-transform: uppercase; } #debugContent { height: 100px; overflow-y: auto; padding: 8px 12px; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #38bdf8; line-height: 1.4; } .collapsed-logs #debugContent { display: none; } .status-bar { padding: 0.5rem; text-align: center; font-size: 0.85rem; font-weight: 700; display: none; width: 100%; position: absolute; top: 0; left: 0; z-index: 1100; } .status-success { background: #dcfce7; color: #166534; display: block; } .status-error { background: #fecaca; color: #991b1b; display: block; } .loader { width: 14px; height: 14px; border: 2px solid #fff; border-bottom-color: transparent; border-radius: 50%; animation: rotation 1s linear infinite; } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .hidden { display: none !important; } /* RESPONSIVE */ @media (max-width: 768px) { .main-container { flex-direction: column; } .contact-panel { width: 100%; height: auto; border-right: none; border-bottom: 1px solid var(--border); } .header-controls { justify-content: center; padding-bottom: 0.5rem; width: 100%; } header.crm-header { height: auto; padding: 0.5rem; } .search-form { width: 100%; margin-top: 5px; } .header-select { flex: 1; } } 

 :root { --primary: #2563eb; --primary-hover: #1d4ed8; --bg-main: #f1f5f9; --bg-panel: #ffffff; --text-main: #1e293b; --text-muted: #64748b; --border: #e2e8f0; --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --whatsapp: #25d366; --ia-color: #8b5cf6; --section-bg: #ffffff; } * { box-sizing: border-box; } /* Minimalist Scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 10px; } ::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 10px; border: 2px solid #f1f5f9; } ::-webkit-scrollbar-thumb:hover { background: #64748b; } /* Target specific scroll areas for consistency */ .panel-scroll, #contentScroll { scrollbar-width: auto; scrollbar-color: #94a3b8 #f1f5f9; } body { margin: 0; background: var(--bg-main); font-family: 'Inter', system-ui, sans-serif; height: 100vh; display: flex; flex-direction: column; overflow: hidden; color: var(--text-main); } header.crm-header { background: white; padding: 0 1.5rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; z-index: 1000; height: 64px; flex-shrink: 0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } .header-left { display: flex; align-items: center; gap: 1rem; } .brand-box { display: flex; align-items: baseline; gap: 0.4rem; } .brand { font-weight: 800; font-size: 1.25rem; color: var(--primary); letter-spacing: -0.025em; } .version-tag { font-size: 0.7rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; background: #f1f5f9; padding: 2px 6px; border-radius: 4px; } .header-controls { display: flex; align-items: center; gap: 0.75rem; } .search-form { display: flex; align-items: stretch; min-width: 250px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); border-radius: 8px; overflow: hidden; } .search-form input { flex: 1; padding: 0.6rem 1rem; border: 1px solid var(--border); border-right: none; border-radius: 8px 0 0 8px; font-size: 0.9rem; outline: none; transition: border-color 0.2s; } .search-form input:focus { border-color: var(--primary); } .search-form button { padding: 0 1rem; border: none; background: var(--primary); color: white; cursor: pointer; display: flex; align-items: center; transition: background 0.2s; } .search-form button:hover { background: var(--primary-hover); } .header-select { padding: 0.6rem; border: 1px solid var(--border); border-radius: 8px; font-size: 0.9rem; background: white; width: 150px; cursor: pointer; outline: none; transition: border-color 0.2s; } .header-select:focus { border-color: var(--primary); } .main-container { display: flex; flex: 1; overflow: hidden; position: relative; } /* PANEL IZQUIERDO */ .contact-panel { width: 300px; background: white; border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; height: 100%; overflow: hidden; } .panel-scroll { flex: 1; overflow-y: scroll; padding: 1.5rem 1rem; } .content-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; height: 100%; background: #f8fafc; } #contentScroll { flex: 1; overflow-y: scroll; padding: 1.5rem; display: flex; flex-direction: column; gap: 2rem; scroll-behavior: smooth; } /* MAIN SECTIONS (ACCORDIONS) */ .main-section { background: var(--section-bg); border-radius: 12px; border: 1px solid var(--border); box-shadow: var(--shadow); overflow: hidden; transition: all 0.3s ease; } .section-header { padding: 1rem 1.5rem; background: #ffffff; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none; transition: background 0.2s; } .section-header:hover { background: #fcfcfc; } .section-header h2 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--text-main); display: flex; align-items: center; gap: 0.75rem; } .section-header .toggle-icon { color: var(--text-muted); transition: transform 0.3s ease; } .main-section.collapsed .section-header { border-bottom-color: transparent; } .main-section.collapsed .toggle-icon { transform: rotate(-90deg); } .section-body { padding: 1.5rem; transition: max-height 0.3s ease-out; } .main-section.collapsed .section-body { display: none; } /* INTERNAL CARDS (Contacto Section) */ .report-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } .report-card { background: #fdfdfd; border-radius: 8px; border: 1px solid var(--border); overflow: hidden; } .card-header { padding: 0.75rem 1rem; background: #f8fafc; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .card-title { font-size: 0.75rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .card-body { padding: 1rem; position: relative; } .report-card.collapsed .card-body { display: none; } .editable-area { width: 100%; min-height: 80px; border: 1px solid transparent; padding: 0.5rem; font-size: 0.95rem; background: transparent; resize: vertical; outline: none; line-height: 1.6; color: var(--text-main); } .is-editable .editable-area { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 0.75rem; } .is-editable .editable-area:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } /* PARCELA (Iframe) */ #iframeWrapper { width: 100%; height: 600px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } /* FICHAS (Vertical Grid) */ .inmuebles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; } .inmueble-card { background: white; border-radius: 12px; border: 1px solid var(--border); overflow: hidden; transition: all 0.3s ease; display: flex; flex-direction: column; cursor: pointer; position: relative; } .inmueble-card:hover { transform: translateY(-4px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); border-color: var(--primary); } .inmueble-img { height: 180px; position: relative; overflow: hidden; } .inmueble-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .inmueble-card:hover .inmueble-img img { transform: scale(1.05); } .inmueble-content { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; } .inmueble-price { font-size: 1.25rem; font-weight: 800; color: var(--text-main); } .inmueble-ref { font-size: 0.75rem; color: var(--primary); font-weight: 700; background: #eff6ff; padding: 2px 8px; border-radius: 4px; } .inmueble-title { font-size: 0.9rem; font-weight: 600; color: var(--text-main); line-height: 1.4; min-height: 2.8em; } .inmueble-features { border-top: 1px solid #f1f5f9; padding-top: 0.75rem; margin-top: 0.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; font-size: 0.75rem; color: var(--text-muted); } /* FORMS & INPUTS (Left Panel) */ .form-group { margin-bottom: 1.25rem; } .form-label { font-size: 0.7rem; font-weight: 700; color: var(--text-muted); display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 0.05em; } .form-input, .phase-select { width: 100%; padding: 0.65rem 0.85rem; border: 1px solid var(--border); border-radius: 8px; font-size: 0.9rem; background: #fff; outline: none; transition: all 0.2s; } .form-input:focus, .phase-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } /* ACTIONS */ .card-actions { display: flex; gap: 0.5rem; position: absolute; top: 0.75rem; right: 1rem; z-index: 10; } .action-btn { background: white; border: 1px solid var(--border); border-radius: 6px; padding: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .action-btn:hover { background: #f8fafc; transform: scale(1.1); } .btn-ia { color: var(--ia-color); } .btn-ws { color: var(--whatsapp); } /* LOGS */ #logPanel { position: fixed; bottom: 0; left: 0; right: 0; background: #0f172a; border-top: 1px solid #334155; z-index: 2000; transition: transform 0.3s ease; } .log-header { padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; color: #94a3b8; font-size: 12px; font-weight: 700; background: #1e293b; } #debugContent { height: 150px; overflow-y: auto; padding: 15px 20px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #38bdf8; } .collapsed-logs #debugContent { display: none; } /* STATUS BAR */ .status-bar { padding: 0.75rem; text-align: center; font-size: 0.9rem; font-weight: 600; position: fixed; top: 0; left: 0; right: 0; z-index: 2500; transform: translateY(-100%); transition: transform 0.3s ease; } .status-bar.active { transform: translateY(0); } .status-success { background: #10b981; color: white; } .status-error { background: #ef4444; color: white; } /* UTILS */ .loader { width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: #fff; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .hidden { display: none !important; } /* RESPONSIVE */ @media (max-width: 1024px) { .contact-panel { width: 260px; } } @media (max-width: 768px) { .main-container { flex-direction: column; } .contact-panel { width: 100%; height: auto; border-right: none; border-bottom: 1px solid var(--border); } .header-controls { flex-direction: column; padding: 1rem; height: auto; } header.crm-header { height: auto; flex-direction: column; padding: 1rem; } .search-form { min-width: 100%; } #contentScroll { padding: 1rem; } } 

 :root { --primary: #2563eb; --primary-hover: #1d4ed8; --bg-main: #f1f5f9; --bg-panel: #ffffff; --text-main: #1e293b; --text-muted: #64748b; --border: #e2e8f0; --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --whatsapp: #25d366; --ia-color: #8b5cf6; --section-bg: #ffffff; } * { box-sizing: border-box; } /* Minimalist Scrollbar */ ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 10px; } ::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 10px; border: 2px solid #f1f5f9; } ::-webkit-scrollbar-thumb:hover { background: #64748b; } /* Target specific scroll areas for consistency */ .panel-scroll, #contentScroll { scrollbar-width: auto; scrollbar-color: #94a3b8 #f1f5f9; } body { margin: 0; background: var(--bg-main); font-family: 'Inter', system-ui, sans-serif; height: 100vh; display: flex; flex-direction: column; overflow: hidden; color: var(--text-main); } header.crm-header { background: white; padding: 0 1.5rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; z-index: 1000; height: 64px; flex-shrink: 0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } .header-left { display: flex; align-items: center; gap: 1rem; } .brand-box { display: flex; align-items: baseline; gap: 0.4rem; } .brand { font-weight: 800; font-size: 1.25rem; color: var(--primary); letter-spacing: -0.025em; } .version-tag { font-size: 0.7rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; background: #f1f5f9; padding: 2px 6px; border-radius: 4px; } .header-controls { display: flex; align-items: center; gap: 0.75rem; } .search-form { display: flex; align-items: stretch; min-width: 250px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); border-radius: 8px; overflow: hidden; } .search-form input { flex: 1; padding: 0.6rem 1rem; border: 1px solid var(--border); border-right: none; border-radius: 8px 0 0 8px; font-size: 0.9rem; outline: none; transition: border-color 0.2s; } .search-form input:focus { border-color: var(--primary); } .search-form button { padding: 0 1rem; border: none; background: var(--primary); color: white; cursor: pointer; display: flex; align-items: center; transition: background 0.2s; } .search-form button:hover { background: var(--primary-hover); } .header-select { padding: 0.6rem; border: 1px solid var(--border); border-radius: 8px; font-size: 0.9rem; background: white; width: 150px; cursor: pointer; outline: none; transition: border-color 0.2s; } .header-select:focus { border-color: var(--primary); } .main-container { display: flex; flex: 1; overflow: hidden; height: calc(100vh - 64px); max-height: calc(100vh - 64px); } /* PANEL IZQUIERDO */ .contact-panel { width: 300px; background: white; border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; min-height: 0; /* CRITICAL: Allows flex child to shrink and scroll */ } .panel-scroll { flex: 1; overflow-y: scroll; /* Force scrolling visibility */ padding: 1.5rem 1rem; } .content-area { flex: 1; background: #f8fafc; overflow-y: auto; } #contentScroll { padding: 1.25rem; display: flex; flex-direction: column; gap: 1.5rem; } /* MAIN SECTIONS (ACCORDIONS) */ .main-section { background: var(--section-bg); border-radius: 12px; border: 1px solid var(--border); box-shadow: var(--shadow); overflow: hidden; transition: all 0.3s ease; } .section-header { padding: 1rem 1.5rem; background: #ffffff; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none; transition: background 0.2s; } .section-header:hover { background: #fcfcfc; } .section-header h2 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--text-main); display: flex; align-items: center; gap: 0.75rem; } .section-header .toggle-icon { color: var(--text-muted); transition: transform 0.3s ease; } .main-section.collapsed .section-header { border-bottom-color: transparent; } .main-section.collapsed .toggle-icon { transform: rotate(-90deg); } .section-body { padding: 1.5rem; max-height: 800px; overflow-y: auto; } .main-section.collapsed .section-body { display: none; } /* INTERNAL CARDS (Contacto Section) */ .report-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } .report-card { background: #fdfdfd; border-radius: 8px; border: 1px solid var(--border); overflow: hidden; } .card-header { padding: 0.75rem 1rem; background: #f8fafc; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .card-title { font-size: 0.75rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .card-body { padding: 1rem; position: relative; } .report-card.collapsed .card-body { display: none; } .editable-area { width: 100%; min-height: 80px; border: 1px solid transparent; padding: 0.5rem; font-size: 0.95rem; background: transparent; resize: vertical; outline: none; line-height: 1.6; color: var(--text-main); } .is-editable .editable-area { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 0.75rem; } .is-editable .editable-area:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } /* PARCELA (Iframe) */ #iframeWrapper { width: 100%; height: 1200px; border: 1px solid var(--border); border-radius: 8px; overflow: auto; } /* FICHAS (Vertical Grid) */ .inmuebles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; } .inmueble-card { background: white; border-radius: 12px; border: 1px solid var(--border); overflow: hidden; transition: all 0.3s ease; display: flex; flex-direction: column; cursor: pointer; position: relative; } .inmueble-card:hover { transform: translateY(-4px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); border-color: var(--primary); } .inmueble-img { height: 180px; position: relative; overflow: hidden; } .inmueble-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .inmueble-card:hover .inmueble-img img { transform: scale(1.05); } .inmueble-content { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; } .inmueble-price { font-size: 1.25rem; font-weight: 800; color: var(--text-main); } .inmueble-ref { font-size: 0.75rem; color: var(--primary); font-weight: 700; background: #eff6ff; padding: 2px 8px; border-radius: 4px; } .inmueble-title { font-size: 0.9rem; font-weight: 600; color: var(--text-main); line-height: 1.4; min-height: 2.8em; } .inmueble-features { border-top: 1px solid #f1f5f9; padding-top: 0.75rem; margin-top: 0.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; font-size: 0.75rem; color: var(--text-muted); } /* FORMS & INPUTS (Left Panel) */ .form-group { margin-bottom: 1.25rem; } .form-label { font-size: 0.7rem; font-weight: 700; color: var(--text-muted); display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 0.05em; } .form-input, .phase-select { width: 100%; padding: 0.65rem 0.85rem; border: 1px solid var(--border); border-radius: 8px; font-size: 0.9rem; background: #fff; outline: none; transition: all 0.2s; } .form-input:focus, .phase-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } /* ACTIONS */ .card-actions { display: flex; gap: 0.5rem; position: absolute; top: 0.75rem; right: 1rem; z-index: 10; } .action-btn { background: white; border: 1px solid var(--border); border-radius: 6px; padding: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .action-btn:hover { background: #f8fafc; transform: scale(1.1); } .btn-ia { color: var(--ia-color); } .btn-ws { color: var(--whatsapp); } /* LOGS */ #logPanel { position: fixed; bottom: 0; left: 0; right: 0; background: #0f172a; border-top: 1px solid #334155; z-index: 2000; transition: transform 0.3s ease; } .log-header { padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; color: #94a3b8; font-size: 12px; font-weight: 700; background: #1e293b; } #debugContent { height: 150px; overflow-y: auto; padding: 15px 20px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #38bdf8; } .collapsed-logs #debugContent { display: none; } /* STATUS BAR */ .status-bar { padding: 0.75rem; text-align: center; font-size: 0.9rem; font-weight: 600; position: fixed; top: 0; left: 0; right: 0; z-index: 2500; transform: translateY(-100%); transition: transform 0.3s ease; } .status-bar.active { transform: translateY(0); } .status-success { background: #10b981; color: white; } .status-error { background: #ef4444; color: white; } /* UTILS */ .loader { width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: #fff; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .hidden { display: none !important; } /* RESPONSIVE */ @media (max-width: 1024px) { .contact-panel { width: 260px; } } @media (max-width: 768px) { .main-container { flex-direction: column; } .contact-panel { width: 100%; height: auto; border-right: none; border-bottom: 1px solid var(--border); } .header-controls { flex-direction: column; padding: 1rem; height: auto; } header.crm-header { height: auto; flex-direction: column; padding: 1rem; } .search-form { min-width: 100%; } #contentScroll { padding: 1rem; } } 

 :root { --primary: #2563eb; --primary-hover: #1d4ed8; --bg-main: #f1f5f9; --bg-panel: #ffffff; --text-main: #1e293b; --text-muted: #64748b; --border: #e2e8f0; --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --whatsapp: #25d366; --ia-color: #8b5cf6; --section-bg: #ffffff; } * { box-sizing: border-box; } /* Minimalist Scrollbar */ ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 10px; } ::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 10px; border: 2px solid #f1f5f9; } ::-webkit-scrollbar-thumb:hover { background: #64748b; } /* Target specific scroll areas for consistency */ .panel-scroll, #contentScroll { scrollbar-width: auto; scrollbar-color: #94a3b8 #f1f5f9; } body { margin: 0; background: var(--bg-main); font-family: 'Inter', system-ui, sans-serif; height: 100vh; display: flex; flex-direction: column; overflow: hidden; color: var(--text-main); } header.crm-header { background: white; padding: 0 1.5rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; z-index: 1000; height: 64px; flex-shrink: 0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } .header-left { display: flex; align-items: center; gap: 1rem; } .brand-box { display: flex; align-items: baseline; gap: 0.4rem; } .brand { font-weight: 800; font-size: 1.25rem; color: var(--primary); letter-spacing: -0.025em; } .version-tag { font-size: 0.7rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; background: #f1f5f9; padding: 2px 6px; border-radius: 4px; } .header-controls { display: flex; align-items: center; gap: 0.75rem; } .search-form { display: flex; align-items: stretch; min-width: 250px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); border-radius: 8px; overflow: hidden; } .search-form input { flex: 1; padding: 0.6rem 1rem; border: 1px solid var(--border); border-right: none; border-radius: 8px 0 0 8px; font-size: 0.9rem; outline: none; transition: border-color 0.2s; } .search-form input:focus { border-color: var(--primary); } .search-form button { padding: 0 1rem; border: none; background: var(--primary); color: white; cursor: pointer; display: flex; align-items: center; transition: background 0.2s; } .search-form button:hover { background: var(--primary-hover); } .header-select { padding: 0.6rem; border: 1px solid var(--border); border-radius: 8px; font-size: 0.9rem; background: white; width: 150px; cursor: pointer; outline: none; transition: border-color 0.2s; } .header-select:focus { border-color: var(--primary); } .main-container { display: flex; flex: 1; overflow: hidden; height: calc(100vh - 64px); max-height: calc(100vh - 64px); } /* PANEL IZQUIERDO */ .contact-panel { width: 300px; background: white; border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; min-height: 0; /* CRITICAL: Allows flex child to shrink and scroll */ } .panel-scroll { flex: 1; overflow-y: scroll; /* Force scrolling visibility */ padding: 1.5rem 1rem; } .content-area { flex: 1; background: #f8fafc; overflow-y: auto; } #contentScroll { padding: 1.25rem; display: flex; flex-direction: column; gap: 1.5rem; } /* MAIN SECTIONS (ACCORDIONS) */ .main-section { background: var(--section-bg); border-radius: 12px; border: 1px solid var(--border); box-shadow: var(--shadow); overflow: hidden; transition: all 0.3s ease; } .section-header { padding: 1rem 1.5rem; background: #ffffff; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none; transition: background 0.2s; } .section-header:hover { background: #fcfcfc; } .section-header h2 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--text-main); display: flex; align-items: center; gap: 0.75rem; } .section-header .toggle-icon { color: var(--text-muted); transition: transform 0.3s ease; } .main-section.collapsed .section-header { border-bottom-color: transparent; } .main-section.collapsed .toggle-icon { transform: rotate(-90deg); } .section-body { padding: 1.5rem; max-height: 800px; overflow-y: auto; } .main-section.collapsed .section-body { display: none; } /* INTERNAL CARDS (Contacto Section) */ .report-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } .report-card { background: #fdfdfd; border-radius: 8px; border: 1px solid var(--border); overflow: hidden; } .card-header { padding: 0.75rem 1rem; background: #f8fafc; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .card-title { font-size: 0.75rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .card-body { padding: 1rem; position: relative; } .report-card.collapsed .card-body { display: none; } .editable-area { width: 100%; min-height: 80px; border: 1px solid transparent; padding: 0.5rem; font-size: 0.95rem; background: transparent; resize: vertical; outline: none; line-height: 1.6; color: var(--text-main); } .is-editable .editable-area { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 0.75rem; } .is-editable .editable-area:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } /* PARCELA (Iframe) */ #iframeWrapper { width: 100%; height: 1200px; border: 1px solid var(--border); border-radius: 8px; overflow: auto; } /* FICHAS (Vertical Grid) */ .inmuebles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; } .inmueble-card { background: white; border-radius: 12px; border: 1px solid var(--border); overflow: hidden; transition: all 0.3s ease; display: flex; flex-direction: column; cursor: pointer; position: relative; } .inmueble-card:hover { transform: translateY(-4px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); border-color: var(--primary); } .inmueble-img { height: 180px; position: relative; overflow: hidden; } .inmueble-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .inmueble-card:hover .inmueble-img img { transform: scale(1.05); } .inmueble-content { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; } .inmueble-price { font-size: 1.25rem; font-weight: 800; color: var(--text-main); } .inmueble-ref { font-size: 0.75rem; color: var(--primary); font-weight: 700; background: #eff6ff; padding: 2px 8px; border-radius: 4px; } .inmueble-title { font-size: 0.9rem; font-weight: 600; color: var(--text-main); line-height: 1.4; min-height: 2.8em; } .inmueble-features { border-top: 1px solid #f1f5f9; padding-top: 0.75rem; margin-top: 0.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; font-size: 0.75rem; color: var(--text-muted); } /* FORMS & INPUTS (Left Panel) */ .form-group { margin-bottom: 1.25rem; } .form-label { font-size: 0.7rem; font-weight: 700; color: var(--text-muted); display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 0.05em; } .form-input, .phase-select { width: 100%; padding: 0.65rem 0.85rem; border: 1px solid var(--border); border-radius: 8px; font-size: 0.9rem; background: #fff; outline: none; transition: all 0.2s; } .form-input:focus, .phase-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } /* ACTIONS */ .card-actions { display: flex; gap: 0.5rem; position: absolute; top: 0.75rem; right: 1rem; z-index: 10; } .action-btn { background: white; border: 1px solid var(--border); border-radius: 6px; padding: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .action-btn:hover { background: #f8fafc; transform: scale(1.1); } .btn-ia { color: var(--ia-color); } .btn-ws { color: var(--whatsapp); } /* LOGS */ #logPanel { position: fixed; bottom: 0; left: 0; right: 0; background: #0f172a; border-top: 1px solid #334155; z-index: 2000; transition: transform 0.3s ease; } .log-header { padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; color: #94a3b8; font-size: 12px; font-weight: 700; background: #1e293b; } #debugContent { height: 150px; overflow-y: auto; padding: 15px 20px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #38bdf8; } .collapsed-logs #debugContent { display: none; } /* STATUS BAR */ .status-bar { padding: 0.75rem; text-align: center; font-size: 0.9rem; font-weight: 600; position: fixed; top: 0; left: 0; right: 0; z-index: 2500; transform: translateY(-100%); transition: transform 0.3s ease; } .status-bar.active { transform: translateY(0); } .status-success { background: #10b981; color: white; } .status-error { background: #ef4444; color: white; } /* UTILS */ .loader { width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: #fff; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .hidden { display: none !important; } /* RESPONSIVE */ @media (max-width: 1024px) { .contact-panel { width: 260px; } } @media (max-width: 768px) { .main-container { flex-direction: column; } .contact-panel { width: 100%; height: auto; border-right: none; border-bottom: 1px solid var(--border); } .header-controls { flex-direction: column; padding: 1rem; height: auto; } header.crm-header { height: auto; flex-direction: column; padding: 1rem; } .search-form { min-width: 100%; } #contentScroll { padding: 1rem; } } 

 :root { --primary: #2563eb; --primary-hover: #1d4ed8; --bg-main: #f1f5f9; --bg-panel: #ffffff; --text-main: #1e293b; --text-muted: #64748b; --border: #e2e8f0; --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --whatsapp: #25d366; --ia-color: #8b5cf6; --section-bg: #ffffff; } * { box-sizing: border-box; } /* Minimalist Scrollbar */ ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 10px; } ::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 10px; border: 2px solid #f1f5f9; } ::-webkit-scrollbar-thumb:hover { background: #64748b; } /* Target specific scroll areas for consistency */ .panel-scroll, #contentScroll { scrollbar-width: auto; scrollbar-color: #94a3b8 #f1f5f9; } body { margin: 0; background: var(--bg-main); font-family: 'Inter', system-ui, sans-serif; height: 100vh; display: flex; flex-direction: column; overflow: hidden; color: var(--text-main); } header.crm-header { background: white; padding: 0 1.5rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; z-index: 1000; height: 64px; flex-shrink: 0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } .header-left { display: flex; align-items: center; gap: 1rem; } .brand-box { display: flex; align-items: baseline; gap: 0.4rem; } .brand { font-weight: 800; font-size: 1.25rem; color: var(--primary); letter-spacing: -0.025em; } .version-tag { font-size: 0.7rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; background: #f1f5f9; padding: 2px 6px; border-radius: 4px; } .header-controls { display: flex; align-items: center; gap: 0.75rem; } .search-form { display: flex; align-items: stretch; min-width: 250px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); border-radius: 8px; overflow: hidden; } .search-form input { flex: 1; padding: 0.6rem 1rem; border: 1px solid var(--border); border-right: none; border-radius: 8px 0 0 8px; font-size: 0.9rem; outline: none; transition: border-color 0.2s; } .search-form input:focus { border-color: var(--primary); } .search-form button { padding: 0 1rem; border: none; background: var(--primary); color: white; cursor: pointer; display: flex; align-items: center; transition: background 0.2s; } .search-form button:hover { background: var(--primary-hover); } .header-select { padding: 0.6rem; border: 1px solid var(--border); border-radius: 8px; font-size: 0.9rem; background: white; width: 150px; cursor: pointer; outline: none; transition: border-color 0.2s; } .header-select:focus { border-color: var(--primary); } .main-container { display: flex; flex: 1; overflow: hidden; height: calc(100vh - 64px); max-height: calc(100vh - 64px); } /* PANEL IZQUIERDO */ .contact-panel { width: 300px; background: white; border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; min-height: 0; /* CRITICAL: Allows flex child to shrink and scroll */ } .panel-scroll { flex: 1; overflow-y: scroll; /* Force scrolling visibility */ padding: 1.5rem 1rem; } .content-area { flex: 1; background: #f8fafc; overflow-y: auto; } #contentScroll { padding: 1.25rem; display: flex; flex-direction: column; gap: 1.5rem; } /* MAIN SECTIONS (ACCORDIONS) */ .main-section { background: var(--section-bg); border-radius: 12px; border: 1px solid var(--border); box-shadow: var(--shadow); overflow: hidden; transition: all 0.3s ease; } .section-header { padding: 1rem 1.5rem; background: #ffffff; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none; transition: background 0.2s; } .section-header:hover { background: #fcfcfc; } .section-header h2 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--text-main); display: flex; align-items: center; gap: 0.75rem; } .section-header .toggle-icon { color: var(--text-muted); transition: transform 0.3s ease; } .main-section.collapsed .section-header { border-bottom-color: transparent; } .main-section.collapsed .toggle-icon { transform: rotate(-90deg); } .section-body { padding: 1.5rem; max-height: 800px; overflow-y: auto; } .main-section.collapsed .section-body { display: none; } /* MAP SECTION (NEW) */ #mapView { width: 100%; height: 500px; border-radius: 8px; border: 1px solid var(--border); background: #f1f5f9; z-index: 10; } /* INTERNAL CARDS (Contacto Section) */ .report-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } .report-card { background: #fdfdfd; border-radius: 8px; border: 1px solid var(--border); overflow: hidden; } .card-header { padding: 0.75rem 1rem; background: #f8fafc; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .card-title { font-size: 0.75rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .card-body { padding: 1rem; position: relative; } .report-card.collapsed .card-body { display: none; } .editable-area { width: 100%; min-height: 80px; border: 1px solid transparent; padding: 0.5rem; font-size: 0.95rem; background: transparent; resize: vertical; outline: none; line-height: 1.6; color: var(--text-main); } .is-editable .editable-area { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 0.75rem; } .is-editable .editable-area:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } /* PARCELA (Iframe) */ #iframeWrapper { width: 100%; height: 1200px; border: 1px solid var(--border); border-radius: 8px; overflow: auto; } /* FICHAS (Vertical Grid) */ .inmuebles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; } .inmueble-card { background: white; border-radius: 12px; border: 1px solid var(--border); overflow: hidden; transition: all 0.3s ease; display: flex; flex-direction: column; cursor: pointer; position: relative; } .inmueble-card:hover { transform: translateY(-4px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); border-color: var(--primary); } .inmueble-img { height: 180px; position: relative; overflow: hidden; } .inmueble-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .inmueble-card:hover .inmueble-img img { transform: scale(1.05); } .inmueble-content { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; } .inmueble-price { font-size: 1.25rem; font-weight: 800; color: var(--text-main); } .inmueble-ref { font-size: 0.75rem; color: var(--primary); font-weight: 700; background: #eff6ff; padding: 2px 8px; border-radius: 4px; } .inmueble-title { font-size: 0.9rem; font-weight: 600; color: var(--text-main); line-height: 1.4; min-height: 2.8em; } .inmueble-features { border-top: 1px solid #f1f5f9; padding-top: 0.75rem; margin-top: 0.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; font-size: 0.75rem; color: var(--text-muted); } /* FORMS & INPUTS (Left Panel) */ .form-group { margin-bottom: 1.25rem; } .form-label { font-size: 0.7rem; font-weight: 700; color: var(--text-muted); display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 0.05em; } .form-input, .phase-select { width: 100%; padding: 0.65rem 0.85rem; border: 1px solid var(--border); border-radius: 8px; font-size: 0.9rem; background: #fff; outline: none; transition: all 0.2s; } .form-input:focus, .phase-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } /* ACTIONS */ .card-actions { display: flex; gap: 0.5rem; position: absolute; top: 0.75rem; right: 1rem; z-index: 10; } .action-btn { background: white; border: 1px solid var(--border); border-radius: 6px; padding: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .action-btn:hover { background: #f8fafc; transform: scale(1.1); } .btn-ia { color: var(--ia-color); } .btn-ws { color: var(--whatsapp); } /* LOGS */ #logPanel { position: fixed; bottom: 0; left: 0; right: 0; background: #0f172a; border-top: 1px solid #334155; z-index: 2000; transition: transform 0.3s ease; } .log-header { padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; color: #94a3b8; font-size: 12px; font-weight: 700; background: #1e293b; } #debugContent { height: 150px; overflow-y: auto; padding: 15px 20px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #38bdf8; } .collapsed-logs #debugContent { display: none; } /* STATUS BAR */ .status-bar { padding: 0.75rem; text-align: center; font-size: 0.9rem; font-weight: 600; position: fixed; top: 0; left: 0; right: 0; z-index: 2500; transform: translateY(-100%); transition: transform 0.3s ease; } .status-bar.active { transform: translateY(0); } .status-success { background: #10b981; color: white; } .status-error { background: #ef4444; color: white; } /* UTILS */ .loader { width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: #fff; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .hidden { display: none !important; } /* RESPONSIVE */ @media (max-width: 1024px) { .contact-panel { width: 260px; } } @media (max-width: 768px) { .main-container { flex-direction: column; } .contact-panel { width: 100%; height: auto; border-right: none; border-bottom: 1px solid var(--border); } .header-controls { flex-direction: column; padding: 1rem; height: auto; } header.crm-header { height: auto; flex-direction: column; padding: 1rem; } .search-form { min-width: 100%; } #contentScroll { padding: 1rem; } } 

 :root { --primary: #2563eb; --primary-hover: #1d4ed8; --bg-main: #f1f5f9; --bg-panel: #ffffff; --text-main: #1e293b; --text-muted: #64748b; --border: #e2e8f0; --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --whatsapp: #25d366; --ia-color: #8b5cf6; --section-bg: #ffffff; } * { box-sizing: border-box; } /* Minimalist Scrollbar */ ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 10px; } ::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 10px; border: 2px solid #f1f5f9; } ::-webkit-scrollbar-thumb:hover { background: #64748b; } /* Target specific scroll areas for consistency */ .panel-scroll, #contentScroll { scrollbar-width: auto; scrollbar-color: #94a3b8 #f1f5f9; } body { margin: 0; background: var(--bg-main); font-family: 'Inter', system-ui, sans-serif; height: 100vh; display: flex; flex-direction: column; overflow: hidden; color: var(--text-main); } header.crm-header { background: white; padding: 0 1.5rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; z-index: 1000; height: 64px; flex-shrink: 0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } .header-left { display: flex; align-items: center; gap: 1rem; } .brand-box { display: flex; align-items: baseline; gap: 0.4rem; } .brand { font-weight: 800; font-size: 1.25rem; color: var(--primary); letter-spacing: -0.025em; } .version-tag { font-size: 0.7rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; background: #f1f5f9; padding: 2px 6px; border-radius: 4px; } .header-controls { display: flex; align-items: center; gap: 0.75rem; } .search-form { display: flex; align-items: stretch; min-width: 250px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); border-radius: 8px; overflow: hidden; } .search-form input { flex: 1; padding: 0.6rem 1rem; border: 1px solid var(--border); border-right: none; border-radius: 8px 0 0 8px; font-size: 0.9rem; outline: none; transition: border-color 0.2s; } .search-form input:focus { border-color: var(--primary); } .search-form button { padding: 0 1rem; border: none; background: var(--primary); color: white; cursor: pointer; display: flex; align-items: center; transition: background 0.2s; } .search-form button:hover { background: var(--primary-hover); } .header-select { padding: 0.6rem; border: 1px solid var(--border); border-radius: 8px; font-size: 0.9rem; background: white; width: 150px; cursor: pointer; outline: none; transition: border-color 0.2s; } .header-select:focus { border-color: var(--primary); } .main-container { display: flex; flex: 1; overflow: hidden; height: calc(100vh - 64px); max-height: calc(100vh - 64px); } /* PANEL IZQUIERDO */ .contact-panel { width: 300px; background: white; border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; min-height: 0; /* CRITICAL: Allows flex child to shrink and scroll */ } .panel-scroll { flex: 1; overflow-y: scroll; /* Force scrolling visibility */ padding: 1.5rem 1rem; } .content-area { flex: 1; background: #f8fafc; overflow-y: auto; } #contentScroll { padding: 1.25rem; display: flex; flex-direction: column; gap: 1.5rem; } /* MAIN SECTIONS (ACCORDIONS) */ .main-section { background: var(--section-bg); border-radius: 12px; border: 1px solid var(--border); box-shadow: var(--shadow); overflow: hidden; margin-bottom: 0.5rem; /* Asegura separación incluso colapsados */ } .section-header { padding: 1rem 1.5rem; background: #ffffff; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none; transition: background 0.2s; min-height: 56px; /* Altura mínima garantizada */ } .section-header:hover { background: #fcfcfc; } .section-header h2 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--text-main); display: flex; align-items: center; gap: 0.75rem; } .section-header .toggle-icon { color: var(--text-muted); transition: transform 0.3s ease; } .main-section.collapsed .section-header { border-bottom-color: transparent; } .main-section.collapsed .toggle-icon { transform: rotate(-90deg); } .section-body { padding: 1.5rem; max-height: 2000px; /* Suficiente para contenidos largos */ overflow-y: auto; transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, padding 0.4s ease; opacity: 1; } .main-section.collapsed .section-body { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; overflow: hidden; border: none; } /* MAP SECTION (NEW) */ #mapView { width: 100%; height: 500px; border-radius: 8px; border: 1px solid var(--border); background: #f1f5f9; z-index: 10; } /* INTERNAL CARDS (Contacto Section) */ .report-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } .report-card { background: #fdfdfd; border-radius: 8px; border: 1px solid var(--border); overflow: hidden; } .card-header { padding: 0.75rem 1rem; background: #f8fafc; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .card-title { font-size: 0.75rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .card-body { padding: 1rem; position: relative; } .report-card.collapsed .card-body { display: none; } .editable-area { width: 100%; min-height: 80px; border: 1px solid transparent; padding: 0.5rem; font-size: 0.95rem; background: transparent; resize: vertical; outline: none; line-height: 1.6; color: var(--text-main); } .is-editable .editable-area { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 0.75rem; } .is-editable .editable-area:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } /* PARCELA (Iframe) */ #iframeWrapper { width: 100%; height: 1200px; border: 1px solid var(--border); border-radius: 8px; overflow: auto; } /* FICHAS (Vertical Grid) */ .inmuebles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; } .inmueble-card { background: white; border-radius: 12px; border: 1px solid var(--border); overflow: hidden; transition: all 0.3s ease; display: flex; flex-direction: column; cursor: pointer; position: relative; } .inmueble-card:hover { transform: translateY(-4px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); border-color: var(--primary); } .inmueble-img { height: 180px; position: relative; overflow: hidden; } .inmueble-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .inmueble-card:hover .inmueble-img img { transform: scale(1.05); } .inmueble-content { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; } .inmueble-price { font-size: 1.25rem; font-weight: 800; color: var(--text-main); } .inmueble-ref { font-size: 0.75rem; color: var(--primary); font-weight: 700; background: #eff6ff; padding: 2px 8px; border-radius: 4px; } .inmueble-title { font-size: 0.9rem; font-weight: 600; color: var(--text-main); line-height: 1.4; min-height: 2.8em; } .inmueble-features { border-top: 1px solid #f1f5f9; padding-top: 0.75rem; margin-top: 0.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; font-size: 0.75rem; color: var(--text-muted); } /* FORMS & INPUTS (Left Panel) */ .form-group { margin-bottom: 1.25rem; } .form-label { font-size: 0.7rem; font-weight: 700; color: var(--text-muted); display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 0.05em; } .form-input, .phase-select { width: 100%; padding: 0.65rem 0.85rem; border: 1px solid var(--border); border-radius: 8px; font-size: 0.9rem; background: #fff; outline: none; transition: all 0.2s; } .form-input:focus, .phase-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } /* ACTIONS */ .card-actions { display: flex; gap: 0.5rem; position: absolute; top: 0.75rem; right: 1rem; z-index: 10; } .action-btn { background: white; border: 1px solid var(--border); border-radius: 6px; padding: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .action-btn:hover { background: #f8fafc; transform: scale(1.1); } .btn-ia { color: var(--ia-color); } .btn-ws { color: var(--whatsapp); } /* LOGS */ #logPanel { position: fixed; bottom: 0; left: 0; right: 0; background: #0f172a; border-top: 1px solid #334155; z-index: 2000; transition: transform 0.3s ease; } .log-header { padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; color: #94a3b8; font-size: 12px; font-weight: 700; background: #1e293b; } #debugContent { height: 150px; overflow-y: auto; padding: 15px 20px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #38bdf8; } .collapsed-logs #debugContent { display: none; } /* STATUS BAR */ .status-bar { padding: 0.75rem; text-align: center; font-size: 0.9rem; font-weight: 600; position: fixed; top: 0; left: 0; right: 0; z-index: 2500; transform: translateY(-100%); transition: transform 0.3s ease; } .status-bar.active { transform: translateY(0); } .status-success { background: #10b981; color: white; } .status-error { background: #ef4444; color: white; } /* UTILS */ .loader { width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: #fff; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .hidden { display: none !important; } /* RESPONSIVE */ @media (max-width: 1024px) { .contact-panel { width: 260px; } } @media (max-width: 768px) { .main-container { flex-direction: column; } .contact-panel { width: 100%; height: auto; border-right: none; border-bottom: 1px solid var(--border); } .header-controls { flex-direction: column; padding: 1rem; height: auto; } header.crm-header { height: auto; flex-direction: column; padding: 1rem; } .search-form { min-width: 100%; } #contentScroll { padding: 1rem; } } 

 :root { --primary: #2563eb; --primary-hover: #1d4ed8; --bg-main: #f1f5f9; --bg-panel: #ffffff; --text-main: #1e293b; --text-muted: #64748b; --border: #e2e8f0; --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --whatsapp: #25d366; --ia-color: #8b5cf6; --section-bg: #ffffff; } * { box-sizing: border-box; } /* Minimalist Scrollbar */ ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 10px; } ::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 10px; border: 2px solid #f1f5f9; } ::-webkit-scrollbar-thumb:hover { background: #64748b; } /* Target specific scroll areas for consistency */ .panel-scroll, #contentScroll { scrollbar-width: auto; scrollbar-color: #94a3b8 #f1f5f9; } body { margin: 0; background: var(--bg-main); font-family: 'Inter', system-ui, sans-serif; height: 100vh; display: flex; flex-direction: column; overflow: hidden; color: var(--text-main); } header.crm-header { background: white; padding: 0 1.5rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; z-index: 1000; height: 64px; flex-shrink: 0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } .header-left { display: flex; align-items: center; gap: 1rem; } .brand-box { display: flex; align-items: baseline; gap: 0.4rem; } .brand { font-weight: 800; font-size: 1.25rem; color: var(--primary); letter-spacing: -0.025em; } .version-tag { font-size: 0.7rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; background: #f1f5f9; padding: 2px 6px; border-radius: 4px; } .header-controls { display: flex; align-items: center; gap: 0.75rem; } .search-form { display: flex; align-items: stretch; min-width: 250px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); border-radius: 8px; overflow: hidden; } .search-form input { flex: 1; padding: 0.6rem 1rem; border: 1px solid var(--border); border-right: none; border-radius: 8px 0 0 8px; font-size: 0.9rem; outline: none; transition: border-color 0.2s; } .search-form input:focus { border-color: var(--primary); } .search-form button { padding: 0 1rem; border: none; background: var(--primary); color: white; cursor: pointer; display: flex; align-items: center; transition: background 0.2s; } .search-form button:hover { background: var(--primary-hover); } .header-select { padding: 0.6rem; border: 1px solid var(--border); border-radius: 8px; font-size: 0.9rem; background: white; width: 150px; cursor: pointer; outline: none; transition: border-color 0.2s; } .header-select:focus { border-color: var(--primary); } .main-container { display: flex; flex: 1; overflow: hidden; height: calc(100vh - 64px); max-height: calc(100vh - 64px); } /* PANEL IZQUIERDO */ .contact-panel { width: 300px; background: white; border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; min-height: 0; /* CRITICAL: Allows flex child to shrink and scroll */ } .panel-scroll { flex: 1; overflow-y: scroll; /* Force scrolling visibility */ padding: 1.5rem 1rem; } .content-area { flex: 1; background: #f8fafc; overflow-y: auto; } #contentScroll { padding: 1.25rem; display: flex; flex-direction: column; gap: 1.5rem; } /* MAIN SECTIONS (ACCORDIONS) */ .main-section { background: var(--section-bg); border-radius: 12px; border: 1px solid var(--border); box-shadow: var(--shadow); overflow: hidden; transition: all 0.3s ease; } .section-header { padding: 1rem 1.5rem; background: #ffffff; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none; transition: background 0.2s; } .section-header:hover { background: #fcfcfc; } .section-header h2 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--text-main); display: flex; align-items: center; gap: 0.75rem; } .section-header .toggle-icon { color: var(--text-muted); transition: transform 0.3s ease; } .main-section.collapsed .section-header { border-bottom-color: transparent; } .main-section.collapsed .toggle-icon { transform: rotate(-90deg); } .section-body { padding: 1.5rem; max-height: 800px; overflow-y: auto; } .main-section.collapsed .section-body { display: none; } /* INTERNAL CARDS (Contacto Section) */ .report-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } .report-card { background: #fdfdfd; border-radius: 8px; border: 1px solid var(--border); overflow: hidden; } .card-header { padding: 0.75rem 1rem; background: #f8fafc; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .card-title { font-size: 0.75rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .card-body { padding: 1rem; position: relative; } .report-card.collapsed .card-body { display: none; } .editable-area { width: 100%; min-height: 80px; border: 1px solid transparent; padding: 0.5rem; font-size: 0.95rem; background: transparent; resize: vertical; outline: none; line-height: 1.6; color: var(--text-main); } .is-editable .editable-area { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 0.75rem; } .is-editable .editable-area:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } /* PARCELA (Iframe) */ #iframeWrapper { width: 100%; height: 1200px; border: 1px solid var(--border); border-radius: 8px; overflow: auto; } /* FICHAS (Vertical Grid) */ .inmuebles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; } .inmueble-card { background: white; border-radius: 12px; border: 1px solid var(--border); overflow: hidden; transition: all 0.3s ease; display: flex; flex-direction: column; cursor: pointer; position: relative; } .inmueble-card:hover { transform: translateY(-4px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); border-color: var(--primary); } .inmueble-img { height: 180px; position: relative; overflow: hidden; } .inmueble-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .inmueble-card:hover .inmueble-img img { transform: scale(1.05); } .inmueble-content { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; } .inmueble-price { font-size: 1.25rem; font-weight: 800; color: var(--text-main); } .inmueble-ref { font-size: 0.75rem; color: var(--primary); font-weight: 700; background: #eff6ff; padding: 2px 8px; border-radius: 4px; } .inmueble-title { font-size: 0.9rem; font-weight: 600; color: var(--text-main); line-height: 1.4; min-height: 2.8em; } .inmueble-features { border-top: 1px solid #f1f5f9; padding-top: 0.75rem; margin-top: 0.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; font-size: 0.75rem; color: var(--text-muted); } /* FORMS & INPUTS (Left Panel) */ .form-group { margin-bottom: 1.25rem; } .form-label { font-size: 0.7rem; font-weight: 700; color: var(--text-muted); display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 0.05em; } .form-input, .phase-select { width: 100%; padding: 0.65rem 0.85rem; border: 1px solid var(--border); border-radius: 8px; font-size: 0.9rem; background: #fff; outline: none; transition: all 0.2s; } .form-input:focus, .phase-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } /* ACTIONS */ .card-actions { display: flex; gap: 0.5rem; position: absolute; top: 0.75rem; right: 1rem; z-index: 10; } .action-btn { background: white; border: 1px solid var(--border); border-radius: 6px; padding: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .action-btn:hover { background: #f8fafc; transform: scale(1.1); } .btn-ia { color: var(--ia-color); } .btn-ws { color: var(--whatsapp); } /* LOGS */ #logPanel { position: fixed; bottom: 0; left: 0; right: 0; background: #0f172a; border-top: 1px solid #334155; z-index: 2000; transition: transform 0.3s ease; } .log-header { padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; color: #94a3b8; font-size: 12px; font-weight: 700; background: #1e293b; } #debugContent { height: 150px; overflow-y: auto; padding: 15px 20px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #38bdf8; } .collapsed-logs #debugContent { display: none; } /* STATUS BAR */ .status-bar { padding: 0.75rem; text-align: center; font-size: 0.9rem; font-weight: 600; position: fixed; top: 0; left: 0; right: 0; z-index: 2500; transform: translateY(-100%); transition: transform 0.3s ease; } .status-bar.active { transform: translateY(0); } .status-success { background: #10b981; color: white; } .status-error { background: #ef4444; color: white; } /* UTILS */ .loader { width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: #fff; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .hidden { display: none !important; } /* RESPONSIVE */ @media (max-width: 1024px) { .contact-panel { width: 260px; } } @media (max-width: 768px) { .main-container { flex-direction: column; } .contact-panel { width: 100%; height: auto; border-right: none; border-bottom: 1px solid var(--border); } .header-controls { flex-direction: column; padding: 1rem; height: auto; } header.crm-header { height: auto; flex-direction: column; padding: 1rem; } .search-form { min-width: 100%; } #contentScroll { padding: 1rem; } } 

 :root { --primary: #2563eb; --primary-hover: #1d4ed8; --bg-main: #f1f5f9; --bg-panel: #ffffff; --text-main: #1e293b; --text-muted: #64748b; --border: #e2e8f0; --shadow: 0 1px 3px rgba(0, 0, 0, 0.1); --whatsapp: #25d366; --ia-color: #8b5cf6; --section-bg: #ffffff; } * { box-sizing: border-box; outline: none; } /* Minimalist Scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #f1f5f9; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } body { margin: 0; background: var(--bg-main); font-family: 'Inter', system-ui, sans-serif; height: 100vh; display: flex; flex-direction: column; overflow: hidden; color: var(--text-main); font-size: 13px; /* Más compacto */ } header.crm-header { background: white; padding: 0 1rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; z-index: 1000; height: 48px; /* Reducido de 64px */ flex-shrink: 0; } .brand-box { display: flex; align-items: baseline; gap: 0.3rem; } .brand { font-weight: 800; font-size: 1.1rem; color: var(--primary); letter-spacing: -0.025em; } .version-tag { font-size: 0.6rem; color: var(--text-muted); font-weight: 700; background: #f1f5f9; padding: 1px 5px; border-radius: 3px; } .search-form { display: flex; min-width: 200px; height: 32px; } .search-form input { flex: 1; padding: 0 0.75rem; border: 1px solid var(--border); border-right: none; border-radius: 6px 0 0 6px; font-size: 0.85rem; } .search-form button { padding: 0 0.75rem; border: none; background: var(--primary); color: white; cursor: pointer; border-radius: 0 6px 6px 0; } .header-select { height: 32px; padding: 0 0.5rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.8rem; background: white; width: 130px; } .main-container { display: flex; flex: 1; overflow: hidden; } /* PANEL IZQUIERDO */ .contact-panel { width: 260px; /* Reducido de 300px */ background: white; border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; min-height: 0; } .panel-scroll { flex: 1; overflow-y: auto; padding: 1rem 0.75rem; } /* CONTENIDO CENTRAL */ .content-area { flex: 1; background: #f8fafc; display: flex; flex-direction: column; overflow: hidden; } /* BARRA DE NAVEGACIÓN SUPERIOR PERSISTENTE */ .section-nav-bar { background: white; border-bottom: 1px solid var(--border); display: flex; padding: 4px; gap: 4px; z-index: 100; } .nav-tab { flex: 1; padding: 6px 10px; font-size: 0.75rem; font-weight: 700; color: var(--text-muted); text-align: center; cursor: pointer; border-radius: 4px; transition: all 0.2s; border: 1px solid transparent; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav-tab:hover { background: #f1f5f9; color: var(--text-main); } .nav-tab.active { background: #eff6ff; color: var(--primary); border-color: #dbeafe; } #contentScroll { flex: 1; overflow-y: auto; padding: 0.5rem; display: flex; flex-direction: column; gap: 0.5rem; } /* SECCIONES COMPACTAS */ .main-section { background: white; border-radius: 8px; border: 1px solid var(--border); display: flex; flex-direction: column; transition: box-shadow 0.2s; } .section-header { padding: 0.5rem 0.75rem; background: #ffffff; display: flex; justify-content: space-between; align-items: center; cursor: pointer; min-height: 36px; border-bottom: 1px solid transparent; } .main-section:not(.collapsed) .section-header { border-bottom-color: var(--border); } .section-header h2 { margin: 0; font-size: 0.85rem; font-weight: 700; display: flex; align-items: center; gap: 0.5rem; } .section-header h2 svg { color: var(--primary); width: 16px; height: 16px; } .toggle-icon { transition: transform 0.2s; } .collapsed .toggle-icon { transform: rotate(-90deg); } .section-body { padding: 0.75rem; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.2s; } .collapsed .section-body { max-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; opacity: 0; pointer-events: none; } /* MAPA COMPACTO */ #mapView { width: 100%; height: 400px; border-radius: 6px; border: 1px solid var(--border); } /* CARDS COMPACTAS */ .report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.75rem; } .report-card { border: 1px solid var(--border); border-radius: 6px; } .card-header { padding: 0.4rem 0.75rem; background: #f8fafc; cursor: pointer; display: flex; justify-content: space-between; align-items: center; } .card-title { font-size: 0.65rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; } .card-body { padding: 0.5rem; position: relative; } .collapsed .card-body { display: none; } .editable-area { width: 100%; min-height: 60px; padding: 0.4rem; font-size: 0.85rem; border: 1px solid #e2e8f0; border-radius: 4px; resize: vertical; } /* IFRAME COMPACTO */ #iframeWrapper { width: 100%; height: 800px; border-radius: 6px; border: 1px solid var(--border); } /* FICHAS COMPACTAS */ .inmuebles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.75rem; } .inmueble-card { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: white; cursor: pointer; font-size: 0.8rem; } .inmueble-img { height: 140px; } .inmueble-content { padding: 0.75rem; } /* PANEL DE LOGS FLOTANTE O MINI */ #logPanel { position: fixed; bottom: 0; right: 0; left: 260px; background: #0f172a; border-top: 1px solid #334155; z-index: 2000; } .log-header { padding: 6px 15px; font-size: 10px; background: #1e293b; color: #94a3b8; display: flex; justify-content: space-between; cursor: pointer; } #debugContent { height: 100px; padding: 10px; font-family: 'JetBrains Mono', monospace; font-size: 10px; overflow-y: auto; color: #38bdf8; } .collapsed-logs #debugContent { display: none; } /* BOTONES ACCION ETIQUETAS */ .label-action-btn { background: none; border: none; padding: 2px; cursor: pointer; color: var(--text-muted); } .label-action-btn:hover { color: var(--primary); } /* UTILS */ .hidden { display: none !important; } .status-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 3000; padding: 8px; text-align: center; color: white; transform: translateY(-100%); transition: 0.3s; font-weight: 700; } .status-bar.active { transform: translateY(0); } .status-success { background: #10b981; } .status-error { background: #ef4444; } @keyframes spin { to { transform: rotate(360deg); } } .loader { width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; } /* MAP SECTION (NEW) */ #mapView { width: 100%; height: 500px; border-radius: 8px; border: 1px solid var(--border); background: #f1f5f9; z-index: 10; } /* INTERNAL CARDS (Contacto Section) */ .report-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } .report-card { background: #fdfdfd; border-radius: 8px; border: 1px solid var(--border); overflow: hidden; } .card-header { padding: 0.75rem 1rem; background: #f8fafc; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .card-title { font-size: 0.75rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .card-body { padding: 1rem; position: relative; } .report-card.collapsed .card-body { display: none; } .editable-area { width: 100%; min-height: 80px; border: 1px solid transparent; padding: 0.5rem; font-size: 0.95rem; background: transparent; resize: vertical; outline: none; line-height: 1.6; color: var(--text-main); } .is-editable .editable-area { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 0.75rem; } .is-editable .editable-area:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } /* PARCELA (Iframe) */ #iframeWrapper { width: 100%; height: 1200px; border: 1px solid var(--border); border-radius: 8px; overflow: auto; } /* FICHAS (Vertical Grid) */ .inmuebles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; } .inmueble-card { background: white; border-radius: 12px; border: 1px solid var(--border); overflow: hidden; transition: all 0.3s ease; display: flex; flex-direction: column; cursor: pointer; position: relative; } .inmueble-card:hover { transform: translateY(-4px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); border-color: var(--primary); } .inmueble-img { height: 180px; position: relative; overflow: hidden; } .inmueble-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .inmueble-card:hover .inmueble-img img { transform: scale(1.05); } .inmueble-content { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; } .inmueble-price { font-size: 1.25rem; font-weight: 800; color: var(--text-main); } .inmueble-ref { font-size: 0.75rem; color: var(--primary); font-weight: 700; background: #eff6ff; padding: 2px 8px; border-radius: 4px; } .inmueble-title { font-size: 0.9rem; font-weight: 600; color: var(--text-main); line-height: 1.4; min-height: 2.8em; } .inmueble-features { border-top: 1px solid #f1f5f9; padding-top: 0.75rem; margin-top: 0.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; font-size: 0.75rem; color: var(--text-muted); } /* FORMS & INPUTS (Left Panel) */ .form-group { margin-bottom: 1.25rem; } .form-label { font-size: 0.7rem; font-weight: 700; color: var(--text-muted); display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 0.05em; } .form-input, .phase-select { width: 100%; padding: 0.65rem 0.85rem; border: 1px solid var(--border); border-radius: 8px; font-size: 0.9rem; background: #fff; outline: none; transition: all 0.2s; } .form-input:focus, .phase-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } /* ACTIONS */ .card-actions { display: flex; gap: 0.5rem; position: absolute; top: 0.75rem; right: 1rem; z-index: 10; } .action-btn { background: white; border: 1px solid var(--border); border-radius: 6px; padding: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .action-btn:hover { background: #f8fafc; transform: scale(1.1); } .btn-ia { color: var(--ia-color); } .btn-ws { color: var(--whatsapp); } /* LOGS */ #logPanel { position: fixed; bottom: 0; left: 0; right: 0; background: #0f172a; border-top: 1px solid #334155; z-index: 2000; transition: transform 0.3s ease; } .log-header { padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; color: #94a3b8; font-size: 12px; font-weight: 700; background: #1e293b; } #debugContent { height: 150px; overflow-y: auto; padding: 15px 20px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #38bdf8; } .collapsed-logs #debugContent { display: none; } /* STATUS BAR */ .status-bar { padding: 0.75rem; text-align: center; font-size: 0.9rem; font-weight: 600; position: fixed; top: 0; left: 0; right: 0; z-index: 2500; transform: translateY(-100%); transition: transform 0.3s ease; } .status-bar.active { transform: translateY(0); } .status-success { background: #10b981; color: white; } .status-error { background: #ef4444; color: white; } /* UTILS */ .loader { width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: #fff; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .hidden { display: none !important; } /* RESPONSIVE */ @media (max-width: 1024px) { .contact-panel { width: 260px; } } @media (max-width: 768px) { .main-container { flex-direction: column; } .contact-panel { width: 100%; height: auto; border-right: none; border-bottom: 1px solid var(--border); } .header-controls { flex-direction: column; padding: 1rem; height: auto; } header.crm-header { height: auto; flex-direction: column; padding: 1rem; } .search-form { min-width: 100%; } #contentScroll { padding: 1rem; } } 

 :root { --primary: #2563eb; --primary-hover: #1d4ed8; --bg-main: #f1f5f9; --bg-panel: #ffffff; --text-main: #1e293b; --text-muted: #64748b; --border: #e2e8f0; --shadow: 0 1px 3px rgba(0, 0, 0, 0.1); --whatsapp: #25d366; --ia-color: #8b5cf6; --section-bg: #ffffff; } * { box-sizing: border-box; outline: none; } /* Minimalist Scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #f1f5f9; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } body { margin: 0; background: var(--bg-main); font-family: 'Inter', system-ui, sans-serif; height: 100vh; display: flex; flex-direction: column; overflow: hidden; color: var(--text-main); font-size: 13px; /* Más compacto */ } header.crm-header { background: white; padding: 0 1rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; z-index: 1000; height: 48px; /* Reducido de 64px */ flex-shrink: 0; } .brand-box { display: flex; align-items: baseline; gap: 0.3rem; } .brand { font-weight: 800; font-size: 1.1rem; color: var(--primary); letter-spacing: -0.025em; } .version-tag { font-size: 0.6rem; color: var(--text-muted); font-weight: 700; background: #f1f5f9; padding: 1px 5px; border-radius: 3px; } .search-form { display: flex; min-width: 200px; height: 32px; } .search-form input { flex: 1; padding: 0 0.75rem; border: 1px solid var(--border); border-right: none; border-radius: 6px 0 0 6px; font-size: 0.85rem; } .search-form button { padding: 0 0.75rem; border: none; background: var(--primary); color: white; cursor: pointer; border-radius: 0 6px 6px 0; } .header-select { height: 32px; padding: 0 0.5rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.8rem; background: white; width: 130px; } .main-container { display: flex; flex: 1; overflow: hidden; } /* PANEL IZQUIERDO */ .contact-panel { width: 260px; /* Reducido de 300px */ background: white; border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; min-height: 0; } .panel-scroll { flex: 1; overflow-y: auto; padding: 1rem 0.75rem; } /* CONTENIDO CENTRAL */ .content-area { flex: 1; background: #f8fafc; display: flex; flex-direction: column; overflow: hidden; } /* BARRA DE NAVEGACIÓN SUPERIOR PERSISTENTE */ .section-nav-bar { background: white; border-bottom: 1px solid var(--border); display: flex; padding: 4px; gap: 4px; z-index: 100; } .nav-tab { flex: 1; padding: 6px 10px; font-size: 0.75rem; font-weight: 700; color: var(--text-muted); text-align: center; cursor: pointer; border-radius: 4px; transition: all 0.2s; border: 1px solid transparent; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav-tab:hover { background: #f1f5f9; color: var(--text-main); } .nav-tab.active { background: #eff6ff; color: var(--primary); border-color: #dbeafe; } #contentScroll { flex: 1; padding: 0; display: flex; flex-direction: column; position: relative; background: white; overflow: hidden; } /* SECCIONES COMO PESTAÑAS FULL-HEIGHT */ .main-section { display: none; flex-direction: column; height: 100%; width: 100%; border: none; background: white; border-radius: 0; margin-bottom: 0px; } .main-section.active { display: flex; } .section-header { padding: 0.6rem 1rem; background: #f8fafc; display: flex; justify-content: space-between; align-items: center; min-height: 40px; border-bottom: 1px solid var(--border); cursor: default; } .section-header h2 { margin: 0; font-size: 0.9rem; font-weight: 700; display: flex; align-items: center; gap: 0.6rem; color: var(--primary); } .toggle-icon { display: none !important; } .section-body { flex: 1; padding: 1rem; overflow-y: auto; background: #ffffff; height: 100%; } /* MAPA COMPACTO */ #mapView { width: 100%; height: 100%; /* Ocupa todo el alto disponible en su body */ min-height: 500px; border-radius: 4px; border: 1px solid var(--border); } /* CARDS COMPACTAS */ .report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.75rem; } .report-card { border: 1px solid var(--border); border-radius: 6px; } .card-header { padding: 0.4rem 0.75rem; background: #f8fafc; cursor: pointer; display: flex; justify-content: space-between; align-items: center; } .card-title { font-size: 0.65rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; } .card-body { padding: 0.5rem; position: relative; } .collapsed .card-body { display: none; } .editable-area { width: 100%; min-height: 60px; padding: 0.4rem; font-size: 0.85rem; border: 1px solid #e2e8f0; border-radius: 4px; resize: vertical; } /* IFRAME COMPACTO */ #iframeWrapper { width: 100%; height: 100%; border-radius: 4px; border: 1px solid var(--border); } /* FICHAS COMPACTAS */ .inmuebles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.75rem; } .inmueble-card { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: white; cursor: pointer; font-size: 0.8rem; } .inmueble-img { height: 140px; } .inmueble-content { padding: 0.75rem; } /* PANEL DE LOGS FLOTANTE O MINI */ #logPanel { position: fixed; bottom: 0; right: 0; left: 260px; background: #0f172a; border-top: 1px solid #334155; z-index: 2000; } .log-header { padding: 6px 15px; font-size: 10px; background: #1e293b; color: #94a3b8; display: flex; justify-content: space-between; cursor: pointer; } #debugContent { height: 100px; padding: 10px; font-family: 'JetBrains Mono', monospace; font-size: 10px; overflow-y: auto; color: #38bdf8; } .collapsed-logs #debugContent { display: none; } /* BOTONES ACCION ETIQUETAS */ .label-action-btn { background: none; border: none; padding: 2px; cursor: pointer; color: var(--text-muted); } .label-action-btn:hover { color: var(--primary); } /* UTILS */ .hidden { display: none !important; } .status-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 3000; padding: 8px; text-align: center; color: white; transform: translateY(-100%); transition: 0.3s; font-weight: 700; } .status-bar.active { transform: translateY(0); } .status-success { background: #10b981; } .status-error { background: #ef4444; } @keyframes spin { to { transform: rotate(360deg); } } .loader { width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; } /* MAP SECTION (NEW) */ #mapView { width: 100%; height: 500px; border-radius: 8px; border: 1px solid var(--border); background: #f1f5f9; z-index: 10; } /* INTERNAL CARDS (Contacto Section) */ .report-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } .report-card { background: #fdfdfd; border-radius: 8px; border: 1px solid var(--border); overflow: hidden; } .card-header { padding: 0.75rem 1rem; background: #f8fafc; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .card-title { font-size: 0.75rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .card-body { padding: 1rem; position: relative; } .report-card.collapsed .card-body { display: none; } .editable-area { width: 100%; min-height: 80px; border: 1px solid transparent; padding: 0.5rem; font-size: 0.95rem; background: transparent; resize: vertical; outline: none; line-height: 1.6; color: var(--text-main); } .is-editable .editable-area { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 0.75rem; } .is-editable .editable-area:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } /* PARCELA (Iframe) */ #iframeWrapper { width: 100%; height: 1200px; border: 1px solid var(--border); border-radius: 8px; overflow: auto; } /* FICHAS (Vertical Grid) */ .inmuebles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; } .inmueble-card { background: white; border-radius: 12px; border: 1px solid var(--border); overflow: hidden; transition: all 0.3s ease; display: flex; flex-direction: column; cursor: pointer; position: relative; } .inmueble-card:hover { transform: translateY(-4px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); border-color: var(--primary); } .inmueble-img { height: 180px; position: relative; overflow: hidden; } .inmueble-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .inmueble-card:hover .inmueble-img img { transform: scale(1.05); } .inmueble-content { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; } .inmueble-price { font-size: 1.25rem; font-weight: 800; color: var(--text-main); } .inmueble-ref { font-size: 0.75rem; color: var(--primary); font-weight: 700; background: #eff6ff; padding: 2px 8px; border-radius: 4px; } .inmueble-title { font-size: 0.9rem; font-weight: 600; color: var(--text-main); line-height: 1.4; min-height: 2.8em; } .inmueble-features { border-top: 1px solid #f1f5f9; padding-top: 0.75rem; margin-top: 0.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; font-size: 0.75rem; color: var(--text-muted); } /* FORMS & INPUTS (Left Panel) */ .form-group { margin-bottom: 1.25rem; } .form-label { font-size: 0.7rem; font-weight: 700; color: var(--text-muted); display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 0.05em; } .form-input, .phase-select { width: 100%; padding: 0.65rem 0.85rem; border: 1px solid var(--border); border-radius: 8px; font-size: 0.9rem; background: #fff; outline: none; transition: all 0.2s; } .form-input:focus, .phase-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } /* ACTIONS */ .card-actions { display: flex; gap: 0.5rem; position: absolute; top: 0.75rem; right: 1rem; z-index: 10; } .action-btn { background: white; border: 1px solid var(--border); border-radius: 6px; padding: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .action-btn:hover { background: #f8fafc; transform: scale(1.1); } .btn-ia { color: var(--ia-color); } .btn-ws { color: var(--whatsapp); } /* LOGS */ #logPanel { position: fixed; bottom: 0; left: 0; right: 0; background: #0f172a; border-top: 1px solid #334155; z-index: 2000; transition: transform 0.3s ease; } .log-header { padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; color: #94a3b8; font-size: 12px; font-weight: 700; background: #1e293b; } #debugContent { height: 150px; overflow-y: auto; padding: 15px 20px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #38bdf8; } .collapsed-logs #debugContent { display: none; } /* STATUS BAR */ .status-bar { padding: 0.75rem; text-align: center; font-size: 0.9rem; font-weight: 600; position: fixed; top: 0; left: 0; right: 0; z-index: 2500; transform: translateY(-100%); transition: transform 0.3s ease; } .status-bar.active { transform: translateY(0); } .status-success { background: #10b981; color: white; } .status-error { background: #ef4444; color: white; } /* UTILS */ .loader { width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: #fff; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .hidden { display: none !important; } /* RESPONSIVE */ @media (max-width: 1024px) { .contact-panel { width: 260px; } } @media (max-width: 768px) { .main-container { flex-direction: column; } .contact-panel { width: 100%; height: auto; border-right: none; border-bottom: 1px solid var(--border); } .header-controls { flex-direction: column; padding: 1rem; height: auto; } header.crm-header { height: auto; flex-direction: column; padding: 1rem; } .search-form { min-width: 100%; } #contentScroll { padding: 1rem; } } 

 :root { --primary: #2563eb; --primary-hover: #1d4ed8; --bg-main: #f1f5f9; --bg-panel: #ffffff; --text-main: #1e293b; --text-muted: #64748b; --border: #e2e8f0; --shadow: 0 1px 3px rgba(0, 0, 0, 0.1); --whatsapp: #25d366; --ia-color: #8b5cf6; --section-bg: #ffffff; } * { box-sizing: border-box; outline: none; } /* Minimalist Scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #f1f5f9; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } body { margin: 0; background: var(--bg-main); font-family: 'Inter', system-ui, sans-serif; height: 100vh; display: flex; flex-direction: column; overflow: hidden; color: var(--text-main); font-size: 13px; /* Más compacto */ } header.crm-header { background: white; padding: 0 1rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; z-index: 1000; height: 48px; /* Reducido de 64px */ flex-shrink: 0; } .brand-box { display: flex; align-items: baseline; gap: 0.3rem; } .brand { font-weight: 800; font-size: 1.1rem; color: var(--primary); letter-spacing: -0.025em; } .version-tag { font-size: 0.6rem; color: var(--text-muted); font-weight: 700; background: #f1f5f9; padding: 1px 5px; border-radius: 3px; } .search-form { display: flex; min-width: 200px; height: 32px; } .search-form input { flex: 1; padding: 0 0.75rem; border: 1px solid var(--border); border-right: none; border-radius: 6px 0 0 6px; font-size: 0.85rem; } .search-form button { padding: 0 0.75rem; border: none; background: var(--primary); color: white; cursor: pointer; border-radius: 0 6px 6px 0; } .header-select { height: 32px; padding: 0 0.5rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.8rem; background: white; width: 130px; } .main-container { display: flex; flex: 1; overflow: hidden; } /* PANEL IZQUIERDO */ .contact-panel { width: 260px; /* Reducido de 300px */ background: white; border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; min-height: 0; } .panel-scroll { flex: 1; overflow-y: auto; padding: 1rem 0.75rem; } /* CONTENIDO CENTRAL */ .content-area { flex: 1; background: #f8fafc; display: flex; flex-direction: column; overflow: hidden; } /* BARRA DE NAVEGACIÓN SUPERIOR PERSISTENTE */ .section-nav-bar { background: white; border-bottom: 1px solid var(--border); display: flex; padding: 4px; gap: 4px; z-index: 100; } .nav-tab { flex: 1; padding: 6px 10px; font-size: 0.75rem; font-weight: 700; color: var(--text-muted); text-align: center; cursor: pointer; border-radius: 4px; transition: all 0.2s; border: 1px solid transparent; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav-tab:hover { background: #f1f5f9; color: var(--text-main); } .nav-tab.active { background: #eff6ff; color: var(--primary); border-color: #dbeafe; } #contentScroll { flex: 1; padding: 0; display: flex; flex-direction: column; position: relative; background: white; overflow: hidden; } /* SECCIONES COMO PESTAÑAS FULL-HEIGHT */ .main-section { display: none; flex-direction: column; height: 100%; width: 100%; border: none; background: white; border-radius: 0; margin-bottom: 0px; } .main-section.active { display: flex; } .section-header { padding: 0.6rem 1rem; background: #f8fafc; display: flex; justify-content: space-between; align-items: center; min-height: 40px; border-bottom: 1px solid var(--border); cursor: default; } .section-header h2 { margin: 0; font-size: 0.9rem; font-weight: 700; display: flex; align-items: center; gap: 0.6rem; color: var(--primary); } .toggle-icon { display: none !important; } .section-body { flex: 1; padding: 1rem; overflow-y: auto; background: #ffffff; height: 100%; } /* MAPA COMPACTO */ #mapView { width: 100%; height: 100%; /* Ocupa todo el alto disponible en su body */ min-height: 500px; border-radius: 4px; border: 1px solid var(--border); } /* CARDS COMPACTAS */ .report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.75rem; } .report-card { border: 1px solid var(--border); border-radius: 6px; } .card-header { padding: 0.4rem 0.75rem; background: #f8fafc; cursor: pointer; display: flex; justify-content: space-between; align-items: center; } .card-title { font-size: 0.65rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; } .card-body { padding: 0.5rem; position: relative; } .collapsed .card-body { display: none; } .editable-area { width: 100%; min-height: 60px; padding: 0.4rem; font-size: 0.85rem; border: 1px solid #e2e8f0; border-radius: 4px; resize: vertical; } /* IFRAME COMPACTO */ #iframeWrapper { width: 100%; height: 100%; border-radius: 4px; border: 1px solid var(--border); } /* FICHAS COMPACTAS */ .inmuebles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.75rem; } .inmueble-card { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: white; cursor: pointer; font-size: 0.8rem; } .inmueble-img { height: 140px; } .inmueble-content { padding: 0.75rem; } /* PANEL DE LOGS FLOTANTE O MINI */ #logPanel { position: fixed; bottom: 0; right: 0; left: 260px; background: #0f172a; border-top: 1px solid #334155; z-index: 2000; } .log-header { padding: 6px 15px; font-size: 10px; background: #1e293b; color: #94a3b8; display: flex; justify-content: space-between; cursor: pointer; } #debugContent { height: 100px; padding: 10px; font-family: 'JetBrains Mono', monospace; font-size: 10px; overflow-y: auto; color: #38bdf8; } .collapsed-logs #debugContent { display: none; } /* BOTONES ACCION ETIQUETAS */ .label-action-btn { background: none; border: none; padding: 2px; cursor: pointer; color: var(--text-muted); } .label-action-btn:hover { color: var(--primary); } /* UTILS */ .hidden { display: none !important; } .status-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 3000; padding: 8px; text-align: center; color: white; transform: translateY(-100%); transition: 0.3s; font-weight: 700; } .status-bar.active { transform: translateY(0); } .status-success { background: #10b981; } .status-error { background: #ef4444; } @keyframes spin { to { transform: rotate(360deg); } } .loader { width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; } /* MAP SECTION (NEW) */ #mapView { width: 100%; height: 500px; border-radius: 8px; border: 1px solid var(--border); background: #f1f5f9; z-index: 10; } /* INTERNAL CARDS (Contacto Section) */ .report-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } .report-card { background: #fdfdfd; border-radius: 8px; border: 1px solid var(--border); overflow: hidden; } .card-header { padding: 0.75rem 1rem; background: #f8fafc; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .card-title { font-size: 0.75rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .card-body { padding: 1rem; position: relative; } .report-card.collapsed .card-body { display: none; } .editable-area { width: 100%; min-height: 80px; border: 1px solid transparent; padding: 0.5rem; font-size: 0.95rem; background: transparent; resize: vertical; outline: none; line-height: 1.6; color: var(--text-main); } .is-editable .editable-area { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 0.75rem; } .is-editable .editable-area:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } /* PARCELA (Iframe) */ #iframeWrapper { width: 100%; height: 1200px; border: 1px solid var(--border); border-radius: 8px; overflow: auto; } /* FICHAS (Vertical Grid) */ .inmuebles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; } .inmueble-card { background: white; border-radius: 12px; border: 1px solid var(--border); overflow: hidden; transition: all 0.3s ease; display: flex; flex-direction: column; cursor: pointer; position: relative; } .inmueble-card:hover { transform: translateY(-4px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); border-color: var(--primary); } .inmueble-img { height: 180px; position: relative; overflow: hidden; } .inmueble-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .inmueble-card:hover .inmueble-img img { transform: scale(1.05); } .inmueble-content { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; } .inmueble-price { font-size: 1.25rem; font-weight: 800; color: var(--text-main); } .inmueble-ref { font-size: 0.75rem; color: var(--primary); font-weight: 700; background: #eff6ff; padding: 2px 8px; border-radius: 4px; } .inmueble-title { font-size: 0.9rem; font-weight: 600; color: var(--text-main); line-height: 1.4; min-height: 2.8em; } .inmueble-features { border-top: 1px solid #f1f5f9; padding-top: 0.75rem; margin-top: 0.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; font-size: 0.75rem; color: var(--text-muted); } /* FORMS & INPUTS (Left Panel) */ .form-group { margin-bottom: 1.25rem; } .form-label { font-size: 0.7rem; font-weight: 700; color: var(--text-muted); display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 0.05em; } .form-input, .phase-select { width: 100%; padding: 0.65rem 0.85rem; border: 1px solid var(--border); border-radius: 8px; font-size: 0.9rem; background: #fff; outline: none; transition: all 0.2s; } .form-input:focus, .phase-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } /* ACTIONS */ .card-actions { display: flex; gap: 0.5rem; position: absolute; top: 0.75rem; right: 1rem; z-index: 10; } .action-btn { background: white; border: 1px solid var(--border); border-radius: 6px; padding: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .action-btn:hover { background: #f8fafc; transform: scale(1.1); } .btn-ia { color: var(--ia-color); } .btn-ws { color: var(--whatsapp); } /* LOGS */ #logPanel { position: fixed; bottom: 0; left: 0; right: 0; background: #0f172a; border-top: 1px solid #334155; z-index: 2000; transition: transform 0.3s ease; } .log-header { padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; color: #94a3b8; font-size: 12px; font-weight: 700; background: #1e293b; } #debugContent { height: 150px; overflow-y: auto; padding: 15px 20px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #38bdf8; } .collapsed-logs #debugContent { display: none; } /* STATUS BAR */ .status-bar { padding: 0.75rem; text-align: center; font-size: 0.9rem; font-weight: 600; position: fixed; top: 0; left: 0; right: 0; z-index: 2500; transform: translateY(-100%); transition: transform 0.3s ease; } .status-bar.active { transform: translateY(0); } .status-success { background: #10b981; color: white; } .status-error { background: #ef4444; color: white; } /* UTILS */ .loader { width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: #fff; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .hidden { display: none !important; } /* RESPONSIVE */ @media (max-width: 1024px) { .contact-panel { width: 260px; } } @media (max-width: 768px) { body { font-size: 12px; } header.crm-header { height: auto; padding: 0.5rem; gap: 0.5rem; } .header-controls { width: 100%; gap: 0.25rem; justify-content: space-between; } .header-select, .search-form { flex: 1; min-width: 0; height: 28px; font-size: 0.75rem; } .main-container { flex-direction: column-reverse; /* Secciones arriba, panel contacto abajo */ } .contact-panel { width: 100%; height: 50%; /* Mitad de pantalla para el panel */ border-top: 1px solid var(--border); border-bottom: none; } .content-area { height: 50%; /* Mitad de pantalla para el contenido */ border-bottom: 1px solid var(--border); } .section-nav-bar { padding: 2px; background: #f8fafc; position: sticky; top: 0; z-index: 1000; } .nav-tab { padding: 4px 2px; font-size: 0.65rem; } #logPanel { left: 0; font-size: 9px; } #debugContent { height: 80px; } } 

 :root { --primary: #2563eb; --primary-hover: #1d4ed8; --bg-main: #f1f5f9; --bg-panel: #ffffff; --text-main: #1e293b; --text-muted: #64748b; --border: #e2e8f0; --shadow: 0 1px 3px rgba(0, 0, 0, 0.1); --whatsapp: #25d366; --ia-color: #8b5cf6; --section-bg: #ffffff; } * { box-sizing: border-box; outline: none; } /* Minimalist Scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #f1f5f9; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } body { margin: 0; background: var(--bg-main); font-family: 'Inter', system-ui, sans-serif; height: 100vh; display: flex; flex-direction: column; overflow: hidden; color: var(--text-main); font-size: 13px; /* Más compacto */ } header.crm-header { background: white; padding: 0 1rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; z-index: 1000; height: 48px; /* Reducido de 64px */ flex-shrink: 0; } .brand-box { display: flex; align-items: baseline; gap: 0.3rem; } .brand { font-weight: 800; font-size: 1.1rem; color: var(--primary); letter-spacing: -0.025em; } .version-tag { font-size: 0.6rem; color: var(--text-muted); font-weight: 700; background: #f1f5f9; padding: 1px 5px; border-radius: 3px; } .search-form { display: flex; min-width: 200px; height: 32px; } .search-form input { flex: 1; padding: 0 0.75rem; border: 1px solid var(--border); border-right: none; border-radius: 6px 0 0 6px; font-size: 0.85rem; } .search-form button { padding: 0 0.75rem; border: none; background: var(--primary); color: white; cursor: pointer; border-radius: 0 6px 6px 0; } .header-select { height: 32px; padding: 0 0.5rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.8rem; background: white; width: 130px; } .main-container { display: flex; flex: 1; overflow: hidden; position: relative; } /* PANEL IZQUIERDO (SIDEBAR) */ .contact-panel { width: 260px; background: white; border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; min-height: 0; z-index: 10; } .panel-scroll { flex: 1; overflow-y: auto; padding: 1rem 0.75rem; } /* CONTENIDO CENTRAL */ .content-area { flex: 1; background: #f8fafc; display: flex; flex-direction: column; overflow: hidden; position: relative; } /* BARRA DE NAVEGACIÓN SUPERIOR PERSISTENTE */ .section-nav-bar { background: white; border-bottom: 1px solid var(--border); display: flex; padding: 4px; gap: 4px; z-index: 100; flex-shrink: 0; } .nav-tab { flex: 1; padding: 8px 10px; font-size: 0.75rem; font-weight: 700; color: var(--text-muted); text-align: center; cursor: pointer; border-radius: 4px; transition: all 0.2s; border: 1px solid transparent; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; justify-content: center; gap: 6px; } /* Ocultar tab de contacto en desktop ya que está el sidebar */ .tab-mobile-only { display: none; } .nav-tab:hover { background: #f1f5f9; color: var(--text-main); } .nav-tab.active { background: #eff6ff; color: var(--primary); border-color: #dbeafe; } #contentScroll { flex: 1; padding: 0; display: flex; flex-direction: column; position: relative; background: white; overflow: hidden; } /* SECCIONES COMO PESTAÑAS FULL-HEIGHT */ .main-section { display: none; flex-direction: column; height: 100%; width: 100%; border: none; background: white; border-radius: 0; margin-bottom: 0px; } .main-section.active { display: flex; } .section-header { padding: 0.6rem 1rem; background: #f8fafc; display: flex; justify-content: space-between; align-items: center; min-height: 40px; border-bottom: 1px solid var(--border); cursor: default; } .section-header h2 { margin: 0; font-size: 0.9rem; font-weight: 700; display: flex; align-items: center; gap: 0.6rem; color: var(--primary); } .toggle-icon { display: none !important; } .section-body { flex: 1; padding: 1rem; overflow-y: auto; background: #ffffff; height: 100%; } /* MAPA COMPACTO */ #mapView { width: 100%; height: 100%; /* Ocupa todo el alto disponible en su body */ min-height: 500px; border-radius: 4px; border: 1px solid var(--border); } /* CARDS COMPACTAS */ .report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.75rem; } .report-card { border: 1px solid var(--border); border-radius: 6px; } .card-header { padding: 0.4rem 0.75rem; background: #f8fafc; cursor: pointer; display: flex; justify-content: space-between; align-items: center; } .card-title { font-size: 0.65rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; } .card-body { padding: 0.5rem; position: relative; } .collapsed .card-body { display: none; } .editable-area { width: 100%; min-height: 60px; padding: 0.4rem; font-size: 0.85rem; border: 1px solid #e2e8f0; border-radius: 4px; resize: vertical; } /* IFRAME COMPACTO */ #iframeWrapper { width: 100%; height: 100%; border-radius: 4px; border: 1px solid var(--border); } /* FICHAS COMPACTAS */ .inmuebles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.75rem; } .inmueble-card { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: white; cursor: pointer; font-size: 0.8rem; } .inmueble-img { height: 140px; } .inmueble-content { padding: 0.75rem; } /* PANEL DE LOGS FLOTANTE O MINI */ #logPanel { position: fixed; bottom: 0; right: 0; left: 260px; background: #0f172a; border-top: 1px solid #334155; z-index: 2000; } .log-header { padding: 6px 15px; font-size: 10px; background: #1e293b; color: #94a3b8; display: flex; justify-content: space-between; cursor: pointer; } #debugContent { height: 100px; padding: 10px; font-family: 'JetBrains Mono', monospace; font-size: 10px; overflow-y: auto; color: #38bdf8; } .collapsed-logs #debugContent { display: none; } /* BOTONES ACCION ETIQUETAS */ .label-action-btn { background: none; border: none; padding: 2px; cursor: pointer; color: var(--text-muted); } .label-action-btn:hover { color: var(--primary); } /* UTILS */ .hidden { display: none !important; } .status-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 3000; padding: 8px; text-align: center; color: white; transform: translateY(-100%); transition: 0.3s; font-weight: 700; } .status-bar.active { transform: translateY(0); } .status-success { background: #10b981; } .status-error { background: #ef4444; } @keyframes spin { to { transform: rotate(360deg); } } .loader { width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; } /* MAP SECTION (NEW) */ #mapView { width: 100%; height: 500px; border-radius: 8px; border: 1px solid var(--border); background: #f1f5f9; z-index: 10; } /* INTERNAL CARDS (Contacto Section) */ .report-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } .report-card { background: #fdfdfd; border-radius: 8px; border: 1px solid var(--border); overflow: hidden; } .card-header { padding: 0.75rem 1rem; background: #f8fafc; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .card-title { font-size: 0.75rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .card-body { padding: 1rem; position: relative; } .report-card.collapsed .card-body { display: none; } .editable-area { width: 100%; min-height: 80px; border: 1px solid transparent; padding: 0.5rem; font-size: 0.95rem; background: transparent; resize: vertical; outline: none; line-height: 1.6; color: var(--text-main); } .is-editable .editable-area { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 0.75rem; } .is-editable .editable-area:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } /* PARCELA (Iframe) */ #iframeWrapper { width: 100%; height: 1200px; border: 1px solid var(--border); border-radius: 8px; overflow: auto; } /* FICHAS (Vertical Grid) */ .inmuebles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; } .inmueble-card { background: white; border-radius: 12px; border: 1px solid var(--border); overflow: hidden; transition: all 0.3s ease; display: flex; flex-direction: column; cursor: pointer; position: relative; } .inmueble-card:hover { transform: translateY(-4px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); border-color: var(--primary); } .inmueble-img { height: 180px; position: relative; overflow: hidden; } .inmueble-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .inmueble-card:hover .inmueble-img img { transform: scale(1.05); } .inmueble-content { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; } .inmueble-price { font-size: 1.25rem; font-weight: 800; color: var(--text-main); } .inmueble-ref { font-size: 0.75rem; color: var(--primary); font-weight: 700; background: #eff6ff; padding: 2px 8px; border-radius: 4px; } .inmueble-title { font-size: 0.9rem; font-weight: 600; color: var(--text-main); line-height: 1.4; min-height: 2.8em; } .inmueble-features { border-top: 1px solid #f1f5f9; padding-top: 0.75rem; margin-top: 0.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; font-size: 0.75rem; color: var(--text-muted); } /* FORMS & INPUTS (Left Panel) */ .form-group { margin-bottom: 1.25rem; } .form-label { font-size: 0.7rem; font-weight: 700; color: var(--text-muted); display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 0.05em; } .form-input, .phase-select { width: 100%; padding: 0.65rem 0.85rem; border: 1px solid var(--border); border-radius: 8px; font-size: 0.9rem; background: #fff; outline: none; transition: all 0.2s; } .form-input:focus, .phase-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } /* ACTIONS */ .card-actions { display: flex; gap: 0.5rem; position: absolute; top: 0.75rem; right: 1rem; z-index: 10; } .action-btn { background: white; border: 1px solid var(--border); border-radius: 6px; padding: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .action-btn:hover { background: #f8fafc; transform: scale(1.1); } .btn-ia { color: var(--ia-color); } .btn-ws { color: var(--whatsapp); } /* LOGS */ #logPanel { position: fixed; bottom: 0; left: 0; right: 0; background: #0f172a; border-top: 1px solid #334155; z-index: 2000; transition: transform 0.3s ease; } .log-header { padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; color: #94a3b8; font-size: 12px; font-weight: 700; background: #1e293b; } #debugContent { height: 150px; overflow-y: auto; padding: 15px 20px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #38bdf8; } .collapsed-logs #debugContent { display: none; } /* STATUS BAR */ .status-bar { padding: 0.75rem; text-align: center; font-size: 0.9rem; font-weight: 600; position: fixed; top: 0; left: 0; right: 0; z-index: 2500; transform: translateY(-100%); transition: transform 0.3s ease; } .status-bar.active { transform: translateY(0); } .status-success { background: #10b981; color: white; } .status-error { background: #ef4444; color: white; } /* UTILS */ .loader { width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: #fff; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .hidden { display: none !important; } /* RESPONSIVE */ @media (max-width: 1024px) { .contact-panel { width: 260px; } } @media (max-width: 768px) { body { font-size: 12px; } header.crm-header { height: auto; padding: 0.5rem; flex-direction: row; flex-wrap: wrap; gap: 0.5rem; } .header-left { width: 100%; justify-content: space-between; margin-bottom: 2px; } .header-controls { width: 100%; gap: 0.25rem; display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; } .header-select, .search-form { width: 100%; min-width: 0; height: 30px; font-size: 0.75rem; } .search-form { grid-column: 1 / span 3; } .main-container { flex-direction: column; } /* En móvil, el sidebar es una pestaña más */ .contact-panel { display: none; /* Oculto por defecto en móvil */ width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-right: none; z-index: 50; /* Por debajo de la barra de navegación de pestañas */ } .contact-panel.active { display: flex; } .tab-mobile-only { display: flex; } .content-area { height: 100%; width: 100%; } .section-nav-bar { padding: 4px; background: #f8fafc; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } .nav-tab { padding: 6px 4px; font-size: 0.7rem; } #logPanel { left: 0; font-size: 9px; } #debugContent { height: 80px; } } 

 :root { --primary: #2563eb; --primary-hover: #1d4ed8; --bg-main: #f1f5f9; --bg-panel: #ffffff; --text-main: #1e293b; --text-muted: #64748b; --border: #e2e8f0; --shadow: 0 1px 3px rgba(0, 0, 0, 0.1); --whatsapp: #25d366; --ia-color: #8b5cf6; --section-bg: #ffffff; } * { box-sizing: border-box; outline: none; } /* Minimalist Scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #f1f5f9; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } body { margin: 0; background: var(--bg-main); font-family: 'Inter', system-ui, sans-serif; height: 100vh; display: flex; flex-direction: column; overflow: hidden; color: var(--text-main); font-size: 13px; /* Más compacto */ } header.crm-header { background: white; padding: 0 1rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; z-index: 1000; height: 48px; /* Reducido de 64px */ flex-shrink: 0; } .brand-box { display: flex; align-items: baseline; gap: 0.3rem; } .brand { font-weight: 800; font-size: 1.1rem; color: var(--primary); letter-spacing: -0.025em; } .version-tag { font-size: 0.6rem; color: var(--text-muted); font-weight: 700; background: #f1f5f9; padding: 1px 5px; border-radius: 3px; } .search-form { display: flex; min-width: 200px; height: 32px; } .search-form input { flex: 1; padding: 0 0.75rem; border: 1px solid var(--border); border-right: none; border-radius: 6px 0 0 6px; font-size: 0.85rem; } .search-form button { padding: 0 0.75rem; border: none; background: var(--primary); color: white; cursor: pointer; border-radius: 0 6px 6px 0; } .header-select { height: 32px; padding: 0 0.5rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.8rem; background: white; width: 130px; } .main-container { display: flex; flex: 1; overflow: hidden; position: relative; } /* PANEL IZQUIERDO (SIDEBAR) */ .contact-panel { width: 260px; background: white; border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; min-height: 0; z-index: 10; } .panel-scroll { flex: 1; overflow-y: auto; padding: 1rem 0.75rem; } /* CONTENIDO CENTRAL */ .content-area { flex: 1; background: #f8fafc; display: flex; flex-direction: column; overflow: hidden; position: relative; } /* BARRA DE NAVEGACIÓN SUPERIOR PERSISTENTE */ .section-nav-bar { background: white; border-bottom: 1px solid var(--border); display: flex; padding: 4px; gap: 4px; z-index: 100; flex-shrink: 0; } .nav-tab { flex: 1; padding: 8px 10px; font-size: 0.75rem; font-weight: 700; color: var(--text-muted); text-align: center; cursor: pointer; border-radius: 4px; transition: all 0.2s; border: 1px solid transparent; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; justify-content: center; gap: 6px; } /* Ocultar tab de contacto en desktop ya que está el sidebar */ .tab-mobile-only { display: none; } .nav-tab:hover { background: #f1f5f9; color: var(--text-main); } .nav-tab.active { background: #eff6ff; color: var(--primary); border-color: #dbeafe; } #contentScroll { flex: 1; padding: 0; display: flex; flex-direction: column; position: relative; background: white; overflow: hidden; } /* SECCIONES COMO PESTAÑAS FULL-HEIGHT */ .main-section { display: none; flex-direction: column; height: 100%; width: 100%; border: none; background: white; border-radius: 0; margin-bottom: 0px; } .main-section.active { display: flex; } .section-header { padding: 0.6rem 1rem; background: #f8fafc; display: flex; justify-content: space-between; align-items: center; min-height: 40px; border-bottom: 1px solid var(--border); cursor: default; } .section-header h2 { margin: 0; font-size: 0.9rem; font-weight: 700; display: flex; align-items: center; gap: 0.6rem; color: var(--primary); } .toggle-icon { display: none !important; } .section-body { flex: 1; padding: 0.5rem; /* Reducido de 1rem */ overflow-y: auto; background: #ffffff; height: 100%; } /* MAPA COMPACTO */ #mapView { width: 100%; height: 100%; /* Ocupa todo el alto disponible en su body */ min-height: 500px; border-radius: 4px; border: 1px solid var(--border); } /* CARDS COMPACTAS */ .report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.4rem; /* Reducido de 0.75rem */ } .report-card { border: 1px solid var(--border); border-radius: 6px; } .card-header { padding: 0.25rem 0.5rem; /* Reducido de 0.4rem 0.75rem */ background: #f8fafc; cursor: pointer; display: flex; justify-content: space-between; align-items: center; } .card-title { font-size: 0.65rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; } .card-body { padding: 0.25rem; /* Reducido de 0.5rem */ position: relative; } .collapsed .card-body { display: none; } .editable-area { width: 100%; min-height: 40px; /* Reducido de 60px */ padding: 0.3rem; /* Reducido de 0.4rem */ font-size: 0.8rem; /* Ligeramente más pequeña */ border: 1px solid #e2e8f0; border-radius: 4px; resize: vertical; } /* IFRAME COMPACTO */ #iframeWrapper { width: 100%; height: 100%; border-radius: 4px; border: 1px solid var(--border); } /* FICHAS COMPACTAS */ .inmuebles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.75rem; } .inmueble-card { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: white; cursor: pointer; font-size: 0.8rem; } .inmueble-img { height: 140px; } .inmueble-content { padding: 0.75rem; } /* PANEL DE LOGS FLOTANTE O MINI */ #logPanel { position: fixed; bottom: 0; right: 0; left: 260px; background: #0f172a; border-top: 1px solid #334155; z-index: 2000; } .log-header { padding: 6px 15px; font-size: 10px; background: #1e293b; color: #94a3b8; display: flex; justify-content: space-between; cursor: pointer; } #debugContent { height: 100px; padding: 10px; font-family: 'JetBrains Mono', monospace; font-size: 10px; overflow-y: auto; color: #38bdf8; } .collapsed-logs #debugContent { display: none; } /* BOTONES ACCION ETIQUETAS */ .label-action-btn { background: none; border: none; padding: 2px; cursor: pointer; color: var(--text-muted); } .label-action-btn:hover { color: var(--primary); } /* UTILS */ .hidden { display: none !important; } .status-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 3000; padding: 8px; text-align: center; color: white; transform: translateY(-100%); transition: 0.3s; font-weight: 700; } .status-bar.active { transform: translateY(0); } .status-success { background: #10b981; } .status-error { background: #ef4444; } @keyframes spin { to { transform: rotate(360deg); } } .loader { width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; } /* MAP SECTION (NEW) */ #mapView { width: 100%; height: 500px; border-radius: 8px; border: 1px solid var(--border); background: #f1f5f9; z-index: 10; } /* INTERNAL CARDS (Contacto Section) */ .report-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } .report-card { background: #fdfdfd; border-radius: 8px; border: 1px solid var(--border); overflow: hidden; } .card-header { padding: 0.75rem 1rem; background: #f8fafc; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .card-title { font-size: 0.75rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .card-body { padding: 1rem; position: relative; } .report-card.collapsed .card-body { display: none; } .editable-area { width: 100%; min-height: 80px; border: 1px solid transparent; padding: 0.5rem; font-size: 0.95rem; background: transparent; resize: vertical; outline: none; line-height: 1.6; color: var(--text-main); } .is-editable .editable-area { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 0.75rem; } .is-editable .editable-area:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } /* PARCELA (Iframe) */ #iframeWrapper { width: 100%; height: 1200px; border: 1px solid var(--border); border-radius: 8px; overflow: auto; } /* FICHAS (Vertical Grid) */ .inmuebles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; } .inmueble-card { background: white; border-radius: 12px; border: 1px solid var(--border); overflow: hidden; transition: all 0.3s ease; display: flex; flex-direction: column; cursor: pointer; position: relative; } .inmueble-card:hover { transform: translateY(-4px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); border-color: var(--primary); } .inmueble-img { height: 180px; position: relative; overflow: hidden; } .inmueble-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .inmueble-card:hover .inmueble-img img { transform: scale(1.05); } .inmueble-content { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; } .inmueble-price { font-size: 1.25rem; font-weight: 800; color: var(--text-main); } .inmueble-ref { font-size: 0.75rem; color: var(--primary); font-weight: 700; background: #eff6ff; padding: 2px 8px; border-radius: 4px; } .inmueble-title { font-size: 0.9rem; font-weight: 600; color: var(--text-main); line-height: 1.4; min-height: 2.8em; } .inmueble-features { border-top: 1px solid #f1f5f9; padding-top: 0.75rem; margin-top: 0.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; font-size: 0.75rem; color: var(--text-muted); } /* FORMS & INPUTS (Left Panel) */ .form-group { margin-bottom: 1.25rem; } .form-label { font-size: 0.7rem; font-weight: 700; color: var(--text-muted); display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 0.05em; } .form-input, .phase-select { width: 100%; padding: 0.65rem 0.85rem; border: 1px solid var(--border); border-radius: 8px; font-size: 0.9rem; background: #fff; outline: none; transition: all 0.2s; } .form-input:focus, .phase-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } /* ACTIONS */ .card-actions { display: flex; gap: 0.5rem; position: absolute; top: 0.75rem; right: 1rem; z-index: 10; } .action-btn { background: white; border: 1px solid var(--border); border-radius: 6px; padding: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .action-btn:hover { background: #f8fafc; transform: scale(1.1); } .btn-ia { color: var(--ia-color); } .btn-ws { color: var(--whatsapp); } /* LOGS */ #logPanel { position: fixed; bottom: 0; left: 0; right: 0; background: #0f172a; border-top: 1px solid #334155; z-index: 2000; transition: transform 0.3s ease; } .log-header { padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; color: #94a3b8; font-size: 12px; font-weight: 700; background: #1e293b; } #debugContent { height: 150px; overflow-y: auto; padding: 15px 20px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #38bdf8; } .collapsed-logs #debugContent { display: none; } /* STATUS BAR */ .status-bar { padding: 0.75rem; text-align: center; font-size: 0.9rem; font-weight: 600; position: fixed; top: 0; left: 0; right: 0; z-index: 2500; transform: translateY(-100%); transition: transform 0.3s ease; } .status-bar.active { transform: translateY(0); } .status-success { background: #10b981; color: white; } .status-error { background: #ef4444; color: white; } /* UTILS */ .loader { width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: #fff; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .hidden { display: none !important; } /* RESPONSIVE */ @media (max-width: 1024px) { .contact-panel { width: 260px; } } @media (max-width: 768px) { body { font-size: 12px; } header.crm-header { height: auto; padding: 0.5rem; flex-direction: row; flex-wrap: wrap; gap: 0.5rem; } .header-left { width: 100%; justify-content: space-between; margin-bottom: 2px; } .header-controls { width: 100%; gap: 0.25rem; display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; } .header-select, .search-form { width: 100%; min-width: 0; height: 30px; font-size: 0.75rem; } .search-form { grid-column: 1 / span 3; } .main-container { flex-direction: column; } /* En móvil, el sidebar es una pestaña más */ .contact-panel { display: none; /* Oculto por defecto en móvil */ width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-right: none; z-index: 50; /* Por debajo de la barra de navegación de pestañas */ } .contact-panel.active { display: flex; } .tab-mobile-only { display: flex; } .content-area { height: 100%; width: 100%; } .section-nav-bar { padding: 4px; background: #f8fafc; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } .nav-tab { padding: 6px 4px; font-size: 0.7rem; } #logPanel { left: 0; font-size: 9px; } #debugContent { height: 80px; } } 

 :root { --primary: #2563eb; --primary-hover: #1d4ed8; --bg-main: #f1f5f9; --bg-panel: #ffffff; --text-main: #1e293b; --text-muted: #64748b; --border: #e2e8f0; --shadow: 0 1px 3px rgba(0, 0, 0, 0.1); --whatsapp: #25d366; --ia-color: #8b5cf6; --section-bg: #ffffff; } * { box-sizing: border-box; outline: none; } /* Minimalist Scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #f1f5f9; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } body { margin: 0; background: var(--bg-main); font-family: 'Inter', system-ui, sans-serif; height: 100vh; display: flex; flex-direction: column; overflow: hidden; color: var(--text-main); font-size: 13px; /* Más compacto */ } header.crm-header { background: white; padding: 0 1rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; z-index: 1000; height: 48px; /* Reducido de 64px */ flex-shrink: 0; } .brand-box { display: flex; align-items: baseline; gap: 0.3rem; } .brand { font-weight: 800; font-size: 1.1rem; color: var(--primary); letter-spacing: -0.025em; } .version-tag { font-size: 0.6rem; color: var(--text-muted); font-weight: 700; background: #f1f5f9; padding: 1px 5px; border-radius: 3px; } .search-form { display: flex; min-width: 200px; height: 32px; } .search-form input { flex: 1; padding: 0 0.75rem; border: 1px solid var(--border); border-right: none; border-radius: 6px 0 0 6px; font-size: 0.85rem; } .search-form button { padding: 0 0.75rem; border: none; background: var(--primary); color: white; cursor: pointer; border-radius: 0 6px 6px 0; } .header-select { height: 32px; padding: 0 0.5rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.8rem; background: white; width: 130px; } .main-container { display: flex; flex: 1; overflow: hidden; position: relative; } /* PANEL IZQUIERDO (SIDEBAR) */ .contact-panel { width: 260px; background: white; border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; min-height: 0; z-index: 10; } .panel-scroll { flex: 1; overflow-y: auto; padding: 1rem 0.75rem; } /* CONTENIDO CENTRAL */ .content-area { flex: 1; background: #f8fafc; display: flex; flex-direction: column; overflow: hidden; position: relative; } /* BARRA DE NAVEGACIÓN SUPERIOR PERSISTENTE */ .section-nav-bar { background: white; border-bottom: 1px solid var(--border); display: flex; padding: 4px; gap: 4px; z-index: 100; flex-shrink: 0; } .nav-tab { flex: 1; padding: 8px 10px; font-size: 0.75rem; font-weight: 700; color: var(--text-muted); text-align: center; cursor: pointer; border-radius: 4px; transition: all 0.2s; border: 1px solid transparent; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; justify-content: center; gap: 6px; } /* Ocultar tab de contacto en desktop ya que está el sidebar */ .tab-mobile-only { display: none; } .nav-tab:hover { background: #f1f5f9; color: var(--text-main); } .nav-tab.active { background: #eff6ff; color: var(--primary); border-color: #dbeafe; } #contentScroll { flex: 1; padding: 0; display: flex; flex-direction: column; position: relative; background: white; overflow: hidden; } /* SECCIONES COMO PESTAÑAS FULL-HEIGHT */ .main-section { display: none; flex-direction: column; height: 100%; width: 100%; border: none; background: white; border-radius: 0; margin-bottom: 0px; } .main-section.active { display: flex; } .section-header { padding: 0.6rem 1rem; background: #f8fafc; display: flex; justify-content: space-between; align-items: center; min-height: 40px; border-bottom: 1px solid var(--border); cursor: default; } .section-header h2 { margin: 0; font-size: 0.9rem; font-weight: 700; display: flex; align-items: center; gap: 0.6rem; color: var(--primary); } .toggle-icon { display: none !important; } .section-body { flex: 1; padding: 0.5rem; /* Reducido de 1rem */ overflow-y: auto; background: #ffffff; height: 100%; } /* MAPA COMPACTO */ #mapView { width: 100%; height: 100%; /* Ocupa todo el alto disponible en su body */ min-height: 500px; border-radius: 4px; border: 1px solid var(--border); } /* CARDS COMPACTAS */ .report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.4rem; /* Reducido de 0.75rem */ } .report-card { border: 1px solid var(--border); border-radius: 6px; } .card-header { padding: 0.25rem 0.5rem; /* Reducido de 0.4rem 0.75rem */ background: #f8fafc; cursor: pointer; display: flex; justify-content: space-between; align-items: center; } .card-title { font-size: 0.65rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; } .card-body { padding: 0.25rem; /* Reducido de 0.5rem */ position: relative; } .collapsed .card-body { display: none; } .editable-area { width: 100%; min-height: 40px; /* Reducido de 60px */ padding: 0.3rem; /* Reducido de 0.4rem */ font-size: 0.8rem; /* Ligeramente más pequeña */ border: 1px solid #e2e8f0; border-radius: 4px; resize: vertical; } /* IFRAME COMPACTO */ #iframeWrapper { width: 100%; height: 100%; border-radius: 4px; border: 1px solid var(--border); } /* FICHAS COMPACTAS */ .inmuebles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.75rem; } .inmueble-card { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: white; cursor: pointer; font-size: 0.8rem; } .inmueble-img { height: 140px; } .inmueble-content { padding: 0.75rem; } /* PANEL DE LOGS FLOTANTE O MINI */ #logPanel { position: fixed; bottom: 0; right: 0; left: 260px; background: #0f172a; border-top: 1px solid #334155; z-index: 2000; } .log-header { padding: 6px 15px; font-size: 10px; background: #1e293b; color: #94a3b8; display: flex; justify-content: space-between; cursor: pointer; } #debugContent { height: 100px; padding: 10px; font-family: 'JetBrains Mono', monospace; font-size: 10px; overflow-y: auto; color: #38bdf8; } .collapsed-logs #debugContent { display: none; } /* BOTONES ACCION ETIQUETAS */ .label-action-btn { background: none; border: none; padding: 2px; cursor: pointer; color: var(--text-muted); } .label-action-btn:hover { color: var(--primary); } /* UTILS */ .hidden { display: none !important; } .status-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 3000; padding: 8px; text-align: center; color: white; transform: translateY(-100%); transition: 0.3s; font-weight: 700; } .status-bar.active { transform: translateY(0); } .status-success { background: #10b981; } .status-error { background: #ef4444; } @keyframes spin { to { transform: rotate(360deg); } } .loader { width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; } /* MAP SECTION (NEW) */ #mapView { width: 100%; height: 500px; border-radius: 8px; border: 1px solid var(--border); background: #f1f5f9; z-index: 10; } /* INTERNAL CARDS (Contacto Section) */ .report-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } .report-card { background: #fdfdfd; border-radius: 8px; border: 1px solid var(--border); overflow: hidden; } .card-header { padding: 0.75rem 1rem; background: #f8fafc; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .card-title { font-size: 0.75rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .card-body { padding: 1rem; position: relative; } .report-card.collapsed .card-body { display: none; } .editable-area { width: 100%; min-height: 80px; border: 1px solid transparent; padding: 0.5rem; font-size: 0.95rem; background: transparent; resize: vertical; outline: none; line-height: 1.6; color: var(--text-main); } .is-editable .editable-area { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 0.75rem; } .is-editable .editable-area:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } /* PARCELA (Iframe) */ #iframeWrapper { width: 100%; height: 1200px; border: 1px solid var(--border); border-radius: 8px; overflow: auto; } /* FICHAS (Vertical Grid) */ .inmuebles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; } .inmueble-card { background: white; border-radius: 12px; border: 1px solid var(--border); overflow: hidden; transition: all 0.3s ease; display: flex; flex-direction: column; cursor: pointer; position: relative; } .inmueble-card:hover { transform: translateY(-4px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); border-color: var(--primary); } .inmueble-img { height: 180px; position: relative; overflow: hidden; } .inmueble-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .inmueble-card:hover .inmueble-img img { transform: scale(1.05); } .inmueble-content { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; } .inmueble-price { font-size: 1.25rem; font-weight: 800; color: var(--text-main); } .inmueble-ref { font-size: 0.75rem; color: var(--primary); font-weight: 700; background: #eff6ff; padding: 2px 8px; border-radius: 4px; } .inmueble-title { font-size: 0.9rem; font-weight: 600; color: var(--text-main); line-height: 1.4; min-height: 2.8em; } .inmueble-features { border-top: 1px solid #f1f5f9; padding-top: 0.75rem; margin-top: 0.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; font-size: 0.75rem; color: var(--text-muted); } /* FORMS & INPUTS (Left Panel) */ .form-group { margin-bottom: 1.25rem; } .form-label { font-size: 0.7rem; font-weight: 700; color: var(--text-muted); display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 0.05em; } .form-input, .phase-select { width: 100%; padding: 0.65rem 0.85rem; border: 1px solid var(--border); border-radius: 8px; font-size: 0.9rem; background: #fff; outline: none; transition: all 0.2s; } .form-input:focus, .phase-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } /* ACTIONS */ .card-actions { display: flex; gap: 0.5rem; position: absolute; top: 0.75rem; right: 1rem; z-index: 10; } .action-btn { background: white; border: 1px solid var(--border); border-radius: 6px; padding: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .action-btn:hover { background: #f8fafc; transform: scale(1.1); } .btn-ia { color: var(--ia-color); } .btn-ws { color: var(--whatsapp); } /* LOGS */ #logPanel { position: fixed; bottom: 0; left: 0; right: 0; background: #0f172a; border-top: 1px solid #334155; z-index: 2000; transition: transform 0.3s ease; } .log-header { padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; color: #94a3b8; font-size: 12px; font-weight: 700; background: #1e293b; } #debugContent { height: 150px; overflow-y: auto; padding: 15px 20px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #38bdf8; } .collapsed-logs #debugContent { display: none; } /* STATUS BAR */ .status-bar { padding: 0.75rem; text-align: center; font-size: 0.9rem; font-weight: 600; position: fixed; top: 0; left: 0; right: 0; z-index: 2500; transform: translateY(-100%); transition: transform 0.3s ease; } .status-bar.active { transform: translateY(0); } .status-success { background: #10b981; color: white; } .status-error { background: #ef4444; color: white; } /* UTILS */ .loader { width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: #fff; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .hidden { display: none !important; } /* RESPONSIVE */ @media (max-width: 1024px) { .contact-panel { width: 260px; } } @media (max-width: 768px) { body { font-size: 12px; } header.crm-header { height: auto; padding: 0.5rem; flex-direction: row; flex-wrap: wrap; gap: 0.5rem; } .header-left { width: 100%; justify-content: space-between; margin-bottom: 2px; } .header-controls { width: 100%; gap: 0.25rem; display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; } .header-select, .search-form { width: 100%; min-width: 0; height: 30px; font-size: 0.75rem; } .search-form { grid-column: 1 / span 3; } .main-container { flex-direction: column; } /* En móvil, el sidebar es una pestaña más */ .contact-panel { display: none; /* Oculto por defecto en móvil */ width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-right: none; z-index: 50; /* Por debajo de la barra de navegación de pestañas */ } .contact-panel.active { display: flex; } .tab-mobile-only { display: flex; } .content-area { height: 100%; width: 100%; } .section-nav-bar { padding: 4px; background: #f8fafc; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } .nav-tab { padding: 6px 4px; font-size: 0.7rem; } #logPanel { left: 0; font-size: 9px; } #debugContent { height: 80px; } } 

 :root { --primary: #2563eb; --primary-hover: #1d4ed8; --bg-main: #f1f5f9; --bg-panel: #ffffff; --text-main: #1e293b; --text-muted: #64748b; --border: #e2e8f0; --shadow: 0 1px 3px rgba(0, 0, 0, 0.1); --whatsapp: #25d366; --ia-color: #8b5cf6; --section-bg: #ffffff; } * { box-sizing: border-box; outline: none; } /* Minimalist Scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #f1f5f9; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } body { margin: 0; background: var(--bg-main); font-family: 'Inter', system-ui, sans-serif; height: 100vh; display: flex; flex-direction: column; overflow: hidden; color: var(--text-main); font-size: 13px; /* Más compacto */ } header.crm-header { background: white; padding: 0 1rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; z-index: 1000; height: 48px; /* Reducido de 64px */ flex-shrink: 0; } .brand-box { display: flex; align-items: baseline; gap: 0.3rem; } .brand { font-weight: 800; font-size: 1.1rem; color: var(--primary); letter-spacing: -0.025em; } .version-tag { font-size: 0.6rem; color: var(--text-muted); font-weight: 700; background: #f1f5f9; padding: 1px 5px; border-radius: 3px; } .search-form { display: flex; min-width: 200px; height: 32px; } .search-form input { flex: 1; padding: 0 0.75rem; border: 1px solid var(--border); border-right: none; border-radius: 6px 0 0 6px; font-size: 0.85rem; } .search-form button { padding: 0 0.75rem; border: none; background: var(--primary); color: white; cursor: pointer; border-radius: 0 6px 6px 0; } .header-select { height: 32px; padding: 0 0.5rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.8rem; background: white; width: 130px; } .main-container { display: flex; flex: 1; overflow: hidden; position: relative; } /* PANEL IZQUIERDO (SIDEBAR) */ .contact-panel { width: 260px; background: white; border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; min-height: 0; z-index: 10; } .panel-scroll { flex: 1; overflow-y: auto; padding: 1rem 0.75rem; } /* CONTENIDO CENTRAL */ .content-area { flex: 1; background: #f8fafc; display: flex; flex-direction: column; overflow: hidden; position: relative; } /* BARRA DE NAVEGACIÓN SUPERIOR PERSISTENTE */ .section-nav-bar { background: white; border-bottom: 1px solid var(--border); display: flex; padding: 4px; gap: 4px; z-index: 100; flex-shrink: 0; } .nav-tab { flex: 1; padding: 8px 10px; font-size: 0.75rem; font-weight: 700; color: var(--text-muted); text-align: center; cursor: pointer; border-radius: 4px; transition: all 0.2s; border: 1px solid transparent; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; justify-content: center; gap: 6px; } /* Ocultar tab de contacto en desktop ya que está el sidebar */ .tab-mobile-only { display: none; } .nav-tab:hover { background: #f1f5f9; color: var(--text-main); } .nav-tab.active { background: #eff6ff; color: var(--primary); border-color: #dbeafe; } #contentScroll { flex: 1; padding: 0; display: flex; flex-direction: column; position: relative; background: white; overflow: hidden; } /* SECCIONES COMO PESTAÑAS FULL-HEIGHT */ .main-section { display: none; flex-direction: column; height: 100%; width: 100%; border: none; background: white; border-radius: 0; margin-bottom: 0px; } .main-section.active { display: flex; } .section-header { padding: 0.6rem 1rem; background: #f8fafc; display: flex; justify-content: space-between; align-items: center; min-height: 40px; border-bottom: 1px solid var(--border); cursor: default; } .section-header h2 { margin: 0; font-size: 0.9rem; font-weight: 700; display: flex; align-items: center; gap: 0.6rem; color: var(--primary); } .toggle-icon { display: none !important; } .section-body { flex: 1; padding: 0.5rem; /* Reducido de 1rem */ overflow-y: auto; background: #ffffff; height: 100%; } /* MAPA COMPACTO */ #mapView { width: 100%; height: 100%; /* Ocupa todo el alto disponible en su body */ min-height: 500px; border-radius: 4px; border: 1px solid var(--border); } /* CARDS COMPACTAS */ .report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.4rem; /* Reducido de 0.75rem */ } .report-card { border: 1px solid var(--border); border-radius: 6px; } .card-header { padding: 0.25rem 0.5rem; /* Reducido de 0.4rem 0.75rem */ background: #f8fafc; cursor: pointer; display: flex; justify-content: space-between; align-items: center; } .card-title { font-size: 0.65rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; } .card-body { padding: 0.25rem; /* Reducido de 0.5rem */ position: relative; } .collapsed .card-body { display: none; } .editable-area { width: 100%; min-height: 40px; /* Reducido de 60px */ padding: 0.3rem; /* Reducido de 0.4rem */ font-size: 0.8rem; /* Ligeramente más pequeña */ border: 1px solid #e2e8f0; border-radius: 4px; resize: vertical; } /* IFRAME COMPACTO */ #iframeWrapper { width: 100%; height: 100%; border-radius: 4px; border: 1px solid var(--border); } /* FICHAS COMPACTAS */ .inmuebles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.75rem; } .inmueble-card { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: white; cursor: pointer; font-size: 0.8rem; } .inmueble-img { height: 140px; } .inmueble-content { padding: 0.75rem; } /* PANEL DE LOGS FLOTANTE O MINI */ #logPanel { position: fixed; bottom: 0; right: 0; left: 260px; background: #0f172a; border-top: 1px solid #334155; z-index: 2000; } .log-header { padding: 6px 15px; font-size: 10px; background: #1e293b; color: #94a3b8; display: flex; justify-content: space-between; cursor: pointer; } #debugContent { height: 100px; padding: 10px; font-family: 'JetBrains Mono', monospace; font-size: 10px; overflow-y: auto; color: #38bdf8; } .collapsed-logs #debugContent { display: none; } /* BOTONES ACCION ETIQUETAS */ .label-action-btn { background: none; border: none; padding: 2px; cursor: pointer; color: var(--text-muted); } .label-action-btn:hover { color: var(--primary); } /* UTILS */ .hidden { display: none !important; } .status-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 3000; padding: 8px; text-align: center; color: white; transform: translateY(-100%); transition: 0.3s; font-weight: 700; } .status-bar.active { transform: translateY(0); } .status-success { background: #10b981; } .status-error { background: #ef4444; } @keyframes spin { to { transform: rotate(360deg); } } .loader { width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; } /* MAP SECTION (NEW) */ #mapView { width: 100%; height: 500px; border-radius: 8px; border: 1px solid var(--border); background: #f1f5f9; z-index: 10; } /* INTERNAL CARDS (Contacto Section) */ .report-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } .report-card { background: #fdfdfd; border-radius: 8px; border: 1px solid var(--border); overflow: hidden; } .card-header { padding: 0.75rem 1rem; background: #f8fafc; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .card-title { font-size: 0.75rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .card-body { padding: 1rem; position: relative; } .report-card.collapsed .card-body { display: none; } .editable-area { width: 100%; min-height: 80px; border: 1px solid transparent; padding: 0.5rem; font-size: 0.95rem; background: transparent; resize: vertical; outline: none; line-height: 1.6; color: var(--text-main); } .is-editable .editable-area { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 0.75rem; } .is-editable .editable-area:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } /* PARCELA (Iframe) */ #iframeWrapper { width: 100%; height: 1200px; border: 1px solid var(--border); border-radius: 8px; overflow: auto; } /* FICHAS (Vertical Grid) */ .inmuebles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; } .inmueble-card { background: white; border-radius: 12px; border: 1px solid var(--border); overflow: hidden; transition: all 0.3s ease; display: flex; flex-direction: column; cursor: pointer; position: relative; } .inmueble-card:hover { transform: translateY(-4px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); border-color: var(--primary); } .inmueble-img { height: 180px; position: relative; overflow: hidden; } .inmueble-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .inmueble-card:hover .inmueble-img img { transform: scale(1.05); } .inmueble-content { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; } .inmueble-price { font-size: 1.25rem; font-weight: 800; color: var(--text-main); } .inmueble-ref { font-size: 0.75rem; color: var(--primary); font-weight: 700; background: #eff6ff; padding: 2px 8px; border-radius: 4px; } .inmueble-title { font-size: 0.9rem; font-weight: 600; color: var(--text-main); line-height: 1.4; min-height: 2.8em; } .inmueble-features { border-top: 1px solid #f1f5f9; padding-top: 0.75rem; margin-top: 0.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; font-size: 0.75rem; color: var(--text-muted); } /* FORMS & INPUTS (Left Panel) */ .form-group { margin-bottom: 1.25rem; } .form-label { font-size: 0.7rem; font-weight: 700; color: var(--text-muted); display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 0.05em; } .form-input, .phase-select { width: 100%; padding: 0.65rem 0.85rem; border: 1px solid var(--border); border-radius: 8px; font-size: 0.9rem; background: #fff; outline: none; transition: all 0.2s; } .form-input:focus, .phase-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } /* ACTIONS */ .card-actions { display: flex; gap: 0.5rem; position: absolute; top: 0.75rem; right: 1rem; z-index: 10; } .action-btn { background: white; border: 1px solid var(--border); border-radius: 6px; padding: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .action-btn:hover { background: #f8fafc; transform: scale(1.1); } .btn-ia { color: var(--ia-color); } .btn-ws { color: var(--whatsapp); } /* LOGS */ #logPanel { position: fixed; bottom: 0; left: 0; right: 0; background: #0f172a; border-top: 1px solid #334155; z-index: 2000; transition: transform 0.3s ease; } .log-header { padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; color: #94a3b8; font-size: 12px; font-weight: 700; background: #1e293b; } #debugContent { height: 150px; overflow-y: auto; padding: 15px 20px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #38bdf8; } .collapsed-logs #debugContent { display: none; } /* STATUS BAR */ .status-bar { padding: 0.75rem; text-align: center; font-size: 0.9rem; font-weight: 600; position: fixed; top: 0; left: 0; right: 0; z-index: 2500; transform: translateY(-100%); transition: transform 0.3s ease; } .status-bar.active { transform: translateY(0); } .status-success { background: #10b981; color: white; } .status-error { background: #ef4444; color: white; } /* UTILS */ .loader { width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: #fff; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .hidden { display: none !important; } /* RESPONSIVE */ @media (max-width: 1024px) { .contact-panel { width: 260px; } } @media (max-width: 768px) { body { font-size: 12px; } header.crm-header { height: auto; padding: 0.5rem; flex-direction: row; flex-wrap: wrap; gap: 0.5rem; } .header-left { width: 100%; justify-content: space-between; margin-bottom: 2px; } .header-controls { width: 100%; gap: 0.25rem; display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; } .header-select, .search-form { width: 100%; min-width: 0; height: 30px; font-size: 0.75rem; } .search-form { grid-column: 1 / span 3; } .main-container { flex-direction: column; } /* En móvil, el sidebar es una pestaña más */ .contact-panel { display: none; /* Oculto por defecto en móvil */ width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-right: none; z-index: 50; /* Por debajo de la barra de navegación de pestañas */ } .contact-panel.active { display: flex; } .tab-mobile-only { display: flex; } .content-area { height: 100%; width: 100%; } .section-nav-bar { padding: 4px; background: #f8fafc; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } .nav-tab { padding: 6px 4px; font-size: 0.7rem; } #logPanel { left: 0; font-size: 9px; } #debugContent { height: 80px; } } 

 :root { --primary: #2563eb; --primary-hover: #1d4ed8; --bg-main: #f1f5f9; --bg-panel: #ffffff; --text-main: #1e293b; --text-muted: #64748b; --border: #e2e8f0; --shadow: 0 1px 3px rgba(0, 0, 0, 0.1); --whatsapp: #25d366; --ia-color: #8b5cf6; --section-bg: #ffffff; } * { box-sizing: border-box; outline: none; } /* Minimalist Scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #f1f5f9; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } body { margin: 0; background: var(--bg-main); font-family: 'Inter', system-ui, sans-serif; height: 100vh; display: flex; flex-direction: column; overflow: hidden; color: var(--text-main); font-size: 13px; /* Más compacto */ } header.crm-header { background: white; padding: 0 1rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; z-index: 1000; height: 48px; /* Reducido de 64px */ flex-shrink: 0; } .brand-box { display: flex; align-items: baseline; gap: 0.3rem; } .brand { font-weight: 800; font-size: 1.1rem; color: var(--primary); letter-spacing: -0.025em; } .version-tag { font-size: 0.6rem; color: var(--text-muted); font-weight: 700; background: #f1f5f9; padding: 1px 5px; border-radius: 3px; } .search-form { display: flex; min-width: 200px; height: 32px; } .search-form input { flex: 1; padding: 0 0.75rem; border: 1px solid var(--border); border-right: none; border-radius: 6px 0 0 6px; font-size: 0.85rem; } .search-form button { padding: 0 0.75rem; border: none; background: var(--primary); color: white; cursor: pointer; border-radius: 0 6px 6px 0; } .header-select { height: 32px; padding: 0 0.5rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.8rem; background: white; width: 130px; } .main-container { display: flex; flex: 1; overflow: hidden; position: relative; } /* PANEL IZQUIERDO (SIDEBAR) */ .contact-panel { width: 260px; background: white; border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; min-height: 0; z-index: 10; } .panel-scroll { flex: 1; overflow-y: auto; padding: 1rem 0.75rem; } /* CONTENIDO CENTRAL */ .content-area { flex: 1; background: #f8fafc; display: flex; flex-direction: column; overflow: hidden; position: relative; } /* BARRA DE NAVEGACIÓN SUPERIOR PERSISTENTE */ .section-nav-bar { background: white; border-bottom: 1px solid var(--border); display: flex; padding: 4px; gap: 4px; z-index: 100; flex-shrink: 0; } .nav-tab { flex: 1; padding: 8px 10px; font-size: 0.75rem; font-weight: 700; color: var(--text-muted); text-align: center; cursor: pointer; border-radius: 4px; transition: all 0.2s; border: 1px solid transparent; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; justify-content: center; gap: 6px; } /* Ocultar tab de contacto en desktop ya que está el sidebar */ .tab-mobile-only { display: none; } .nav-tab:hover { background: #f1f5f9; color: var(--text-main); } .nav-tab.active { background: #eff6ff; color: var(--primary); border-color: #dbeafe; } #contentScroll { flex: 1; padding: 0; display: flex; flex-direction: column; position: relative; background: white; overflow: hidden; } /* SECCIONES COMO PESTAÑAS FULL-HEIGHT */ .main-section { display: none; flex-direction: column; height: 100%; width: 100%; border: none; background: white; border-radius: 0; margin-bottom: 0px; } .main-section.active { display: flex; } .section-header { padding: 0.6rem 1rem; background: #f8fafc; display: flex; justify-content: space-between; align-items: center; min-height: 40px; border-bottom: 1px solid var(--border); cursor: default; } .section-header h2 { margin: 0; font-size: 0.9rem; font-weight: 700; display: flex; align-items: center; gap: 0.6rem; color: var(--primary); } .toggle-icon { display: none !important; } .section-body { flex: 1; padding: 0.5rem; /* Reducido de 1rem */ overflow-y: auto; background: #ffffff; height: 100%; } /* MAPA COMPACTO */ #mapView { width: 100%; height: 100%; /* Ocupa todo el alto disponible en su body */ min-height: 500px; border-radius: 4px; border: 1px solid var(--border); } /* CARDS COMPACTAS */ .report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.4rem; /* Reducido de 0.75rem */ } .report-card { border: 1px solid var(--border); border-radius: 6px; } .card-header { padding: 0.25rem 0.5rem; /* Reducido de 0.4rem 0.75rem */ background: #f8fafc; cursor: pointer; display: flex; justify-content: space-between; align-items: center; } .card-title { font-size: 0.65rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; } .card-body { padding: 0.25rem; /* Reducido de 0.5rem */ position: relative; } .collapsed .card-body { display: none; } .editable-area { width: 100%; min-height: 40px; /* Reducido de 60px */ padding: 0.3rem; /* Reducido de 0.4rem */ font-size: 0.8rem; /* Ligeramente más pequeña */ border: 1px solid #e2e8f0; border-radius: 4px; resize: vertical; } /* IFRAME COMPACTO */ #iframeWrapper { width: 100%; height: 100%; border-radius: 4px; border: 1px solid var(--border); } /* FICHAS COMPACTAS */ .inmuebles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.75rem; } .inmueble-card { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: white; cursor: pointer; font-size: 0.8rem; } .inmueble-img { height: 140px; } .inmueble-content { padding: 0.75rem; } /* PANEL DE LOGS FLOTANTE O MINI */ #logPanel { position: fixed; bottom: 0; right: 0; left: 260px; background: #0f172a; border-top: 1px solid #334155; z-index: 2000; } .log-header { padding: 6px 15px; font-size: 10px; background: #1e293b; color: #94a3b8; display: flex; justify-content: space-between; cursor: pointer; } #debugContent { height: 100px; padding: 10px; font-family: 'JetBrains Mono', monospace; font-size: 10px; overflow-y: auto; color: #38bdf8; } .collapsed-logs #debugContent { display: none; } /* BOTONES ACCION ETIQUETAS */ .label-action-btn { background: none; border: none; padding: 2px; cursor: pointer; color: var(--text-muted); } .label-action-btn:hover { color: var(--primary); } /* UTILS */ .hidden { display: none !important; } .status-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 3000; padding: 8px; text-align: center; color: white; transform: translateY(-100%); transition: 0.3s; font-weight: 700; } .status-bar.active { transform: translateY(0); } .status-success { background: #10b981; } .status-error { background: #ef4444; } @keyframes spin { to { transform: rotate(360deg); } } .loader { width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; } /* MAP SECTION (NEW) */ #mapView { width: 100%; height: 500px; border-radius: 8px; border: 1px solid var(--border); background: #f1f5f9; z-index: 10; } /* INTERNAL CARDS (Contacto Section) */ .report-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } .report-card { background: #fdfdfd; border-radius: 8px; border: 1px solid var(--border); overflow: hidden; } .card-header { padding: 0.75rem 1rem; background: #f8fafc; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .card-title { font-size: 0.75rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .card-body { padding: 1rem; position: relative; } .report-card.collapsed .card-body { display: none; } .editable-area { width: 100%; min-height: 80px; border: 1px solid transparent; padding: 0.5rem; font-size: 0.95rem; background: transparent; resize: vertical; outline: none; line-height: 1.6; color: var(--text-main); } .is-editable .editable-area { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 0.75rem; } .is-editable .editable-area:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } /* PARCELA (Iframe) */ #iframeWrapper { width: 100%; height: 1200px; border: 1px solid var(--border); border-radius: 8px; overflow: auto; } /* FICHAS (Vertical Grid) */ .inmuebles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; } .inmueble-card { background: white; border-radius: 12px; border: 1px solid var(--border); overflow: hidden; transition: all 0.3s ease; display: flex; flex-direction: column; cursor: pointer; position: relative; } .inmueble-card:hover { transform: translateY(-4px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); border-color: var(--primary); } .inmueble-img { height: 180px; position: relative; overflow: hidden; } .inmueble-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .inmueble-card:hover .inmueble-img img { transform: scale(1.05); } .inmueble-content { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; } .inmueble-price { font-size: 1.25rem; font-weight: 800; color: var(--text-main); } .inmueble-ref { font-size: 0.75rem; color: var(--primary); font-weight: 700; background: #eff6ff; padding: 2px 8px; border-radius: 4px; } .inmueble-title { font-size: 0.9rem; font-weight: 600; color: var(--text-main); line-height: 1.4; min-height: 2.8em; } .inmueble-features { border-top: 1px solid #f1f5f9; padding-top: 0.75rem; margin-top: 0.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; font-size: 0.75rem; color: var(--text-muted); } /* FORMS & INPUTS (Left Panel) */ .form-group { margin-bottom: 1.25rem; } .form-label { font-size: 0.7rem; font-weight: 700; color: var(--text-muted); display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 0.05em; } .form-input, .phase-select { width: 100%; padding: 0.65rem 0.85rem; border: 1px solid var(--border); border-radius: 8px; font-size: 0.9rem; background: #fff; outline: none; transition: all 0.2s; } .form-input:focus, .phase-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } /* ACTIONS */ .card-actions { display: flex; gap: 0.5rem; position: absolute; top: 0.75rem; right: 1rem; z-index: 10; } .action-btn { background: white; border: 1px solid var(--border); border-radius: 6px; padding: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .action-btn:hover { background: #f8fafc; transform: scale(1.1); } .btn-ia { color: var(--ia-color); } .btn-ws { color: var(--whatsapp); } /* LOGS */ #logPanel { position: fixed; bottom: 0; left: 0; right: 0; background: #0f172a; border-top: 1px solid #334155; z-index: 2000; transition: transform 0.3s ease; } .log-header { padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; color: #94a3b8; font-size: 12px; font-weight: 700; background: #1e293b; } #debugContent { height: 150px; overflow-y: auto; padding: 15px 20px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #38bdf8; } .collapsed-logs #debugContent { display: none; } /* STATUS BAR */ .status-bar { padding: 0.75rem; text-align: center; font-size: 0.9rem; font-weight: 600; position: fixed; top: 0; left: 0; right: 0; z-index: 2500; transform: translateY(-100%); transition: transform 0.3s ease; } .status-bar.active { transform: translateY(0); } .status-success { background: #10b981; color: white; } .status-error { background: #ef4444; color: white; } /* UTILS */ .loader { width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: #fff; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .hidden { display: none !important; } /* RESPONSIVE */ @media (max-width: 1024px) { .contact-panel { width: 260px; } } @media (max-width: 768px) { body { font-size: 12px; } header.crm-header { height: auto; padding: 0.5rem; flex-direction: row; flex-wrap: wrap; gap: 0.5rem; } .header-left { width: 100%; justify-content: space-between; margin-bottom: 2px; } .header-controls { width: 100%; gap: 0.25rem; display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; } .header-select, .search-form { width: 100%; min-width: 0; height: 30px; font-size: 0.75rem; } .search-form { grid-column: 1 / span 3; } .main-container { flex-direction: column; } /* En móvil, el sidebar es una pestaña más */ .contact-panel { display: none; /* Oculto por defecto en móvil */ width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-right: none; z-index: 50; /* Por debajo de la barra de navegación de pestañas */ } .contact-panel.active { display: flex; } .tab-mobile-only { display: flex; } .content-area { height: 100%; width: 100%; } .section-nav-bar { padding: 4px; background: #f8fafc; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } .nav-tab { padding: 6px 4px; font-size: 0.7rem; } #logPanel { left: 0; font-size: 9px; } #debugContent { height: 80px; } } 

 :root { --primary: #2563eb; --primary-hover: #1d4ed8; --bg-main: #f1f5f9; --bg-panel: #ffffff; --text-main: #1e293b; --text-muted: #64748b; --border: #e2e8f0; --shadow: 0 1px 3px rgba(0, 0, 0, 0.1); --whatsapp: #25d366; --ia-color: #8b5cf6; --section-bg: #ffffff; } * { box-sizing: border-box; outline: none; } /* Minimalist Scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #f1f5f9; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } body { margin: 0; background: var(--bg-main); font-family: 'Inter', system-ui, sans-serif; height: 100vh; display: flex; flex-direction: column; overflow: hidden; color: var(--text-main); font-size: 13px; /* Más compacto */ } header.crm-header { background: white; padding: 0 1rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; z-index: 1000; height: 48px; /* Reducido de 64px */ flex-shrink: 0; } .brand-box { display: flex; align-items: baseline; gap: 0.3rem; } .brand { font-weight: 800; font-size: 1.1rem; color: var(--primary); letter-spacing: -0.025em; } .version-tag { font-size: 0.6rem; color: var(--text-muted); font-weight: 700; background: #f1f5f9; padding: 1px 5px; border-radius: 3px; } .search-form { display: flex; min-width: 200px; height: 32px; } .search-form input { flex: 1; padding: 0 0.75rem; border: 1px solid var(--border); border-right: none; border-radius: 6px 0 0 6px; font-size: 0.85rem; } .search-form button { padding: 0 0.75rem; border: none; background: var(--primary); color: white; cursor: pointer; border-radius: 0 6px 6px 0; } .header-select { height: 32px; padding: 0 0.5rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.8rem; background: white; width: 130px; } .main-container { display: flex; flex: 1; overflow: hidden; position: relative; } /* PANEL IZQUIERDO (SIDEBAR) */ .contact-panel { width: 260px; background: white; border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; min-height: 0; z-index: 10; } .panel-scroll { flex: 1; overflow-y: auto; padding: 1rem 0.75rem; } /* CONTENIDO CENTRAL */ .content-area { flex: 1; background: #f8fafc; display: flex; flex-direction: column; overflow: hidden; position: relative; } /* BARRA DE NAVEGACIÓN SUPERIOR PERSISTENTE */ .section-nav-bar { background: white; border-bottom: 1px solid var(--border); display: flex; padding: 4px; gap: 4px; z-index: 100; flex-shrink: 0; } .nav-tab { flex: 1; padding: 8px 10px; font-size: 0.75rem; font-weight: 700; color: var(--text-muted); text-align: center; cursor: pointer; border-radius: 4px; transition: all 0.2s; border: 1px solid transparent; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; justify-content: center; gap: 6px; } /* Ocultar tab de contacto en desktop ya que está el sidebar */ .tab-mobile-only { display: none; } .nav-tab:hover { background: #f1f5f9; color: var(--text-main); } .nav-tab.active { background: #eff6ff; color: var(--primary); border-color: #dbeafe; } #contentScroll { flex: 1; padding: 0; display: flex; flex-direction: column; position: relative; background: white; overflow: hidden; } /* SECCIONES COMO PESTAÑAS FULL-HEIGHT */ .main-section { display: none; flex-direction: column; height: 100%; width: 100%; border: none; background: white; border-radius: 0; margin-bottom: 0px; } .main-section.active { display: flex; } .section-header { padding: 0.6rem 1rem; background: #f8fafc; display: flex; justify-content: space-between; align-items: center; min-height: 40px; border-bottom: 1px solid var(--border); cursor: default; } .section-header h2 { margin: 0; font-size: 0.9rem; font-weight: 700; display: flex; align-items: center; gap: 0.6rem; color: var(--primary); } .toggle-icon { display: none !important; } .section-body { flex: 1; padding: 0.5rem; /* Reducido de 1rem */ overflow-y: auto; background: #ffffff; height: 100%; } /* MAPA COMPACTO */ #mapView { width: 100%; height: 100%; /* Ocupa todo el alto disponible en su body */ min-height: 500px; border-radius: 4px; border: 1px solid var(--border); } /* CARDS COMPACTAS */ /* SUB-NAVEGACION INTERNA CONTACTO */ .sub-nav-bar { display: flex; gap: 2px; padding: 4px; background: #f1f5f9; border-bottom: 1px solid var(--border); } .sub-tab { flex: 1; padding: 6px; font-size: 0.65rem; font-weight: 700; text-align: center; cursor: pointer; border-radius: 4px; color: var(--text-muted); text-transform: uppercase; border: 1px solid transparent; } .sub-tab.active { background: white; color: var(--primary); border-color: var(--border); box-shadow: var(--shadow); } .report-grid { height: 100%; display: flex; flex-direction: column; } .report-card { display: none; flex: 1; flex-direction: column; border: none; border-radius: 0; } .report-card.active { display: flex; } .card-header { display: none; /* Oculto ya que tenemos el sub-nav */ } .card-body { flex: 1; padding: 0; display: flex; flex-direction: column; } .editable-area { flex: 1; width: 100%; height: 100% !important; padding: 1rem; font-size: 0.95rem; border: none; border-radius: 0; resize: none; line-height: 1.6; } /* IFRAME COMPACTO */ #iframeWrapper { width: 100%; height: 100%; border-radius: 4px; border: 1px solid var(--border); } /* FICHAS COMPACTAS */ .inmuebles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.75rem; } .inmueble-card { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: white; cursor: pointer; font-size: 0.8rem; } .inmueble-img { height: 140px; } .inmueble-content { padding: 0.75rem; } /* PANEL DE LOGS FLOTANTE O MINI */ #logPanel { position: fixed; bottom: 0; right: 0; left: 260px; background: #0f172a; border-top: 1px solid #334155; z-index: 2000; } .log-header { padding: 6px 15px; font-size: 10px; background: #1e293b; color: #94a3b8; display: flex; justify-content: space-between; cursor: pointer; } #debugContent { height: 100px; padding: 10px; font-family: 'JetBrains Mono', monospace; font-size: 10px; overflow-y: auto; color: #38bdf8; } .collapsed-logs #debugContent { display: none; } /* BOTONES ACCION ETIQUETAS */ .label-action-btn { background: none; border: none; padding: 2px; cursor: pointer; color: var(--text-muted); } .label-action-btn:hover { color: var(--primary); } /* UTILS */ .hidden { display: none !important; } .status-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 3000; padding: 8px; text-align: center; color: white; transform: translateY(-100%); transition: 0.3s; font-weight: 700; } .status-bar.active { transform: translateY(0); } .status-success { background: #10b981; } .status-error { background: #ef4444; } @keyframes spin { to { transform: rotate(360deg); } } .loader { width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; } /* MAP SECTION (NEW) */ #mapView { width: 100%; height: 500px; border-radius: 8px; border: 1px solid var(--border); background: #f1f5f9; z-index: 10; } /* INTERNAL CARDS (Contacto Section) */ .report-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } .report-card { background: #fdfdfd; border-radius: 8px; border: 1px solid var(--border); overflow: hidden; } .card-header { padding: 0.75rem 1rem; background: #f8fafc; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .card-title { font-size: 0.75rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .card-body { padding: 1rem; position: relative; } .report-card.collapsed .card-body { display: none; } .editable-area { width: 100%; min-height: 80px; border: 1px solid transparent; padding: 0.5rem; font-size: 0.95rem; background: transparent; resize: vertical; outline: none; line-height: 1.6; color: var(--text-main); } .is-editable .editable-area { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 0.75rem; } .is-editable .editable-area:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } /* PARCELA (Iframe) */ #iframeWrapper { width: 100%; height: 1200px; border: 1px solid var(--border); border-radius: 8px; overflow: auto; } /* FICHAS (Vertical Grid) */ .inmuebles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; } .inmueble-card { background: white; border-radius: 12px; border: 1px solid var(--border); overflow: hidden; transition: all 0.3s ease; display: flex; flex-direction: column; cursor: pointer; position: relative; } .inmueble-card:hover { transform: translateY(-4px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); border-color: var(--primary); } .inmueble-img { height: 180px; position: relative; overflow: hidden; } .inmueble-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .inmueble-card:hover .inmueble-img img { transform: scale(1.05); } .inmueble-content { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; } .inmueble-price { font-size: 1.25rem; font-weight: 800; color: var(--text-main); } .inmueble-ref { font-size: 0.75rem; color: var(--primary); font-weight: 700; background: #eff6ff; padding: 2px 8px; border-radius: 4px; } .inmueble-title { font-size: 0.9rem; font-weight: 600; color: var(--text-main); line-height: 1.4; min-height: 2.8em; } .inmueble-features { border-top: 1px solid #f1f5f9; padding-top: 0.75rem; margin-top: 0.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; font-size: 0.75rem; color: var(--text-muted); } /* FORMS & INPUTS (Left Panel) */ .form-group { margin-bottom: 1.25rem; } .form-label { font-size: 0.7rem; font-weight: 700; color: var(--text-muted); display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 0.05em; } .form-input, .phase-select { width: 100%; padding: 0.65rem 0.85rem; border: 1px solid var(--border); border-radius: 8px; font-size: 0.9rem; background: #fff; outline: none; transition: all 0.2s; } .form-input:focus, .phase-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } /* ACTIONS */ .card-actions { display: flex; gap: 0.5rem; position: absolute; top: 0.75rem; right: 1rem; z-index: 10; } .action-btn { background: white; border: 1px solid var(--border); border-radius: 6px; padding: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .action-btn:hover { background: #f8fafc; transform: scale(1.1); } .btn-ia { color: var(--ia-color); } .btn-ws { color: var(--whatsapp); } /* LOGS */ #logPanel { position: fixed; bottom: 0; left: 0; right: 0; background: #0f172a; border-top: 1px solid #334155; z-index: 2000; transition: transform 0.3s ease; } .log-header { padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; color: #94a3b8; font-size: 12px; font-weight: 700; background: #1e293b; } #debugContent { height: 150px; overflow-y: auto; padding: 15px 20px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #38bdf8; } .collapsed-logs #debugContent { display: none; } /* STATUS BAR */ .status-bar { padding: 0.75rem; text-align: center; font-size: 0.9rem; font-weight: 600; position: fixed; top: 0; left: 0; right: 0; z-index: 2500; transform: translateY(-100%); transition: transform 0.3s ease; } .status-bar.active { transform: translateY(0); } .status-success { background: #10b981; color: white; } .status-error { background: #ef4444; color: white; } /* UTILS */ .loader { width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: #fff; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .hidden { display: none !important; } /* RESPONSIVE */ @media (max-width: 1024px) { .contact-panel { width: 260px; } } @media (max-width: 768px) { body { font-size: 12px; } header.crm-header { height: auto; padding: 0.5rem; flex-direction: row; flex-wrap: wrap; gap: 0.5rem; } .header-left { width: 100%; justify-content: space-between; margin-bottom: 2px; } .header-controls { width: 100%; gap: 0.25rem; display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; } .header-select, .search-form { width: 100%; min-width: 0; height: 30px; font-size: 0.75rem; } .search-form { grid-column: 1 / span 3; } .main-container { flex-direction: column; } /* En móvil, el sidebar es una pestaña más */ .contact-panel { display: none; /* Oculto por defecto en móvil */ width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-right: none; z-index: 50; /* Por debajo de la barra de navegación de pestañas */ } .contact-panel.active { display: flex; } .tab-mobile-only { display: flex; } .content-area { height: 100%; width: 100%; } .section-nav-bar { padding: 4px; background: #f8fafc; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } .nav-tab { padding: 6px 4px; font-size: 0.7rem; } #logPanel { left: 0; font-size: 9px; } #debugContent { height: 80px; } } 

 :root { --primary: #2563eb; --primary-hover: #1d4ed8; --bg-main: #f1f5f9; --bg-panel: #ffffff; --text-main: #1e293b; --text-muted: #64748b; --border: #e2e8f0; --shadow: 0 1px 3px rgba(0, 0, 0, 0.1); --whatsapp: #25d366; --ia-color: #8b5cf6; --section-bg: #ffffff; } * { box-sizing: border-box; outline: none; } /* Minimalist Scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #f1f5f9; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } body { margin: 0; background: var(--bg-main); font-family: 'Inter', system-ui, sans-serif; height: 100vh; display: flex; flex-direction: column; overflow: hidden; color: var(--text-main); font-size: 13px; /* Más compacto */ } header.crm-header { background: white; padding: 0 1rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; z-index: 1000; height: 48px; /* Reducido de 64px */ flex-shrink: 0; } .brand-box { display: flex; align-items: baseline; gap: 0.3rem; } .brand { font-weight: 800; font-size: 1.1rem; color: var(--primary); letter-spacing: -0.025em; } .version-tag { font-size: 0.6rem; color: var(--text-muted); font-weight: 700; background: #f1f5f9; padding: 1px 5px; border-radius: 3px; } .search-form { display: flex; min-width: 200px; height: 32px; } .search-form input { flex: 1; padding: 0 0.75rem; border: 1px solid var(--border); border-right: none; border-radius: 6px 0 0 6px; font-size: 0.85rem; } .search-form button { padding: 0 0.75rem; border: none; background: var(--primary); color: white; cursor: pointer; border-radius: 0 6px 6px 0; } .header-select { height: 32px; padding: 0 0.5rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.8rem; background: white; width: 130px; } .main-container { display: flex; flex: 1; overflow: hidden; position: relative; } /* PANEL IZQUIERDO (SIDEBAR) */ .contact-panel { width: 260px; background: white; border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; min-height: 0; z-index: 10; } .panel-scroll { flex: 1; overflow-y: auto; padding: 1rem 0.75rem; } /* CONTENIDO CENTRAL */ .content-area { flex: 1; background: #f8fafc; display: flex; flex-direction: column; overflow: hidden; position: relative; } /* BARRA DE NAVEGACIÓN SUPERIOR PERSISTENTE */ .section-nav-bar { background: white; border-bottom: 1px solid var(--border); display: flex; padding: 4px; gap: 4px; z-index: 100; flex-shrink: 0; } .nav-tab { flex: 1; padding: 8px 10px; font-size: 0.75rem; font-weight: 700; color: var(--text-muted); text-align: center; cursor: pointer; border-radius: 4px; transition: all 0.2s; border: 1px solid transparent; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; justify-content: center; gap: 6px; } /* Ocultar tab de contacto en desktop ya que está el sidebar */ .tab-mobile-only { display: none; } .nav-tab:hover { background: #f1f5f9; color: var(--text-main); } .nav-tab.active { background: #eff6ff; color: var(--primary); border-color: #dbeafe; } #contentScroll { flex: 1; padding: 0; display: flex; flex-direction: column; position: relative; background: white; overflow: hidden; } /* SECCIONES COMO PESTAÑAS FULL-HEIGHT */ .main-section { display: none; flex-direction: column; height: 100%; width: 100%; border: none; background: white; border-radius: 0; margin-bottom: 0px; } .main-section.active { display: flex; } .section-header { padding: 0.6rem 1rem; background: #f8fafc; display: flex; justify-content: space-between; align-items: center; min-height: 40px; border-bottom: 1px solid var(--border); cursor: default; } .section-header h2 { margin: 0; font-size: 0.9rem; font-weight: 700; display: flex; align-items: center; gap: 0.6rem; color: var(--primary); } .toggle-icon { display: none !important; } .section-body { flex: 1; padding: 0.5rem; /* Reducido de 1rem */ overflow-y: auto; background: #ffffff; height: 100%; } /* MAPA COMPACTO */ #mapView { width: 100%; height: 100%; /* Ocupa todo el alto disponible en su body */ min-height: 500px; border-radius: 4px; border: 1px solid var(--border); } /* CARDS COMPACTAS */ /* SUB-NAVEGACION INTERNA CONTACTO */ .sub-nav-bar { display: flex; gap: 2px; padding: 4px; background: #f1f5f9; border-bottom: 1px solid var(--border); } .sub-tab { flex: 1; padding: 6px; font-size: 0.65rem; font-weight: 700; text-align: center; cursor: pointer; border-radius: 4px; color: var(--text-muted); text-transform: uppercase; border: 1px solid transparent; } .sub-tab.active { background: white; color: var(--primary); border-color: var(--border); box-shadow: var(--shadow); } .report-grid { height: 100%; display: flex; flex-direction: column; } .report-card { display: none; flex: 1; flex-direction: column; border: none; border-radius: 0; } .report-card.active { display: flex; } .card-header { display: none; /* Oculto ya que tenemos el sub-nav */ } .card-body { flex: 1; padding: 0; display: flex; flex-direction: column; } .editable-area { flex: 1; width: 100%; height: 100% !important; padding: 1rem; font-size: 0.95rem; border: none; border-radius: 0; resize: none; line-height: 1.6; } /* IFRAME COMPACTO */ #iframeWrapper { width: 100%; height: 100%; border-radius: 4px; border: 1px solid var(--border); } /* FICHAS COMPACTAS */ .inmuebles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.75rem; } .inmueble-card { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: white; cursor: pointer; font-size: 0.8rem; } .inmueble-img { height: 140px; } .inmueble-content { padding: 0.75rem; } /* PANEL DE LOGS FLOTANTE O MINI */ #logPanel { position: fixed; bottom: 0; right: 0; left: 260px; background: #0f172a; border-top: 1px solid #334155; z-index: 2000; } .log-header { padding: 6px 15px; font-size: 10px; background: #1e293b; color: #94a3b8; display: flex; justify-content: space-between; cursor: pointer; } #debugContent { height: 100px; padding: 10px; font-family: 'JetBrains Mono', monospace; font-size: 10px; overflow-y: auto; color: #38bdf8; } .collapsed-logs #debugContent { display: none; } /* BOTONES ACCION ETIQUETAS */ .label-action-btn { background: none; border: none; padding: 2px; cursor: pointer; color: var(--text-muted); } .label-action-btn:hover { color: var(--primary); } /* UTILS */ .hidden { display: none !important; } .status-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 3000; padding: 8px; text-align: center; color: white; transform: translateY(-100%); transition: 0.3s; font-weight: 700; } .status-bar.active { transform: translateY(0); } .status-success { background: #10b981; } .status-error { background: #ef4444; } @keyframes spin { to { transform: rotate(360deg); } } .loader { width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; } /* MAP SECTION (NEW) */ #mapView { width: 100%; height: 500px; border-radius: 8px; border: 1px solid var(--border); background: #f1f5f9; z-index: 10; } /* INTERNAL CARDS (Contacto Section) */ .report-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } .report-card { background: #fdfdfd; border-radius: 8px; border: 1px solid var(--border); overflow: hidden; } .card-header { padding: 0.75rem 1rem; background: #f8fafc; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .card-title { font-size: 0.75rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .card-body { padding: 1rem; position: relative; } .report-card.collapsed .card-body { display: none; } .editable-area { width: 100%; min-height: 80px; border: 1px solid transparent; padding: 0.5rem; font-size: 0.95rem; background: transparent; resize: vertical; outline: none; line-height: 1.6; color: var(--text-main); } .is-editable .editable-area { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 0.75rem; } .is-editable .editable-area:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } /* PARCELA (Iframe) */ #iframeWrapper { width: 100%; height: 1200px; border: 1px solid var(--border); border-radius: 8px; overflow: auto; } /* FICHAS (Vertical Grid) */ .inmuebles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; } .inmueble-card { background: white; border-radius: 12px; border: 1px solid var(--border); overflow: hidden; transition: all 0.3s ease; display: flex; flex-direction: column; cursor: pointer; position: relative; } .inmueble-card:hover { transform: translateY(-4px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); border-color: var(--primary); } .inmueble-img { height: 180px; position: relative; overflow: hidden; } .inmueble-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .inmueble-card:hover .inmueble-img img { transform: scale(1.05); } .inmueble-content { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; } .inmueble-price { font-size: 1.25rem; font-weight: 800; color: var(--text-main); } .inmueble-ref { font-size: 0.75rem; color: var(--primary); font-weight: 700; background: #eff6ff; padding: 2px 8px; border-radius: 4px; } .inmueble-title { font-size: 0.9rem; font-weight: 600; color: var(--text-main); line-height: 1.4; min-height: 2.8em; } .inmueble-features { border-top: 1px solid #f1f5f9; padding-top: 0.75rem; margin-top: 0.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; font-size: 0.75rem; color: var(--text-muted); } /* FORMS & INPUTS (Left Panel) */ .form-group { margin-bottom: 1.25rem; } .form-label { font-size: 0.7rem; font-weight: 700; color: var(--text-muted); display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 0.05em; } .form-input, .phase-select { width: 100%; padding: 0.65rem 0.85rem; border: 1px solid var(--border); border-radius: 8px; font-size: 0.9rem; background: #fff; outline: none; transition: all 0.2s; } .form-input:focus, .phase-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } /* ACTIONS */ .card-actions { display: flex; gap: 0.5rem; position: absolute; top: 0.75rem; right: 1rem; z-index: 10; } .action-btn { background: white; border: 1px solid var(--border); border-radius: 6px; padding: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .action-btn:hover { background: #f8fafc; transform: scale(1.1); } .btn-ia { color: var(--ia-color); } .btn-ws { color: var(--whatsapp); } /* LOGS */ #logPanel { position: fixed; bottom: 0; left: 0; right: 0; background: #0f172a; border-top: 1px solid #334155; z-index: 2000; transition: transform 0.3s ease; } .log-header { padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; color: #94a3b8; font-size: 12px; font-weight: 700; background: #1e293b; } #debugContent { height: 150px; overflow-y: auto; padding: 15px 20px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #38bdf8; } .collapsed-logs #debugContent { display: none; } /* STATUS BAR */ .status-bar { padding: 0.75rem; text-align: center; font-size: 0.9rem; font-weight: 600; position: fixed; top: 0; left: 0; right: 0; z-index: 2500; transform: translateY(-100%); transition: transform 0.3s ease; } .status-bar.active { transform: translateY(0); } .status-success { background: #10b981; color: white; } .status-error { background: #ef4444; color: white; } /* UTILS */ .loader { width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: #fff; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .hidden { display: none !important; } /* RESPONSIVE */ @media (max-width: 1024px) { .contact-panel { width: 260px; } } @media (max-width: 768px) { body { font-size: 12px; } header.crm-header { height: auto; padding: 0.5rem; flex-direction: row; flex-wrap: wrap; gap: 0.5rem; } .header-left { width: 100%; justify-content: space-between; margin-bottom: 2px; } .header-controls { width: 100%; gap: 0.25rem; display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; } .header-select, .search-form { width: 100%; min-width: 0; height: 30px; font-size: 0.75rem; } .search-form { grid-column: 1 / span 3; } .main-container { flex-direction: column; } /* En móvil, el sidebar es una pestaña más */ .contact-panel { display: none; /* Oculto por defecto en móvil */ width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-right: none; z-index: 50; /* Por debajo de la barra de navegación de pestañas */ } .contact-panel.active { display: flex; } .tab-mobile-only { display: flex; } .content-area { height: 100%; width: 100%; } .section-nav-bar { padding: 4px; background: #f8fafc; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } .nav-tab { padding: 6px 4px; font-size: 0.7rem; } #logPanel { left: 0; font-size: 9px; } #debugContent { height: 80px; } } 

 :root { --primary: #2563eb; --primary-hover: #1d4ed8; --bg-main: #f1f5f9; --bg-panel: #ffffff; --text-main: #1e293b; --text-muted: #64748b; --border: #e2e8f0; --shadow: 0 1px 3px rgba(0, 0, 0, 0.1); --whatsapp: #25d366; --ia-color: #8b5cf6; --section-bg: #ffffff; } * { box-sizing: border-box; outline: none; } /* Minimalist Scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #f1f5f9; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } body { margin: 0; background: var(--bg-main); font-family: 'Inter', system-ui, sans-serif; height: 100vh; display: flex; flex-direction: column; overflow: hidden; color: var(--text-main); font-size: 13px; /* Más compacto */ } header.crm-header { background: white; padding: 0 1rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; z-index: 1000; height: 48px; /* Reducido de 64px */ flex-shrink: 0; } .brand-box { display: flex; align-items: baseline; gap: 0.3rem; } .brand { font-weight: 800; font-size: 1.1rem; color: var(--primary); letter-spacing: -0.025em; } .version-tag { font-size: 0.6rem; color: var(--text-muted); font-weight: 700; background: #f1f5f9; padding: 1px 5px; border-radius: 3px; } .search-form { display: flex; min-width: 200px; height: 32px; } .search-form input { flex: 1; padding: 0 0.75rem; border: 1px solid var(--border); border-right: none; border-radius: 6px 0 0 6px; font-size: 0.85rem; } .search-form button { padding: 0 0.75rem; border: none; background: var(--primary); color: white; cursor: pointer; border-radius: 0 6px 6px 0; } .header-select { height: 32px; padding: 0 0.5rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.8rem; background: white; width: 130px; } .main-container { display: flex; flex: 1; overflow: hidden; position: relative; } /* PANEL IZQUIERDO (SIDEBAR) */ .contact-panel { width: 260px; background: white; border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; min-height: 0; z-index: 10; } .panel-scroll { flex: 1; overflow-y: auto; padding: 1rem 0.75rem; } /* CONTENIDO CENTRAL */ .content-area { flex: 1; background: #f8fafc; display: flex; flex-direction: column; overflow: hidden; position: relative; } /* BARRA DE NAVEGACIÓN SUPERIOR PERSISTENTE */ .section-nav-bar { background: white; border-bottom: 1px solid var(--border); display: flex; padding: 4px; gap: 4px; z-index: 100; flex-shrink: 0; } .nav-tab { flex: 1; padding: 8px 10px; font-size: 0.75rem; font-weight: 700; color: var(--text-muted); text-align: center; cursor: pointer; border-radius: 4px; transition: all 0.2s; border: 1px solid transparent; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; justify-content: center; gap: 6px; } /* Ocultar tab de contacto en desktop ya que está el sidebar */ .tab-mobile-only { display: none; } .nav-tab:hover { background: #f1f5f9; color: var(--text-main); } .nav-tab.active { background: #eff6ff; color: var(--primary); border-color: #dbeafe; } #contentScroll { flex: 1; padding: 0; display: flex; flex-direction: column; position: relative; background: white; overflow: hidden; } /* SECCIONES COMO PESTAÑAS FULL-HEIGHT */ .main-section { display: none; flex-direction: column; height: 100%; width: 100%; border: none; background: white; border-radius: 0; margin-bottom: 0px; } .main-section.active { display: flex; } .section-header { padding: 0.6rem 1rem; background: #f8fafc; display: flex; justify-content: space-between; align-items: center; min-height: 40px; border-bottom: 1px solid var(--border); cursor: default; } .section-header h2 { margin: 0; font-size: 0.9rem; font-weight: 700; display: flex; align-items: center; gap: 0.6rem; color: var(--primary); } .toggle-icon { display: none !important; } .section-body { flex: 1; padding: 0.5rem; /* Reducido de 1rem */ overflow-y: auto; background: #ffffff; height: 100%; } /* MAPA COMPACTO */ #mapView { width: 100%; height: 100%; /* Ocupa todo el alto disponible en su body */ min-height: 500px; border-radius: 4px; border: 1px solid var(--border); } /* CARDS COMPACTAS */ /* SUB-NAVEGACION INTERNA CONTACTO */ .sub-nav-bar { display: flex; gap: 2px; padding: 4px; background: #f1f5f9; border-bottom: 1px solid var(--border); } .sub-tab { flex: 1; padding: 6px; font-size: 0.65rem; font-weight: 700; text-align: center; cursor: pointer; border-radius: 4px; color: var(--text-muted); text-transform: uppercase; border: 1px solid transparent; } .sub-tab.active { background: white; color: var(--primary); border-color: var(--border); box-shadow: var(--shadow); } .report-grid { height: 100%; display: flex; flex-direction: column; } .report-card { display: none; flex: 1; flex-direction: column; border: none; border-radius: 0; } .report-card.active { display: flex; } .card-header { display: none; /* Oculto ya que tenemos el sub-nav */ } .card-body { flex: 1; padding: 0; display: flex; flex-direction: column; } .editable-area { flex: 1; width: 100%; height: 100% !important; padding: 1rem; font-size: 0.95rem; border: none; border-radius: 0; resize: none; line-height: 1.6; } /* IFRAME COMPACTO */ #iframeWrapper { width: 100%; height: 100%; border-radius: 4px; border: 1px solid var(--border); } /* FICHAS COMPACTAS */ .inmuebles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.75rem; } .inmueble-card { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: white; cursor: pointer; font-size: 0.8rem; } .inmueble-img { height: 140px; } .inmueble-content { padding: 0.75rem; } /* PANEL DE LOGS FLOTANTE O MINI */ #logPanel { position: fixed; bottom: 0; right: 0; left: 260px; background: #0f172a; border-top: 1px solid #334155; z-index: 2000; } .log-header { padding: 6px 15px; font-size: 10px; background: #1e293b; color: #94a3b8; display: flex; justify-content: space-between; cursor: pointer; } #debugContent { height: 100px; padding: 10px; font-family: 'JetBrains Mono', monospace; font-size: 10px; overflow-y: auto; color: #38bdf8; } .collapsed-logs #debugContent { display: none; } /* BOTONES ACCION ETIQUETAS */ .label-action-btn { background: none; border: none; padding: 2px; cursor: pointer; color: var(--text-muted); } .label-action-btn:hover { color: var(--primary); } /* UTILS */ .hidden { display: none !important; } .status-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 3000; padding: 8px; text-align: center; color: white; transform: translateY(-100%); transition: 0.3s; font-weight: 700; } .status-bar.active { transform: translateY(0); } .status-success { background: #10b981; } .status-error { background: #ef4444; } @keyframes spin { to { transform: rotate(360deg); } } .loader { width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; } /* MAP SECTION (NEW) */ #mapView { width: 100%; height: 500px; border-radius: 8px; border: 1px solid var(--border); background: #f1f5f9; z-index: 10; } /* INTERNAL CARDS (Contacto Section) */ .report-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } .report-card { background: #fdfdfd; border-radius: 8px; border: 1px solid var(--border); overflow: hidden; } .card-header { padding: 0.75rem 1rem; background: #f8fafc; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .card-title { font-size: 0.75rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .card-body { padding: 1rem; position: relative; } .report-card.collapsed .card-body { display: none; } .editable-area { width: 100%; min-height: 80px; border: 1px solid transparent; padding: 0.5rem; font-size: 0.95rem; background: transparent; resize: vertical; outline: none; line-height: 1.6; color: var(--text-main); } .is-editable .editable-area { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 0.75rem; } .is-editable .editable-area:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } /* PARCELA (Iframe) */ #iframeWrapper { width: 100%; height: 1200px; border: 1px solid var(--border); border-radius: 8px; overflow: auto; } /* FICHAS (Vertical Grid) */ .inmuebles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; } .inmueble-card { background: white; border-radius: 12px; border: 1px solid var(--border); overflow: hidden; transition: all 0.3s ease; display: flex; flex-direction: column; cursor: pointer; position: relative; } .inmueble-card:hover { transform: translateY(-4px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); border-color: var(--primary); } .inmueble-img { height: 180px; position: relative; overflow: hidden; } .inmueble-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .inmueble-card:hover .inmueble-img img { transform: scale(1.05); } .inmueble-content { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; } .inmueble-price { font-size: 1.25rem; font-weight: 800; color: var(--text-main); } .inmueble-ref { font-size: 0.75rem; color: var(--primary); font-weight: 700; background: #eff6ff; padding: 2px 8px; border-radius: 4px; } .inmueble-title { font-size: 0.9rem; font-weight: 600; color: var(--text-main); line-height: 1.4; min-height: 2.8em; } .inmueble-features { border-top: 1px solid #f1f5f9; padding-top: 0.75rem; margin-top: 0.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; font-size: 0.75rem; color: var(--text-muted); } /* FORMS & INPUTS (Left Panel) */ .form-group { margin-bottom: 1.25rem; } .form-label { font-size: 0.7rem; font-weight: 700; color: var(--text-muted); display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 0.05em; } .form-input, .phase-select { width: 100%; padding: 0.65rem 0.85rem; border: 1px solid var(--border); border-radius: 8px; font-size: 0.9rem; background: #fff; outline: none; transition: all 0.2s; } .form-input:focus, .phase-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } /* ACTIONS */ .card-actions { display: flex; gap: 0.5rem; position: absolute; top: 0.75rem; right: 1rem; z-index: 10; } .action-btn { background: white; border: 1px solid var(--border); border-radius: 6px; padding: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .action-btn:hover { background: #f8fafc; transform: scale(1.1); } .btn-ia { color: var(--ia-color); } .btn-ws { color: var(--whatsapp); } /* LOGS */ #logPanel { position: fixed; bottom: 0; left: 0; right: 0; background: #0f172a; border-top: 1px solid #334155; z-index: 2000; transition: transform 0.3s ease; } .log-header { padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; color: #94a3b8; font-size: 12px; font-weight: 700; background: #1e293b; } #debugContent { height: 150px; overflow-y: auto; padding: 15px 20px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #38bdf8; } .collapsed-logs #debugContent { display: none; } /* STATUS BAR */ .status-bar { padding: 0.75rem; text-align: center; font-size: 0.9rem; font-weight: 600; position: fixed; top: 0; left: 0; right: 0; z-index: 2500; transform: translateY(-100%); transition: transform 0.3s ease; } .status-bar.active { transform: translateY(0); } .status-success { background: #10b981; color: white; } .status-error { background: #ef4444; color: white; } /* UTILS */ .loader { width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: #fff; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .hidden { display: none !important; } /* RESPONSIVE */ @media (max-width: 1024px) { .contact-panel { width: 260px; } } @media (max-width: 768px) { body { font-size: 12px; } header.crm-header { height: auto; padding: 0.5rem; flex-direction: row; flex-wrap: wrap; gap: 0.5rem; } .header-left { width: 100%; justify-content: space-between; margin-bottom: 2px; } .header-controls { width: 100%; gap: 0.25rem; display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; } .header-select, .search-form { width: 100%; min-width: 0; height: 30px; font-size: 0.75rem; } .search-form { grid-column: 1 / span 3; } .main-container { flex-direction: column; } /* En móvil, el sidebar es una pestaña más */ .contact-panel { display: none; /* Oculto por defecto en móvil */ width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-right: none; z-index: 50; /* Por debajo de la barra de navegación de pestañas */ } .contact-panel.active { display: flex; } .tab-mobile-only { display: flex; } .content-area { height: 100%; width: 100%; } .section-nav-bar { padding: 4px; background: #f8fafc; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } .nav-tab { padding: 6px 4px; font-size: 0.7rem; } #logPanel { left: 0; font-size: 9px; } #debugContent { height: 80px; } } 

 :root { --primary: #2563eb; --primary-hover: #1d4ed8; --bg-main: #f1f5f9; --bg-panel: #ffffff; --text-main: #1e293b; --text-muted: #64748b; --border: #e2e8f0; --shadow: 0 1px 3px rgba(0, 0, 0, 0.1); --whatsapp: #25d366; --ia-color: #8b5cf6; --section-bg: #ffffff; } * { box-sizing: border-box; outline: none; } /* Minimalist Scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #f1f5f9; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } body { margin: 0; background: var(--bg-main); font-family: 'Inter', system-ui, sans-serif; height: 100vh; display: flex; flex-direction: column; overflow: hidden; color: var(--text-main); font-size: 13px; /* Más compacto */ } header.crm-header { background: white; padding: 0 1rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; z-index: 1000; height: 48px; /* Reducido de 64px */ flex-shrink: 0; } .brand-box { display: flex; align-items: baseline; gap: 0.3rem; } .brand { font-weight: 800; font-size: 1.1rem; color: var(--primary); letter-spacing: -0.025em; } .version-tag { font-size: 0.6rem; color: var(--text-muted); font-weight: 700; background: #f1f5f9; padding: 1px 5px; border-radius: 3px; } .search-form { display: flex; min-width: 200px; height: 32px; } .search-form input { flex: 1; padding: 0 0.75rem; border: 1px solid var(--border); border-right: none; border-radius: 6px 0 0 6px; font-size: 0.85rem; } .search-form button { padding: 0 0.75rem; border: none; background: var(--primary); color: white; cursor: pointer; border-radius: 0 6px 6px 0; } .header-select { height: 32px; padding: 0 0.5rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.8rem; background: white; width: 130px; } .main-container { display: flex; flex: 1; overflow: hidden; position: relative; } /* PANEL IZQUIERDO (SIDEBAR) */ .contact-panel { width: 260px; background: white; border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; min-height: 0; z-index: 10; } .panel-scroll { flex: 1; overflow-y: auto; padding: 1rem 0.75rem; } /* CONTENIDO CENTRAL */ .content-area { flex: 1; background: #f8fafc; display: flex; flex-direction: column; overflow: hidden; position: relative; } /* BARRA DE NAVEGACIÓN SUPERIOR PERSISTENTE */ .section-nav-bar { background: white; border-bottom: 1px solid var(--border); display: flex; padding: 4px; gap: 4px; z-index: 100; flex-shrink: 0; } .nav-tab { flex: 1; padding: 8px 10px; font-size: 0.75rem; font-weight: 700; color: var(--text-muted); text-align: center; cursor: pointer; border-radius: 4px; transition: all 0.2s; border: 1px solid transparent; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; justify-content: center; gap: 6px; } /* Ocultar tab de contacto en desktop ya que está el sidebar */ .tab-mobile-only { display: none; } .nav-tab:hover { background: #f1f5f9; color: var(--text-main); } .nav-tab.active { background: #eff6ff; color: var(--primary); border-color: #dbeafe; } #contentScroll { flex: 1; padding: 0; display: flex; flex-direction: column; position: relative; background: white; overflow: hidden; } /* SECCIONES COMO PESTAÑAS FULL-HEIGHT */ .main-section { display: none; flex-direction: column; height: 100%; width: 100%; border: none; background: white; border-radius: 0; margin-bottom: 0px; } .main-section.active { display: flex; } .section-header { padding: 0.6rem 1rem; background: #f8fafc; display: flex; justify-content: space-between; align-items: center; min-height: 40px; border-bottom: 1px solid var(--border); cursor: default; } .section-header h2 { margin: 0; font-size: 0.9rem; font-weight: 700; display: flex; align-items: center; gap: 0.6rem; color: var(--primary); } .toggle-icon { display: none !important; } .section-body { flex: 1; padding: 0.5rem; /* Reducido de 1rem */ overflow-y: auto; background: #ffffff; height: 100%; } /* MAPA COMPACTO */ #mapView { width: 100%; height: 100%; /* Ocupa todo el alto disponible en su body */ min-height: 500px; border-radius: 4px; border: 1px solid var(--border); } /* CARDS COMPACTAS */ /* SUB-NAVEGACION INTERNA CONTACTO */ .sub-nav-bar { display: flex; gap: 2px; padding: 4px; background: #f1f5f9; border-bottom: 1px solid var(--border); } .sub-tab { flex: 1; padding: 6px; font-size: 0.65rem; font-weight: 700; text-align: center; cursor: pointer; border-radius: 4px; color: var(--text-muted); text-transform: uppercase; border: 1px solid transparent; } .sub-tab.active { background: white; color: var(--primary); border-color: var(--border); box-shadow: var(--shadow); } .report-grid { height: 100%; display: flex; flex-direction: column; } .report-card { display: none; flex: 1; flex-direction: column; border: none; border-radius: 0; } .report-card.active { display: flex; } .card-header { display: none; /* Oculto ya que tenemos el sub-nav */ } .card-body { flex: 1; padding: 0; display: flex; flex-direction: column; } .editable-area { flex: 1; width: 100%; height: 100% !important; padding: 1rem; font-size: 0.95rem; border: none; border-radius: 0; resize: none; line-height: 1.6; } /* IFRAME COMPACTO */ #iframeWrapper { width: 100%; height: 100%; border-radius: 4px; border: 1px solid var(--border); } /* FICHAS COMPACTAS */ .inmuebles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.75rem; } .inmueble-card { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: white; cursor: pointer; font-size: 0.8rem; } .inmueble-img { height: 140px; } .inmueble-content { padding: 0.75rem; } /* PANEL DE LOGS FLOTANTE O MINI */ #logPanel { position: fixed; bottom: 0; right: 0; left: 260px; background: #0f172a; border-top: 1px solid #334155; z-index: 2000; } .log-header { padding: 6px 15px; font-size: 10px; background: #1e293b; color: #94a3b8; display: flex; justify-content: space-between; cursor: pointer; } #debugContent { height: 100px; padding: 10px; font-family: 'JetBrains Mono', monospace; font-size: 10px; overflow-y: auto; color: #38bdf8; } .collapsed-logs #debugContent { display: none; } /* BOTONES ACCION ETIQUETAS */ .label-action-btn { background: none; border: none; padding: 2px; cursor: pointer; color: var(--text-muted); } .label-action-btn:hover { color: var(--primary); } /* UTILS */ .hidden { display: none !important; } .status-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 3000; padding: 8px; text-align: center; color: white; transform: translateY(-100%); transition: 0.3s; font-weight: 700; } .status-bar.active { transform: translateY(0); } .status-success { background: #10b981; } .status-error { background: #ef4444; } @keyframes spin { to { transform: rotate(360deg); } } .loader { width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; } /* MAP SECTION (NEW) */ #mapView { width: 100%; height: 500px; border-radius: 8px; border: 1px solid var(--border); background: #f1f5f9; z-index: 10; } /* INTERNAL CARDS (Contacto Section) */ .report-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } .report-card { background: #fdfdfd; border-radius: 8px; border: 1px solid var(--border); overflow: hidden; } .card-header { padding: 0.75rem 1rem; background: #f8fafc; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .card-title { font-size: 0.75rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .card-body { padding: 1rem; position: relative; } .report-card.collapsed .card-body { display: none; } .editable-area { width: 100%; min-height: 80px; border: 1px solid transparent; padding: 0.5rem; font-size: 0.95rem; background: transparent; resize: vertical; outline: none; line-height: 1.6; color: var(--text-main); } .is-editable .editable-area { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 0.75rem; } .is-editable .editable-area:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } /* PARCELA (Iframe) */ #iframeWrapper { width: 100%; height: 1200px; border: 1px solid var(--border); border-radius: 8px; overflow: auto; } /* FICHAS (Vertical Grid) */ .inmuebles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; } .inmueble-card { background: white; border-radius: 12px; border: 1px solid var(--border); overflow: hidden; transition: all 0.3s ease; display: flex; flex-direction: column; cursor: pointer; position: relative; } .inmueble-card:hover { transform: translateY(-4px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); border-color: var(--primary); } .inmueble-img { height: 180px; position: relative; overflow: hidden; } .inmueble-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .inmueble-card:hover .inmueble-img img { transform: scale(1.05); } .inmueble-content { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; } .inmueble-price { font-size: 1.25rem; font-weight: 800; color: var(--text-main); } .inmueble-ref { font-size: 0.75rem; color: var(--primary); font-weight: 700; background: #eff6ff; padding: 2px 8px; border-radius: 4px; } .inmueble-title { font-size: 0.9rem; font-weight: 600; color: var(--text-main); line-height: 1.4; min-height: 2.8em; } .inmueble-features { border-top: 1px solid #f1f5f9; padding-top: 0.75rem; margin-top: 0.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; font-size: 0.75rem; color: var(--text-muted); } /* FORMS & INPUTS (Left Panel) */ .form-group { margin-bottom: 1.25rem; } .form-label { font-size: 0.7rem; font-weight: 700; color: var(--text-muted); display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 0.05em; } .form-input, .phase-select { width: 100%; padding: 0.65rem 0.85rem; border: 1px solid var(--border); border-radius: 8px; font-size: 0.9rem; background: #fff; outline: none; transition: all 0.2s; } .form-input:focus, .phase-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } /* ACTIONS */ .card-actions { display: flex; gap: 0.5rem; position: absolute; top: 0.75rem; right: 1rem; z-index: 10; } .action-btn { background: white; border: 1px solid var(--border); border-radius: 6px; padding: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .action-btn:hover { background: #f8fafc; transform: scale(1.1); } .btn-ia { color: var(--ia-color); } .btn-ws { color: var(--whatsapp); } /* LOGS */ #logPanel { position: fixed; bottom: 0; left: 0; right: 0; background: #0f172a; border-top: 1px solid #334155; z-index: 2000; transition: transform 0.3s ease; } .log-header { padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; color: #94a3b8; font-size: 12px; font-weight: 700; background: #1e293b; } #debugContent { height: 150px; overflow-y: auto; padding: 15px 20px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #38bdf8; } .collapsed-logs #debugContent { display: none; } /* STATUS BAR */ .status-bar { padding: 0.75rem; text-align: center; font-size: 0.9rem; font-weight: 600; position: fixed; top: 0; left: 0; right: 0; z-index: 2500; transform: translateY(-100%); transition: transform 0.3s ease; } .status-bar.active { transform: translateY(0); } .status-success { background: #10b981; color: white; } .status-error { background: #ef4444; color: white; } /* UTILS */ .loader { width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: #fff; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .hidden { display: none !important; } /* RESPONSIVE */ @media (max-width: 1024px) { .contact-panel { width: 260px; } } @media (max-width: 768px) { body { font-size: 12px; } header.crm-header { height: auto; padding: 0.5rem; flex-direction: row; flex-wrap: wrap; gap: 0.5rem; } .header-left { width: 100%; justify-content: space-between; margin-bottom: 2px; } .header-controls { width: 100%; gap: 0.25rem; display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; } .header-select, .search-form { width: 100%; min-width: 0; height: 30px; font-size: 0.75rem; } .search-form { grid-column: 1 / span 3; } .main-container { flex-direction: column; } /* En móvil, el sidebar es una pestaña más */ .contact-panel { display: none; /* Oculto por defecto en móvil */ width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-right: none; z-index: 50; /* Por debajo de la barra de navegación de pestañas */ } .contact-panel.active { display: flex; } .tab-mobile-only { display: flex; } .content-area { height: 100%; width: 100%; } .section-nav-bar { padding: 4px; background: #f8fafc; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } .nav-tab { padding: 6px 4px; font-size: 0.7rem; } #logPanel { left: 0; font-size: 9px; } #debugContent { height: 80px; } } 

 :root { --primary: #2563eb; --primary-hover: #1d4ed8; --bg-main: #f1f5f9; --bg-panel: #ffffff; --text-main: #1e293b; --text-muted: #64748b; --border: #e2e8f0; --shadow: 0 1px 3px rgba(0, 0, 0, 0.1); --whatsapp: #25d366; --ia-color: #8b5cf6; --section-bg: #ffffff; } * { box-sizing: border-box; outline: none; } /* Minimalist Scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #f1f5f9; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } body { margin: 0; background: var(--bg-main); font-family: 'Inter', system-ui, sans-serif; height: 100vh; display: flex; flex-direction: column; overflow: hidden; color: var(--text-main); font-size: 13px; /* Más compacto */ } header.crm-header { background: white; padding: 0 1rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; z-index: 1000; height: 48px; /* Reducido de 64px */ flex-shrink: 0; } .brand-box { display: flex; align-items: baseline; gap: 0.3rem; } .brand { font-weight: 800; font-size: 1.1rem; color: var(--primary); letter-spacing: -0.025em; } .version-tag { font-size: 0.6rem; color: var(--text-muted); font-weight: 700; background: #f1f5f9; padding: 1px 5px; border-radius: 3px; } .search-form { display: flex; min-width: 200px; height: 32px; } .search-form input { flex: 1; padding: 0 0.75rem; border: 1px solid var(--border); border-right: none; border-radius: 6px 0 0 6px; font-size: 0.85rem; } .search-form button { padding: 0 0.75rem; border: none; background: var(--primary); color: white; cursor: pointer; border-radius: 0 6px 6px 0; } .header-select { height: 32px; padding: 0 0.5rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.8rem; background: white; width: 130px; } .main-container { display: flex; flex: 1; overflow: hidden; position: relative; } /* PANEL IZQUIERDO (SIDEBAR) */ .contact-panel { width: 260px; background: white; border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; min-height: 0; z-index: 10; } .panel-scroll { flex: 1; overflow-y: auto; padding: 1rem 0.75rem; } /* CONTENIDO CENTRAL */ .content-area { flex: 1; background: #f8fafc; display: flex; flex-direction: column; overflow: hidden; position: relative; } /* BARRA DE NAVEGACIÓN SUPERIOR PERSISTENTE */ .section-nav-bar { background: white; border-bottom: 1px solid var(--border); display: flex; padding: 4px; gap: 4px; z-index: 100; flex-shrink: 0; } .nav-tab { flex: 1; padding: 8px 10px; font-size: 0.75rem; font-weight: 700; color: var(--text-muted); text-align: center; cursor: pointer; border-radius: 4px; transition: all 0.2s; border: 1px solid transparent; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; justify-content: center; gap: 6px; } /* Ocultar tab de contacto en desktop ya que está el sidebar */ .tab-mobile-only { display: none; } .nav-tab:hover { background: #f1f5f9; color: var(--text-main); } .nav-tab.active { background: #eff6ff; color: var(--primary); border-color: #dbeafe; } #contentScroll { flex: 1; padding: 0; display: flex; flex-direction: column; position: relative; background: white; overflow: hidden; } /* SECCIONES COMO PESTAÑAS FULL-HEIGHT */ .main-section { display: none; flex-direction: column; height: 100%; width: 100%; border: none; background: white; border-radius: 0; margin-bottom: 0px; } .main-section.active { display: flex; } .section-header { padding: 0.6rem 1rem; background: #f8fafc; display: flex; justify-content: space-between; align-items: center; min-height: 40px; border-bottom: 1px solid var(--border); cursor: default; } .section-header h2 { margin: 0; font-size: 0.9rem; font-weight: 700; display: flex; align-items: center; gap: 0.6rem; color: var(--primary); } .toggle-icon { display: none !important; } .section-body { flex: 1; padding: 0.5rem; /* Reducido de 1rem */ overflow-y: auto; background: #ffffff; height: 100%; } /* MAPA COMPACTO */ #mapView { width: 100%; height: 100%; /* Ocupa todo el alto disponible en su body */ min-height: 500px; border-radius: 4px; border: 1px solid var(--border); } /* CARDS COMPACTAS */ /* SUB-NAVEGACION INTERNA CONTACTO */ .sub-nav-bar { display: flex; gap: 2px; padding: 4px; background: #f1f5f9; border-bottom: 1px solid var(--border); } .sub-tab { flex: 1; padding: 6px; font-size: 0.65rem; font-weight: 700; text-align: center; cursor: pointer; border-radius: 4px; color: var(--text-muted); text-transform: uppercase; border: 1px solid transparent; } .sub-tab.active { background: white; color: var(--primary); border-color: var(--border); box-shadow: var(--shadow); } .report-grid { height: 100%; display: flex; flex-direction: column; } .report-card { display: none; flex: 1; flex-direction: column; border: none; border-radius: 0; } .report-card.active { display: flex; } .card-header { display: none; /* Oculto ya que tenemos el sub-nav */ } .card-body { flex: 1; padding: 0; display: flex; flex-direction: column; } .editable-area { flex: 1; width: 100%; height: 100% !important; padding: 1rem; font-size: 0.95rem; border: none; border-radius: 0; resize: none; line-height: 1.6; } /* IFRAME COMPACTO */ #iframeWrapper { width: 100%; height: 100%; border-radius: 4px; border: 1px solid var(--border); } /* FICHAS COMPACTAS */ .inmuebles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.75rem; } .inmueble-card { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: white; cursor: pointer; font-size: 0.8rem; } .inmueble-img { height: 140px; } .inmueble-content { padding: 0.75rem; } /* PANEL DE LOGS FLOTANTE O MINI */ #logPanel { position: fixed; bottom: 0; right: 0; left: 260px; background: #0f172a; border-top: 1px solid #334155; z-index: 2000; } .log-header { padding: 6px 15px; font-size: 10px; background: #1e293b; color: #94a3b8; display: flex; justify-content: space-between; cursor: pointer; } #debugContent { height: 100px; padding: 10px; font-family: 'JetBrains Mono', monospace; font-size: 10px; overflow-y: auto; color: #38bdf8; } .collapsed-logs #debugContent { display: none; } /* BOTONES ACCION ETIQUETAS */ .label-action-btn { background: none; border: none; padding: 2px; cursor: pointer; color: var(--text-muted); } .label-action-btn:hover { color: var(--primary); } /* UTILS */ .hidden { display: none !important; } .status-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 3000; padding: 8px; text-align: center; color: white; transform: translateY(-100%); transition: 0.3s; font-weight: 700; } .status-bar.active { transform: translateY(0); } .status-success { background: #10b981; } .status-error { background: #ef4444; } @keyframes spin { to { transform: rotate(360deg); } } .loader { width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; } /* MAP SECTION (NEW) */ #mapView { width: 100%; height: 500px; border-radius: 8px; border: 1px solid var(--border); background: #f1f5f9; z-index: 10; } /* INTERNAL CARDS (Contacto Section) */ .report-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } .report-card { background: #fdfdfd; border-radius: 8px; border: 1px solid var(--border); overflow: hidden; } .card-header { padding: 0.75rem 1rem; background: #f8fafc; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .card-title { font-size: 0.75rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .card-body { padding: 1rem; position: relative; } .report-card.collapsed .card-body { display: none; } .editable-area { width: 100%; min-height: 80px; border: 1px solid transparent; padding: 0.5rem; font-size: 0.95rem; background: transparent; resize: vertical; outline: none; line-height: 1.6; color: var(--text-main); } .is-editable .editable-area { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 0.75rem; } .is-editable .editable-area:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } /* PARCELA (Iframe) */ #iframeWrapper { width: 100%; height: 1200px; border: 1px solid var(--border); border-radius: 8px; overflow: auto; } /* FICHAS (Vertical Grid) */ .inmuebles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; } .inmueble-card { background: white; border-radius: 12px; border: 1px solid var(--border); overflow: hidden; transition: all 0.3s ease; display: flex; flex-direction: column; cursor: pointer; position: relative; } .inmueble-card:hover { transform: translateY(-4px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); border-color: var(--primary); } .inmueble-img { height: 180px; position: relative; overflow: hidden; } .inmueble-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .inmueble-card:hover .inmueble-img img { transform: scale(1.05); } .inmueble-content { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; } .inmueble-price { font-size: 1.25rem; font-weight: 800; color: var(--text-main); } .inmueble-ref { font-size: 0.75rem; color: var(--primary); font-weight: 700; background: #eff6ff; padding: 2px 8px; border-radius: 4px; } .inmueble-title { font-size: 0.9rem; font-weight: 600; color: var(--text-main); line-height: 1.4; min-height: 2.8em; } .inmueble-features { border-top: 1px solid #f1f5f9; padding-top: 0.75rem; margin-top: 0.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; font-size: 0.75rem; color: var(--text-muted); } /* FORMS & INPUTS (Left Panel) */ .form-group { margin-bottom: 1.25rem; } .form-label { font-size: 0.7rem; font-weight: 700; color: var(--text-muted); display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 0.05em; } .form-input, .phase-select { width: 100%; padding: 0.65rem 0.85rem; border: 1px solid var(--border); border-radius: 8px; font-size: 0.9rem; background: #fff; outline: none; transition: all 0.2s; } .form-input:focus, .phase-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } /* ACTIONS */ .card-actions { display: flex; gap: 0.5rem; position: absolute; top: 0.75rem; right: 1rem; z-index: 10; } .action-btn { background: white; border: 1px solid var(--border); border-radius: 6px; padding: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .action-btn:hover { background: #f8fafc; transform: scale(1.1); } .btn-ia { color: var(--ia-color); } .btn-ws { color: var(--whatsapp); } /* LOGS */ #logPanel { position: fixed; bottom: 0; left: 0; right: 0; background: #0f172a; border-top: 1px solid #334155; z-index: 2000; transition: transform 0.3s ease; } .log-header { padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; color: #94a3b8; font-size: 12px; font-weight: 700; background: #1e293b; } #debugContent { height: 150px; overflow-y: auto; padding: 15px 20px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #38bdf8; } .collapsed-logs #debugContent { display: none; } /* STATUS BAR */ .status-bar { padding: 0.75rem; text-align: center; font-size: 0.9rem; font-weight: 600; position: fixed; top: 0; left: 0; right: 0; z-index: 2500; transform: translateY(-100%); transition: transform 0.3s ease; } .status-bar.active { transform: translateY(0); } .status-success { background: #10b981; color: white; } .status-error { background: #ef4444; color: white; } /* UTILS */ .loader { width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: #fff; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .hidden { display: none !important; } /* HISTORY DROPDOWN */ .history-dropdown { position: absolute; background: white; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); width: 240px; z-index: 100; margin-top: 4px; overflow: hidden; } .history-header { background: #f8fafc; padding: 8px 12px; font-size: 0.65rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; border-bottom: 1px solid var(--border); } .history-list { max-height: 250px; overflow-y: auto; } .history-item { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid #f1f5f9; transition: background 0.2s; font-size: 0.8rem; display: flex; flex-direction: column; gap: 2px; } .history-item:hover { background: #eff6ff; } .history-item .h-name { font-weight: 600; color: var(--text-main); } .history-item .h-meta { font-size: 0.7rem; color: var(--text-muted); display: flex; justify-content: space-between; } /* RESPONSIVE */ @media (max-width: 1024px) { .contact-panel { width: 260px; } } @media (max-width: 768px) { body { font-size: 12px; } header.crm-header { height: auto; padding: 0.5rem; flex-direction: row; flex-wrap: wrap; gap: 0.5rem; } .header-left { width: 100%; justify-content: space-between; margin-bottom: 2px; } .header-controls { width: 100%; gap: 0.25rem; display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; } .header-select, .search-form { width: 100%; min-width: 0; height: 30px; font-size: 0.75rem; } .search-form { grid-column: 1 / span 3; } .main-container { flex-direction: column; } /* En móvil, el sidebar es una pestaña más */ .contact-panel { display: none; /* Oculto por defecto en móvil */ width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-right: none; z-index: 50; /* Por debajo de la barra de navegación de pestañas */ } .contact-panel.active { display: flex; } .tab-mobile-only { display: flex; } .content-area { height: 100%; width: 100%; } .section-nav-bar { padding: 4px; background: #f8fafc; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } .nav-tab { padding: 6px 4px; font-size: 0.7rem; } #logPanel { left: 0; font-size: 9px; } #debugContent { height: 80px; } } 

 :root { --primary: #2563eb; --primary-hover: #1d4ed8; --bg-main: #f1f5f9; --bg-panel: #ffffff; --text-main: #1e293b; --text-muted: #64748b; --border: #e2e8f0; --shadow: 0 1px 3px rgba(0, 0, 0, 0.1); --whatsapp: #25d366; --ia-color: #8b5cf6; --section-bg: #ffffff; } * { box-sizing: border-box; outline: none; } /* Minimalist Scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #f1f5f9; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } body { margin: 0; background: var(--bg-main); font-family: 'Inter', system-ui, sans-serif; height: 100vh; display: flex; flex-direction: column; overflow: hidden; color: var(--text-main); font-size: 13px; /* Más compacto */ } header.crm-header { background: white; padding: 0 1rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; z-index: 1000; height: 48px; /* Reducido de 64px */ flex-shrink: 0; } .brand-box { display: flex; align-items: baseline; gap: 0.3rem; } .brand { font-weight: 800; font-size: 1.1rem; color: var(--primary); letter-spacing: -0.025em; } .version-tag { font-size: 0.6rem; color: var(--text-muted); font-weight: 700; background: #f1f5f9; padding: 1px 5px; border-radius: 3px; } .search-form { display: flex; min-width: 200px; height: 32px; } .search-form input { flex: 1; padding: 0 0.75rem; border: 1px solid var(--border); border-right: none; border-radius: 6px 0 0 6px; font-size: 0.85rem; } .search-form button { padding: 0 0.75rem; border: none; background: var(--primary); color: white; cursor: pointer; border-radius: 0 6px 6px 0; } .header-select { height: 32px; padding: 0 0.5rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.8rem; background: white; width: 130px; } .main-container { display: flex; flex: 1; overflow: hidden; position: relative; } /* PANEL IZQUIERDO (SIDEBAR) */ .contact-panel { width: 260px; background: white; border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; min-height: 0; z-index: 10; } .panel-scroll { flex: 1; overflow-y: auto; padding: 1rem 0.75rem; } /* CONTENIDO CENTRAL */ .content-area { flex: 1; background: #f8fafc; display: flex; flex-direction: column; overflow: hidden; position: relative; } /* BARRA DE NAVEGACIÓN SUPERIOR PERSISTENTE */ .section-nav-bar { background: white; border-bottom: 1px solid var(--border); display: flex; padding: 4px; gap: 4px; z-index: 100; flex-shrink: 0; } .nav-tab { flex: 1; padding: 8px 10px; font-size: 0.75rem; font-weight: 700; color: var(--text-muted); text-align: center; cursor: pointer; border-radius: 4px; transition: all 0.2s; border: 1px solid transparent; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; justify-content: center; gap: 6px; } /* Ocultar tab de contacto en desktop ya que está el sidebar */ .tab-mobile-only { display: none; } .nav-tab:hover { background: #f1f5f9; color: var(--text-main); } .nav-tab.active { background: #eff6ff; color: var(--primary); border-color: #dbeafe; } #contentScroll { flex: 1; padding: 0; display: flex; flex-direction: column; position: relative; background: white; overflow: hidden; } /* SECCIONES COMO PESTAÑAS FULL-HEIGHT */ .main-section { display: none; flex-direction: column; height: 100%; width: 100%; border: none; background: white; border-radius: 0; margin-bottom: 0px; } .main-section.active { display: flex; } .section-header { padding: 0.6rem 1rem; background: #f8fafc; display: flex; justify-content: space-between; align-items: center; min-height: 40px; border-bottom: 1px solid var(--border); cursor: default; } .section-header h2 { margin: 0; font-size: 0.9rem; font-weight: 700; display: flex; align-items: center; gap: 0.6rem; color: var(--primary); } .toggle-icon { display: none !important; } .section-body { flex: 1; padding: 0.5rem; /* Reducido de 1rem */ overflow-y: auto; background: #ffffff; height: 100%; } /* MAPA COMPACTO */ #mapView { width: 100%; height: 100%; /* Ocupa todo el alto disponible en su body */ min-height: 500px; border-radius: 4px; border: 1px solid var(--border); } /* CARDS COMPACTAS */ /* SUB-NAVEGACION INTERNA CONTACTO */ .sub-nav-bar { display: flex; gap: 2px; padding: 4px; background: #f1f5f9; border-bottom: 1px solid var(--border); } .sub-tab { flex: 1; padding: 6px; font-size: 0.65rem; font-weight: 700; text-align: center; cursor: pointer; border-radius: 4px; color: var(--text-muted); text-transform: uppercase; border: 1px solid transparent; } .sub-tab.active { background: white; color: var(--primary); border-color: var(--border); box-shadow: var(--shadow); } .report-grid { height: 100%; display: flex; flex-direction: column; } .report-card { display: none; flex: 1; flex-direction: column; border: none; border-radius: 0; } .report-card.active { display: flex; } .card-header { display: none; /* Oculto ya que tenemos el sub-nav */ } .card-body { flex: 1; padding: 0; display: flex; flex-direction: column; } .editable-area { flex: 1; width: 100%; height: 100% !important; padding: 1rem; font-size: 0.95rem; border: none; border-radius: 0; resize: none; line-height: 1.6; } /* IFRAME COMPACTO */ #iframeWrapper { width: 100%; height: 100%; border-radius: 4px; border: 1px solid var(--border); } /* FICHAS COMPACTAS */ .inmuebles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.75rem; } .inmueble-card { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: white; cursor: pointer; font-size: 0.8rem; } .inmueble-img { height: 140px; } .inmueble-content { padding: 0.75rem; } /* PANEL DE LOGS FLOTANTE O MINI */ #logPanel { position: fixed; bottom: 0; right: 0; left: 260px; background: #0f172a; border-top: 1px solid #334155; z-index: 2000; } .log-header { padding: 6px 15px; font-size: 10px; background: #1e293b; color: #94a3b8; display: flex; justify-content: space-between; cursor: pointer; } #debugContent { height: 100px; padding: 10px; font-family: 'JetBrains Mono', monospace; font-size: 10px; overflow-y: auto; color: #38bdf8; } .collapsed-logs #debugContent { display: none; } /* BOTONES ACCION ETIQUETAS */ .label-action-btn { background: none; border: none; padding: 2px; cursor: pointer; color: var(--text-muted); } .label-action-btn:hover { color: var(--primary); } /* UTILS */ .hidden { display: none !important; } .status-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 3000; padding: 8px; text-align: center; color: white; transform: translateY(-100%); transition: 0.3s; font-weight: 700; } .status-bar.active { transform: translateY(0); } .status-success { background: #10b981; } .status-error { background: #ef4444; } @keyframes spin { to { transform: rotate(360deg); } } .loader { width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; } /* MAP SECTION (NEW) */ #mapView { width: 100%; height: 500px; border-radius: 8px; border: 1px solid var(--border); background: #f1f5f9; z-index: 10; } /* INTERNAL CARDS (Contacto Section) */ .report-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } .report-card { background: #fdfdfd; border-radius: 8px; border: 1px solid var(--border); overflow: hidden; } .card-header { padding: 0.75rem 1rem; background: #f8fafc; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .card-title { font-size: 0.75rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .card-body { padding: 1rem; position: relative; } .report-card.collapsed .card-body { display: none; } .editable-area { width: 100%; min-height: 80px; border: 1px solid transparent; padding: 0.5rem; font-size: 0.95rem; background: transparent; resize: vertical; outline: none; line-height: 1.6; color: var(--text-main); } .is-editable .editable-area { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 0.75rem; } .is-editable .editable-area:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } /* PARCELA (Iframe) */ #iframeWrapper { width: 100%; height: 1200px; border: 1px solid var(--border); border-radius: 8px; overflow: auto; } /* FICHAS (Vertical Grid) */ .inmuebles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; } .inmueble-card { background: white; border-radius: 12px; border: 1px solid var(--border); overflow: hidden; transition: all 0.3s ease; display: flex; flex-direction: column; cursor: pointer; position: relative; } .inmueble-card:hover { transform: translateY(-4px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); border-color: var(--primary); } .inmueble-img { height: 180px; position: relative; overflow: hidden; } .inmueble-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .inmueble-card:hover .inmueble-img img { transform: scale(1.05); } .inmueble-content { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; } .inmueble-price { font-size: 1.25rem; font-weight: 800; color: var(--text-main); } .inmueble-ref { font-size: 0.75rem; color: var(--primary); font-weight: 700; background: #eff6ff; padding: 2px 8px; border-radius: 4px; } .inmueble-title { font-size: 0.9rem; font-weight: 600; color: var(--text-main); line-height: 1.4; min-height: 2.8em; } .inmueble-features { border-top: 1px solid #f1f5f9; padding-top: 0.75rem; margin-top: 0.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; font-size: 0.75rem; color: var(--text-muted); } /* FORMS & INPUTS (Left Panel) */ .form-group { margin-bottom: 1.25rem; } .form-label { font-size: 0.7rem; font-weight: 700; color: var(--text-muted); display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 0.05em; } .form-input, .phase-select { width: 100%; padding: 0.65rem 0.85rem; border: 1px solid var(--border); border-radius: 8px; font-size: 0.9rem; background: #fff; outline: none; transition: all 0.2s; } .form-input:focus, .phase-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } /* ACTIONS */ .card-actions { display: flex; gap: 0.5rem; position: absolute; top: 0.75rem; right: 1rem; z-index: 10; } .action-btn { background: white; border: 1px solid var(--border); border-radius: 6px; padding: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .action-btn:hover { background: #f8fafc; transform: scale(1.1); } .btn-ia { color: var(--ia-color); } .btn-ws { color: var(--whatsapp); } /* LOGS */ #logPanel { position: fixed; bottom: 0; left: 0; right: 0; background: #0f172a; border-top: 1px solid #334155; z-index: 2000; transition: transform 0.3s ease; } .log-header { padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; color: #94a3b8; font-size: 12px; font-weight: 700; background: #1e293b; } #debugContent { height: 150px; overflow-y: auto; padding: 15px 20px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #38bdf8; } .collapsed-logs #debugContent { display: none; } /* STATUS BAR */ .status-bar { padding: 0.75rem; text-align: center; font-size: 0.9rem; font-weight: 600; position: fixed; top: 0; left: 0; right: 0; z-index: 2500; transform: translateY(-100%); transition: transform 0.3s ease; } .status-bar.active { transform: translateY(0); } .status-success { background: #10b981; color: white; } .status-error { background: #ef4444; color: white; } /* UTILS */ .loader { width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: #fff; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .hidden { display: none !important; } /* HISTORY DROPDOWN */ .history-dropdown { position: absolute; background: white; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); width: 240px; z-index: 100; margin-top: 4px; overflow: hidden; } .history-header { background: #f8fafc; padding: 8px 12px; font-size: 0.65rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; border-bottom: 1px solid var(--border); } .history-list { max-height: 250px; overflow-y: auto; } .history-item { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid #f1f5f9; transition: background 0.2s; font-size: 0.8rem; display: flex; flex-direction: column; gap: 2px; } .history-item:hover { background: #eff6ff; } .history-item .h-name { font-weight: 600; color: var(--text-main); } .history-item .h-meta { font-size: 0.7rem; color: var(--text-muted); display: flex; justify-content: space-between; } /* RESPONSIVE */ @media (max-width: 1024px) { .contact-panel { width: 260px; } } @media (max-width: 768px) { body { font-size: 12px; } header.crm-header { height: auto; padding: 0.5rem; flex-direction: row; flex-wrap: wrap; gap: 0.5rem; } .header-left { width: 100%; justify-content: space-between; margin-bottom: 2px; } .header-controls { width: 100%; gap: 0.25rem; display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; } .header-select, .search-form { width: 100%; min-width: 0; height: 30px; font-size: 0.75rem; } .search-form { grid-column: 1 / span 3; } .main-container { flex-direction: column; } /* En móvil, el sidebar es una pestaña más */ .contact-panel { display: none; /* Oculto por defecto en móvil */ width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-right: none; z-index: 50; /* Por debajo de la barra de navegación de pestañas */ } .contact-panel.active { display: flex; } .tab-mobile-only { display: flex; } .content-area { height: 100%; width: 100%; } .section-nav-bar { padding: 4px; background: #f8fafc; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } .nav-tab { padding: 6px 4px; font-size: 0.7rem; } #logPanel { left: 0; font-size: 9px; } #debugContent { height: 80px; } }