/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */


.options_table{
	widows: 100%;	
	text-align: right;
}
.options_table .badge{
	margin-left: 5px;
}

.header-accordion{
	margin-bottom: 4px!important;
    border: 1px solid #ccc!important;
}

.float_button{
	display: block;
    position: absolute;
    right: 0px;
    top: 0px;
    background-color: #FFF;
    height: 30px;
    width: 35px;
    border-radius: 0px 0px 0px 30px;
    font-size: medium;
    font-weight: bold;
    padding: 5px 5px 5px 10px;
}

#listaFichas{
	overflow-y: scroll;
    max-height: 350px;
}

.section_form {
    display: block;
    border: 1px solid #ccc;
    padding: 0px 10px 10px 10px;
    border-radius: 10px;
    margin-bottom: 15px;
}

.title_secction {
    display: inline;
    position: relative;
    top: -10px;
    left: 10px;
    background: #000;
    color: #fff;
    padding: 3px 15px;
    border-radius: 10px;
}

.btnWts{
    font-size: 22px;
    background: #29c770;
    color: #FFF;
    width: 30px;
    height: 30px;
    border-radius: 5px;
    text-align: center;
    vertical-align: middle;
    padding: 3px 6px;
}
.btnWts:hover{
    background: #FFF!important;
    color: #29c770!important;
}

.badge-gold {
    background-color: #FFD700 !important;
    color: #000 !important;
    border: 1px solid #DAA520 !important;
}

.badge-gold:hover {
    background-color: #DAA520 !important;
    color: #000 !important;
}

.charTuulappBox{
    background-color: #121c2c!important;
    color: #FFF!important;
}

.charTuulappBox h4{
    color: #FFF!important;
}


.custom-tooltip {
    background: #fff; 
    color: #333; 
    border-radius: 4px; 
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); 
    padding: 10px; 
    font-family: Arial, sans-serif; 
    font-size: 12px; 
    line-height: 1.5; 
  }
  
  .custom-tooltip .tooltip-title {
    padding: 5px;
    font-weight: bold;
    color: #000;
    border-bottom: 1px solid #ddd;
  }
  
  .custom-tooltip .tooltip-description {
    display: flex;
    align-items: center; /* Centra verticalmente el punto y el texto */
    margin-top: 5px; 
  }
  
  .custom-tooltip .value-dot {
    width: 10px; /* Ancho del punto */
    height: 10px; /* Alto del punto */
    border-radius: 50%; /* Hace que el punto sea redondo */
    margin-right: 5px; /* Espacio entre el punto y el texto */
  }
  
  .custom-tooltip div {
    margin-bottom: 4px;
  }

/* ==========================================================================
   POLICY FORM STYLES
   ========================================================================== */

.policy-form-modal {
  max-width: 90vw;
}

.policy-form-content {
  border: none;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.policy-form-header {
  background: linear-gradient(135deg, #121c2c 0%, #121c2c 100%);
  color: white;
  padding: 1.5rem 2rem;
  border: none;
}

.policy-form-title {
  font-weight: 600;
  font-size: 1.25rem;
  margin: 0;
  display: flex;
  align-items: center;
  color: #FFFFFF;
}

.policy-form-close {
  color: white;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.policy-form-close:hover {
  opacity: 1;
  color: white;
}

.policy-form-body {
  padding: 2rem;
  max-height: 70vh;
  overflow-y: auto;
  background: #f8f9fa;
}

.policy-form-section {
  background: white;
  border-radius: 10px;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  border: 1px solid #e9ecef;
  overflow: hidden;
}

.section-header {
  background: #efefef;
  color: #000;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #dee2e6;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.section-title {
  margin: 0;
  font-weight: 600;
  color: #000;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.section-content {
  padding: 1.5rem;
}

.policy-form-group {
  margin-bottom: 1.5rem;
}

.policy-form-label {
  font-weight: 500;
  color: #495057;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.required-asterisk {
  color: #dc3545;
  font-weight: bold;
  margin-left: 0.25rem;
}

.policy-form-input,
.policy-form-control,
.policy-form-textarea {
  border: 2px solid #e9ecef;
  border-radius: 8px;
  padding: 0.70rem 1rem;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  background-color: #fff;
}

.policy-form-input:focus,
.policy-form-control:focus,
.policy-form-textarea:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
  outline: none;
}

.policy-form-textarea {
  resize: vertical;
  min-height: 120px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  line-height: 1.5;
}

.policy-platforms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem;
  margin-top: 0.5rem;
}

.platform-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.platform-checkbox {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #667eea;
}

.platform-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-weight: 500;
  color: #495057;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 6px;
  transition: all 0.3s ease;
  flex: 1;
}

