/* =====================================================================
   Ficha del paciente → Archivos: lista de archivos y visores 3D y CBCT.
   Viene de visor-archivos-3d-cbct.html, casi sin cambios. Los colores,
   la tipografía, los botones, los paneles y las tablas son los de la
   plataforma (prototipo.css y app.css): acá sólo se suman los tokens que
   no existían. Diferencias con el original, para no chocar con el
   prototipo: el panel del visor se llama .visor (el prototipo ya usa
   .viewer para otra cosa) y lo de la lista va dentro de .arch-panel (el
   prototipo tiene sus propios .drop y .msg). La grilla de los tres planos
   va como .ctwrap > .ct, para que no estire la etiqueta CBCT de la lista.
   ===================================================================== */
:root {
  --viewer-bg: #E4E4DD;
  /* película: siempre oscura, igual en ambos temas */
  --film-2: #1A1B19;
  --film-ink-3: #8D8F89;
  --p-ax: #E0A04A;
  --p-co: #6F9AD8;
  --p-sa: #B7C26A;
  /* vista dental: transversales, oblicuo, panorámica (la curva) y 3D */
  --p-cs: #E07FD2;
  --p-ob: #63C27A;
  --p-pa: #E3C04B;
  --p-3d: #E6E1D3;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) { --viewer-bg: #1C1D1A; }
}
:root[data-theme=dark] { --viewer-bg: #1C1D1A; }

/* ---- Lista de archivos ---------------------------------------------- */
.arch-panel .drop{margin:14px 18px;border:1.5px dashed var(--line);border-radius:var(--r);padding:16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;color:var(--ink-2);background:none;transition:background var(--t),border-color var(--t)}
.arch-panel .drop.over{background:var(--acc-tint);border-color:var(--acc)}
.arch-panel .drop svg{width:26px;height:26px;stroke:var(--ink-3);fill:none;stroke-width:1.5;flex:none}
.arch-panel .drop p{flex:1;min-width:200px;font-size:13.5px}
.arch-panel .msg{margin:0 18px 12px;max-width:none;font-size:13px;line-height:1.5;padding:8px 12px;border-radius:var(--r-sm);background:var(--alert-tint);color:var(--alert-ink)}
.arch-panel td.r,.arch-panel th.r{text-align:right}
.arch-panel label.btn{cursor:pointer}
.fname{display:flex;align-items:center;gap:10px;min-width:0}
.ftype{font-family:var(--mono);font-size:10px;font-weight:500;padding:3px 6px;border-radius:3px;background:var(--sunken);color:var(--ink-2);min-width:42px;text-align:center;flex:none}
.ftype.d3{background:var(--acc-tint);color:var(--acc-ink)}
.ftype.ct{background:var(--film);color:var(--p-ax)}
.fname b{font-weight:500;word-break:break-all}
.fname small{display:block;font-size:12px;color:var(--ink-3)}
.tag{font-size:11px;color:var(--ink-3);border:1px solid var(--line);border-radius:10px;padding:0 7px;margin-left:6px;white-space:nowrap}
/* Estudios por categoría (Tomografías, Escaneos, Radiografías, Fotos…) */
.arch-panel tr.grupo th{padding:16px 18px 8px;color:var(--ink-2);background:var(--paper);border-bottom:1px solid var(--line-soft)}
.arch-panel tr.grupo:first-child th{padding-top:12px}
.arch-panel tr.grupo th svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.7;vertical-align:-2px;margin-right:8px}
.arch-panel tr.grupo th .n{margin-left:8px;font-family:var(--mono);letter-spacing:0;color:var(--ink-3)}
.arch-panel a.btn{text-decoration:none;color:inherit}
.arch-panel a.btn svg{width:13px;height:13px}
/* Las acciones de cada estudio (ver, descargar, eliminar) y lo que se está guardando */
.arch-panel .acciones{display:inline-flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap}
.arch-panel .btn.ico{padding:4px 7px;gap:5px}
.arch-panel .btn.ico span:empty{display:none}
.arch-panel .btn.ico[data-seguro]{color:var(--alert-ink);background:var(--alert-tint)}
.arch-panel .subiendo{display:inline-block;min-width:132px;padding:4px 10px;border-radius:var(--r-sm);font-size:12px;font-family:var(--mono);color:var(--ink-2);text-align:left;
  background:linear-gradient(90deg,var(--acc-tint) var(--p,0%),var(--sunken) var(--p,0%))}
.arch-panel .note.err{color:var(--alert-ink)}
.check-fila{display:flex;align-items:center;gap:8px;font-size:13.5px;cursor:pointer}
.check-fila input{width:16px;height:16px;accent-color:var(--acc);margin:0}
/* Panel para nombrar lo que se sube */
.nuevo-est{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid var(--line-soft);border-radius:var(--r);background:var(--paper)}
.nuevo-est .field{display:flex;flex-direction:column;gap:5px}
.nuevo-est .sug{display:flex;flex-wrap:wrap;gap:6px}
.nuevo-est .sug:empty{display:none}

