/* Reporte de visita tal como lo ve el cliente (prefijo .vr). Lo usan la vista previa del formulario del piscinero y el «Ver reporte completo» del cliente.
   Se adapta al ancho de su propio contenedor (container queries), no al de la ventana. */
.vr{--vr-navy:#0b1f4d;--vr-text:#33425c;--vr-muted:#6b7a95;--vr-line:#e4ecf7;--vr-blue:#1665f2;--vr-blue-soft:#eaf3ff;--vr-card:#fff;--vr-soft:#f5f8fc;
 --vr-ok:#13874b;--vr-ok-bg:#e4f6ec;--vr-warn:#b86e00;--vr-warn-bg:#fff3dc;--vr-warn-line:#f6dba4;--vr-info-bg:#e9f1ff;--vr-bad:#d6232f;--vr-bad-bg:#ffe8e8;--vr-bad-line:#f4b9bd;
 container-type:inline-size;box-sizing:border-box;display:grid;gap:14px;min-width:0;padding:18px;border:1px solid var(--vr-line);border-radius:20px;background:var(--vr-card);color:var(--vr-text);box-shadow:0 6px 22px rgba(15,40,90,.07);font-size:14px;line-height:1.4}
.vr *{box-sizing:border-box}
.vr h3,.vr h4,.vr p,.vr ul,.vr dl,.vr dd{margin:0;padding:0}
.vr ul{list-style:none}
.vr-ico{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;font-size:18px}
.vr-muted{color:var(--vr-muted);font-size:13px}
.vr-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.vr-brand{display:inline-flex;align-items:center;gap:7px;color:var(--vr-blue);font-size:17px;font-weight:800;letter-spacing:-.01em}
.vr-brand svg{width:28px;height:21px;fill:none;stroke:var(--vr-blue);stroke-width:2.6;stroke-linecap:round}
.vr-brand span{color:var(--vr-navy)}
.vr-head time{font-size:13px;color:var(--vr-muted);white-space:nowrap}
.vr-title{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.vr-title h3{font-size:24px;line-height:1.15;font-weight:800;color:var(--vr-navy);letter-spacing:-.02em}
.vr-badge{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:999px;font-size:12.5px;font-weight:700}
.vr-badge.is-ok{background:var(--vr-ok-bg);color:var(--vr-ok)}
.vr-badge .vr-ico{font-size:14px;stroke-width:2.6}
.vr-kind{display:inline-flex;align-items:center;gap:7px;justify-self:start;padding:6px 12px;border-radius:999px;background:var(--vr-soft);border:1px solid var(--vr-line);font-size:13px;color:var(--vr-text)}
.vr-kind .vr-ico{font-size:15px;color:var(--vr-muted)}

.vr-photos{display:grid;gap:8px;min-width:0}
.vr-hero{position:relative;aspect-ratio:16/9;max-height:300px;border-radius:14px;overflow:hidden;background:var(--vr-soft)}
.vr-hero img{display:block;width:100%;height:100%;object-fit:cover}
.vr-hero-link{display:block;width:100%;height:100%;cursor:zoom-in}
.vr-photo-tag{position:absolute;left:10px;top:10px;padding:4px 10px;border-radius:8px;background:rgba(11,31,77,.78);color:#fff;font-size:12px;font-weight:700}
.vr-photo-tag:empty{display:none}
.vr-arrow{position:absolute;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:#fff;color:var(--vr-navy);box-shadow:0 4px 12px rgba(11,31,77,.22);cursor:pointer}
.vr-arrow.is-prev{left:8px}.vr-arrow.is-next{right:8px}
.vr-strip{display:flex;gap:6px;overflow-x:auto;padding:2px 0 4px;scrollbar-width:thin}
.vr-thumb{position:relative;flex:0 0 auto;width:72px;height:54px;padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;background:var(--vr-soft);cursor:pointer}
.vr-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.vr-thumb small{position:absolute;left:0;right:0;bottom:0;padding:1px 3px;background:rgba(11,31,77,.7);color:#fff;font-size:9.5px;line-height:1.3;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vr-thumb.is-on{border-color:var(--vr-blue)}

.vr-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.vr-chip{position:relative;display:grid;gap:2px;padding:9px 10px;border:1px solid var(--vr-line);border-radius:12px;background:var(--vr-soft)}
.vr-chip small{font-size:11.5px;color:var(--vr-muted)}
.vr-chip strong{font-size:17px;color:var(--vr-navy);font-weight:800}
.vr-chip-mark{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--vr-ok);color:#fff}
.vr-chip.is-warn .vr-chip-mark{background:var(--vr-warn)}
.vr-chip-mark .vr-ico{font-size:12px;stroke-width:3}

.vr-state{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:14px;background:var(--vr-ok-bg)}
.vr-state-mark{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;background:var(--vr-ok);color:#fff}
.vr-state-mark .vr-ico{font-size:21px;stroke-width:2.6}
.vr-state h4{font-size:12.5px;font-weight:700;color:var(--vr-navy)}
.vr-state strong{display:block;font-size:14.5px;font-weight:700;color:var(--vr-ok)}
.vr-state small{display:block;font-size:12px;color:var(--vr-text)}
.vr-state.is-warn{background:var(--vr-warn-bg)}.vr-state.is-warn .vr-state-mark{background:var(--vr-warn)}.vr-state.is-warn strong{color:var(--vr-warn)}
.vr-state.is-idle{background:var(--vr-soft)}.vr-state.is-idle .vr-state-mark{background:var(--vr-muted)}.vr-state.is-idle strong{color:var(--vr-navy)}

.vr-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px 14px}
.vr-meta:empty{display:none}
.vr-meta div{display:grid;gap:1px}
.vr-meta dt{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--vr-muted)}
.vr-meta dt .vr-ico{font-size:13px}
.vr-meta dd{font-size:13.5px;font-weight:700;color:var(--vr-navy)}

.vr-block{display:grid;gap:8px;min-width:0}
.vr-block h4{font-size:15.5px;font-weight:800;color:var(--vr-navy)}
.vr-block-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.vr-block-head small{font-size:12px;color:var(--vr-muted)}
.vr-more{padding:0;border:0;background:none;color:var(--vr-blue);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.vr-more:hover{text-decoration:underline}
.vr-checks{display:grid;gap:7px}
.vr-checks li{display:flex;align-items:center;gap:9px;font-size:13.5px}
.vr-checks .vr-ico{display:block;width:18px;height:18px;padding:3px;border-radius:50%;background:var(--vr-ok-bg);color:var(--vr-ok);stroke-width:3.2;font-size:18px}
[data-vr-list] li.is-extra{display:none}
[data-vr-list].is-open li.is-extra{display:flex}

.vr-table{overflow-x:auto}
.vr-table table{width:100%;border-collapse:collapse;font-size:13px}
.vr-table th,.vr-table td{padding:7px 8px;text-align:left;border-bottom:1px solid var(--vr-line)}
.vr-table thead th{font-size:11.5px;font-weight:700;color:var(--vr-muted);text-transform:uppercase;letter-spacing:.03em}
.vr-table tbody th{font-weight:700;color:var(--vr-navy)}
.vr-table tr.is-warn td strong{color:var(--vr-warn)}
.vr-table td:last-child{color:var(--vr-muted)}

.vr-problems ul{display:grid;gap:8px}
.vr-issue{display:flex;gap:11px;padding:11px;border:1px solid var(--vr-warn-line);border-radius:14px;background:var(--vr-warn-bg)}
.vr-issue.is-fixed{border-color:#bfe6cf;background:var(--vr-ok-bg)}
.vr-issue-photo{flex:none;width:64px;height:54px;border-radius:10px;overflow:hidden}
.vr-issue-photo img{display:block;width:100%;height:100%;object-fit:cover}
.vr-issue-mark{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;background:#fff;color:var(--vr-warn)}
.vr-issue div{min-width:0}
.vr-issue b{color:var(--vr-warn);font-size:14px}
.vr-issue.is-fixed b{color:var(--vr-ok)}
.vr-issue-state{margin-left:7px;padding:2px 8px;border-radius:999px;background:#fff;font-size:11px;font-weight:700;color:var(--vr-warn)}
.vr-issue.is-fixed .vr-issue-state{color:var(--vr-ok)}
.vr-issue p{margin-top:3px;font-size:12.5px;color:var(--vr-text)}
/* Nivel de alerta: Leve (azul), Moderado (ámbar) y Crítico (rojo). Lo resuelto vuelve al verde. */
.vr-issue-level{margin-left:7px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.01em;color:#fff}
.vr-issue-level.is-leve{background:var(--vr-blue)}
.vr-issue-level.is-moderado{background:var(--vr-warn)}
.vr-issue-level.is-critico{background:var(--vr-bad)}
.vr-issue.is-open.lv-critico{border-color:var(--vr-bad-line);background:var(--vr-bad-bg)}
.vr-issue.is-open.lv-critico b,.vr-issue.is-open.lv-critico .vr-issue-state,.vr-issue.is-open.lv-critico .vr-issue-mark{color:var(--vr-bad)}
.vr-issue.is-open.lv-leve{border-color:#c9dcfb;background:var(--vr-info-bg)}
.vr-issue.is-open.lv-leve b,.vr-issue.is-open.lv-leve .vr-issue-state,.vr-issue.is-open.lv-leve .vr-issue-mark{color:var(--vr-blue)}
.vr-issue-more{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.vr-issue-more img{display:block;width:52px;height:40px;border-radius:8px;object-fit:cover}

.vr-recs ul{display:grid;gap:8px}
.vr-recs li{display:flex;gap:11px;padding:11px;border-radius:14px;background:var(--vr-info-bg)}
.vr-rec-mark{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:#fff;color:var(--vr-blue)}
.vr-recs b{display:block;font-size:13.5px;color:var(--vr-navy)}
.vr-recs small{display:block;font-size:12.5px;color:var(--vr-text)}
[data-vr-list].vr-recs li.is-extra{display:none}[data-vr-list].vr-recs.is-open li.is-extra{display:flex}

.vr-chem{display:flex;flex-wrap:wrap;gap:7px}
.vr-chem li{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border:1px solid var(--vr-line);border-radius:999px;background:var(--vr-soft);font-size:13px}
.vr-chem .vr-ico{font-size:14px;color:var(--vr-blue)}
.vr-chem span{color:var(--vr-muted)}

.vr-daybar-track{position:relative;height:12px;border-radius:999px;background:var(--vr-line);overflow:hidden}
.vr-daybar-track span{position:absolute;top:0;bottom:0;border-radius:999px;background:var(--vr-blue)}
.vr-daybar-scale{display:flex;justify-content:space-between;margin-top:3px;font-size:10.5px;color:var(--vr-muted)}

.vr-notes p{font-size:13.5px}
.vr-product{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 11px;border:1px solid var(--vr-line);border-radius:12px;background:var(--vr-soft)}
.vr-product>span{display:flex;align-items:center;gap:9px;min-width:0}
.vr-product small{display:block;font-size:12px;color:var(--vr-muted)}
.vr-product .vr-ico{font-size:20px;color:var(--vr-blue)}

@container (min-width:560px){
 .vr{padding:24px;gap:16px}
 .vr-title h3{font-size:28px}
 .vr-hero{max-height:340px}
 .vr-thumb{width:88px;height:64px}
}
@container (max-width:340px){
 .vr{padding:14px}
 .vr-chips{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Dentro del panel (cliente o piscinero) los <p> y los títulos tienen color propio (client-panel.css, panel.css) y le ganarían a los del reporte: aquí se recuperan. */
body[data-page="panel"] .vr p{color:var(--vr-text)}
body[data-page="panel"] .vr p.vr-muted{color:var(--vr-muted)}
body[data-page="panel"] .vr h3,body[data-page="panel"] .vr h4{color:var(--vr-navy)}
html[data-pro-theme="dark"] .vr{--vr-navy:#e8efff;--vr-text:#c3cde3;--vr-muted:#93a0bb;--vr-line:#26365a;--vr-card:#12203f;--vr-soft:#182a4d;--vr-blue-soft:#1b3566;--vr-ok:#4cd387;--vr-ok-bg:#12372a;--vr-warn:#ffbf52;--vr-warn-bg:#3b2d12;--vr-warn-line:#6b4f17;--vr-info-bg:#1a3160;box-shadow:none}
html[data-pro-theme="dark"] .vr{--vr-bad:#ff8b93;--vr-bad-bg:#41181d;--vr-bad-line:#7a2e35}
html[data-pro-theme="dark"] .vr-issue.is-open.lv-leve{border-color:#2c4a82;background:#16294d}
html[data-pro-theme="dark"] .vr-issue-level{color:#0b1226}
html[data-pro-theme="dark"] .vr-issue.is-open.lv-leve b,html[data-pro-theme="dark"] .vr-issue.is-open.lv-leve .vr-issue-state,html[data-pro-theme="dark"] .vr-issue.is-open.lv-leve .vr-issue-mark{color:#8fbaff}
html[data-pro-theme="dark"] .vr-issue-level.is-leve{background:#8fbaff}
html[data-pro-theme="dark"] .vr-state-mark .vr-ico,html[data-pro-theme="dark"] .vr-chip-mark{color:#07140d}
html[data-pro-theme="dark"] .vr-issue-state,html[data-pro-theme="dark"] .vr-issue-mark,html[data-pro-theme="dark"] .vr-rec-mark{background:#12203f}
@media print{
 .vr{box-shadow:none;border:0;padding:0}
 .vr-arrow,.vr-more{display:none}
 [data-vr-list] li.is-extra{display:flex}
}