/* ============================================================
   FABIAN GPR — Portal CSS  v1.0
   Sistema de diseño compartido: clientes, admin, colaboradores
   ============================================================ */

/* ── RESET & BASE ─────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0 }

:root {
  /* ── Colores ─────────────────────────────────── */
  --bg:        #090909;
  --surface:   #111;
  --surface2:  #141414;
  --border:    #1e1e1e;
  --border2:   #2a2a2a;
  --text:      #e8e8e8;
  --muted:     #999;
  --hint:      #777;

  /* Aliases cortos para compatibilidad con admin */
  --s:  #111;
  --s2: #141414;
  --bd: #1e1e1e;
  --bd2: #2a2a2a;
  --t:  #e8e8e8;
  --m:  #999;
  --h:  #777;

  --green:       #4caf7a;
  --green-dark:  #3fa06a;
  --green-bg:    #0d2e1a;
  --green-bg2:   #0d2416;
  --orange:      #d4914a;
  --orange-bg:   #2a1e08;
  --blue:        #4a90d9;
  --blue-bg:     #111d2e;
  --red:         #c0554a;
  --red-bg:      rgba(192,85,74,.08);
  --purple:      #9b6fd4;
  --purple-bg:   #1e1628;
  --purple-bd:   #3a2a4a;

  /* ── Escala tipográfica (base 4px) ───────────── */
  --text-xs:   10px;   /* labels, caps, badges */
  --text-sm:   11px;   /* metadatos, fechas, monospace */
  --text-base: 13px;   /* cuerpo principal */
  --text-md:   16px;   /* nombres de tarjeta */
  --text-lg:   22px;   /* títulos de login */
  --text-xl:   26px;   /* títulos de proyecto */

  /* ── Sistema de spacing (base 4px) ───────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
}

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── TOPBAR ───────────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2.5rem;
  border-bottom: 0.5px solid var(--border);
  background: var(--bg);
}
.topbar-logo   { display: flex; align-items: center; gap: 16px }
.topbar-logo img { height: 30px; opacity: .9 }
.topbar-divider  { width: 0.5px; height: 18px; background: var(--border2) }
.topbar-section  {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 3px;
  color: #999;
  text-transform: uppercase;
}
.topbar-right { display: flex; align-items: center; gap: 1.5rem }

.topbar-user       { font-size: 13px; color: var(--muted) }
.topbar-user strong { color: var(--text); font-weight: 500 }
.topbar-role {
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--purple);
  text-transform: uppercase;
  font-family: 'DM Mono', monospace;
  margin-left: 8px;
}

.btn-out {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color .2s, background .2s;
  font-family: 'DM Mono', monospace;
  padding: 5px 10px;
  border-radius: 6px;
}
.btn-out:hover {
  color: var(--text);
  background: rgba(255,255,255,.06);
}

/* ── LAYOUT ───────────────────────────────────────────────── */
.page-body {
  padding: 2.5rem;
  max-width: 1060px;
  margin: 0 auto;
  width: 100%;
  flex: 1;
}
.page-body--narrow { max-width: 860px }

.section-label {
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  font-family: 'DM Mono', monospace;
}

.back {
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--muted);
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2rem;
  transition: color .2s, gap .2s;
  font-family: 'DM Mono', monospace;
}
.back:hover { color: var(--text); gap: 10px }

/* ── PROJECT HEADER ───────────────────────────────────────── */
.proj-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  gap: 1rem;
}
.proj-title { font-size: 26px; font-weight: 400; margin-bottom: 4px }
.proj-meta  { font-size: 12px; color: var(--muted) }

/* ── CARDS / PROJECT GRID ─────────────────────────────────── */
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 3rem;
  align-items: start;
  padding: 6px 4px 4px 4px;
}

