/* ═══════════════════════════════════════════════════════════════
   Ecografía Viewer — Frontend v2.0.0
   ═══════════════════════════════════════════════════════════════ */

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

:root {
    --bg:       #080b10;
    --surface:  #0d1117;
    --surface2: #13191f;
    --border:   rgba(255,255,255,.07);
    --border2:  rgba(255,255,255,.13);
    --text:     #e8ecf0;
    --muted:    #4a5568;
    --accent-d: rgba(255,255,255,.06);
    --r:        8px;
    --font-s:   'IBM Plex Sans', system-ui, sans-serif;
    --font-m:   'IBM Plex Mono', monospace;
}

.ecv-app *, .ecv-app *::before, .ecv-app *::after { box-sizing: border-box; margin: 0; padding: 0; }
.ecv-app { font-family: var(--font-s); color: var(--text); background: var(--bg); min-height: 100vh; -webkit-font-smoothing: antialiased; }

/* ── Hero ─────────────────────────────────────────────────────── */
.ecv-hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; position: relative; overflow: hidden; }
.ecv-hero::before {
    content: '';
    position: absolute; inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, black 30%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, black 30%, transparent 100%);
}
.ecv-hero__bg { display: none; }
.ecv-hero__content { position: relative; z-index: 1; text-align: center; max-width: 480px; width: 100%; animation: ecvUp .5s cubic-bezier(.16,1,.3,1) both; }
@keyframes ecvUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
.ecv-hero__logo { width: 48px; height: 48px; margin: 0 auto 32px; color: var(--text); opacity: .6; }
.ecv-hero__logo svg { width: 100%; height: 100%; }
.ecv-hero__title { font-size: clamp(1.6rem,4vw,2.2rem); font-weight: 300; color: var(--text); letter-spacing: -.03em; line-height: 1.2; margin-bottom: 10px; }
.ecv-hero__title span { font-weight: 600; }
.ecv-hero__subtitle { font-size: .85rem; color: var(--muted); margin-bottom: 44px; line-height: 1.6; }

/* ── Search ───────────────────────────────────────────────────── */
.ecv-search-form { width: 100%; }
.ecv-search-input-wrap { display: flex; align-items: center; background: var(--surface); border: 1px solid var(--border2); border-radius: var(--r); padding: 5px 5px 5px 16px; gap: 10px; transition: border-color .2s, box-shadow .2s; }
.ecv-search-input-wrap:focus-within { border-color: rgba(255,255,255,.25); box-shadow: 0 0 0 3px rgba(255,255,255,.04); }
.ecv-search-icon { width: 15px; height: 15px; color: var(--muted); flex-shrink: 0; }
#ecvf-dni { flex:1; background:transparent; border:none; outline:none; font-size:1rem; font-family:var(--font-m); color:var(--text); letter-spacing:.1em; min-width:0; }
#ecvf-dni::placeholder { color:var(--muted); letter-spacing:.04em; font-size:.85rem; }
.ecv-btn-search { flex-shrink:0; background:var(--text); color:var(--bg); border:none; border-radius:5px; padding:10px 22px; font-family:var(--font-s); font-size:.85rem; font-weight:600; cursor:pointer; letter-spacing:.04em; text-transform:uppercase; transition:opacity .2s, transform .15s; }
.ecv-btn-search:hover { opacity:.85; transform:translateY(-1px); }
.ecv-btn-search__spin { display:none; }
.ecv-btn-search.loading .ecv-btn-search__text { display:none; }
.ecv-btn-search.loading .ecv-btn-search__spin { display:inline-block; animation:ecvSpin .7s linear infinite; }
@keyframes ecvSpin { to { transform:rotate(360deg); } }
.ecv-search-error { margin-top:12px; font-size:.82rem; color:#f87171; min-height:18px; font-family:var(--font-m); }

/* ── Results ──────────────────────────────────────────────────── */
.ecv-results { min-height:100vh; background:var(--bg); animation:ecvUp .4s cubic-bezier(.16,1,.3,1) both; }
.ecv-results__inner { max-width:1400px; margin:0 auto; width:100%; padding:28px 24px 60px; display:flex; flex-direction:column; gap:24px; }

/* ── Patient header ───────────────────────────────────────────── */
.ecv-patient-header { display:flex; align-items:center; gap:16px; padding:16px 20px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); }
.ecv-patient-header__avatar { width:38px; height:38px; border-radius:50%; background:var(--surface2); border:1px solid var(--border2); display:flex; align-items:center; justify-content:center; font-family:var(--font-m); font-size:.85rem; font-weight:500; color:var(--text); flex-shrink:0; }
.ecv-patient-header__info { flex:1; min-width:0; }
.ecv-patient-header__info h2 { font-size:1rem; font-weight:500; color:var(--text); margin-bottom:3px; }
.ecv-patient-meta { display:flex; gap:14px; flex-wrap:wrap; }
.ecv-patient-meta span { font-size:.75rem; color:var(--muted); font-family:var(--font-m); }
.ecv-btn-back { display:inline-flex; align-items:center; gap:6px; background:transparent; border:1px solid var(--border); color:var(--muted); border-radius:6px; padding:7px 13px; font-family:var(--font-s); font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; cursor:pointer; transition:color .2s, border-color .2s; flex-shrink:0; }
.ecv-btn-back svg { width:14px; height:14px; }
.ecv-btn-back:hover { color:var(--text); border-color:var(--border2); }

