/* informes-vehiculos-kit · pantalla de informe: barra fija, progreso, chips, tarjetas, banda de precio. */

/* Barra superior fija */
.report-bar{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--surface) 92%,transparent);background:var(--surface);border-bottom:1px solid var(--border);box-shadow:var(--shadow-1)}
@supports (backdrop-filter:blur(8px)){.report-bar{background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px)}}
.bar-inner{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding-block:8px}
.bar-id{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 280px}
.bar-id .icon-btn,.bar-id .plate{flex:none}
.bar-title{flex:1 1 0;min-width:0;font-size:var(--fs-16);font-weight:700;line-height:1.2;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.bar-actions{display:flex;flex-wrap:wrap;gap:8px;flex:1 1 100%}
.act{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:none;min-height:44px;min-width:44px;padding:8px 14px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);color:var(--text);font-size:var(--fs-14);font-weight:600;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s}
.act:hover{background:var(--surface-2);border-color:var(--border-strong)}
.act:disabled{color:var(--muted);background:var(--surface-2);cursor:not-allowed}
.act .icon{width:18px;height:18px}
/* Móvil: acciones solo con icono (el texto queda para lectores de pantalla); solo la fila de identidad es fija */
@media (max-width:639px){
  .report-bar,.bar-inner{display:contents}
  .bar-id{position:sticky;top:0;z-index:30;flex:none;padding:8px 16px;background:var(--surface);border-bottom:1px solid var(--border);box-shadow:var(--shadow-1)}
  .bar-actions{flex-wrap:wrap;justify-content:space-between;padding:8px 16px;background:var(--surface);border-bottom:1px solid var(--border)}
  .act{padding:8px;width:44px}
  .act span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .act.act--text{width:auto;padding:8px 14px;justify-content:flex-start}
  .act.act--text span{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}
  .bar-actions:has(.act--text){justify-content:flex-start}
}
@media (min-width:900px){
  .bar-inner{flex-wrap:nowrap}
  .bar-id{flex:1 1 auto}
  .bar-actions{flex:0 0 auto;flex-wrap:nowrap}
  .bar-title{font-size:var(--fs-18)}
  .act[data-action="copy-link"] span,.act[data-action="refresh"] span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .act[data-action="copy-link"],.act[data-action="refresh"]{padding-inline:10px}
}

.report-body{display:grid;gap:16px;padding-top:20px;padding-bottom:24px}

/* Panel de progreso */
.progress-panel{transition:opacity .4s var(--ease),transform .4s var(--ease)}
.progress-card{padding:20px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-2)}
.progress-head{display:flex;align-items:center;gap:16px}
.progress-title{font-size:var(--fs-18);font-weight:800}
.progress-sub{margin-top:2px;font-size:var(--fs-14);color:var(--muted)}
.progress-spin{width:44px;height:44px;flex:none;border-radius:50%;border:4px solid var(--brand-soft);border-top-color:var(--brand);animation:spin 1s linear infinite}
.ring-wrap:not([hidden])+.progress-spin{display:none}
.ring-wrap{position:relative;width:64px;height:64px;flex:none;--p:1}
.ring{width:64px;height:64px;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:6}
.ring-track{stroke:var(--surface-2)}
.ring-progress{stroke:var(--brand);stroke-linecap:round;stroke-dasharray:175.93px;stroke-dashoffset:calc(175.93px * (1 - var(--p)));transition:stroke-dashoffset 1s linear}
.ring-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:var(--fs-18)}
.ring-num::after{content:"s";font-size:var(--fs-14);font-weight:600;color:var(--muted);margin-left:1px}