.card {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  text-decoration: none;
  color: var(--text);
  display: block;
  transition: border-color .25s, background .25s, transform .25s, box-shadow .25s;
  position: relative;
  width: 100%;
  will-change: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.card:hover {
  border-color: rgba(255,255,255,.28);
  background: #161616;
  -webkit-transform: translateY(-3px);
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(0,0,0,.45), 0 0 0 0.5px rgba(255,255,255,.1) inset;
}
.card.interno     { border-left: 2px solid #4a2a7a }
.card.has-notif   { border-color: rgba(212,145,74,.35) }
.card.has-notif:hover { border-color: rgba(212,145,74,.6) }

.card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 8px;
}
.card-name { font-size: 16px; font-weight: 500 }
.card-meta { font-size: 11px; color: var(--muted); margin-bottom: 6px; font-family: 'DM Mono', monospace }
.card-ver  { font-size: 11px; color: var(--hint); font-family: 'DM Mono', monospace; margin-bottom: 8px }
.card-ver span { color: #777 }

@keyframes notif-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(212,145,74,.6) }
  70%  { box-shadow: 0 0 0 6px rgba(212,145,74,0) }
  100% { box-shadow: 0 0 0 0 rgba(212,145,74,0) }
}
.notif-dot {
  position: absolute;
  top: 12px; right: 12px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--orange);
  display: none;
  animation: notif-pulse 2s ease-in-out infinite;
}
.has-notif .notif-dot { display: block }

