/* Vista fotos (#sec-fotos). Hoja de la vista Panel Fotográfico: reglas acotadas a su sección (y a su visor #fotoImgOv / su editor #fotoPeOv, que cuelgan del <body>) y colores de tokens.css. */

/* ═══════════════════════════════════════════════════════════════════
   1 · GALERÍA · el diseño del Figma (aprobada, §5)
   Archivo ESPARQ · página «Validaciones UI» · marco «Panel fotgrafico» =
   nodo 430:3613. Viene de ui/figma (30b8035…8169cf2), donde vivía en el
   <style> global; aquí, acotado a #sec-fotos y con los hex que tienen
   token pasados a su variable (G02). Los que no tienen token van por valor
   y se listan en el reporte (lote3-fotos.md › Variables nuevas).
   Función de main que se viste aquí sin diseño en la UI: la casilla «Sin
   filtro temporal» (decisión de Fabrizio: se queda) y el conteo.
   ═══════════════════════════════════════════════════════════════════ */

/* 430:3732 · cabecera: título y descripción a la izquierda, botón a la derecha */
#sec-fotos .fotos-hdr{ margin-bottom:24px !important; }          /* 430:3731 Espacio=24 */
#sec-fotos .fotos-hdr::before{ display:none !important; }        /* el Figma no lleva la barra azul (G12) */
#sec-fotos .fotos-hdr-txt{ display:flex; flex-direction:column; gap:4px; min-width:0; }
/* 430:3734 · «Panel Fotográfico» Inter 700 24/28 #111827 (sin token: el mismo de la cabecera de APU's) */
#sec-fotos .fotos-hdr-t{
  font:700 24px/28px Inter,system-ui,sans-serif; letter-spacing:0; color:#111827;
}
/* G12: descripción siempre. Mismo tratamiento que el subtítulo de la
   cabecera modelo de APU's (§1, D-118): 400 14/20 #4B5563 (sin token). */
#sec-fotos .fotos-hdr-s{
  margin:0; font:400 14px/20px Inter,system-ui,sans-serif; letter-spacing:0; color:#4B5563;
}
/* 430:3736 · Button — píldora blue/300, radio 50, 12/24 · 430:3737 Inter 500 14 blanco.
   G05: con Heroicon (arrow-up-tray). */
#sec-fotos .fotos-upload-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--blue-300) !important; border:none !important; color:var(--gray-1) !important;
  border-radius:50px !important; padding:12px 24px !important;
  font:500 14px/1 Inter,system-ui,sans-serif !important; letter-spacing:0 !important;
}
#sec-fotos .fotos-upload-btn:hover{ background:var(--blue-400) !important; }   /* la UI: #066BAF, sin token */
#sec-fotos .fotos-upload-btn svg{ width:18px; height:18px; flex:none; }

/* 430:3738 · Rectangle 5 — la tarjeta blanca: radio 12, sombra X-1 Y2 blur 2.5 #000 6%. */
#sec-fotos #fotoPanelCard{
  background:var(--gray-1); border:none; border-radius:12px;
  box-shadow:-1px 2px 2.5px rgba(0,0,0,.06);
  padding:34px 21px 38px;
}

/* 430:3740 — los filtros en fila, 21px entre ellos y 40px hasta la rejilla.
   El Figma trae tres desplegables (Semana · Fase · Partida). Semana NO entra
   (Fabrizio: manda la cabecera); su lugar lo ocupa la casilla «Sin filtro
   temporal» de main, y el conteo de main cierra la fila a la derecha. */
#sec-fotos .foto-filtros{
  grid-template-columns:repeat(3,minmax(0,1fr)) auto; gap:21px; margin-bottom:40px;
  align-items:center;
}
/* 430:3743 — en el Figma los rótulos están ocultos. Se quedan para lectores
   de pantalla, pero no se ven. */
