/* ==========================================================================
   P-05 — CAPTURA DE FOTOS  (/portal/imagenes/<id>)

   Hoja de UNA pantalla. Se carga despues de kctp.css y solo pinta lo que
   cuelga de .fotos-pantalla: las clases kctp-captura*, kctp-miniatura y
   kctp-vacio las comparten ficha.php, consulta.php, fotos.php y revisar.php,
   y aqui no se las toca ni por accidente.

   QUE CAMBIO Y POR QUE (medido contra lovi.care, que es la vara del lado
   paciente):

   1. Se acabo la pila de cinco tarjetas blancas. Quedan dos superficies: la
      guia (tarjeta) y el marco de la foto. Todo lo demas vive sobre el hueso,
      separado por aire o por una linea de pelo. Lovi tiene UNA regla de borde
      en toda su pagina.
   2. El titular salio de su caja: era una serif de 28px dentro de una tarjeta
      con 90px de vacio debajo. Ahora es el display de la pantalla (28 -> 40px)
      sobre el fondo, con 8px hasta su bajada y 64px hasta lo siguiente.
   3. El hueco de la foto ERA DOS recuadros punteados, uno encima del otro: el
      de referencia y el de "falta esta foto". Ahora es uno solo, sin linea
      punteada, con la silueta grande adentro y una pastilla de estado. Un
      recuadro punteado de 450px de alto con 15px de texto en el centro es la
      firma de un formulario, no de una app de la cara.
   4. La tarjeta obligatoria se quedaba a MEDIA columna en escritorio, pegada a
      la izquierda: la parrilla era auto-fill de 216px y solo hay un angulo
      obligatorio desde el 01-sep. Ahora es una composicion de dos columnas
      (marco 300px | rotulo, pie y boton) que usa el ancho a proposito.
   5. Ritmo de dos velocidades de verdad: 8-24px dentro de un bloque, 48px en
      telefono y 64px entre bloques. Antes todo estaba a 24px.

   VUELTA 3 (02-sep-2026) — LA FOTO ES EL PRODUCTO
   6. El objeto protagonista dejo de ser un dibujo. El hueco de la foto, los dos
      encuadres de perfil y las cinco miniaturas de "asi no" eran SVG de linea
      hechos a mano: un ovalo con dos ojos de punto y una boca de una raya. A
      340px de ancho eso no se lee como producto, se lee como un icono sin
      terminar, y encima no ensena lo unico que hay que ensenar (la luz). Ahora
      los ocho sitios llevan FOTOGRAFIA (public/img/guia/), a sangre, con el
      visor de camara superpuesto. La vara del lado paciente pone una foto real
      justo en ese sitio.
   7. La pastilla de estado se quedaba a medio salir por el borde inferior del
      dibujo. Ahora TODAS las pastillas van absolutas y el estado siempre abajo
      a la izquierda, haya foto o no (medido: 12px por dentro en los dos ejes).
   8. El aviso ambar del cuestionario era el unico color de fuera de la paleta
      en toda la pantalla. Pasa al tinte de marca.

   VUELTA 3, SEGUNDA MANO — QUE LA FOTO LLEGUE ANTES Y PESE MAS
   9. El tutorial largo se fue DEBAJO de la toma (el cambio vive en
      imagenes.php). En un telefono de 390 la foto de ejemplo empezaba a 500px
      del alto y el pliegue la cortaba a la altura de las cejas: las primeras
      pantallas eran cuatro bloques de texto seguidos, que es exactamente la
      firma de un formulario. Ahora la cara llega hasta la boca antes del
      pliegue.
  10. La reparticion de escritorio deja de ser la mitad justa: 360 | 32 | 280 a
      partir de 768 (y 300 entre 640 y 767, donde el contenedor aun no ha
      llegado a su tope). El marco pasa de 320x427 a 360x480.
  11. Muere el hueco de 187px de la columna derecha. El boton ya no se empuja al
      pie de la celda: titulo, instruccion, pie y boton son UN bloque con el
      ritmo de siempre y el sobrante cae debajo.
  12. Las cinco aspas de "asi no" eran discos de rojo #a5231f, el mismo pecado
      de paleta que ya se habia corregido en el aviso ambar. Pasan a tinto y se
      meten enteras dentro de la miniatura.
  13. La miniatura de "demasiado lejos" era un montaje (la foto buena reducida
      sobre un lienzo del color de su pared) y el desenfoque del borde la
      dejaba con vetas verticales de color piel: a 68px se leia como imagen
      rota. Ahora es la toma REAL de la misma modelo a distancia.

   VUELTA 3, TERCERA MANO — EL ESCRITORIO DEJA DE SER UN TELEFONO ESTIRADO
   El detalle, con sus numeros, esta en la seccion 6 al final del archivo. En
   corto, lo que se juzgo fue: a 390 la pantalla aguantaba la comparacion y a
   1440 no, porque no crecia NADA — H1 de 40px, cuerpo de 17 (el mismo del
   telefono), columna de texto de 280px y la pagina entera metida en 672 de
   1440. Las cinco correcciones:
  14. El lienzo pasa de 720 a 1060 (1012 de contenido), que es el ancho que ya
      usa el resto del portal en escritorio ancho.
  15. La escala crece con el: cuerpo 17 -> 19 -> 20, secundario 15 -> 17,
      H1 40 -> 60, H2 28 -> 34. Se hace redefiniendo los tokens en
      .fotos-pantalla, asi que botones, avisos y motivos de rechazo suben solos.
  16. Una sola rejilla de dos columnas (riel de hasta 400 | texto) para el hero
      Y la toma, en vez de cuatro medidas de texto que no coincidian en ningun
      borde. La columna de texto no baja nunca de 340 y llega a 564.
  17. El estado sale de encima de la foto de ejemplo. Habia dos rotulos sobre
      la misma imagen diciendo cosas contrarias: "ejemplo" y "falta esta foto".
      Ahora la pastilla de la foto dice lo que es y el estado vive fuera, de
      sobretitulo en escritorio y encima del boton en telefono.
  18. Las miniaturas de "asi no" pasan de 68 a 104px y a recorte cuadrado, y la
      guia se abre en dos mitades en vez de una tira de 1.359px de alto.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Anclaje de la escala

   body.kctp-portal fija su font-size con var(--kctp-t-cuerpo). Si esta hoja
   redefine el token mas abajo (lo hace, en escritorio) y nadie lo vuelve a
   leer, todo lo que HEREDA el tamano se queda con el valor viejo del body.
   Esta linea es la que hace que un solo cambio de token mueva la pantalla
   entera.
   -------------------------------------------------------------------------- */

.fotos-pantalla { font-size: var(--kctp-t-cuerpo); }

/* --------------------------------------------------------------------------
   1. Titular de pantalla
   -------------------------------------------------------------------------- */