.stepper{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:8px;margin-top:20px;counter-reset:step}
.step{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.step::before{content:"";position:absolute;top:17px;right:calc(50% + 22px);left:calc(-50% + 22px);height:2px;background:var(--border)}
.step:first-child::before{display:none}
.step[data-state="ok"]::before,.step[data-state="empty"]::before{background:var(--ok)}
.step-dot{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:2px solid var(--border-strong);background:var(--surface);color:var(--muted);font-weight:700;font-size:var(--fs-14)}
.step-dot .icon{width:18px;height:18px;stroke-width:2.6}
.step-text{display:grid;gap:0}
.step-title{font-size:var(--fs-14);font-weight:700}
.step-label{font-size:var(--fs-14);color:var(--muted)}
.step[data-state="running"] .step-dot{border-color:var(--brand);color:var(--link);box-shadow:0 0 0 4px var(--brand-soft);animation:pulse 1.4s ease-in-out infinite}
.step[data-state="running"] .step-label{color:var(--link);font-weight:600}
.step[data-state="ok"] .step-dot{border-color:var(--ok);background:var(--ok);color:#fff}
.step[data-state="empty"] .step-dot{border-color:var(--ok);color:var(--ok)}
.step[data-state="error"] .step-dot{border-color:var(--danger);background:var(--danger-bg);color:var(--danger)}
.step[data-state="error"] .step-label{color:var(--danger);font-weight:600}
.step[data-state="unavailable"] .step-dot,.step[data-state="plan"] .step-dot{border-style:dashed}
@keyframes pulse{50%{box-shadow:0 0 0 8px transparent}}
.progress-msg{margin-top:16px;padding:10px 12px;border-radius:var(--r-sm);background:var(--warn-bg);border:1px solid var(--warn-border);font-size:var(--fs-14);font-weight:600}
.queue-info{margin-top:12px;font-weight:700;font-size:var(--fs-14);color:var(--link)}
.progress-note{display:flex;gap:8px;align-items:flex-start;margin-top:16px;font-size:var(--fs-14);color:var(--muted)}
.progress-note .icon{width:18px;height:18px;margin-top:1px}
@media (max-width:420px){.step-label{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.step[data-state="running"] .step-label,.step[data-state="error"] .step-label{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal}}

/* Chips de resumen */
.summary:empty{display:none}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:6px 14px;border-radius:99px;border:1px solid;font-size:var(--fs-14);font-weight:700;animation:fade-in .35s var(--ease)}
.chip .icon{width:18px;height:18px}
.chip--danger{color:var(--danger);background:var(--danger-bg);border-color:var(--danger-border)}
.chip--success{color:var(--ok);background:var(--ok-bg);border-color:var(--ok-border)}
.chip--warning{color:var(--warn);background:var(--warn-bg);border-color:var(--warn-border)}
.chip--neutral{color:var(--neutral);background:var(--neutral-bg);border-color:var(--neutral-border)}
.chip--info{color:var(--info);background:var(--info-bg);border-color:var(--info-border)}

/* Grid de tarjetas: 1 columna en móvil, 2 en >= 900 px. Cada [data-section] es display:contents. */
.cards{display:grid;gap:16px;align-items:start}
.section{display:contents}
@media (min-width:900px){
  .cards{grid-template-columns:1fr 1fr;grid-auto-flow:row dense}
  .card--ficha{grid-row:span 3}
}
@keyframes fade-in{from{opacity:0;transform:translateY(6px)}}
.card-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.card-icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex:none;border-radius:12px;background:var(--brand-soft);color:var(--link)}
.card-title{flex:1;min-width:0;font-size:var(--fs-18);font-weight:800;line-height:1.25}
.card-foot{display:flex;gap:6px;align-items:center;margin-top:16px;padding-top:12px;border-top:1px solid var(--border);font-size:var(--fs-14);color:var(--muted)}
.card-foot .icon{width:16px;height:16px}
.note{margin-top:12px;font-size:var(--fs-14);color:var(--muted)}
.state-msg{color:var(--muted)}

/* Lista etiqueta/valor alineada */
.kv{display:grid}
.kv-row{display:grid;grid-template-columns:minmax(120px,42%) 1fr;gap:12px;padding:9px 0;border-bottom:1px solid var(--border)}
.kv-row:last-child{border-bottom:0}
.kv dt{color:var(--muted);font-size:var(--fs-14)}
.kv dd{font-weight:600;overflow-wrap:anywhere}
.kv--compact .kv-row{padding:6px 0}

/* Ficha */
.vehicle-hero{display:grid;gap:12px;margin-bottom:12px}
.vehicle-photo{border-radius:var(--r-sm);background:var(--surface-2);overflow:hidden;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center}
.vehicle-photo img{width:100%;height:100%;object-fit:contain}
.vehicle-model{font-size:var(--fs-22);font-weight:800;line-height:1.2;letter-spacing:-.01em}
.vehicle-meta{margin-top:2px;color:var(--muted)}

/* Avisos */
.callout{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:var(--r-sm);border:1px solid}
.callout .icon{width:24px;height:24px}
.callout-title{font-weight:700}
.callout--ok{color:var(--ok);background:var(--ok-bg);border-color:var(--ok-border)}
.callout--ok .callout-title{color:var(--text)}
.callout--danger{color:var(--danger);background:var(--danger-bg);border-color:var(--danger-border)}
.card--alert{border-color:var(--danger-border);box-shadow:0 0 0 1px var(--danger-border),var(--shadow-1)}
.card--alert .card-icon{background:var(--danger-bg);color:var(--danger)}
.stolen-list{display:grid;gap:8px;margin-top:12px}
.stolen-list li{padding:4px 12px;border-radius:var(--r-sm);background:var(--surface-2)}

/* Tasación: precio y banda (posición por clase server-side, sin estilos inline) */
.price{display:grid;gap:2px}
.price-label{font-size:var(--fs-14);color:var(--muted);font-weight:600}
.price-value{font-size:var(--fs-36);font-weight:800;line-height:1.1;letter-spacing:-.02em;color:var(--text)}
.band{margin:16px 0 8px;--pos:50%}
.band-track{position:relative;height:12px;border-radius:99px;background:linear-gradient(90deg,var(--brand-soft),var(--brand));background:linear-gradient(90deg,color-mix(in srgb,var(--brand) 25%,var(--surface)),var(--brand))}
.band-marker{position:absolute;top:50%;left:var(--pos);width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:var(--surface);border:4px solid var(--text);box-shadow:var(--shadow-1)}
.band-labels{display:flex;justify-content:space-between;gap:12px;margin-top:10px;font-weight:700;font-size:var(--fs-14)}
.band-labels span{display:grid}
.band-labels span:last-child{text-align:right}
.band-labels small{font-size:var(--fs-14);font-weight:500;color:var(--muted)}
.pos-0{--pos:0%}.pos-5{--pos:5%}.pos-10{--pos:10%}.pos-15{--pos:15%}.pos-20{--pos:20%}.pos-25{--pos:25%}.pos-30{--pos:30%}
.pos-35{--pos:35%}.pos-40{--pos:40%}.pos-45{--pos:45%}.pos-50{--pos:50%}.pos-55{--pos:55%}.pos-60{--pos:60%}.pos-65{--pos:65%}
.pos-70{--pos:70%}.pos-75{--pos:75%}.pos-80{--pos:80%}.pos-85{--pos:85%}.pos-90{--pos:90%}.pos-95{--pos:95%}.pos-100{--pos:100%}
.card--appraisal .kv{margin-top:12px}

/* Recalls (acordeones) */
.recall-headline{font-weight:700;color:var(--warn);margin-bottom:12px}
.acc-list{display:grid;gap:8px}
.acc{border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface)}
.acc summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:10px 14px;cursor:pointer;font-weight:700;list-style:none;border-radius:var(--r-sm)}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{background:var(--surface-2)}
.acc-title{min-width:0;overflow-wrap:anywhere}
.acc-chev{transition:transform .2s var(--ease)}
.acc[open] .acc-chev{transform:rotate(180deg)}
.acc-body{padding:4px 14px 14px}
.acc-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}

