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

/** core **/

/* Evita que Safari/Chrome móvil auto-inflen el texto en páginas con cierto
 * layout (síntoma: el label del val-bottom-nav se veía más grande en home que en
 * otras vistas). Los font-size en rem son root-relative; el text-size-adjust del
 * navegador los escalaba por página. Fijarlo en 100% lo hace consistente en TODA
 * app que consuma estos overrides. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

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: start !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;
}

/* Sheet modals (breakpoints): ion-content calcula su altura contra el viewport
   completo, no contra la altura restringida del sheet → el usuario no puede
   scrollear. --overflow: hidden auto fuerza scroll vertical en todos los modales
   de las apps del factory. */
ion-modal ion-content {
  --overflow: hidden auto;
}

/* ─── Adaptive modal ──────────────────────────────────────────────────────────
 * Mobile: full-screen (sin breakpoints → sin conflicto gesture/scroll).
 * Desktop (≥768px): card centrada con border-radius.
 *
 * Usar via ModalService.openAdaptive() o cssClass="val-modal-adaptive".
 * Variante .val-modal-adaptive--wide disponible para contenido más ancho.
 * ─────────────────────────────────────────────────────────────────────────── */
ion-modal.val-modal-adaptive {
  --background: var(--ion-background-color, #ffffff);
  --border-radius: 0;
  --width: 100%;
  --height: 100%;

  @media (min-width: 768px) {
    --border-radius: 1.5rem;
    --width: 560px;
    --height: min(85vh, 800px);
  }
}

ion-modal.val-modal-adaptive.val-modal-adaptive--wide {
  @media (min-width: 768px) {
    --width: 720px;
    --height: min(88vh, 900px);
  }
}

/* Elevación del confirm v2 — la superficie del diálogo debe leerse POR ENCIMA
   de la página, no como un bloque más del contenido.

   Viene del `ion-alert` que el v2 reemplazó (ver styles/alert.scss): ahí el
   backdrop iba a 0.4 con blur y el wrapper llevaba borde hairline + sombra
   larga. Esas reglas quedaron atadas al selector de ion-alert, que ya no
   aplica a nada, y el camino nuevo nació solo con el border-radius. Sin
   sombra ni borde el diálogo desaparece contra fondos casi blancos (bingo usa
   papel #F8F8F8, el diálogo blanco: el contraste entre ambos es casi nulo).

   El borde no es redundante con la sombra: es lo que define el canto cuando
   la app tiene fondo claro. La sombra sola no alcanza.

   Van con ::part(content) por la misma razón que el radius — el shadow DOM de
   ion-modal aísla .modal-wrapper de cualquier selector externo. */
@mixin val-confirm-v2-surface {
  --backdrop-opacity: 0.4;

  &::part(backdrop) {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  &::part(content) {
    border: 1px solid var(--ion-border-color, rgba(0, 0, 0, 0.08));
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    /* Recorta los hijos (el contenido proyectado respeta el radius). No afecta
       la sombra propia del elemento, que se pinta por fuera del borde. */
    overflow: hidden;
  }
}

/* En dark la sombra negra no separa nada contra un fondo oscuro: el canto lo
   marca un borde claro, y la sombra se profundiza para conservar la altura. */
@mixin val-confirm-v2-surface-dark {
  &::part(content) {
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  }
}

/* val-confirm-v2-sheet — el confirm dialog v2 en modo sheet. --height: auto
   hace que el sheet tome la altura real del contenido (título + mensaje +
   botones) en vez del breakpoint como % de la pantalla completa — un
   confirm de 2 líneas no debe ocupar todo el viewport.
   El radius va con ::part(content) — `.modal-wrapper`/`.modal-shadow` viven
   DENTRO del shadow DOM de ion-modal (Stencil web component); un selector de
   clase normal desde un stylesheet global NUNCA los alcanza (verificado:
   getComputedStyle daba border-radius:0px pese al !important — no era un
   problema de especificidad, era shadow DOM aislando el selector por
   completo). ::part() es el único mecanismo CSS que cruza ese boundary. */
ion-modal.val-confirm-v2-sheet {
  @include val-confirm-v2-surface;

  --height: auto;
  --border-radius: 22px 22px 0 0;

  &::part(content) {
    border-radius: 22px 22px 0 0;
    /* El sheet nace pegado al borde inferior: sin canto abajo que dibujar. */
    border-bottom: none;
  }
}

/* val-option-sheet — el selector de N opciones. Mismo criterio de altura que el
   confirm: --height auto para que tome el alto real del contenido. Con el
   breakpoint como porcentaje, tres opciones ocupaban la pantalla entera y
   quedaba medio viewport vacío debajo del botón de cancelar. */
ion-modal.val-option-sheet {
  --height: auto;
  --border-radius: 22px 22px 0 0;
  --background: var(--ion-background-color, #fff);

  &::part(content) {
    border-radius: 22px 22px 0 0;
    border-bottom: none;
  }
}

ion-modal.val-confirm-v2-dialog {
  @include val-confirm-v2-surface;

  --border-radius: 22px;

  &::part(content) {
    border-radius: 22px;
  }
}

body.dark,
html.ion-palette-dark,
[data-theme='dark'] {
  ion-modal.val-confirm-v2-sheet {
    @include val-confirm-v2-surface-dark;
  }

  ion-modal.val-confirm-v2-dialog {
    @include val-confirm-v2-surface-dark;
  }
}

// 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 {
}

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

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