:root {
  --iconSize: 3.5rem;
  --br: 0.5rem;
  --br_w: 1.5rem;
  --white: hsl(0, 0%, 100%);
  --white_off: hsl(0, 0%, 95%);
  --black: hsl(0, 0%, 0%);
  --black_off: hsl(0, 0%, 5%);
  --cyan: cyan;
  --cyan_t: rgba(140, 253, 234, 0.733);
  --cyan_st: rgba(140, 250, 230, 0.85);
  --color_base: var(--cyan_t);
  --border_color: var(--cyan_st);
}

[color-scheme=dark] {
  --bg: var(--black);
  --tc: var(--white_off);
  --bg_t: rgba(34, 34, 34, 0.8);
  --text_color: var(--white_off);
  --text_color_contrast: var(--black_off);
}

[color-scheme=light] {
  --bg: var(--white);
  --tc: var(--black_off);
  --bg_t: rgba(235, 235, 235, 0.6);
  --text_color: var(--black_off);
  --text_color_contrast: var(--white_off);
}

:root {
  font-size: 12px;
  letter-spacing: 0.15rem;
  scroll-behavior: smooth;
}

*,
*::after,
*::before,
* *,
* *::after,
* *::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Roboto", sans-serif;
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: var(--text_color);
}

BODY {
  width: 100%;
  min-height: 100svh;
  background: var(--bg);
  color: var(--tc);
}

IMG {
  display: inline-block;
  height: 100%;
  width: auto;
  -o-object-fit: cover;
     object-fit: cover;
}

A,
SPAN {
  display: block;
}

A {
  background: none;
  text-decoration: none;
  color: inherit;
}

A:visited,
A:focus,
A:active {
  color: inherit;
}

H1 {
  font-size: 1.6rem;
  font-weight: 600;
}

h2 {
  font-size: 1.4rem;
  font-weight: 600;
}

UL {
  list-style: none;
}

INPUT {
  background: none;
  border: none;
}

BUTTON {
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  fill: var(--tc);
}
BUTTON:disabled {
  opacity: 20%;
}

SVG {
  width: 100%;
  height: 100%;
}

SELECT {
  background: var(--bg_t);
  border: solid var(--text_color) 1px;
  padding: 1rem 2rem;
}

OPTION {
  background: var(--bg_t);
}
OPTION:checked {
  background: darkslateblue;
}
OPTION:hover {
  background: var(--color_base);
}

.data_display {
  font-size: 2rem;
}

[submenu-btn] {
  position: relative;
}
[submenu-btn] [count] {
  position: absolute;
  bottom: -2rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color_base);
  color: var(--white_off);
  font-size: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 2rem;
  border-radius: var(--br);
}

.basic_btn {
  border-radius: var(--br);
  background: var(--bg_t);
  padding: 0.5rem 2rem;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.close_btn {
  right: 0;
  top: 0;
  height: 2rem;
  width: 2rem;
}

.qr_icon {
  background: white;
  max-width: 20rem;
}

[modal=alert] {
  width: 95%;
  max-width: 600px;
}

[modal=qr] {
  width: -moz-fit-content;
  width: fit-content;
}

.float_btn {
  position: absolute;
  border-radius: var(--br);
  background: var(--bg_t);
  padding: 1rem;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--iconSize1rem);
  height: var(--iconSize1rem);
}

.navs_container {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
}

.nav {
  width: 100%;
  background: var(--bg_t);
}

