html,
    body {
      margin: 0;
      padding: 0;
      width: 100%;
      overflow-x: hidden;
      -webkit-text-size-adjust: 100%;
      background-color: #f1f5f9;
    }

    .crm-profile-app,
    .crm-profile-app * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      border: none;
      color: #1f2933;
      font-size: 14px;
      line-height: 1.6em;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    .crm-profile-app {
      max-width: 1040px;
      margin: 24px auto;
      border: 1px solid #d8e3f2;
      border-radius: 20px;
      overflow: hidden;
      background-color: #ffffff;
      box-shadow: 0 12px 32px rgba(20, 37, 62, 0.12);
    }

    .crm-profile-app .form-body {
      padding: 24px;
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .crm-profile-app .lookup-panel {
      border: 1px solid #e4ebf5;
      border-radius: 16px;
      padding: 20px;
      background-color: #f7fafe;
      display: flex;
      flex-direction: column;
      gap: 16px;
      position: relative;
    }

    .crm-profile-app .lookup-panel .form-grid {
      column-gap: 12px;
      row-gap: 16px;
      max-width: 720px;
      width: 100%;
    }

    .crm-profile-app .lookup-panel.has-logo {
      padding-right: 220px;
      min-height: 200px;
    }

    .crm-profile-app .lookup-header {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 24px;
    }

    .crm-profile-app .lookup-copy {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .crm-profile-app .lookup-logo {
      width: 240px;
      max-width: 50%;
      height: auto;
      object-fit: contain;
      justify-self: end;
    }

    .crm-profile-app .lookup-panel-logo {
      position: absolute;
      right: 24px;
      top: 50%;
      transform: translateY(-50%);
      width: 170px;
      max-width: 30%;
      height: auto;
      object-fit: contain;
      pointer-events: none;
    }

    @media (max-width: 960px) {
      .crm-profile-app .lookup-panel.has-logo {
        padding-right: 20px;
        min-height: auto;
      }

      .crm-profile-app .lookup-panel.has-logo .lookup-panel-logo {
        position: static;
        align-self: flex-end;
        margin-top: 12px;
        width: 160px;
        max-width: 60%;
        transform: none;
      }
    }

    @media (max-width: 600px) {
      .crm-profile-app {
        margin: 12px;
        border-radius: 16px;
      }

      .crm-profile-app .form-body {
        padding: 16px;
        gap: 20px;
      }

      .crm-profile-app .lookup-panel {
        padding: 16px;
      }

      .crm-profile-app .lookup-title {
        font-size: 17px;
      }

      .crm-profile-app .section>summary,
      .crm-profile-app .section-header {
        font-size: 17px;
        padding: 16px 18px;
      }

      .crm-profile-app .section-body {
        padding: 0 18px 18px;
      }

      .crm-profile-app .actions {
        flex-direction: column;
        align-items: stretch;
      }
    }

    @media (max-width: 768px) {
      .crm-profile-app .lookup-header {
        grid-template-columns: 1fr;
        text-align: left;
      }

      .crm-profile-app .lookup-logo {
        width: 200px;
        max-width: 75%;
        justify-self: center;
      }

      .crm-profile-app .lookup-panel-logo {
        position: static;
        width: 160px;
        max-width: 70%;
        align-self: center;
        transform: none;
      }
    }

    .crm-profile-app .lookup-title {
      font-size: 18px;
      font-weight: 700;
      color: #0f172a;
    }

    .crm-profile-app .form-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
    }

    .crm-profile-app .birthdate-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .crm-profile-app .birthdate-grid input {
      text-align: center;
    }

    @media (max-width: 560px) {
      .crm-profile-app .birthdate-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .crm-profile-app .birthdate-grid input:last-child {
        grid-column: 1 / -1;
      }
    }

    .crm-profile-app .form-grid.three-columns {
      grid-template-columns: 1fr;
    }

    .crm-profile-app .field {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .crm-profile-app label {
      font-weight: 600;
      color: #1e293b;
    }

    .crm-profile-app .required {
      color: #ef4444;
      margin-left: 4px;
      font-weight: 700;
    }

    .crm-profile-app input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
    .crm-profile-app select,
    .crm-profile-app textarea {
      border: 1px solid #c7d6e6;
      border-radius: 12px;
      padding: 10px 12px;
      background-color: #ffffff;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
      -webkit-appearance: none;
      appearance: none;
    }

    .crm-profile-app input[type="file"] {
      max-width: 100%;
      width: 100%;
    }

    /* Restaurar apariencia para select si se desea mantener la flecha nativa, 
       pero dado el diseño premium, es mejor una flecha custom o dejar la nativa.
       En iOS appearance: none quita la flecha. 
       Para solucionar 'cortes', el max-width: 100% y min-width: 0 son claves. */

    .crm-profile-app select {
      /* En iOS, si ponemos appearance: none, desaparece la flecha. 
         Lo dejamos en none para uniformidad y añadimos flecha SVG por background */
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7c93'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      background-size: 16px;
      padding-right: 40px;
    }

    @media (max-width: 600px) {

      .crm-profile-app,
      .crm-profile-app * {
        font-size: 16px;
      }

      .crm-profile-app .helper-text {
        font-size: 13px;
      }

      .crm-profile-app input,
      .crm-profile-app select,
      .crm-profile-app textarea {
        padding: 12px 14px;
        min-height: 44px;
      }

      .crm-profile-app .primary-button {
        min-height: 44px;
        padding: 12px 18px;
      }
    }

    .crm-profile-app .is-invalid {
      border-color: #ef4444;
      box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15);
    }

    .crm-profile-app input:focus,
    .crm-profile-app select:focus,
    .crm-profile-app textarea:focus {
      outline: none;
      border-color: #1c6fb3;
      box-shadow: 0 0 0 3px rgba(28, 111, 179, 0.15);
    }

    .crm-profile-app input[readonly],
    .crm-profile-app select:disabled {
      background-color: #eef4fb;
      color: #475569;
    }

    .crm-profile-app textarea {
      min-height: 110px;
      resize: vertical;
    }

    .crm-profile-app .section-salud textarea {
      min-height: 90px;
    }

    .crm-profile-app .helper-text {
      font-size: 12px;
      color: #6b7c93;
    }

    .crm-profile-app #responsabilidades-help-text {
      grid-column: 1 / -1;
      display: block;
    }

    .crm-profile-app .info-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background-color: #1c6fb3;
      color: #ffffff;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      margin-left: 6px;
      vertical-align: middle;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
      position: relative;
    }

    .crm-profile-app .info-icon:hover {
      background-color: #155a94;
    }

    .crm-profile-app .info-tooltip {
      position: absolute;
      left: 100%;
      top: 50%;
      transform: translateY(-50%);
      margin-left: 8px;
      padding: 12px 16px;
      background-color: #1f2937;
      color: #ffffff;
      border-radius: 8px;
      font-size: 13px;
      line-height: 1.5;
      white-space: normal;
      width: 280px;
      max-width: calc(100vw - 80px);
      z-index: 1000;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.2s ease, visibility 0.2s ease;
      pointer-events: none;
    }

    .crm-profile-app .info-tooltip::after {
      content: '';
      position: absolute;
      right: 100%;
      top: 50%;
      transform: translateY(-50%);
      border: 6px solid transparent;
      border-right-color: #1f2937;
    }

    .crm-profile-app .info-icon.active .info-tooltip {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    @media (max-width: 768px) {
      .crm-profile-app .info-tooltip {
        /* Estrategia modal centrada para móvil */
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 85vw;
        max-width: 340px;
        font-size: 14px;
        margin: 0;
        padding: 20px;
        text-align: center;
        z-index: 10000;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
        border: 1px solid rgba(255, 255, 255, 0.1);
      }

      /* Ocultar la flecha en móvil */
      .crm-profile-app .info-tooltip::after {
        display: none;
      }
    }

    .crm-profile-app .status {
      font-size: 14px;
    }

    .crm-profile-app .status-alert {
      display: grid;
      gap: 8px;
      padding: 16px 18px;
      border-radius: 14px;
      background: #fff1f2;
      border: 1px solid #fecdd3;
      color: #b91c1c;
      font-size: 14px;
    }

    .crm-profile-app .status-alert strong {
      font-weight: 700;
    }

    .crm-profile-app .status-alert a {
      text-decoration: underline;
      font-weight: 600;
    }

    .crm-profile-app .hidden {
      display: none !important;
    }

    .crm-profile-app .actions {
      display: flex;
      gap: 12px;
      align-items: center;
      flex-wrap: wrap;
    }

    .crm-profile-app .primary-button {
      padding: 10px 18px;
      border-radius: 10px;
      background: linear-gradient(135deg, #1c6fb3, #2a8cd1);
      color: #ffffff;
      font-weight: 600;
      text-decoration: none;
      cursor: pointer;
      transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.3s ease,
        color 0.3s ease;
    }

    .crm-profile-app .primary-button,
    .crm-profile-app .primary-button * {
      color: #ffffff;
    }

    .crm-profile-app .primary-button.is-success {
      background: #16a34a;
      box-shadow: 0 8px 18px rgba(22, 163, 74, 0.3);
    }

    .crm-profile-app .primary-button.full-width {
      width: 100%;
      justify-content: center;
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }

    .crm-profile-app .primary-button.has-spinner {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .crm-profile-app .primary-button .button-spinner {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 2px solid rgba(255, 255, 255, 0.4);
      border-top-color: #ffffff;
      animation: crm-spin 0.8s linear infinite;
      display: none;
    }

    .crm-profile-app .primary-button.is-loading .button-spinner {
      display: inline-block;
    }

    @keyframes crm-spin {
      to {
        transform: rotate(360deg);
      }
    }

    .crm-profile-app .primary-button:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 14px rgba(28, 111, 179, 0.2);
    }

    .crm-profile-app .primary-button[disabled] {
      opacity: 0.6;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }

    .crm-profile-app .section {
      border: 1px solid #e4ebf5;
      border-radius: 16px;
      padding: 0;
      background-color: #f7fafe;
      margin-top: 8px;
    }

    .crm-profile-app .section>summary {
      list-style: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 18px;
      font-weight: 700;
      color: #0f172a;
      padding: 18px 20px;
      background-color: #f7fafe;
    }

    .crm-profile-app .section-header {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 18px;
      font-weight: 700;
      color: #0f172a;
      padding: 18px 20px;
      background-color: #f7fafe;
    }

    .crm-profile-app .section>summary::-webkit-details-marker {
      display: none;
    }

    .crm-profile-app .section-number {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      border-radius: 999px;
      background: #e0f2fe;
      color: #1c6fb3;
      font-weight: 700;
      box-shadow: 0 4px 10px rgba(28, 111, 179, 0.2);
      flex-shrink: 0;
    }

    .crm-profile-app .section-status {
      margin-left: auto;
      font-size: 18px;
    }

    .crm-profile-app .section-body {
      padding: 0 20px 20px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .crm-profile-app .section h4 {
      font-size: 16px;
      font-weight: 700;
      margin-top: 8px;
      color: #1e3a5f;
    }

    .crm-profile-app .checkbox-field {
      flex-direction: row;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      border: 1px solid transparent;
      border-radius: 12px;
      background: #ffffff;
    }

    .crm-profile-app .checkbox-field input[type="checkbox"] {
      appearance: none;
      width: 20px;
      height: 20px;
      border-radius: 6px;
      border: 2px solid #1c6fb3;
      display: grid;
      place-items: center;
      background-color: #ffffff;
      cursor: pointer;
      transition: background-color 0.2s ease, border-color 0.2s ease;
    }

    .crm-profile-app .checkbox-field input[type="checkbox"]::after {
      content: "";
      width: 10px;
      height: 10px;
      border-radius: 3px;
      transform: scale(0);
      transition: transform 0.2s ease;
      background-color: #1c6fb3;
    }

    .crm-profile-app .checkbox-field input[type="checkbox"]:checked::after {
      transform: scale(1);
    }


    .crm-profile-app .legal-consents-container {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .crm-profile-app .legal-consent-row {
      display: flex;
      align-items: flex-end;
      gap: 16px;
    }

    .crm-profile-app .legal-link-button {
      flex: 1;
      padding: 10px 16px;
      border-radius: 10px;
      background-color: #1c6fb3;
      color: #ffffff;
      font-weight: 600;
      text-decoration: none;
      text-align: center;
      transition: background-color 0.2s ease, transform 0.2s ease;
      display: inline-flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      white-space: normal;
      word-wrap: break-word;
      line-height: 1.4;
      min-height: 42px;
      box-sizing: border-box;
      gap: 6px;
      text-align: left;
    }

    .crm-profile-app .legal-link-button:hover {
      background-color: #155a94;
      transform: translateY(-1px);
    }

    .crm-profile-app .legal-select-wrapper {
      display: flex;
      flex-direction: column;
      gap: 6px;
      min-width: 200px;
      flex-shrink: 0;
      justify-content: flex-end;
    }

    .crm-profile-app .legal-select-label {
      font-size: 12px;
      color: #475569;
      font-weight: 500;
      margin: 0;
      line-height: 1.4;
      white-space: normal;
      word-wrap: break-word;
    }

    .crm-profile-app .legal-select {
      min-width: 120px;
      width: 100%;
      height: 42px;
      box-sizing: border-box;
    }

    @media (max-width: 768px) {
      .crm-profile-app .legal-consent-row {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
      }

      .crm-profile-app .legal-select-wrapper {
        width: 100%;
        min-width: auto;
      }
    }

    .crm-profile-app select[multiple] {
      min-height: 150px;
      padding: 12px;
    }

    .crm-profile-app .save-helper {
      font-size: 13px;
      color: #475569;
    }

    .crm-profile-app .save-helper a {
      color: #1c6fb3;
      text-decoration: none;
      font-weight: 600;
    }

    .crm-profile-app .ds-intro {
      display: grid;
      gap: 12px;
      font-size: 14px;
      color: #475569;
    }

    .crm-profile-app .ds-intro p {
      margin: 0;
    }

    .crm-profile-app .ds-list {
      display: grid;
      gap: 10px;
      margin: 4px 0 0;
      padding-left: 18px;
      list-style: none;
    }

    .crm-profile-app .ds-list li {
      margin: 0;
      line-height: 1.6;
    }

    .crm-profile-app .save-actions {
      margin-top: 6px;
    }

    .crm-profile-app .option-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
    }

    .crm-profile-app .option-card {
      border: 1px solid #c7d6e6;
      border-radius: 14px;
      padding: 14px 16px;
      background: #ffffff;
      display: flex;
      flex-direction: column;
      gap: 6px;
      cursor: pointer;
    }

    .crm-profile-app .option-card input {
      margin-bottom: 6px;
    }

    .crm-profile-app .option-title {
      font-weight: 700;
      color: #0f172a;
    }

    .crm-profile-app .option-desc {
      color: #475569;
      font-size: 13px;
    }

    .crm-profile-app .status-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
    }

    .crm-profile-app .status-card {
      display: flex;
      gap: 16px;
      padding: 16px;
      border-radius: 16px;
      background: #ffffff;
      border: 1px solid #e4ebf5;
      align-items: center;
    }

    .crm-profile-app .status-icon {
      font-size: 28px;
    }

    .crm-profile-app .status-title {
      font-weight: 700;
      color: #0f172a;
    }

    .crm-profile-app .status-text {
      color: #475569;
      font-size: 13px;
    }

    .crm-profile-app .modal {
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, 0.6);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      z-index: 9999;
    }

    .crm-profile-app .modal.hidden {
      display: none;
    }

    .crm-profile-app .cropper-inline {
      margin-top: 16px;
      padding: 20px;
      border-radius: 16px;
      border: 1px solid #e4ebf5;
      background: #ffffff;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .crm-profile-app .cropper-inline.hidden {
      display: none;
    }

    .crm-profile-app .modal-content {
      background: #ffffff;
      border-radius: 16px;
      padding: 20px;
      max-width: 520px;
      width: 100%;
      box-shadow: 0 20px 40px rgba(15, 23, 42, 0.2);
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .crm-profile-app .modal-header {
      font-size: 16px;
      font-weight: 700;
      color: #0f172a;
    }

    .crm-profile-app .cropper-preview {
      width: 320px;
      height: 320px;
      max-width: 100%;
      aspect-ratio: 1;
      border-radius: 12px;
      border: 1px solid #c7d6e6;
      background: #f8fafc;
      align-self: center;
      touch-action: none;
      cursor: grab;
      box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
    }

    .crm-profile-app .cropper-preview.is-dragging {
      cursor: grabbing;
    }

    /* Zoom control row */
    .crm-profile-app .cropper-zoom-row {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .crm-profile-app .cropper-zoom-row label {
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .crm-profile-app .cropper-zoom-row .cropper-zoom-hint {
      font-size: 12px;
      color: #94a3b8;
      white-space: nowrap;
      flex-shrink: 0;
      margin-left: auto;
    }

    /* Custom range slider */
    .crm-profile-app #cropper-zoom {
      -webkit-appearance: none;
      appearance: none;
      flex: 1;
      height: 4px;
      border-radius: 4px;
      background: linear-gradient(to right, #3b82f6 0%, #3b82f6 var(--zoom-pct, 0%), #e2e8f0 var(--zoom-pct, 0%), #e2e8f0 100%);
      outline: none;
      cursor: pointer;
      transition: background 0.1s;
    }

    .crm-profile-app #cropper-zoom::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #3b82f6;
      border: 2px solid #ffffff;
      box-shadow: 0 1px 4px rgba(59, 130, 246, 0.4);
      cursor: pointer;
      transition: transform 0.1s, box-shadow 0.1s;
    }

    .crm-profile-app #cropper-zoom::-moz-range-thumb {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #3b82f6;
      border: 2px solid #ffffff;
      box-shadow: 0 1px 4px rgba(59, 130, 246, 0.4);
      cursor: pointer;
    }

    .crm-profile-app #cropper-zoom:hover::-webkit-slider-thumb {
      transform: scale(1.15);
      box-shadow: 0 2px 8px rgba(59, 130, 246, 0.5);
    }

    .crm-profile-app #cropper-zoom:active::-webkit-slider-thumb {
      transform: scale(1.25);
      box-shadow: 0 2px 12px rgba(59, 130, 246, 0.6);
    }

    .crm-profile-app .modal-actions {
      display: flex;
      gap: 12px;
      justify-content: flex-end;
      flex-wrap: wrap;
    }

    @media (max-width: 480px) {
      .crm-profile-app .cropper-inline {
        padding: 14px;
        gap: 12px;
      }

      .crm-profile-app .cropper-preview {
        width: 100%;
        height: auto;
        max-width: 100%;
      }

      .crm-profile-app .cropper-zoom-row {
        flex-wrap: wrap;
        gap: 8px;
      }

      .crm-profile-app .cropper-zoom-row .cropper-zoom-hint {
        width: 100%;
        text-align: center;
        white-space: normal;
        order: 3;
      }

      .crm-profile-app .modal-actions {
        flex-direction: column;
        gap: 10px;
      }

      .crm-profile-app .modal-actions .primary-button,
      .crm-profile-app .modal-actions .secondary-button {
        width: 100%;
        text-align: center;
        justify-content: center;
        box-sizing: border-box;
      }
    }

    .crm-profile-app .secondary-button {
      padding: 10px 16px;
      border-radius: 10px;
      border: 1px solid #c7d6e6;
      background: #ffffff;
      color: #1e293b;
      font-weight: 600;
      cursor: pointer;
    }

    .crm-profile-app .info-highlight-box {
      margin-top: 0;
      padding: 16px 20px;
      background: #1f2937;
      border-left: 4px solid #60a5fa;
      border-radius: 4px 12px 12px 4px;
      color: #f3f4f6;
      font-size: 14px;
      line-height: 1.5;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
      display: flex;
      gap: 14px;
      align-items: flex-start;
    }

    .crm-profile-app .info-highlight-box span,
    .crm-profile-app .info-highlight-box p {
      color: #f3f4f6 !important;
    }

    .crm-profile-app .info-highlight-box svg {
      flex-shrink: 0;
      width: 20px;
      height: 20px;
      color: #60a5fa !important;
      margin-top: 1px;
    }

    .crm-profile-app .info-highlight-box svg path {
      stroke: #60a5fa !important;
      stroke-width: 1.5 !important;
      fill: none !important;
    }

    @media (min-width: 720px) {
      .crm-profile-app .form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .crm-profile-app .lookup-panel .field:first-child input {
        width: 100%;
      }

      .crm-profile-app .form-grid.three-columns {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .crm-profile-app .field.span-2,
      .crm-profile-app .info-highlight-box.span-2 {
        grid-column: span 2;
      }

      .crm-profile-app .option-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .crm-profile-app .status-grid {
        grid-template-columns: 2fr 1fr;
      }
    }



    /* --- External link icon (replaces "(abre nueva pestaña)" text) --- */
    .crm-profile-app .ext-link-icon {
      display: inline;
      vertical-align: middle;
      width: 14px;
      height: 14px;
      margin-left: 4px;
      opacity: 0.8;
      flex-shrink: 0;
    }

    .crm-profile-app .legal-link-button .ext-link-icon {
      margin-left: 0;
      width: 16px;
      height: 16px;
      opacity: 0.9;
    }

    /* --- Cropper canvas: prevent browser gestures --- */
    .crm-profile-app .cropper-preview {
      touch-action: none;
    }

    /* --- Cropper zoom row: always wrap hint to separate line for more slider space --- */
    .crm-profile-app .cropper-zoom-row {
      flex-wrap: wrap;
    }

    .crm-profile-app .cropper-zoom-row .cropper-zoom-hint {
      width: 100%;
      text-align: center;
      white-space: normal;
      margin-left: 0;
      order: 3;
    }

    /* Bigger slider thumb on touch devices */
    @media (hover: none) and (pointer: coarse) {
      .crm-profile-app #cropper-zoom::-webkit-slider-thumb {
        width: 26px;
        height: 26px;
      }

      .crm-profile-app #cropper-zoom::-moz-range-thumb {
        width: 26px;
        height: 26px;
      }
    }

    /* --- PURPLE THEME OVERRIDES (Laicos) --- */
    /* Backgrounds and borders inherited from default (Blue) to keep consistency */

    .crm-profile-app.theme-purple .section-number {
      /* Blending the purple accent with a cool blue-ish background */
      background: #eef2ff;
      color: #9D1E74;
      box-shadow: 0 4px 10px rgba(157, 30, 116, 0.2);
    }

    .crm-profile-app.theme-purple input:focus,
    .crm-profile-app.theme-purple select:focus,
    .crm-profile-app.theme-purple textarea:focus {
      border-color: #9D1E74;
      box-shadow: 0 0 0 3px rgba(157, 30, 116, 0.15);
    }

    .crm-profile-app.theme-purple .info-icon {
      background-color: #9D1E74;
    }

    .crm-profile-app.theme-purple .info-icon:hover {
      background-color: #7D185D;
    }

    .crm-profile-app.theme-purple .primary-button {
      background: linear-gradient(135deg, #9D1E74, #b92b89);
      box-shadow: 0 4px 10px rgba(157, 30, 116, 0.3);
    }

    .crm-profile-app.theme-purple .primary-button:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 14px rgba(157, 30, 116, 0.25);
    }

    .crm-profile-app.theme-purple .legal-link-button {
      background-color: #9D1E74;
    }

    .crm-profile-app.theme-purple .legal-link-button:hover {
      background-color: #7D185D;
    }

    .crm-profile-app.theme-purple .checkbox-field input[type="checkbox"] {
      border-color: #9D1E74;
    }

    .crm-profile-app.theme-purple .checkbox-field input[type="checkbox"]::after {
      background-color: #9D1E74;
    }

    .crm-profile-app.theme-purple .save-helper a {
      color: #9D1E74;
    }

    /* Highlight box - purple accent */
    .crm-profile-app.theme-purple .info-highlight-box {
      border-left-color: #9D1E74;
    }

    .crm-profile-app.theme-purple .info-highlight-box svg {
      color: #9D1E74 !important;
    }

    .crm-profile-app.theme-purple .info-highlight-box svg path {
      stroke: #9D1E74 !important;
    }