/* Estilos para el multiselect personalizado (crmvc) */

/* Variables de Color */
:root {
  --crm-primary: #1d4ed8;
  --crm-primary-hover: #1e40af;
  --crm-primary-rgb: 29, 78, 216;
}

/* Contenedor base */
.crmvc-multiselect { 
    position: relative; 
    display: block; 
    width: 100%; 
}

/* Display principal - con estilos base explícitos */
.crmvc-ms-display { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    width: 100%; 
    box-sizing: border-box; 
    cursor: pointer;
    position: relative;
}

/* Estilos explícitos para coincidir con campos Elementor */
.elementor-select-wrapper .crmvc-ms-display.elementor-field,
.crmvc-ms-display.elementor-field.elementor-size-md {
    border: 1px solid #666;
    border-radius: 3px;
    padding: .5rem 1rem;
    background-color: #fff;
    min-height: auto;
}

/* Placeholder y flecha */
.crmvc-ms-placeholder { 
    flex: 1;
}

.crmvc-ms-arrow { 
    margin-left: 8px;
    pointer-events: none;
}

/* Dropdown de checkboxes */
.crmvc-ms-dropdown { 
    position: absolute; 
    left: 0; 
    top: calc(100% + 6px); 
    background: #fff;
    border: 1px solid #ddd;
    padding: 8px 10px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    border-radius: 6px; 
    z-index: 9999; 
    max-height: 220px; 
    overflow: auto; 
    width: 100%;
}

.crmvc-ms-dropdown label { 
    display: block; 
    padding: 6px 0;
    cursor: pointer;
}

/* Ocultar select original */
.crmvc-hidden-select { 
    display: none !important; 
}

/* Ocultar TODOS los pseudo-elementos del wrapper de Elementor para evitar doble flecha */
.elementor-select-wrapper.crmvc-select-wrapper:after,
.elementor-select-wrapper.crmvc-select-wrapper:before { 
    display: none !important; 
    content: none !important;
}

/* ===== Estilos de Botones de Formulario ===== */

/* Botones de submit */
.elementor-button,
button[type="submit"],
input[type="submit"] {
  border: none !important;
  border-radius: 9999px !important;
  padding: 12px 24px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  color: white !important;
  background: var(--crm-primary) !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 4px rgba(var(--crm-primary-rgb), 0.15) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* Hover de botones */
.elementor-button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  background: var(--crm-primary-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 6px rgba(var(--crm-primary-rgb), 0.2) !important;
}

/* Active de botones */
.elementor-button:active,
button[type="submit"]:active,
input[type="submit"]:active {
  transform: translateY(0px) !important;
}

/* Estado disabled */
.elementor-button:disabled,
.elementor-button.disabled,
button[type="submit"]:disabled,
button[type="submit"].disabled,
input[type="submit"]:disabled {
  background: #e5e7eb !important;
  color: #9ca3af !important;
  cursor: not-allowed !important;
  transform: none !important;
  opacity: 0.7 !important;
}

/* Contenedor del botón */
.elementor-field-type-submit {
  margin-top: 20px !important;
}

/* Wrapper del contenido del botón */
.elementor-button-content-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.elementor-button-text {
  font-weight: 600 !important;
}

/* ===== Títulos de Páginas de Formularios ===== */

/* Quitar subrayado de títulos principales en páginas de formularios */
body.page h1.entry-title,
body.page .entry-title,
body.single h1.entry-title,
body.single .entry-title {
  text-decoration: none !important;
  border-bottom: none !important;
}

/* Títulos de secciones dentro de formularios */
.elementor-form h3,
.elementor-form-fields-wrapper h3 {
  text-decoration: none !important;
  border-bottom: none !important;
  text-underline-offset: 0 !important;
}

/* Asegurar que no haya underline en h3 de formularios */
form h3,
.elementor-field-group h3 {
  text-decoration: none !important;
  border-bottom: none !important;
}