#sec-fotos .foto-f-lbl{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
  text-transform:none;          /* main los pone en mayúsculas (G01): se leen igual en voz */
}
#sec-fotos{
  /* trazo blue/200 (#3195D7): dentro de un data: URI no hay variables */
  --foto-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%233195D7' stroke-width='1.67' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* 430:3746 · Input Frame — alto 40, radio 6, borde 1px blue/50, blanco, 8/12.
   430:3750 · texto Inter 400 14/20 neutro/10.  564:111 · chevron blue/200. */
#sec-fotos .foto-f-sel{
  height:40px; border:1px solid var(--blue-50); border-radius:6px; background-color:var(--gray-1);
  padding:8px 44px 8px 12px;
  font:400 14px/20px Inter,system-ui,sans-serif; color:var(--gray-7);
  -webkit-appearance:none; appearance:none;
  background-image:var(--foto-chevron);
  background-repeat:no-repeat; background-position:right 12px center; background-size:20px 20px;
}
#sec-fotos .foto-f-sel:focus{ border-color:var(--blue-300); box-shadow:0 0 0 3px rgba(7,127,207,.14); }
/* Apagado: el bloque de main usa `background:` y borraba la flecha; se repone. */
#sec-fotos .foto-f-sel:disabled{
  background:var(--gray-1) var(--foto-chevron) no-repeat right 12px center / 20px 20px;
  color:#A3A3A3;                                  /* Neutral/400 del placeholder 430:3771 (sin token) */
}
/* G14: un filtro sin aplicar se ve neutro; solo se pinta el que tiene valor.
   «Todas las fases / Todas las partidas» valen «todas». */
#sec-fotos .foto-f-sel:not(:disabled):not(:has(option[value="todas"]:checked)){
  border-color:var(--blue-300); background-color:var(--blue-50); color:var(--blue-400); font-weight:500;
}

/* «Sin filtro temporal» (main, F1) — sin diseño en la UI. Se viste como un
   campo más de la fila (mismo alto, radio, borde y letra que el desplegable
   430:3746) y sigue G14: MARCADA es «sin filtro» (neutra); DESMARCADA filtra
   por la semana de la cabecera, que es un filtro aplicado, y se pinta. */
#sec-fotos .foto-f-todo{
  box-sizing:border-box; height:40px; align-self:center; padding:8px 12px;
  display:flex; flex-direction:row; align-items:center; gap:10px;
  border:1px solid var(--blue-50); border-radius:6px; background:var(--gray-1);
  font:400 14px/20px Inter,system-ui,sans-serif; color:var(--gray-7); white-space:nowrap;
  cursor:pointer; min-width:0; overflow:hidden;
}
#sec-fotos .foto-f-todo input{ width:16px; height:16px; margin:0; flex:none; accent-color:var(--blue-300); cursor:pointer; }
#sec-fotos .foto-f-todo:has(input:focus-visible){ border-color:var(--blue-300); box-shadow:0 0 0 3px rgba(7,127,207,.14); }
#sec-fotos .foto-f-todo:has(input:not(:checked)){
  border-color:var(--blue-300); background:var(--blue-50); color:var(--blue-400); font-weight:500;
}
/* El conteo de main («6 de 14 fotos · todas las semanas» / «· S12»). La UI lo
   ocultaba; sin selector de semana es lo único que dice qué semana se ve,
   así que se queda, en gris legible (G03) y a la derecha de la fila. */
#sec-fotos .foto-f-cont{
  display:block; padding:0; white-space:nowrap; text-align:right;
  font:400 13px/20px Inter,system-ui,sans-serif; font-variant-numeric:tabular-nums; color:var(--gray-6);
}

/* 430:3795 / 430:3796 — rejilla: 253.5px por tarjeta, 23px entre columnas y 30px entre filas */
#sec-fotos .foto-grid-in{
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:30px 23px;
  padding:2px 2px 6px;        /* que la sombra de las tarjetas no se recorte con el scroll */
}
/* 430:3797 · Card Fotografico — sombra X0 Y1 blur 5.1 #000 7.06%; radios 12 arriba
   (430:3798) y 8 abajo (430:3800), borde 1px blue/50. */
