@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --bg: #F2F4F2;
  --panel: #FFFFFF;
  --ink: #1C2321;
  --ink-soft: #4B5652;
  --line: #DBE1DD;
  --teal: #1F6F72;
  --teal-dark: #17565A;
  --teal-tint: #E4F0EF;
  --good: #2C7A54;
  --good-tint: #E4F3EA;
  --warn: #B4652E;
  --warn-tint: #FFF7E0;
  --danger: #B23A3A;
  --danger-tint: #FBEAEA;
  --new-bg: #FFF7E0;
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  background: var(--bg);
  color: var(--ink);
  font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  line-height: 1.5;
}

a{ color: var(--teal); }

.wrap{ max-width: 1200px; margin: 0 auto; padding: 28px 24px 64px; }

.topbar{ background: var(--panel); border-bottom: 1px solid var(--line); }
.topbar-inner{ max-width: 1200px; margin: 0 auto; padding: 14px 24px; display:flex; justify-content:space-between; align-items:center; }
.topbar .brand{ font-weight:600; color: var(--teal-dark); }
.topbar nav a{ margin-left: 18px; font-size: 14px; color: var(--ink-soft); text-decoration:none; font-weight:500; }
.topbar nav a:hover{ color: var(--teal-dark); }

.page-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom: 20px; }
.page-head h1{ margin:0; font-size: 22px; color: var(--teal-dark); }

h1{ color: var(--teal-dark); }
.muted{ color: var(--ink-soft); }

