@import './variables.scss';
@import './functions.scss';
@import './mixins.scss';
@import './prism.scss';
@import './alert.scss';

/** core **/

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
  padding: 0;
}

form {
  width: 100%;
}

/** ionic components **/

ion-grid,
ion-col {
  padding: 0;
}

ion-button {
  font-weight: $font-weight-semi-bold;
}

ion-card {
  border-radius: pxToRem($border-radius-large);
  margin: pxToRem(0);
}

input {
  &.native-input {
    font-family: var(--ion-default-font), Arial, sans-serif;
    margin-top: pxToRem(6) !important;

    padding: pxToRem(8) pxToRem(16) !important;
    border-radius: pxToRem($border-radius-large) !important;

    border: pxToRem(1) solid var(--ion-color-medium) !important;

    &:focus {
      border: pxToRem(2) solid var(--ion-color-primary) !important;
    }
  }
}

ion-textarea {
  margin-bottom: 0 !important;
}

ion-textarea::part(supporting-text) {
  padding-top: 2px !important;
  padding-bottom: 0 !important;
}

textarea {
  &.native-textarea {
    font-family: var(--ion-default-font), Arial, sans-serif;
    padding: pxToRem(12) pxToRem(16) !important;
    border-radius: pxToRem($border-radius-large) !important;
    border: pxToRem(1) solid var(--ion-color-medium) !important;
    background: var(--ion-background-color, #fff) !important;
    color: var(--ion-text-color, #000) !important;
    resize: vertical;

    &:focus {
      border: pxToRem(2) solid var(--ion-color-primary) !important;
      outline: none !important;
    }
  }
}

ion-searchbar {
  padding: 0 !important;
}

ion-searchbar div input {
  padding-inline-start: pxToRem(28);
  margin-top: pxToRem(6) !important;

  padding: pxToRem(8) pxToRem(32) !important;

  border: pxToRem(1) solid var(--ion-color-medium) !important;
  border-radius: pxToRem($border-radius-large) !important;

  &:focus {
    border: pxToRem(2) solid var(--ion-color-primary) !important;
  }
}

ion-searchbar div ion-icon {
  margin-top: pxToRem(2);
  padding-left: pxToRem(4);
  padding-right: pxToRem(8);
}

ion-datetime,
ion-select {
  // margin-top: pxToRem(8);
  // padding-left: pxToRem(10) !important;
  // border: pxToRem(1) solid var(--ion-color-medium) !important;
  // border-radius: pxToRem($border-radius-large) !important;

  // &:focus {
  //   border: pxToRem(2) solid var(--ion-color-primary) !important;
  // }
}

ion-label {
  text-align: start;
  font-weight: $font-weight-bold;
}

ion-toolbar {
  --background: transparent;
}

ion-input {
  margin-top: 0px;

  /* Chrome/Safari aplican un overlay azulado/grey a inputs prerellenados (autofill)
   * que rompe el theme. Forzamos colores que matchean al ion-input regular. */
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--ion-background-color, #fff) inset !important;
    -webkit-text-fill-color: var(--ion-text-color, #000) !important;
    caret-color: var(--ion-text-color, #000) !important;
    transition: background-color 9999s ease-in-out 0s;
  }
}

/* Dark mode autofill — usa step bg para integrarse con la paleta dark */
body.dark ion-input input:-webkit-autofill,
html.ion-palette-dark ion-input input:-webkit-autofill,
body[data-theme='dark'] ion-input input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--ion-background-color, #121212) inset !important;
  -webkit-text-fill-color: var(--ion-text-color, #fff) !important;
}

ion-select {
  padding-right: pxToRem(10) !important;

  &.select-expanded {
    border: pxToRem(2) solid var(--ion-color-primary) !important;
    // Pill rounded para coherencia con val-text-input + val-phone-input.
    border-radius: pxToRem($border-radius-large) !important;
  }
}

ion-alert {
  --min-width: 80% !important;

  @include media-medium {
    --min-width: 400px !important;
  }

  .alert-radio-label {
    font-weight: $font-weight-bold;
  }

  ::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
    -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
  }
}

ion-label {
  text-align: start;
}

ion-note {
  text-align: end !important;
}

ion-toolbar {
  --background: transparent;
  // padding: pxToRem(4) pxToRem(8);
}

ion-back-button {
  font-family: var(--ion-default-font), Arial, sans-serif;
}

// ion-modal .date-picker-custom {
//   max-width: 340px;
//   max-height: 390px;

//   .ion-page {
//     justify-content: flex-start !important;
//   }

//   .modal-wrapper {
//     border-radius: pxToRem($border-radius-large) !important;
//   }
// }

ion-modal {
  &.ion-datetime-button-overlay {
    --border-radius: 1.5rem !important;
  }

  // @media only screen and (max-width: 768px) {
  //   --border-radius: 1.5rem 1.5rem 0rem 0rem !important;
  // }

  // @media only screen and (min-width: 768px) and (min-height: 600px) {
  //   --border-radius: 1.5rem !important;
  // }
}

.modal-wrapper,
.modal-shadow {
  border-radius: 1.5rem !important;
}

.img-black {
  filter: invert(0);
}
body.dark .img-black,
html.ion-palette-dark .img-black,
body[data-theme='dark'] .img-black {
  filter: invert(1);
}

.ion-datetime-button-overlay ion-datetime.datetime-grid {
  margin: 0px;
}

// ion-title {
//   font-size: pxToRem(40) !important;
//   font-weight: 800;
// }

ion-modal.modal-card ion-header ion-toolbar:last-of-type,
ion-modal.modal-sheet ion-header ion-toolbar:last-of-type {
  padding: 0 !important;
  padding-bottom: 0.5rem !important;
}

// Estilos para enlaces procesados automáticamente
.processed-link {
  color: var(--ion-color-primary, #3880ff);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 0.3s ease;

  &:hover {
    color: var(--ion-color-primary-shade, #3171e0);
    text-decoration-thickness: 2px;
  }

  &:active {
    color: var(--ion-color-primary-tint, #4c8dff);
  }
}

.external-link {
  &::after {
    content: ' ↗';
    font-size: 0.8em;
    opacity: 0.7;
  }
}

.internal-link {
  color: var(--ion-color-primary, #0cd1e8);

  &:hover {
    color: var(--ion-color-primary-shade, #0bb8cc);
  }
}