#sec-fotos .foto-card{
  position:relative;
  background:var(--gray-1); border:1px solid var(--blue-50); border-radius:12px 12px 8px 8px;
  box-shadow:0 1px 5.1px rgba(0,0,0,.0706); overflow:visible;
}
#sec-fotos .foto-card.clic:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.10); }
/* 430:3798 · Image Container — 10px arriba y a los lados, sin margen abajo */
#sec-fotos .foto-card-m{ position:relative; padding:10px 10px 0; }
/* 430:3799 · Image — 233.5×173.3, radio 8, «Rellenar», proporción fija */
#sec-fotos .foto-img,
#sec-fotos .foto-ph{
  width:100%; height:auto; aspect-ratio:233.5/173.3; border-radius:8px;
  object-fit:cover;
}
/* 430:3808 · Badge — píldora blue/300, alto 22, radio 20, 10px a los lados.
   430:3809 · Inter 500 10px blanco. 3px desde la foto y 8px desde arriba. */
#sec-fotos .foto-card-fase{
  position:absolute; top:18px; left:13px; z-index:1;
  height:22px; box-sizing:border-box; padding:0 10px; border-radius:20px;
  display:inline-flex; align-items:center; max-width:calc(100% - 26px);
  background:var(--blue-300); color:var(--gray-1);
  font:500 10px/22px Inter,system-ui,sans-serif; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
/* 430:3800 · Content Container — 10/12/18/12, 10px entre título y descripción */
#sec-fotos .foto-card-b{
  display:flex; flex-direction:column; gap:10px;
  padding:10px 12px 18px; background:transparent; border-radius:0 0 8px 8px;
}
/* 430:3802 · Title — Inter 700 16px neutro/10 */
#sec-fotos .foto-card-d{
  font:700 16px/22px Inter,system-ui,sans-serif; color:var(--gray-7);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* La insignia de la foto (Cierre / Avance / Hito: fotos que entran fuera del
   cupo, main e0d208a). Antes llevaba el margen en un style en línea. */
#sec-fotos .foto-card-bdg{ margin-left:6px; vertical-align:2px; }
/* 430:3804 · Description Row — descripción a la izquierda, flecha a la derecha */
#sec-fotos .foto-card-pie{ display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:22px; }
/* 430:3805 · Description — Inter 400 14px neutro/7. Aquí va lo de main:
   «S12 · » cuando se ven todas las semanas, y el nombre legible de la partida. */
#sec-fotos .foto-card-p{
  margin-top:0; min-width:0; font:400 14px/22px Inter,system-ui,sans-serif; color:var(--gray-5);
}
/* 430:3806 / 430:3807 · bi:arrow-*-circle — 17.65px, blue/75 */
#sec-fotos .foto-card-ir{ flex:0 0 auto; width:17.65px; height:17.65px; color:var(--blue-75); }
/* El lápiz del autor, por encima de la etiqueta y dentro del marco de la foto */
#sec-fotos .foto-card-ed{
  position:absolute; top:16px; right:16px; z-index:2;
  width:30px; height:30px; padding:0; border:none; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  background:rgba(255,255,255,.92); color:var(--gray-7);
  box-shadow:0 2px 6px rgba(16,24,40,.18);
}
#sec-fotos .foto-card-ed:hover{ background:var(--gray-1); color:var(--blue-300); }
/* main lo muestra al pasar el ratón (opacity 0 → 1); también al llegar con el teclado. */
#sec-fotos .foto-card-ed:focus-visible{ opacity:1; outline:2px solid var(--blue-300); outline-offset:2px; }
#sec-fotos .foto-card-ed svg{ width:16px; height:16px; }

