/* Albums: folder-manager modal. */

.study-table > tbody > tr > td.td-viewer-icon > .div-icon {
  display: none !important;
}

:root {
  --entelai-albums-z-backdrop: 2147483601;
  --entelai-albums-z-drawer:   2147483602;
  --entelai-albums-bg:         var(--ao-dark-2, #1A232F);
  --entelai-albums-bg-2:       #111827;
  --entelai-albums-fg:         #FFFFFF;
  --entelai-albums-accent:     var(--ao-accent, #0DE4C4);
}

.entelai-albums-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--entelai-albums-bg-2);
}
#entelai-albums-title {
  font-size: 18px;
  font-weight: 700;
  color: #FFFFFF;
}
.entelai-albums-header button {
  background: transparent;
  color: #E5E7EB;
  border: none;
  cursor: pointer;
  font-size: 16px;
  padding: 4px 8px;
}
.entelai-albums-header button:hover {
  background: var(--entelai-albums-bg-2);
  border-radius: 4px;
}

.entelai-albums-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

/* ── Folder manager modal (V2) ─────────────────────────────── */
#entelai-albums-backdrop {
  position: fixed; inset: 0; z-index: var(--entelai-albums-z-backdrop);
  display: none; align-items: center; justify-content: center;
  background: rgba(3, 13, 25, 0.6);
}
#entelai-albums-backdrop[data-open="true"] { display: flex; }
#entelai-albums-modal {
  position: static; transform: none; width: 760px; max-width: calc(100vw - 32px);
  max-height: min(640px, calc(100vh - 48px));
  display: flex; flex-direction: column;
  background: var(--ao-dark-2, #1A232F);
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px;
  color: var(--ao-text, #E2E8F0); font-family: 'Manrope', 'Inter', sans-serif;
}
.entelai-albums-header {           /* reusar clase existente, re-estilar */
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--ao-dark-1, #030D19);
}
#entelai-albums-title { font-size: 18px; font-weight: 700; color: #fff; }
.entelai-albums-body { flex: 1 1 auto; overflow-y: auto; padding: 24px 20px; display: flex; flex-direction: column; gap: 32px; }
.eam-section-title { font-size: 16px; font-weight: 700; color: #fff; margin: 0 0 14px; }
.eam-list { display: flex; flex-direction: column; }
.eam-row { display: flex; align-items: center; justify-content: space-between; padding: 8px; cursor: pointer; }
.eam-list .eam-row:nth-child(odd) { background: var(--ao-dark-1, #030D19); }
.eam-row-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.eam-row-folder svg { display: block; color: #fff; }
.eam-row-name { font-size: 16px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eam-row-actions { display: flex; gap: 8px; }
.eam-act { background: none; border: none; padding: 0; cursor: pointer; color: var(--ao-accent, #0DE4C4); }
.eam-act svg { display: block; }
.eam-act:hover { filter: brightness(1.25); }

/* ── "Carpeta" study-table column cell (FolderColumn in entelai-albums.js) ──
   One accent-colored linked chip per folder the study belongs to. The td
   ellipsizes; each link keeps its icon + name on one line. */
td.eam-cell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eam-cell-link { display: inline-flex; align-items: center; gap: 8px; color: var(--ao-accent, #0DE4C4); text-decoration: none; font-size: 14px; margin-right: 12px; }
.eam-cell-link:hover span:last-child { text-decoration: underline; }
.eam-cell-ic svg { display: block; }
.eam-create-btns { display: flex; gap: 14px; }
.eam-pill {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 24px;
  border: 1px solid var(--ao-accent, #0DE4C4); border-radius: 40px; background: transparent;
  color: var(--ao-accent, #0DE4C4); font: 500 16px 'Manrope', sans-serif;
  text-transform: uppercase; cursor: pointer; white-space: nowrap;
  transition: background .2s, color .2s, box-shadow .2s;
}
.eam-pill:hover, .eam-pill:focus-visible { background: var(--ao-accent, #0DE4C4); color: var(--ao-dark-1, #030D19); box-shadow: 0 0 8px 0 var(--ao-accent, #0DE4C4); outline: none; }
.eam-footer { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-top: 1px solid var(--ao-dark-1, #030D19); }
.eam-cancel { background: none; border: none; padding: 8px 0; color: var(--ao-accent, #0DE4C4); font: 500 16px 'Manrope', sans-serif; text-transform: uppercase; cursor: pointer; }

/* ── Create/rename/smart-editor/delete forms (Task 3) ────────────────────
 * All share the .eam-form shell inside .entelai-albums-body (which already
 * supplies the modal's own padding — no padding duplicated here) and hand
 * their submit/cancel off to the shared renderFooter(view, opts) from
 * Task 2 instead of rendering their own inline action row. */
.eam-form { display: flex; flex-direction: column; gap: 20px; }

.eam-input {
  height: 32px; flex: 1 1 auto; min-width: 0; padding: 0 15px;
  background: var(--ao-dark-1, #030D19); border: 1px solid rgba(255,255,255,0.2);
  border-radius: 64px; color: var(--ao-text, #E2E8F0); font: 400 14px 'Manrope', sans-serif;
}
.eam-input:focus { outline: none; border-color: var(--ao-accent, #0DE4C4); }
.eam-field { display: flex; align-items: center; gap: 8px; width: 100%; }
.eam-field > label { font-size: 16px; color: #fff; white-space: nowrap; }

/* Smart editor's first row: Nombre (grows) + Combinar (intrinsic) + the
 * static "estas reglas:" text, all on one line (wraps only if narrow). */
.eam-row1 {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  color: #fff; font-size: 16px;
}
.eam-row1 > .eam-field { width: auto; }
.eam-field-name { flex: 1 1 220px; }
.eam-field-combine { flex: 0 0 auto; }

.eam-confirm { display: flex; flex-direction: column; gap: 12px; }
.eam-confirm-help {
  color: #94a3b8;
  font-size: 12px;
}
.entelai-albums-row-label { flex: 1; }
.entelai-albums-row-actions {
  display: flex; gap: 4px;
  opacity: 0;
  transition: opacity 120ms;
}
.entelai-albums-row:hover .entelai-albums-row-actions { opacity: 1; }
.entelai-albums-row-actions button {
  background: transparent;
  color: var(--entelai-albums-fg);
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  width: 24px; height: 24px;
  padding: 0;
  font: inherit;
}
.entelai-albums-row-actions button:hover {
  background: rgba(255, 255, 255, 0.06);
}

.eam-rules {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.eam-rule {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
/* Field/operator/value controls share one pill class. Value is always the
 * 3rd child (field, operator, value, delete-button) so it's the one that
 * grows to fill the row; field/operator size to their own content. */
.eam-rule-ctl {
  height: 38px; padding: 0 15px; min-width: 0;
  background: var(--ao-dark-1, #030D19); border: 1px solid rgba(255,255,255,0.2);
  border-radius: 64px; color: var(--ao-text, #E2E8F0); font: 400 14px 'Manrope', sans-serif;
  flex: 0 1 auto;
}
.eam-rule > .eam-rule-ctl:nth-child(3) { flex: 1 1 120px; }
/* Compound value controls (date-range, reportStatus checkbox group) can't be
 * a fixed-height single-line pill — they wrap their own inner controls, so
 * the pill grows instead of clipping them. Higher-specificity compound
 * selector so this reliably wins over the base .eam-rule-ctl rule above
 * regardless of stylesheet order. */
.eam-rule-ctl.eam-rule-range { display: inline-flex; gap: 4px; align-items: center; }
.eam-rule-range input[type="date"] {
  background: transparent; border: none; color: inherit; font: inherit;
  padding: 0; min-width: 0;
}
.eam-rule-ctl.eam-status-group {
  height: auto; min-height: 38px; padding: 8px 15px;
  display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center;
}
.eam-status-check {
  display: inline-flex; gap: 4px; align-items: center;
  font-size: 12px; color: var(--ao-text, #E2E8F0);
  white-space: nowrap; cursor: pointer;
}
.eam-status-check input { flex: 0 0 auto; }

/* Native selects reskinned as pills: drop the browser chrome and draw our
 * own chevron (keyboard-arrow-down.svg, extracted) as a background-image so
 * no extra DOM/JS is needed per select (Step 2's "lo que menos JS toque").
 * The fill is a literal hex, not var(--ao-text, ...): a data-URI is an
 * opaque external resource to the page, so CSS custom properties can't be
 * resolved inside it — the literal still matches --ao-text's value. */
select.eam-input,
select.eam-rule-ctl {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8.00003 9.98333C7.91114 9.98333 7.82781 9.96944 7.75003 9.94166C7.67225 9.91388 7.60003 9.86666 7.53337 9.79999L4.4667 6.73333C4.34448 6.6111 4.28337 6.45555 4.28337 6.26666C4.28337 6.07777 4.34448 5.92221 4.4667 5.79999C4.58892 5.67777 4.74448 5.61666 4.93337 5.61666C5.12225 5.61666 5.27781 5.67777 5.40003 5.79999L8.00003 8.39999L10.6 5.79999C10.7223 5.67777 10.8778 5.61666 11.0667 5.61666C11.2556 5.61666 11.4111 5.67777 11.5334 5.79999C11.6556 5.92221 11.7167 6.07777 11.7167 6.26666C11.7167 6.45555 11.6556 6.6111 11.5334 6.73333L8.4667 9.79999C8.40003 9.86666 8.32781 9.91388 8.25003 9.94166C8.17225 9.96944 8.08892 9.98333 8.00003 9.98333Z' fill='%23E2E8F0'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px 14px;
}

.eam-rule-del {
  background: none; border: none; padding: 0; cursor: pointer; flex: 0 0 auto;
  color: var(--ao-accent, #0DE4C4);
}
.eam-rule-del svg { display: block; width: 20px; height: 20px; }
.eam-rule-del:hover { filter: brightness(1.25); }

.eam-newrule {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-end;
  background: none; border: none; padding: 0;
  color: var(--ao-accent, #0DE4C4); font: 500 14px 'Manrope', sans-serif;
  text-transform: uppercase; cursor: pointer;
}
.eam-newrule svg { display: block; width: 20px; height: 20px; }
.eam-newrule:hover { filter: brightness(1.15); }

.eam-count-line {
  font-size: 14px;
  color: var(--ao-text, #E2E8F0);
}
.eam-count-value {
  color: var(--ao-text, #E2E8F0);
  font-weight: 600;
}

/* Hide rows that aren't in the active album. ActivationFilter sets/clears
 * the attribute. Use !important to outrank any inline display styling
 * Vue might apply during reactive re-render. */
.study-table > tbody > tr[data-album-hidden="true"] {
  display: none !important;
}

/* Siempre en flujo para que la tabla no se mueva al seleccionar: el toggle
 * es visibility, no display. min-height fija los 44px porque el alto real
 * depende de los permisos del rol (sin iconos el contenido da 38px) y el
 * espacio reservado tiene que ser constante. pointer-events:none en reposo
 * para no comerle 56px de superficie de arranque al marquee. */
#entelai-selection-bar {
  display: flex;
  visibility: hidden;
  pointer-events: none;
  min-height: 44px;
  width: 95%;
  margin: 0 auto 12px;
  align-items: center;
  gap: 24px;
  padding: 8px 12px;
  border-radius: 50px;
  background: #1A232F;
  color: #E2E8F0;
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 14px;
  box-sizing: border-box;
}
#entelai-selection-bar[data-visible="true"] {
  visibility: visible;
  pointer-events: auto;
}
#entelai-selection-bar .esb-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
#entelai-selection-bar .esb-close {
  background: none;
  border: none;
  padding: 0;
  color: #FFFFFF;
  font-size: 22px;
  line-height: 22px;
  cursor: pointer;
}
#entelai-selection-bar .esb-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
#entelai-selection-bar .esb-act {
  background: none;
  border: none;
  padding: 4px;
  margin: 0;
  border-radius: 6px;
  color: var(--entelai-albums-accent);
  cursor: pointer;
  display: inline-flex;
  transition: box-shadow 0.2s;
}
#entelai-selection-bar .esb-act svg { width: 20px; height: 20px; }
#entelai-selection-bar .esb-act:hover { box-shadow: 0 0 8px 0 var(--entelai-albums-accent); }
#entelai-selection-bar .esb-close:hover { color: var(--entelai-albums-accent); }

/* ── Bulk send-to-PACS progress panel (SendProgress, entelai-albums.js) ──
 * Bottom-left, independent of entelai-upload.js's .eu-widget (bottom-right)
 * so both can be on screen at once — that coexistence is the reason this
 * is its own panel instead of a second state on the upload widget. Reuses
 * .eu-widget/.eu-w-header/.eu-w-title/.eu-w-pct/.eu-aggregate/.eu-agg-row1/
 * .eu-agg-count/.eu-agg-bar/.eu-agg-bar-fill/.eu-agg-pct from
 * entelai-upload.css (loaded on every portal page regardless of this file);
 * this rule block only repositions/restyles on top of that. Deliberate
 * cross-file class coupling, not an accident. */
.esp-widget { left: 16px; right: auto; }
/* .eu-w-header's grid (1fr auto auto auto) is sized for the upload widget's
 * 4 children (title/pct/toggle/close). This panel only ever renders 2
 * (title/pct — no toggle or close, see entelai-albums.js), so without this
 * override the 2 unused trailing "auto" tracks still each eat a `gap`,
 * leaving dead space to the right of the pct. */
.esp-widget .eu-w-header { grid-template-columns: 1fr auto; }
.esp-widget.esp-error .eu-agg-bar-fill { background: var(--ao-error, #FF595C); }

.study-table > tbody > tr.eai-row-selected > td {
  background-color: rgba(13, 228, 196, 0.2) !important;
}

/* ── Multi-select: marquee (rubber-band) rectangle ─────────────────────────
   Fixed-position overlay drawn in viewport coords while dragging from an empty
   area. pointer-events:none so it never eats the mouse events driving it; sits
   below the drawer/tab (z ~2147483600) but above the table. */
.eai-marquee {
  position: fixed;
  z-index: 2147483590;
  border: 1px solid var(--entelai-albums-accent);
  background: rgba(13, 228, 196, 0.15);
  pointer-events: none;
  box-sizing: border-box;
}
/* While a marquee drag is live, kill text selection across the page. */
body.eai-marquee-active {
  user-select: none;
  -webkit-user-select: none;
}

.entelai-albums-ctx {
  position: fixed;
  list-style: none;
  margin: 0; padding: 0;
  background: #1A232F;
  color: #E5E7EB;
  border: none;
  border-radius: 6px;
  min-width: 200px;
  z-index: 2147483640;
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.35);
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 14px;
  overflow: hidden;
}
.entelai-albums-ctx li {
  padding: 11px 13px;
  cursor: pointer;
}
.entelai-albums-ctx li:hover { background: rgba(13, 228, 196, 0.12); }
.entelai-albums-ctx li.sep {
  padding: 0;
  height: 1px;
  background: #030D19;
  margin: 0;
  cursor: default;
}
.entelai-albums-ctx li.sep:hover { background: #030D19; }

.entelai-albums-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 16px;
  background: rgba(20, 184, 166, 0.1);
  color: var(--entelai-albums-fg);
  font-size: 13px;
  border-radius: 6px;
  margin: 8px 0;
}
.entelai-albums-banner button {
  flex: 0 0 auto;
  background: transparent;
  color: var(--entelai-albums-accent);
  border: 1px solid var(--entelai-albums-accent);
  border-radius: 40px;
  padding: 4px 14px;
  font: inherit;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.entelai-albums-banner button:hover {
  background: var(--entelai-albums-accent);
  color: var(--ao-dark-1, #030D19);
  box-shadow: 0 0 8px 0 var(--entelai-albums-accent);
}

#entelai-breadcrumb {
  display: flex; align-items: center; gap: 2px;
  margin: 0 0 12px 48px;
  font-family: Manrope, sans-serif; font-weight: 700; font-size: 24px; line-height: 1;
  color: #fff;
}
#entelai-breadcrumb .ebc-seg {
  appearance: none; -webkit-appearance: none; background: none; border: none;
  padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer;
  transition: color .12s ease;
}
#entelai-breadcrumb .ebc-seg.ebc-link:hover { color: var(--ao-accent, #0DE4C4); }
#entelai-breadcrumb .ebc-sep {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; color: #fff; flex: 0 0 auto;
}
#entelai-breadcrumb .ebc-sep svg { width: 24px; height: 24px; display: block; }
#entelai-breadcrumb .ebc-current { color: #fff; }

/* Active-filter chips: read-only, sit under the breadcrumb on its left margin.
   The breadcrumb's own 12px bottom margin is the gap between the two rows. */
#entelai-active-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: -4px 0 12px 48px;
  font-family: Manrope, sans-serif; font-size: 12px; line-height: 1;
}
#entelai-active-filters .eaf-chip {
  display: inline-flex; align-items: baseline; gap: 4px;
  padding: 5px 10px; border-radius: 40px;
  background: var(--ao-dark-1, #030D19);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--ao-text, #E2E8F0);
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
/* Smart-folder rules vs. search terms — accent border/key tells them apart. */
#entelai-active-filters .eaf-chip-album {
  border-color: var(--ao-accent-2, #0B8F7B);
}
#entelai-active-filters .eaf-chip-album .eaf-k { color: var(--ao-accent, #0DE4C4); }
#entelai-active-filters .eaf-k { font-weight: 700; opacity: .8; }
#entelai-active-filters .eaf-v { font-weight: 500; }