/* ════════════════════════════════════════════════════════════
   style-media.css — Custom Media Player + YouTube + Lightbox
   ════════════════════════════════════════════════════════════ */

:root {
  --cmp-bg:      #0e1520;
  --cmp-bar-h:   38px;
  --cmp-accent:  var(--accent, #2255a0);
  --cmp-text:    #c8d3e0;
  --cmp-dim:     rgba(200, 211, 224, 0.50);
  --cmp-track:   rgba(158, 170, 187, 0.22);
  --cmp-buf:     rgba(158, 170, 187, 0.38);
  --cmp-radius:  2px;
}


/* ══════════════════════════════════════════════════════════
   1. VIDEO WRAPPER
   ══════════════════════════════════════════════════════════ */

.cmp-video-wrap {
  position: relative;
  display: block;
  background: #000;
  border: 2px solid var(--border-strong);
  border-bottom: 3px solid var(--cmp-accent);
  border-radius: var(--cmp-radius);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(34, 85, 160, 0.14);
  line-height: 0;
  max-width: 100%;
}

.cmp-video-wrap:fullscreen,
.cmp-video-wrap:-webkit-full-screen {
  border: none; border-radius: 0; box-shadow: none;
  width: 100vw; height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: #000;
  max-width: none !important; max-height: none !important;
}

.cmp-video-wrap:fullscreen video,
.cmp-video-wrap:-webkit-full-screen video {
  width: 100% !important;
  height: calc(100vh - var(--cmp-bar-h)) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain;
}

.cmp-video-wrap:fullscreen .cmp-overlay,
.cmp-video-wrap:-webkit-full-screen .cmp-overlay {
  /* En fullscreen el overlay cubre todo menos la barra */
  inset: 0 0 var(--cmp-bar-h) 0;
}

.cmp-video-wrap video {
  display: block;
  width: 100%;
  height: auto;
  cursor: pointer;
  max-height: none;
  max-width: 100%;
  object-fit: contain;
}

/* Overlay de play */
.cmp-overlay {
  position: absolute;
  inset: 0 0 var(--cmp-bar-h) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
  transition: opacity 160ms;
  cursor: pointer;
}

.cmp-overlay-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(14, 21, 32, 0.70);
  border: 2px solid rgba(200, 211, 224, 0.30);
  display: flex; align-items: center; justify-content: center;
  color: #e0e8f4;
  transition: background 140ms, transform 140ms;
  backdrop-filter: blur(3px);
}
.cmp-overlay-icon svg { width: 24px; height: 24px; display: block; margin-left: 3px; }
.cmp-overlay:hover .cmp-overlay-icon {
  background: var(--cmp-accent);
  transform: scale(1.08);
  border-color: var(--cmp-accent);
}


/* ══════════════════════════════════════════════════════════
   2. BARRA DE CONTROLES
   ══════════════════════════════════════════════════════════ */

.cmp-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: var(--cmp-bar-h);
  background: var(--cmp-bg);
  border-top: 1px solid rgba(34, 85, 160, 0.30);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  transform: translateY(100%);
  transition: transform 200ms ease;
  z-index: 10;
  line-height: 1;
  box-sizing: border-box;
}
.cmp-bar.cmp-bar-visible { transform: translateY(0); }

/* Botones */
.cmp-btn {
  background: transparent; border: none;
  color: var(--cmp-text); cursor: pointer;
  padding: 0; width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; border-radius: 3px;
  transition: color 120ms, background 120ms;
}
.cmp-btn svg { width: 16px; height: 16px; display: block; }
.cmp-btn:hover { color: #fff; background: rgba(255,255,255,0.10); }
.cmp-play svg { margin-left: 1px; }

/* Tiempo */
.cmp-time, .cmp-dur, .cmp-time-sep {
  font-family: var(--mono, monospace);
  font-size: 11px; color: var(--cmp-text);
  white-space: nowrap; flex-shrink: 0; letter-spacing: 0.02em;
}
.cmp-time-sep { color: var(--cmp-dim); margin: 0 1px; }
.cmp-dur      { color: var(--cmp-dim); }

/* Barra de progreso */
.cmp-progress {
  flex: 1;
  position: relative;
  height: 4px;
  background: var(--cmp-track);
  cursor: pointer;
  min-width: 40px;
  align-self: center;
  border-radius: 0;
}
.cmp-progress:hover { height: 6px; }

.cmp-progress-buf {
  position: absolute; left: 0; top: 0; height: 100%;
  background: var(--cmp-buf); pointer-events: none;
  transition: width 300ms linear; width: 0%;
}
.cmp-progress-fill {
  position: absolute; left: 0; top: 0; height: 100%;
  background: var(--cmp-accent); pointer-events: none; width: 0%;
}
/* Thumb: centrado verticalmente con top+transform, sin margin-top */
.cmp-progress-thumb {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%);
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--cmp-accent);
  pointer-events: none;
  box-shadow: 0 0 0 2px rgba(34,85,160,0.25);
  opacity: 0;
  transition: opacity 140ms;
}
.cmp-progress:hover .cmp-progress-thumb { opacity: 1; }