.fotos-hero {
    margin-bottom: var(--kctp-e7);
}
.fotos-hero h1 {
    font-family: var(--kctp-serif);
    font-weight: var(--kctp-peso-normal);
    font-size: var(--kctp-t-display);
    line-height: var(--kctp-lh-display);
    letter-spacing: var(--kctp-ls-display);
    color: var(--kctp-tinto);
    text-wrap: balance;
    margin: 0;
}
/* Del titulo a su bajada, 8px: son UN bloque. El aire viene despues. */
.fotos-hero p {
    margin: var(--kctp-e2) 0 0;
    max-width: 46ch;
    color: var(--kctp-tenue);
    font-size: var(--kctp-t-cuerpo);
    line-height: 1.55;
}

/* --------------------------------------------------------------------------
   2. La guia desplegable

   Es la unica tarjeta blanca que queda en la pantalla. Se separa del hueso con
   la sombra de dos capas del sistema, sin una sola linea de borde alrededor.

   Desde el 02-sep-2026 va DEBAJO de la toma (ver imagenes.php), asi que el aire
   lo pide por arriba y no por abajo.
   -------------------------------------------------------------------------- */

.fotos-pantalla .kctp-tutorial {
    margin: var(--kctp-e7) 0 0;
    border-radius: var(--kctp-radio);
}
@media (min-width: 700px) {
    .fotos-pantalla .kctp-tutorial { margin-top: var(--kctp-e8); }
}
.fotos-pantalla .kctp-tutorial > summary {
    padding: var(--kctp-e4) var(--kctp-e5);
    /* 17px, no 15: es el titulo de una seccion desplegable, no un pie. */
    font-size: var(--kctp-t-cuerpo);
    gap: var(--kctp-e3);
    min-height: 64px;
    transition: background var(--kctp-mov-hover);
}
.fotos-pantalla .kctp-tutorial > summary:hover { background: var(--kctp-crema); }
.fotos-pantalla .kctp-tutorial > summary > i {
    color: var(--kctp-acento);
    font-size: 1rem;
}
/* "Recomendado" pasa de texto gris suelto a pastilla: radio = alto/2, fondo
   tintado solido, 12px. Es como marca Lovi cualquier etiqueta corta. */
.fotos-pantalla .kctp-tutorial > summary span {
    font-size: var(--kctp-t-micro);
    font-weight: var(--kctp-peso-medio);
    line-height: 1;
    color: var(--kctp-acento);
    background: var(--kctp-acento-sw);
    border-radius: var(--kctp-r-pastilla);
    padding: 6px 10px;
    white-space: nowrap;
}
.fotos-pantalla .kctp-tutorial > summary::after {
    color: var(--kctp-tenue);
    transition: transform var(--kctp-mov);
}
.fotos-pantalla .kctp-tutorial-cuerpo {
    padding: var(--kctp-e5);
    border-top: 1px solid var(--kctp-linea);
}
@media (min-width: 700px) {
    .fotos-pantalla .kctp-tutorial-cuerpo { padding: var(--kctp-e6); }
}

/* Los cinco pasos. Se les quito la linea divisoria de cada fila: en el lado
   del paciente separa el AIRE, no una raya. El disco numerado ya ancla la
   lectura y no hacen falta cuatro lineas mas. */
.fotos-pantalla .kctp-pasos-guia { margin: 0; }
.fotos-pantalla .kctp-pasos-guia li {
    border-bottom: 0;
    padding: 0;
    gap: var(--kctp-e3);
    margin-bottom: var(--kctp-e5);
}
.fotos-pantalla .kctp-pasos-guia li:last-child { margin-bottom: 0; }
.fotos-pantalla .kctp-paso-num {
    width: 28px;
    height: 28px;
    font-size: var(--kctp-t-meta);
    margin-top: 1px;
}
.fotos-pantalla .kctp-pasos-guia strong {
    font-size: var(--kctp-t-cuerpo);
    line-height: 1.35;
    letter-spacing: -.01em;
    margin-bottom: var(--kctp-e1);
}
.fotos-pantalla .kctp-pasos-guia strong i {
    color: var(--kctp-acento);
    margin-right: 2px;
}
.fotos-pantalla .kctp-pasos-guia p {
    max-width: 52ch;
    line-height: 1.55;
}

/* "Asi no, que toca repetirla". El titulo baja a la tinta de marca y el rojo
   se queda solo en el icono y en el aspa de cada miniatura: cinco titulos
   rojos seguidos gritaban mas que el propio aviso de rechazo. */
.fotos-pantalla .kctp-guia-titulo {
    color: var(--kctp-tinto);
    font-size: var(--kctp-t-cuerpo);
    letter-spacing: -.01em;
    margin: var(--kctp-e6) 0 var(--kctp-e4);
    gap: var(--kctp-e2);
}
.fotos-pantalla .kctp-guia-titulo i { color: var(--kctp-alerta); font-size: .95rem; }

/* Los cinco errores dejan de ser una parrilla y pasan a ser una LISTA, con el
   mismo ritmo que los cinco pasos de arriba: miniatura a la izquierda, texto a
   la derecha. Como parrilla no habia salida buena — con tres columnas quedaba
   un hueco al final de la segunda fila, y con cinco la explicacion caia en una
   medida de 14 caracteres que se partia en cinco lineas. */
.fotos-pantalla .kctp-errores {
    display: flex;
    flex-direction: column;
    gap: var(--kctp-e5);
}
.fotos-pantalla .kctp-errores figure {
    display: flex;
    align-items: center;
    gap: var(--kctp-e4);
}

/* Las cinco miniaturas de "asi no" son la MISMA fotografia de referencia, rota
   de la forma que nombra cada caso. Antes eran el mismo monigote de linea cinco
   veces; comparar una foto contra un dibujo no ensena nada sobre luz.
   68px y no 62: por debajo de eso el desenfoque y el contraluz dejan de
   distinguirse entre si. */
/* El tamano es una variable porque en escritorio sube a 104: a 68 las cinco
   miniaturas se leian como iconos de baja resolucion al lado de una foto de
   400px. Aqui la fotografia es el material didactico, no un adorno. */
.fotos-mal {
    --fx-mal: 68px;
    position: relative;
    display: block;
    flex: 0 0 var(--fx-mal);
    width: var(--fx-mal);
    aspect-ratio: 3 / 4;
    border-radius: 10px;
    overflow: hidden;
    background: var(--kctp-panel);
}
.fotos-mal-foto {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: 50% 42%;
}
.fotos-mal-velo { position: absolute; inset: 0; }

/* Contraluz: la ventana quema el fondo y la cara cae en sombra. Es exactamente
   lo que hace la camara cuando la luz viene de atras. */
.fotos-mal-contraluz .fotos-mal-foto { filter: brightness(.44) contrast(.86) saturate(.55); }
.fotos-mal-contraluz .fotos-mal-velo {
    background:
        radial-gradient(120% 78% at 50% 4%, rgba(255, 246, 226, .95) 0 16%,
                        rgba(246, 226, 186, .5) 38%, transparent 68%),
        linear-gradient(180deg, transparent 40%, rgba(38, 5, 20, .3) 100%);
}

