/* comparacion.css - La comparacion del control y el historial de fotos (CONTROL_COMPARACION).
 *
 * Una sola hoja para las tres orillas de la pieza:
 *   - el profesional, en la ficha de un control: «Antes y ahora» (.cmp);
 *   - la paciente: «Tu progreso» (.prg) y la tarjeta del inicio (.prg-tarjeta, que reutiliza .ctl-tarjeta);
 *   - las dos galerias de fotos, con la etiqueta de cada grupo (.hst-*).
 *
 * Todo cuelga de clases con prefijo `cmp-` / `prg-` / `hst-`: las hojas de v2 se cargan en TODAS las pantallas y un
 * selector suelto pisaria a otro. Apagado el interruptor no existe ni un nodo con estas clases.
 * Los colores salen de las variables de la marca (con su valor de respaldo): la marca del cambio lleva icono Y texto,
 * el color solo no cuenta.
 */

/* ------------------------------------------------------------------ el profesional: «Antes y ahora» */
.cmp { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--kctp-borde, #ebe1e4); }
.cmp-titulo {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 4px; font-family: inherit; font-size: 1rem; font-weight: 600; color: var(--kctp-tinto, #260514);
}
.cmp-sub { margin: 0 0 14px; font-size: .85rem; line-height: 1.5; color: var(--kctp-guia, #67555d); }
.cmp-subtitulo { margin: 20px 0 8px; font-family: inherit; font-size: .95rem; font-weight: 600; color: var(--kctp-tinto, #260514); }

/* las fotos: dos columnas, antes a la izquierda y ahora a la derecha, SIEMPRE lado a lado (tambien en el telefono) */
.cmp-pares { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; max-width: 440px; }
.cmp-lado { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; font-size: .85rem; color: var(--kctp-tinta, #2a1a21); overflow-wrap: anywhere; }
.cmp-lado a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; color: inherit; }
.cmp-lado-rotulo {
    padding: 2px 9px; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    background: var(--kctp-acento-sw, #f5edef); color: var(--kctp-acento, #5b0c2f);
}
.cmp-lado-ahora .cmp-lado-rotulo { background: var(--kctp-acento, #5b0c2f); color: #fff; }
.cmp-fecha { color: var(--kctp-tenue, #7e6a73); font-size: .8rem; }
.cmp-angulo { grid-column: 1 / -1; margin: 10px 0 0; font-size: .8rem; font-weight: 600; color: var(--kctp-guia, #67555d); }
.cmp-foto {
    display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 10px;
    border: 1px solid var(--kctp-borde, #ebe1e4); background: var(--kctp-crema, #f9f4f5);
}
.cmp-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cmp-foto:focus-visible { outline: 2px solid var(--kctp-acento, #5b0c2f); outline-offset: 2px; }
.cmp-foto-vacia { display: grid; place-items: center; padding: 10px; text-align: center; border-style: dashed; color: var(--kctp-tenue, #7e6a73); font-size: .8rem; }
.cmp-foto-vacia i { display: block; margin-bottom: 4px; font-size: 1.3rem; }

/* los avisos: lo que falta, dicho sin adornos */
.cmp-aviso {
    display: flex; gap: 8px; align-items: baseline; margin: 0 0 8px; padding: 8px 12px; border-radius: 10px;
    background: var(--kctp-aviso-sw, #fdf5e8); box-shadow: inset 0 0 0 1px var(--kctp-aviso-bd, #f0dcb4);
    font-size: .85rem; line-height: 1.45; color: var(--kctp-tinta, #2a1a21);
}
.cmp-aviso i { flex: none; color: var(--kctp-aviso, #8a5a00); }
.cmp-resumen { margin: 0 0 8px; font-size: .88rem; font-weight: 600; color: var(--kctp-tinta, #2a1a21); }

/* la tabla de las ocho dimensiones */
.cmp-tabla { width: 100%; border-collapse: collapse; font-size: .88rem; }
.cmp-tabla th, .cmp-tabla td { padding: 8px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--kctp-linea, #f3ecee); overflow-wrap: anywhere; }
.cmp-tabla thead th { font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--kctp-tenue, #7e6a73); }
.cmp-tabla tbody th { width: 34%; min-width: 7.5em; font-weight: 600; overflow-wrap: normal; word-break: normal; hyphens: manual; color: var(--kctp-tinta, #2a1a21); }
.cmp-marca { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; white-space: nowrap; }
.cmp-nota { display: block; margin-top: 2px; font-size: .78rem; font-weight: 400; line-height: 1.35; color: var(--kctp-tenue, #7e6a73); }
.cmp-mejoro .cmp-marca { color: var(--kctp-ok, #1f7a58); }
.cmp-igual .cmp-marca { color: var(--kctp-guia, #67555d); }
.cmp-sin_comparar .cmp-marca { color: var(--kctp-tenue, #7e6a73); font-weight: 500; }
.cmp-empeoro { background: var(--kctp-aviso-sw, #fdf5e8); }
.cmp-empeoro .cmp-marca { color: var(--kctp-aviso, #8a5a00); }
.cmp-pie { margin: 12px 0 0; font-size: .85rem; }
.cmp-pie a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cmp-solo-lector { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; white-space: nowrap; }

/* en el telefono la tabla se apila: cada dimension es una tarjetita con su antes, su ahora y su cambio (las celdas llevan
   role para que el lector de pantalla la siga leyendo como tabla) */
@media (max-width: 560px) {
    .cmp-tabla thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
    .cmp-tabla, .cmp-tabla tbody, .cmp-tabla tr, .cmp-tabla th, .cmp-tabla td { display: block; width: auto; min-width: 0; }
    .cmp-tabla tr { padding: 10px 6px; border-bottom: 1px solid var(--kctp-linea, #f3ecee); }
    .cmp-tabla tbody th { padding: 0 0 4px; border: 0; font-size: .92rem; }
    .cmp-tabla td { display: flex; gap: 10px; padding: 2px 0; border: 0; }
    .cmp-tabla td::before { content: attr(data-rotulo); flex: 0 0 5.4em; font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--kctp-tenue, #7e6a73); padding-top: .12em; }
    .cmp-marca { white-space: normal; }
}

/* ------------------------------------------------------------------ la paciente: «Tu progreso» */
.prg-pagina { max-width: 720px; }
.prg-pares { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; margin-top: 16px; }
.prg-pares-uno { grid-template-columns: minmax(0, 280px); }
.prg-rotulo { margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--kctp-acento-cl, #8a2a50); }
.prg-rotulo-ahora { color: var(--kctp-acento, #5b0c2f); }
.prg-angulo { grid-column: 1 / -1; margin: 12px 0 0; font-size: 14.5px; font-weight: 600; color: var(--kctp-guia, #67555d); }
.prg-foto {
    display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 14px;
    border: 1px solid var(--kctp-borde, #ebe1e4); background: var(--kctp-crema, #f9f4f5);
}
.prg-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.prg-foto:focus-visible { outline: 2px solid var(--kctp-acento, #5b0c2f); outline-offset: 2px; }
.prg-foto-vacia { display: grid; place-items: center; padding: 10px; text-align: center; border-style: dashed; color: var(--kctp-tenue, #7e6a73); font-size: 14px; }
.prg-foto-vacia i { display: block; margin-bottom: 4px; font-size: 1.4rem; }

.prg-palabras h2 { margin-bottom: 10px; }
.prg-grupo { margin: 0 0 14px; padding: 12px 16px; border-radius: 14px; }
.prg-grupo h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-family: inherit; font-size: 16px; font-weight: 600; }
.prg-grupo ul { margin: 0; padding: 0 0 0 22px; font-size: 15.5px; line-height: 1.6; color: var(--kctp-tinta, #2a1a21); }
.prg-mejoro { background: var(--kctp-ok-sw, #e9f5f0); box-shadow: inset 0 0 0 1px var(--kctp-ok-bd, #c8e6da); }
.prg-mejoro h3 { color: var(--kctp-ok, #1f7a58); }
.prg-igual { background: var(--kctp-crema, #f9f4f5); box-shadow: inset 0 0 0 1px var(--kctp-borde, #ebe1e4); }
.prg-igual h3 { color: var(--kctp-guia, #67555d); }
.prg-atencion { background: var(--kctp-aviso-sw, #fdf5e8); box-shadow: inset 0 0 0 1px var(--kctp-aviso-bd, #f0dcb4); }
.prg-atencion h3 { color: var(--kctp-aviso, #8a5a00); }
.prg-aviso { display: flex; gap: 8px; align-items: baseline; margin: 6px 0 0; }
.prg-acciones { margin-top: 4px; }
.prg-otros { margin: 14px 0 0; font-size: 14.5px; color: var(--kctp-guia, #67555d); }
.prg-otros a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* la tarjeta del inicio: la misma de «Hacer mi control», en verde (lo que sale bien) */
.ctl-tarjeta.prg-tarjeta { background: var(--kctp-ok-sw, #e9f5f0); border-color: var(--kctp-ok-bd, #c8e6da); }
.prg-tarjeta .ctl-icono { background: var(--kctp-ok, #1f7a58); }
.prg-tarjeta .ctl-ojo { color: var(--kctp-ok, #1f7a58); }

/* ------------------------------------------------------------------ las dos galerias: la etiqueta de cada grupo */
.hst-etiqueta {
    display: inline-block; margin-right: 6px; padding: 1px 9px; border-radius: 999px; vertical-align: baseline;
    font-size: .74rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap;
    background: var(--kctp-acento-sw, #f5edef); color: var(--kctp-acento, #5b0c2f);
}
.hst-etiqueta.hst-control { background: var(--kctp-acento, #5b0c2f); color: #fff; }
.hst-enlace { font-size: .82rem; text-decoration: underline; text-underline-offset: 2px; }
.hst-sin-enviar { font-size: .78rem; color: var(--kctp-tenue, #7e6a73); }
/* en el expediente la ficha de cada sesion mide 196 px: la etiqueta, el codigo y la fecha pasan a la linea de abajo si no caben */
.kr-sesion-meta.hst-meta { flex-wrap: wrap; justify-content: flex-start; row-gap: 2px; }
.kr-sesion-meta.hst-meta .hst-enlace { flex-basis: 100%; }