/* Tema común de pdf.ajarillo.es (herramienta, login y administración): sobrio y editorial.
   Un solo acento, bordes finos, sin sombras ni degradados. Se carga DESPUÉS del <style> de cada página. */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root {
  --serif: 'Newsreader', Georgia, serif;
  --sans: 'IBM Plex Sans', system-ui, sans-serif;
  --bg: #f6f3ed;
  --surface: #fffdf9;
  --border: #ddd6c8;
  --text: #1d1b17;
  --text-muted: #6b6558;
  --accent: #1f4d45;
  --accent2: #1f4d45;
  --accent3: #5c554a;
  --violet: #1f4d45;
  --danger: #a3361f;
  --radius: 6px;
}
body.dark {
  --bg: #1f1e1b;
  --surface: #2a2926;
  --border: #433f38;
  --text: #ece8df;
  --text-muted: #a29b8c;
  --accent: #3f8576;
  --accent2: #3f8576;
  --accent3: #8a8273;
  --violet: #3f8576;
}

body, button, input, select, textarea, .name-search, .name-select { font-family: var(--sans); }
body { background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.5; }

/* Tipografía */
.header-title, .home-card h2, #modal-title, .excel-config-title, #progress-title,
#home-screen > div:first-child > div:first-child {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--text);
}
.header-title { font-size: 24px; }
.home-card h2 { font-size: 21px; }

/* Cabecera */
header { background: var(--bg); box-shadow: none; padding: 14px 28px; }
.logo-fallback { background: var(--accent); border-radius: var(--radius); }
.logo-img { border-radius: var(--radius); }

/* Superficies planas */
[style*="background:white"], [style*="background: white"] { background: var(--surface) !important; }
[style*="box-shadow"], .config-bar, .template-panel, .page-card, .home-card, .named-preview-panel,
.drop-zone:hover, #modal-box, #progress-box, #excel-config-box, .toast { box-shadow: none !important; }
.config-bar, .template-panel, .named-preview-panel, .home-card, .page-card,
[style*="padding:24px"][style*="background"] { border: 1px solid var(--border); }
.config-bar, .template-panel, .named-preview-panel, .home-card, .page-card,
.drop-zone, #modal-box, #progress-box, #excel-config-box, .toast, .preview-wrap, .anon-master-wrap { border-radius: var(--radius); }
.page-card { border-width: 1px; }
.page-card.marked { background: var(--surface); border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent) !important; }
.merge-list-item, .anon-thumb-item, .thumb-wrapper, .preview-names { border-radius: 4px; }

/* Botones: uno primario, el resto contorno */
.btn { border-radius: 4px; font-weight: 500; padding: 10px 18px; }
.btn:hover { transform: none; filter: brightness(.94); }
.btn-primary, .btn-success, .btn-warm, .btn-violet { background: var(--accent); color: #fff; }
.btn-outline, .btn-tab, .btn-gray { background: transparent; border: 1px solid var(--border); color: var(--text); }
.btn-outline:hover, .btn-tab:hover, .btn-gray:hover { border-color: var(--accent); filter: none; }
.btn-tab.active, .thumb-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn:disabled { background: var(--border) !important; color: var(--text-muted) !important; opacity: .7; }
.thumb-btn, .ocr-apply-btn { border-radius: 4px; }
.btn-clear-ocr { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn-clear-ocr:hover { background: var(--danger); color: #fff; }
.dark-toggle { border-radius: 4px; }

/* Campos */
.input-styled, .click-select, .name-search, .name-select { border-radius: 4px; background: var(--surface); color: var(--text); }
input:focus, select:focus, textarea:focus, .click-select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.field-label, [style*="text-transform:uppercase"] { letter-spacing: .06em; }

/* Inicio: tarjetas sin iconos, texto a la izquierda */
.home-icon, #modal-icon { display: none; }
.home-card { text-align: left; padding: 22px; min-height: 0; }
.home-card:hover { border-color: var(--accent); }
.home-card p { font-size: 14px; }
.home-grid { counter-reset: n; }
.home-card::before {
  counter-increment: n; content: counter(n, decimal-leading-zero);
  font-family: var(--serif); font-size: 15px; color: var(--accent); margin-bottom: 10px;
}

/* Zona de subida */
.drop-zone { border: 1.5px dashed var(--border); background: var(--surface); }
.drop-zone:hover { transform: none; border-color: var(--accent); }

/* Chips, avisos, progreso */
.status-pill { border-radius: 4px; background: transparent; }
.mark-badge { box-shadow: none; border-radius: 4px; }
.ocr-box { background: var(--bg); border-color: var(--border); border-radius: 4px; }
.ocr-suggested { color: var(--accent); }
#progress-bar-track { border-radius: 2px; background: var(--border); }
#progress-bar-fill { background: var(--accent); border-radius: 2px; }
.footer-actions { background: var(--bg); border-top: 1px solid var(--border); padding-top: 16px; }
.footer-app { background: transparent; border-color: var(--border); }
.toast { background: var(--text); color: var(--bg); border-radius: 4px; border-left-width: 3px; }
#modal-overlay, #progress-overlay, #excel-config-overlay { backdrop-filter: none; background: rgba(29,27,23,.45); }
.preview-names { background: var(--bg); }

/* Modo oscuro: los colores fijos del <style> original pasan a la paleta cálida */
body.dark header, body.dark .config-bar, body.dark .template-panel, body.dark .page-card, body.dark .home-card,
body.dark .named-preview-panel, body.dark .footer-app, body.dark #modal-box, body.dark #progress-box,
body.dark #excel-config-box, body.dark .drop-zone { background: var(--surface); border-color: var(--border); }
body.dark header { background: var(--bg); }
body.dark .btn-outline, body.dark .btn-tab, body.dark .btn-gray, body.dark .status-pill,
body.dark .name-search, body.dark .name-select, body.dark .input-styled, body.dark .click-select,
body.dark .merge-list-item { background: transparent; border-color: var(--border); color: var(--text); }
body.dark .preview-names, body.dark .thumb-wrapper, body.dark .anon-master-wrap, body.dark .ocr-box { background: var(--bg); border-color: var(--border); }
body.dark .page-card.marked { background: var(--surface); }
body.dark .toast { background: var(--text); color: var(--bg); }
body.dark .footer-actions { background: var(--bg); }