/* Poca luz: subexpuesta y con la dominante amarilla de una bombilla. */
.fotos-mal-oscura .fotos-mal-foto { filter: brightness(.34) saturate(.85) sepia(.35); }
.fotos-mal-oscura .fotos-mal-velo { background: rgba(38, 5, 20, .42); }

/* Movida: el 1.06 de escala evita que el desenfoque descubra los bordes. */
.fotos-mal-movida .fotos-mal-foto { filter: blur(2.6px); transform: scale(1.06); }

/* Demasiado lejos: toma propia, no hay filtro que la finja. */
.fotos-mal-lejos .fotos-mal-foto { background-position: 50% 50%; }

/* Inclinada: 1.35 de escala para que el giro no deje esquinas vacias. */
.fotos-mal-inclinada .fotos-mal-foto { transform: rotate(22deg) scale(1.35); }

/* El aspa reemplaza al marco rojo que rodeaba cada miniatura: cinco recuadros
   gruesos seguidos gritaban mas que el propio aviso, y ninguna de las dos
   referencias enmarca una imagen. La marca basta para leer "esta no".

   VA EN TINTO, NO EN ROJO (02-sep-2026). Con --kctp-alerta eran cinco discos de
   #a5231f seguidos: el mismo pecado que ya se corrigio en el aviso ambar del
   cierre — un color de fuera de la paleta puesto por convencion. Aqui ademas no
   hay ningun error del paciente que senalar; es material didactico. Las dos
   referencias usan UN acento y su tinte, y el rojo del sistema se queda donde
   de verdad hay un rechazo: el aviso de la toma. El icono en hueso sobre tinto
   se lee igual de rapido y ya no compite con la fotografia.

   Y va METIDA DENTRO de la miniatura (6px), no mordiendo la esquina: es la
   misma pastilla a medio salir que se corrigio en el sello de estado. */
.fotos-mal-aspa {
    position: absolute;
    top: 6px;
    right: 6px;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: var(--kctp-r-pastilla);
    background: rgba(38, 5, 20, .82);
    color: var(--kctp-fondo);
    font-size: 12px;
    line-height: 1;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.fotos-mal-aspa i { display: block; }
.fotos-pantalla .kctp-errores figcaption {
    margin-top: 0;
    max-width: 46ch;
    font-size: var(--kctp-t-meta);
    line-height: 1.5;
}
.fotos-pantalla .kctp-errores figcaption strong {
    color: var(--kctp-tinta);
    font-size: var(--kctp-t-menor);
    margin-bottom: 1px;
}

.fotos-pantalla .kctp-guia-nota {
    border-top: 1px solid var(--kctp-linea);
    margin-top: var(--kctp-e6);
    padding-top: var(--kctp-e4);
    line-height: 1.55;
}
.fotos-pantalla .kctp-guia-nota i { color: var(--kctp-tenue-2); margin-right: 2px; }

/* --------------------------------------------------------------------------
   3. La toma: rotulo + marco + datos

   Es el acto de la pantalla, asi que es lo mas grande que hay. Los tres son
   hijos sueltos de la rejilla: en escritorio el marco ocupa la columna
   izquierda entera y el texto se reparte a la derecha; en telefono se apilan.

   El error de la vuelta anterior fue dejar el rotulo arriba y poner en dos
   columnas solo el par marco/boton: la columna derecha se quedaba con dos
   lineas de texto y 300px de vacio debajo. Subiendo el rotulo a esa columna
   las dos quedan del mismo alto sin estirar nada.
   -------------------------------------------------------------------------- */

.fotos-toma {
    display: grid;
    gap: var(--kctp-e5);
    margin-top: var(--kctp-e7);
}

.fotos-rotulo { margin: 0; }
/* El rotulo de la toma usa el papel de TITULO (21 en telefono, 28 en 1440) y
   no el de seccion, que se queda fijo en 21. Al lado de una foto de 427px de
   alto un titulo de 21 no sostiene la columna: la jerarquia la da el tamano, no
   el peso, y aqui hacia falta el peldano de arriba. En telefono el clamp da 21,
   o sea que no cambia nada donde el ancho ya manda. */
.fotos-rotulo h2 {
    font-family: var(--kctp-serif);
    font-weight: var(--kctp-peso-normal);
    font-size: var(--kctp-t-titulo);
    line-height: var(--kctp-lh-titulo);
    letter-spacing: var(--kctp-ls-titulo);
    color: var(--kctp-tinto);
    margin: 0;
}
/* 17px, no 15. En la vuelta anterior esta columna corria TRES tamanos de
   cuerpo seguidos — el hero a 17, la instruccion a 15 y el pie a 15 — y ninguna
   de las dos referencias cambia el cuerpo de sitio a sitio: Lovi lo deja en
   16-17.6 incluso en el movil. Ademas es lo que llena la columna derecha, que
   se quedaba corta contra la foto. */
.fotos-rotulo p {
    margin: var(--kctp-e2) 0 0;
    max-width: 44ch;
    font-size: var(--kctp-t-cuerpo);
    line-height: var(--kctp-lh-cuerpo);
    color: var(--kctp-tenue);
}

/* El marco. Sin borde y sin linea punteada: la separacion la da el tinte de
   marca contra el hueso. Radio 20px, el de la tarjeta del paciente. */
.fotos-marco {
    position: relative;
    width: 100%;
    /* 340 y no 300: en un telefono de 390 la columna mide 358, y a 300 el marco
       dejaba 58px de hueso a la derecha. La foto es el objeto principal de la
       pantalla; ahi se veia descolocada. En escritorio manda la rejilla. */
    max-width: 340px;
    aspect-ratio: 3 / 4;
    border: 0;
    /* Radio 24 y no 20: la escalera del lado paciente va por TAMANO — 16 en
       los marcos chicos de perfil, 20 en las tarjetas, 24 en la foto grande.
       Un objeto de 450px de alto con el mismo radio que una fila de 64 se
       queda corto de curva. */
    border-radius: 24px;
    background: var(--kctp-panel);
    overflow: hidden;
    /* La foto es lo unico que FLOTA en la pantalla, y en el lado del paciente
       lo que flota se separa con sombra, nunca con borde (Lovi tiene una sola
       regla de borde en toda su pagina). Dos capas: una de contacto de 1px y
       una difusa y ancha, tenidas de tinto — una sola capa borrosa se ve
       barata. Antes el marco no tenia ninguna de las dos y la foto quedaba
       pegada al hueso como un recorte. */
    box-shadow: var(--kctp-sombra);
}
/* EL CAMBIO DE ESTA VUELTA. El hueco de la foto ya no lleva un dibujo de linea
   sino una FOTOGRAFIA de referencia a sangre, encuadrada exactamente como se le
   pide al paciente, con el visor superpuesto. El objeto mas grande de la
   pantalla era un monigote (ovalo, dos ojos de punto, boca de una raya) que
   ocupaba el 40% del telefono y se leia como un icono sin terminar. La guia
   dejo de dibujar como deberia verse y pasa a ensenar como se ve.

   Sin relleno ni rejilla: la foto va de borde a borde y todo lo demas flota
   encima en posicion absoluta. */
.fotos-marco-vacio { display: block; }

.fotos-ejemplo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* La foto es 3:4 igual que el marco: cover no llega a recortar nada. */
    display: block;
}
/* Un velo de tinto muy tenue abajo. Hace dos cosas a la vez: sienta la pastilla
   blanca de estado, que sobre una pared clara flotaria sin apoyo, y cierra la
   foto por abajo en vez de dejarla cortada a hueso. Empieza al 62% y llega al
   11%: al 14% desde la mitad se veia como una mancha sobre la camiseta gris. */