/* Vacío (main): la misma forma que el del visor de Documentación referencial.
   Solo sube la letra al mínimo legible y los grises a token. */
#sec-fotos .foto-vacio .t{ font:600 14px/20px Inter,system-ui,sans-serif; color:var(--gray-7); }
#sec-fotos .foto-vacio .s{ font:400 13px/20px Inter,system-ui,sans-serif; color:var(--gray-6); }

/* Imágenes de RFIs (main) — sin diseño en la UI. Sin la barra azul (G12) y
   con el pie del adjunto por encima del mínimo (G04: iba a 9.5 px en línea). */
#sec-fotos #fotoRfiSection .section-header{ font-size:16px !important; color:var(--gray-7); }
#sec-fotos #fotoRfiSection .section-header::before{ display:none !important; }
#sec-fotos #fotoRfiSection .section-subheader{ font-size:13px; color:var(--gray-6); }
#sec-fotos #fotoRfiGrid > div > div{ font-size:12px !important; }
#sec-fotos #fotoRfiGrid > div > div > div{ font-size:11px !important; }

@media(max-width:1100px){
  #sec-fotos .foto-filtros{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  #sec-fotos .foto-f-cont{ grid-column:1 / -1; text-align:left; }
}
@media(max-width:640px){
  #sec-fotos .foto-filtros{ grid-template-columns:1fr; gap:12px; margin-bottom:24px; }
  #sec-fotos #fotoPanelCard{ padding:20px 14px 24px; }
}


/* ═══════════════════════════════════════════════════════════════════
   2 · VISOR + PANEL LATERAL (#fotoImgOv) — sin diseño en la UI
   Modelo §1 «Carpetas + visor» (Operaciones › Documentación referencial,
   D-230): visor y panel como dos tarjetas blancas a la misma altura (G20),
   el visor con su barra arriba (como .dref-visor-cab: qué es, flechas y
   acciones a la derecha) y «Cerrar» en pastilla con fondo difuminado (G07).
   El hilo reutiliza .pen-chat de la Bandeja (main 00f025f).
   El visor cuelga del <body> y solo lo abre esta vista (fotoImgOpen; las
   fotos de RFI abren en pestaña nueva), por eso va acotado a #fotoImgOv.
   Anula el posicionamiento fijo del bloque de main (flechas, ✕ y panel con
   position:fixed y el overlay con padding-right:384).
   ═══════════════════════════════════════════════════════════════════ */
#fotoImgOv{ padding:24px; align-items:stretch; justify-content:center; }
#fotoImgOv .foto-img-marco{
  display:flex; gap:16px; width:100%; max-width:1480px;
  height:calc(100vh - 48px); height:calc(100dvh - 48px); min-height:0;
}
#fotoImgOv .foto-img-col{
  flex:1 1 auto; min-width:0; display:flex; flex-direction:column;
  background:var(--gray-1); border-radius:14px; overflow:hidden;
  box-shadow:0 18px 50px -12px rgba(0,0,0,.45);
}
/* La barra del visor (≈ .dref-visor-cab): qué foto es a la izquierda, las
   flechas y «Cerrar» a la derecha. */
#fotoImgOv .foto-img-cab{
  flex:none; display:flex; align-items:center; gap:12px;
  padding:12px 16px; background:var(--blue-50); border-bottom:1px solid var(--blue-50);
}
#fotoImgOv .foto-img-cap{
  flex:1 1 auto; min-width:0; text-align:left;
  background:none; padding:0; border-radius:0; -webkit-backdrop-filter:none; backdrop-filter:none;
}
/* Antes 10 px, mayúsculas y espaciado (G01, G04). */
#fotoImgOv .foto-img-kicker{
  font:600 13px/18px Inter,system-ui,sans-serif; letter-spacing:0; text-transform:none;
  color:var(--blue-400); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#fotoImgOv .foto-img-desc{
  margin-top:2px; font:700 16px/22px Inter,system-ui,sans-serif; color:var(--gray-7);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#fotoImgOv .foto-img-flechas{ flex:none; display:flex; gap:8px; }