/* Estados: skeleton, error, apagado */
.sk{display:grid;gap:12px;padding:4px 0}
.sk-line{display:block;height:14px;border-radius:8px;background:linear-gradient(90deg,var(--surface-2) 25%,var(--border) 50%,var(--surface-2) 75%);background-size:200% 100%;animation:shimmer 1.4s linear infinite}
.w-50{width:50%}.w-70{width:70%}.w-80{width:80%}.w-90{width:90%}
@keyframes shimmer{to{background-position:-200% 0}}
.card--skeleton .card-icon{background:var(--surface-2);color:var(--muted)}
.state{display:flex;gap:14px;align-items:flex-start}
.state-icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex:none;border-radius:50%;background:var(--neutral-bg);color:var(--neutral)}
.state-body{display:grid;gap:6px;min-width:0}
.state-title{font-weight:700}
.state-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.state-actions:empty{display:none}
.card--error{border-color:var(--danger-border)}
.card--error .state-icon{background:var(--danger-bg);color:var(--danger)}
.card--muted{background:var(--surface-2);box-shadow:none}
.card--muted .card-icon{background:var(--surface);color:var(--muted)}
.card--muted .state-icon{background:var(--surface)}

/* Aviso y CTA del negocio */
.report-disclaimer{display:flex;gap:10px;align-items:flex-start;padding:14px 16px;border-radius:var(--r);border:1px dashed var(--border-strong);color:var(--muted);font-size:var(--fs-14)}
.report-disclaimer .icon{width:18px;height:18px;margin-top:1px}
.cta-dock{position:sticky;bottom:0;z-index:20;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--bg) 40%);display:flex;justify-content:center}
.cta{width:100%;max-width:480px;box-shadow:var(--shadow-2)}
@media (min-width:900px){.cta-dock{justify-content:flex-end;max-width:1040px;margin-inline:auto;padding-inline:24px;background:none;pointer-events:none}.cta{width:auto;pointer-events:auto}}
.report+.site-footer,.site-content:has(.report)+.site-footer{margin-top:0}

/* Diálogo de confirmación */
.dialog{width:min(92vw,440px);padding:0;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);color:var(--text);box-shadow:var(--shadow-2)}
.dialog::backdrop{background:rgba(15,23,42,.55)}
.dialog-body{display:grid;gap:12px;padding:24px}
.dialog-title{font-size:var(--fs-22);font-weight:800}
.dialog-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:8px}

/* Modo oscuro: contraste >= 3:1 en elementos gráficos */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .step[data-state="ok"] .step-dot{color:#0b1020}:root:not([data-theme="light"]) .ring-progress{stroke:var(--brand-light,var(--brand))}:root:not([data-theme="light"]) .progress-spin{border-top-color:var(--brand-light,var(--brand))}:root:not([data-theme="light"]) .step[data-state="running"] .step-dot{border-color:var(--brand-light,var(--brand))}}
:root[data-theme="dark"] .step[data-state="ok"] .step-dot{color:#0b1020}:root[data-theme="dark"] .ring-progress{stroke:var(--brand-light,var(--brand))}:root[data-theme="dark"] .progress-spin{border-top-color:var(--brand-light,var(--brand))}:root[data-theme="dark"] .step[data-state="running"] .step-dot{border-color:var(--brand-light,var(--brand))}