.fotos-marco-vacio::after {
    content: "";
    position: absolute;
    inset: 62% 0 0;
    background: linear-gradient(180deg, transparent, rgba(38, 5, 20, .11));
    pointer-events: none;
}

/* El visor: cuatro escuadras y dos marcas de eje, como el encuadre de una
   camara. Va en HUESO y no en vino porque sobre una fotografia una guia de
   camara se lee en claro; es lo unico de la pantalla fuera de la escalera de
   tintas, y lo esta por la misma razon por la que lo lleva cualquier camara.
   El viewBox es 120x160, o sea exactamente 3:4: preserveAspectRatio="none" no
   deforma nada, solo deja que las escuadras se peguen al marco a cualquier
   tamano. El trazo no escala (non-scaling-stroke) para que en el marco de 300px
   y en el de 220px mida lo mismo.

   Las escuadras van metidas 16 unidades (40px en escritorio, 46 en telefono).
   Ese numero no es de gusto: el recorte de la foto de ejemplo pone la coronilla
   al 10% del alto y el menton al 89%, que es justo el hueco que dejan las
   escuadras a 16 de 160. La cabeza entra JUSTA dentro del visor, y el visor
   pasa de adorno a instruccion — dice con una linea lo mismo que el pie ("tu
   cara ocupa casi todo el recuadro"). A 22, que es donde estaban, las escuadras
   caian sobre la mejilla y sobre la camiseta y no significaban nada.
   16 es ademas el ultimo valor que deja pasar las dos pastillas por dentro sin
   cortarlas: 40px de sangria contra 36 de pastilla (12 de margen + 24 de alto).
   Como el marco es 3:4 igual que el viewBox, una unidad mide lo mismo en los
   dos ejes a cualquier tamano. */
.fotos-visor {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.fotos-visor path {
    fill: none;
    stroke: var(--kctp-fondo);
    stroke-width: 1.5px;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    opacity: .92;
    filter: drop-shadow(0 1px 2px rgba(38, 5, 20, .45));
}

.fotos-marco-hecho .kctp-miniatura {
    /* La fotografia va a sangre y sin marco: ninguna de las dos referencias
       enmarca una imagen. */
    width: 100%;
    height: 100%;
    border-radius: 0;
    object-fit: cover;
    background: var(--kctp-panel);
}

/* Pastillas sobre el marco: radio = alto/2, fondo solido, 12px.

   TODAS van en posicion absoluta y el ESTADO siempre abajo a la izquierda, este
   la foto hecha o no. En la vuelta anterior "Falta esta foto" era el ultimo
   hijo de una rejilla y se quedaba a medio salir por el borde inferior del
   dibujo; ahora ocupa el mismo sitio que "Aceptada" y no depende del alto de lo
   que tenga encima. */
.fotos-sello {
    position: absolute;
    left: var(--kctp-e3);
    bottom: var(--kctp-e3);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--kctp-t-micro);
    font-weight: var(--kctp-peso-medio);
    line-height: 1;
    letter-spacing: -.004em;
    padding: 8px 12px;
    border-radius: var(--kctp-r-pastilla);
    white-space: nowrap;
    z-index: 2;
}
.fotos-sello-falta {
    background: var(--kctp-blanco);
    color: var(--kctp-tinta);
    box-shadow: var(--kctp-sombra-alt);
}
.fotos-sello-ok {
    background: var(--kctp-ok-sw);
    color: var(--kctp-ok);
    box-shadow: var(--kctp-sombra);
}
/* "Ejemplo", arriba a la izquierda. No es adorno: una cara desconocida a sangre
   dentro del hueco de TU foto se puede leer como si ya hubiera algo subido. Va
   tenido de tinto translucido porque tiene que leerse sobre la foto sin robarle
   el sitio a la pastilla de estado, que es la que informa. */
/* VA ABAJO A LA IZQUIERDA (02-sep-2026, vuelta 3). Antes vivia arriba porque
   el pie del marco lo ocupaba el estado "Falta esta foto" — o sea que sobre la
   MISMA imagen habia dos rotulos que se contradecian: uno decia "ejemplo" y el
   otro decia que no habia foto. El estado se mudo a la columna de texto y esta
   pastilla se queda sola, en el sitio donde cualquiera busca el pie de una
   fotografia, sentada sobre el velo que ya existia para eso. */
