/* Importar (js/views/import.js, ai-reader.js). */

/* Import review */
.review-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; padding: 12px 0; border-top: 1px solid var(--line); }
.review-row:first-child { border-top: 0; }
.review-row.off .main { opacity: .6; }
.review-row .editor { grid-column: 2 / -1; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.review-row .editor .wide { grid-column: 1 / -1; }

/* UX Importar: readable review rows on a phone, touch targets of 40px or more,
   inline errors next to the answer and a save bar that stays above the menu. */
.import-view h2:focus:not(:focus-visible) { outline: none; }
.import-view h2 { scroll-margin-top: 12px; }
.import-view .btn.small, .import-view summary { min-height: 40px; }
.import-view summary { padding-block: 9px; cursor: pointer; color: var(--accent); font-weight: 650; }
.import-view pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 50vh; overflow: auto; margin: 8px 0 0; padding: 12px; border-radius: 12px; background: var(--panel-2); }
.import-send > .btn { flex: 1 1 auto; }
.import-error { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--bad-soft); color: var(--bad); font-size: .9rem; font-weight: 600; }
.import-view textarea[aria-invalid="true"] { border-color: var(--bad); }
.review-row { grid-template-columns: auto minmax(0, 1fr) auto; }
.review-row .main:not(.stack) { display: grid; gap: 4px; }
.review-row .title { font-weight: 600; overflow-wrap: anywhere; }
.review-row .meta { color: var(--muted); font-size: .85rem; overflow-wrap: anywhere; }
.review-row .main > .row { gap: 6px 8px; }
.review-row .badge { white-space: normal; }
.review-row .btn.small { min-height: 40px; }

/* The touch area stays inside the row: rows use content-visibility, which clips what sticks
   out, and on a phone a negative margin cut the checkbox against the card's edge. */
label.review-check { display: grid; place-items: center; width: 40px; height: 44px; margin: -11px -6px -11px -8px; cursor: pointer; }
label.review-check input { width: 22px; height: 22px; margin: 0; accent-color: var(--accent); }
.review-row { padding-left: 8px; padding-right: 2px; }
.same-day { font-size: .85rem; color: var(--muted); }
.same-day > summary { cursor: pointer; padding: 6px 0; }
.same-day ul { list-style: none; margin: 4px 0 0; padding: 8px 10px; display: grid; gap: 4px; border-radius: 10px; background: var(--panel-2); }
.same-day li { display: flex; justify-content: space-between; gap: 10px; min-width: 0; }
.same-day li > span:first-child { overflow-wrap: anywhere; min-width: 0; }
.same-day li .amount { font-weight: 600; }
.review-row .editor { padding-top: 4px; }
.import-savebar { position: sticky; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 10; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); }
.import-savebar .btn.primary { flex: 1 1 auto; }
@media (min-width: 860px) { .import-savebar { bottom: 16px; } .import-savebar .btn.primary { flex: 0 1 auto; } }

/* UX Importar: step 1 folded into one line once a type is chosen, the AI used last
   standing out, and bulk tick plus "Solo para revisar" above long review lists. */
.import-chosen .card-head p { margin: 2px 0 0; color: var(--text); font-weight: 650; font-size: 1rem; }
.import-chosen h2 { font-size: .95rem; color: var(--muted); }
.import-view .btn.last-ai { border-color: var(--accent); background: var(--accent-soft); color: var(--text); font-weight: 700; }
.import-tools { gap: 8px; margin-bottom: 4px; }
.import-tools .btn.small { flex: 1 1 auto; }
@media (min-width: 560px) { .import-tools .btn.small { flex: 0 1 auto; } }

/* Leer fotos con IA (js/views/ai-reader.js), on top of Importar. */
.ai-reader .row { gap: 8px; }
.ai-reader .btn { min-height: 44px; }
.ai-files { overflow-wrap: anywhere; }

/* UX Importar: the photo chooser shows where keyboard focus is (its input is hidden),
   and a statement total that cannot be read is marked in red. */
.ai-reader .row:has(#ai-files:focus-visible) > label.btn { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }
.ai-reader p[role="status"]:empty { display: none; }
.statement-fields input[aria-invalid="true"] { border-color: var(--bad); }

/* UX Importar: the CSV chosen with a button like the photo one, "Copiadas" on the copy
   button, unmatched rows to delete crossed out (kept ones read normally) and one line
   per result with a check on the final screen. */
.import-csv { display: grid; gap: 6px; }
.import-csv p { margin: 0; }
.import-csv .row:has(#import-csv:focus-visible) > label.btn { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }
.import-csv .ai-files:empty { display: none; }
.import-view .btn.copied { border-color: var(--accent); color: var(--accent); }
.review-row.unmatched-row .badge { justify-self: start; }
.review-row.removing .title, .review-row.removing .amount { text-decoration: line-through; color: var(--muted); }
.import-done ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.import-done li { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.import-done li svg { flex: none; width: 20px; height: 20px; padding: 3px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.import-done li svg path { stroke-width: 2.5; }
/* UX Importar: each row's editor marks a bad date or amount as it changes and says how
   Nido read the amount; several notes from the AI share one box with a list. */
.review-row .editor .field { min-width: 0; }
.review-row .editor input, .review-row .editor select { min-width: 0; width: 100%; }
.review-row .editor input[aria-invalid="true"] { border-color: var(--bad); }
.review-row .editor .field small { font-variant-numeric: tabular-nums; }
.review-row .editor .field small[hidden] { display: none; }
/* UX Importar: a balance whose amount or currency cannot be read marks that field in red,
   now that each one has its visible label; the row's amount keeps its width while it is edited. */
.review-row .main.stack .field input[aria-invalid="true"], .review-row .main.stack .field select[aria-invalid="true"] { border-color: var(--bad); }
.review-row > .amount { font-variant-numeric: tabular-nums; }