/* ── Tabs ─────────────────────────────────────────────────────── */
.ecv-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.ecv-tab { padding:7px 14px; border-radius:6px; border:1px solid var(--border); background:transparent; color:var(--muted); font-family:var(--font-s); font-size:.78rem; font-weight:500; letter-spacing:.04em; text-transform:uppercase; cursor:pointer; transition:all .15s; }
.ecv-tab:hover { color:var(--text); border-color:var(--border2); }
.ecv-tab.active { background:var(--text); color:var(--bg); border-color:var(--text); font-weight:600; }

/* ── Viewer ───────────────────────────────────────────────────── */
.ecv-viewer { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:24px; min-height:280px; }
.ecv-viewer__empty { display:flex; align-items:center; justify-content:center; min-height:200px; color:var(--muted); font-size:.85rem; }
.ecv-study-info { margin-bottom:24px; padding-bottom:20px; border-bottom:1px solid var(--border); }
.ecv-study-info h3 { font-size:.95rem; font-weight:600; color:var(--text); margin-bottom:10px; }
.ecv-study-badges { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.ecv-badge-pill { display:inline-flex; align-items:center; background:var(--surface2); border:1px solid var(--border); color:var(--muted); padding:3px 10px; border-radius:100px; font-size:.75rem; font-family:var(--font-m); }
.ecv-study-report { font-size:.82rem; line-height:1.75; color:var(--muted); padding:12px 16px; border-left:2px solid var(--border2); margin-top:10px; white-space:pre-wrap; font-family:var(--font-m); }
.ecv-img-count { font-size:.75rem; color:var(--muted); margin-bottom:14px; font-family:var(--font-m); }
.ecv-img-count span { color:var(--text); }
.ecv-img-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:8px; }
.ecv-img-item { position:relative; aspect-ratio:4/3; border-radius:6px; overflow:hidden; cursor:pointer; border:1px solid var(--border); background:#000; transition:transform .2s, border-color .2s; }
.ecv-img-item:hover { transform:translateY(-2px); border-color:var(--border2); }
.ecv-img-item img { width:100%; height:100%; object-fit:cover; display:block; }
.ecv-img-item__overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.65) 0%,transparent 55%); display:flex; align-items:flex-end; padding:8px; opacity:0; transition:opacity .2s; }
.ecv-img-item:hover .ecv-img-item__overlay { opacity:1; }
.ecv-img-item__overlay span { font-size:.68rem; color:rgba(255,255,255,.7); font-family:var(--font-m); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.ecv-img-item__zoom { position:absolute; top:6px; right:6px; width:24px; height:24px; border-radius:4px; background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.15); color:rgba(255,255,255,.7); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .2s; font-size:12px; }
.ecv-img-item:hover .ecv-img-item__zoom { opacity:1; }
.ecv-no-images { text-align:center; padding:40px; color:var(--muted); font-size:.85rem; font-style:italic; }

