/* ==========================================================================
   Biblioteca (Penpot: "Biblioteca > Modelos de Evento", "Biblioteca > Checklist",
   "... > Festa de 15 > Checklist" / "> Tarefas"). Uses the .ed shell of event.css
   (global bar + section tabs) and the .msgm modals of overlay.css.
   Measurements from scripts/penpot/dump_board.js. Row strokes are 15% ink on the bottom side.
   ========================================================================== */
/* Penpot updated tab widths on 2026-10-24: inactive 168 px, active 184 px. Scoped to biblioteca only. */
.bib .ed__tab { width: 168px; }
.bib .ed__tab--on { width: 184px; }
.lib { display: flex; flex-direction: column; gap: 16px; padding: 20px; box-sizing: border-box; }
.lib__tools { display: flex; align-items: center; justify-content: space-between; min-height: 52px; }
.lib__search { width: 300px; height: 36px; box-sizing: border-box; display: flex; align-items: center; gap: 7px; padding: 8px; border: 1px solid var(--ink-15); border-radius: 4px; background: var(--color-surface); }
.lib__search--sm { width: 254px; height: 32px; }
.lib__search .material-icons { order: -1; font-size: 16px; color: #111827; }
.lib__search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-family: var(--font-sans); font-size: 12px; font-weight: 600; line-height: 16px; color: var(--color-ink); }
.lib__search input::placeholder { color: var(--ink-30); }
.lib__new { height: 40px; padding: 8px 20px; }
.lib__new .material-icons { font-size: 16px; }
.lib__tools--lg .lib__new { height: 52px; }
.lib__empty { margin: 48px auto; color: var(--ink-60); font-size: 16px; text-align: center; }

.lib__table { display: flex; flex-direction: column; }
.lib__cols { display: flex; align-items: center; gap: 16px; height: 40px; box-sizing: border-box; padding: 8px 0; border-bottom: 1px solid var(--ink-15); background: var(--color-surface); font-size: 12px; font-weight: 600; line-height: 16px; color: var(--ink-60); }
.lib__cols span:first-child { flex: 1; }
.lib__cols span:last-child { width: 32px; }
.lib__row { display: flex; align-items: center; gap: 16px; height: 104px; box-sizing: border-box; padding: 16px 0; border-bottom: 1px solid var(--ink-15); }
.lib__row-name { flex: 1; min-width: 0; font-size: 16px; font-weight: 700; line-height: 24px; color: var(--color-ink); text-decoration: none; overflow-wrap: anywhere; }
.lib__row:hover { background: var(--color-primary-soft); }
.lib__icon-btn { width: 32px; height: 32px; box-sizing: border-box; flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 8px; border: 1px solid var(--color-ink); border-radius: 4px; background: transparent; color: #111827; cursor: pointer; text-decoration: none; }
.lib__icon-btn .material-icons { font-size: 16px; }

/* Checklist: services · task count · actions */
.svc-cols, .svc-row { display: grid; grid-template-columns: 520px minmax(0, 1fr) 72px; align-items: center; }
.svc-cols { height: 48px; box-sizing: border-box; border-bottom: 1px solid var(--ink-15); font-size: 12px; font-weight: 600; line-height: 16px; color: var(--ink-60); }
.svc-cols__act { text-align: right; }
.svc-row { position: relative; height: 82px; }
.svc-row::after { content: ""; position: absolute; left: 20px; bottom: 0; width: 500px; height: 1px; background: var(--ink-15); }
.svc-row__name { padding: 12px 20px; font-size: 16px; line-height: 24px; overflow-wrap: anywhere; }
.svc-row__count { font-size: 16px; line-height: 24px; color: var(--ink-60); }
.svc-row__act { display: flex; justify-content: flex-end; gap: 8px; }

/* Tarefas: periods of 30 days */
.tt { display: flex; flex-direction: column; border-radius: 4px; }
.tt__head { display: flex; align-items: center; justify-content: space-between; height: 40px; box-sizing: border-box; padding: 0 20px; background: #e5e7eb; font-size: 12px; font-weight: 600; line-height: 16px; color: var(--ink-60); }
.tt__head span:last-child { font-size: 16px; font-weight: 400; line-height: 24px; color: var(--ink-30); }
.tt__list { padding: 0 20px; }
.tt__task { width: 100%; box-sizing: border-box; display: grid; grid-template-columns: 690px minmax(0, 1fr); align-items: center; min-height: 46px; padding: 4px 0 5px; border: 0; border-bottom: 1px solid #edeef2; background: transparent; font-family: var(--font-sans); text-align: left; color: inherit; cursor: pointer; }
.tt__task:hover { background: var(--color-primary-soft); }
.tt__what, .tt__when { display: flex; flex-direction: column; min-width: 0; padding-right: 16px; }
.tt__title, .tt__lead { font-size: 12px; line-height: 20px; color: var(--ink-60); overflow-wrap: anywhere; }
.tt__service, .tt__flex { font-size: 12px; line-height: 16px; color: var(--ink-30); }
.tt__total { margin: 0; padding: 24px 0; text-align: center; font-size: 12px; line-height: 16px; color: var(--ink-30); }

/* Modals */
.msgm--task { width: 899px; }
.msgm__row--task { display: grid; grid-template-columns: 306px 306px 175px; gap: 24px; }
.msgm__select .msgm__input { padding-right: 56px; }
.msgm__btn--danger { margin-right: auto; border-color: #b91c1c; color: #b91c1c; }
.ltask { align-items: flex-start; }
.ltask__desc { font-size: 12px; line-height: 20px; color: var(--ink-60); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }

.lib__ref { margin: 16px 20px 0; font-size: 12px; line-height: 20px; color: var(--ink-60); }
.lib__ref-link { color: var(--color-primary); font-weight: 600; text-decoration: none; }
.lib__blank { align-self: center; }