:root {
  --background: light-dark(#eff1fa, #162036);
  --foreground: light-dark(#182559, #e3ebfc);

  --nav: light-dark(#0c2483, #325095);
  --nav-foreground: light-dark(#eff0f5, #e8e9ed);

  --primary: light-dark(#2448d6, #366ae2);
  --primary-foreground: light-dark(#f8f9fc, #000000);

  --secondary: light-dark(#cee1fd, #495b9c);
  --secondary-foreground: light-dark(#3d568f, #d6e6f5);

  --card: light-dark(#ffffff, #0e162a);
  --card-foreground: light-dark(#070c1c, #d8ebfd);

  --accent: light-dark(#d92626, #a01c1c);
  --accent-foreground: light-dark(#9a3b37, #fcf8f8);

  --error: hsl(44, 100%, 50%);

  --border: light-dark(#c3c6df, #334461);

  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
}

@font-face {
  font-family: 'Montserrat';
  src:
    local('Montserrat'),
    url('/Montserrat.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Cinzel';
  src:
    local('Cinzel-ExtraBold'),
    url('/static/fonts/Cinzel-ExtraBold.ttf') format('truetype');
  font-display: swap;
}

/* PRELUDE */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 2rem;
  height: 100%;
}

body {
  min-height: 100%;
  display: grid;
  line-height: 1.5;
  background-color: var(--background);
  color: var(--foreground);
}

svg {
  vertical-align: top;
}

button {
  border: none;
  background: none;
  color: inherit;
}

input,
button,
textarea,
select {
  font: inherit;
  width: 100%;
}

ul,
li,
a {
  display: inline-block;
  overflow-wrap: break-word;
  text-decoration: none;
}

.link {
  cursor: pointer;
  font-weight: bold;
  color: var(--primary);
  width: fit-content;
  text-decoration-thickness: 2px;

  &.arrow::after {
    content: '\2794';
    margin-left: 0.5rem;
    font-weight: 900;
  }

  &:hover {
    color: color-mix(in hsl, var(--primary) 80%, var(--foreground) 20%);
  }

  &:active {
    color: color-mix(in hsl, var(--primary) 20%, var(--foreground) 80%);
  }
}

hr {
  border-color: var(--border);
  border-top: none;
}

:focus {
  outline: none;
}

textarea {
  resize: none;
  display: block;
}

/* GENERIC COMPONENTS */

.svg-image {
  display: block;
  margin: auto;
  width: 200px;
  fill: var(--card-foreground);
}

.card {
  background-color: var(--card);
  color: var(--card-foreground);
  border-radius: 0.5rem;
  border: 1px solid var(--border);
}

.btn,
.btn-cancel {
  display: block;
  border: 2px solid transparent;
  font-family: Didot, serif;
  text-align: center;
  border-radius: 4px;
  font-weight: bold;
  font-size: 1.25rem;
  padding: 0.25rem 1rem;

  &.wide {
    width: 280px;
  }

  &:hover {
    cursor: pointer;
  }
}

.btn {
  color: var(--primary-foreground);
  background-color: var(--primary);

  &:hover {
    background-color: color-mix(in hsl, var(--primary) 90%, var(--foreground) 10%);
  }

  &:active {
    background-color: var(--foreground);
  }

}

.btn-inverse {
  background-color: transparent;
  border-color: var(--primary);
  color: var(--primary);

  &:hover {
    border-color: color-mix(in hsl, var(--primary) 95%, var(--primary-foreground) 5%);
    color: color-mix(in hsl, var(--primary) 95%, var(--primary-foreground) 5%);
  }

  &:active {
    border-color: var(--foreground);
    color: var(--foreground);
  }

}

.balance {
  text-wrap: balance;
}

.card-title {
  text-wrap: balance;
  font-family: serif;
  font-size: 1.75rem;
  line-height: 1.75rem;
  color: var(--card-foreground);
}

/* GENERAL UTILS */
.mobile-only {
  display: none;
}

.mi-a {
  margin-inline: auto;
}

.serif {
  font-family: serif;
}

.separator {
  margin-bottom: 1.5rem;
}

.cap-word::first-letter {
  text-transform: capitalize;
}

.capitalize {
  text-transform: capitalize;
}

.grid {
  display: grid;
}

.flex {
  display: flex;
}

.row-rev {
  flex-direction: row-reverse;
}

.justify-between {
  justify-content: space-between;
}

.align-center {
  align-items: center;
}

.txt-center {
  text-align: center;
}

.pale {
  opacity: 0.6;
  font-weight: 500;
}

.gap_5 {
  gap: .5rem;
}

.gap-1 {
  gap: 1rem;
}

.gap-2 {
  gap: 2rem;
}

.pad-1-2 {
  padding: 1rem 2rem;
}

.pad-2 {
  padding: 2rem;
}

.pad-1 {
  padding: 1rem;
}

.pad-s {
  padding: .75rem 1rem;
}

.pad-xs {
  padding: .5rem .75rem;
}

hr.s {
  margin-inline: -1.5rem;
}

.pb-1 {
  padding-block: 1rem;
}

.pen {
  display: flex;

  &::after {
    content: '\270E';
    transform: rotateY(180deg);
    margin-left: .5rem;
  }
}

.check {
  display: flex;

  &::after {
    content: '\2714';
    margin-left: .5rem;
  }
}

/* 
MAIN BODY ELEMENTS
*/

/* NAV */
#nav {
  grid-area: nav;
  display: grid;
  background-color: var(--nav);
  text-transform: uppercase;
  font-weight: 500;

  & a {
    color: color-mix(in hsl, var(--nav-foreground) 60%, var(--nav) 40%);
    letter-spacing: 1px;
    transition: color 100ms ease-in-out;

    &:hover {
      color: color-mix(in hsl, var(--nav-foreground) 80%, var(--primary) 20%);
    }

    &.active,
    &:active {
      color: var(--nav-foreground);
    }
  }
}


/* MAIN */
section.header {
  background-color: color-mix(in hsl, var(--foreground) 5%, var(--background) 95%);
  padding: 1rem 2rem;
  color: var(--foreground);
}

.section-title {
  font-family: serif;
  font-size: 2.5rem;
  line-height: 2.5rem;
  font-weight: 600;
  color: var(--foreground);
}

/* GLOBAL FORM STYLE */
.stcc-form {
  display: grid;
  width: 100%;
  grid-auto-flow: row;

  &:has(input:invalid, select:invalid) input[type=submit] {
    background-color: var(--border);
    pointer-events: none;
  }

  & .form-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    justify-content: stretch;
    gap: 2rem;
  }

  & .form-element:has(input:required, select:required) label::after {
    content: '*';
    margin-left: .25rem;
    color: var(--accent);
    filter: brightness(2);
  }

  & label {
    display: block;
    font-weight: 500;
    font-size: 14px;
    filter: brightness(0.7);
  }

  & input:not([type=submit]),
  & select,
  & textarea {
    width: 100%;
    padding-block: .25rem;
    padding-left: .25rem;
  }


  &.form-element[data-hint]:has(input:invalid)::after {
    content: attr(data-hint);
    font-size: 14px;
    position: absolute;
  }

  & .form-input-file {
    & .file-standin {
      display: grid;
      justify-items: center;
      align-items: center;
      grid-auto-flow: column;
      padding: .25rem;
      border-radius: 4px;
      background-color: var(--border);
      cursor: pointer;

      &:hover {
        background-color: color-mix(in hsl, var(--border) 75%, transparent);
      }

      & p:empty::before {
        content: "Seleccionar archivo";
      }

      & svg {
        fill: var(--foreground);
        width: 2.5rem;

        &.delete {
          display: none;
          fill: var(--accent)
        }
      }

      &.active {
        & svg.doc {
          display: none;
        }

        & svg.delete {
          display: block;
        }
      }
    }
  }

  & .form-element>.form-select {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 1fr;
    grid-auto-columns: auto;
    margin-block: .25rem;

    select {
      width: 100%;
      padding: .5rem;
      border: 1px solid var(--border);
      border-radius: 0;
      background-color: var(--card);
      color: var(--card-foreground);

      &:invalid {
        border-color: var(--accent);
      }

      &:valid {
        border-color: var(--secondary);
      }
    }
  }


  & .form-element>.form-input {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "before input after";
    align-items: center;
    border: 1px solid transparent;
    border-bottom-color: var(--border);
    background-color: color-mix(in hsl, var(--card) 95%, var(--foreground) 5%);
    margin-block: .25rem;
    padding-inline: .5rem;

    & input,
    & textarea {
      grid-area: input;
      padding: .25rem;
      width: 100%;
      background: transparent;
      border-color: transparent;
    }

    &:has(input:focus, select:focus) {
      border-bottom-color: var(--primary);
    }

    &:has(input:valid, select:valid) {
      /* border-bottom-color: var(--secondary); */

      &::after {
        grid-area: after;
        content: '\2714';
        color: var(--primary);
        justify-self: end;
      }
    }

    &:has(input:invalid, select:invalid) {
      border-color: var(--accent);

      &::after {
        grid-area: after;
        content: '\2718';
        color: var(--accent);
        justify-self: end;
      }
    }
  }


  & .show-pass::before {
    content: 'Ver';
    grid-area: extra;
    cursor: pointer;
    opacity: .7;
    margin-right: .5rem;
  }

  & .show-pass:hover::before {
    opacity: 1;
  }

  & input[type=text]+.show-pass::before {
    text-decoration: line-through 1px;
  }

  & .example {
    opacity: .8;
    font-weight: 300;
  }
}

*[data-before]::before {
  grid-area: before;
  content: attr(data-before);
  opacity: .75;
}


.list-panel {
  display: grid;
  grid-template-areas: "list panel";

  &>.list {
    grid-area: list;
    position: relative;

    & .sticky {
      position: sticky;
    }
  }

  &>.panel {
    grid-area: panel;
    display: grid;
  }

}

.hide-btn {
  position: absolute;
  display: none;
  top: 0;
  right: .75rem;
  color: var(--accent);
  /* padding: .25rem .5rem; */
  /* border: 1px solid var(--accent); */
  /* border-radius: 4px; */
  transition: background-color 200ms ease-in-out;

  &:active {
    background-color: var(--accent);
  }

  &::before {
    content: '\2716';
    font-weight: 300;
    font-size: 1.5rem;
  }
}

.link-list {
  display: grid;
  gap: 1rem;

  & li,
  & a {
    width: fit-content;
    cursor: pointer;
    position: relative;
    font-size: 1.065rem;
    font-weight: 500;
    color: var(--primary);
    text-transform: capitalize;

    &:hover {
      color: color-mix(in hsl, var(--primary) 80%, var(--foreground) 20%);
    }

    &:active {
      color: var(--foreground);
    }

    &.active {
      cursor: default;
      pointer-events: none;
      color: var(--foreground);

      &::after {
        width: 100%;
        transition: width 250ms ease-out;
      }
    }

    &::after {
      content: '';
      background-color: var(--foreground);
      position: absolute;
      bottom: 0;
      left: 0;
      height: 1.5px;
      width: 0;
      transition: width 150ms ease-out;
    }
  }


}

.txt-btn {
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--primary);

  &:hover {
    color: color-mix(in hsl, var(--primary) 80%, var(--primary-foreground) 20%);
  }

  &:active {
    color: var(--foreground);
  }
}

.after-info {
  cursor: pointer;

  &:hover::after {
    filter: brightness(1.5);
  }

  &::after {
    content: '?';
    transform: scale(.5);
    margin-left: .5rem;
    border-radius: 50%;
    padding-inline: .25rem;
    color: var(--background);
    background-color: var(--foreground);
  }
}

.tag {
  font-size: 14px;
  position: relative;
  font-weight: 600;
  z-index: 2;
  width: fit-content;
  background-color: var(--card);
  transform: translateX(.75rem);
}

.tag+.tagged {
  position: relative;
  border: 1.5px solid var(--border);
  border-radius: .5rem;
  padding-block: .5rem;
  padding-inline: .75rem;
  transform: translateY(-8px);
  z-index: 1;

  &:empty::before {
    content: 'Opcional';
    opacity: .7;
  }

  &.invalid {
    border-color: color-mix(in hsl, var(--accent) 60%, transparent);
  }
}

.auto-col {
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

.panel-like {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

.accordion {
  display: grid;
  padding: 1rem;
  grid-template-rows: min-content 0fr;
  grid-template-areas: "acrd-head" "acrd-body";
  transition: grid-template-rows 150ms ease-in;
  border-color: var(--primary);

  & .check {
    display: none;
  }

  &:has(.unknown):not(:has(.invalid)) .check {
    display: block;
  }

  & .acrd-head::before {
    content: '\2713';
    font-size: .75rem;
    font-weight: bolder;
    color: var(--primary-foreground);
    background-color: var(--primary);
    border-radius: 50%;
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
    left: -.625rem;
  }

  &:has(.unknown) {
    border-color: var(--error);

    & .acrd-head::before {
      content: '\26A0';
      background-color: var(--error);
      color: var(--foreground);
    }

  }

  &:has(.invalid) {
    border-color: var(--accent);

    & .acrd-head::before {
      content: '\2717';
      background-color: var(--accent);
      color: var(--accent-foreground);
    }
  }

  &:has(.active) {
    grid-template-rows: min-content 1fr;

    & .acrd-head::after {
      transform: rotate(270deg);
      transition: transform 150ms ease;

    }

    & .acrd-body {
      opacity: 1;
      transition: opacity 200ms 150ms ease-in;
      margin-top: 1rem;
    }
  }

  .acrd-head {
    grid-template-areas: acrd-head;
    display: grid;
    grid-template-columns: auto 1fr auto;
    font-weight: 450;
    align-items: center;
    gap: .5rem;
    cursor: pointer;

    &::after {
      content: '\276F';
      color: var(--accent);
      font-weight: bolder;
      transform: rotate(90deg);
      transition: transform 150ms ease;
    }

    &:hover::after {
      filter: brightness(1.5);
    }
  }

  .acrd-body {
    grid-template-areas: acrd-body;
    overflow: hidden;
    opacity: 0;
  }
}

@media only screen and (max-width: 950px) {
  #nav {
    grid-template-columns: 1fr;
    grid-template-rows: min-content 0fr;
    grid-template-areas: "logo" "links";
    padding: 0;
    gap: 0;
    transition: grid-template-rows 200ms ease-in-out;

    &.active {
      grid-template-rows: min-content 1fr;
    }

    & .nav-menu-btn {
      display: block;
    }

    & #navbar-logo {
      justify-content: space-between;
      padding: .75rem 2rem;
    }

    & #navbar-links {
      display: flex;
      flex-direction: column;
      text-align: center;
      gap: 0;
      justify-content: center;
      overflow: hidden;

      & a {
        margin-block: .5rem;
      }

      &>* {
        border-top: 1px solid color-mix(in hsl, var(--nav-foreground) 30%, transparent 70%);

        &:last-child {
          border-bottom: 1px solid color-mix(in hsl, var(--nav-foreground) 30%, transparent 70%);
        }
      }
    }
  }

  .mobile-only {
    display: initial;
  }

  .stcc-form {
    & .form-row {
      grid-template-columns: auto;
      grid-auto-flow: row;
      grid-auto-rows: auto;
    }
  }

  html:has(.announcement.shown) {
    overflow: hidden;
  }

  .list-panel:not(:has(.page-container)) {
    grid-template-areas: "panel";

    & .list {
      display: none;
    }
  }

  .list-panel:has(.page-container) {
    grid-template-columns: 1fr;
    grid-template-areas: "list";
    padding-inline: 1rem;

    & .list ul.link-list li {
      color: var(--primary);
      pointer-events: all;

      &::after {
        display: none;
      }
    }

    & .panel {
      position: fixed;
      height: 100dvh;
      width: 100%;
      top: 0;
      right: 0;
      z-index: 3;
      overflow-y: scroll;
      overscroll-behavior: contain;
      transform: translateX(100%);
      transition: transform 350ms ease-in-out;

      &:has(.shown) {
        transform: translateX(0);

        @starting-style {
          transform: translateX(100%);
          opacity: 1;
        }
      }

      &>div {
        border-radius: 0;
        transition: border-color 350ms 350ms ease;

        @starting-style {
          opacity: 1;
        }

        &.shown {
          border-color: color-mix(in hsl, var(--primary) 70%, transparent);
          transition: border-color 0ms 350ms ease;
        }
      }
    }
  }


  setion.header {
    padding: 1rem 1.25rem;
  }

  .section-title {
    font-size: 2rem;
  }

  .hide-btn {
    display: block;
  }

  .panel-like {
    display: grid;
    grid-template-columns: 1fr;
  }

  .stack {
    grid-auto-flow: row;
  }

}