/* Modal de marcação de foto, catálogo, checklist e reinspeção */
  /* ---------- modal de marcação de foto (caneta) ---------- */
  .annotate-overlay{
    position:fixed; inset:0; background:rgba(20,18,14,.72); z-index:200;
    display:flex; align-items:center; justify-content:center; padding:16px;
  }
  .annotate-box{
    background:#fff; border-radius:14px; width:100%; max-width:640px; max-height:92vh;
    overflow-y:auto; padding:16px; box-shadow:0 20px 50px rgba(0,0,0,.35);
  }
  .annotate-head{
    display:flex; align-items:center; justify-content:space-between; font-family:var(--font-ui);
    font-weight:700; font-size:14px; margin-bottom:10px;
  }
  .annotate-close{border:none; background:transparent; font-size:16px; cursor:pointer; color:var(--muted);}
  .annotate-tools{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px;}
  .annotate-tool-label{display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--muted);}
  .annotate-shape-picker{display:flex; gap:6px;}
  .annotate-shape-btn{
    border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:6px;
    padding:6px 10px; font-size:11.5px; cursor:pointer; font-family:var(--font-ui);
  }
  .annotate-shape-btn.active{border-color:var(--gold); background:var(--gold-light); color:var(--gold-dark); font-weight:600;}
  .annotate-canvas-wrap{
    width:100%; background:#111; border-radius:8px; overflow:hidden; display:flex;
    align-items:center; justify-content:center; touch-action:none;
  }
  .annotate-canvas-wrap canvas{width:100%; height:auto; display:block; cursor:crosshair; touch-action:none;}
  .annotate-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:14px;}

  /* modal de seleção múltipla do catálogo */
  .catalog-picker-box{max-width:480px;}
  .catalog-picker-toolbar{display:flex; gap:8px; margin-bottom:8px;}
  .catalog-picker-list{
    max-height:340px; overflow-y:auto; border:1px solid var(--line); border-radius:8px; padding:4px 6px;
  }
  .catalog-picker-row{
    display:flex; align-items:center; gap:8px; padding:8px 6px; border-bottom:1px dotted var(--line);
    font-size:12.5px; cursor:pointer;
  }
  .catalog-picker-row:last-child{border-bottom:none;}
  .catalog-picker-row:hover{background:var(--paper);}
  .catalog-picker-row input[type=checkbox]{width:16px; height:16px; accent-color:var(--gold); flex-shrink:0;}

  /* checklist estruturado — lista de itens com caixinha de verdade dentro
     da observação, separada do texto livre. Visual discreto tipo "lista
     de conferência" de um laudo profissional. */
  .obs-checklist{margin-top:8px; padding-top:8px; border-top:1px dashed rgba(0,0,0,.12);}
  .obs-checklist-label{
    font-family:var(--font-ui); font-size:10px; font-weight:700; text-transform:uppercase;
    letter-spacing:.1em; color:#8a4a44; margin-bottom:6px;
  }
  .obs-checklist-row{
    display:flex; align-items:center; gap:8px; padding:3px 0;
  }
  .obs-checklist-row input[type=checkbox]{
    width:15px; height:15px; accent-color:var(--bad); flex-shrink:0; cursor:pointer;
  }
  .obs-checklist-text{
    flex:1; border:none; background:transparent; font-family:var(--font-ui); font-size:12.5px;
    color:#5a221e; padding:2px 0; outline:none;
  }
  .obs-checklist-row.checked .obs-checklist-text{color:#a9615a; text-decoration:line-through;}
  .obs-checklist-rm{
    border:none; background:transparent; color:#c98a84; font-size:11px; cursor:pointer;
    opacity:0; transition:opacity .12s ease; padding:2px 4px;
  }
  .obs-checklist-row:hover .obs-checklist-rm{opacity:1;}
  .obs-checklist-add{display:flex; gap:6px; margin-top:4px;}
  .obs-checklist-add input{
    flex:1; border:1px dashed rgba(0,0,0,.18); background:#fff; border-radius:6px;
    padding:5px 8px; font-size:12px; font-family:var(--font-ui); color:#5a221e; outline:none;
  }
  .obs-checklist-add button{
    border:1px solid var(--bad); background:#fff; color:var(--bad); border-radius:6px;
    padding:5px 10px; font-size:11.5px; cursor:pointer; font-family:var(--font-ui); white-space:nowrap;
  }
  .obs-checklist-add button:hover{background:var(--bad-bg);}

  .obsrow-ok .obs-checklist-label{color:#2f7a4d;}
  .obsrow-ok .obs-checklist-row input[type=checkbox]{accent-color:var(--ok);}
  .obsrow-ok .obs-checklist-text{color:#1f4a30;}
  .obsrow-ok .obs-checklist-row.checked .obs-checklist-text{color:#5a8a6a;}
  .obsrow-ok .obs-checklist-add button{border-color:var(--ok); color:var(--ok);}
  .obsrow-ok .obs-checklist-add button:hover{background:var(--ok-bg);}

  /* variante azul quando o item está em Reinspeção — reaproveita a mesma
     caixa (problema original + fotos), só muda a cor pra sinalizar que é
     um acompanhamento, não uma reprovação nova */
  .obsrow-reinsp .obs-tool-btn{border-color:var(--reinsp); color:var(--reinsp);}
  .obsrow-reinsp .obs-tool-btn:hover{background:var(--reinsp-bg);}
  .obsrow-reinsp .obs-editor{border-color:var(--reinsp); background:var(--reinsp-bg); color:#1a3a8f;}
  .obsrow-reinsp .obs-editor:empty:before{color:#5c7fc9;}
  .obsrow-reinsp .quick-tag-btn{border-color:var(--reinsp); color:var(--reinsp);}
  .obsrow-reinsp .quick-tag-btn:hover{background:var(--reinsp-bg);}
  .obsrow-reinsp .obs-checklist-label{color:var(--reinsp);}
  .obsrow-reinsp .obs-checklist-row input[type=checkbox]{accent-color:var(--reinsp);}
  .obsrow-reinsp .obs-checklist-text{color:#1a3a8f;}
  .obsrow-reinsp .obs-checklist-add button{border-color:var(--reinsp); color:var(--reinsp);}
  .obsrow-reinsp .obs-checklist-add button:hover{background:var(--reinsp-bg);}

  .reinsp-banner{
    display:flex; align-items:flex-start; gap:8px; background:var(--reinsp-bg); color:#1a3a8f;
    border-radius:8px; padding:9px 11px; font-size:12px; margin-bottom:10px; line-height:1.4;
  }
  .reinsp-fields{
    display:flex; gap:8px; flex-wrap:wrap; align-items:center; background:#fff;
    border:1.5px solid var(--reinsp); border-radius:8px; padding:9px 10px; margin-bottom:10px;
  }
  .reinsp-fields .rf-label{font-size:11.5px; font-weight:700; color:var(--reinsp); white-space:nowrap;}
  .reinsp-fields input[type=date]{
    border:1px solid var(--line); border-radius:6px; padding:5px 6px; font-size:12px; font-family:var(--font-ui);
  }
  .reinsp-fields input[type=text]{
    flex:1; min-width:160px; border:1px solid var(--line); border-radius:6px; padding:5px 8px;
    font-size:12px; font-family:var(--font-ui);
  }

  .quick-tags{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 8px;}
  .quick-tag-btn{
    border:1px solid var(--bad); background:#fff; color:var(--bad); border-radius:999px;
    padding:4px 10px; font-size:11px; cursor:pointer; font-family:var(--font-ui);
  }
  .quick-tag-btn:hover{background:var(--bad-bg);}