/* ── Slider de volumen ──────────────────────────────────────────
   Truco: damos al input una altura igual al thumb (12px) y
   dibujamos el track dentro mediante clip-path + background en
   el pseudo-elemento del track. Así webkit NO necesita margin-top
   negativo y el thumb queda perfectamente centrado.
   ─────────────────────────────────────────────────────────────── */
.cmp-vol {
  -webkit-appearance: none;
  appearance: none;
  /* Altura = tamaño del thumb → webkit lo centra automáticamente */
  width: 64px;
  height: 12px;
  background: transparent;        /* el color va en el track */
  border-radius: 0;
  cursor: pointer;
  flex-shrink: 0;
  outline: none;
  border: none;
  padding: 0;
  margin: 0;
  align-self: center;
  display: block;
}

/* Chrome / Safari — track */
.cmp-vol::-webkit-slider-runnable-track {
  height: 4px;
  background: rgba(158, 170, 187, 0.30);
  border-radius: 0;
}

/* Chrome / Safari — thumb: centrado en el track de 4px dentro del input de 12px */
.cmp-vol::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--cmp-accent);
  cursor: pointer;
  box-shadow: 0 0 0 2px rgba(34,85,160,0.22);
  /* margin-top centra el thumb (12px) en el track (4px): -(12-4)/2 = -4px */
  margin-top: -4px;
}

/* Firefox — thumb */
.cmp-vol::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--cmp-accent);
  cursor: pointer;
  box-sizing: border-box;
}

/* Firefox — track */
.cmp-vol::-moz-range-track {
  height: 4px;
  background: rgba(158, 170, 187, 0.30);
  border-radius: 0;
  border: none;
}