.panel{ background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow:hidden; margin-bottom: 20px; }
.panel-head{ padding: 12px 16px; border-bottom: 1px solid var(--line); font-weight:600; font-size: 13.5px; background:#FAFBFA; }
.panel-body{ padding: 18px 20px; }

.grid-2{ display:grid; grid-template-columns: 340px 1fr; gap: 20px; align-items:start; }
@media (max-width: 900px){ .grid-2{ grid-template-columns: 1fr; } }

.notes{ padding: 18px 20px; font-size: 13.5px; }
.notes h3{ font-size: 13px; color: var(--teal-dark); margin: 16px 0 6px; }
.notes h3:first-child{ margin-top: 0; }
.notes p{ margin: 0 0 8px; color: var(--ink-soft); }
.notes ul, .notes ol{ margin: 4px 0 10px; padding-left: 18px; color: var(--ink-soft); }
.notes li{ margin-bottom: 6px; }

form label{ display:block; font-size: 13.5px; font-weight: 500; margin-bottom: 14px; }
form label > span.hint{ display:block; font-weight: 400; color: var(--ink-soft); font-size: 12px; margin-top: 2px; }
input[type=text], input[type=url], input[type=email], input[type=password], textarea, select{
  width: 100%; margin-top: 6px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 7px;
  font-family: inherit; font-size: 13.5px; color: var(--ink); background: #FBFBF9;
}
textarea{ font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; resize: vertical; }
input:focus, textarea:focus, select:focus{ outline: none; border-color: var(--teal); background: #fff; }

.radio-group{ display:flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.radio-option{ border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; flex: 1; min-width: 200px; cursor:pointer; background:#FBFBF9; }
.radio-option:has(input:checked){ border-color: var(--teal); background: var(--teal-tint); }
.radio-option input{ margin-right: 8px; }
.radio-option .opt-title{ font-weight:600; font-size: 13.5px; }
.radio-option .opt-desc{ display:block; color: var(--ink-soft); font-size: 12px; margin-top: 3px; font-weight:400; }

.field-toggle{ display:none; }
.field-toggle.active{ display:block; }

.btn{ display:inline-block; font-family: inherit; font-size: 13.5px; font-weight: 500; border: none; border-radius: 7px; padding: 10px 18px; cursor: pointer; text-decoration:none; }
.btn-primary{ background: var(--teal); color: #fff; }
.btn-primary:hover{ background: var(--teal-dark); }
.btn-ghost{ background: var(--teal-tint); color: var(--teal-dark); }

.alert{ padding: 10px 14px; border-radius: 7px; font-size: 13.5px; margin-bottom: 16px; }
.alert-error{ background: var(--danger-tint); color: var(--danger); }
.alert-success{ background: var(--good-tint); color: var(--good); }
.alert-warn{ background: var(--warn-tint); color: var(--warn); }

.badge{ display:inline-block; font-size: 11px; padding: 2px 9px; border-radius: 999px; font-weight:600; }
.badge-mode-A{ background: var(--good-tint); color: var(--good); }
.badge-mode-B{ background: var(--warn-tint); color: var(--warn); }
.badge-mode-pendiente{ background: var(--line); color: var(--ink-soft); }
.badge-status-ingerido{ background: var(--teal-tint); color: var(--teal-dark); }
.badge-status-diagnosticado{ background: var(--warn-tint); color: var(--warn); }
.badge-status-generado, .badge-status-revisado{ background: var(--good-tint); color: var(--good); }

.data-table{ width:100%; border-collapse: collapse; font-size: 13.5px; }
.data-table th, .data-table td{ border-bottom: 1px solid var(--line); padding: 9px 12px; text-align:left; }
.data-table th{ background:#FAFBFA; font-weight:600; font-size: 12.5px; color: var(--ink-soft); }

.empty-state{ background: var(--panel); border: 1px dashed var(--line); border-radius: 10px; padding: 40px; text-align:center; color: var(--ink-soft); }

.auth-card{ max-width: 380px; margin: 60px auto; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 28px; }
.auth-card h1{ font-size: 19px; margin-top:0; }

.tabs{ display:flex; gap: 4px; padding: 8px 16px 0; background:#FAFBFA; border-bottom: 1px solid var(--line); }
.tab{ font-size: 12.5px; font-weight:500; padding: 8px 14px; border-radius: 6px 6px 0 0; color: var(--ink-soft); cursor:pointer; border:none; background:none; }
.tab.active{ background: var(--teal-tint); color: var(--teal-dark); }
.tabpane{ display:none; }
.tabpane.active{ display:block; }

#rawHtmlCode{ width:100%; height: 420px; border: none; padding: 16px; font-size: 12.5px; line-height: 1.55; background: #FBFBF9; }

.preview-box{ padding: 20px 24px; max-height: 420px; overflow-y:auto; font-family: Georgia, serif; font-size: 15.5px; line-height: 1.7; }
.preview-box img{ max-width: 100%; border-radius: 8px; }
.preview-box table{ border-collapse: collapse; width: 100%; margin: 1em 0; }
.preview-box th, .preview-box td{ border: 1px solid var(--line); padding: 6px 9px; font-size: 13.5px; }

.file-list{ margin-top: 8px; font-size: 12.5px; color: var(--ink-soft); }
.file-list span{ display:block; }

.kpi-row{ display:flex; gap: 14px; flex-wrap:wrap; margin-bottom: 18px; }
.kpi{ background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 18px; min-width: 150px; flex:1; }
.kpi .kpi-value{ font-size: 22px; font-weight:600; color: var(--teal-dark); }
.kpi .kpi-label{ font-size: 12px; color: var(--ink-soft); }

.verdict-card{ border-width: 2px; }
.verdict-card .panel-body{ padding: 22px 24px; }
.verdict-label{ display:inline-block; font-size: 13px; font-weight:700; letter-spacing: .02em; padding: 5px 14px; border-radius: 999px; margin-bottom: 12px; }
.verdict-mantener{ border-color: var(--good); }
.verdict-mantener .verdict-label{ background: var(--good-tint); color: var(--good); }
.verdict-modificar{ border-color: var(--warn); }
.verdict-modificar .verdict-label{ background: var(--warn-tint); color: var(--warn); }
.verdict-justification{ margin: 0; font-size: 14.5px; color: var(--ink); }

.badge-audit-resuelto{ background: var(--good-tint); color: var(--good); }
.badge-audit-falta{ background: var(--warn-tint); color: var(--warn); }
.badge-audit-mejorable_no_tocar{ background: var(--teal-tint); color: var(--teal-dark); }

/* Resaltado de bloques nuevos en la vista previa — mismo formato que el
   documento de entrega de referencia (Modo A: añadir, nunca sustituir). */
.preview-box .contenido-nuevo{
  background: var(--new-bg, #FFF7E0);
  border: 1px solid #E9D9A8;
  border-radius: 8px;
  padding: 14px 18px 4px;
  margin: 1.2em 0;
}
.preview-box .contenido-nuevo-titulo-nuevo{
  background: var(--new-bg, #FFF7E0);
  border: 1px solid #E9D9A8;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  padding: 14px 18px 0;
  margin: 1.2em 0 0;
}
.preview-box .contenido-nuevo-titulo-nuevo + .contenido-nuevo{
  margin-top: 0;
  border-top: none;
  border-radius: 0 0 8px 8px;
}
.legend-swatch{ display:inline-block; width:10px; height:10px; border-radius:2px; background: var(--new-bg, #FFF7E0); border:1px solid #E9D9A8; margin-right:4px; }