/* Módulo bitácora (pantallas 30-33). Solo tokens: nada de colores literales. Prefijos propios `bit-` y `firma-`. */

/* ---------- Filtros de la lista de operaciones ---------- */
.bit-filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 12px 14px; margin-bottom: 14px; }
.bit-filtro-fecha { display: grid; gap: 3px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.bit-filtro-fecha .campo-input { height: 34px; width: 160px; }
.bit-filtros .seg-toggle { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.bit-filtros .seg-toggle button { flex: none; }

/* ---------- Renglón (tabla) ---------- */
.bit-celda-titulo { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bit-pills-fila { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.bit-doc-si { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-2); }
.bit-doc-si i { color: var(--danger); }

/* Pill que se alterna (Facturable / Facturado): el estado va en aria-pressed, el ícono y el texto. */
.bit-toggle { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--ink-2); font: 600 12.5px var(--font-ui); cursor: pointer; white-space: nowrap; }
.bit-toggle[aria-pressed="true"] { background: var(--success-soft); border-color: var(--success); color: var(--success); }
.bit-toggle:hover:not(:disabled) { border-color: var(--border-strong); }
.bit-toggle:disabled { cursor: default; opacity: .8; }
.bit-toggle-sm { height: 24px; padding: 0 8px; font-size: 11.5px; gap: 4px; }
.bit-toggles { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }

/* ---------- Drawer de la operación ---------- */
.bit-pills { display: flex; flex-wrap: wrap; gap: .4rem; }
.bit-tabs { display: flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; margin: 14px 0 12px; }
.bit-tabs button { flex: none; }
.bit-error { margin-top: 14px; }
.bit-ficha { margin: 18px 0 0; display: grid; gap: 6px; font-size: 12.5px; }
.bit-ficha > div { display: flex; gap: 8px; }
.bit-ficha dt { min-width: 84px; color: var(--ink-3); font-weight: 600; }
.bit-ficha dd { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.bit-ayuda { font-size: 12.5px; margin: 6px 0 10px; }
.bit-pie-seccion { display: flex; justify-content: flex-end; margin: 12px 0 4px; }

/* Adjuntos */
.bit-adj-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.bit-adj-acciones label.btn { cursor: pointer; position: relative; }
.bit-adj-acciones label.btn:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.bit-subidas { display: grid; gap: 4px; margin-bottom: 10px; font-size: 12.5px; }
.bit-subida { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bit-subida i { color: var(--accent); }
.bit-subida.error i { color: var(--danger); }
.bit-subida-nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-1); }
.bit-adj-lista, .bit-cobros, .bit-pend-lista { list-style: none; margin: 0; padding: 0; }
.bit-adj, .bit-cobro { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); min-width: 0; }
.bit-adj:last-child, .bit-cobro:last-child { border-bottom: 0; }
.bit-adj-check { flex: none; display: grid; place-items: center; width: 28px; height: 28px; }
.bit-adj-mini { flex: none; width: 52px; height: 52px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--sunken); color: var(--ink-3); display: grid; place-items: center; overflow: hidden; cursor: pointer; padding: 0; font-size: 20px; }
.bit-adj-mini:disabled { cursor: default; }
.bit-adj-mini img { width: 100%; height: 100%; object-fit: cover; }
.bit-adj-txt { flex: 1; min-width: 0; }
.bit-adj-nombre { font: 600 13.5px var(--font-ui); color: var(--ink-1); overflow-wrap: anywhere; }
.bit-adj-meta { font-size: 12px; overflow-wrap: anywhere; }
.bit-cobro-alta { display: flex; gap: 8px; margin-top: 10px; }
.bit-cobro-alta .campo-input { flex: 1; min-width: 0; }

/* Documento y firma */
.bit-doc { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--sunken); }
.bit-doc-icono { font-size: 24px; color: var(--danger); }
.bit-enlace { margin: 12px 0; padding: 12px; border-radius: var(--radius); background: var(--accent-soft); display: grid; gap: 6px; }
.bit-firma-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 12px; }
.bit-firma-form .campo { flex: 1 1 150px; min-width: 0; }