.nav_menu {
  padding: 1rem 2rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.nav_menu BUTTON:not([search-btn]) {
  background: var(--bg_t);
  border-radius: var(--br);
}
.nav_menu .menu_control {
  display: flex;
  justify-content: center;
  align-items: center;
}

.menu_control {
  width: -moz-fit-content;
  width: fit-content;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

.menu_container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  position: absolute;
  top: calc(100% + 1rem);
}

.icon_container {
  width: var(--iconSize);
  height: var(--iconSize);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem;
}

.window {
  flex-direction: column;
  align-items: center;
}

.form {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.input_control {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg_t);
  padding: 0 1rem;
  border-radius: var(--br);
  width: 100%;
  max-width: 600px;
}
.input_control BUTTON {
  background: none;
}

.img_holder {
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  width: 15rem;
  height: 15rem;
}
.img_holder IMG {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: var(--br);
  overflow: hidden;
  background: var(--bg_t);
  width: 100%;
  max-width: 30rem;
  padding: 1rem 2rem;
  gap: 1rem;
}
.card H2,
.card p {
  text-align: center;
}
.card H2 SPAN,
.card p SPAN {
  color: var(--color_base);
}
.card IMG {
  max-width: 15rem;
  border-radius: var(--br);
}
.card .card_content {
  height: 100%;
  padding: 0 0 0 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}
.card .card_content .editorial_image {
  width: 100%;
}
.card .card_content .editorial_image IMG {
  float: right;
  height: 2rem;
}
.card {
  height: -moz-fit-content;
  height: fit-content;
}

.edition_card {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  height: 22rem;
}
.edition_card .save_btn {
  position: absolute;
  top: 1rem;
  left: 1rem;
}
.edition_card .save_btn SVG {
  fill: var(--white_off);
}

.pills_container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: 0.5rem;
}

.pill {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  max-width: 10rem;
}
.pill IMG {
  max-width: 9rem;
  border-radius: var(--br);
}
.pill .pill_content {
  height: 100%;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

.edition_result {
  width: 100%;
  max-width: 40rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.edition_result h2 {
  color: var(--color_base);
}

.btn {
  width: 100%;
  padding: 1rem;
  background: var(--color_base);
  border-radius: var(--br);
}

.btns_container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.submenu_btns_container {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  border-top: solid 2px var(--color_base);
  border-bottom: solid 2px var(--color_base);
}
.submenu_btns_container BUTTON {
  padding: 1rem 0;
  width: 100%;
}

.content {
  padding: 1rem 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1rem;
}
.content h1 {
  width: 100%;
  text-align: center;
}

.cards_container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
  width: 100%;
  padding-top: 2rem;
}

DIALOG {
  top: 8rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  border-radius: var(--br);
  background: var(--bg_t);
  padding: 0.5rem 1rem;
}

dialog::backdrop {
  background-color: var(--bg_t);
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
}

MAIN {
  height: 100vh;
}

SECTION .section_content {
  --navHeight: 10rem;
  margin-top: var(--navHeight);
}

.section_content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  height: -moz-fit-content;
  height: fit-content;
}

.inventario .data_display SVG {
  fill: var(--color_base);
}
.inventario .data_display .result {
  color: var(--color_base);
}

.img_container {
  position: relative;
  height: 40rem;
  max-height: 50vh;
  width: 100%;
  overflow: hidden;
}
.img_container IMG {
  position: absolute;
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

SPAN {
  display: inline-block;
}

.float {
  position: absolute;
}

[visible] {
  transition: opacity 500ms ease-in-out;
}

[show=false] {
  display: none !important;
}

[visible=false] {
  opacity: 0 !important;
}

[show=true] {
  display: flex !important;
}

[visible=true] {
  opacity: 100% !important;
}

.reader {
  width: 100%;
}

[btn-active=true] {
  background: var(--color_base);
}

[btn-active=false] {
  background: var(--bg);
}

[accent=bad] {
  border: crimson 2px solid;
  background: rgba(245, 33, 75, 0.4);
}

[accent=bad] {
  --btnBG: hsl(0, 100%, 67%, 0.7);
  --btnText: hsl(0, 100%, 67%);
  --btnBorder: solid 1px hsl(0, 100%, 67%);
}

[accent=good] {
  --btnBG: hsl(166, 100%, 37%, 0.7);
  --btnText: hsl(166, 100%, 37%);
  --btnBorder: solid 1px hsl(166, 100%, 37%);
}

[accent=warning] {
  --btnBG: hsl(43, 100%, 51%, 0.7);
  --btnText: hsl(43, 100%, 51%);
  --btnBorder: solid 1px hsl(43, 100%, 51%);
}

[accent=basic] {
  --btnBG: hsl(192, 70%, 43%, 0.7);
  --btnText: hsl(192, 70%, 43%);
  --btnBorder: solid 1px hsl(192, 70%, 43%);
}

[accent] {
  border: var(--btnBorder);
  background: var(--btnBG);
  color: var(--btnText);
}

td {
  padding: 0.5rem 1rem;
}