/*
 * nisto-docs.css — vista "Documentos" (el Drive de Nisto AI).
 *
 * Estructura y estados hover/animación del Drive desktop. Los valores dinámicos
 * (colores de badge, iniciales de avatar, etc.) van inline por Alpine; acá vive
 * lo que NO se puede expresar inline (:hover, keyframes, escalado de previews).
 *
 * Paleta: tokens de marca (grafito + coral, ver nisto-tokens.css). Sin azules/violetas
 * crudos prohibidos por el design guard.
 */

/* ── Raíz de la vista ─────────────────────────────────────────────────────── */
.nd-view { font-family: var(--font-body, 'Hanken Grotesk', system-ui, sans-serif); color: var(--text-strong, #0E0E10); }

/* ── Barra de herramientas · buscador + sort + toggle ─────────────────────── */
.nd-searchbox { display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid #E4E4E2;
  border-radius: 11px; padding: 9px 12px; flex: 1; max-width: 340px; }
.nd-searchbox input { border: none; outline: none; background: none; font: inherit; font-size: 13.5px; width: 100%; color: #0E0E10; }
.nd-in:focus { border-color: #0E0E10 !important; box-shadow: 0 0 0 3px rgba(14,14,16,.07); }

.nd-btn-ghost { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #E4E4E2; background: #fff;
  font: inherit; font-size: 13px; font-weight: 600; color: #3C3D41; padding: 9px 13px; border-radius: 10px; cursor: pointer; transition: background .12s; }
.nd-btn-ghost:hover { background: #F1F1EF; }
.nd-btn-dark { display: inline-flex; align-items: center; gap: 8px; border: none; background: #0E0E10; color: #fff;
  font: inherit; font-size: 12.5px; font-weight: 600; padding: 9px 15px; border-radius: 10px; cursor: pointer; transition: background .12s; }
.nd-btn-dark:hover { background: #232428; }

.nd-seg { display: inline-flex; background: #EDEEEF; border-radius: 10px; padding: 3px; }
.nd-seg button { border: none; cursor: pointer; padding: 6px 9px; border-radius: 7px; background: transparent; color: #9A9BA0;
  display: flex; align-items: center; justify-content: center; transition: background .12s, color .12s; }
.nd-seg button.on { background: #fff; color: #0E0E10; box-shadow: 0 1px 3px rgba(16,16,18,.14); }

.nd-iconb { width: 30px; height: 30px; border: none; background: transparent; border-radius: 8px; cursor: pointer;
  color: #A6A7AC; display: flex; align-items: center; justify-content: center; transition: background .12s, color .12s; }
.nd-iconb:hover { background: #F1F1EF; color: #3C3D41; }
.nd-iconb-lg { width: 36px; height: 36px; border: 1px solid #E4E4E2; background: #fff; border-radius: 10px; color: #3C3D41; }
.nd-iconb-lg:hover { background: #F1F1EF; }
.nd-iconb-back { width: 38px; height: 38px; border: none; background: transparent; border-radius: 10px; color: #3C3D41; }
.nd-iconb-back:hover { background: #F1F1EF; }

/* ── Dropdown genérico (sort / menú de fila / versiones) ──────────────────── */
.nd-pop { position: absolute; z-index: 45; background: #fff; border: 1px solid #EAEAE8; border-radius: 12px;
  box-shadow: 0 18px 44px -18px rgba(16,16,18,.4); padding: 5px; animation: nd-pop .14s ease both; }
.nd-mitem { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; font-size: 12.5px;
  color: #0E0E10; cursor: pointer; white-space: nowrap; }
.nd-mitem:hover { background: #F5F5F3; }
.nd-mitem.nd-danger { color: #C2451F; }
.nd-mitem.nd-danger:hover { background: #FDECEA; color: #C2451F; }
.nd-mitem .nd-check { margin-left: auto; }

/* ── Lista (tabla) ────────────────────────────────────────────────────────── */
.nd-list { background: #fff; border: 1px solid #E8E8E6; border-radius: 16px; overflow: hidden; }
.nd-list-scroll { overflow-x: auto; }
.nd-cols { display: grid; grid-template-columns: minmax(230px,1fr) 150px 108px 74px 128px 40px; gap: 16px; align-items: center; }
.nd-head { padding: 11px 18px; border-bottom: 1px solid #F0F0EE; background: #FBFBFA; }
.nd-head span { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 9.5px; letter-spacing: .7px;
  text-transform: uppercase; color: #A6A7AC; }
.nd-row { padding: 13px 18px; border-bottom: 1px solid #F4F4F2; cursor: pointer; transition: background .1s; }
.nd-row:last-child { border-bottom: none; }
.nd-row:hover { background: #FBFBFA; }
.nd-row:hover .nd-prev { border-color: #D7D7D4; }
.nd-name { font-size: 14px; font-weight: 600; letter-spacing: -.1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nd-sub { font-size: 11.5px; color: #A6A7AC; margin-top: 2px; }
.nd-cell-muted { font-size: 12.5px; color: #76777C; }
.nd-dash { font-size: 12.5px; color: #C4C5C8; }

/* Avatar de autor (iniciales o glyph Nisto AI) */
.nd-avatar { border-radius: 7px; color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 600; flex: none; }
.nd-avatar-ai { background: linear-gradient(150deg, #FF7E5A, #FF5A38); position: relative; }
.nd-avatar-ai::after { content: ''; position: absolute; inset: 32%; border: 1.6px solid #fff; border-radius: 2.5px; }
.nd-byname { font-size: 12.5px; color: #3C3D41; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Pills */
.nd-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; font-size: 11px; font-weight: 600; }
.nd-ver-pill { display: inline-flex; align-items: center; font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11.5px; font-weight: 600; color: #3C3D41; background: #F1F1EF; padding: 3px 8px; border-radius: 6px; }

/* Iconos de carpeta y preview */
.nd-folder-ic { width: 44px; height: 44px; flex: none; border-radius: 10px; background: #F1F1EF;
  display: flex; align-items: center; justify-content: center; color: #76777C; }
.nd-prev { width: 74px; height: 48px; flex: none; border-radius: 8px; border: 1px solid #E8E8E6; overflow: hidden;
  background: #fff; position: relative; transition: border-color .12s; }
.nd-prev iframe, .nd-cardprev iframe { border: 0; display: block; background: #fff; }
.nd-prev iframe { width: 900px; height: 600px; transform: scale(.0822); transform-origin: 0 0; pointer-events: none; }

/* ── Grilla (cards) ───────────────────────────────────────────────────────── */
.nd-gridwrap { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px,1fr)); gap: 16px; }
.nd-card { background: #fff; border: 1px solid #E8E8E6; border-radius: 14px; overflow: hidden; cursor: pointer;
  transition: border-color .14s, box-shadow .14s; }
.nd-card:hover { border-color: #D7D7D4; box-shadow: 0 8px 26px -18px rgba(16,16,18,.4); }
.nd-card-folder { padding: 15px 16px; display: flex; align-items: center; gap: 12px; }
.nd-cardprev { height: 148px; border-bottom: 1px solid #F0F0EE; background: #FAFAF9; overflow: hidden; position: relative; }
.nd-cardprev iframe { width: 900px; height: 600px; transform: scale(.264); transform-origin: 0 0; pointer-events: none; }

/* ── Estados (skeleton / vacío / error) ──────────────────────────────────── */
.nd-empty { padding: 60px 30px; text-align: center; }
.nd-empty-ic { width: 56px; height: 56px; border-radius: 15px; background: #F1F1EF; display: flex; align-items: center;
  justify-content: center; margin: 0 auto 16px; color: #A6A7AC; }
.nd-skel-row { padding: 13px 18px; border-bottom: 1px solid #F4F4F2; display: flex; align-items: center; gap: 13px; }
.nd-skel { background: linear-gradient(90deg, #F1F1EF 25%, #E8E8E6 50%, #F1F1EF 75%); background-size: 200% 100%;
  animation: nd-shimmer 1.3s linear infinite; border-radius: 6px; }

/* ── Visor a pantalla completa ────────────────────────────────────────────── */
.nd-viewer { position: fixed; inset: 0; z-index: 60; background: #F4F5F6; display: flex; flex-direction: column;
  animation: nd-fade .18s ease both; }
.nd-viewer-top { flex: none; height: 58px; background: #fff; border-bottom: 1px solid #EAEAE8; display: flex;
  align-items: center; justify-content: space-between; padding: 0 16px 0 12px; gap: 14px; }
.nd-viewer-body { flex: 1; min-height: 0; display: flex; }
.nd-viewer-preview { flex: 1; min-width: 0; overflow-y: auto; background: #E9EAEC; padding: 34px;
  display: flex; justify-content: center; align-items: flex-start; }
.nd-paper { width: 100%; max-width: 940px; background: #fff; border-radius: 14px;
  box-shadow: 0 30px 70px -34px rgba(16,16,18,.5); overflow: hidden; border: 1px solid #E4E4E2; }
.nd-paper iframe { width: 100%; border: 0; display: block; background: #fff; }
.nd-side { width: 344px; flex: none; background: #fff; border-left: 1px solid #EAEAE8; display: flex; flex-direction: column; }
.nd-side-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.nd-glyph { width: 32px; height: 32px; flex: none; border-radius: 8px; background: #F1F1EF; display: flex;
  align-items: center; justify-content: center; color: #C2451F; }

/* Selector de versión (topbar del visor) + tabs */
.nd-ver-btn { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #E4E4E2; background: #fff;
  font: inherit; font-size: 12px; font-weight: 600; color: #3C3D41; padding: 7px 10px; border-radius: 9px; cursor: pointer; }
.nd-tabs { display: inline-flex; background: #EDEEEF; border-radius: 10px; padding: 3px; width: 100%; }
.nd-tabs button { flex: 1; border: none; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600;
  padding: 7px 0; border-radius: 7px; background: transparent; color: #76777C; }
.nd-tabs button.on { background: #fff; color: #0E0E10; box-shadow: 0 1px 3px rgba(16,16,18,.14); }

.nd-verrow { display: flex; align-items: flex-start; gap: 11px; padding: 12px 10px; border-radius: 11px; cursor: pointer; }
.nd-verrow:hover { background: #FAFAF9; }
.nd-note { display: flex; align-items: flex-start; gap: 8px; padding: 11px 12px; background: #FBFBFA;
  border: 1px solid #F0F0EE; border-radius: 11px; }
.nd-toggle { width: 42px; height: 24px; border-radius: 99px; border: none; cursor: pointer; padding: 0; position: relative;
  flex: none; background: #D2D3D6; transition: background .18s; }
.nd-toggle.on { background: #FF6A45; }
.nd-toggle span { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 99px; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.28); transition: transform .18s; }
.nd-toggle.on span { transform: translateX(18px); }

/* Overlay click-away para dropdowns */
.nd-clickaway { position: fixed; inset: 0; z-index: 35; }

/* ── Animaciones ──────────────────────────────────────────────────────────── */
@keyframes nd-pop { from { opacity: 0; transform: scale(.985) translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes nd-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes nd-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes nd-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.nd-rise { animation: nd-rise .32s cubic-bezier(.16,1,.3,1); }

/* ── Responsive · mobile (≤768px) ─────────────────────────────────────────── */
/* Pase pragmático: la lista colapsa a Nombre · Versiones · ⋯ (se ocultan Creado
   por / Editado / Compartido); la grilla va a 2 columnas; el visor apila el panel
   de versiones/compartir debajo del preview (en vez del panel lateral de 344px). */
@media (max-width: 768px) {
  .nd-searchbox { max-width: none; }
  .nd-cols { grid-template-columns: minmax(0,1fr) auto 40px; gap: 10px; }
  .nd-row > *:nth-child(2), .nd-row > *:nth-child(3), .nd-row > *:nth-child(5),
  .nd-head span:nth-child(2), .nd-head span:nth-child(3), .nd-head span:nth-child(5) { display: none; }
  .nd-gridwrap { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }

  /* Visor: apilar preview + panel */
  .nd-viewer-top { height: auto; min-height: 54px; padding: 8px 12px; flex-wrap: wrap; gap: 8px; }
  .nd-viewer-body { flex-direction: column; }
  .nd-viewer-preview { padding: 14px; flex: none; }
  .nd-paper iframe { height: 56vh !important; }
  .nd-side { width: 100%; flex: none; border-left: none; border-top: 1px solid #EAEAE8; max-height: 44vh; }
}