/* ═══════════════════════════════════════════════════════════════
   LIGHTBOX
   ═══════════════════════════════════════════════════════════════ */
.ecv-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(4,6,10,.97);
    display: none;          /* JS lo pone flex al abrir */
    align-items: center;
    justify-content: center;
}
.ecv-lightbox__stage { display:flex; flex-direction:column; align-items:center; gap:12px; max-width:calc(100vw - 120px); max-height:calc(100vh - 80px); }
.ecv-lightbox__info { display:flex; gap:20px; align-items:center; color:var(--muted); font-size:.75rem; font-family:var(--font-m); }
.ecv-lightbox__close { position:fixed; top:18px; right:18px; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.06); border:1px solid var(--border); color:var(--text); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s; z-index:2; }
.ecv-lightbox__close:hover { background:rgba(255,255,255,.12); }
.ecv-lightbox__nav { position:fixed; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.06); border:1px solid var(--border); color:var(--text); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s; z-index:2; }
.ecv-lightbox__prev { left:14px; }
.ecv-lightbox__next { right:14px; }
.ecv-lightbox__nav:hover { background:rgba(255,255,255,.12); }

/* ── Wrapper de zoom (recibe transform:scale) ─────────────────── */
#ecv-lb-img-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;          /* nunca clip — el zoom debe verse */
    transform-origin: center center;
}

/* ── La imagen: SIN filter en CSS — solo el JS lo controla ──────
   CRÍTICO: no poner filter aquí, de lo contrario el inline style
   del JS queda sobreescrito por la cascade CSS                   */
#ecv-lb-img {
    display: block;
    max-width: calc(100vw - 120px);
    max-height: calc(100vh - 140px);
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 4px;
    overflow: visible;
    /* SIN filter aquí — el JS lo escribe inline */
    margin: 0;
    padding: 0;
    border: none;
    box-shadow: 0 0 40px rgba(0,0,0,.6);
    transition: filter .08s ease;
}

/* ═══════════════════════════════════════════════════════════════
   TOOLS PANEL — dentro del lightbox, position:absolute
   ═══════════════════════════════════════════════════════════════ */
#ecv-tools-toggle {
    position: absolute;
    bottom: 24px;
    right: 24px;
    z-index: 10;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
    backdrop-filter: blur(8px);
}
#ecv-tools-toggle:hover { background: rgba(255,255,255,.14); }
#ecv-tools-toggle svg { width:17px; height:17px; }

#ecv-tools-panel {
    position: absolute;
    bottom: 76px;
    right: 24px;
    z-index: 11;
    width: 248px;
    background: rgba(13,17,23,.97);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(0,0,0,.7);
    backdrop-filter: blur(20px);
    overflow: hidden;
    transform-origin: bottom right;
    transform: scale(.9) translateY(10px);
    opacity: 0;
    pointer-events: none;
    transition: transform .2s cubic-bezier(.16,1,.3,1), opacity .18s;
}
#ecv-tools-panel.open { transform:scale(1) translateY(0); opacity:1; pointer-events:all; }

.ecv-tools-header { display:flex; align-items:center; justify-content:space-between; padding:14px 16px 10px; border-bottom:1px solid var(--border); }
.ecv-tools-header span { font-size:.7rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-family:var(--font-m); }
.ecv-tools-close { background:none; border:none; color:var(--muted); cursor:pointer; font-size:18px; line-height:1; padding:0; transition:color .15s; }
.ecv-tools-close:hover { color:var(--text); }
.ecv-tools-body { padding:14px 16px 16px; display:flex; flex-direction:column; gap:16px; }