#fotoImgOv .foto-img-x,
#fotoImgOv .foto-img-nav{
  position:static; top:auto; right:auto; left:auto; transform:none; z-index:auto;
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  box-shadow:none; cursor:pointer; font-family:Inter,system-ui,sans-serif;
  background:var(--gray-1); color:var(--blue-400); border:1px solid var(--blue-75);
}
#fotoImgOv .foto-img-nav{ width:40px; height:40px; border-radius:50%; padding:0; font-size:0; }
#fotoImgOv .foto-img-nav svg{ width:20px; height:20px; }
/* G07 · «✕ Cerrar» en pastilla (la de Documentación referencial en el teléfono). */
#fotoImgOv .foto-img-x{
  width:auto; height:40px; gap:6px; padding:0 16px 0 12px; border-radius:999px;
  border-color:var(--blue-200); color:var(--blue-500); font-size:14px; font-weight:600;
}
#fotoImgOv .foto-img-x svg{ width:18px; height:18px; }
#fotoImgOv .foto-img-x:hover,
#fotoImgOv .foto-img-nav:hover{ background:var(--blue-50); }
#fotoImgOv .foto-img-x:focus-visible,
#fotoImgOv .foto-img-nav:focus-visible{ outline:2px solid var(--blue-300); outline-offset:2px; }
/* La foto: cabe en su caja (fotoImgAjustar mide esta caja), con tope de +20 %. */
#fotoImgOv .foto-img-box{
  flex:1 1 auto; min-height:0; max-width:none; gap:0;
  display:flex; align-items:center; justify-content:center;
  padding:16px; background:var(--gray-2); overflow:hidden;
}
#fotoImgOv .foto-img-full{
  background:transparent;       /* main: #fff; la foto lo tapa y el blanco la hacía contar como tarjeta anidada (G11) */
  max-width:100%; max-height:100%; object-fit:contain; border-radius:8px;
  box-shadow:0 8px 24px -8px rgba(0,0,0,.35);
}