/* Fechas dentro de card (colaboradores) */
.card-fechas {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 0.5px solid var(--border);
}
.fecha-row   { display: flex; align-items: center; gap: 6px; font-size: 11px; font-family: 'DM Mono', monospace }
.fecha-label { color: var(--muted); min-width: 50px }
.fecha-val   { color: #aaa }
.fecha-val.hoy    { color: var(--orange) }
.fecha-val.vencida { color: var(--red) }
.fecha-badge { font-size: 9px; letter-spacing: 1px; padding: 1px 5px; border-radius: 99px; text-transform: uppercase }
.badge-hoy     { background: var(--orange-bg); color: var(--orange) }
.badge-vencida { background: rgba(192,85,74,.15); color: var(--red) }

/* ── TAGS / BADGES ────────────────────────────────────────── */
.tag {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 99px;
  white-space: nowrap;
  flex-shrink: 0;
}
.tag-live      { background: var(--green-bg);  color: var(--green) }
.tag-review    { background: var(--orange-bg); color: var(--orange) }
.tag-done      { background: #1a1a1a;          color: var(--muted) }
.tag-paused    { background: #141c28;          color: #6b8bad }
.tag-cancelled { background: #201414;          color: #8b4a4a }
.tag-interno   { background: var(--purple-bg); color: var(--purple) }

/* Badges de versión */
.vb {
  font-size: 10px;
  letter-spacing: 1px;
  padding: 3px 9px;
  border-radius: 99px;
  text-transform: uppercase;
  white-space: nowrap;
  display: inline-block;
}
.vb-pending  { background: #1e1a0a;          color: #c49a3a }
.vb-approved { background: var(--green-bg2); color: var(--green-dark) }
.vb-current  { background: var(--blue-bg);   color: var(--blue) }

.badge-new {
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  background: #1a2a1a;
  color: var(--green);
  border: 0.5px solid #2a4a2a;
  padding: 2px 7px;
  border-radius: 99px;
  animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .6 } }

/* ── BUTTONS ──────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  padding: 10px 16px;
  font-size: 11px;
  font-family: 'DM Mono', monospace;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .2s;
  border: none;
  text-decoration: none;
  white-space: nowrap;
}
.btn-primary { background: var(--text); color: var(--bg) }
.btn-primary:hover {
  background: #fff;
  box-shadow: 0 4px 16px rgba(232,232,232,.2);
  transform: translateY(-1px);
}

.btn-ghost { background: none; border: 0.5px solid var(--border2); color: var(--muted) }
.btn-ghost:hover {
  border-color: rgba(255,255,255,.3);
  color: var(--text);
  background: rgba(255,255,255,.04);
}

.btn-green { background: none; border: 0.5px solid #2a4a2a; color: var(--green-dark) }
.btn-green:hover {
  background: var(--green-bg);
  border-color: var(--green);
  color: var(--green);
  box-shadow: 0 0 12px rgba(76,175,122,.15);
}

.btn-purple { background: var(--purple-bg); border: 0.5px solid var(--purple-bd); color: var(--purple) }
.btn-purple:hover {
  background: #2a1a4a;
  border-color: var(--purple);
  color: #c4a0e8;
  box-shadow: 0 0 12px rgba(155,111,212,.2);
}

.btn-danger { background: none; border: 0.5px solid rgba(192,85,74,.3); color: var(--red) }
.btn-danger:hover {
  background: var(--red-bg);
  border-color: var(--red);
  box-shadow: 0 0 10px rgba(192,85,74,.15);
}

.btn-sm    { padding: 5px 12px; font-size: 10px }
.btn-block { width: 100%; text-align: center }

/* ── FORMS ────────────────────────────────────────────────── */
.field { margin-bottom: 1.25rem }
.field label {
  display: block;
  font-size: 10px;
  letter-spacing: 2.5px;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 8px;
  font-family: 'DM Mono', monospace;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: 6px;
  padding: 10px 13px;
  color: var(--text);
  font-size: 13px;
  font-family: 'DM Sans', sans-serif;
  outline: none;
  transition: border-color .2s;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: rgba(255,255,255,.2);
  box-shadow: 0 0 0 3px rgba(74,144,217,.08);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--hint) }
.field textarea { resize: vertical; min-height: 70px }

/* ── TABLES ───────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse }
th {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  font-family: 'DM Mono', monospace;
  font-weight: 400;
  padding: 0 13px 10px 13px;
  border-bottom: 0.5px solid var(--border);
  text-align: left;
}
td {
  padding: 13px;
  border-bottom: 0.5px solid var(--border);
  font-size: 13px;
  color: #aaa;
  vertical-align: middle;
}
td:first-child { color: var(--text) }
tr.clickable   { cursor: pointer; transition: background .15s }
tr.clickable:hover { background: #181818 }
tr.clickable:hover td { color: var(--text) }

/* ── VERSION CARDS ────────────────────────────────────────── */
.ver-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 3rem }

.ver-card {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: 12px;
  /* overflow:hidden removido — rompía position:sticky del video */
}
.ver-card.collapsed .ver-head  { border-bottom: none }

/* ── Frame.io: video sticky izquierda / comentarios derecha ── */
.ver-frame {
  display: grid;
  grid-template-columns: 1fr 320px;
  align-items: start;
}

.ver-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 1.25rem;
  border-bottom: 0.5px solid var(--border);
  flex-wrap: wrap;
  cursor: pointer;
  user-select: none;
  transition: background .2s;
}
.ver-head:hover { background: rgba(255,255,255,.03) }
.ver-num     { font-family: 'DM Mono', monospace; font-size: 14px; font-weight: 500 }
.ver-date    { font-size: 11px; color: var(--muted); margin-left: auto; font-family: 'DM Mono', monospace }
.ver-chevron { font-size: 12px; color: var(--muted); transition: transform .2s; display: inline-block }
.ver-card.collapsed .ver-chevron { transform: rotate(-90deg) }

.ver-toggle-bar { text-align: center; margin: -4px 0 1rem 0 }
.btn-toggle-hist {
  background: none;
  border: 0.5px solid var(--border2);
  border-radius: 6px;
  padding: 6px 16px;
  color: var(--muted);
  font-size: 11px;
  font-family: 'DM Mono', monospace;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all .2s;
  text-transform: uppercase;
}
.btn-toggle-hist:hover { border-color: var(--text); color: var(--text) }

.ver-body {
  padding: 1.25rem;
  border-right: 0.5px solid var(--border); /* separador vertical */
  position: sticky;
  top: 64px;           /* altura del topbar */
  align-self: start;   /* clave para que sticky funcione en grid */
}
.ver-notes { font-size: 13px; color: #888; line-height: 1.6; margin-bottom: 10px }

.video-wrap,
.pdf-wrap   { border-radius: 8px; overflow: hidden; margin-bottom: 10px }
.pdf-wrap   { background: #0d0d0d; border: 0.5px solid var(--border) }

.dl-link       { font-size: 11px; color: var(--blue); text-decoration: none; letter-spacing: 1px; font-family: 'DM Mono', monospace }
.dl-link:hover { color: #7ab3e8 }
.aprobado-por  { font-size: 11px; color: var(--green-dark); font-family: 'DM Mono', monospace }

/* ── TIMESTAMPS ───────────────────────────────────────────── */
.ts-badge {
  font-size: 10px;
  background: var(--blue-bg);
  color: var(--blue);
  border: 0.5px solid #1a2e4a;
  padding: 2px 7px;
  border-radius: 4px;
  font-family: 'DM Mono', monospace;
  cursor: pointer;
  white-space: nowrap;
  display: inline-block;
  margin-right: 6px;
  transition: background .2s;
}
.ts-badge:hover { background: #1a3a5a }
.ts-badge.live  {
  animation: ts-live 1s ease-in-out infinite;
  border-color: #2a4a8a;
  color: #7ab3e8;
}
@keyframes ts-live {
  0%,100% { background: var(--blue-bg) }
  50%     { background: #0a1520 }
}

/* ── VIDEO TIMESTAMP PROGRESS BAR ────────────────────────── */
.ts-progress {
  position: relative;
  height: 20px;
  margin-top: 2px;
  cursor: default;
}
.ts-progress::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 50%; transform: translateY(-50%);
  height: 3px;
  background: rgba(255,255,255,0.07);
  border-radius: 2px;
}
.ts-progress-fill {
  position: absolute;
  left: 0;
  top: 50%; transform: translateY(-50%);
  height: 3px;
  background: var(--blue);
  border-radius: 2px;
  pointer-events: none;
  width: 0%;
}
.ts-marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--orange);
  border: 2px solid var(--bg);
  cursor: pointer;
  z-index: 2;
  transition: transform 0.15s;
}
.ts-marker:hover {
  transform: translate(-50%, -50%) scale(1.5);
  z-index: 3;
}
.ts-marker-tooltip {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--orange-bg);
  color: var(--orange);
  border: 0.5px solid #3a2a0a;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
  font-family: 'DM Mono', monospace;
  letter-spacing: 0.5px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
.ts-marker:hover .ts-marker-tooltip { opacity: 1 }

/* Comment highlight on marker click */
.c-item.ts-highlight {
  border-radius: 6px;
  background: rgba(212,145,74,0.08);
  box-shadow: inset 2px 0 0 var(--orange);
  transition: background 0.3s, box-shadow 0.3s;
}

/* Comment form inside left column (below video) */
.ver-body .comment-form {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 0.5px solid var(--border);
  margin-bottom: 4px;
}

.interno-toggle {
  font-size: 10px;
  background: var(--purple-bg);
  color: var(--purple);
  border: 0.5px solid var(--purple-bd);
  padding: 2px 7px;
  border-radius: 4px;
  font-family: 'DM Mono', monospace;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background .2s, border-color .2s;
  user-select: none;
  letter-spacing: 0.5px;
}
.interno-toggle:hover { border-color: var(--purple) }
.interno-toggle:has(.interno-chk:checked) { background: #2e1a4a; border-color: var(--purple); color: #c4a0e8 }
.interno-toggle .interno-chk { display: none }

/* ── COMMENTS ─────────────────────────────────────────────── */
.ver-comments { padding: 1rem 1.25rem }

.thread { display: flex; flex-direction: column; margin-bottom: 12px }
.c-item { padding: 10px 0; border-bottom: 0.5px solid #161616 }
.c-item:last-child { border-bottom: none }

.c-who {
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--muted);
  margin-bottom: 4px;
  font-family: 'DM Mono', monospace;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}
.c-who.is-admin   { color: var(--blue) }
.c-who.is-interno { color: var(--purple) }
.c-text { font-size: 13px; color: #aaa; line-height: 1.6; overflow-wrap: break-word; word-break: break-word; }
.c-link { color: var(--blue); text-decoration: none; border-bottom: 0.5px solid rgba(74,144,217,.4); font-size: 11px; font-family: 'DM Mono', monospace; letter-spacing: .3px; padding-bottom: 1px }
.c-link:hover { color: #7ab3e8; border-bottom-color: var(--blue) }
.btn-del-comment { margin-left: auto; background: none; border: none; color: var(--hint); font-size: 15px; cursor: pointer; padding: 0 3px; line-height: 1; transition: color .2s; flex-shrink: 0 }
.btn-del-comment:hover { color: #c0554a }
.no-comments { font-size: 12px; color: var(--hint); margin-bottom: 10px }

.interno-badge {
  font-size: 9px;
  letter-spacing: 1px;
  background: var(--purple-bg);
  color: var(--purple);
  border: 0.5px solid var(--purple-bd);
  padding: 1px 6px;
  border-radius: 99px;
  text-transform: uppercase;
}

.comment-form { display: flex; gap: 8px; align-items: flex-end; margin-top: 10px }
.comment-form-body { flex: 1; display: flex; flex-direction: column; gap: 6px }
.comment-form textarea {
  width: 100%;
  background: #0d0d0d;
  border: 0.5px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  color: var(--text);
  font-size: 13px;
  font-family: 'DM Sans', sans-serif;
  resize: none;
  min-height: 70px;
  outline: none;
  transition: border-color .2s;
}
.comment-form textarea:focus        { border-color: var(--border2) }
.comment-form textarea::placeholder { color: var(--hint) }
.comment-form textarea::-webkit-scrollbar       { width: 4px }
.comment-form textarea::-webkit-scrollbar-track { background: transparent }
.comment-form textarea::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px }
.comment-form textarea::-webkit-scrollbar-thumb:hover { background: var(--muted) }

.btn-comment {
  background: var(--blue-bg);
  border: 0.5px solid #1a2e4a;
  border-radius: 4px;
  padding: 6px 14px;
  color: var(--blue);
  font-size: 10px;
  font-family: 'DM Mono', monospace;
  letter-spacing: 1px;
  cursor: pointer;
  transition: background .2s;
  white-space: nowrap;
  flex-shrink: 0;
  align-self: flex-end;
}
.btn-comment:hover { background: #1a3a5a }

.interno-note {
  font-size: 10px;
  color: #4a2a6a;
  font-family: 'DM Mono', monospace;
  margin-top: 4px;
  letter-spacing: 1px;
}

/* ── ALERTS ───────────────────────────────────────────────── */
.alert { border-radius: 6px; padding: 10px 14px; margin-bottom: 1.5rem; font-size: 13px }
.alert-ok    { background: var(--green-bg);  border: 0.5px solid #1a4a2a; color: var(--green) }
.alert-info  { background: var(--blue-bg);   border: 0.5px solid #1a2e4a; color: var(--blue) }
.alert-error { background: var(--red-bg);    border: 0.5px solid rgba(192,85,74,.2); color: var(--red) }

/* ── NOTICE BLOCK ─────────────────────────────────────────── */
.notice {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
}
.notice p           { font-size: 13px; color: var(--muted); line-height: 1.7 }
.notice a           { color: #666; text-decoration: none }
.notice a:hover     { color: var(--text) }

/* ── FOOTER ───────────────────────────────────────────────── */
.portal-footer {
  border-top: 0.5px solid var(--border);
  padding: 1.5rem 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}
.portal-footer img   { height: 20px; opacity: .4 }
.portal-footer a {
  font-size: 11px;
  color: var(--muted);
  text-decoration: none;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-family: 'DM Mono', monospace;
  transition: color .2s;
}
.portal-footer a:hover { color: var(--text) }

/* ── LOGIN PAGE ───────────────────────────────────────────── */
body.login-page {
  align-items: center;
  justify-content: flex-start;
  padding: 12vh 2rem 4rem;
}
.login-wrap { width: 100%; max-width: 380px }
.login-logo { text-align: center; margin-bottom: 2.5rem }
.login-logo img { height: 40px; opacity: .9 }
.login-logo p {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 10px;
}
.login-title { font-size: 22px; font-weight: 400; margin-bottom: 6px }
.login-sub   { font-size: 13px; color: var(--muted); margin-bottom: 2rem; line-height: 1.6; min-height: 3.2em }
.login-footer {
  font-size: 11px;
  color: var(--hint);
  margin-top: 2rem;
  text-align: center;
  line-height: 1.8;
  font-family: 'DM Mono', monospace;
  letter-spacing: 1px;
}
.login-footer a           { color: var(--muted); text-decoration: none; transition: color .2s }
.login-footer a:hover     { color: var(--text) }

/* ── TASK LIST ────────────────────────────────────────────── */
.task-group-label { font-size: 10px; letter-spacing: 2px; color: var(--purple); text-transform: uppercase; font-family: 'DM Mono', monospace; margin: 12px 0 5px 0 }
.task-group-label:first-child { margin-top: 0 }
.task-item { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; border-bottom: 0.5px solid #161616 }
.task-item:last-child { border-bottom: none }
.task-item.task-done .task-texto { text-decoration: line-through; color: var(--hint) }
.task-chk {
  width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px;
  border: 0.5px solid #444; border-radius: 3px;
  background: #111; position: relative; display: block;
  transition: background .2s, border-color .2s; padding: 0;
}
button.task-chk { cursor: pointer }
button.task-chk:hover { border-color: var(--green-dark) }
.task-chk.chk-done { background: var(--green-dark); border-color: var(--green-dark) }
.task-chk.chk-done::after { content: ''; position: absolute; left: 4px; top: 1px; width: 4px; height: 7px; border: 1.5px solid #fff; border-top: none; border-left: none; transform: rotate(45deg) }
.task-texto { font-size: 13px; color: #aaa; line-height: 1.5; flex: 1 }
.task-del-btn { background: none; border: none; color: #444; font-size: 16px; cursor: pointer; padding: 0 2px; flex-shrink: 0; line-height: 1; transition: color .2s }
.task-del-btn:hover { color: var(--red) }
.task-item > form { display: flex; align-items: center; flex-shrink: 0 }
form.task-item { background: none; width: 100% }
.task-add-form { display: flex; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 0.5px solid var(--border) }
.task-add-form select,
.task-add-form input[type="text"] { background: #0d0d0d; border: 0.5px solid var(--border); border-radius: 6px; padding: 6px 8px; color: var(--text); font-size: 12px; font-family: 'DM Sans', sans-serif; outline: none }
.task-add-form select { flex-shrink: 0; max-width: 90px }
.task-add-form input[type="text"] { flex: 1; min-width: 0 }
.task-add-form input::placeholder { color: var(--hint) }
.task-add-btn { background: none; border: 0.5px solid var(--border2); border-radius: 6px; padding: 6px 10px; color: var(--muted); font-size: 13px; font-family: 'DM Mono', monospace; cursor: pointer; transition: all .2s; flex-shrink: 0 }
.task-add-btn:hover { border-color: var(--text); color: var(--text) }
/* ── Grupos por cliente (dashboard colaboradores) ── */
.client-group { margin-bottom: 1.25rem }
.client-group-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 4px; cursor: pointer; user-select: none;
  border-bottom: 0.5px solid var(--border); margin-bottom: .75rem;
  transition: opacity .15s;
}
.client-group-header:hover { opacity: .8 }
.client-group-name { font-size: 12px; font-weight: 500; color: #c8c8c8; letter-spacing: .3px }
.client-group-empresa { font-size: 11px; color: var(--muted); margin-left: 8px; font-family: 'DM Mono', monospace }
.client-group-meta { display: flex; align-items: center; gap: 10px; font-size: 10px; font-family: 'DM Mono', monospace; letter-spacing: .5px }
.client-group-chevron { color: var(--muted); font-size: 10px; transition: transform .2s; margin-left: 6px }
.client-group:not(.open) .client-group-chevron { transform: rotate(-90deg) }
.client-group-body { display: block }
.client-group:not(.open) .client-group-body { display: none }

/* ── Links del proyecto ── */
.link-item { display: flex !important; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 0.5px solid #161616 }
.link-item:last-of-type { border-bottom: none }
.link-item-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; overflow: hidden }
.link-label { display: block; font-size: 12px; color: #bbb; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4 }
.link-url { display: block; font-size: 11px; color: #4a90d9; font-family: 'DM Mono', monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; transition: color .2s }
.link-url:hover { color: #7ab3e8 }
.link-add-form { display: flex; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 0.5px solid var(--border); flex-wrap: wrap }
.link-add-form input[type="text"],
.link-add-form input[type="url"] {
  background: #0d0d0d;
  border: 0.5px solid var(--border);
  border-radius: 6px;
  padding: 7px 10px;
  color: var(--text);
  font-size: 12px;
  font-family: 'DM Sans', sans-serif;
  outline: none;
  transition: border-color .2s;
  min-width: 80px;
}
.link-add-form input[type="text"] { flex: 1 }
.link-add-form input[type="url"]  { flex: 2 }
.link-add-form input:focus { border-color: var(--border2) }
.link-add-form input::placeholder { color: var(--hint) }
/* ── Links vista colaborador ── */
.proj-links { background: var(--surface); border: 0.5px solid var(--border); border-radius: 10px; padding: 1.25rem; margin-bottom: 1.5rem }
.proj-links-title { font-size: 10px; letter-spacing: 2px; color: var(--muted); text-transform: uppercase; font-family: 'DM Mono', monospace; margin-bottom: .75rem }
.proj-link-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 0.5px solid #161616 }
.proj-link-row:last-child { border-bottom: none }
.proj-link-label { font-size: 12px; color: #bbb; font-weight: 500; min-width: 120px; flex-shrink: 0 }
.proj-link-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-family: 'DM Mono', monospace; color: #4a90d9; text-decoration: none; border: 0.5px solid rgba(74,144,217,.25); border-radius: 6px; padding: 3px 10px; transition: all .2s; white-space: nowrap }
.proj-link-btn:hover { background: rgba(74,144,217,.08); border-color: rgba(74,144,217,.5); color: #7ab3e8 }

/* ── ENTREGABLE FINAL BANNER ──────────────────────────────── */
.entregable-banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: linear-gradient(135deg, #0a1e10 0%, #0d2416 100%);
  border: 0.5px solid #2a4a2a;
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.entregable-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(76,175,122,.12);
  border: 0.5px solid rgba(76,175,122,.3);
  display: flex; align-items: center; justify-content: center;
  color: var(--green);
  flex-shrink: 0;
}
.entregable-body { flex: 1; min-width: 160px }
.entregable-title { font-size: 15px; font-weight: 500; color: var(--green); margin-bottom: 2px }
.entregable-sub   { font-size: 12px; color: var(--green-dark); font-family: 'DM Mono', monospace; opacity: .8 }
.entregable-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--green-dark);
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  padding: 9px 18px;
  font-size: 12px;
  font-family: 'DM Mono', monospace;
  letter-spacing: .5px;
  transition: all .2s;
  white-space: nowrap;
  flex-shrink: 0;
}
.entregable-btn:hover {
  background: var(--green);
  box-shadow: 0 4px 16px rgba(76,175,122,.25);
  transform: translateY(-1px);
}

/* ── REPORTE PDF BUTTON ───────────────────────────────────── */
.btn-reporte {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: .5px;
  color: #aaa;
  text-decoration: none;
  border: 0.5px solid #333;
  border-radius: 7px;
  padding: 6px 12px;
  font-family: 'DM Mono', monospace;
  transition: all .2s;
  white-space: nowrap;
}
.btn-reporte:hover {
  color: #fff;
  border-color: #555;
  background: #1a1a1a;
}

/* ── MODAL UNIFICADO ──────────────────────────────────────── */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
}
.modal-overlay.open { display: flex }

.modal-box {
  background: var(--surface);
  border: 0.5px solid var(--border2);
  border-radius: 14px;
  padding: var(--sp-8);
  width: 100%;
  max-width: 480px;
  position: relative;
  animation: modal-in .18s ease;
}
.modal-box--wide { max-width: 640px }

@keyframes modal-in {
  from { opacity: 0; transform: translateY(10px) scale(.98) }
  to   { opacity: 1; transform: none }
}

.modal-title {
  font-size: var(--text-md);
  font-weight: 500;
  margin-bottom: var(--sp-6);
}

.modal-close {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  background: none;
  border: none;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: var(--sp-1);
  transition: color .2s;
}
.modal-close:hover { color: var(--text) }

.modal-actions {
  display: flex;
  gap: var(--sp-2);
  justify-content: flex-end;
  margin-top: var(--sp-6);
}

/* ── PROGRESS BAR DE UPLOAD ───────────────────────────────── */
.upload-progress {
  display: none;
  margin-top: var(--sp-3);
}
.upload-progress.visible { display: block }
.progress-track {
  height: 3px;
  background: var(--border2);
  border-radius: 99px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--blue);
  width: 0%;
  transition: width .15s ease;
  border-radius: 99px;
}
.progress-label {
  font-size: var(--text-xs);
  color: var(--muted);
  font-family: 'DM Mono', monospace;
  letter-spacing: 1px;
  margin-top: var(--sp-1);
}

/* ── BÚSQUEDA / FILTER BAR ────────────────────────────────── */
.search-bar {
  position: relative;
  margin-bottom: var(--sp-6);
}
.search-bar input {
  width: 100%;
  background: #0d0d0d;
  border: 0.5px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px 10px 36px;
  color: var(--text);
  font-size: var(--text-base);
  font-family: 'DM Sans', sans-serif;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.search-bar input:focus {
  border-color: rgba(255,255,255,.2);
  box-shadow: 0 0 0 3px rgba(74,144,217,.08);
}
.search-bar input::placeholder { color: var(--hint) }
.search-bar::before {
  content: '⌕';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 16px;
  pointer-events: none;
  line-height: 1;
}
.search-empty {
  font-size: var(--text-sm);
  color: var(--muted);
  padding: var(--sp-8) 0;
  text-align: center;
  display: none;
  font-family: 'DM Mono', monospace;
  letter-spacing: 1px;
}

/* ── NOTIFICATION BADGE ───────────────────────────────────── */
.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--blue);
  color: var(--bg);
  border-radius: 99px;
  font-size: 9px;
  font-family: 'DM Mono', monospace;
  font-weight: 600;
  margin-left: var(--sp-1);
  animation: pulse 2s infinite;
}

/* ── TIMELINE DE APROBACIONES ─────────────────────────────── */
.timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: var(--sp-8);
}
.timeline-item {
  display: flex;
  gap: var(--sp-4);
  position: relative;
  padding-bottom: var(--sp-5);
}
.timeline-item:last-child { padding-bottom: 0 }
.timeline-item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 14px;
  bottom: 0;
  width: 0.5px;
  background: var(--border2);
}
.timeline-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 0.5px solid var(--border2);
  background: var(--surface2);
  flex-shrink: 0;
  margin-top: 2px;
}
.timeline-dot.dot-green  { background: var(--green);  border-color: var(--green) }
.timeline-dot.dot-blue   { background: var(--blue);   border-color: var(--blue) }
.timeline-dot.dot-orange { background: var(--orange); border-color: var(--orange) }
.timeline-dot.dot-muted  { background: var(--hint);   border-color: var(--hint) }

.timeline-body { flex: 1 }
.timeline-label {
  font-size: var(--text-xs);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  font-family: 'DM Mono', monospace;
  margin-bottom: 2px;
}
.timeline-title { font-size: var(--text-base); color: var(--text); margin-bottom: 2px }
.timeline-date  {
  font-size: var(--text-xs);
  color: var(--hint);
  font-family: 'DM Mono', monospace;
  letter-spacing: 1px;
}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media(max-width: 760px) {
  /* Frame.io layout → stack vertical en móvil */
  .ver-frame              { grid-template-columns: 1fr }
  .ver-body               { position: static; border-right: none; border-bottom: 0.5px solid var(--border) }
}

@media(max-width: 640px) {
  .topbar          { padding: .875rem 1rem }
  .topbar-logo img { height: 24px }
  .page-body       { padding: 1.25rem }
  .grid            { grid-template-columns: 1fr }
  .portal-footer   { flex-direction: column; gap: 1rem; text-align: center }
  .ver-date        { margin-left: 0; width: 100% }
  .proj-title      { font-size: 22px }
  .comment-form    { flex-direction: column; align-items: stretch }
}