.platform-label:hover {
  background-color: #f8f9fa;
}

.platform-checkbox:checked + .platform-label {
  background-color: rgba(102, 126, 234, 0.1);
  border: 1px solid rgba(102, 126, 234, 0.3);
}

.form-text {
  font-size: 0.8rem;
  margin-top: 0.25rem;
}

.policy-form-footer {
  background: #f8f9fa;
  border-top: 1px solid #dee2e6;
  padding: 1.5rem 2rem;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  width: 100%;
}

.btn-cancel {
  border: 2px solid #6c757d;
  color: #6c757d;
  padding: 0.5rem 1.5rem;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-cancel:hover {
  background-color: #6c757d;
  border-color: #6c757d;
  transform: translateY(-1px);
}

.btn-submit {
  background: linear-gradient(135deg, #121c2c 0%, #121c2c 100%);
  border: none;
  padding: 0.5rem 1.5rem;
  border-radius: 8px;
  font-weight: 500;
  color: white;
  transition: all 0.3s ease;
}

.btn-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .policy-form-modal {
    max-width: 95vw;
    margin: 1rem;
  }

  .policy-form-body {
    padding: 1rem;
  }

  .policy-platforms-grid {
    grid-template-columns: 1fr;
  }

  .section-content {
    padding: 1rem;
  }

  .policy-form-footer {
    padding: 1rem;
  }

  .form-actions {
    flex-direction: column;
  }

  .btn-cancel,
  .btn-submit {
    width: 100%;
  }
}

/* Loading states */
.policy-form-input:disabled,
.policy-form-control:disabled,
.policy-form-textarea:disabled {
  background-color: #e9ecef;
  opacity: 0.6;
}

/* Validation styles */
.policy-form-input:invalid:not(:placeholder-shown),
.policy-form-textarea:invalid:not(:placeholder-shown) {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.policy-form-input:valid:not(:placeholder-shown),
.policy-form-textarea:valid:not(:placeholder-shown) {
  border-color: #28a745;
}

/* Animation for sections */
.policy-form-section {
  animation: slideInUp 0.5s ease-out;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========================================
   TINY MCE POLICY EDITOR STYLES
   ======================================== */

.policy-editor-container {
  position: relative;
}

.policy-editor-content {
  width: 100%;
  min-height: 400px;
  resize: vertical;
}

/* TinyMCE Container Styles */
.tox-tinymce {
  border: 1px solid #ced4da !important;
  border-radius: 0.375rem !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
}

.tox-tinymce:focus-within {
  border-color: #80bdff !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
}

/* TinyMCE Toolbar Styles */
.tox .tox-toolbar {
  background: #f8f9fa !important;
  border-bottom: 1px solid #dee2e6 !important;
  border-radius: 0.375rem 0.375rem 0 0 !important;
}

.tox .tox-toolbar button {
  border-radius: 0.25rem !important;
  margin: 2px !important;
}

.tox .tox-toolbar button:hover {
  background: #e9ecef !important;
}

.tox .tox-toolbar button:focus {
  background: #007bff !important;
  color: white !important;
}

/* TinyMCE Editor Content Area */
.tox .tox-edit-area {
  border-radius: 0 0 0.375rem 0.375rem !important;
}

.tox .tox-edit-area__iframe {
  border-radius: 0 0 0.375rem 0.375rem !important;
}

/* Status Bar */
.tox .tox-statusbar {
  background: #f8f9fa !important;
  border-top: 1px solid #dee2e6 !important;
  border-radius: 0 0 0.375rem 0.375rem !important;
}

/* Dropdown Menus */
.tox .tox-menu {
  background: white !important;
  border: 1px solid #ced4da !important;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* Color Picker */
.tox .tox-swatches {
  border: 1px solid #ced4da !important;
}

/* Table Styles */
.tox .tox-dialog {
  border-radius: 0.375rem !important;
}

.tox .tox-dialog__header {
  background: #f8f9fa !important;
  border-bottom: 1px solid #dee2e6 !important;
}

/* Remove TinyMCE branding */
.tox .tox-statusbar__branding {
  display: none !important;
}

/* Fix for TinyMCE select dropdowns - prevent text truncation */
.tox .tox-toolbar select,
.tox .tox-toolbar .tox-selectfield select {
  min-width: 120px !important;
  padding-right: 25px !important;
  background-position: right 5px center !important;
}

.tox .tox-toolbar .tox-selectfield__select-chevron {
  right: 5px !important;
}

/* Ensure select options are fully visible */
.tox .tox-menu {
  min-width: 150px !important;
}

.tox .tox-menu .tox-collection__item {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* ========================================
   FORM VALIDATION STYLES
   ======================================== */

/* Invalid field styling */
.is-invalid {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

/* Valid field styling */
.is-valid {
  border-color: #28a745 !important;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
}

/* Platform items validation */
.platform-item {
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.platform-item.border-warning {
  border-color: #ffc107 !important;
  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25) !important;
}

.platform-item.border-danger {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

/* Loading overlay animation */
@keyframes pulse-overlay {
  0% { opacity: 0.8; }
  50% { opacity: 0.9; }
  100% { opacity: 0.8; }
}

#form-loading-overlay {
  animation: pulse-overlay 2s ease-in-out infinite;
  backdrop-filter: blur(2px);
}


/* Enhanced button states */
.btn-submit:disabled,
.btn-submit.loading {
  opacity: 0.6;
  cursor: not-allowed;
  position: relative;
}

.btn-submit:disabled::after,
.btn-submit.loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  margin: auto;
  border: 2px solid transparent;
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

@keyframes spin {
  0% { transform: translateY(-50%) rotate(0deg); }
  100% { transform: translateY(-50%) rotate(360deg); }
}

/* Focus improvements for accessibility */
.form-control:focus,
.policy-editor-content:focus {
  border-color: #80bdff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  outline: 0;
}

/* Enhanced validation feedback */
.invalid-feedback {
  display: block;
  color: #dc3545;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

.valid-feedback {
  display: block;
  color: #28a745;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

/* ========================================
   POLICY DETAIL MODAL STYLES
   ======================================== */

.policy-detail-value {
  font-size: 0.95rem;
  font-weight: 500;
  color: #495057;
  margin-bottom: 0;
  padding: 0.5rem 0;
  background-color: #f8f9fa;
  border-radius: 4px;
  padding-left: 1rem;
  border-left: 3px solid #007cba;
  min-height: 2.5rem;
  display: flex;
  align-items: center;
}

.policy-detail-value:empty::before {
  content: "No especificado";
  color: #6c757d;
  font-style: italic;
}

.policy-content-display {
  max-height: 400px;
  overflow-y: auto;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 1.5rem;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #495057;
  white-space: pre-wrap;
  word-break: break-word;
}

.policy-content-display:empty::before {
  content: "Contenido no disponible";
  color: #6c757d;
  font-style: italic;
}

.policy-content-display h1,
.policy-content-display h2,
.policy-content-display h3,
.policy-content-display h4,
.policy-content-display h5,
.policy-content-display h6 {
  color: #2c3e50;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.policy-content-display h1 { font-size: 1.75rem; }
.policy-content-display h2 { font-size: 1.5rem; }
.policy-content-display h3 { font-size: 1.25rem; }

.policy-content-display blockquote {
  border-left: 4px solid #007cba;
  padding-left: 1rem;
  margin: 1rem 0;
  font-style: italic;
  color: #555;
}

.policy-content-display ul,
.policy-content-display ol {
  padding-left: 2rem;
  margin: 1rem 0;
}

.policy-content-display li {
  margin-bottom: 0.5rem;
}

.policy-content-display a {
  color: #007cba;
  text-decoration: underline;
}

.policy-content-display a:hover {
  color: #0056b3;
}

.policy-content-display strong,
.policy-content-display b {
  font-weight: 600;
}

.policy-content-display em,
.policy-content-display i {
  font-style: italic;
}

.policy-hash-display {
  background-color: #f8f9fa;
  padding: 0.75rem;
  border-radius: 4px;
  border: 1px solid #dee2e6;
  font-family: 'Courier New', monospace;
  display: block;
  word-break: break-all;
  color: #495057;
}

/* Enhanced modal footer for detail view */
.policy-form-footer .form-actions {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.policy-form-footer .btn-cancel {
  background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
  border-color: #6c757d;
  color: white;
}

.policy-form-footer .btn-cancel:hover {
  background: linear-gradient(135deg, #5a6268 0%, #343a40 100%);
  border-color: #5a6268;
}

/* Ensure modal close buttons work properly */
.modal .close,
.modal .btn[data-bs-dismiss="modal"] {
  cursor: pointer !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  z-index: 10 !important;
}

.modal .close:hover,
.modal .btn[data-bs-dismiss="modal"]:hover {
  opacity: 0.7 !important;
}

.modal .policy-form-close {
  color: #ffffff !important;
  opacity: 0.8 !important;
  font-size: 1.5rem !important;
}

.modal .policy-form-close:hover {
  opacity: 1 !important;
  color: #ffffff !important;
}

/* Ensure loading overlay doesn't block close buttons */
#form-loading-overlay {
  z-index: 1030 !important; /* Below modal header z-index */
}

/* Modal header should be above loading overlay */
.modal-header {
  z-index: 1040 !important;
  position: relative !important;
}

/* Ensure cancel buttons work during loading */
.btn-cancel,
.btn[data-bs-dismiss="modal"] {
  z-index: 1041 !important;
  position: relative !important;
}

/* ========================================
   TABLE ACTION BUTTONS STYLES
   ======================================== */

.table .btn {
  border-radius: 6px !important;
  font-size: 0.75rem !important;
  padding: 0.25rem 0.5rem !important;
  margin: 0.125rem !important;
  border: 1px solid transparent !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.table .btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.table .btn:active {
  transform: translateY(0) !important;
}

/* Specific button styles */
.table .btn-outline-info {
  border-color: #17a2b8 !important;
  color: #17a2b8 !important;
  background-color: transparent !important;
}

.table .btn-outline-info:hover {
  background-color: #17a2b8 !important;
  color: white !important;
  border-color: #17a2b8 !important;
}

.table .btn-success {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
  border-color: #28a745 !important;
}

.table .btn-success:hover {
  background: linear-gradient(135deg, #218838 0%, #17a2b8 100%) !important;
  border-color: #1e7e34 !important;
}

.table .btn-danger {
  background: linear-gradient(135deg, #dc3545 0%, #fd7e14 100%) !important;
  border-color: #dc3545 !important;
}

.table .btn-danger:hover {
  background: linear-gradient(135deg, #c82333 0%, #e8590c 100%) !important;
  border-color: #bd2130 !important;
}

/* Button icons */
.table .btn i {
  font-size: 0.875rem !important;
  margin-right: 0.25rem !important;
}

/* Action buttons container */
.table td:last-child {
  white-space: nowrap;
}

/* Responsive button layout */
@media (max-width: 768px) {
  .table .btn {
    padding: 0.2rem 0.4rem !important;
    font-size: 0.7rem !important;
    margin: 0.1rem !important;
  }

  .table .btn i {
    font-size: 0.8rem !important;
    margin-right: 0.2rem !important;
  }
}


/* Loading state */
.policy-editor-loading {
  position: relative;
}

.policy-editor-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid #007bff;
  border-top: 2px solid transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ========================================
   CRM MODAL - STACKED MODALS (activar encima de gestion)
   ======================================== */

#modal-activar-crm {
  z-index: 1060;
}

#modal-activar-crm + .modal-backdrop,
.modal-backdrop ~ .modal-backdrop {
  z-index: 1055;
}

/* ========================================
   CRM MODAL - LAYOUT & SIZING
   ======================================== */

#modal-asignar-crm .modal-dialog {
  max-height: 90vh;
  margin-top: 5vh;
  margin-bottom: 5vh;
  display: flex;
  align-items: flex-start;
}

#modal-asignar-crm .modal-content {
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#modal-asignar-crm .modal-header {
  flex-shrink: 0;
}

#modal-asignar-crm .modal-body {
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}

#modal-asignar-crm .modal-footer {
  flex-shrink: 0;
}

/* ========================================
   CRM MODAL - DATATABLE PAGINATION STYLES
   ======================================== */

#modal-asignar-crm .dataTables_paginate {
  margin-top: 1rem;
  text-align: center !important;
}

/* Cada boton de paginacion */
#modal-asignar-crm .dataTables_paginate .paginate_button {
  display: inline-block;
  min-width: 36px;
  height: 36px;
  line-height: 34px;
  text-align: center;
  padding: 0 10px !important;
  margin: 2px 3px !important;
  border-radius: 6px !important;
  font-size: 0.85rem;
  font-weight: 500;
  color: #495057 !important;
  background-color: #f8f9fa !important;
  background: #f8f9fa !important;
  border: 1px solid #dee2e6 !important;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none !important;
  box-sizing: border-box;
}

#modal-asignar-crm .dataTables_paginate .paginate_button:hover {
  background-color: #e2e6ea !important;
  background: #e2e6ea !important;
  border-color: #c8ced3 !important;
  color: #212529 !important;
}

/* Pagina activa */
#modal-asignar-crm .dataTables_paginate .paginate_button.current,
#modal-asignar-crm .dataTables_paginate .paginate_button.current:hover {
  background-color: #7367f0 !important;
  background: #7367f0 !important;
  border-color: #7367f0 !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(115, 103, 240, 0.4);
  font-weight: 600;
}

/* Anterior / Siguiente */
#modal-asignar-crm .dataTables_paginate .paginate_button.previous,
#modal-asignar-crm .dataTables_paginate .paginate_button.next {
  min-width: auto;
  padding: 0 14px !important;
  font-weight: 600;
  color: #7367f0 !important;
  background-color: #fff !important;
  background: #fff !important;
  border: 1px solid #7367f0 !important;
}

#modal-asignar-crm .dataTables_paginate .paginate_button.previous:hover,
#modal-asignar-crm .dataTables_paginate .paginate_button.next:hover {
  background-color: #7367f0 !important;
  background: #7367f0 !important;
  color: #fff !important;
}

/* Deshabilitado */
#modal-asignar-crm .dataTables_paginate .paginate_button.disabled,
#modal-asignar-crm .dataTables_paginate .paginate_button.disabled:hover {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: #f8f9fa !important;
  background: #f8f9fa !important;
  border-color: #dee2e6 !important;
  color: #adb5bd !important;
  box-shadow: none;
}

/* Ellipsis (span con ...) */
#modal-asignar-crm .dataTables_paginate .ellipsis {
  display: inline-block;
  min-width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  padding: 0;
  margin: 2px 3px;
  color: #6c757d;
  font-weight: 600;
  letter-spacing: 2px;
}

/* Info y length menu */
#modal-asignar-crm .dataTables_info {
  font-size: 0.85rem;
  color: #6c757d;
  padding-top: 0.75rem;
}

