/* PG Forja Clínica · Fotos y vídeo clínico comparativo. */
.pgft-con { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 10px; margin-bottom: 14px; border: 1px solid var(--borde); font-size: 14px; }
.pgft-con.ok { border-color: color-mix(in srgb, var(--ok) 45%, var(--borde)); background: color-mix(in srgb, var(--ok) 8%, transparent); }
.pgft-con.mal { border-color: color-mix(in srgb, var(--aviso) 60%, var(--borde)); background: color-mix(in srgb, var(--aviso) 12%, transparent); }
.pgft-con > span:first-child { flex: 1 1 260px; min-width: 0; }
.pgft-acciones select { margin-left: auto; max-width: 100%; }
.pgft-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.pgft-item { display: flex; flex-direction: column; padding: 0; border: 1px solid var(--borde); border-radius: 12px; background: var(--superficie); color: var(--texto); overflow: hidden; cursor: pointer; text-align: left; font: inherit; min-width: 0; }
.pgft-item:hover, .pgft-item:focus-visible { border-color: var(--pg-primario); outline: none; }
.pgft-mini { display: block; aspect-ratio: 3 / 4; background: var(--superficie2); position: relative; }
.pgft-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pgft-play { position: absolute; inset: 0; display: grid; place-items: center; font-size: 34px; color: var(--suave); }
.pgft-pie { display: block; padding: 8px 9px 4px; min-width: 0; }
.pgft-pie small { display: block; color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pgft-pie .pg-chips { margin: 6px 0 4px; }
.pgft-pie .pg-chip { white-space: normal; }
.pgft-comp li { flex-wrap: wrap; gap: 8px; }
.pgft-campos { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important; }
.pgft-aviso { margin: 10px 0; padding: 10px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--aviso) 60%, var(--borde)); align-items: flex-start; }
.pgft-centro { justify-content: center; text-align: center; }

.pgft-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 16px; align-items: start; }
.pgft-lienzo, .pgft-lado { min-width: 0; }
.pgft-lado h4 { margin: 0 0 6px; }
.pgft-lado .pg-fila-botones { margin: 10px 0; flex-wrap: wrap; }
.pgft-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin-bottom: 4px; }
.pgft-barra .pg-chip-btn { margin: 0 4px 4px 0; }
.pgft-colores { display: inline-flex; gap: 5px; margin: 0 8px 4px 2px; }
.pgft-colores button { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--borde); padding: 0; cursor: pointer; }
.pgft-colores button.on { outline: 2px solid var(--pg-primario); outline-offset: 2px; }
.pgft-fps { font-size: 13px; color: var(--suave); display: inline-flex; gap: 6px; align-items: center; margin: 0 0 4px 6px; }
.pgft-marco { background: #10161d; border-radius: 10px; overflow: hidden; display: grid; place-items: center; }
.pgft-marco canvas, .pgft-marco video { display: block; max-width: 100%; max-height: 68vh; width: auto; height: auto; }
.pgft-marco canvas { touch-action: none; cursor: crosshair; }

.pgft-camara { position: relative; background: #10161d; border-radius: 10px; overflow: hidden; }
.pgft-camara video { display: block; width: 100%; max-height: 66vh; object-fit: contain; }
.pgft-guia { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to right, transparent calc(50% - 1px), rgba(255, 212, 0, .9) calc(50% - 1px), rgba(255, 212, 0, .9) calc(50% + 1px), transparent calc(50% + 1px)),
    repeating-linear-gradient(to right, rgba(255, 255, 255, .45) 0 1px, transparent 1px 12.5%),
    repeating-linear-gradient(to bottom, rgba(255, 255, 255, .45) 0 1px, transparent 1px 12.5%); }

.pgft-par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 10px 0; }
.pgft-par figure { margin: 0; min-width: 0; }
.pgft-par canvas { display: block; width: 100%; height: auto; border-radius: 8px; background: #10161d; }
.pgft-par figcaption { font-size: 13px; padding-top: 5px; color: var(--suave); }
.pgft-cortina { position: relative; max-width: min(100%, 560px); margin: 10px auto 6px; border-radius: 8px; overflow: hidden; background: #10161d; }
.pgft-cortina canvas { display: block; width: 100%; height: 100%; object-fit: contain; }
.pgft-capa { position: absolute; inset: 0; }
.pgft-cortina i { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #ffd400; box-shadow: 0 0 3px #000; pointer-events: none; }
.pgft-desliza { display: block; width: min(100%, 560px); margin: 0 auto; }

.pgft-pac-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin: 8px 0 12px; }
.pgft-pac-lista a, .pgft-pac-par a { display: block; color: inherit; text-decoration: none; font-size: 13px; min-width: 0; }
.pgft-pac-lista img, .pgft-pac-par img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; background: var(--superficie2); margin-bottom: 4px; }
.pgft-pac-par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 420px; margin: 6px 0 12px; }

@media (max-width: 820px) {
  .pgft-editor { grid-template-columns: minmax(0, 1fr); }
  .pgft-acciones select { margin-left: 0; }
}