.ecv-ctrl { display:flex; flex-direction:column; gap:6px; }
.ecv-ctrl-label { display:flex; align-items:center; justify-content:space-between; }
.ecv-ctrl-label span { font-size:.72rem; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; font-family:var(--font-m); }
.ecv-ctrl-label em { font-style:normal; font-size:.72rem; color:var(--text); font-family:var(--font-m); min-width:36px; text-align:right; }

.ecv-slider { -webkit-appearance:none; appearance:none; width:100%; height:3px; border-radius:999px; background:var(--border2); outline:none; cursor:pointer; }
.ecv-slider::-webkit-slider-thumb { -webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:var(--text); cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.4); transition:transform .15s; }
.ecv-slider::-webkit-slider-thumb:hover { transform:scale(1.2); }
.ecv-slider::-moz-range-thumb { width:14px; height:14px; border-radius:50%; background:var(--text); cursor:pointer; border:none; }

.ecv-ctrl-toggle { display:flex; align-items:center; justify-content:space-between; }
.ecv-ctrl-toggle span { font-size:.72rem; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; font-family:var(--font-m); }
.ecv-switch { position:relative; width:34px; height:18px; flex-shrink:0; }
.ecv-switch input { opacity:0; width:0; height:0; }
.ecv-switch-track { position:absolute; inset:0; border-radius:999px; background:var(--surface2); border:1px solid var(--border2); cursor:pointer; transition:background .2s; }
.ecv-switch-track::after { content:''; position:absolute; top:2px; left:2px; width:12px; height:12px; border-radius:50%; background:var(--muted); transition:transform .2s, background .2s; }
.ecv-switch input:checked + .ecv-switch-track { background:rgba(255,255,255,.15); }
.ecv-switch input:checked + .ecv-switch-track::after { transform:translateX(16px); background:var(--text); }

.ecv-ctrl-divider { height:1px; background:var(--border); margin:2px 0; }
.ecv-tool-btns { display:flex; flex-direction:column; gap:7px; }
.ecv-tool-btn { width:100%; padding:9px; border-radius:7px; border:1px solid var(--border2); background:transparent; color:var(--text); font-family:var(--font-s); font-size:.78rem; font-weight:500; letter-spacing:.05em; text-transform:uppercase; cursor:pointer; transition:background .15s, border-color .15s; }
.ecv-tool-btn:hover { background:var(--accent-d); border-color:rgba(255,255,255,.2); }
.ecv-tool-btn.primary { background:var(--text); color:var(--bg); border-color:var(--text); }
.ecv-tool-btn.primary:hover { opacity:.85; }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width:640px) {
    .ecv-results__inner { padding:16px 12px 60px; }
    .ecv-viewer { padding:16px; }
    .ecv-img-grid { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
    .ecv-lightbox__nav { display:none; }
    .ecv-lightbox__stage { max-width:100vw; }
    #ecv-tools-panel { right:12px; bottom:70px; width:calc(100vw - 24px); max-width:320px; }
    #ecv-tools-toggle { right:12px; bottom:16px; }
}

/* ── Botón PDF ────────────────────────────────────────────────── */
.ecv-pdf-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 10px 18px;
    background: transparent;
    border: 1px solid var(--border2);
    border-radius: 8px;
    color: var(--text);
    font-family: var(--font-s);
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: .04em;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, border-color .2s, color .15s;
}
.ecv-pdf-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--text);
}
.ecv-pdf-btn:hover {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.28);
    color: #fff;
}

/* ── Google Drive badge ───────────────────────────────────────── */
.ecv-drive-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(66,133,244,.12);
    border: 1px solid rgba(66,133,244,.25);
    color: #4285f4;
    padding: 2px 8px;
    border-radius: 100px;
    font-size: .7rem;
    font-family: var(--font-m);
    letter-spacing: .04em;
    vertical-align: middle;
}
.ecv-drive-badge::before {
    content: '▲';
    font-size: .6rem;
}