#modal-asignar-crm .dataTables_length select {
  border-radius: 6px;
  padding: 4px 8px;
  border: 1px solid #dee2e6;
}

/* ========================================
   MSG MODAL - LAYOUT & SIZING
   ======================================== */

#modal-plantillas-msg .modal-dialog {
  max-height: 90vh;
  margin-top: 5vh;
  margin-bottom: 5vh;
  display: flex;
  align-items: flex-start;
}

#modal-plantillas-msg .modal-content {
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#modal-plantillas-msg .modal-header {
  flex-shrink: 0;
}

#modal-plantillas-msg .modal-body {
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}

#modal-plantillas-msg .modal-footer {
  flex-shrink: 0;
}

/* ========================================
   MSG MODAL - DATATABLE PAGINATION STYLES
   ======================================== */

#modal-plantillas-msg .dataTables_paginate {
  margin-top: 1rem;
  text-align: center !important;
}

#modal-plantillas-msg .dataTables_paginate .paginate_button {
  display: inline-block;
  min-width: 36px;
  height: 36px;
  line-height: 34px;
  text-align: center;
  padding: 0 10px !important;
  margin: 2px 3px !important;
  border-radius: 6px !important;
  font-size: 0.85rem;
  font-weight: 500;
  color: #495057 !important;
  background-color: #f8f9fa !important;
  background: #f8f9fa !important;
  border: 1px solid #dee2e6 !important;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none !important;
  box-sizing: border-box;
}