.fotos-sello-ejemplo {
    padding: 6px 10px;
    /* .62 y no .5: al 50% el hueso sobre la pared clara de la foto se quedaba
       en 3,4:1 de contraste, por debajo del minimo para 12px. */
    background: rgba(38, 5, 20, .62);
    color: var(--kctp-fondo);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.fotos-datos {
    display: flex;
    flex-direction: column;
    gap: var(--kctp-e4);
    align-items: flex-start;
    min-width: 0;
}
/* La frase de entrada en peso medio y tinta oscura, el resto en tenue y del
   MISMO tamano. El peso y el color hacen la jerarquia dentro del parrafo, sin
   inventar un titulo mas. */
.fotos-pie {
    margin: 0;
    max-width: 40ch;
    font-size: var(--kctp-t-cuerpo);
    line-height: var(--kctp-lh-cuerpo);
}
.fotos-pie strong { font-weight: var(--kctp-peso-medio); color: var(--kctp-tinta); }
.fotos-pie span { color: var(--kctp-tenue); }

/* NI UN BORDE EN LOS AVISOS. El sistema los pinta con relleno tenido MAS una
   linea de 1px del mismo color (borde + sombra + relleno, las tres cosas a la
   vez). La regla de las dos referencias es elegir uno: en el lado del paciente
   manda el tinte. Sin la linea, el aviso de rechazo deja de ser el unico
   rectangulo con contorno de la pantalla y de competir con la fotografia, que
   es lo que el ojo tiene que mirar primero. El color, el icono y el texto no
   se tocan: sigue diciendo lo mismo y con el mismo rojo. */
.fotos-pantalla .kctp-aviso { border-color: transparent; }

.fotos-pantalla .fotos-rechazo {
    margin-bottom: 0;
    align-self: stretch;
    /* 14px: entre el 10 de los controles y el 20 de las tarjetas, que es donde
       cae por tamano un panel de texto de 300px de alto. */
    border-radius: 14px;
}
/* El motivo del rechazo iba entero en rojo — titulo, motivo y consejo — sobre
   un panel que ya esta tenido de rojo: tres capas del mismo color diciendo lo
   mismo. El rojo se queda en el titulo, el icono y la vineta; el motivo baja a
   la tinta y el consejo a tenue, la misma escalera del resto de la pantalla. */
.fotos-pantalla .kctp-motivos { margin-top: var(--kctp-e2); }
.fotos-pantalla .kctp-motivos li { color: var(--kctp-tinta); }
.fotos-pantalla .kctp-motivos li::marker { color: var(--kctp-alerta); }
.fotos-pantalla .kctp-motivos em { color: var(--kctp-tenue); }

.fotos-form { margin: 0; width: 100%; max-width: 340px; }
.fotos-form .kctp-btn:active { transform: translateY(1px); }

@media (min-width: 640px) {
    .fotos-toma {
        /* 300 aqui y 360 a partir de 768 (ver mas abajo). Entre 640 y 767 el
           contenedor todavia no ha llegado a su tope de 672 —mide 608— y con la
           columna del marco en 360 al texto le quedaban 216px: cuatro lineas
           por parrafo y el boton al limite de partirse. Medido en 560, 600,
           640, 700, 768, 834, 900, 1024, 1200, 1280, 1440, 1600 y 1920. */
        /* minmax en las dos columnas y no un ancho fijo: asi el que cede
           cuando falta sitio es el MARCO y no el texto, que es la regla de
           toda la pantalla. Con 300px clavados el parrafo se quedaba en 260 a
           640 y en 280 a 768 — mas angosto que en un telefono de 390. */
        grid-template-columns: minmax(200px, 300px) minmax(300px, 1fr);
        /* auto 1fr: la primera fila se ajusta al rotulo y la segunda absorbe lo
           que sobra del marco. Con las dos en auto, el marco (400px de alto y
           dos filas de alto) reparte su altura A PARTES IGUALES entre ambas y
           hunde el texto 130px, que es el hueco que se veia en la vuelta 2. */
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "marco rotulo"
            "marco datos";
        align-content: start;
        column-gap: var(--kctp-e6);
        row-gap: var(--kctp-e5);
    }
    .fotos-rotulo { grid-area: rotulo; }
    .fotos-marco  { grid-area: marco; max-width: 100%; }
    .fotos-datos  { grid-area: datos; }
    /* El boton llena SU columna, sea cual sea: asi su borde derecho queda a
       plomo con el del parrafo de arriba en cualquier ancho. Con un tope fijo
       se quedaba corto justo en la banda de 700px. */
    .fotos-form   { max-width: none; }
    /* EL HUECO DE LA COLUMNA DERECHA (vuelta 3). La vuelta anterior empujaba el
       boton al pie de la celda (margin-top:auto) para dejarlo a plomo con el
       pie de la foto. Medido: eso abria 187px de vacio ENTRE el parrafo y su
       propio boton — el 44% de la columna — y un hueco dentro de un bloque se
       lee como error de maquetacion, mientras que el mismo hueco al final del
       bloque se confunde con el aire de la pagina y no se ve.

       Comparadas las cuatro (arriba / centrada / repartida / a plomo) en la
       misma pantalla, gana la de arriba: titulo, instruccion, pie y boton
       forman UN bloque con el ritmo de siempre y el sobrante cae debajo, que es
       lo que hace cualquier composicion de texto junto a una imagen alta.
       El plomo del boton con el pie de la foto no vale 187px de agujero. */
    .fotos-datos { align-self: start; }
}

/* A partir de 768 el contenedor ya esta topado en 672 y la reparticion se puede
   fijar: 360 | 32 | 280. No es la mitad justa a proposito — esta pantalla es
   una foto de la cara, y el objeto protagonista tiene que pesar mas que su pie.
   A 360 el marco mide 360x480 y la columna de texto se queda en 280, la medida
   a la que Lovi mete el copy dentro de una tarjeta (270). El parrafo pasa a
   tres lineas, con lo que ademas las dos columnas se parecen mas de alto.
   384 tambien se probo: la foto manda mas todavia pero el texto baja a cuatro
   lineas por parrafo y el boton se queda estrecho. */
@media (min-width: 768px) {
    .fotos-toma { grid-template-columns: minmax(240px, 360px) minmax(320px, 1fr); }
}

/* El rotulo de la guia no cabia en una linea en un telefono de 390 y el titulo
   se partia en dos, con "fotos" solo en la segunda. Medido con Inter ya
   cargada: icono 16 + texto 185 + pastilla 98 + flecha 15, mas tres
   separaciones de 8, son 338px para 334 de hueco.

   La salida NO es apretar los ocho pixeles que faltan (a 375 o 360 vuelve a
   partirse), sino soltar lo unico decorativo de la fila: el icono de camara,
   que ademas repite la palabra "fotos" del propio titulo. Sin el sobran 20px y
   la linea aguanta hasta pantallas de 370.

   Y nada de flex-wrap: al envolver, la flecha (empujada con margin-left:auto)
   caia sola a una segunda linea, que si se lee como un error. */
/* En telefono la foto de ejemplo empieza a 515px del alto del documento y el
   pliegue cae en 788 (844 menos la barra de abajo): se veia la cara hasta las
   cejas y nada mas. Estos 24px — 16 del titular y 8 de la toma — bajan el
   pliegue hasta la nariz, que es donde la foto ya se lee como cara y no como
   textura. Son los dos unicos saltos de los que se puede robar sin bajar de
   los 32px que pide el ritmo entre bloques. */
@media (max-width: 559.98px) {
    .fotos-hero { margin-bottom: var(--kctp-e6); }
    .fotos-toma { margin-top: 40px; }

    /* EL SANGRADO DE 18px (vuelta 2). En un telefono de 390 la columna mide
       358 y el marco estaba topado en 340: la foto —el objeto protagonista—
       terminaba 18px antes que su propio titulo y que el parrafo de arriba.
       Un solo borde derecho para todo, o se lee como una caja mal medida.
       El tope de 340 sigue vivo entre 560 y 639, que es donde la columna se
       ensancha pero el marco todavia no se ha ido a su celda de la rejilla.
       Los marcos de perfil NO entran aqui: son secundarios y su tamano menor
       es lo que lo dice. */
    .fotos-toma:not(.fotos-toma-menor) > .fotos-marco,
    .fotos-toma:not(.fotos-toma-menor) .fotos-form { max-width: none; }

    .fotos-pantalla .kctp-tutorial > summary {
        font-size: var(--kctp-t-menor);
        padding: var(--kctp-e3);
        gap: var(--kctp-e2);
    }
    .fotos-pantalla .kctp-tutorial > summary > i { display: none; }
    .fotos-pantalla .kctp-tutorial > summary span { padding: 5px 8px; }
    .fotos-pantalla .kctp-tutorial-cuerpo { padding: var(--kctp-e4); }
    .fotos-pantalla .kctp-errores { gap: var(--kctp-e4); }
    .fotos-pantalla .kctp-errores figure { gap: var(--kctp-e3); }
}
@media (min-width: 700px) {
    .fotos-toma { margin-top: var(--kctp-e8); }
}

/* --------------------------------------------------------------------------
   4. Los perfiles, opcionales

   Dejan de ser una caja con borde para volverse un pliegue tranquilo sobre el
   fondo: son secundarios y deben parecerlo. La informacion no se toca, solo el
   peso visual.
   -------------------------------------------------------------------------- */

.fotos-pantalla .kctp-opcionales {
    background: none;
    border: 0;
    border-top: 1px solid var(--kctp-linea);
    border-radius: 0;
    padding: var(--kctp-e5) 0 0;
    margin: var(--kctp-e7) 0 0;
}
@media (min-width: 700px) {
    .fotos-pantalla .kctp-opcionales { margin-top: var(--kctp-e8); }
}
.fotos-pantalla .kctp-opcionales > summary {
    padding: 0;
    font-size: var(--kctp-t-cuerpo);
    color: var(--kctp-tinto);
    min-height: 44px;
    align-items: center;
}
.fotos-pantalla .kctp-opcionales > summary span {
    border: 0;
    padding: 6px 10px;
    font-weight: var(--kctp-peso-medio);
    color: var(--kctp-tenue);
    background: var(--kctp-panel);
    border-radius: var(--kctp-r-pastilla);
    line-height: 1;
}
.fotos-pantalla .kctp-opcionales[open] > summary {
    border-bottom: 0;
    margin-bottom: var(--kctp-e2);
}
.fotos-pantalla .kctp-opcionales > .kctp-ayuda {
    max-width: 52ch;
    font-size: var(--kctp-t-menor);
    line-height: 1.55;
    color: var(--kctp-tenue);
    margin: 0 0 var(--kctp-e6);
}

.fotos-parrilla {
    display: grid;
    gap: var(--kctp-e6);
}
@media (min-width: 560px) {
    .fotos-parrilla { grid-template-columns: 1fr 1fr; }
}

/* Los perfiles NO repiten la composicion de dos columnas ni el tamano del
   marco obligatorio: en la vuelta anterior salieron mas grandes que la foto
   que si hace falta, o sea justo al reves de lo que dice la pantalla. */
.fotos-toma-menor {
    margin-top: 0;
    gap: var(--kctp-e4);
}
@media (min-width: 640px) {
    .fotos-toma-menor {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "rotulo" "marco" "datos";
        row-gap: var(--kctp-e4);
    }
}
@media (min-width: 700px) {
    .fotos-toma-menor { margin-top: 0; }
}
.fotos-toma-menor .fotos-rotulo h2 { font-size: var(--kctp-t-cuerpo); }
.fotos-toma-menor .fotos-rotulo p {
    font-size: var(--kctp-t-menor);
    line-height: 1.55;
    max-width: 32ch;
}
/* Marco y boton comparten anchura para que sus bordes queden a plomo. 220 es el
   minimo al que "Tomar o elegir foto" cabe en una linea (icono 20 + texto 132 +
   relleno 40 = 192): a 200 el boton se partia en dos y crecia a 68px de alto. */
.fotos-toma-menor .fotos-marco { max-width: 220px; border-radius: 16px; }
.fotos-toma-menor .fotos-form { max-width: 220px; }

/* --------------------------------------------------------------------------
   5. Cierre de pantalla

   Era una sexta tarjeta blanca con un aviso dentro. El aviso ya trae su propio
   fondo tintado; meterlo en una caja blanca es pintar dos veces lo mismo. Y no
   lleva linea propia: la del pliegue de los perfiles queda cerca, y dos rayas
   seguidas dejan una banda vacia en medio.
   -------------------------------------------------------------------------- */

.fotos-cierre { margin-top: var(--kctp-e7); }
@media (min-width: 700px) {
    .fotos-cierre { margin-top: var(--kctp-e8); }
}
.fotos-cierre .kctp-aviso { margin-bottom: var(--kctp-e5); }

/* El aviso de "faltan respuestas" venia en ambar (#fdf5e8 sobre #f0dcb4 con
   texto #8a5a00), que es el amarillo generico de cualquier plantilla y el unico
   sitio de la pantalla donde entraba un color de fuera de la paleta. Aqui no
   hay nada peligroso: falta un paso. Pasa al tinte de marca — que es el que el
   propio sistema usa en .kctp-aviso-info — con el borde apagado, porque en el
   lado del paciente la separacion la da el tinte, no una raya.
   El texto NO se toca, solo el color. */
.fotos-cierre .kctp-aviso-atencion {
    background: var(--kctp-acento-sw);
    border-color: transparent;
    color: var(--kctp-tinta);
}
.fotos-cierre .kctp-aviso-atencion > i { color: var(--kctp-acento); }
.fotos-cierre .kctp-aviso-atencion a { color: var(--kctp-acento); }

/* El "Revisar y enviar" inerte. El sistema lo pinta con el relleno --kctp-panel
   (#f5edef), que es EXACTAMENTE el mismo tinte que el aviso de "faltan
   respuestas" que queda justo encima: dos rectangulos rosa palido pegados se
   leen como una sola mancha y ninguno de los dos se entiende. Aqui pierde el
   relleno y se queda en una linea de pelo con la tinta de apoyo. Asi el unico
   bloque tenido de la zona es el aviso — que es el que informa — y el boton
   dice lo que tiene que decir: existe, todavia no. El texto sigue legible
   (#7e6a73, 4.9:1) porque nombra el paso que viene. */
.fotos-cierre .kctp-btn-primario.deshabilitado {
    background: transparent;
    border: 1px solid var(--kctp-borde);
    color: var(--kctp-tenue);
}

.fotos-botones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kctp-e3);
}
.fotos-botones .kctp-btn:active { transform: translateY(1px); }
@media (max-width: 559.98px) {
    .fotos-botones { flex-direction: column; }
    .fotos-botones .kctp-btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   5b. El estado de la toma

   "Falta esta foto" vivia SUPERPUESTO al encuadre de referencia. O sea que
   sobre la misma imagen habia dos rotulos peleados: uno decia "ejemplo" y el
   otro decia que no habia foto; lo que veia el ojo era una cara dentro del
   hueco de TU foto con un cartel de que faltaba. Las mismas palabras, mudadas
   a la columna de texto y pegadas al boton que las resuelve, dejan de
   contradecir a la imagen y pasan a introducir la accion.
   -------------------------------------------------------------------------- */

.fotos-estado {
    /* Pastilla: radio = alto/2, fondo tintado solido, 13px. La misma receta de
       "Recomendado" y de "Opcional", que es como marca la vara del lado
       paciente cualquier etiqueta corta. A 17px competia con el titulo del
       angulo, que es lo que tiene que mandar. */
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 7px 12px;
    border-radius: var(--kctp-r-pastilla);
    background: var(--kctp-panel);
    color: var(--kctp-tinta);
    font-size: var(--kctp-t-meta);
    font-weight: var(--kctp-peso-medio);
    line-height: 1.2;
    letter-spacing: -.004em;
}
.fotos-estado i { color: var(--kctp-acento); font-size: .95rem; line-height: 1; }

/* EL LIENZO ANCHO ARRANCA EN 700, que es donde el sistema ya da el relleno
   lateral de 24. Entre 700 y 899 no cambia la escala pero si el ancho: a 880
   la columna de texto pasa de 280 a 440 sin tocar nada mas.
   El pie legal es OTRO .kctp-lienzo, hermano del <main>: si no se abre con el,
   la letra chica queda desalineada con todo lo de arriba. */
@media (min-width: 700px) {
    body.pantalla-imagenes > main.kctp-lienzo,
    body.pantalla-imagenes > footer.kctp-pie-legal { max-width: 1060px; }
}

/* ==========================================================================
   6. ESCRITORIO  (>= 900px)   — VUELTA 3, TERCERA MANO

   Lo que se juzgo la vuelta anterior: a 390 la pantalla peleaba de tu a tu con
   la vara y a 1440 perdia con claridad. Medido entonces: H1 de 40px, cuerpo de
   17px (EL MISMO que en el telefono), columna derecha de 280px —mas angosta
   que ese mismo texto en un movil— y toda la pagina metida en 672 de 1440, o
   sea el 47%. Al lado, la vara pone un titular de ~64px y usa el ancho.

   Las cuatro correcciones, en orden de peso:

   6.1 EL LIENZO CRECE. 720 -> 1060 (1012 de contenido), que es exactamente el
       ancho que ya usa el resto del portal en escritorio ancho: 660 + 40 + 312
       en la pantalla de inicio. Con el riel de 268, a 1440 quedan 80px de
       margen a cada lado. No es un numero nuevo, es EL numero de la casa.
   6.2 LA ESCALA CRECE CON EL LIENZO. Cuerpo 17 -> 19 (20 a partir de 1340),
       secundario 15 -> 17, pastillas 12 -> 13, H1 40 -> 60, H2 28 -> 34. Se
       hace redefiniendo los tokens en .fotos-pantalla y no elemento por
       elemento: asi los botones, los avisos y los motivos de rechazo suben
       solos y no queda ninguna isla en 15px.
       (La vara mantiene el cuerpo fijo entre movil y escritorio, pero lo hace
       sobre una medida de 560 y un titular de 48. Con 1012 de ancho y un
       titular de 60, 17px se lee como letra chica: el salto cuerpo->display
       pasaria de 2,75x —el de la vara— a 3,5x.)
   6.3 UNA REJILLA, NO CUATRO MEDIDAS. Antes convivian en la misma columna
       cuatro anchos de texto (493 la entrada, 492 los pasos, 508 el pie legal,
       672 las tarjetas) y ningun borde derecho coincidia. Ahora hay UNA
       rejilla de dos columnas —riel de hasta 400 para lo que es imagen o
       titular, y el resto para el texto— que usan el hero Y la toma, y las
       tarjetas ocupan el ancho entero. Los bordes derechos se reducen a dos:
       el del contenedor y el del interior de la tarjeta.
   6.4 LA COLUMNA DERECHA DEJA DE SER UN CANALON. De 280 pasa a 340 minimo y a
       564 a 1440. El minimo esta clavado en la propia rejilla
       (minmax(340px, 1fr)): cuando el sitio no alcanza, el que cede es el
       marco de la foto, no el texto.

   Ademas: las miniaturas de "asi no" pasan de 68 a 104px (a 68 se leian como
   iconos mal comprimidos), la guia se abre en dos mitades —"asi si" a la
   izquierda, "asi no" a la derecha— en vez de una tira de 1.359px, y el boton
   de camara deja de ser una barra de ancho completo para volverse un boton.
   ========================================================================== */

@media (min-width: 900px) {

    /* 6.2 --- La escala y la rejilla, en un solo sitio --------------------- */

    /* La rejilla va en el BODY y no en .fotos-pantalla porque el pie legal es
       otro lienzo, hermano del <main>, y tambien tiene que poder alinearse con
       ella. El riel llega a 400 —que es el tope de resolucion util de las
       fotos de guia: 760px de origen a 2x— y el texto no baja nunca de 340.
       Cuando falta sitio, el que cede es el marco. */
    body.pantalla-imagenes {
        --fx-riel: 400px;
        --fx-cols: minmax(240px, var(--fx-riel)) minmax(340px, 1fr);
        --fx-hueco: var(--kctp-e7);   /* 48 */
    }

    .fotos-pantalla {
        --kctp-t-cuerpo: 1.1875rem;   /* 19 */
        --kctp-t-menor:  1.0625rem;   /* 17 */
        --kctp-t-micro:  .8125rem;    /* 13 */
    }

    /* 6.3 --- Hero a dos columnas ------------------------------------------
       El titular ocupa el riel y su bajada la columna de texto, alineados por
       la PRIMERA LINEA DE BASE: con 60px de titular y 19 de bajada, alinear
       por arriba dejaria la bajada flotando 20px por encima de donde el ojo
       espera. Es la entrada a dos columnas de la vara del lado de datos, y
       aqui ademas hace que el hero y la toma compartan las mismas dos
       verticales: el marco cae justo debajo del titular. */
    .fotos-hero {
        display: grid;
        grid-template-columns: var(--fx-cols);
        column-gap: var(--fx-hueco);
        align-items: baseline;
        margin-bottom: var(--kctp-e9);   /* 96 */
    }
    .fotos-hero h1 {
        /* 47px a 900, 60 a partir de 1200. La jerarquia la da el TAMANO: sigue
           en peso 400, como toda la serif de la casa. */
        font-size: clamp(2.75rem, .6rem + 4.2vw, 3.75rem);
        line-height: .98;
        letter-spacing: -.032em;
        text-wrap: pretty;
    }
    .fotos-hero p {
        max-width: none;   /* la columna YA es la medida */
        margin: 0;
    }

    /* 6.4 --- La toma ------------------------------------------------------ */
    /* Tres filas y SIN row-gap. El estado es una fila propia porque en
       escritorio va de sobretitulo, pero cuando la foto ya esta aceptada ese
       elemento no existe: con row-gap la fila vacia seguiria cobrando sus 24px
       y el titulo bajaria sin motivo. Las separaciones las ponen los margenes
       de cada pieza, que no cobran cuando la pieza no esta. */
    .fotos-toma {
        grid-template-columns: var(--fx-cols);
        grid-template-rows: auto auto 1fr;
        grid-template-areas:
            "marco estado"
            "marco rotulo"
            "marco datos";
        column-gap: var(--fx-hueco);
        row-gap: 0;
        margin-top: 0;   /* los 96 los pone el hero */
    }
    .fotos-toma > .fotos-estado { grid-area: estado; margin-bottom: var(--kctp-e3); }
    .fotos-toma > .fotos-rotulo { margin-bottom: var(--kctp-e5); }
    .fotos-toma > .fotos-marco  { grid-row: 1 / -1; }
    .fotos-rotulo h2 {
        font-size: clamp(1.75rem, 1.1rem + 1.2vw, 2.125rem);   /* 28 -> 34 */
    }
    /* Ni una medida de texto propia: el ancho lo pone la columna, que para eso
       esta calculada. Asi los tres parrafos de la derecha terminan en la misma
       vertical y esa vertical es la del borde de la tarjeta de abajo. */
    .fotos-rotulo p,
    .fotos-pie { max-width: none; }
    .fotos-datos { gap: var(--kctp-e5); }

    /* El boton vuelve a ser un boton. Una barra de 564px de ancho es la firma
       de un formulario; las dos referencias ponen el primario a su tamano,
       alineado a la izquierda del bloque que lo pide. */
    .fotos-toma:not(.fotos-toma-menor) .fotos-form { max-width: none; }
    .fotos-toma:not(.fotos-toma-menor) .kctp-btn-bloque {
        width: auto;
        min-width: 16rem;
        min-height: 56px;
        padding: 16px 28px;
        border-radius: 12px;
    }

    /* 6.5 --- La guia, en dos mitades --------------------------------------
       Como tira unica medía 1.359px de alto con 100 caracteres por linea. En
       dos mitades —"asi si" a la izquierda, "asi no" a la derecha— cada texto
       cae en 386 y 306px, que es la medida de parrafo de la vara dentro de una
       tarjeta, y el bloque entero se lee de una sola mirada. */
    .fotos-pantalla .kctp-tutorial > summary {
        padding: var(--kctp-e5) var(--kctp-e7);
        min-height: 76px;
    }
    .fotos-pantalla .kctp-tutorial-cuerpo {
        padding: var(--kctp-e7);
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--kctp-e8);   /* 64 */
        align-items: start;
    }
    .fotos-pantalla .kctp-pasos-guia { grid-column: 1; grid-row: 1 / span 2; }
    .fotos-pantalla .kctp-pasos-guia p { max-width: none; }
    .fotos-pantalla .kctp-paso-num { width: 32px; height: 32px; }

    .fotos-pantalla .kctp-guia-titulo { grid-column: 2; grid-row: 1; margin-top: 0; }
    .fotos-pantalla .kctp-errores     { grid-column: 2; grid-row: 2; }
    /* CUADRADAS EN ESCRITORIO, y no por gusto. En dos mitades la altura de la
       columna de la derecha la marca la miniatura: a 3:4 cada fila medía 139px
       y las cinco sumaban 240px mas que los cinco pasos de la izquierda, con
       lo que la mitad de abajo de la tarjeta quedaba en blanco. Recortadas a
       1:1 —que sigue mostrando la cara entera, porque el encuadre ya viene
       centrado en ella— las dos columnas terminan casi a la misma altura. */
    .fotos-mal { --fx-mal: 104px; aspect-ratio: 1 / 1; border-radius: 14px; }
    .fotos-mal-aspa { width: 22px; height: 22px; font-size: 14px; top: 8px; right: 8px; }
    .fotos-pantalla .kctp-errores figcaption {
        max-width: none;
        font-size: var(--kctp-t-menor);
    }
    /* Sin medida propia: la nota ocupa el ancho de la tarjeta y termina en la
       misma vertical que los pies de los errores. Con su 52ch heredado se
       quedaba en 665px y abria un cuarto borde derecho el ella sola. */
    .fotos-pantalla .kctp-guia-nota {
        grid-column: 1 / -1;
        grid-row: 3;
        max-width: none;
    }

    /* Igual con la ayuda de los perfiles: a 52ch cortaba en 906 y a ancho
       completo cabe en una sola linea (100 caracteres a 17px son 810px). */
    .fotos-pantalla .kctp-opcionales > .kctp-ayuda { max-width: none; }

    /* EL PIE LEGAL, QUE ES OTRO LIENZO. Su parrafo trae una medida de 508px de
       la hoja del sistema y caia en un borde que no era de nadie. Aqui se topa
       en el ancho del riel, con lo que termina exactamente donde terminan el
       titular y la fotografia: la letra chica queda colgada de la misma
       vertical que el objeto principal de la pantalla. */
    body.pantalla-imagenes > footer.kctp-pie-legal p { max-width: var(--fx-riel); }

    /* 6.6 --- Perfiles opcionales ------------------------------------------
       Apilados dejaban 260px de hueso a la derecha de cada celda. Con el marco
       a la izquierda la celda se llena y ademas repiten en pequeno la misma
       composicion de la toma principal, que es lo que dice sin palabras que
       son la misma cosa pero opcional. */
    .fotos-pantalla .kctp-opcionales > summary { min-height: 52px; }
    .fotos-parrilla { column-gap: var(--kctp-e7); row-gap: var(--kctp-e8); }
    .fotos-toma-menor {
        grid-template-columns: 180px minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "marco rotulo"
            "marco datos";
        column-gap: var(--kctp-e5);
        row-gap: var(--kctp-e3);
    }
    .fotos-toma-menor .fotos-marco { max-width: 100%; }
    .fotos-toma-menor .fotos-form { max-width: none; }
    .fotos-toma-menor .fotos-rotulo p { max-width: none; }

    /* 6.7 --- El ritmo de abajo -------------------------------------------
       96 SOLO entre el titular y la toma; de ahi para abajo, 64. Con 96 en los
       cuatro saltos el tercio inferior —tres barras de una linea cada una: la
       guia cerrada, el pliegue de los perfiles y el aviso— quedaba flotando en
       tres huecos iguales y la pagina terminaba pareciendo que le faltaba algo.
       Y hay un segundo motivo, medido: a 1440x900 la foto termina en 792 y con
       96 la tarjeta de la guia arrancaba en 888, o sea justo fuera del
       pliegue; con 64 asoma su borde superior y se ve que la pagina sigue. */
}

/* A partir de 1340 el lienzo ya esta topado en 1012 y el cuerpo puede dar el
   ultimo paso: 20px, que con 60 de titular deja el salto cuerpo->display en
   3x, entre el 2,75 de la vara del lado paciente y el 2,5 de la del lado de
   datos. Por debajo de 1340 el ancho todavia se lo come el riel. */
@media (min-width: 1340px) {
    .fotos-pantalla { --kctp-t-cuerpo: 1.25rem; }
}

/* Quien pidio menos movimiento, menos movimiento. */
@media (prefers-reduced-motion: reduce) {
    .fotos-pantalla * { transition-duration: .01ms !important; }
    .fotos-form .kctp-btn:active,
    .fotos-botones .kctp-btn:active { transform: none; }
}