/* ─────────────────────────────────────────────
   fill.css
   Pagina de llenado: formulario o formulario repetido
   a la izquierda, previsualizacion de solo lectura a
   la derecha. Nada se arrastra aca.
───────────────────────────────────────────────*/

#view-fill { height: 100vh; width: 100%; flex-direction: column; }

.fill-topbar {
  height: var(--topbar-h); flex-shrink: 0; display: flex; align-items: center; gap: 10px;
  padding: 0 16px; background: var(--ink-950); color: var(--paper); border-bottom: 1px solid var(--ink-800);
}
.fill-topbar .editor-back { background: transparent; border: none; color: var(--paper); width: 34px; height: 34px; border-radius: var(--r-pill); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; flex-shrink: 0; text-decoration: none; }
.fill-topbar .editor-back:hover { background: rgba(255,255,255,.08); }
.fill-topbar-spacer { flex: 1; }
.fill-topbar .btn-ghost, .fill-topbar a.btn-ghost { border-color: rgba(255,255,255,.22); color: #fff; }
.fill-preview-toggle-mobile { display: none; border-color: rgba(255,255,255,.22); color: #fff; }

.fill-body { flex: 1; display: flex; min-height: 0; }

.fill-panel { width: 340px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.fill-panel-scroll { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 18px; }
.fill-tabs-wrap { padding: 12px 16px 0; }
.fill-download-wrap { padding: 14px 16px; border-top: 1px solid var(--line); }

.fill-preview-col { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #E2EAEC; }
.fill-preview-scroll { flex: 1; overflow: auto; display: flex; align-items: flex-start; justify-content: center; padding: 44px 30px; }
.fill-preview-mobile-bar { display: none; }

/* la hoja de solo lectura: mismo look que el editor, sin manijas ni seleccion */
.ro-page { position: relative; background: #fff; box-shadow: 0 1px 3px rgba(23,23,23,.15), 0 18px 44px rgba(23,23,23,.16); overflow: hidden; }
.ro-el { position: absolute; pointer-events: none; }

/* ───── campo de fecha con precision variable (dia / mes / solo año) ───── */
.partialdate-row { display: flex; gap: 8px; }
.partialdate-row select { flex: 0 0 132px; }
.partialdate-row input { flex: 1; min-width: 0; }

/* ───── lote: lista de items agregados ───── */
.batch-items { display: flex; flex-direction: column; gap: 6px; }
.batch-item-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--paper); border-radius: var(--r-xs); font-size: 12.5px; }
.batch-item-num { font-family: var(--font-mono); font-size: 10.5px; color: var(--accent); width: 18px; flex-shrink: 0; }
.batch-item-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-800); }
.batch-item-del { background: none; border: none; color: var(--ink-400); cursor: pointer; padding: 3px; border-radius: 5px; }
.batch-item-del:hover { color: var(--seal); background: var(--seal-soft); }
.batch-empty { font-size: 12px; color: var(--ink-400); text-align: center; padding: 14px 0; }

@media (max-width: 1024px) {
  .fill-topbar { flex-wrap: wrap; height: auto; min-height: var(--topbar-h); padding: 8px 12px; row-gap: 8px; }
}

/* mobile: el formulario ocupa toda la pantalla; la vista previa es un
   cajon de pantalla completa que se abre con el boton del ojo, en vez
   de repartirse el alto con el formulario (ahi era donde no se veian
   bien los campos). */
@media (max-width: 860px) {
  .fill-preview-toggle-mobile { display: inline-flex; }
  .fill-panel { width: 100%; max-height: none; border-right: none; }

  .fill-preview-col {
    position: fixed; inset: 0; z-index: 250; background: var(--surface);
    transform: translateY(100%); transition: transform .22s ease-out;
  }
  .fill-preview-col.open { transform: none; }
  .fill-preview-mobile-bar {
    display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
    height: var(--topbar-h); padding: 0 10px 0 18px; border-bottom: 1px solid var(--line);
    font-size: 14px; font-weight: 600; color: var(--ink-950);
  }
  .fill-preview-scroll { padding: 20px 12px; }
}

@media (max-width: 480px) {
  .editor-title-wrap .editor-title { max-width: 30vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}