/* Manage dashboard: cases shelf + alphabet index.
   Uses the same .bib-* shelf visuals (biblioteca-shelf.css) but adds a right-side alphabet UI. */

[data-md-shelf] .bib-book-ico { display: none !important; }

.md-dashboard-title-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.md-dashboard-settings {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, color .12s ease;
}
.md-dashboard-settings:hover {
  transform: translateY(-1px);
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

/* Layout tuning: give the alphabet shelf a bit more room and separate it from the folders panel. */
[data-md-shelf] .bib-shelf-layout {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
}
@media (max-width: 980px) {
  [data-md-shelf] .bib-shelf-layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* iPad/tablet baseline (portrait + landscape): stack shelf and cases panel
   without touching desktop-large or small-mobile behavior. */
@media (min-width: 769px) and (max-width: 1180px) {
  [data-md-shelf] .bib-shelf-layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .md-cases {
    min-height: 0;
  }

  .md-cases-body {
    max-height: 320px;
    padding-right: 2px;
  }
}

/* Settings button (top-left of dashboard shelf widget). Keep it icon-only (no box). */
[data-md-shelf] .bib-shelf-head {
  align-items: center;
}
[data-md-shelf] .bib-shelf-settings {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 0;
  background: transparent;
  color: rgba(0,0,0,.62);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, opacity .12s ease;
  box-shadow: none;
  outline: none;
}
[data-theme="dark"] [data-md-shelf] .bib-shelf-settings {
  color: rgba(255,255,255,.82);
}
[data-md-shelf] .bib-shelf-settings:hover {
  transform: translateY(-1px);
  background: rgba(0,0,0,.05);
}
[data-theme="dark"] [data-md-shelf] .bib-shelf-settings:hover {
  background: rgba(255,255,255,.08);
}

/* Make the "books" look like binders (front label + hole) */
[data-md-shelf] .bib-book {
  border-radius: 6px;
  /* Dark "AMPO" spine with subtle texture */
  background:
    linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,0) 18%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.03), rgba(255,255,255,.03) 2px, rgba(0,0,0,0) 6px),
    linear-gradient(180deg, var(--md-amp-bg, #2f3136), var(--md-amp-bg2, #1f2023));
  border: 1px solid rgba(255,255,255,.10);
  transform-origin: 30% 100%;
}
[data-theme="dark"] [data-md-shelf] .bib-book {
  /* keep the AMPO look also in dark mode */
  background:
    linear-gradient(90deg, rgba(255,255,255,.06), rgba(0,0,0,0) 18%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.04), rgba(255,255,255,.04) 2px, rgba(0,0,0,0) 6px),
    linear-gradient(180deg, var(--md-amp-bg, #2f3136), var(--md-amp-bg2, #1f2023));
  border-color: rgba(255,255,255,.12);
}

[data-md-shelf] .bib-book::before {
  opacity: .26;
  background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,0) 28%);
}

/* "Pick up" hover: a bit more lift than the default shelf hover. */
[data-md-shelf] .bib-book:hover {
  transform: translateY(-7px);
}
[data-md-shelf] .bib-book:active {
  transform: translateY(-3px) scale(.99);
}

[data-md-shelf] .md-binder-face {
  position: absolute;
  inset: 8px 8px 8px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

[data-md-shelf] .md-binder-label {
  width: 100%;
  height: 72%;
  margin-top: 4px;
  border-radius: 6px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 10px 25px rgba(0,0,0,.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 6px 10px 6px;
}
[data-theme="dark"] [data-md-shelf] .md-binder-label {
  background: rgba(255,255,255,.92);
  border-color: rgba(0,0,0,.12);
}

[data-md-shelf] .md-binder-text {
  font-weight: 950;
  letter-spacing: .06em;
  font-size: 12px;
  color: rgba(0,0,0,.70);
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

[data-md-shelf] .md-binder-lines {
  width: 100%;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  opacity: .55;
}
[data-md-shelf] .md-binder-lines span {
  display: block;
  height: 1px;
  background: rgba(0,0,0,.22);
  border-radius: 999px;
}

[data-md-shelf] .md-binder-barcode {
  width: 82%;
  height: 14px;
  border-radius: 4px;
  margin-top: 10px;
  background:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.85) 0px, rgba(0,0,0,.85) 1px,
      rgba(0,0,0,0) 1px, rgba(0,0,0,0) 3px);
  opacity: .55;
}

[data-md-shelf] .md-binder-mark {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  margin-top: auto;
  background:
    radial-gradient(circle at 30% 30%, rgba(217,122,122,.55), rgba(217,122,122,0) 55%),
    radial-gradient(circle at 70% 40%, rgba(176,141,201,.55), rgba(176,141,201,0) 55%),
    radial-gradient(circle at 45% 75%, rgba(153,201,171,.55), rgba(153,201,171,0) 55%);
  opacity: .85;
}

[data-md-shelf] .md-binder-hole {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.30);
  box-shadow: inset 0 2px 8px rgba(0,0,0,.55);
  margin-bottom: 2px;
}