/* ---------- Agenda ---------- */
.bit-agenda { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.bit-leyenda { display: flex; gap: 16px; font-size: 12px; margin-top: 8px; }
.bit-leyenda > span { display: inline-flex; align-items: center; gap: 6px; }
.bit-pendientes .panel-cabeza { display: flex; align-items: center; gap: 8px; }
.bit-pendientes h2 { flex: 1; margin: 0; font: 700 15px var(--font-brand); color: var(--ink-1); }
.bit-pend { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--border); }
.bit-pend:last-child { border-bottom: 0; }
.bit-pend-info { flex: 1; min-width: 0; display: grid; gap: 2px; text-align: left; border: 0; background: transparent; padding: 0; cursor: pointer; color: inherit; font: inherit; }
.bit-pend-titulo { font: 600 13.5px var(--font-ui); color: var(--ink-1); overflow-wrap: anywhere; }
.bit-pend-meta { font-size: 12px; overflow-wrap: anywhere; }
.bit-pend-info:hover .bit-pend-titulo { color: var(--accent); }

/* ---------- Conocimiento ---------- */
.bit-con { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; align-items: start; }
.bit-carpetas { display: grid; gap: 2px; padding: 8px; max-height: calc(100vh - 200px); overflow-y: auto; }
.bit-carpeta { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 10px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-2); font: 500 13.5px var(--font-ui); cursor: pointer; text-align: left; min-width: 0; }
.bit-carpeta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bit-carpeta i { color: var(--ink-3); flex: none; }
.bit-carpeta:hover { background: var(--sunken); color: var(--ink-1); }
.bit-carpeta[aria-pressed="true"] { background: var(--accent-soft); color: var(--ink-1); font-weight: 600; }
.bit-carpeta[aria-pressed="true"] i { color: var(--accent); }
.bit-notas { overflow: hidden; }
.bit-notas-titulo { padding: 8px 16px 0; font-size: 12.5px; }
.bit-nota { align-items: flex-start; cursor: pointer; }
.bit-nota-texto { margin-top: 4px; font-size: 12.5px; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

@media (max-width: 1100px) {
  .bit-agenda { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .bit-filtros { padding: 10px 12px; }
  .bit-filtro-fecha { flex: 1 1 calc(50% - 10px); }
  .bit-filtro-fecha .campo-input { width: 100%; }
  .bit-celda-titulo { max-width: none; white-space: normal; }
  .bit-pills-fila { justify-content: flex-start; }
  .bit-con { grid-template-columns: minmax(0, 1fr); }
  .bit-carpetas { display: flex; overflow-x: auto; scrollbar-width: none; max-height: none; padding: 6px; }
  .bit-carpeta { flex: none; border: 1px solid var(--border); border-radius: 999px; min-height: 32px; }
  .bit-nota { flex-wrap: wrap; }
  .bit-firma-form .btn { flex: 1 1 100%; }
}

/* ---------- Firma del cliente (página pública, sin shell) ---------- */
.firma-pagina { min-height: 100vh; min-height: 100dvh; background: var(--canvas); display: flex; justify-content: center; padding: 24px 16px; }
.firma-caja { width: 100%; max-width: 560px; display: grid; gap: 14px; align-content: start; }
.firma-marca { display: flex; align-items: center; gap: 10px; }
.firma-marca-nombre { font: 800 18px var(--font-brand); color: var(--ink-1); }
.firma-seccion { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 18px; display: grid; gap: 12px; min-width: 0; }
.firma-seccion h1 { margin: 0; font: 700 20px var(--font-brand); color: var(--ink-1); }
.firma-datos { margin: 0; display: grid; gap: 8px; }
.firma-datos > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; }
.firma-datos dt { color: var(--ink-3); font-size: 12.5px; font-weight: 600; }
.firma-datos dd { margin: 0; color: var(--ink-1); font-size: 14px; overflow-wrap: anywhere; }
.firma-texto { white-space: pre-wrap; }
.firma-vence, .firma-legal { margin: 0; font-size: 12.5px; }
.firma-lienzo-caja { position: relative; border: 1.5px dashed var(--border-strong); border-radius: var(--radius); background: var(--card); }
.firma-lienzo-caja:not(.vacio) { border-style: solid; }
.firma-lienzo { display: block; width: 100%; height: 200px; touch-action: none; cursor: crosshair; border-radius: var(--radius); }
.firma-guia { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; pointer-events: none; font-size: 14px; }
.firma-acciones { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.firma-mensaje { text-align: center; justify-items: center; }
.firma-mensaje > i { font-size: 36px; color: var(--warning); }
.firma-mensaje.ok > i { color: var(--success); }
.firma-mensaje p { margin: 0; color: var(--ink-2); }

@media (max-width: 480px) {
  .firma-pagina { padding: 16px 12px; }
  .firma-datos > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .firma-acciones .btn { flex: 1 1 auto; justify-content: center; }
}