:root { --ink:#183c36; --muted:#60746e; --line:#cfe2d7; --paper:#fff; --surface:#f4f8f5; --green:#2e7a58; --green-soft:#e8f4ec; --amber:#be8a26; --amber-soft:#fff4dd; --rose:#a63f5d; --rose-soft:#fbe8ed; --slate:#70847f; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:#eaf1ed url('/assets/fondo_genoma.jpg') center/cover fixed; font:14px/1.45 Arial, Helvetica, sans-serif; }
button, input, select, textarea { font:inherit; }
.topbar { position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 28px; background:rgba(255,255,255,.96); border-bottom:1px solid var(--line); box-shadow:0 4px 18px rgba(24,60,54,.08); }
.brand { display:grid; gap:2px; }.brand strong { font-size:17px; }.brand span { color:var(--muted); font-size:12px; }
nav { display:flex; gap:8px; flex-wrap:wrap; } button { border:1px solid #a9cdb8; background:#fff; color:var(--ink); border-radius:6px; padding:9px 13px; font-weight:700; cursor:pointer; } button:hover { background:var(--green-soft); } button.primary { background:var(--green); color:#fff; border-color:var(--green); }
.workspace { display:grid; grid-template-columns:minmax(320px,430px) minmax(680px,1fr); gap:24px; align-items:start; padding:24px; max-width:1800px; margin:auto; }.panel { display:grid; gap:14px; }.card { background:rgba(255,255,255,.96); border:1px solid var(--line); border-radius:8px; padding:18px; box-shadow:0 8px 22px rgba(23,65,48,.08); }
.section-title { display:flex; align-items:flex-start; gap:10px; margin-bottom:14px; }.section-title>span,.section-kicker>span { display:grid; place-items:center; width:28px; height:28px; flex:0 0 auto; color:#fff; background:var(--green); border-radius:50%; font-weight:700; }.section-title h2 { font-size:16px; margin:0; }.section-title p { margin:2px 0 0; color:var(--muted); font-size:12px; }
.grid { display:grid; gap:10px; }.grid.two { grid-template-columns:1fr 1fr; } label { display:grid; gap:5px; color:#48625b; font-size:12px; font-weight:700; } input, select, textarea { width:100%; min-width:0; background:#fff; color:var(--ink); border:1px solid #bcd8c7; border-radius:5px; padding:8px 9px; outline:none; } textarea { resize:vertical; } input:focus,select:focus,textarea:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(46,122,88,.12); }
.ct-inputs { display:grid; gap:8px; }.ct-row { grid-template-columns:1fr 115px; align-items:center; border:1px solid var(--line); border-radius:6px; padding:9px; }.ct-row span { display:grid; }.ct-row small { color:var(--muted); font-weight:400; }.technical { margin-top:13px; padding-top:12px; border-top:1px solid var(--line); }.technical summary { cursor:pointer; font-weight:700; }.technical p { color:var(--muted); font-size:12px; }.curve-inputs { display:grid; gap:8px; }.curve-row { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:7px; align-items:end; font-size:12px; }.curve-row label { font-size:11px; }
.additional-inputs { display:grid; grid-template-columns:1fr 1fr; gap:9px; }.additional-inputs label { font-size:11px; }.additional-inputs select { font-size:11px; padding:7px; }
.preview { min-width:0; }.report { display:grid; gap:24px; }.page { position:relative; width:210mm; min-height:297mm; margin:0 auto; padding:21mm 17mm 17mm; overflow:hidden; background:#fff url('/assets/fondo_genoma.jpg') center/cover; box-shadow:0 14px 34px rgba(19,56,42,.18); page-break-after:always; }.page::before { content:""; position:absolute; inset:0; background:rgba(255,255,255,.88); pointer-events:none; }.page>* { position:relative; }.cover-page { padding-top:18mm; }.report-header { display:flex; align-items:center; gap:18px; padding-bottom:13px; border-bottom:2px solid var(--line); }.report-header img { width:175px; height:auto; }.report-header h1 { margin:0; color:var(--rose); font-size:22px; letter-spacing:.2px; }.report-header p { margin:2px 0 0; color:var(--muted); font-size:12px; }
.patient-strip { display:grid; grid-template-columns:.75fr 1.8fr 1fr 1.35fr; gap:0; border:1px solid var(--line); border-radius:8px; margin-top:14px; overflow:hidden; }.patient-strip div { padding:9px 11px; border-right:1px solid var(--line); }.patient-strip div:last-child { border:0; }.patient-strip small,.metrics small,.calculation-grid small,.fungi-grid small { display:block; color:var(--muted); font-size:9px; font-weight:700; }.patient-strip b { font-size:11px; display:block; margin-top:2px; }
.metrics { display:grid; grid-template-columns:1.5fr 1.15fr 1fr .7fr; gap:8px; margin:13px 0; }.metrics div { min-height:63px; padding:10px; border-radius:7px; background:linear-gradient(#fff,#f4faf6); border:1px solid var(--line); }.metrics b { display:block; margin-top:7px; font-size:14px; }.green { color:var(--green)!important; }.amber { color:var(--amber)!important; }.rose { color:var(--rose)!important; }.neutral { color:var(--muted)!important; }
.clinical-card { padding:14px 16px; border-radius:7px; border-left:5px solid currentColor; background:var(--green-soft); color:var(--green); }.clinical-card.rose { background:var(--rose-soft); }.clinical-card.amber { background:var(--amber-soft); }.clinical-card span { font-size:10px; font-weight:700; text-transform:uppercase; }.clinical-card h2 { color:inherit; margin:3px 0; font-size:17px; }.clinical-card p { margin:0; color:var(--ink); }
.report-section { margin-top:18px; }.section-kicker { display:flex; align-items:center; gap:9px; padding-bottom:8px; border-bottom:1px solid var(--line); }.section-kicker h2 { margin:0; font-size:18px; } table { width:100%; border-collapse:separate; border-spacing:0; margin-top:10px; font-size:11px; border:1px solid var(--line); border-radius:7px; overflow:hidden; } th { background:#e2f0e6; color:var(--ink); padding:9px; text-align:left; font-size:9px; } td { padding:8px 9px; border-top:1px solid var(--line); vertical-align:top; } td small { display:block; margin-top:2px; color:var(--muted); font-size:9px; font-weight:400; }.calculation-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:12px; }.calculation-grid div { padding:10px; background:#f6faf7; border:1px solid var(--line); border-radius:6px; }.calculation-grid b { display:block; margin-top:5px; font-size:16px; }
.visual-grid { display:grid; grid-template-columns:1.7fr .85fr; gap:14px; margin-top:12px; }.chart-card,.traffic-card,.reference-card,.text-box { border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.86); padding:15px; }.chart-card h3,.reference-card h3 { margin:0 0 14px; font-size:14px; }.distribution { display:grid; gap:13px; }.distribution-row { display:grid; grid-template-columns:100px 1fr 55px; align-items:center; gap:8px; font-size:11px; }.track { height:12px; background:#edf3ef; border-radius:99px; overflow:hidden; }.track i { display:block; height:100%; border-radius:99px; }.track .green { background:var(--green); }.track .rose { background:var(--rose); }.track .amber { background:var(--amber); }.track .slate { background:var(--slate); }.caption { color:var(--muted); font-size:10px; margin:14px 0 0; }.traffic-card { display:grid; align-content:center; text-align:center; color:var(--green); background:var(--green-soft); }.traffic-card.rose { background:var(--rose-soft); }.traffic-card.amber { background:var(--amber-soft); }.traffic-card strong { margin:12px 0 2px; font-size:32px; }.traffic-card p { color:var(--ink); font-size:10px; }.additional-report { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:7px; overflow:hidden; margin-top:10px; }.additional-report div { display:flex; justify-content:space-between; gap:12px; padding:8px 10px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); font-size:10px; }.additional-report b { text-align:right; }.reference-card { margin-top:18px; background:#f2f8f3; }.reference-card p { margin:6px 0; font-size:11px; }.text-box { min-height:75px; margin-top:10px; line-height:1.6; }.muted { color:var(--muted); }.fungi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:11px; }.fungi-grid div { border-top:4px solid var(--green); border-radius:7px; padding:11px; background:#f4faf6; }.fungi-grid div:nth-child(2){ border-color:var(--amber); background:#fff8e9; }.fungi-grid div:nth-child(3){ border-color:var(--rose); background:#fff0f3; }.fungi-grid p { margin:6px 0 0; min-height:36px; }.disclaimer { margin-top:18px; padding:10px; color:var(--muted); background:#f5f7f6; border-radius:6px; font-size:10px; }.signature { margin:23px 0 0 auto; width:185px; text-align:center; }.signature img { max-width:145px; max-height:48px; object-fit:contain; }.signature span { display:block; border-top:1px solid var(--ink); padding-top:4px; font-size:10px; } footer { position:absolute; left:17mm; right:17mm; bottom:8mm; padding-top:5px; color:var(--muted); border-top:1px solid var(--line); text-align:center; font-size:8px; }
.page footer { padding-top:0; border-top:0; }
.hidden { display:none!important; }
.settings-view { max-width:1180px; margin:26px auto 70px; padding:0 24px; }
.settings-header { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:18px; padding:24px 28px; background:rgba(255,255,255,.97); border:1px solid var(--line); border-radius:8px; box-shadow:0 10px 28px rgba(24,60,54,.09); }
.settings-header h1 { margin:3px 0 4px; font-size:27px; }.settings-header p { margin:0; color:var(--muted); }.settings-eyebrow { color:var(--green); font-size:11px; font-weight:700; text-transform:uppercase; }
.settings-card { margin-bottom:16px; padding:22px; background:rgba(255,255,255,.97); border:1px solid var(--line); border-radius:8px; box-shadow:0 8px 22px rgba(24,60,54,.07); }.settings-title { display:flex; gap:11px; align-items:flex-start; margin-bottom:17px; }.settings-title>span { display:grid; place-items:center; width:30px; height:30px; flex:0 0 auto; border-radius:50%; background:var(--green); color:#fff; font-weight:700; }.settings-title h2 { margin:0; font-size:18px; }.settings-title p { margin:3px 0 0; color:var(--muted); font-size:12px; }
.settings-curves { display:grid; gap:8px; }.formula-variable { display:grid; grid-template-columns:220px 1fr; align-items:end; gap:16px; margin-bottom:5px; padding:13px; border:1px solid #b7d7c3; border-radius:6px; background:var(--green-soft); }.formula-variable p { margin:0 0 8px; }.settings-curve-row { display:grid; grid-template-columns:minmax(190px,1.4fr) repeat(3,minmax(120px,1fr)); gap:10px; align-items:end; padding:11px; border:1px solid var(--line); border-radius:6px; background:#f8fbf9; }.settings-curve-row>div { display:grid; }.settings-curve-row small,.settings-fields label small { color:var(--muted); font-weight:400; }.settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }.settings-fields { display:grid; grid-template-columns:1fr 1fr; gap:11px; }.settings-fields label { align-content:start; }
.settings-actions { position:sticky; left:auto; right:auto; bottom:16px; display:flex; align-items:center; justify-content:flex-end; gap:10px; padding:14px 18px; background:rgba(255,255,255,.98); border:1px solid var(--line); border-radius:8px; box-shadow:0 12px 30px rgba(24,60,54,.16); text-align:left; font-size:12px; }.settings-actions div { display:grid; margin-right:auto; }.settings-actions small { color:var(--muted); }.settings-actions .error { color:var(--rose); }
@media (max-width:1250px) { .workspace { grid-template-columns:390px 1fr; padding:14px; }.page { transform-origin:top left; } }
@media (max-width:900px) { .topbar { position:static; align-items:flex-start; flex-direction:column; }.workspace { display:block; }.panel { margin-bottom:18px; }.page { width:100%; min-height:0; aspect-ratio:210 / 297; padding:34px 26px 52px; }.page::before { background:rgba(255,255,255,.9); } footer { left:26px; right:26px; }.patient-strip,.metrics,.visual-grid { grid-template-columns:1fr 1fr; }.report-header img { width:130px; }.report-header h1 { font-size:17px; }.additional-report { grid-template-columns:1fr 1fr; }.fungi-grid { grid-template-columns:repeat(3,1fr); }.grid.two { grid-template-columns:1fr; } }
@media (max-width:900px) { .settings-view { padding:0 12px; }.settings-header,.settings-actions { align-items:stretch; flex-direction:column; }.settings-grid { grid-template-columns:1fr; }.settings-curve-row { grid-template-columns:1fr 1fr 1fr; }.settings-curve-row>div { grid-column:1 / -1; }.settings-fields { grid-template-columns:1fr; }.settings-actions div { margin-right:0; } }
@media print { @page { size:A4; margin:0; } body { background:#fff; } .topbar,.panel,.settings-view { display:none!important; }.workspace { display:block; padding:0; }.preview,.report { display:block; }.page { width:210mm; height:297mm; min-height:297mm; margin:0; box-shadow:none; break-after:page; page-break-after:always; }.page:last-child { break-after:auto; page-break-after:auto; } }