#modal-plantillas-msg .dataTables_paginate .paginate_button:hover {
  background-color: #e2e6ea !important;
  background: #e2e6ea !important;
  border-color: #c8ced3 !important;
  color: #212529 !important;
}

#modal-plantillas-msg .dataTables_paginate .paginate_button.current,
#modal-plantillas-msg .dataTables_paginate .paginate_button.current:hover {
  background-color: #00cfe8 !important;
  background: #00cfe8 !important;
  border-color: #00cfe8 !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(0, 207, 232, 0.4);
  font-weight: 600;
}

#modal-plantillas-msg .dataTables_paginate .paginate_button.previous,
#modal-plantillas-msg .dataTables_paginate .paginate_button.next {
  min-width: auto;
  padding: 0 14px !important;
  font-weight: 600;
  color: #00cfe8 !important;
  background-color: #fff !important;
  background: #fff !important;
  border: 1px solid #00cfe8 !important;
}

#modal-plantillas-msg .dataTables_paginate .paginate_button.previous:hover,
#modal-plantillas-msg .dataTables_paginate .paginate_button.next:hover {
  background-color: #00cfe8 !important;
  background: #00cfe8 !important;
  color: #fff !important;
}

#modal-plantillas-msg .dataTables_paginate .paginate_button.disabled,
#modal-plantillas-msg .dataTables_paginate .paginate_button.disabled:hover {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: #f8f9fa !important;
  background: #f8f9fa !important;
  border-color: #dee2e6 !important;
  color: #adb5bd !important;
  box-shadow: none;
}