/* El panel lateral: segunda tarjeta, misma altura que el visor. */
#fotoImgOv .foto-img-side{
  position:static; top:auto; right:auto; bottom:auto; z-index:auto;
  flex:0 0 360px; width:360px; box-sizing:border-box; max-height:none; margin:0;
  display:flex; flex-direction:column; gap:8px; overflow-y:auto;
  padding:20px; border-radius:14px; background:var(--gray-1); color:var(--gray-7);
  box-shadow:0 18px 50px -12px rgba(0,0,0,.45);
  font:400 14px/20px Inter,system-ui,sans-serif;
}
#fotoImgOv .fs-cab{ display:flex; align-items:center; gap:8px; margin-bottom:6px; font:700 16px/22px Inter,system-ui,sans-serif; color:var(--gray-7); }
/* La insignia (Cierre / Avance / Hito) como chip tenue (G02). El texto es dato. */
#fotoImgOv .fs-badge{
  font:600 12px/18px Inter,system-ui,sans-serif; letter-spacing:0;
  background:var(--blue-50); color:var(--blue-400); border-radius:999px; padding:1px 8px;
}
#fotoImgOv .fs-fila{ display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--blue-50); }
#fotoImgOv .fs-fila span{ color:var(--gray-6); }
#fotoImgOv .fs-fila b{ font-weight:600; color:var(--gray-7); text-align:right; }
#fotoImgOv .fs-fila i{ color:var(--gray-6); font-style:normal; }
/* Antes 11 px en mayúsculas (G01, G04): título de bloque en tipo oración. */
#fotoImgOv .fs-sec{
  margin-top:14px; font:600 14px/20px Inter,system-ui,sans-serif;
  letter-spacing:0; text-transform:none; color:var(--gray-7);
}
#fotoImgOv .fs-desc{ line-height:1.45; white-space:pre-wrap; color:var(--gray-7); }
#fotoImgOv .fs-desc i{ color:var(--gray-6); }
/* El hilo (.pen-chat de la Bandeja), con la letra al mínimo legible. */
#fotoImgOv .fs-chat{ max-height:none; flex:1 1 auto; min-height:110px; background:var(--gray-2); border-color:var(--blue-50); }
#fotoImgOv .pen-chat-empty{ font-size:13px; font-style:normal; color:var(--gray-6); }
#fotoImgOv .pen-comentario{ border-color:var(--blue-50); border-left-color:var(--blue-300); }
#fotoImgOv .pen-comentario-head{ font-size:12px; }
#fotoImgOv .pen-comentario-fecha{ font-size:12px; color:var(--gray-6); }
#fotoImgOv .pen-comentario-texto{ font-size:14px; color:var(--gray-7); }
#fotoImgOv .pen-chat-input-area textarea{
  font-size:14px; border:1px solid var(--gray-5); border-radius:8px; color:var(--gray-7);
}
#fotoImgOv .pen-chat-input-area textarea:focus{ border-color:var(--blue-300); box-shadow:0 0 0 3px rgba(7,127,207,.14); outline:none; }
#fotoImgOv .fs-lbl{ font-size:13px; font-weight:500; color:var(--gray-6); }
#fotoImgOv .fs-err{ font-size:13px; color:var(--red-400); }
/* «Comentar»: pastilla primaria azul con icono (G05). */
#fotoImgOv .fs-btn{
  align-self:flex-end; display:inline-flex; align-items:center; gap:8px;
  border:0; border-radius:50px; padding:10px 20px; cursor:pointer;
  background:var(--blue-300); color:var(--gray-1); font:500 14px/1 Inter,system-ui,sans-serif;
}
#fotoImgOv .fs-btn:hover{ background:var(--blue-400); }
#fotoImgOv .fs-btn svg{ width:16px; height:16px; flex:none; }
#fotoImgOv .fs-btn:focus-visible{ outline:2px solid var(--blue-300); outline-offset:2px; }

/* Angosto (el mismo corte de main, 820, subido a 900 para coincidir con la
   capa móvil): visor arriba a todo el ancho con su barra fija, y el panel
   debajo como hoja que sube desde abajo (skill móvil §4 «Ventanas»; M08:
   visor a pantalla completa con «✕ Cerrar»). Se desplaza el velo entero. */
@media(max-width:900px){
  #fotoImgOv{ padding:0; flex-direction:column; justify-content:flex-start; overflow-y:auto; overscroll-behavior:contain; }
  #fotoImgOv .foto-img-marco{ flex-direction:column; gap:0; max-width:none; height:auto; min-height:100vh; min-height:100dvh; }
  #fotoImgOv .foto-img-col{ flex:none; border-radius:0; box-shadow:none; overflow:visible; }
  #fotoImgOv .foto-img-cab{
    position:sticky; top:0; z-index:3; flex-wrap:wrap; gap:8px 10px;
    padding:10px 12px; padding-top:max(10px, env(safe-area-inset-top, 0px));
  }
  #fotoImgOv .foto-img-cap{ flex:1 1 100%; }
  #fotoImgOv .foto-img-kicker{ white-space:normal; }
  #fotoImgOv .foto-img-desc{ white-space:normal; }
  #fotoImgOv .foto-img-x{ margin-left:auto; order:3; min-height:44px; height:44px; font-size:15px; }
  #fotoImgOv .foto-img-nav{ width:44px; height:44px; min-width:44px; min-height:44px; }
  #fotoImgOv .foto-img-box{ flex:none; height:52vh; height:52dvh; padding:8px; }
  #fotoImgOv .foto-img-side{
    flex:none; width:auto; position:relative; z-index:1; overflow:visible;
    margin-top:-16px; border-radius:18px 18px 0 0; box-shadow:0 -8px 24px -12px rgba(0,0,0,.25);
    padding:22px 16px calc(24px + env(safe-area-inset-bottom, 0px));
  }
  /* Asa de la hoja. */
  #fotoImgOv .foto-img-side::before{
    content:''; align-self:center; width:40px; height:4px; border-radius:2px;
    background:var(--gray-3); margin:-10px 0 6px; flex:none;
  }
  /* iOS amplía al enfocar un campo de menos de 16 px. */
  #fotoImgOv .pen-chat-input-area textarea{ font-size:16px; min-height:88px; }
  #fotoImgOv .fs-btn{ align-self:stretch; justify-content:center; min-height:46px; font-size:15px; }
}


