/* ---------- Diálogos ---------- */
dialog{
  border:none;
  border-radius:var(--r-xl);
  padding:0;
  background:var(--surface);
  color:var(--ink);
  box-shadow:var(--shadow-lg);
  width:min(520px, calc(100vw - 32px));
  max-height:calc(100vh - 48px);
  overflow-y:auto;
}
dialog::backdrop{background:rgba(10,10,12,0.4);}
dialog[open]{animation:dlg-in .16s cubic-bezier(.2,.8,.2,1);}
dialog[open]::backdrop{animation:fade-in .16s ease;}
@keyframes dlg-in{from{opacity:0;transform:translateY(6px) scale(.99);}to{opacity:1;transform:none;}}
@keyframes fade-in{from{opacity:0;}to{opacity:1;}}
#dlg{width:min(600px, calc(100vw - 32px));}

.dlg-inner{position:relative;padding:20px 22px 18px;}
.dlg-inner > h2{font-size:16px;font-weight:600;margin:0 0 18px;letter-spacing:-0.015em;padding-right:40px;}
.dlg-close{
  position:absolute;
  top:14px;
  right:14px;
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border:none;
  border-radius:var(--r-md);
  background:transparent;
  color:var(--ink-faint);
  cursor:pointer;
  transition:background .12s ease, color .12s ease;
}
.dlg-close:hover{background:var(--hover);color:var(--ink);}
/* Primer proyecto: no se puede cerrar el diálogo. */
dialog.is-onboarding .dlg-close{display:none;}
/* Y la app queda oculta hasta que exista el proyecto. */
body.is-onboarding .app{visibility:hidden;}
.dlg-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin:20px -22px -18px;
  padding:12px 22px;
  border-top:1px solid var(--line);
  background:var(--surface);
  border-radius:0 0 var(--r-xl) var(--r-xl);
  /* Guardar/Cancelar siempre a la vista aunque el diálogo tenga scroll. */
  position:sticky;
  bottom:0;
  z-index:3;
}
.dlg-actions .right{display:flex;gap:8px;margin-left:auto;}
.lock-error{font-size:12.5px;color:var(--danger);margin:0 0 10px;}

.view-rows{display:flex;flex-direction:column;margin-bottom:16px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;}
.view-row{
  display:flex;
  align-items:baseline;
  gap:12px;
  font-size:13.5px;
  padding:9px 12px;
  border-bottom:1px solid var(--line);
}
.view-row:last-child{border-bottom:none;}
.view-row .view-label{flex:none;width:96px;font-size:12.5px;color:var(--ink-faint);}
.view-row .view-value{color:var(--ink);word-break:break-word;-webkit-user-select:text;user-select:text;}
.view-rows:empty{display:none;}
.view-notas{
  font-size:13px;
  line-height:1.55;
  color:var(--ink);
  white-space:pre-wrap;
  background:var(--surface-2);
  border-radius:var(--r-lg);
  padding:10px 12px;
}
.mv-when{font-size:13.5px;color:var(--ink-soft);margin:-10px 0 18px;}
.mv-link{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:18px;}
.mv-url{flex-basis:100%;font-size:12px;color:var(--ink-faint);margin:2px 0 0;word-break:break-all;-webkit-user-select:text;user-select:text;}
dialog .dlg-inner > .cat{padding-right:40px;margin-bottom:10px;}

/* Notas de tareas (formulario) */
.notes-list{max-height:230px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;margin-bottom:10px;}
.note-item{background:var(--surface-2);border-radius:var(--r-lg);padding:8px 12px;}
.note-date{font-size:11.5px;color:var(--ink-faint);margin-bottom:2px;font-variant-numeric:tabular-nums;}
.note-text{font-size:13px;white-space:pre-wrap;line-height:1.5;}
.note-item img{display:block;max-width:180px;max-height:130px;border-radius:var(--r-md);margin-top:8px;cursor:zoom-in;object-fit:cover;border:1px solid var(--line);}
.note-del{float:right;font-family:inherit;font-size:11.5px;color:var(--ink-faint);background:none;border:none;cursor:pointer;padding:0;}
.note-del:hover{color:var(--danger);}
.note-add-box{border:1px solid var(--line-strong);border-radius:var(--r-lg);padding:6px;background:var(--surface);box-shadow:var(--shadow-sm);}
.note-add-box:focus-within{border-color:var(--accent-solid);box-shadow:0 0 0 3px var(--focus);}
.note-add-box textarea{width:100%;border:none;box-shadow:none;background:transparent;padding:4px 6px;min-height:52px;}
.note-add-box textarea:focus{box-shadow:none;}
.note-image-preview{position:relative;margin:6px 0;display:inline-flex;align-items:center;gap:8px;}
.note-image-preview img{max-width:120px;max-height:90px;border-radius:var(--r-md);display:block;}
.note-add-actions{display:flex;justify-content:flex-end;gap:6px;margin-top:4px;}

/* Vínculos de tareas (formulario) */
.linked-list{display:flex;flex-direction:column;gap:6px;margin-bottom:8px;}
.linked-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:7px 10px;
}
.linked-main{min-width:0;flex:1;}
.linked-title{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.linked-meta{font-size:12px;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.linked-actions{display:flex;align-items:center;gap:6px;flex:none;}
.linked-pass{font-family:var(--mono);font-size:12px;color:var(--ink-soft);max-width:120px;overflow-x:auto;white-space:pre;-webkit-user-select:text;user-select:text;}
.linked-empty{font-size:12.5px;color:var(--ink-faint);margin:0 0 8px;}

.lightbox{
  position:fixed;
  inset:0;
  background:rgba(8,8,10,0.88);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1000;
  cursor:zoom-out;
  padding:24px;
}
.lightbox img{max-width:100%;max-height:100%;border-radius:var(--r-lg);box-shadow:var(--shadow-lg);}

/* ---------- Barra de desplazamiento de los diálogos ---------- */
/* Fina, con el pulgar redondeado y separada de las esquinas del diálogo. Solo
   se destaca al pasar el ratón o mientras se arrastra. */
dialog::-webkit-scrollbar{width:12px;}
dialog::-webkit-scrollbar-track{background:transparent;margin:14px 0;}
dialog::-webkit-scrollbar-thumb{
  background:var(--line-strong);
  background:color-mix(in srgb, var(--ink-faint) 38%, transparent);
  border:3px solid transparent;
  border-radius:999px;
  background-clip:padding-box;
  min-height:36px;
  transition:background-color .15s ease;
}
dialog:hover::-webkit-scrollbar-thumb{background-color:var(--ink-faint);background-color:color-mix(in srgb, var(--ink-faint) 60%, transparent);}
dialog::-webkit-scrollbar-thumb:hover,
dialog::-webkit-scrollbar-thumb:active{background-color:var(--ink-faint);}
/* Firefox no conoce ::-webkit-scrollbar: allí se usan las propiedades estándar
   (en Chrome reciente anularían el estilo redondeado de arriba). */
@supports not selector(::-webkit-scrollbar){
  dialog{scrollbar-width:thin;scrollbar-color:var(--ink-faint) transparent;scrollbar-color:color-mix(in srgb, var(--ink-faint) 45%, transparent) transparent;}
}