[data-md-shelf] .md-binder-hole::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  margin: 3px auto 0;
  background: rgba(0,0,0,.45);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.12);
}

[data-md-shelf] .bib-book.md-v0 { --md-amp-bg: #2b2f36; --md-amp-bg2: #1f2126; }
[data-md-shelf] .bib-book.md-v1 { --md-amp-bg: #2e2a34; --md-amp-bg2: #1f1b25; }
[data-md-shelf] .bib-book.md-v2 { --md-amp-bg: #2a3134; --md-amp-bg2: #1a2022; }
[data-md-shelf] .bib-book.md-v3 { --md-amp-bg: #34312a; --md-amp-bg2: #242118; }
[data-md-shelf] .bib-book.md-v4 { --md-amp-bg: #2f3430; --md-amp-bg2: #20241f; }
[data-md-shelf] .bib-book.md-v5 { --md-amp-bg: #2c2c31; --md-amp-bg2: #1c1d21; }

[data-md-shelf] .bib-book.is-disabled {
  opacity: .35;
  cursor: default;
  box-shadow: var(--bib-book-shadow);
}

[data-md-shelf] .bib-book.is-disabled:hover {
  transform: none;
  border-color: rgba(0,0,0,.05);
  box-shadow: var(--bib-book-shadow);
}

[data-md-shelf] .bib-book.is-active {
  border-color: rgba(0,0,0,.14);
  box-shadow: 0 22px 60px rgba(0,0,0,.18);
}
[data-theme="dark"] [data-md-shelf] .bib-book.is-active {
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 28px 80px rgba(0,0,0,.60);
}

/* Two-floor shelf stack (top row + middle plank + bottom row + bottom plank). */
[data-md-shelf] .md-shelf-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Each level is a single row of 13 letters on desktop. */
[data-md-shelf] .md-books-row.bib-shelf-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 0;
  align-items: end;
  padding-top: 10px; /* prevent top clipping */
  padding-bottom: 0;
  overflow: visible;
  min-height: 166px; /* slightly above binder height */
}

@media (max-width: 1100px) {
  [data-md-shelf] .md-books-row.bib-shelf-row { min-height: 166px; }
}

/* Disable the base scrollbar visuals for these grid rows. */
[data-md-shelf] .md-books-row.bib-shelf-row::-webkit-scrollbar { height: 0; width: 0; }

[data-md-shelf] .md-plank {
  margin-top: 10px;
}

[data-md-shelf] .md-plank--mid {
  margin-top: 8px;
}

/* Right-side cases list */
.md-cases {
  height: 100%;
  min-height: 170px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.md-cases--welcome {
  /* Give the welcome copy some breathing room vs the shelf. */
  padding-left: 14px;
  padding-top: 18px;
}

.md-cases--welcome .md-cases-head {
  /* Center-ish vertically within the right column */
  margin-top: 12px;
}

.md-cases--welcome .md-cases-body {
  margin-top: 14px;
}

/* Desktop-only welcome background image behind the welcome copy.
   Use pseudo-elements so opacity affects only the image, not the text. */
@media (min-width: 992px) {
  .md-cases--welcome {
    --md-hero-panel-w: 46%;
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    /* Reserve space so the hero panel never overlaps the text. */
    padding-right: calc(var(--md-hero-panel-w) + 22px);
  }

  /* Make the welcome text column narrower so the hero can sit closer without overlapping. */
  .md-cases--welcome .md-cases-head > div,
  .md-cases--welcome .md-cases-body {
    max-width: 360px;
  }

  /* Ensure text always renders above the hero image panel. */
  .md-cases--welcome .md-cases-head,
  .md-cases--welcome .md-cases-body {
    position: relative;
    z-index: 1;
  }

	  .md-cases--welcome::before {
	    content: "";
	    position: absolute;
	    top: 0;
	    right: 0;
	    bottom: 0;
	    /* Constrain hero image to the right side so it never runs under the text. */
	    width: var(--md-hero-panel-w);
	    /* Full-color image. No opacity, no filters. */
	    background-repeat: no-repeat;
	    /* Size primarily by height; if it overflows in width, crop only on the RIGHT side. */
	    background-position: left bottom;
	    background-size: auto 92%;
	    background-image: var(--md-hero-url, url("../img/misc/planta_03.png"));
	    pointer-events: none;
	    z-index: 0;
	  }

}

.md-cases--welcome .md-cases-title {
  font-size: 28px;
  line-height: 1.1;
}

.md-cases--welcome .md-cases-sub {
  font-size: 18px;
  line-height: 1.35;
  font-weight: 500;
  color: var(--text-secondary);
}

.md-cases--welcome .md-cases-body {
  max-height: none;
  overflow: visible;
}

.md-cases-cta {
  width: fit-content;
}

.md-cases-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.md-cases-title {
  font-weight: 950;
  font-size: 22px;
  color: var(--text-primary);
  line-height: 1.1;
}

.md-cases-sub {
  margin-top: 6px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
}

.md-cases-search {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-secondary);
  max-width: 420px;
}
.md-cases-search i {
  font-size: 14px;
  color: var(--text-tertiary);
}
.md-cases-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 700;
}
.md-cases-search input::placeholder {
  color: var(--text-tertiary);
  font-weight: 600;
}
.md-cases-search-clear {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.md-cases-search-clear:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.md-cases-sub-link {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  margin-left: 6px;
}

.md-cases-link {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.md-cases-body {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 480px;
  overflow: auto;
  padding-right: 6px;
}

/* Tablet/mobile: show all folders (no internal scroll). */
@media (max-width: 1180px) {
  .md-cases-body {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
  .md-cases:not(.md-cases--welcome) .md-cases-body {
    padding-right: 0;
  }
}

/* When showing actual cases (not the welcome), render as a folder grid (2 columns on desktop). */
.md-cases:not(.md-cases--welcome) .md-cases-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, max-content));
  gap: 8px;
  align-content: start;
  justify-content: flex-start;
  padding-right: 6px;
}

.md-cases-empty,
.md-cases-loading {
  color: var(--text-tertiary);
  font-size: 12px;
  padding: 10px 2px;
  font-weight: 700;
}

.md-case-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  /* Folder "top view" using an actual PNG asset */
  padding: 18px 18px 14px 22px;
  border-radius: 14px;
  text-decoration: none;
  transition: transform .12s ease;
  position: relative;
  overflow: hidden;
  width: 130px;
  min-height: 92px;
  /* Text palette kept dark for readability on the yellow folder */
  --md-folder-text: rgba(0,0,0,.88);
  --md-folder-sub: rgba(0,0,0,.68);
  background: transparent;
}
.md-case-item:hover {
  transform: translateY(-2px);
}

.md-case-item::before {
  /* Folder PNG */
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/folders/folder01.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  opacity: 0.88;
  pointer-events: none;
  z-index: 0;
}

.md-case-item::after {
  content: none;
}

.md-case-item > * {
  position: relative;
  z-index: 1;
}

.md-case-main { min-width: 0; }
.md-case-title {
  color: var(--md-folder-text);
  font-weight: 900;
  font-size: 11px;
  line-height: 1.12;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.md-case-meta {
  margin-top: 3px;
  color: rgba(160, 32, 32, .78);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.12;
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
}
.md-case-meta-dot {
  opacity: .55;
}
.md-case-meta-item--due {
  font-weight: 950;
}

.md-case-item i {
  color: rgba(0,0,0,.62);
  font-size: 13px;
  flex: 0 0 auto;
}

.md-alpha {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 6px;
}

.md-alpha-title {
  font-weight: 950;
  font-size: 16px;
  color: var(--text-primary);
}

.md-alpha-sub {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
}

.md-alpha-grid {
  display: grid;
  grid-template-columns: repeat(13, minmax(0, 1fr));
  gap: 8px;
  margin-top: 6px;
}

@media (max-width: 980px) {
  .md-alpha-grid {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
}

.md-alpha-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-weight: 900;
  text-decoration: none;
  user-select: none;
  transition: transform .12s ease, background .18s ease, border-color .18s ease;
}

.md-alpha-letter:hover {
  background: var(--bg-tertiary);
  transform: translateY(-1px);
}

.md-alpha-letter.is-disabled {
  opacity: .35;
  pointer-events: none;
}