#modal-plantillas-msg .dataTables_paginate .ellipsis {
  display: inline-block;
  min-width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  padding: 0;
  margin: 2px 3px;
  color: #6c757d;
  font-weight: 600;
  letter-spacing: 2px;
}

#modal-plantillas-msg .dataTables_info {
  font-size: 0.85rem;
  color: #6c757d;
  padding-top: 0.75rem;
}

#modal-plantillas-msg .dataTables_length select {
  border-radius: 6px;
  padding: 4px 8px;
  border: 1px solid #dee2e6;
}

/* ===== #modal-cuenta ===== */
/* Theme .modal-xl uses margin-left/right: 3% — breaks centering when max-width is fixed in px. */
#modal-cuenta.modal-cuenta-wide .modal-dialog.modal-xl {
  max-width: min(1140px, 96vw);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

#modal-cuenta .modal-body {
  padding-bottom: 0.75rem;
}

#modal-cuenta .nav-pills-cuenta .nav-link {
  padding: 0.4rem 0.75rem;
  font-size: 0.875rem;
  border-radius: 0.35rem;
  margin-right: 2px;
  margin-bottom: 4px;
}

#modal-cuenta label {
  font-size: 0.875rem;
  margin-bottom: 0.2rem;
  font-weight: 500;
  color: #5e5873;
}