/* ═══════════════════════════════════════════════════════════════════
   3 · TELÉFONO (capa html.mv, compositor movil/galeria.js)
   movil/estilos.css (arquetipo G) ya trata la rejilla, la tarjeta y la
   etiqueta de fase: se reactiva sola porque el marcado vuelve a traer
   .foto-card-m y .foto-card-fase. Aquí solo lo que esa capa no conoce:
   la casilla «Sin filtro temporal», el conteo, el lápiz a 44 y el editor.
   ═══════════════════════════════════════════════════════════════════ */
@media(max-width:900px){
  html.mv #sec-fotos .fotos-hdr-t{ font-size:22px; line-height:26px; }
  html.mv #sec-fotos .foto-f-todo{
    height:auto; min-height:44px; width:100%; font-size:15px;
  }
  html.mv #sec-fotos .foto-f-todo input{ width:20px; height:20px; }
  html.mv #sec-fotos .foto-f-cont{ text-align:left; font-size:13px; }
  /* G04 a 446: nada por debajo de 12. La etiqueta de fase del Figma es de 10
     y la capa la deja así; en el teléfono sube a 12 (misma píldora). */
  html.mv #sec-fotos .foto-card-fase{ font-size:12px; height:24px; line-height:24px; }
  html.mv #sec-fotos .foto-f-lbl{ font-size:12px; }
  /* Campos a 16 (skill móvil §3: con menos, iOS amplía al enfocar). La capa
     los deja en 13 !important; esta gana por el id. */
  html.mv #sec-fotos .foto-f-sel{ font-size:16px !important; }
  /* El lápiz: 30 px de dibujo dentro de 44 de toque (skill móvil §3). */
  /* En el teléfono no hay «pasar el ratón»: sin esto el lápiz de main
     quedaba invisible (opacity 0) y editar no se podía descubrir (G18). */
  html.mv #sec-fotos.mv-galeria .foto-card-ed{
    opacity:1;
    right:0 !important; top:0 !important; width:44px; height:44px; min-width:44px !important; min-height:44px !important;
    background:transparent !important; box-shadow:none; border-radius:0 9px 0 0;
  }
  html.mv #sec-fotos.mv-galeria .foto-card-ed svg{
    box-sizing:content-box; width:16px; height:16px; padding:7px; border-radius:8px;
    background:rgba(0,0,0,.45); color:#fff;
  }
  /* Editor de una foto (#fotoPeOv): ventana → hoja desde abajo. */
  html.mv:has(#sec-fotos.active) #fotoPeOv{ align-items:flex-end; padding:0 !important; }
  html.mv:has(#sec-fotos.active) #fotoPeOv .sigf-modal-card{
    width:100% !important; max-width:none !important; max-height:88dvh !important; overflow-y:auto;
    border-radius:18px 18px 0 0 !important; padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  }
  html.mv:has(#sec-fotos.active) #fotoPeOv :is(input, select){ font-size:16px !important; min-height:48px; }
  html.mv:has(#sec-fotos.active) #fotoPeOv button{ min-height:44px; }
}