/* ---- Visores ----------------------------------------------------------- */
.visor{position:fixed;inset:0;z-index:45;background:rgba(10,10,10,.45);display:flex;justify-content:flex-end}
.vbox{background:var(--surface);width:min(980px,100%);height:100%;display:flex;flex-direction:column;box-shadow:var(--shadow-2);padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.vbox.wide{width:min(1280px,100%)}
.vhead{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
.vhead .t{flex:1;min-width:0}
.vhead h2{margin:0;font-weight:600;font-size:16px;word-break:break-all}
.vtools{display:flex;gap:6px;flex-wrap:wrap;padding:10px 16px;border-bottom:1px solid var(--line-soft);align-items:center}
.vtools .grp{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.vtools .div{width:1px;height:22px;background:var(--line)}
.vtools label.rng{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-3)}
.vtools input[type=range]{width:110px;accent-color:var(--acc)}
.visor .btn[aria-pressed="true"]{background:var(--acc-tint);border-color:var(--acc);color:var(--acc-ink)}
/* Caso con varios modelos: un botón por modelo para mostrarlo u ocultarlo */
.vmodels{display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding:8px 16px;border-bottom:1px solid var(--line-soft)}
.vmodels .lbl{margin-right:4px}
.vmodels .btn .sw{width:10px;height:10px;border-radius:3px;border:1px solid color-mix(in srgb,var(--ink) 25%,transparent);flex:none}
.vmodels .btn[aria-pressed="false"]{color:var(--ink-3);text-decoration:line-through}
.vnota{margin:0;padding:8px 16px;font-size:13px;line-height:1.45;background:var(--watch-tint);color:var(--watch-ink);border-bottom:1px solid var(--line-soft)}
.stage{position:relative;flex:1;min-height:0;background:var(--viewer-bg)}
.stage canvas{display:block;width:100%;height:100%;touch-action:none}
.hint{position:absolute;left:12px;bottom:12px;font-size:12px;color:var(--ink-3);background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:4px 9px;pointer-events:none}
.loading{position:absolute;inset:0;display:grid;place-items:center;color:var(--ink-3);font-size:14px;padding:24px;text-align:center;z-index:2}
.loading.dark{background:var(--film);color:var(--film-ink)}
.loading p{max-width:52ch}
.vfoot{display:flex;gap:22px;flex-wrap:wrap;padding:12px 16px;border-top:1px solid var(--line-soft)}
.vfoot div{display:flex;flex-direction:column}
.vfoot b{font-family:var(--mono);font-weight:500;font-size:13.5px;font-variant-numeric:tabular-nums}

/* ---- Imágenes (fotos y radiografías) -------------------------------------- */
.istage{overflow:hidden;cursor:grab;touch-action:none;user-select:none;background:var(--film)}
.istage.arrastrando{cursor:grabbing}
.istage img{position:absolute;left:50%;top:50%;max-width:none;transform-origin:center;transform:translate(-50%,-50%)}
.istage img:not([src]){display:none}
.istage .hint{background:var(--film-2);color:var(--film-ink-3);border-color:#2A2C28}
.inav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:42px;height:58px;border-radius:var(--r);border:1px solid #3A3C37;background:rgba(14,15,14,.7);color:var(--film-ink);font-size:28px;line-height:1;cursor:pointer}
.inav:hover{background:rgba(42,44,40,.9)}
.inav.prev{left:12px}
.inav.next{right:12px}
.ithumbs{display:flex;gap:6px;overflow-x:auto;padding:8px 16px;border-top:1px solid var(--line-soft)}
.ithumbs button{flex:none;width:68px;height:50px;padding:0;border:2px solid transparent;border-radius:var(--r-sm);background:var(--sunken);cursor:pointer;overflow:hidden}
.ithumbs button[aria-current="true"]{border-color:var(--acc)}
.ithumbs img{width:100%;height:100%;object-fit:cover;display:block}
.ithumbs button.roto{font-family:var(--mono);font-size:11px;color:var(--ink-3)}

/* ---- CBCT ------------------------------------------------------------ */
.ctwrap{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}
/* (.ctwrap > .ct: en el original, .ct también estiraba la etiqueta CBCT de la lista) */
.ctwrap > .ct{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:2px;background:var(--film)}
.pane{position:relative;background:var(--film);display:flex;flex-direction:column;min-height:0;min-width:0}
.pane .cv{flex:1;min-height:0;position:relative}
.pane canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}
.ph{display:flex;align-items:center;gap:8px;padding:6px 10px;color:var(--film-ink);font-size:12px;background:var(--film-2)}
.ph .nm{font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:10.5px;display:inline-flex;align-items:center;gap:6px}
.ph .nm::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--pc)}
.ph input[type=range]{flex:1;min-width:60px;accent-color:var(--pc)}
.ph .idx{font-family:var(--mono);font-size:11px;color:var(--film-ink-3);min-width:62px;text-align:right}
.ph button{background:none;border:1px solid #3A3C37;color:var(--film-ink);border-radius:var(--r-sm);font-size:11px;padding:1px 7px;cursor:pointer}
.ph button:hover{background:#2A2C28}
.info{background:var(--film-2);color:var(--film-ink);padding:14px 16px;overflow:auto;font-size:13px;display:flex;flex-direction:column;gap:12px}
.info dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;margin:0}
.info dt{color:var(--film-ink-3);font-size:12px}
.info dd{margin:0;font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums;word-break:break-word}
.info .k{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--film-ink-3)}
.info p{color:var(--film-ink-3);font-size:12px;line-height:1.5}
.ctwrap > .ct.max .pane:not(.big),.ctwrap > .ct.max .info{display:none}
.ctwrap > .ct.max{grid-template-columns:1fr;grid-template-rows:1fr}