#modal-cuenta .form-control {
  font-size: 1rem;
  line-height: 1.45;
  padding: 0.55rem 0.75rem;
  min-height: 2.55rem;
  height: auto;
}

#modal-cuenta select.form-control {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

#modal-cuenta textarea.form-control {
  min-height: auto;
}

#modal-cuenta .form-control:read-only {
  background-color: #f5f5f5;
}

#modal-cuenta .tab-content {
  min-height: 300px;
}

#modal-cuenta .input-group .form-control {
  min-height: 2.55rem;
}

#modal-cuenta .input-group-append .btn {
  min-height: 2.55rem;
  display: flex;
  align-items: center;
}

#modal-cuenta .cue-einvoice-fields {
  transition: opacity 0.15s ease;
}

/* Toggle rows for Landings tab */
#modal-cuenta .cue-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8f8f8;
  border: 1px solid #ebe9f1;
  border-radius: 0.35rem;
  padding: 0.5rem 0.75rem;
  min-height: 42px;
}

#modal-cuenta .cue-toggle-row span {
  font-size: 0.82rem;
  color: #5e5873;
  line-height: 1.3;
  flex: 1;
  padding-right: 0.5rem;
}

#modal-cuenta .cue-toggle-row .custom-control {
  flex-shrink: 0;
}

/* Ensure toggle track is always visible (labels with  ) */
#modal-cuenta .cue-toggle-row .custom-switch .custom-control-label::before {
  top: 0;
}
#modal-cuenta .cue-toggle-row .custom-switch .custom-control-label::after {
  top: 2px;
}

/* Compact hr separators in Contacto tab */
#modal-cuenta hr {
  border-color: #ebe9f1;
}