/* ── Variante clara para el audio player ── */
.cmp-vol-light {
  background: transparent;
  width: 48px;          /* más corto: el thumb nunca llega al borde del wrap */
  padding: 0;
  box-sizing: border-box;
  flex-shrink: 0;
}
.cmp-vol-light::-webkit-slider-runnable-track {
  background: rgba(106, 127, 150, 0.25);
}
.cmp-vol-light::-webkit-slider-thumb {
  background: var(--cmp-accent);
  border-color: var(--bg-panel, #c8d3e0);
  margin-top: -4px;
}
.cmp-vol-light::-moz-range-thumb {
  background: var(--cmp-accent);
  border-color: var(--bg-panel, #c8d3e0);
}
.cmp-vol-light::-moz-range-track {
  background: rgba(106, 127, 150, 0.25);
}

@media (max-width: 480px) { .cmp-vol { display: none; } }

/* ── Barra compacta (video pequeño < 260px) ── */
.cmp-bar-compact {
  gap: 4px;
  padding: 0 6px;
}

/* En compacto: play más pequeño, progreso se lleva todo el espacio */
.cmp-bar-compact .cmp-play {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.cmp-bar-compact .cmp-play svg {
  width: 13px;
  height: 13px;
}

/* Fullscreen en compacto: siempre visible, llevado al extremo derecho */
.cmp-bar-compact .cmp-fs {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-left: auto;
}
.cmp-bar-compact .cmp-fs svg {
  width: 13px;
  height: 13px;
}

/* En fullscreen, siempre mostrar todos los controles sin importar el tamaño */
.cmp-video-wrap:fullscreen .cmp-bar-compact .cmp-time,
.cmp-video-wrap:fullscreen .cmp-bar-compact .cmp-dur,
.cmp-video-wrap:fullscreen .cmp-bar-compact .cmp-mute,
.cmp-video-wrap:fullscreen .cmp-bar-compact .cmp-vol,
.cmp-video-wrap:-webkit-full-screen .cmp-bar-compact .cmp-time,
.cmp-video-wrap:-webkit-full-screen .cmp-bar-compact .cmp-dur,
.cmp-video-wrap:-webkit-full-screen .cmp-bar-compact .cmp-mute,
.cmp-video-wrap:-webkit-full-screen .cmp-bar-compact .cmp-vol {
  display: flex !important;
}


/* ══════════════════════════════════════════════════════════
   3. AUDIO PLAYER
   ══════════════════════════════════════════════════════════ */

.cmp-audio-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 18px 6px 10px;   /* padding-right generoso para el thumb */
  background: var(--bg-panel, #c8d3e0);
  border: 1px solid var(--border-strong, #6a7f96);
  border-left: 4px solid var(--cmp-accent);
  border-radius: var(--cmp-radius);
  max-width: 420px;
  box-shadow: 0 1px 4px rgba(34,85,160,0.08);
  box-sizing: border-box;
  overflow: hidden;              /* el thumb vive dentro del padding */
}

.cmp-audio-wrap audio { display: none !important; }

.cmp-audio-icon { color: var(--cmp-accent); flex-shrink: 0; display: flex; align-items: center; }
.cmp-audio-icon svg { width: 16px; height: 16px; display: block; }

.cmp-audio-wrap .cmp-btn { color: var(--accent, #2255a0); width: 28px; height: 28px; }
.cmp-audio-wrap .cmp-btn:hover { background: rgba(34,85,160,0.10); color: var(--link-hover, #1a469e); }

.cmp-audio-wrap .cmp-time,
.cmp-audio-wrap .cmp-dur,
.cmp-audio-wrap .cmp-time-sep { color: var(--text-dim, #5a6573); }

.cmp-audio-progress {
  position: relative;
  flex: 1;
  height: 4px;
  min-width: 60px;
  background: rgba(106, 127, 150, 0.25);
  cursor: pointer;
  align-self: center;
  border-radius: 0;
}
.cmp-audio-progress:hover { height: 6px; }


/* ══════════════════════════════════════════════════════════
   4. YOUTUBE
   ══════════════════════════════════════════════════════════ */

.ytembed { display: block; margin: 8px 0; }

/* URL row: inline when the toggle button is present so both sit on one line */
.ytembed .yt-url {
  display: block; margin-bottom: 5px;
  font-family: var(--mono); font-size: 11px;
  color: var(--text-dim); word-break: break-all;
}
.ytembed:has(.yt-toggle) .yt-url {
  display: inline;
  margin-bottom: 0;
  vertical-align: middle;
}
.ytembed .yt-url:hover { color: var(--link-hover); }

/* Toggle button — "▾ show / ▴ hide" preview */
.yt-toggle {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  padding: 1px 7px 2px;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-bottom: 2px solid var(--accent);
  border-radius: var(--cmp-radius, 3px);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.2;
  color: var(--text-dim);
  user-select: none;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.yt-toggle:hover {
  background: var(--bg-panel);
  border-color: var(--accent);
  color: var(--accent);
}
.yt-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Preview shown — small top gap so it doesn't crowd the URL line */
.ytembed .yt-thumb:not([hidden]),
.ytembed .yt-frame:not([hidden]) { margin-top: 6px; display: block; }

/* Force [hidden] to work even though .yt-thumb has display:inline-block —
   author stylesheets beat the UA's [hidden]{display:none} rule. */
.yt-thumb[hidden], .yt-frame[hidden] { display: none !important; }

/* Revealed inline-file video/audio: when no explicit width was authored,
   app-media.js sets width:100% on the <a> float. The cmp-video-wrap inside
   must also fill 100% of that float so the player matches the column width. */
a.inline-file.revealed > .cmp-video-wrap { width: 100%; max-width: 100%; }

.yt-thumb {
  position: relative; display: block; cursor: pointer;
  max-width: 480px; width: 100%; line-height: 0;
  border: 2px solid var(--border-strong);
  border-bottom: 3px solid var(--accent);
  border-radius: var(--cmp-radius); overflow: hidden;
  box-shadow: 0 2px 8px rgba(34,85,160,0.12);
  transition: border-color 140ms, box-shadow 140ms;
}
.yt-thumb:hover { border-color: var(--accent); box-shadow: 0 4px 16px rgba(34,85,160,0.24); }
.yt-thumb img {
  width: 100%; height: auto; display: block;
  transition: filter 140ms;
}
.yt-thumb:hover img { filter: brightness(0.88); }

.yt-play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 62px; height: 42px; border-radius: 4px;
  background: rgba(14,21,32,0.72);
  border: 1.5px solid rgba(200,211,224,0.28);
  color: #e8eef6;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; pointer-events: none;
  transition: background 140ms, transform 140ms, border-color 140ms;
  backdrop-filter: blur(2px); line-height: 1;
}
.yt-thumb:hover .yt-play {
  background: var(--accent); border-color: var(--accent);
  transform: translate(-50%, -50%) scale(1.07); color: #fff;
}

.yt-frame {
  width: 100%; max-width: 560px; aspect-ratio: 16/9;
  border: 2px solid var(--border-strong);
  border-bottom: 3px solid var(--accent);
  border-radius: var(--cmp-radius);
  display: block; margin: 6px 0;
  box-shadow: 0 2px 8px rgba(34,85,160,0.12);
}


/* ══════════════════════════════════════════════════════════
   5. LIGHTBOX
   ══════════════════════════════════════════════════════════ */

.lightbox {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(8,14,28,0.92);
  align-items: center; justify-content: center;
  display: flex; cursor: zoom-out; padding: 20px;
}
.lightbox[hidden] { display: none !important; }
.lightbox img {
  max-width: 94vw; max-height: 92vh; object-fit: contain;
  box-shadow: 0 0 0 1px rgba(34,85,160,0.28), 0 8px 40px rgba(8,14,28,0.75);
  border-radius: 1px;
}
.lightbox-info {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: rgba(10,18,34,0.80); color: var(--bg-panel);
  padding: 5px 16px; border-radius: 2px;
  font-family: var(--mono); font-size: 12px;
  pointer-events: none; text-align: center;
  border: 1px solid rgba(34,85,160,0.28);
  letter-spacing: 0.04em; z-index: 2001; white-space: nowrap;
}


/* ══════════════════════════════════════════════════════════
   6. RESPONSIVE
   ══════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .yt-thumb, .yt-frame { max-width: 100%; }
  .cmp-audio-wrap { max-width: 100%; }
  .lightbox img { max-width: 98vw; max-height: 88vh; }
  .lightbox-info { font-size: 11px; padding: 4px 12px; bottom: 14px; }
  .yt-play { width: 50px; height: 34px; font-size: 16px; }
  :root { --cmp-bar-h: 34px; }
}


/* ══════════════════════════════════════════════════════════
   LAYOUT DEL STRIP DE ARCHIVOS — multi
   Los videos se redimensionan vía EJS (inline style dinámico).
   Los audios se apilan verticalmente usando un sub-flex column.
   ══════════════════════════════════════════════════════════ */

/* Strip multi: flex-row, todos los elementos centrados verticalmente */
.files.multi {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 8px;
}

/* Todas las figuras alineadas arriba */
.files.multi .file-fig {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  align-self: flex-start;
}

/* Con 5+ archivos: no-wrap + shrink para que todo quepa en una fila */
.files[data-count="5"],
.files[data-count="6"],
.files[data-count="7"] {
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 5px;
  overflow-x: auto;
}

/* En nowrap los videos y spoilers se encogen si hace falta */
.files[data-count="5"] .file-fig,
.files[data-count="6"] .file-fig,
.files[data-count="7"] .file-fig {
  flex-shrink: 1;
  min-width: 0;
}

.files[data-count="5"] .cmp-video-wrap,
.files[data-count="6"] .cmp-video-wrap,
.files[data-count="7"] .cmp-video-wrap {
  flex-shrink: 1;
  min-width: 0;
}

.files[data-count="5"] .cmp-video-wrap video,
.files[data-count="6"] .cmp-video-wrap video,
.files[data-count="7"] .cmp-video-wrap video {
  width: 100%;
  max-width: 100%;
}

/* Spoiler en fila nowrap */
.files[data-count="5"] .thumb.spoilered img,
.files[data-count="6"] .thumb.spoilered img,
.files[data-count="7"] .thumb.spoilered img {
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* Grupo de audios: columna vertical, sin ocupar ancho horizontal extra */
/* Solo aplicamos display:contents a figuras de audio NO-spoiler (sin figcaption visible).
   Las figuras con audio spoilered mantienen display:flex para que el figcaption
   "spoiler" quede centrado debajo del player al revelar, no flotando lejos. */
.files.multi .file-fig:has(.audio-thumb):not(:has(a.thumb.spoilered)):not(:has(a.thumb.revealed)),
.files.multi .file-fig:has(.cmp-audio-wrap):not(:has(a.thumb.spoilered)):not(:has(a.thumb.revealed)) {
  display: contents; /* los audios no-spoiler participan en el flex normal */
}

/* Audios compactos: ancho fijo pequeño, apilados por flex-wrap */
.files.multi .audio-thumb {
  max-width: 200px;
  min-width: 160px;
  min-height: 32px;
  padding: 2px 4px;
}

.files.multi .audio-thumb audio {
  min-width: 140px;
  height: 32px;
}

/* Figure con audio spoiler revelado: volver a flex-column para que
   el figcaption "spoiler" quede debajo del player */
.files.multi .file-fig.audio-revealed {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Audio en strip multi: solo play + barra corta + mute, sin espacio sobrante */
.files.multi .cmp-audio-wrap {
  width: 160px;
  min-width: 0;
  max-width: 160px;
  padding: 3px 5px;
  gap: 3px;
  flex-shrink: 0;
}

/* Ocultar todo salvo lo esencial */
.files.multi .cmp-audio-wrap .cmp-audio-icon,
.files.multi .cmp-audio-wrap .cmp-time,
.files.multi .cmp-audio-wrap .cmp-time-sep,
.files.multi .cmp-audio-wrap .cmp-dur,
.files.multi .cmp-audio-wrap .cmp-vol-light {
  display: none !important;
}

/* Barra de progreso: flex:1 para llenar el espacio entre play y mute */
.files.multi .cmp-audio-wrap .cmp-audio-progress {
  flex: 1;
  min-width: 0;
  max-width: none;
}

/* Mute al extremo derecho */
.files.multi .cmp-audio-wrap .cmp-mute {
  margin-left: auto;
}

/* Strip de archivos: el .video-thumb padre no tiene dimensiones propias —
   debe encoger hasta el ancho del .cmp-video-wrap (que el JS dimensiona via
   style inline). Sin fit-content, el div bloque se estira al 100% del flex. */
.files .video-thumb {
  width: fit-content;
  max-width: 100%;
}

/* El .cmp-video-wrap del strip recibe width/maxWidth del JS via style inline.
   El video interior usa aspect-ratio 16/9, igual que un <video> nativo con
   sus dimensiones naturales — sin height fijo que lo aplane ni max-height
   que lo recorte. */
.files.multi .cmp-video-wrap {
  /* width y max-width vienen del JS (origMaxW del inline style del EJS) */
}

.files.multi .cmp-video-wrap video,
.files.single .cmp-video-wrap video {
  width: 100%;
  max-width: 100%;
  max-height: none;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

/* Imágenes en multi: tamaño proporcional al espacio disponible */
.files[data-count="2"] .thumb img  { max-width: 320px; max-height: 310px; }
.files[data-count="3"] .thumb img  { max-width: 280px; max-height: 270px; }
.files[data-count="4"] .thumb img  { max-width: 250px; max-height: 240px; }
.files[data-count="5"] .thumb img  { max-width: 220px; max-height: 220px; }
.files[data-count="6"] .thumb img  { max-width: 200px; max-height: 200px; }
.files[data-count="7"] .thumb img  { max-width: 180px; max-height: 180px; }

/* Responsive móvil */
@media (max-width: 640px) {
  .files.multi .cmp-audio-wrap,
  .files.multi .audio-thumb { max-width: 44vw; min-width: 120px; }

  .files.multi .cmp-video-wrap { max-width: 44vw !important; }
}


/* ══════════════════════════════════════════════════════════
   SCROLLBARS — identidad coherente con el sistema
   Webkit (Chrome, Edge, Safari) + Firefox
   ══════════════════════════════════════════════════════════ */

/* ── Global — todos los scrollbars ── */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong, #6a7f96) var(--bg-panel, #c8d3e0);
}

/* ── Webkit: track (fondo del scrollbar) ── */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-panel, #c8d3e0);
  border-left: 1px solid var(--border, #9aaabb);
}

::-webkit-scrollbar-track:horizontal {
  border-left: none;
  border-top: 1px solid var(--border, #9aaabb);
}

/* ── Webkit: thumb (la barra que se arrastra) ── */
::-webkit-scrollbar-thumb {
  background: var(--border-strong, #6a7f96);
  border-radius: 0;                          /* plano / editorial */
  border: 2px solid var(--bg-panel, #c8d3e0); /* margen interno */
  min-height: 32px;
  min-width: 32px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent, #2255a0);
  border-color: var(--bg-panel, #c8d3e0);
}

::-webkit-scrollbar-thumb:active {
  background: var(--link-hover, #1a469e);
}

/* ── Webkit: esquina donde se cruzan scrollbars H y V ── */
::-webkit-scrollbar-corner {
  background: var(--bg-panel, #c8d3e0);
}

/* ── Webkit: botones de flecha (ocultarlos — estilo limpio) ── */
::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

/* ── Scrollbar horizontal del strip de archivos (.files nowrap) ── */
/* Más delgado para no robar espacio vertical */
.files[data-count="5"]::-webkit-scrollbar,
.files[data-count="6"]::-webkit-scrollbar,
.files[data-count="7"]::-webkit-scrollbar {
  height: 4px;
}

.files[data-count="5"]::-webkit-scrollbar-thumb,
.files[data-count="6"]::-webkit-scrollbar-thumb,
.files[data-count="7"]::-webkit-scrollbar-thumb {
  border: 1px solid var(--bg-panel, #c8d3e0);
  border-radius: 0;
  background: var(--accent, #2255a0);
  min-width: 24px;
}

/* ── Scrollbar del reply widget y editores ── */
.rw-form-scroll::-webkit-scrollbar,
.rich-editor-wrapper::-webkit-scrollbar,
.rich-editor::-webkit-scrollbar {
  width: 6px;
}

.rw-form-scroll::-webkit-scrollbar-thumb,
.rich-editor-wrapper::-webkit-scrollbar-thumb,
.rich-editor::-webkit-scrollbar-thumb {
  background: var(--border-strong, #6a7f96);
  border: 1px solid var(--bg-panel, #c8d3e0);
}


/* ══════════════════════════════════════════════════════════
   7. DOCUMENT FILE THUMBNAILS (doc-thumb)
   ══════════════════════════════════════════════════════════ */

.doc-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 140px;
  height: 120px;
  padding: 10px 8px;
  box-sizing: border-box;
  background: var(--bg-panel, rgba(14, 21, 32, 0.55));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border-strong, #6a7f96);
  border-left: 4px solid var(--cmp-accent);
  border-radius: var(--cmp-radius);
  box-shadow: 0 1px 4px rgba(34, 85, 160, 0.08);
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  text-decoration: none;
}

/* Anchor wrapper — inherits layout, no default link styles */
.doc-thumb-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  color: inherit;
  width: 100%;
  height: 100%;
}

.doc-thumb:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 16px rgba(34, 85, 160, 0.22);
  border-color: var(--cmp-accent);
}

/* ── Icono principal ── */
.doc-thumb-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.doc-thumb-icon svg {
  width: 36px;
  height: 36px;
  display: block;
}

/* Colores por tipo de documento */
.doc-icon-pdf     { color: #e74c3c; }
.doc-icon-word    { color: #2b579a; }
.doc-icon-excel   { color: #217346; }
.doc-icon-csv     { color: #1abc9c; }
.doc-icon-txt     { color: #7f8c8d; }
.doc-icon-zip     { color: #f39c12; }
.doc-icon-default { color: var(--text-dim, #5a6573); }

/* ── Nombre del archivo ── */
.doc-thumb-label {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  line-height: 1.2;
  color: var(--text-dim, #5a6573);
  font-family: var(--mono, monospace);
  text-align: center;
}

/* ── Badge de extensión ── */
.doc-thumb-ext {
  display: inline-block;
  font-size: 9px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 2px;
  line-height: 1;
  color: #fff;
}

/* Fondos semi-transparentes por tipo */
.doc-icon-pdf     ~ .doc-thumb-ext,
.doc-thumb[data-ext="pdf"] .doc-thumb-ext     { background: rgba(231, 76, 60, 0.25); color: #e74c3c; }
.doc-icon-word    ~ .doc-thumb-ext,
.doc-thumb[data-ext="docx"] .doc-thumb-ext,
.doc-thumb[data-ext="doc"] .doc-thumb-ext     { background: rgba(43, 87, 154, 0.25); color: #5b9bd5; }
.doc-icon-excel   ~ .doc-thumb-ext,
.doc-thumb[data-ext="xlsx"] .doc-thumb-ext,
.doc-thumb[data-ext="xls"] .doc-thumb-ext     { background: rgba(33, 115, 70, 0.25); color: #33d17a; }
.doc-icon-csv     ~ .doc-thumb-ext,
.doc-thumb[data-ext="csv"] .doc-thumb-ext     { background: rgba(26, 188, 156, 0.25); color: #1abc9c; }
.doc-icon-txt     ~ .doc-thumb-ext,
.doc-thumb[data-ext="txt"] .doc-thumb-ext     { background: rgba(127, 140, 141, 0.25); color: #95a5a6; }
.doc-icon-zip     ~ .doc-thumb-ext,
.doc-thumb[data-ext="zip"] .doc-thumb-ext,
.doc-thumb[data-ext="rar"] .doc-thumb-ext,
.doc-thumb[data-ext="7z"] .doc-thumb-ext      { background: rgba(243, 156, 18, 0.25); color: #f39c12; }
.doc-thumb[data-ext="default"] .doc-thumb-ext { background: rgba(90, 101, 115, 0.25); color: var(--text-dim, #5a6573); }


/* ══════════════════════════════════════════════════════════
   8. PDF VIEWER MODAL
   ══════════════════════════════════════════════════════════ */

.pdf-viewer-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(8, 14, 28, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.pdf-viewer-overlay[hidden] { display: none !important; }

.pdf-viewer-container {
  background: var(--cmp-bg, #0e1520);
  border: 2px solid var(--border-strong, #6a7f96);
  border-bottom: 3px solid var(--cmp-accent);
  border-radius: var(--cmp-radius);
  max-width: 900px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(34, 85, 160, 0.18),
    0 12px 48px rgba(8, 14, 28, 0.70),
    0 4px 16px rgba(34, 85, 160, 0.12);
}

/* ── Barra de herramientas ── */
.pdf-viewer-toolbar {
  background: rgba(14, 21, 32, 0.80);
  border-bottom: 1px solid rgba(34, 85, 160, 0.30);
  height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  flex-shrink: 0;
}

.pdf-viewer-toolbar .pdf-btn {
  background: transparent;
  border: none;
  color: var(--cmp-text, #c8d3e0);
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  font-size: 14px;
  flex-shrink: 0;
  transition: color 120ms, background 120ms;
  padding: 0;
  line-height: 1;
}

.pdf-viewer-toolbar .pdf-btn:hover {
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
}

.pdf-viewer-toolbar .pdf-page-info {
  font-family: var(--mono, monospace);
  font-size: 13px;
  color: var(--cmp-text, #c8d3e0);
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.pdf-viewer-toolbar .pdf-filename {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--cmp-dim, rgba(200, 211, 224, 0.50));
  font-family: var(--mono, monospace);
  min-width: 0;
}

.pdf-viewer-toolbar .pdf-close {
  margin-left: auto;
  transition: color 120ms, background 120ms;
}

.pdf-viewer-toolbar .pdf-close:hover {
  color: #e74c3c;
  background: rgba(231, 76, 60, 0.12);
}

/* ── Área del canvas ── */
.pdf-viewer-canvas-wrap {
  flex: 1;
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 16px;
  background: rgba(0, 0, 0, 0.30);
}

.pdf-viewer-canvas-wrap canvas {
  max-width: 100%;
  height: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.50);
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .pdf-viewer-container {
    max-width: 100%;
  }

  .doc-thumb {
    width: 110px;
    height: 100px;
    padding: 8px 6px;
    gap: 4px;
  }

  .doc-thumb-icon {
    width: 40px;
    height: 40px;
  }

  .doc-thumb-icon svg {
    width: 28px;
    height: 28px;
  }

  .doc-thumb-label {
    max-width: 96px;
    font-size: 10px;
  }

  .pdf-viewer-toolbar {
    height: 40px;
    padding: 0 8px;
    gap: 4px;
  }

  .pdf-viewer-canvas-wrap {
    padding: 8px;
  }
}