/* ---- CBCT · vista dental (axial con curva, panorámica, transversales, oblicuo y 3D) ---- */
.vt-lbl{font-size:12.5px;color:var(--ink-3);margin-right:2px}
.vtools select{margin-left:2px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:var(--r-sm);padding:3px 6px;font-size:12.5px}
.visor:not(.modo-dental) .solo-dental,.visor:not(.modo-dental) .pane.dental-only{display:none}
.modo-dental .ctwrap > .ct{grid-template-columns:repeat(8,minmax(0,1fr));grid-template-areas:"cs cs cs ax ax ax ob ob" "td td td td pa pa pa pa"}
.modo-dental .ct [data-pane=co],.modo-dental .ct [data-pane=sa],.modo-dental .ct .info{display:none}
.modo-dental .ct [data-pane=ax]{grid-area:ax}
.modo-dental .ct [data-pane=cs]{grid-area:cs}
.modo-dental .ct [data-pane=ob]{grid-area:ob}
.modo-dental .ct [data-pane=td]{grid-area:td}
.modo-dental .ct [data-pane=pa]{grid-area:pa}
.modo-dental .ctwrap > .ct.max{grid-template-areas:none;grid-template-columns:1fr;grid-template-rows:1fr}
.modo-dental .ct.max .pane.big{grid-area:auto}
.pane canvas.cv3d{cursor:grab}
.pane canvas.cv3d:active{cursor:grabbing}
.cvmsg{position:absolute;inset:0;display:grid;place-items:center;padding:16px;text-align:center;color:var(--film-ink-3);font-size:13px;pointer-events:none}
.cvmsg:empty{display:none}
.d-aviso{display:none;margin:0;max-width:none;padding:6px 14px;font-size:11.5px;line-height:1.4;color:var(--film-ink-3);background:var(--film-2);border-top:1px solid #2A2C28}
.modo-dental .d-aviso{display:block}
.dtabs{display:none;gap:2px;overflow-x:auto;background:var(--film-2);padding:2px 8px 0;border-bottom:1px solid #2A2C28;flex:none}
.dtabs button{flex:none;background:none;border:0;border-bottom:2px solid transparent;color:var(--film-ink-3);font-size:13px;font-weight:500;padding:9px 10px 8px;cursor:pointer}
.dtabs button[aria-selected="true"]{color:var(--film-ink);border-bottom-color:var(--p-ax)}

@media (max-width:640px){
  .hide-sm{display:none}
  /* la lista de estudios en el celular: el nombre arriba y las acciones abajo, sin deslizar de costado */
  .arch-panel .tbl thead{display:none}
  .arch-panel .tbl,.arch-panel .tbl tbody,.arch-panel .tbl tr,.arch-panel .tbl tr.grupo th{display:block;width:100%}
  .arch-panel .tbl tr:not(.grupo){display:flex;flex-direction:column;gap:8px;padding:11px 16px;border-bottom:1px solid var(--line-soft)}
  .arch-panel .tbl tr:not(.grupo):last-child{border-bottom:0}
  .arch-panel .tbl tr:not(.grupo) td{display:block;padding:0;border:0}
  .arch-panel .tbl tr:not(.grupo) td.hide-sm{display:none}
  .arch-panel .tbl tr:not(.grupo) td.r{text-align:left;padding-left:52px}
  .arch-panel .acciones{justify-content:flex-start}
  .vtools .div{display:none}
  .ctwrap > .ct{display:flex;flex-direction:column;overflow-y:auto}
  .pane{flex:none;height:min(86vw,440px)}
  .info{flex:none}
  .ctwrap > .ct.max .pane.big{height:100%;flex:1}
  /* tomografía en el celular: la barra en una sola fila, que se desliza de costado */
  #ctviewer .vtools{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:8px 12px}
  #ctviewer .vtools::-webkit-scrollbar{display:none}
  #ctviewer .vtools .grp{flex-wrap:nowrap;flex:none}
  #ctviewer .vtools .div{display:block;flex:none}
  #ctviewer .vhead{padding:10px 12px}
  .d-aviso{padding:5px 12px;font-size:11px}
  /* vista dental en el celular: una vista por vez, con pestañas */
  .modo-dental .dtabs{display:flex}
  .modo-dental .ctwrap > .ct{overflow:hidden}
  .modo-dental .ct .pane{display:none}
  .modo-dental .ct .pane.activa{display:flex;flex:1 1 auto;height:auto;min-height:0}
  .modo-dental .ct .pane [data-max]{display:none}
}