/*
* Nota clínica — "documento vivo guiado" — DEMO VISUAL (sandbox).
*
* Paleta "Piedra" (gbook) inyectada SOLO en este overlay (no afecta el resto
* de la app). Tonos neutros fríos con sub-tono azulado, acoplados a
* estilos-gbook.md. TODAS las secciones comparten un mismo acento (caoba); lo
* que las distingue es su ordinal y su título, no el color.
* Inputs/botones base de Bootstrap/Keen.
*/
/* Tokens que también necesitan los componentes DESPRENDIDOS del panel (el
popover de hallazgos y la rueda de valores se montan en , fuera de
.gcc-panel, así que no heredarían nada declarado ahí). Por eso van en :root.
El override de tema oscuro está en clinical-note-page.css, también en la raíz. */
:root {
/* Caoba — acento único de la nota: ordinal de sección (01, 02…) y elementos
seleccionados. Los fondos tenues se derivan con color-mix, así que para
cambiar el tono de toda la nota basta esta línea. */
--gcc-caoba: #8C4A38;
/* Tinta que va ENCIMA del caoba sólido (chip del ordinal). No se puede
derivar con color-mix del propio caoba: en claro el acento es oscuro y
pide tinta clara, en oscuro es claro y pide tinta oscura — son extremos
opuestos, y CSS no sabe hacia cuál mezclar. Por eso es su propio token,
con override en el bloque [data-bs-theme="dark"] de clinical-note-page.css.
Claro cálido, no blanco puro: sobre caoba el #FFF vibra (filosofía Piedra). */
--gcc-caoba-on: #FBF3F0;
/* Radio de los elementos elegibles (opciones, chips del mapa de retina, del
popover). Un solo knob para que todos redondeen igual. */
--gcc-chip-radius: 0.85rem;
}
/* ===== Paleta Piedra — scope local (acople gbook) ====================== */
.gcc-panel {
--gcc-bg: #F2F3F7; /* L0 página */
--gcc-surface: #FAFBFD; /* L1 cards */
--gcc-recess: #EBEDF2; /* L2 panel nota */
/* Relleno de CONTROLES (píldoras de hallazgo, barras de herramienta). NO es L2:
es el mismo `--ig-input-bg` que la marca usa en inputs y textareas —un paso
por debajo de L2 y con menos sub-tono azul— para que un control se lea como
hueco tallado y no como otra superficie. En claro son #E4E6EA vs #EBEDF2 de
L2: poco, pero lo suficiente para que un chip junto a un textarea se viera
de otro color, que es justo lo que pasaba.
El literal es el respaldo para el demo público, que es self-contained y no
carga layout-branding; en oscuro `--ig-input-bg` cae al gray-200 de Keen. */
--gcc-chip-fill: var(--ig-input-bg, #E4E6EA);
--gcc-line: #DCDFE7; /* Line — bordes 1px */
--gcc-ink-soft: #5C6170; /* Ink soft — texto secundario */
--gcc-ink: #15171D; /* Ink — texto principal */
/* ===== ESCALA DE TEXTO DENTRO DE UNA SECCIÓN ============================
Regla del componente: el TÍTULO y el DATO CLÍNICO se leen al MISMO tamaño;
lo que jerarquiza es el PESO (700 vs 500) y el color, nunca el cuerpo.
El dato es lo que el médico lee de verdad — encogerlo frente al título
invierte la importancia real de la sección.
Antes las opciones eran el único elemento de la sección que NO colgaba de
--gcc-fs (iban por un clamp en rem propio): el knob de la nota no las
alcanzaba y habían quedado ~1.5px por debajo del título, con el peso 700
del encabezado encima. De ahí que el título "aplastara" a las opciones.
Los tres derivan de --gcc-fs, así que la sección entera sigue escalando
con el knob único de la página. */
/* Ámbar de ADVERTENCIA (completitud NOM-004). Token semántico de la marca,
no un hex propio: antes el checklist llevaba #E8B007/#FFF8E6/#B9890B
escritos a mano y quedaban fuera de la paleta y del tema oscuro. Los tres
niveles (relleno, línea, tinta) se derivan con color-mix sobre la
superficie y la tinta del scope, así que se resuelven solos en claro y en
oscuro. El literal es solo respaldo para el demo público, que no carga
Bootstrap. Es la ÚNICA fuente del ámbar de la nota: .gcc-nom__item--miss
(checklist) y .gcc-secnom (franja de sección) beben de aquí. */
--gcc-warn: var(--bs-warning, #E8B007);
--gcc-warn-fill: color-mix(in srgb, var(--gcc-warn) 14%, var(--gcc-surface));
--gcc-warn-line: color-mix(in srgb, var(--gcc-warn) 70%, var(--gcc-line));
--gcc-warn-ink: color-mix(in srgb, var(--gcc-warn) 65%, var(--gcc-ink));
--gcc-fs-title: calc(var(--gcc-fs, 14px) * 0.97); /* título de sección · 700 */
--gcc-fs-item: calc(var(--gcc-fs, 14px) * 0.97); /* opción / chip · 500 */
--gcc-fs-label: calc(var(--gcc-fs, 14px) * 0.82); /* label de campo · 600 */
/* Botón primario (Continuar) y acentos base → negro Ink (Piedra), no azul */
--bs-primary: #15171D;
--bs-primary-rgb: 21, 23, 29;
background: var(--gcc-bg);
color: var(--gcc-ink);
/* Fuente del proyecto (Inter) explícita: el demo es self-contained y no
carga layout-branding, así garantizamos Inter aunque algún componente
Keen intente heredar otra familia. */
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
/* Mapear utilidades de texto/borde al tono cálido dentro del overlay */
.gcc-panel .text-gray-900,
.gcc-panel .gcc-ink { color: var(--gcc-ink); }
/* Título de sección: INTER en negrita, NO New Hero.
EXCEPCIÓN PUNTUAL — no es una regla del proyecto. layout-branding.css manda
todos los h1–h6 a --ig-font-heading (New Hero) con !important; a este tamaño
y dentro de la franja del encabezado, New Hero no se lee bien, así que solo
ESTE título vuelve a la familia de cuerpo. El resto de los encabezados de la
app (páginas, modales, page-header) no se tocan.
Los dos !important son obligatorios: font-family para ganarle a la regla
global de headings, y font-weight para ganarle a la utilidad .fw-semibold que
trae el markup del . */
.gcc-panel .gcc-section__title {
color: var(--gcc-ink);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
font-weight: 700 !important;
/* Tamaño atado al knob de la nota (--gcc-fs), no a la utilidad fs-5 de Keen.
fs-5 es un valor FIJO (~15px) que no escala con el resto, y contra unos
items de ~12px abría un salto de jerarquía demasiado grande: el título se
leía como encabezado de página, no de sección.
Título e items comparten AHORA el mismo cuerpo (--gcc-fs-title y
--gcc-fs-item valen lo mismo) y la jerarquía la carga el PESO (700 vs 500)
— 200 unidades de diferencia, que es el mínimo que pide la guía del
proyecto. !important porque fs-5 también lo lleva.
Para reajustar la relación: los tokens --gcc-fs-* del bloque .gcc-panel. */
font-size: var(--gcc-fs-title) !important;
}
/* Acotación del título —"(Médico)", "(Enfermería)"…—: mismo cuerpo, peso normal
y tinta secundaria. La separa sectionLabelHtml() en clinical-chat.js. Es lo que
evita que el encabezado se lea como un bloque negro de punta a punta. */
.gcc-panel .gcc-section__titleq {
font-weight: 500;
color: var(--gcc-ink-soft);
}
.gcc-panel .text-gray-800 { color: var(--gcc-ink); }
.gcc-panel .text-gray-700 { color: var(--gcc-ink-soft); }
.gcc-panel .text-gray-600,
.gcc-panel .text-gray-500,
.gcc-panel .text-muted,
.gcc-panel .gcc-muted { color: var(--gcc-ink-soft); }
.gcc-panel .text-gray-400 { color: #A1A6B2; }
.gcc-panel .text-primary,
.gcc-panel .text-info { color: var(--gcc-ink-soft) !important; }
.gcc-panel .border-gray-300,
.gcc-panel .border-gray-200 { border-color: var(--gcc-line) !important; }
/* Inputs y selects base, en tono cálido */
.gcc-panel .form-control,
.gcc-panel .form-select {
background-color: var(--gcc-surface);
border-color: var(--gcc-line);
color: var(--gcc-ink);
}
.gcc-panel .form-control:focus,
.gcc-panel .form-select:focus {
border-color: var(--gcc-ink-soft);
box-shadow: none;
}
/* ===== Overlay + panel ================================================= */
.gcc-overlay {
position: fixed; inset: 0; z-index: 1090;
display: flex; align-items: center; justify-content: center;
padding: 2rem;
background: rgba(21, 23, 29, 0.45);
opacity: 0; visibility: hidden;
transition: opacity 0.18s ease, visibility 0.18s ease;
}
.gcc-overlay--shown { opacity: 1; visibility: visible; }
.gcc-panel {
position: relative; /* ancla del toast de demo */
width: 96%; max-width: 1340px;
height: 92vh; max-height: 940px;
display: flex; flex-direction: column;
border-radius: 1.5rem; overflow: hidden;
transform: translateY(8px); transition: transform 0.18s ease;
}
.gcc-overlay--shown .gcc-panel { transform: translateY(0); }
/* ---- Modo página (plantilla propia, sin overlay/backdrop) -------------- */
.gcc-page {
display: flex;
justify-content: center;
align-items: flex-start;
min-height: 100vh;
padding: 1.5rem;
background: #F2F3F7; /* Piedra L0 */
}
.gcc-page .gcc-panel {
transform: none;
width: 100%;
max-width: 1340px;
height: calc(100vh - 3rem);
max-height: none;
}
@media (max-width: 860px) {
.gcc-page { padding: 0; }
.gcc-page .gcc-panel { height: 100vh; border-radius: 0; }
}
/* ===== Header ========================================================== */
.gcc-header {
flex: 0 0 auto;
padding: 0.85rem 1.5rem; gap: 1rem;
background: var(--gcc-bg); /* mismo tono cálido que el contenedor del formulario, sin borde */
}
/* ===== Body: dos columnas ============================================= */
.gcc-body {
position: relative;
flex: 1 1 auto; min-height: 0; overflow: hidden;
}
.gcc-stage-col { flex: 1 1 60%; min-width: 0; min-height: 0; }
.gcc-note-col { flex: 1 1 40%; min-width: 0; min-height: 0; background: var(--gcc-recess); }
.gcc-note-head { flex: 0 0 auto; }
.gcc-stage { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 1.5rem; }
.gcc-note { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* ===== Animaciones ===================================================== */
@keyframes gccIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
/* Las SECCIONES entran solo con opacidad, sin desplazamiento: al revelar una,
revealSection() le pide scrollIntoView suave, y un translateY simultáneo hace
que el scroll persiga un destino que se está moviendo 10px — se veía como un
rebote al aterrizar. Las FILAS sí conservan el deslizamiento: nadie scrollea
hacia ellas a la vez que aparecen. */
@keyframes gccSecIn { from { opacity: 0; } to { opacity: 1; } }
.gcc-section { animation: gccSecIn 0.22s ease-out both; }
.gcc-row:not(.gcc-row--noanim) { animation: gccIn 0.26s ease-out both; }
.gcc-row--leaving { opacity: 0; transform: translateY(-4px); transition: opacity 0.15s ease, transform 0.15s ease; }
@media (prefers-reduced-motion: reduce) {
.gcc-section, .gcc-row, .gcc-row--leaving { animation: none !important; transition: none !important; }
}
/* ===== Sección = card con acento ====================================== */
/* El padding se expone como variables porque el encabezado tiene que SANGRAR
hasta los bordes de la card (margin negativo = -padding) para que su franja y
su línea lleguen de lado a lado. Las páginas que compacten la card deben
cambiar --gcc-card-px/py, NO la propiedad `padding` — si no, la sangría del
encabezado se descuadra. Ver clinical-note-page.css. */
.gcc-card {
--gcc-card-px: 1.4rem;
--gcc-card-py: 1.2rem;
--gcc-card-radius: 0.85rem;
background: var(--gcc-surface);
border: 1px solid var(--gcc-line);
border-radius: var(--gcc-card-radius);
padding: var(--gcc-card-py) var(--gcc-card-px);
margin-bottom: 1.1rem;
}
.gcc-card:last-of-type { margin-bottom: 0.5rem; }
/* ===== Encabezado de sección: franja propia [ 01 · Título · acciones · ✕ ] ==
Sangra el padding de la card para tocar ambos bordes, va un tono por encima
(L2 recess) y cierra con una línea de 1px. Es la separación entre "qué
sección es / qué puedo hacer con ella" y su contenido.
`:first-child` para el tirón hacia arriba y las esquinas: la franja solo se
pega al borde superior cuando de verdad es lo primero de la card. */
.gcc-card > .gcc-section__head {
margin-left: calc(-1 * var(--gcc-card-px));
margin-right: calc(-1 * var(--gcc-card-px));
margin-bottom: 0.9rem;
padding: 0.6rem var(--gcc-card-px);
background: var(--gcc-recess);
border-bottom: 1px solid var(--gcc-line);
/* PEGADO: mientras la sección esté en pantalla, su franja se queda arriba —
el médico siempre sabe en qué sección escribe, por larga que sea. Es el
primer piso del stack pegado (ver "Stack pegado" más abajo). El sticky
queda confinado a la card, así que cada sección releva a la anterior sola.
Su altura NO cambia al pegarse: eso es lo que impide el brinco. */
position: sticky;
top: calc(-1 * var(--gcc-scrollpad-top, 0px));
z-index: 8;
}
.gcc-card > .gcc-section__head:first-child {
margin-top: calc(-1 * var(--gcc-card-py));
/* -1px = el borde de la card, para que la franja no asome por fuera de la curva. */
border-radius: calc(var(--gcc-card-radius) - 1px) calc(var(--gcc-card-radius) - 1px) 0 0;
}
/* El hint queda del lado del CONTENIDO (debajo de la línea), no del encabezado.
`margin` completo (no solo bottom) para anular el margen por defecto del
sin depender de utilidades como .mb-0 en el markup. */
/* La instrucción de la sección va en TINTA, no en gris: es lo primero que se lee
al abrirla y en gris se leía como pie de página opcional. (Antes traía la clase
gcc-muted en el markup.) */
.gcc-section__hint { margin: 0 0 0.7rem; color: var(--gcc-ink); }
/* Atajos "hallazgos típicos": fila propia bajo la franja del encabezado. En el
header se amontonaban con Imprimir/✕ cuando la sección trae varios presets
(el plan quirúrgico de estrabismo carga 5). El margen superior negativo la
arrima a la franja para que se lea como parte del encabezado, no del cuerpo.
Al plegar la sección la oculta la regla > :not(.gcc-section__head). */
.gcc-typicalbar {
display: flex; flex-wrap: wrap; align-items: center;
gap: 0.4rem;
margin: -0.25rem 0 0.8rem;
}
/* Acciones de SALIDA (Imprimir / WhatsApp) al extremo derecho de la barra: los
presets llenan la sección y quedan del lado del contenido; estas entregan lo
que ya tiene y conservan el borde derecho donde el médico las venía buscando
cuando vivían en la franja. Grupo propio para que el `auto` no dependa de
cuántos presets haya (con cero, las acciones siguen a la derecha). */
.gcc-typicalbar__actions {
margin-left: auto;
display: inline-flex; align-items: center; flex-wrap: wrap;
gap: 0.4rem;
}
/* Barra sin botones visibles: fuera del flujo. Sin esto su margen dejaba un
hueco muerto bajo la franja mientras Imprimir/WhatsApp están ocultos (sección
sin datos aún). La marca la pone syncTypicalBar() en clinical-chat.js. */
.gcc-typicalbar--empty { display: none; }
/* Ordinal de la sección: 01, 02, 03… en MONO, tinta clara sobre chip de caoba
SÓLIDO (invertido). Antes era lo contrario —caoba sobre un lavado al 12% del
mismo tono— y a 12px el chip apenas se distinguía de la franja del encabezado:
el ordinal es el ancla de lectura de la sección (y lo que citan el checklist
NOM y la nota en construcción), así que gana el contraste del relleno pleno.
El número lo genera un contador CSS, así que se renumera solo cuando el médico
revela o quita secciones — nunca hay que recalcularlo en JS ni puede quedar
desfasado. `decimal-leading-zero` da el 0 a la izquierda. */
.gcc-stage { counter-reset: gccsec; }
.gcc-section { counter-increment: gccsec; }
.gcc-section__num {
flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
/* PLACA CUADRADA de 30px: la medida viene de cuando la franja tenía un botón
de quitar del mismo lado, y se conserva porque es el alto que le da al
encabezado su respiración actual. Antes era un rectángulo porque el ancho
lo daba un min-width de 2.2rem y el alto salía del padding + interlineado
— dos fuentes distintas, ningún motivo para que coincidieran.
`height` fijo (no min-height) es lo que garantiza el cuadrado; `min-width`
en lugar de `width` deja que un ordinal de 3 dígitos ensanche la placa en
vez de apretar los números contra el borde. El aire lo reparte
`justify-content: center` — con dos dígitos quedan ~8px por lado. */
--gcc-num-size: 30px;
min-width: var(--gcc-num-size);
height: var(--gcc-num-size);
padding: 0 0.3rem;
border-radius: 0.5rem;
/* Separación con el título por MARGIN y no subiendo el `gap` del contenedor:
el gap de .gcc-section__toggle (0.6rem) también gobierna chevron↔ordinal, y
subirlo ahí despegaría el chevron de la placa — el chevron pertenece a la
placa (juntos son "qué sección es"), el título es lo siguiente. Al ir en el
margin derecho del propio ordinal, el ajuste vale igual en el encabezado
plegable (toggle) y en el no plegable (.gcc-section__titlerow), que son dos
contenedores distintos con el mismo problema. */
margin-right: 0.3rem;
/* Fallbacks en var(): hay secciones renderizadas fuera de .gcc-panel (demos
estáticos), donde los tokens del scope no llegan. */
background: var(--gcc-caoba, #8C4A38);
color: var(--gcc-caoba-on, #FBF3F0);
font-family: var(--ig-font-mono, 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace);
/* 700: a 12px en mono, el dígito claro sobre relleno oscuro necesita cuerpo
para no adelgazarse. Los pesos 400/500/600/700 de JetBrains Mono están
cargados en base_layout, así que es negrita real, no sintética. */
font-size: calc(var(--gcc-fs, 14px) * 0.86);
font-weight: 700;
font-variant-numeric: tabular-nums;
/* line-height 1: con 1.15 el half-leading se reparte arriba y abajo del par
de dígitos, pero los números no tienen descendente —su caja útil termina en
la línea base—, así que ese medio interlineado inferior quedaba vacío y
empujaba el número hacia arriba dentro de la placa. Con 1 la caja de línea
ceñida al glifo la centra `align-items: center` sobre el alto fijo. */
line-height: 1;
/* letter-spacing 0 (antes 0.02em): el tracking añade su espacio TAMBIÉN
después del último dígito, y ese hueco fantasma entra en el ancho que
`justify-content: center` reparte — el par quedaba corrido a la izquierda.
Se notaba sobre todo en el 01, donde el asta del "1" ya carga el peso
óptico de ese lado. En mono con tabular-nums el tracking no aporta nada:
los avances ya son fijos. */
letter-spacing: 0;
}
.gcc-section__num::before { content: counter(gccsec, decimal-leading-zero); }
/* ===== Acordeón de secciones (solo vista guiada) ========================
El encabezado completo —chevron + ordinal + título— es el disparador. Las
acciones (Hallazgos típicos, Imprimir, ✕) quedan FUERA del botón: son otras
acciones, no deben plegar la sección al pulsarlas. */
.gcc-panel .gcc-section__heading { flex: 1 1 auto; min-width: 0; margin: 0; }
.gcc-panel .gcc-section__toggle {
appearance: none; -webkit-appearance: none;
display: flex; align-items: center; gap: 0.6rem;
width: 100%; min-width: 0;
border: 0; background: transparent;
padding: 0.15rem 0.35rem 0.15rem 0;
margin: 0;
text-align: left;
font: inherit; color: inherit;
cursor: pointer;
}
/* SIN fondo en hover. El botón no ocupa toda la franja (las acciones y la ✕ van
fuera de él), así que teñirlo dibujaba un rectángulo más angosto DENTRO de la
franja — se leía como un recuadro mal recortado. El feedback lo da el chevron,
que es lo que de verdad va a cambiar al pulsar. */
.gcc-panel .gcc-section__toggle:hover .gcc-section__caret { color: var(--gcc-ink); }
/* Foco de teclado: sí visible (requisito de accesibilidad), pero como anillo
sobre el texto, no como bloque de fondo. */
.gcc-panel .gcc-section__toggle:focus-visible {
outline: 2px solid var(--gcc-ink-soft);
outline-offset: 2px;
border-radius: 0.4rem;
}
.gcc-section__caret {
flex: 0 0 auto;
font-size: 1rem;
color: var(--gcc-ink-soft);
transition: transform 0.15s ease, color 0.12s ease;
}
.gcc-section:not(.gcc-section--collapsed) .gcc-section__caret { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
.gcc-section__caret { transition: none; }
}
/* PLEGADA: la card ES su franja de encabezado, nada más.
Se oculta por `display` y no por altura animada — animar layout hace que
.gcc-stage clampee su scrollTop frame a frame (mismo motivo que en el
acordeón de la nota en construcción). El movimiento lo da el chevron. */
.gcc-section--collapsed { padding-bottom: 0; }
.gcc-section--collapsed > :not(.gcc-section__head) { display: none !important; }
/* Plegada, la franja solo lleva chevron + ordinal + título + ✕. Todas las demás
acciones son SOBRE EL CONTENIDO ("Normal", "Traer de Refracción",
Imprimir, WhatsApp, el control de herencia): con la sección cerrada no hay
contenido a la vista sobre el que actuar, y apiladas en una lista de 8 franjas
convertían el mapa de la nota en una botonera. Reaparecen al abrirla. El ✕ se
queda: quitar una sección no necesita verla.
La regla de abajo ya solo hace falta para .gcc-prevsec, que sigue viviendo en
la franja: los .gcc-typical bajaron a .gcc-typicalbar y esa barra se oculta
entera con la regla `> :not(.gcc-section__head)` de arriba. Se conserva el
selector como backstop por si algún botón vuelve al encabezado.
!important porque .gcc-secprint alterna su visibilidad con estilo inline. */
.gcc-section--collapsed .gcc-typical,
.gcc-section--collapsed .gcc-prevsec { display: none !important; }
.gcc-card.gcc-section--collapsed > .gcc-section__head {
margin-bottom: 0;
border-bottom: 0;
/* Sin cuerpo debajo, la franja redondea sus cuatro esquinas. */
border-radius: calc(var(--gcc-card-radius) - 1px);
}
/* scroll-margin-top: al revelar una sección se le hace scrollIntoView; sin
margen aterrizaba a ras del borde del scrollport (pegada al chrome de la
columna). Complementa el scroll-padding-top de .gcc-stage. */
.gcc-section { position: relative; scroll-margin-top: 0.75rem; }
/* Autocompletados (medicamentos/diagnóstico/órdenes/laboratorio): cuando el
dropdown __sugs está ABIERTO, la sección entera se ELEVA sobre las cards
siguientes. Sin esto, una sección que crea stacking context deja su dropdown
z-index:30 "encerrado": la card siguiente lo tapa o sus chips "+" sangran a
través. El selector detecta "abierto" por la ausencia de display:none en el
style inline (hide() siempre re-escribe display:none; el resto del inline no
contiene la palabra "none"). */
.gcc-panel .gcc-section:has([class*="__sugs"]:not([style*="none"])) {
z-index: 60;
}
/* ===== Heredar de la última atención ================================== */
/* Banner superior (traer toda la nota anterior) */
.gcc-prevbanner {
display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
background: var(--gcc-surface); border: 1px solid var(--gcc-line);
border-left: 3px solid var(--gcc-ink-soft);
border-radius: 0.75rem; padding: 0.85rem 1rem; margin-bottom: 1rem;
animation: gccPrevIn 0.35s ease-out both;
}
@keyframes gccPrevIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.gcc-prevbanner__info { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.gcc-prevbanner__icon { color: var(--gcc-ink-soft); flex-shrink: 0; }
/* Encabezado de sección con el control de herencia a la derecha */
/* align-items: center — el control de herencia es una píldora de una línea y
ahora comparte la franja del encabezado con el ordinal y el título. */
.gcc-section__head--prev { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
/* flex:1 — sin esto el wrapper se encoge al ancho del título y el `margin-left:
auto` de las acciones no tiene contra qué empujar (quedarían pegadas al
título en vez de al extremo de la franja). */
.gcc-section__headmain { flex: 1 1 auto; min-width: 0; }
/* Fila del encabezado: [ 01 ][ Título ] …… [ acciones secundarias ][ ✕ ].
Ya no reserva hueco a la derecha: la ✕ dejó de ser absoluta y entró al grupo
de acciones, así que se acomoda sola con el resto. */
.gcc-section__titlerow { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; }
/* El título no debe empujar las acciones fuera de la franja con nombres largos. */
.gcc-panel .gcc-section__title { min-width: 0; overflow-wrap: anywhere; }
/* Botón "Hallazgos típicos": mismo lenguaje "gris fantasma" que el nav
Consulta/Estudios en hover (sin borde, fondo tenue, tinte al pasar el cursor). */
/* Acciones secundarias de sección (Hallazgos típicos, Imprimir, WhatsApp):
píldora OSCURA en tono CARBÓN (Ink al 78% sobre la surface — más negro que
gris, sin llegar al negro puro) + texto de la surface. El ghost claro se
perdía contra la card. Theme-aware: en dark los tokens se invierten solos. */
.gcc-typical {
display: inline-flex; align-items: center; gap: 0.45rem;
border: 0; border-radius: 0.6rem; padding: 0.4rem 0.75rem; line-height: 1;
background-color: color-mix(in srgb, var(--gcc-ink, #15171D) 78%, var(--gcc-surface, #FAFBFD));
color: var(--gcc-surface, #FAFBFD); cursor: pointer;
transition: background-color 0.12s ease, color 0.12s ease;
}
.gcc-typical:hover { background-color: color-mix(in srgb, var(--gcc-ink, #15171D) 90%, var(--gcc-surface, #FAFBFD)); }
.gcc-typical:active { background-color: color-mix(in srgb, var(--gcc-ink, #15171D) 68%, var(--gcc-surface, #FAFBFD)); }
.gcc-typical:disabled { opacity: 0.55; cursor: default; }
/* Atajo APLICADO. Los presets de una seccion son excluyentes entre si (pasar de
"Normal (dilatado)" a "Normal (sin dilatar)" retira lo del anterior), asi que
el medico necesita ver cual esta puesto: sin marca, los dos botones se ven
igual antes y despues de pulsarlos y no hay forma de saber desde donde cambia.
Caoba, el acento unico de la nota. */
.gcc-typical--on {
background-color: var(--gcc-caoba, #8C4A38);
color: var(--gcc-caoba-on, #FBF3F0);
}
.gcc-typical--on:hover { background-color: color-mix(in srgb, var(--gcc-caoba, #8C4A38) 85%, var(--gcc-ink, #15171D)); }
.gcc-prevsec {
display: inline-flex; align-items: center; flex-shrink: 0;
border-radius: 999px; padding: 0.28rem 0.7rem; line-height: 1; white-space: nowrap;
}
.gcc-prevsec--btn {
border: 1px solid var(--gcc-line); background: var(--gcc-surface); color: var(--gcc-ink-soft);
cursor: pointer; transition: color 0.12s ease, border-color 0.12s ease, background-color 0.12s ease;
}
.gcc-prevsec--btn:hover { color: var(--gcc-ink); border-color: var(--gcc-ink-soft); background: var(--gcc-recess); }
.gcc-prevsec--badge { border: 1px solid #BfE6D2; background: #E7F5EE; color: #1FA45C; }
@keyframes gccPrevSecIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .gcc-prevbanner { animation: none; } }
/* ===== Verificador NOM-004 (completitud al finalizar) ================== */
.gcc-note-col--nom { position: relative; }
/* Pantalla chica: la columna de la nota es un ACORDEÓN (flex: 0 0 auto, ver el
bloque ≤860px). En ese modo la revisión —que no depende del max-height del
acordeón— crecía con su contenido y empujaba todo fuera de pantalla: el pie
con "Finalizar de todos modos" y la ✕ de volver quedaban abajo del scroll de
la página, sin forma de alcanzarlos. Acotada a 78svh, la revisión scrollea
POR DENTRO y su pie queda siempre a la vista.
svh (no vh): el alto real con la barra del navegador desplegada. */
@media (max-width: 860px) {
.gcc-note-col--nom {
flex: 1 1 auto;
min-height: 0;
max-height: 78svh;
}
.gcc-note-col--nom .gcc-nom { min-height: 0; }
}
.gcc-nom { flex: 1 1 auto; min-height: 0; padding: 1.1rem 1rem 1.2rem; overflow-y: auto; animation: gccNomIn 0.34s ease-out both; }
@keyframes gccNomIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.gcc-nom__head { display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: 0.6rem; }
.gcc-nom__headtxt { flex: 1 1 auto; min-width: 0; }
.gcc-nom__shield { color: var(--gcc-ink-soft); flex-shrink: 0; }
/* Salida de la revisión (vuelve a la nota sin finalizar). Mismo lenguaje que los
demás botones-icono del motor: sin caja en reposo, tinte de Ink al hover. */
.gcc-nom__close {
flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px;
border: 0; background: transparent; border-radius: 0.45rem;
color: var(--gcc-ink-soft); cursor: pointer;
transition: background-color 0.12s ease, color 0.12s ease;
}
.gcc-nom__close:hover {
background-color: color-mix(in srgb, var(--gcc-ink) 8%, transparent);
color: var(--gcc-ink);
}
/* Pie del CTA: hermano del .gcc-nom dentro de la columna, FUERA de su scroll.
Con el bloque de calidad activo el checklist mide dos pantallas y
"Finalizar de todos modos" quedaba enterrado al final; aquí queda anclado al
pie de la columna, siempre visible. flex-shrink:0 para que no lo coma el
overlay, que es el que crece. */
.gcc-nom-foot {
flex: 0 0 auto;
display: flex; align-items: center; justify-content: flex-end;
flex-wrap: wrap; gap: 0.5rem;
padding: 0.7rem 1rem 0.85rem;
border-top: 1px solid var(--gcc-line);
background: var(--gcc-chrome, var(--gcc-bg));
}
/* ===== Revisión NOM en COMPACTO: acordeón al pie de la nota ==============
Misma revisión, otro envase. En pantalla chica la columna de la nota es un
acordeón y el panel lateral se comía la pantalla; aquí va plegado al final
del formulario, con el resumen (puntuación · datos pendientes) en la tapa. */
.gcc-nom-acc {
margin: 1rem 0 0.5rem;
border: 1px solid var(--gcc-warn-line);
border-radius: 0.85rem;
background: var(--gcc-surface);
overflow: hidden;
}
/* Sin pendientes deja de ser una advertencia: vuelve a la línea neutra. */
.gcc-nom-acc--ok { border-color: var(--gcc-line); }
.gcc-nom-acc__head {
display: flex; align-items: center; gap: 0.6rem;
width: 100%; padding: 0.7rem 0.9rem;
border: 0; background: var(--gcc-warn-fill); color: var(--gcc-ink);
text-align: left; font: inherit; cursor: pointer;
}
.gcc-nom-acc--ok .gcc-nom-acc__head { background: transparent; }
.gcc-nom-acc__shield { flex: 0 0 auto; color: var(--gcc-warn-ink); }
.gcc-nom-acc--ok .gcc-nom-acc__shield { color: #1FA45C; }
.gcc-nom-acc__txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.gcc-nom-acc__caret {
flex: 0 0 auto; color: var(--gcc-ink-soft);
transition: transform 0.15s ease;
}
.gcc-nom-acc--open .gcc-nom-acc__caret { transform: rotate(180deg); }
/* Dentro del acordeón la revisión NO tiene scroll propio ni pie anclado: el
scroll es el de la nota y el CTA cierra el bloque como un elemento más. Sin
esto, .gcc-nom (flex:1 + overflow-y:auto, pensado para la columna) colapsaba
a cero alto dentro de un contenedor que no es flex. */
.gcc-nom-acc .gcc-nom {
flex: none;
overflow: visible;
padding: 0.9rem;
animation: none;
}
.gcc-nom-acc .gcc-nom-foot { background: transparent; }
@media (prefers-reduced-motion: reduce) {
.gcc-nom-acc__caret { transition: none; }
}
.gcc-nom__group { margin: 0.9rem 0 0.5rem; }
.gcc-nom__list { display: flex; flex-direction: column; gap: 0.4rem; }
.gcc-nom__item {
display: flex; align-items: center; gap: 0.55rem;
border: 1px solid var(--gcc-line); border-radius: 0.6rem; padding: 0.5rem 0.65rem;
background: var(--gcc-surface); animation: gccNomItem 0.3s ease-out both;
}
@keyframes gccNomItem { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
.gcc-nom__icon { flex-shrink: 0; }
.gcc-nom__label { flex: 1 1 auto; min-width: 0; color: var(--gcc-ink); }
/* ===== Aviso NOM en la franja del encabezado de sección ==================
Réplica compacta del ítem "falta" del checklist: MISMO ámbar (los tokens
--gcc-warn-*) para que el médico lo lea como el mismo dato, no como otra
alerta. Lo inyecta syncSectionNomFlags() dentro de .gcc-section__titlerow,
solo con la revisión abierta.
`margin-left: auto` lo empuja al extremo derecho de la fila del título; va
fuera del del acordeón, así que no le roba área de clic al toggle. */
.gcc-panel .gcc-secnom {
flex: 0 0 auto;
margin-left: auto;
display: inline-flex;
align-items: center;
justify-content: center;
/* ICONO PELADO: sin relleno, sin borde, sin píldora. La franja del encabezado
ya es una superficie con su propio tono; meterle una cápsula ámbar encima
apilaba dos contenedores y se leía como un badge pegado. Aquí el color del
glifo ES la señal. */
border: 0;
background: transparent;
padding: 0.1rem;
color: var(--gcc-warn-ink);
line-height: 1;
cursor: pointer;
border-radius: 0.35rem;
transition: color 0.12s ease, background-color 0.12s ease;
}
.gcc-panel .gcc-secnom:hover {
background-color: color-mix(in srgb, var(--gcc-warn) 16%, transparent);
}
.gcc-panel .gcc-secnom:focus-visible {
outline: 2px solid var(--gcc-warn-ink);
outline-offset: 1px;
}
.gcc-panel .gcc-secnom i { font-size: 1.05rem; }
/* Rótulo solo para lectores de pantalla: el icono a secas no dice nada a quien
no lo ve, y el `title` no es un nombre accesible fiable en todos los lectores. */
.gcc-panel .gcc-secnom__sr {
position: absolute; width: 1px; height: 1px;
margin: -1px; padding: 0; overflow: hidden;
clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* Detalle QUÉ falta, desplegable con el icono. Vive dentro de
.gcc-section__head, así que también se lee con la sección PLEGADA — que es
justo cuando el médico necesita saber qué le falta sin abrirla. */
.gcc-panel .gcc-secnom-msg {
margin-top: 0.5rem;
padding: 0.5rem 0.65rem;
border-left: 2px solid var(--gcc-warn-line);
background: var(--gcc-warn-fill);
border-radius: 0.35rem;
font-size: var(--gcc-fs-label);
color: var(--gcc-ink);
line-height: 1.45;
}
.gcc-panel .gcc-secnom-msg ul { margin: 0; padding-left: 1.05rem; }
.gcc-panel .gcc-secnom-msg li + li { margin-top: 0.25rem; }
.gcc-nom__item--ok { opacity: 0.72; }
.gcc-nom__item--ok .gcc-nom__icon { color: #1FA45C; }
/* Mismos tokens que el aviso de la franja: un solo ámbar para toda la nota. */
.gcc-nom__item--miss { border-color: var(--gcc-warn-line); background: var(--gcc-warn-fill); }
.gcc-nom__item--miss .gcc-nom__icon { color: var(--gcc-warn-ink); }
.gcc-nom__item--rec .gcc-nom__icon { color: var(--gcc-ink-soft); }
/* Estado completo: escudo verde + el check "aparece" al llenarse cada ítem */
.gcc-nom--ok .gcc-nom__shield { color: #1FA45C; }
.gcc-nom__item--ok .gcc-nom__icon { animation: gccCheckPop 0.45s cubic-bezier(0.2, 1.3, 0.4, 1) both; animation-delay: inherit; }
@keyframes gccCheckPop { 0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }
.gcc-nom__go {
flex-shrink: 0; border: 0; background: transparent; color: var(--gcc-ink);
font: inherit; font-size: 0.78rem; font-weight: 600; text-decoration: underline; cursor: pointer; padding: 0;
}
.gcc-nom__go:hover { opacity: 0.75; }
.gcc-nom__note { margin-top: 0.9rem; font-style: italic; }
/* .gcc-nom__actions se retiró: el CTA vive ahora en .gcc-nom-foot, anclado a la
columna y fuera del scroll de la revisión (ver el bloque de arriba). */
/* Hint junto al CTA: recuerda que se puede seguir editando (el panel se
actualiza solo) — reemplaza al viejo botón "Seguir editando". */
.gcc-nom__edithint { margin-right: auto; font-style: italic; max-width: 28ch; }
/* ---- Calidad de la nota (score MECIC) dentro del checklist ------------- */
.gcc-nom-quality {
border: 1px solid var(--gcc-line); border-radius: 0.6rem;
padding: 0.65rem 0.75rem; background: var(--gcc-surface);
/* relative + hidden: ancla y recorta la barra fina de actividad (::before). */
position: relative; overflow: hidden;
}
.gcc-nomq__head { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.gcc-nomq__score {
display: flex; align-items: baseline; gap: 2px; flex-shrink: 0;
border-radius: 0.55rem; padding: 0.3rem 0.55rem; line-height: 1;
}
.gcc-nomq__num { font-size: 1.35rem; font-weight: 700; }
.gcc-nomq__score--ok { color: #1FA45C; background: color-mix(in srgb, #1FA45C 12%, transparent); }
.gcc-nomq__score--mid { color: #B9890B; background: color-mix(in srgb, #E8B007 14%, transparent); }
.gcc-nomq__score--low { color: #C0392B; background: color-mix(in srgb, #C0392B 12%, transparent); }
.gcc-nomq__help {
margin-left: auto; align-self: flex-start; flex-shrink: 0;
border: 0; background: transparent; color: var(--gcc-ink-soft);
cursor: pointer; padding: 2px 4px; border-radius: 0.4rem; line-height: 1;
transition: color 0.15s ease, background-color 0.15s ease;
}
.gcc-nomq__help:hover, .gcc-nomq__help.active { color: var(--gcc-ink); background: color-mix(in srgb, var(--gcc-ink) 8%, transparent); }
.gcc-nomq__about {
margin-top: 0.55rem; border: 1px dashed var(--gcc-line); border-radius: 0.5rem;
padding: 0.6rem 0.7rem; line-height: 1.45;
animation: gccNomItem 0.25s ease-out both;
}
.gcc-nomq__about-list { margin: 0.35rem 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.25rem; }
.gcc-nomq__pts { flex-shrink: 0; align-self: flex-start; margin-top: 2px; }
.gcc-nomq__reason { margin-top: 1px; }
/* Acciones de un criterio incumplido: "Ver" (evidencia) e "Ir a ".
Ghost, discretas: son ayuda, no la acción principal del checklist. */
.gcc-nomq__acts { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.3rem; }
.gcc-panel .gcc-nomq__act {
appearance: none; -webkit-appearance: none;
display: inline-flex; align-items: center; gap: 0.25rem;
border: 0; background: transparent;
padding: 0.15rem 0.35rem;
border-radius: 0.4rem;
font-size: 0.72rem; font-weight: 600; line-height: 1.2;
color: var(--gcc-caoba, #8C4A38);
cursor: pointer; white-space: nowrap;
transition: background-color 0.12s ease;
}
.gcc-panel .gcc-nomq__act:hover {
background: color-mix(in srgb, var(--gcc-caoba, #8C4A38) 12%, transparent);
}
.gcc-panel .gcc-nomq__act i { font-size: 0.85rem; }
/* ===== Evidencia del criterio (modal) ==================================
Se monta en , fuera del panel: el checklist vive en una columna
estrecha con overflow y ahí dentro no cabría. Por eso lleva sus propios
colores con fallback — no hereda los tokens --gcc-*. */
.gcc-qdetail {
position: fixed; inset: 0; z-index: 2100;
display: flex; align-items: center; justify-content: center;
padding: 1rem;
background: rgba(10, 11, 16, 0.5);
}
.gcc-qdetail__card {
width: min(520px, 100%);
max-height: 80vh; overflow-y: auto; overscroll-behavior: contain;
background: var(--bs-card-bg, #FAFBFD);
color: var(--bs-body-color, #15171D);
border: 1px solid var(--bs-gray-300, #DCDFE7);
border-left: 3px solid var(--bs-warning, #E8B007);
border-radius: 0.75rem;
padding: 1.1rem 1.2rem;
box-shadow: 0 22px 48px -18px rgba(0, 0, 0, 0.55);
}
/* Incumplido vs parcial: el filo izquierdo distingue la severidad sin repintar. */
.gcc-qdetail__card--miss { border-left-color: #C8442F; }
.gcc-qdetail__head { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.5rem; }
.gcc-qdetail__title { flex: 1 1 auto; min-width: 0; }
.gcc-panel .gcc-qdetail__close,
.gcc-qdetail__close {
flex: 0 0 auto;
border: 0; background: transparent; cursor: pointer;
color: var(--bs-secondary-color, #5C6170);
padding: 0; line-height: 1;
}
.gcc-qdetail__reason {
color: var(--bs-secondary-color, #5C6170);
margin-bottom: 0.6rem;
}
.gcc-qdetail__body { line-height: 1.5; }
.gcc-qdetail__acts { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.9rem; }
.gcc-qdetail__go {
display: inline-flex; align-items: center; gap: 0.3rem;
border: 1px solid color-mix(in srgb, var(--gcc-caoba, #8C4A38) 40%, var(--bs-gray-300, #DCDFE7));
background: color-mix(in srgb, var(--gcc-caoba, #8C4A38) 10%, transparent);
color: var(--gcc-caoba, #8C4A38);
border-radius: 0.45rem; padding: 0.32rem 0.7rem;
font-size: 0.8rem; font-weight: 600; cursor: pointer;
}
.gcc-qdetail__go:hover { background: color-mix(in srgb, var(--gcc-caoba, #8C4A38) 18%, transparent); }
.gcc-qdetail__foot {
margin-top: 0.9rem; padding-top: 0.7rem;
border-top: 1px solid var(--bs-gray-300, #DCDFE7);
line-height: 1.4;
}
.gcc-nomq__item--na { opacity: 0.6; }
.gcc-nomq__item--na .gcc-nom__icon { color: var(--gcc-ink-soft); }
.gcc-nomq__feedback { margin-top: 0.55rem; }
/* Estado de carga inicial: en Ink (no gris) con spinner de acento — debe verse
a la primera que la evaluación está corriendo. */
.gcc-nomq__loading { display: flex; align-items: center; color: var(--gcc-ink); font-weight: 600; }
.gcc-nomq__loading .spinner-border,
.gcc-nomq__updating .spinner-border {
width: 0.85rem; height: 0.85rem; border-width: 2px;
color: var(--gcc-accent, #1B84D6);
}
/* Re-auditando en vivo (el médico editó con la revisión abierta): la actividad
se comunica con una barra fina indeterminada arriba + un OVERLAY centrado
sobre los criterios (velo del color de la surface + spinner + "Evaluando
cambios…"). El score anterior sigue visible debajo del velo, sin vaciarse.
Solo transform/opacity (GPU). */
.gcc-nom-quality::before {
content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px;
z-index: 3;
background: linear-gradient(90deg, transparent, var(--gcc-accent, #1B84D6), transparent);
transform: translateX(-100%); opacity: 0; pointer-events: none;
}
.gcc-nom-quality.gcc-nomq--updating::before { opacity: 1; animation: gccNomqSweep 1.1s ease-in-out infinite; }
@keyframes gccNomqSweep {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
.gcc-nom-quality.gcc-nomq--updating::before { animation: none; opacity: 0; }
}
/* Overlay centrado (hijo del bloque, que ya es position:relative). El velo es
quien atenúa el contenido — NO se baja la opacity del bloque (atenuaría
también este overlay). */
.gcc-nomq__updating {
position: absolute; inset: 0; z-index: 2;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 0.55rem;
background: color-mix(in srgb, var(--gcc-surface) 78%, transparent);
color: var(--gcc-ink); font-weight: 600;
animation: gccNomqVeil 0.15s ease-out both;
pointer-events: none;
}
.gcc-nomq__updating .spinner-border { width: 1.5rem; height: 1.5rem; border-width: 2px; }
@keyframes gccNomqVeil {
from { opacity: 0; }
to { opacity: 1; }
}
/* ===== Resaltado de "esto es lo que acabas de agregar" ==================
Anillo del acento que respira dos veces. Lo usan focusNewNode() al revelar una
sección o una sub-fila, y el salto desde el checklist NOM.
Va en ::after y NO en el propio elemento por dos razones:
· .gcc-section ya usa `animation` para su entrada — declararla aquí otra vez
la pisaría y la sección aparecería sin fundido;
· el anillo se dibuja fuera del flujo, así que no desplaza nada (cualquier
cambio de tamaño aquí sería un salto de layout, justo lo que evitamos).
Antes esta clase además fijaba `border-color` y nunca se retiraba: el borde
quedaba teñido para siempre y el aviso no se podía repetir. */
.gcc-section--pulse,
.gcc-row--pulse { position: relative; }
.gcc-section--pulse::after,
.gcc-row--pulse::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
/* UN solo destello: basta para llevar la vista al elemento. Repetirlo pasaba
de señalar a reclamar atención sobre algo que el médico ya había visto. */
animation: gccSecHighlight 0.95s ease-out 1;
}
/* La fila no tiene caja propia: el anillo se separa un poco para envolverla. */
.gcc-row--pulse::after { inset: -0.35rem -0.55rem; border-radius: 0.6rem; }
@keyframes gccSecHighlight {
0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gcc-accent, #8C4A38) 0%, transparent); }
35% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--gcc-accent, #8C4A38) 32%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
.gcc-nom, .gcc-nom__item, .gcc-nom__item--ok .gcc-nom__icon { animation: none; }
.gcc-section--pulse::after, .gcc-row--pulse::after { animation: none; }
}
/* Contenedor de consulta: la responsividad por-ojo reacciona al ancho REAL del
formulario (cambia entre guiada/documento/enfocada y según el panel de nota),
no al viewport. Ver "@container" más abajo. */
.gcc-section__body { container-type: inline-size; }
.gcc-section__foot { margin-top: 1.1rem; }
.gcc-foot-done { /* color via text-success */ }
/* ===== Botones de opción =============================================
ACENTO ÚNICO: todas las secciones comparten el mismo (caoba, el de la
numeración). Antes cada sección traía el suyo desde la plantilla y con 8-10
abiertas la nota se veía como un arcoíris — rosa aquí, violeta allá — sin que
el color aportara información: lo que distingue una sección de otra es su
ordinal y su título, no su tinte. `section.accent` sigue viajando en los datos
por si algún día se quiere volver a diferenciar.
Los .gcc-next-group ("Continuar con…") SÍ conservan color por categoría: ahí
el color sí significa algo y se inyecta inline, que gana a esta regla. */
.gcc-panel .gcc-section { --gcc-accent: var(--gcc-caoba, #8C4A38); }
.gcc-panel .gcc-opt {
background: var(--gcc-surface);
border: 1px solid var(--gcc-line);
color: var(--gcc-ink);
font-weight: 500;
border-radius: var(--gcc-chip-radius, 0.85rem);
/* El TEXTO va al cuerpo de la sección (--gcc-fs-item), el mismo del título:
la opción ES el dato clínico y no tiene por qué leerse más chica que el
rótulo que la encabeza. Antes iba por un clamp en rem propio, ajeno al
knob --gcc-fs, y se había quedado ~1.5px por debajo del título.
El PADDING sigue en clamp() ligado al viewport (encoge en iPad vertical,
respira en monitor grande) pero sube lo justo para que el texto mayor no
toque el borde. La compactación que se buscaba aquí se conserva: el ahorro
real venía del padding HORIZONTAL —caben más chips por renglón, menos
renglones—, no de achicar la letra.
Alto resultante: 2 × 0.28rem + 14.07px × 1.3 ≈ 27px (antes ≈ 24px). */
padding: clamp(0.2rem, 0.15rem + 0.1vw, 0.28rem) clamp(0.45rem, 0.32rem + 0.34vw, 0.7rem);
font-size: var(--gcc-fs-item);
line-height: 1.3;
transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.gcc-panel .gcc-opt:hover { border-color: var(--gcc-accent, var(--gcc-ink-soft)); }
/* SELECCIONADO: relleno tenue del acento + contorno + tinta del mismo tono, en
vez del relleno pleno con texto blanco. El relleno sólido convertía cada
elección en una mancha de color; a diez chips marcados la sección gritaba.
El peso (600 vs 500) es lo que remata la lectura de "esto está elegido". */
.gcc-panel .gcc-opt.active {
background: color-mix(in srgb, var(--gcc-accent, var(--gcc-ink)) 16%, var(--gcc-surface));
border-color: color-mix(in srgb, var(--gcc-accent, var(--gcc-ink)) 55%, var(--gcc-line));
color: color-mix(in srgb, var(--gcc-accent, var(--gcc-ink)) 85%, var(--gcc-ink));
font-weight: 600;
}
/* Separación acompasada al chip: 0.3rem estaba calibrado para el chip pequeño y
con el cuerpo actual los dejaba pegados. 0.4rem es el mínimo con el que dos
píldoras contiguas se leen como dos y no como una barra segmentada. */
.gcc-opts { display: flex; flex-wrap: wrap; gap: 0.4rem; }
/* Chip PROPIO del médico (lo escribió a mano en otra nota): borde punteado para
distinguirlo del catálogo sin meter otro color. Activo se ve igual que el resto. */
.gcc-panel .gcc-opt--own:not(.active) { border-style: dashed; }
/* Campo de PÍLDORAS en una fila de palette (sensorialidad: Worth, Bagolini…).
Ocupa el ancho de la fila y baja las opciones a su propio renglón: con 4-8
resultados no caben al lado de la etiqueta sin romper el ritmo de la fila. */
.gcc-field--pills { display: flex; flex-direction: column; gap: 0.25rem; flex: 1 1 100%; min-width: 0; }
/* Input del valor "Otro": vive DENTRO de la píldora, sin caja propia — la caja
es la píldora. Sin borde ni fondo para que no se lea como un segundo control. */
.gcc-panel .gcc-pill-other {
border: 0; background: transparent; color: inherit;
font: inherit; font-weight: inherit;
width: 3.2rem; padding: 0; text-align: center;
border-bottom: 1px dashed currentColor;
}
.gcc-panel .gcc-pill-other:focus { outline: none; border-bottom-style: solid; }
/* Sugeridos para el diagnóstico: mismo lenguaje "botón gris" que el nav
Consulta/Estudios y el "−" de sección (sin borde, fondo gris, hover-tint).
Scopeado al bloque de sugeridos para no tocar los chips de diagnóstico. */
.gcc-panel .gcc-medications__suggest .gcc-opt,
.gcc-panel .gcc-medications__favs .gcc-opt {
border: 0;
/* EXACTAMENTE el relleno de los inputs (`--gcc-chip-fill` → `--ig-input-bg`,
#E4E6EA en claro), no un tinte de tinta al 8% como antes: ese daba un gris
parecido pero distinto, y junto al buscador de medicamentos —que sí usa el
token— se notaba que no empataban. */
background-color: var(--gcc-chip-fill);
color: var(--gcc-ink);
font-weight: 600;
border-radius: var(--gcc-chip-radius);
}
.gcc-panel .gcc-medications__suggest .gcc-opt:hover,
.gcc-panel .gcc-medications__favs .gcc-opt:hover {
background-color: color-mix(in srgb, var(--gcc-ink) 8%, var(--gcc-chip-fill));
border-color: transparent;
}
/* ===== Favoritos de medicamentos ======================================
Usan el MISMO chip gris que "Sugeridos para el diagnóstico" (arriba): las dos
listas insertan un medicamento ya pautado, así que comparten lenguaje. Antes
eran tarjetas ámbar de dos renglones con la posología completa — el único
elemento del componente con color propio y el que más alto ocupaba.
Aquí solo queda el tope de scroll: con muchos favoritos la lista scrollea en
vertical en vez de empujar la receta hacia abajo. */
.gcc-medications__favs { display: flex; flex-direction: column; gap: 0.35rem; }
/* Aire entre los bloques de chips y la receta. Llevaban `mb-2` (0.5rem) pegado al
markup —utilidad de Bootstrap con !important, imposible de afinar desde aquí— y el
primer medicamento quedaba pegado a los favoritos.
`:not(:empty)` es la clave: los dos contenedores existen SIEMPRE y se llenan por
fetch, así que sin la guarda un consultorio sin favoritos vería el hueco de todos
modos, con nada arriba. */
.gcc-medications__favs:not(:empty),
.gcc-medications__suggest:not(:empty) { margin-bottom: 1.1rem; }
.gcc-fav-chips { max-height: 92px; overflow-y: auto; padding: 2px; }
/* ===== Pauta descendente (taper) de un medicamento ===================== */
/* Sub-líneas de frecuencia reducida bajo la línea base; sangría + tick guía. */
.gcc-med-steps { display: flex; flex-direction: column; gap: 0.35rem; margin: 0.45rem 0 0.1rem; padding-left: 1.1rem; }
.gcc-med-steps:empty { display: none; margin: 0; }
.gcc-med-step { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; position: relative; }
.gcc-med-step::before {
content: ""; position: absolute; left: -0.75rem; top: 50%;
width: 0.55rem; height: 1px; background: var(--gcc-line, #DCDFE7);
}
.gcc-med-step__x {
flex: 0 0 auto; width: 24px; height: 24px; border: 0; border-radius: 0.5rem;
display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
background-color: color-mix(in srgb, var(--gcc-ink) 8%, transparent); color: var(--gcc-ink);
transition: background-color 0.15s ease;
}
.gcc-med-step__x:hover { background-color: color-mix(in srgb, var(--gcc-ink) 14%, transparent); }
.gcc-med-addstep {
align-self: flex-start;
width: 26px; height: 26px; border: 0; border-radius: 0.5rem;
display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
background-color: color-mix(in srgb, var(--bs-success, #17c653) 16%, transparent);
color: var(--bs-success, #17a34a);
transition: background-color 0.15s ease, color 0.15s ease;
}
.gcc-med-addstep:hover { background-color: var(--bs-success, #17c653); color: #fff; }
/* Acciones del renglón de medicamento, a la vista. Una con etiqueta (Reducir
dosis, la frecuente) y el resto solo icono: cinco acciones caben en ~200px, así
que ni se esconden en un menú ni forman una fila interminable.
`margin-left: auto` las empuja a la derecha, antes de la ✕ de quitar. */
.gcc-med-acts { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; margin-left: auto; }
.gcc-panel .gcc-med-act {
display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem;
min-width: 2rem; min-height: 2rem;
padding: 0.25rem 0.4rem;
border: 0; border-radius: var(--gcc-chip-radius);
background: var(--gcc-chip-fill); color: var(--gcc-ink-soft);
font-size: 0.82rem; font-weight: 600; line-height: 1.2; cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.gcc-panel .gcc-med-act--label { padding: 0.25rem 0.7rem; }
.gcc-panel .gcc-med-act:hover { color: var(--gcc-ink); background: color-mix(in srgb, var(--gcc-ink) 8%, var(--gcc-chip-fill)); }
/* Ojo: un select angosto. Solo se dibuja en vías oculares (lo decide el JS:
isOcularRoute) y entra con AO puesto. */
.gcc-panel .gcc-med-eye__sel { width: auto; min-width: 4.2rem; }
/* Vía, en el ENCABEZADO junto al nombre del medicamento. Es un atributo del
fármaco, no parte de la frase de posología, y sacarla de ahí le devuelve ~150px
al renglón de dosis · frecuencia · duración. */
.gcc-panel .gcc-med-route { width: auto; flex: 0 0 auto; }
/* Nombre del medicamento: es el título del renglón y competía de tú a tú con los
controles. El tamaño vive aquí en rem y no en las utilidades de tipografía del
markup, que traen !important y no se pueden afinar.
OJO: nada de comodines con diagonal en este comentario — un "asterisco+barra"
cierra el bloque antes de tiempo y convierte el resto del texto en parte del
selector, que entonces no coincide con nada. Fue exactamente lo que dejó esta
regla muerta tres intentos seguidos. */
.gcc-med-name { font-size: 1.3rem; font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; }
/* Etiquetas de las acciones secundarias: visibles mientras el renglón tenga
espacio, y a partir de aquí solo iconos. El corte es por CONTENEDOR y en el
mismo umbral que el resto del componente (700px): lo que decide si caben cuatro
textos es el ancho del formulario —que cambia entre guiada, documento y el panel
de nota— no el del viewport. */
@container (max-width: 700px) {
.gcc-med-act__lbl { display: none; }
/* Sin texto, el botón vuelve a ser cuadrado. */
.gcc-panel .gcc-med-act--label { padding: 0.25rem 0.4rem; }
}
/* Encabezado de la lista de arranque del buscador ("Más usados"). */
/* Aire entre la última tarjeta de medicamento y el buscador. Llevaba `mt-3`
(1rem) pegado al markup, que con el !important de las utilidades no se podía
afinar: el buscador quedaba casi tocando la tarjeta y se leía como parte de
ella en vez de como la acción de agregar otro. */
.gcc-medications__add { margin-top: 1.75rem; }
/* Encabezado de la lista de ARRANQUE de un buscador ("Más usados" / "Frecuentes"):
sin él, ver 20 resultados al hacer clic parece una búsqueda mal filtrada. Genérico
porque lo comparten medicamentos y diagnósticos. */
.gcc-sugs-head {
padding: 0.35rem 0.6rem 0.2rem;
font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
color: var(--cd-ink-soft, #5C6170);
}
/* Campo opcional desplegado (Nota / Dónde comprar / Cómo aplicar). */
.gcc-med-extra { margin-top: 0.4rem; }
/* ===== Órdenes / Interconsultas — componente "afecta la cuenta" ======= */
/* Se distingue del resto con acento ámbar (dinero/cuenta) + badge, precio y
subtotal en vivo. El tinte por color-mix funciona en claro y oscuro. */
.gcc-orders {
border: 1px solid var(--gcc-line, #DCDFE7);
border-left: 3px solid #B4690E;
border-radius: 10px;
padding: 0.75rem 0.85rem;
background: color-mix(in srgb, #B4690E 6%, transparent);
}
.gcc-orders__head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 0.75rem; margin-bottom: 0.6rem; }
.gcc-orders__badge {
display: inline-flex; align-items: center;
font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
color: #B4690E; background: color-mix(in srgb, #B4690E 14%, transparent);
border-radius: 999px; padding: 0.2rem 0.55rem;
}
.gcc-orders__hint { flex: 1 1 auto; }
.gcc-order-row {
border: 1px solid var(--gcc-line, #DCDFE7);
border-radius: 8px; padding: 0.5rem 0.6rem;
background: color-mix(in srgb, #B4690E 3%, transparent);
}
.gcc-order-row__head { display: flex; align-items: center; gap: 0.5rem; }
.gcc-order-row__name { flex: 1 1 auto; min-width: 0; }
.gcc-order-row__price { flex: 0 0 auto; font-weight: 700; color: #B4690E; }
.gcc-orders__foot { margin-top: 0.6rem; }
.gcc-orders__total {
display: flex; align-items: center; justify-content: space-between;
padding-top: 0.5rem; border-top: 1px dashed var(--gcc-line, #DCDFE7);
}
.gcc-orders__totalval { color: #B4690E; font-size: 1.02rem; }
/* ===== Motivo del paciente (read-only): recuadro por encima del título ===== */
.gcc-motivo { display: flex; flex-direction: column; gap: 1rem; }
.gcc-motivo__patient {
background: var(--gcc-recess);
border: 1px solid var(--gcc-line);
border-radius: 0.65rem;
padding: 0.9rem 1rem;
}
/* Reubicado sobre el encabezado de la sección: separa del título del médico. */
.gcc-motivo__patient--above { margin-bottom: 0.85rem; }
.gcc-motivo__text { color: var(--gcc-ink); line-height: 1.5; }
.gcc-motivo__ro { display: inline-flex; align-items: center; }
/* ===== Observaciones (sección) y Comentarios (sub-fila) =============== */
.gcc-obs { margin-top: 1.1rem; max-width: 640px; }
/* Comentarios POR OJO: dos cajas en la MISMA fila, alineadas con las columnas
OD | OI de la sección. Flex con base de 240px en vez de una rejilla de dos
columnas fija: cuando el panel se angosta (la nota vive en tres columnas y el
centro se puede encoger a 360px) se apilan solas, sin media query. */
.gcc-obs-eyes {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.gcc-obs--eye {
flex: 1 1 240px;
min-width: 0;
display: block;
}
/* El encabezado ("Observaciones") lo pone el envoltorio, no cada columna: las
dos cajas sustituyen a la caja general, así que la palabra tiene que
sobrevivir en algún lado o el bloque se queda sin nombre. */
.gcc-obs--eyeswrap .gcc-obs-eyes { margin-top: 0.15rem; }
.gcc-rowcomment { margin-top: 0.5rem; padding-left: 1.9rem; max-width: 560px; }
.gcc-note-comment { display: inline-block; }
/* ===== Paleta de "agregar" (Refracción/Biomicro/Fondo/Plan) ===========
Chips de las SUBSECCIONES que el médico puede añadir. Siempre visibles.
Compactos y fluidos a propósito: el objetivo es que quepan cuantos más mejor
en un solo renglón sin recortar ni hacer scroll horizontal; si no caben,
simplemente bajan a un segundo renglón (flex-wrap). Por eso tanto el tamaño
de letra como los paddings y el gap van en clamp() ligado al viewport: en un
iPad en vertical encogen, en un monitor grande respiran. */
.gcc-palette {
display: flex; flex-wrap: wrap;
gap: clamp(0.28rem, 0.2rem + 0.18vw, 0.45rem);
margin-bottom: 0.75rem;
}
.gcc-panel .gcc-add-chip {
display: inline-flex; align-items: center;
gap: clamp(0.15rem, 0.1rem + 0.1vw, 0.28rem);
font-size: clamp(0.68rem, 0.62rem + 0.16vw, 0.79rem);
font-weight: 600;
line-height: 1.15;
white-space: nowrap;
color: var(--gcc-accent, var(--gcc-ink-soft));
background: transparent;
/* Borde LISO (antes punteado). El punteado leía como "placeholder"/zona de
arrastre; estas son opciones reales y accionables. Se mezcla con Line para
que el acento de la sección tiña el contorno sin gritar. */
border: 1px solid color-mix(in srgb, var(--gcc-accent, var(--gcc-ink-soft)) 40%, var(--gcc-line));
border-radius: 0.45rem;
padding: clamp(0.2rem, 0.16rem + 0.1vw, 0.3rem) clamp(0.4rem, 0.28rem + 0.35vw, 0.68rem);
cursor: pointer;
transition: background-color 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
}
/* El "+" viene con fs-6 de Keen (~14px), desproporcionado en un chip chico:
se ata al tamaño del propio chip. */
.gcc-panel .gcc-add-chip i { font-size: 1.05em; line-height: 1; }
.gcc-panel .gcc-add-chip:hover {
background: color-mix(in srgb, var(--gcc-accent, var(--gcc-ink-soft)) 8%, transparent);
border-color: color-mix(in srgb, var(--gcc-accent, var(--gcc-ink-soft)) 65%, var(--gcc-line));
}
.gcc-panel .gcc-add-chip:active { transform: scale(0.97); }
/* Aviso de "ya no queda nada por agregar": ocupa el lugar de los chips. */
.gcc-palette__done { color: var(--gcc-ink-soft); font-style: italic; }
/* ===== Filas (sub-mediciones) ========================================= */
.gcc-rows { display: flex; flex-direction: column; gap: 0.5rem; }
.gcc-row { padding: 0.1rem 0; }
.gcc-row__head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
/* Filas que abren MODAL al click (refracción/queratometría): cursor + tinte
sutil en hover para comunicar que toda la fila es el disparador. */
.gcc-row__body--modal { cursor: pointer; border-radius: 0.5rem; transition: background-color 0.12s ease; }
.gcc-row__body--modal:hover { background-color: color-mix(in srgb, var(--gcc-ink, #15171D) 4%, transparent); }
/* ===== Detalle junto al hallazgo marcado (schema.chipDetail) ============
El valor va PEGADO al chip que lo genera —chip + hueco = una sola pieza— en
los dos consumidores (choice tipo tortícolis y filas por ojo). Se probó una
lista aparte debajo del banco y se descartó: en la columna de un ojo el nombre
del hallazgo no cabía junto a su select y quedaba recortado ("Limitaci…").
!important en fondos/bordes: el shell global de inputs (#kt_app_content,
especificidad de ID) pintaría la caja gris de formulario. */
/* Escala junto al chip marcado (schema.chipScales): select angosto porque el
valor es un símbolo ("2+", "-3"), no una frase. */
.gcc-panel .gcc-chip-scale {
width: auto; min-width: 5.5rem; max-width: 11rem;
align-self: center;
font-size: 0.8rem;
padding: 0.1rem 1.5rem 0.1rem 0.4rem;
}
/* Celda [ chip | valor ]. Sin marcar es un chip más del wrap; `min-width: 0` +
`max-width: 100%` son los que impiden que una opción larga
("Queratoplastía penetrante") desborde la columna del ojo. */
.gcc-panel .gcc-chipcell {
display: inline-flex; align-items: stretch;
min-width: 0; max-width: 100%;
flex: 0 1 auto;
}
/* MARCADA: fila completa. Es la regla que arregla el desborde y el recorte —
insertar el control dentro de un wrap de chips empujaba a los vecinos y en una
columna angosta el par no cabía. Con fila propia el par siempre dispone de todo
el ancho que necesite.
Pero la FILA es completa, el CHIP no: antes el chip llevaba `flex: 1 1 auto` y
se estiraba hasta el final del renglón, dejando el campo de graduación pegado
al borde derecho y una barra de color enorme por cada hallazgo marcado. Con
`0 1 auto` el chip mide lo que mide su texto y el campo queda pegado a él,
formando una sola píldora [ hallazgo | valor ]; el resto del renglón queda
libre. Sigue pudiendo encoger (`0 1`) y envolver cuando el texto es largo. */
.gcc-panel .gcc-chipcell--fused { flex: 1 1 100%; justify-content: flex-start; }
.gcc-panel .gcc-chipcell--fused .gcc-opt--fused {
flex: 0 1 auto; min-width: 0;
text-align: left;
/* El nombre del hallazgo se envuelve antes que recortarse: en una nota
clínica "Limitación supraducción" no puede leerse "Limitación supra…". */
white-space: normal; overflow-wrap: anywhere;
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
.gcc-panel .gcc-chipval {
flex: 0 0 auto;
align-self: stretch;
border: 1px solid color-mix(in srgb, var(--gcc-accent, var(--gcc-ink)) 55%, var(--gcc-line)) !important;
border-left: 0 !important;
border-radius: 0 var(--gcc-chip-radius, 0.85rem) var(--gcc-chip-radius, 0.85rem) 0 !important;
background: var(--gcc-surface) !important;
background-color: var(--gcc-surface) !important;
box-shadow: none !important;
color: var(--gcc-ink);
font: inherit; font-size: 0.78rem;
outline: none;
}
.gcc-panel input.gcc-chipval { width: 104px; padding: 0.1rem 0.5rem; }
.gcc-panel select.gcc-chipval { width: auto; max-width: 11rem; padding: 0.1rem 1.5rem 0.1rem 0.5rem; }
.gcc-panel .gcc-chipval:focus { border-color: var(--gcc-accent, #1B84D6) !important; }
.gcc-panel input.gcc-chipval::placeholder { color: var(--gcc-ink-soft); opacity: 0.85; }
/* Opción larga ("Queratoplastía penetrante", "Formada, sin celularidad") en la
columna de un ojo: `min-width: 0` le permite encoger y envolver. Sin esto el
ancho mínimo automático del item flex gana y el chip se sale de la columna —
parte del desborde que se veía en Segmento anterior. */
.gcc-panel .gcc-eye--chips .gcc-opt { min-width: 0; }
/* Columna de ojo ESTRECHA: el valor pasa a renglón propio bajo el chip en vez de
comprimirlo. El rango es deliberado: por debajo de 520px las columnas OD/OI ya
se apilan (ver el @container de abajo) y cada ojo recupera el ancho completo,
así que ahí el valor vuelve a caber al lado. El tramo malo es justo el de dos
columnas angostas.
El corte es por CONTENEDOR (@container sobre .gcc-section__body, no sobre el
viewport): lo que manda es cuánto ancho le queda al formulario con las columnas
laterales abiertas, no el tamaño de la pantalla. */
@container (min-width: 520.02px) and (max-width: 700px) {
/* Scopeado a .gcc-eye--chips a propósito: solo las columnas por ojo parten el
ancho en dos. Un choice de una sola columna (tortícolis) dispone de todo el
formulario, así que ahí el valor sigue al lado del chip. */
.gcc-panel .gcc-eye--chips .gcc-chipcell--fused { flex-wrap: wrap; }
.gcc-panel .gcc-eye--chips .gcc-chipcell--fused .gcc-opt--fused {
flex: 1 1 100%;
border-radius: var(--gcc-chip-radius, 0.85rem) !important;
}
.gcc-panel .gcc-eye--chips .gcc-chipcell--fused .gcc-chipval {
margin-top: 0.25rem;
border-left: 1px solid color-mix(in srgb, var(--gcc-accent, var(--gcc-ink)) 55%, var(--gcc-line)) !important;
border-radius: 0.45rem !important;
}
.gcc-panel .gcc-eye--chips input.gcc-chipval { width: 100%; }
.gcc-panel .gcc-eye--chips select.gcc-chipval { max-width: none; width: 100%; }
}
/* ===== Diagnóstico: COLUMNAS POR OJO ====================================
Misma convención que el resto de la nota (AV/PIO, biomicroscopía, fondo):
OD a la izquierda, OI a la derecha. El ojo dejó de ser algo que se elige por
diagnóstico —tres píldoras o un selector en cada renglón— y pasó a ser la
columna donde lo pones. Eso es lo que quita el amontonamiento: la lateralidad
se lee una vez por columna, no una vez por diagnóstico.
Debajo, una banda a todo lo ancho para lo que NO es de un ojo: binoculares
(estrabismo, nistagmo, diplopía) y sistémicos (diabetes, hipertensión). En
columna de ojo serían falsos; sin lugar, se perderían. */
.gcc-dx-board { display: flex; flex-direction: column; gap: 0.5rem; }
.gcc-dx-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
/* Columnas SIN caja. Tenían borde de 1px y un tinte de tinta, y con las tarjetas
dentro quedaban cajas dentro de cajas. Lo que delimita cada columna es su
encabezado (OD · OI · sin lateralidad) con su hairline, el espacio entre columnas
y su propio buscador — que le da cuerpo incluso vacía. */
.gcc-dx-col,
.gcc-dx-band {
min-width: 0;
border: 0;
background: transparent;
padding: 0;
}
/* Banda heredada (lateralidad "AO" de la captura anterior): apagada y con borde
punteado — es un contenedor de lo ya capturado, no un lugar donde agregar. */
.gcc-dx-bucket--legacy { opacity: 0.85; border-style: dashed; }
/* Fuera de oftalmología no hay columnas: la banda es la lista de siempre y no
necesita encabezado. */
.gcc-dx-band--flat { border: 0; background: transparent; padding: 0; }
.gcc-dx-band--flat .gcc-dx-bucket__head { display: none; }
.gcc-dx-bucket__head {
display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.35rem;
padding-bottom: 0.35rem;
border-bottom: 1px solid var(--gcc-line);
margin-bottom: 0.4rem;
}
.gcc-dx-bucket__tag { letter-spacing: 0.02em; flex-shrink: 0; }
/* Los ejemplos de la banda ("estrabismo, nistagmo, diabetes…") tienen que poder
partirse: en media nota el encabezado es angosto. */
.gcc-dx-bucket__name { min-width: 0; overflow-wrap: anywhere; }
.gcc-dx-bucket__body { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
/* Un diagnóstico: encabezado (nombre · código · quitar) y sus variables debajo.
Apilado y no en dos columnas porque el bloque ya vive dentro de la columna de
un ojo — partirlo otra vez lo volvería ilegible. */
/* Cada diagnóstico es una TARJETA, no un párrafo. Eran renglones de texto suelto
separados por una línea punteada: la lista se leía como prosa y no como objetos
que se pueden quitar o graduar uno por uno.
El contorno de 1px (y no un relleno) es a propósito: la tarjeta contiene selects
de estadio, que ya usan el gris de input — con relleno se fundirían con su propio
contenedor, y una línea se ve en los dos temas sin depender de tonos. Es además el
patrón que ya usa el renglón de medicamentos, el vecino más parecido. */
.gcc-dx-block {
display: flex; flex-direction: column; gap: 0.25rem; min-width: 0;
padding: 0.5rem 0.6rem;
border: 1px solid var(--gcc-line);
border-radius: var(--gcc-chip-radius);
}
.gcc-dx-block__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.35rem; }
.gcc-dx-block__vars { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem 0.4rem; min-width: 0; }
.gcc-dx-name { color: var(--gcc-ink); }
.gcc-dx-code { color: var(--gcc-ink-soft); }
/* Quitar: al extremo y discreto hasta que el cursor entra en el bloque — la
columna se lee como dato clínico, no como una lista de botones de borrar. */
.gcc-dx-del {
margin-left: auto; flex-shrink: 0;
border: 0; background: transparent; cursor: pointer;
color: var(--gcc-ink-soft); opacity: 0.4;
font-size: 1.05rem; line-height: 1;
padding: 0.05rem 0.25rem; border-radius: 0.35rem;
transition: opacity 0.12s ease, background-color 0.12s ease;
}
.gcc-dx-block:hover .gcc-dx-del { opacity: 0.8; }
.gcc-dx-del:hover { opacity: 1; background-color: color-mix(in srgb, var(--gcc-ink) 8%, transparent); }
/* Explicar con el visor 3D: acción de apoyo, no de captura. Discreta en reposo
y con tinte de marca al pasar el cursor. Toma el margen automático que antes
empujaba la ✕, y la ✕ se le pega detrás: con las dos en auto, el espacio
libre se repartiría entre ambas y "Explicar" quedaría flotando en medio. */
.gcc-dx-explain {
margin-left: auto; flex-shrink: 0;
display: inline-flex; align-items: center; gap: 0.25rem;
border: 0; background: transparent; cursor: pointer;
color: var(--gcc-ink-soft); opacity: 0.75;
font: inherit; font-size: 0.72rem; font-weight: 500; line-height: 1;
padding: 0.2rem 0.4rem; border-radius: 0.35rem;
transition: opacity 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}
.gcc-dx-explain + .gcc-dx-del { margin-left: 0; }
.gcc-dx-block:hover .gcc-dx-explain { opacity: 1; }
.gcc-dx-explain:hover {
color: var(--bs-primary);
background-color: color-mix(in srgb, var(--bs-primary) 10%, transparent);
}
/* Escala de un eje (glaucoma, RD, EMD, DMAE): etiqueta + select en línea. */
.gcc-dx-stage { display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem; min-width: 0; }
.gcc-dx-stage__label { flex-shrink: 0; }
.gcc-panel .gcc-dx-stage__sel { width: auto; min-width: 0; }
.gcc-dx-scalelabel { flex-shrink: 0; font-weight: 600; }
/* Ejes (LOCS III). Los selects son angostos a propósito: el valor es un dígito,
no una frase. En media nota los cuatro ejes pasan a dos renglones — por eso
la etiqueta del eje va PEGADA a su select, para que al envolverse nunca se
despareje un "C" del valor de al lado. */
.gcc-dx-axes { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem 0.4rem; min-width: 0; }
.gcc-dx-axes__eye { flex-shrink: 0; min-width: 1.5rem; }
.gcc-dx-axis { display: inline-flex; align-items: center; gap: 0.2rem; flex-shrink: 0; }
.gcc-dx-axis__label { color: var(--gcc-ink-soft); font-weight: 600; cursor: help; }
.gcc-panel .gcc-dx-axis__sel { width: auto; min-width: 3.4rem; padding-right: 1.5rem; }
/* Observaciones: el hueco de variables nunca queda vacío. Estética de dato
escrito a mano (subrayado, sin caja) para que no compita con los selects de
los diagnósticos que sí traen escala. */
.gcc-panel .gcc-dx-obs {
width: 100%;
border: 0 !important; border-bottom: 1px solid var(--gcc-line) !important;
border-radius: 0 !important;
background: transparent !important; background-color: transparent !important;
box-shadow: none !important;
color: var(--gcc-ink);
font-size: 0.8rem;
padding: 0.1rem 0.25rem;
}
.gcc-panel .gcc-dx-obs:focus { border-bottom-color: var(--gcc-accent, #1B84D6) !important; }
.gcc-panel .gcc-dx-obs::placeholder { color: var(--gcc-ink-soft); opacity: 0.7; }
.gcc-dx-confirm { margin: 0.1rem 0 0; }
/* Buscador de la columna: hereda el ojo, así que ya no necesita selector de
lateralidad. Va al final de su columna. */
.gcc-dx-search { margin-top: 0.15rem; }
/* Panel angosto (nota partida, iPad vertical): las dos columnas de ojo no caben
y se apilan. Cada una conserva su encabezado, así que la lateralidad se sigue
leyendo. */
@media (max-width: 700px) {
.gcc-dx-cols { grid-template-columns: 1fr; }
}
/* Aviso "sin cédula configurada" en la sección Receta de medicamentos: ámbar
suave, con el CTA carbón de credenciales al lado. Avisa, no bloquea. */
.gcc-credwarn {
display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
border: 1px solid color-mix(in srgb, #E8B007 45%, transparent);
background: color-mix(in srgb, #E8B007 10%, transparent);
color: var(--gcc-ink);
border-radius: 0.6rem; padding: 0.5rem 0.7rem;
}
.gcc-credwarn > i { color: #B9890B; flex-shrink: 0; }
/* ===== Filas por ojo: etiqueta a la IZQUIERDA + encabezado OD/OI sticky ===== */
/* Ancho de la columna de etiqueta (alinea encabezado y filas). */
.gcc-palettewrap { --gcc-rowlabel-w: 128px; --gcc-swapcol-w: calc(34px + 1.1rem); }
.gcc-row__main { display: flex; align-items: flex-start; gap: 0.6rem; }
.gcc-row--inline > .gcc-row__main > .gcc-row__head {
margin-bottom: 0; flex: 0 0 var(--gcc-rowlabel-w); align-items: flex-start; padding-top: 0.34rem;
}
.gcc-row--inline > .gcc-row__main > .gcc-row__body { flex: 1 1 auto; padding-left: 0; }
/* ===== El scroller del formulario =====================================
ÚNICO sticky que queda dentro: el encabezado OD/OI (.gcc-eyehead), de altura
fija. Hubo una barra pegada de "+ agregar" cuya altura cambiaba al pegarse
(los chips se clampeaban a un renglón); como un sticky conserva su caja en el
flujo, ese cambio desplazaba todo lo de abajo — el "brinco" al scrollear. Se
retiró: hoy las opciones van siempre visibles, en flujo normal.
El padding-top del scroller se expone como var para que el OD/OI lo cubra al
pegarse (las páginas que cambien ese padding deben re-declarar la var — ver
clinical-note-page.css). */
.gcc-stage {
--gcc-scrollpad-top: 1.5rem;
/* Scroll-anchoring ACTIVO. Estuvo apagado porque aquel sticky de altura
variable metía al anclaje en un bucle de compensación; sin él, el anclaje
vuelve a ser lo que debe ser: la red que absorbe cualquier cambio de alto
por encima del punto de lectura (revelar una sección, consumir un chip de
"Continuar con…", cargar una fuente). */
overflow-anchor: auto;
/* Los destinos de scrollIntoView aterrizan DEBAJO del OD/OI pegado, no a ras
del borde del scrollport, donde quedaban tapados. Vale para .gcc-section,
.gcc-row y el foco de cualquier input. */
scroll-padding-top: calc(var(--gcc-scrollpad-top, 0px) + 3.5rem);
}
/* Pista de scroll al final. Sin ella la ÚLTIMA sección nunca puede subir al tope
del scrollport, y cualquier cambio de alto ahí (la card "Continuar con…"
perdiendo un chip) obliga al navegador a clampear scrollTop — que es un salto
visible. Con la pista, el final del contenido deja de ser el final del scroll. */
.gcc-stage::after {
content: '';
display: block;
height: 30vh;
height: 30svh;
pointer-events: none;
}
/* En el resumen/nota finalizada no se edita nada: la pista sobra y dejaría un
hueco raro al final del documento. */
.gcc-panel.gcc-finished .gcc-stage::after { display: none; }
/* ===== Contención del scroll (bug del viewport en iOS) ====================
Arrastrar más allá del final de un scroller anidado propaga el gesto; como
html/body están en overflow:hidden, iOS no scrollea el documento pero SÍ
desplaza el visual viewport, y el topbar se va de pantalla sin forma de
volver. `contain` mata el gesto en el scroller donde empezó. Va en el MOTOR
(no solo en la página de la nota) para que ningún scroller nuevo se quede
fuera: aquí están TODOS los del motor, incluidos los que viven en
(modal de refracción, rueda de valores). */
.gcc-stage,
.gcc-note,
.gcc-nom,
.gcc-history__body,
.gcc-cmp-body,
.gcc-fav-chips,
.gcc-retpop__list,
.gcc-refmodal__body,
.gcc-rf-col,
.gcc-vp__col {
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
/* ===== Stack pegado dentro de cada sección ===============================
Tres pisos, cada uno debajo del anterior:
1. .gcc-section__head → top: -scrollpad
2. .gcc-palette → top: alto del head
3. .gcc-eyehead (OD/OI) → top: head + paleta
Las alturas las publica setupStickyStack() (clinical-chat.js) en
--gcc-sechead-h / --gcc-palette-h con un ResizeObserver por sección.
Por qué esto SÍ puede ser pegado y la vieja barra "+ agregar" no: ninguno de
los tres cambia de tamaño AL PEGARSE. La barra antigua se clampeaba a un
renglón al pegarse, y como un sticky conserva su caja en el flujo, ese cambio
desplazaba todo lo de abajo (el brinco). Aquí las alturas solo cambian cuando
el médico consume un chip — una acción suya, y con scroll-anchoring activo.
REGLA: no metas nada en estos tres bloques que cambie de alto al pegarse. */
.gcc-palettewrap > .gcc-palette {
position: sticky;
top: calc(var(--gcc-sechead-h, 0px) - var(--gcc-scrollpad-top, 0px));
z-index: 7;
background: var(--gcc-surface);
padding: 0.45rem 0 0.5rem;
margin-bottom: 0.4rem;
/* Anillo del color de la surface: tapa las orillas por las que asomaría el
contenido que pasa por detrás (invisible en reposo — mismo color). */
box-shadow: 0 0 0 6px var(--gcc-surface);
}
/* Sin nada que agregar, la paleta no merece un piso del stack: vuelve al flujo. */
.gcc-palettewrap > .gcc-palette.gcc-palette--done {
position: static;
box-shadow: none;
padding: 0;
}
/* El OD/OI de una sección CON paleta se apila también bajo ella. */
.gcc-palettewrap > .gcc-eyehead {
top: calc(var(--gcc-sechead-h, 0px) + var(--gcc-palette-h, 0px) - var(--gcc-scrollpad-top, 0px));
}
/* Al agregar una fila (scrollRowIntoView) que no quede bajo el stack pegado. */
.gcc-palettewrap .gcc-rows .gcc-row { scroll-margin-top: 5.5rem; }
/* Encabezado OD/OI: se pega arriba mientras la sección está en pantalla. */
.gcc-eyehead {
position: sticky;
/* Tercer piso del stack pegado: debajo de la franja del encabezado (y de la
paleta, si la sección la tiene — ver el override de .gcc-palettewrap).
Se resta --gcc-scrollpad-top para cubrir también el padding-top del
scroller: con top:0 quedaba una franja transparente arriba por la que se
veía pasar el contenido. */
top: calc(var(--gcc-sechead-h, 0px) - var(--gcc-scrollpad-top, 0px));
z-index: 5;
display: flex; align-items: flex-end;
padding: 0.4rem 0 0.55rem; margin-bottom: 0.55rem;
background: var(--gcc-surface); border-bottom: 1px solid var(--gcc-line);
/* Anillo del color de la surface: cubre los px de las orillas para que nada
"asome" pegado al texto (invisible en reposo — la card comparte color). */
box-shadow: 0 0 0 6px var(--gcc-surface);
/* Sin will-change/translateZ: promover un sticky a capa compositada propia lo
desincroniza del contenido durante el scroll inercial de iPad — se ve
"flotar" y re-encajar a saltos. */
}
.gcc-eyehead__spacer { flex: 0 0 var(--gcc-rowlabel-w, 128px); }
.gcc-eyehead__mid { flex: 0 0 auto; width: var(--gcc-swapcol-w, calc(34px + 1.1rem)); }
/* Variante 2 columnas (lens-rx): grid 1fr/1fr alineado con el grid de ojos. */
.gcc-eyehead--grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.gcc-eyehead--grid2 .gcc-eyehead__od, .gcc-eyehead--grid2 .gcc-eyehead__oi { padding: 0; }
/* Ambos ojos: MISMO color (ink), centrados, mayúsculas y más presencia. */
.gcc-eyehead__od, .gcc-eyehead__oi {
flex: 1 1 50%; min-width: 0;
text-align: center; text-transform: uppercase; letter-spacing: 0.06em;
font-size: 0.72rem; font-weight: 700; color: var(--gcc-ink, #15171D);
}
.gcc-eyehead__od { padding-right: 0.5rem; }
.gcc-eyehead__oi { padding-left: 0.5rem; }
/* Centrar el contenido de cada columna por ojo (queda bajo su encabezado).
Se excluyen los chips (listas), que van alineados a la izquierda. */
.gcc-row--cols2 .gcc-eye--od:not(.gcc-eye--chips),
.gcc-row--cols2 .gcc-eye--oi:not(.gcc-eye--chips) { justify-content: center; }
/* En modo columnas (ancho) los tags/etiquetas OD/OI por columna sobran:
los lleva el encabezado sticky. Se re-muestran en angosto (@container). */
.gcc-row__body--cols .gcc-eye__tag,
.gcc-eyecol__tag,
.gcc-lensrx__eyetag { display: none; }
/* Botón "−" de quitar sección: mismo lenguaje que el nav Consulta/Estudios
(.gcc-refnav__item) — sin borde, fondo transparente, radio suave y tinte
sutil del ink en hover. El ícono va en color ink (no ink-soft) para que el
trazo fino del "−" se vea claramente. */
.gcc-panel .gcc-row__remove {
width: 26px; height: 26px; flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 0.6rem; border: 0;
/* Fondo gris de "botón" en reposo (como el pill activo de Consulta/Estudios). */
background-color: color-mix(in srgb, var(--gcc-ink) 8%, transparent);
color: var(--gcc-ink);
transition: background-color 0.15s ease, color 0.15s ease;
}
.gcc-panel .gcc-row__remove i { font-size: 1.1rem; font-weight: 700; }
.gcc-panel .gcc-row__remove:hover {
background-color: color-mix(in srgb, var(--gcc-ink) 14%, transparent);
color: var(--gcc-ink);
}
.gcc-row__body { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 0.6rem 1rem; padding-left: 1.9rem; }
/* Dos columnas OD | OI con separador vertical elegante (1px Line) */
.gcc-row__body--cols { flex-wrap: nowrap; align-items: stretch; gap: 0; }
.gcc-row__body--cols .gcc-eye--od { flex: 1 1 50%; min-width: 0; padding-right: 0.5rem; }
.gcc-row__body--cols .gcc-eye--oi { flex: 1 1 50%; min-width: 0; padding-left: 0.5rem; }
.gcc-row__body--chips { align-items: stretch; }
.gcc-row__body--chips .gcc-eye--chips { flex: 1 1 50%; min-width: 0; }
/* Columna central con el botón "replicar" sobre la línea divisoria */
.gcc-row__mid {
flex: 0 0 auto; align-self: stretch;
display: flex; align-items: center; justify-content: center;
position: relative; padding: 0 0.55rem;
}
.gcc-row__mid::before {
content: ""; position: absolute; left: 50%; top: 10px; bottom: 10px;
width: 1px; background: var(--gcc-line); transform: translateX(-0.5px);
}
.gcc-row__mid .gcc-swap { position: relative; z-index: 1; }
/* Grupo por ojo (sin caja) */
.gcc-eye { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.4rem; }
.gcc-eye--single { padding-left: 0; }
.gcc-eye__tag { align-self: center; min-width: 1.6rem; }
.gcc-eye__gap { width: 0.5rem; }
.gcc-op { align-self: center; color: var(--gcc-ink-soft); font-weight: 600; padding-bottom: 0.45rem; }
.gcc-eye--chips { flex-direction: column; align-items: flex-start; gap: 0.3rem; flex: 1 1 44%; min-width: 240px; }
.gcc-eye--chips .gcc-eye__tag { align-self: flex-start; }
/* Campos */
.gcc-field { display: flex; flex-direction: column; gap: 3px; margin: 0; }
.gcc-field__label { line-height: 1; padding-left: 0.15rem; }
.gcc-field__control { display: inline-flex; align-items: center; gap: 0.25rem; }
.gcc-input { width: 58px; text-align: center; padding-left: 0.3rem; padding-right: 0.3rem; }
.gcc-select { min-width: 0; width: 96px; padding-right: 1.6rem; background-position: right 0.5rem center; }
.gcc-field--text { flex: 1 1 100%; }
.gcc-field--text .gcc-input { width: 100%; text-align: left; }
.gcc-eye--text { width: 100%; padding-left: 0; }
.gcc-field__suffix { white-space: nowrap; }
/* Botón copiar OD → OI */
.gcc-panel .gcc-swap {
align-self: center; width: 34px; height: 34px; flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%; border: 1px solid var(--gcc-line);
background: var(--gcc-surface); color: var(--gcc-ink-soft);
transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}
.gcc-panel .gcc-swap:hover { background: var(--gcc-recess); color: var(--gcc-ink); }
.gcc-panel .gcc-swap:active { transform: rotate(180deg); }
/* ===== eye-grid (AV/PIO): OD/OI en columnas =========================== */
.gcc-eyegrid { display: flex; flex-wrap: nowrap; gap: 0; align-items: stretch; }
/* Desplegable de campos ocasionales (schema: `optional: true` por campo).
Enlace, no botón: es una acción de apoyo que no debe competir con la captura
— mismo criterio que .gbook-btn-ghost en el resto del sistema. Desaparece en
cuanto alguno de esos campos tiene valor: a partir de ahí no hay nada que
plegar sin esconder un dato ya escrito. */
.gcc-morefields {
display: inline-flex; align-items: center; gap: 0.3rem;
margin-top: 0.55rem; padding: 0.25rem 0.4rem;
border: 0; background: transparent; border-radius: 0.4rem;
color: var(--gcc-ink-soft, #5C6170); cursor: pointer;
transition: color 0.12s ease, background-color 0.12s ease;
}
.gcc-morefields:hover {
color: var(--gcc-ink, #15171D);
background-color: color-mix(in srgb, var(--gcc-ink, #15171D) 5%, transparent);
}
.gcc-eyecol { flex: 1 1 50%; min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.gcc-eyecol--od { padding-right: 0.5rem; }
.gcc-eyecol--oi { padding-left: 0.5rem; }
.gcc-eyecol__tag { letter-spacing: 0.02em; text-transform: none; }
.gcc-eyecol__fields { display: flex; flex-wrap: wrap; gap: 0.5rem 0.85rem; align-items: flex-end; justify-content: center; }
/* ===== Responsividad por OJO (container query) ========================
Cuando el ancho del FORMULARIO (no del viewport) es chico y no caben dos
columnas por ojo, se apila: una fila completa para OD y otra para OI.
Solo afecta campos numéricos multi-campo (AV/PIO y refracción); las listas
de chips (movimientos/biomicroscopía/fondo) ya hacen wrap por su cuenta. */
@container (max-width: 520px) {
/* Angosto: se apila (label arriba, OD sobre OI) y se re-muestran los tags OD/OI;
el encabezado sticky de columnas se oculta (no aplica sin 2 columnas). */
.gcc-eyehead { display: none !important; }
.gcc-row--inline > .gcc-row__main { flex-direction: column; gap: 0.35rem; }
.gcc-row--inline > .gcc-row__main > .gcc-row__head { flex-basis: auto; padding-top: 0; margin-bottom: 0.25rem; }
.gcc-row__body--cols .gcc-eye__tag { display: inline-flex; }
.gcc-eyecol__tag, .gcc-lensrx__eyetag { display: block; }
/* Refracción (OD | ⇄ | OI) */
.gcc-row__body--cols { flex-wrap: wrap; gap: 0.5rem 0; }
.gcc-row__body--cols > .gcc-eye--od,
.gcc-row__body--cols > .gcc-eye--oi { flex: 1 1 100%; padding-left: 0; padding-right: 0; }
/* AV/PIO eye-grid */
.gcc-eyegrid { flex-wrap: wrap; }
.gcc-eyegrid > .gcc-eyecol { flex: 1 1 100%; }
.gcc-eyecol--od { padding-right: 0; }
.gcc-eyecol--oi { padding-left: 0; }
/* El ⇄ (replicar) pasa a divisor horizontal full-width entre ambos ojos */
.gcc-row__body--cols > .gcc-row__mid,
.gcc-eyegrid > .gcc-row__mid { flex: 1 1 100%; align-self: auto; padding: 0.15rem 0; }
.gcc-row__body--cols > .gcc-row__mid::before,
.gcc-eyegrid > .gcc-row__mid::before {
left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 1px; transform: translateY(-0.5px);
}
}
/* ===== gaze-grid: rejilla cardinal de 9 posiciones diagnósticas ======= */
.gcc-gaze { display: flex; flex-direction: column; gap: 0.85rem; }
.gcc-gaze__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.6rem;
}
.gcc-gaze__cell {
position: relative;
display: flex; flex-direction: column; gap: 0.5rem;
padding: 0.7rem 0.7rem 0.75rem;
background: var(--gcc-surface);
border: 1px solid var(--gcc-line);
border-radius: 0.7rem;
transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.gcc-gaze__cell:hover { border-color: var(--gcc-accent, var(--gcc-ink-soft)); }
/* Celda con dato capturado: acento sutil del color de la sección. */
.gcc-gaze__cell.is-filled {
border-color: var(--gcc-accent, var(--gcc-ink-soft));
box-shadow: inset 0 0 0 1px var(--gcc-accent, var(--gcc-line));
background: color-mix(in srgb, var(--gcc-accent, #888) 5%, var(--gcc-surface));
}
/* Posición primaria (centro) destacada. */
.gcc-gaze__cell--ppm {
background: var(--gcc-recess);
border-style: dashed;
}
.gcc-gaze__cell--ppm.is-filled { border-style: solid; }
.gcc-gaze__hd { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
.gcc-gaze__arrow {
flex: 0 0 auto;
width: 1.35rem; height: 1.35rem;
display: inline-flex; align-items: center; justify-content: center;
font-size: 1rem; line-height: 1; font-weight: 700;
color: var(--gcc-accent, var(--gcc-ink-soft));
border-radius: 0.4rem;
background: color-mix(in srgb, var(--gcc-accent, #888) 12%, transparent);
}
.gcc-gaze__name {
font-size: 0.72rem; font-weight: 600; line-height: 1.1;
color: var(--gcc-ink-soft);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gcc-gaze__cell--ppm .gcc-gaze__name { color: var(--gcc-ink); font-weight: 700; }
.gcc-gaze__row { display: flex; align-items: center; gap: 0.4rem; }
.gcc-gaze__mag {
position: relative; flex: 1 1 56%; min-width: 0;
display: inline-flex; align-items: center;
}
.gcc-gaze__mag input { padding-right: 1.4rem; text-align: center; }
.gcc-gaze__suffix {
position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%);
font-size: 0.78rem; font-weight: 600; color: var(--gcc-ink-soft); pointer-events: none;
}
.gcc-gaze__tipo { flex: 1 1 44%; min-width: 0; }
.gcc-gaze__legend { display: flex; align-items: center; line-height: 1.3; }
/* ---- Mosaico fotográfico: la foto vive DENTRO de la celda de su mirada, --
junto a la medición, no en una pestaña aparte. Alto fijo para que las nueve
celdas conserven la misma altura tenga o no foto (si no, la rejilla baila
según cuántas se hayan tomado y se pierde la lectura anatómica). */
.gcc-gaze__photo {
position: relative; margin-top: 0.4rem;
height: 62px; border-radius: 0.4rem; overflow: hidden;
border: 1px dashed var(--gcc-line);
display: flex; align-items: center; justify-content: center;
}
.gcc-gaze__photo.has-shot { border-style: solid; }
/* Sin toma no ocupa nada: la rejilla se ve idéntica a como era antes del
mosaico para quien solo mide en prismas. */
.gcc-gaze__photo.is-empty { display: none; }
/* Hueco de una mirada pendiente: las dos vías para llenarla (disparar esa toma
o subir un archivo) dentro de la misma celda. Aparece solo con el mosaico ya
iniciado — ver mosaicStarted() en el motor. */
.gcc-gaze__slot {
display: flex; align-items: center; justify-content: center; gap: 0.35rem;
width: 100%; height: 100%;
}
.gcc-gaze__slotbtn {
display: inline-flex; align-items: center; justify-content: center;
width: 2rem; height: 2rem; margin: 0; padding: 0; cursor: pointer;
border: 1px solid var(--gcc-line); border-radius: 0.4rem;
background: var(--gcc-surface); color: var(--gcc-ink-soft);
transition: color 0.12s ease, border-color 0.12s ease;
}
.gcc-gaze__slotbtn:hover { color: var(--gcc-accent, var(--gcc-ink)); border-color: var(--gcc-accent, var(--gcc-ink-soft)); }
.gcc-gaze__thumb { margin: 0; width: 100%; height: 100%; position: relative; }
.gcc-gaze__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
/* Toma aún NO guardada: se marca en ámbar. Vive en una URL de objeto del
navegador, así que una recarga la perdería — el aviso no es decorativo. */
.gcc-gaze__thumb.is-pending { outline: 2px solid var(--bs-warning); outline-offset: -2px; }
.gcc-gaze__pending {
position: absolute; left: 0; right: 0; bottom: 0;
background: var(--bs-warning); color: #15171D;
font-size: 0.6rem; font-weight: 700; text-align: center; padding: 0.05rem 0;
}
.gcc-gaze__photodel {
position: absolute; top: 2px; right: 2px;
width: 1.15rem; height: 1.15rem; padding: 0; border: 0; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: rgba(0, 0, 0, 0.55); color: #fff; cursor: pointer;
}
/* La barra de fotos va ARRIBA de la rejilla (ver renderGazeGrid): respira
respecto a las nueve celdas que vienen debajo. */
.gcc-gaze__photobar {
display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
margin-bottom: 0.7rem;
}
/* Acciones de entrada del mosaico — "Tomar fotos desde este dispositivo" y
"Tomar fotos con otro dispositivo (QR)".
Píldora CARBÓN (mismo lenguaje que .gcc-next-expand y .gcc-typical) para que
se vean de inmediato al abrir la sección; antes eran píldoras grises más,
indistinguibles del resto, y encima vivían debajo de la rejilla.
Las dos comparten estilo a propósito: son las dos formas de tomar el mismo
mosaico, no una principal y una secundaria. */
.gcc-panel .gcc-gaze__shoot {
appearance: none; -webkit-appearance: none;
display: inline-flex; align-items: center; gap: 0.4rem;
border: 0;
background: color-mix(in srgb, var(--gcc-ink, #15171D) 88%, var(--gcc-surface, #FAFBFD));
color: var(--gcc-surface, #FAFBFD);
border-radius: 0.5rem;
padding: 0.42rem 0.8rem;
font-size: calc(var(--gcc-fs, 15px) * 0.88);
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: background 0.12s ease, transform 0.08s ease;
}
.gcc-panel .gcc-gaze__shoot:hover { background: var(--gcc-ink, #15171D); }
.gcc-panel .gcc-gaze__shoot:active { transform: scale(0.98); }
.gcc-panel .gcc-gaze__shoot i { color: inherit; }
/* ---- Sesión de fotos guiada (modal) ---------------------------------------
Se apoya en el shell .gcc-refmodal (overlay + dialog + head/body/foot) para
no duplicar chrome. Lo de aquí es solo el contenido de la sesión: qué pedir,
el visor de la toma, el disparador y el mini-mapa de avance. */
/* El modal vive en , FUERA de .gcc-panel: los tokens --gcc-* no llegan
hasta aquí. Sin esto, `var(--gcc-accent)` queda sin resolver, la declaración
entera se invalida y el disparador sale blanco sobre blanco (invisible).
Se redeclaran en la raíz del overlay y el resto del bloque funciona igual. */
.gcc-gzs {
--gcc-accent: #8C4A38;
--gcc-ink: #15171D;
--gcc-ink-soft: #5C6170;
--gcc-line: #DCDFE7;
--gcc-surface: #FAFBFD;
--gcc-recess: #EBEDF2;
}
.gcc-gzs__dialog { max-width: 720px; }
/* ---- Modal de traspaso a celular (QR) -------------------------------------
Hereda los tokens de .gcc-gzs (por eso comparte esa clase en el overlay). */
.gcc-gqr__dialog { max-width: 600px; }
.gcc-gqr__grid2 { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start; }
.gcc-gqr__qr {
padding: 0.6rem; border-radius: 0.7rem;
background: #fff; border: 1px solid var(--gcc-line);
line-height: 0;
}
.gcc-gqr__qr svg { display: block; }
.gcc-gqr__side { min-width: 0; }
.gcc-gqr__steps { margin: 0 0 0.7rem; padding-left: 1.1rem; color: var(--gcc-ink); }
.gcc-gqr__steps li { margin-bottom: 0.2rem; line-height: 1.35; }
/* Mismo 3×3 del mosaico: se ve llegar cada foto en su posición. */
.gcc-gqr__map { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; max-width: 12rem; }
.gcc-gqr__cell {
height: 2.6rem; border: 1px solid var(--gcc-line); border-radius: 0.3rem;
background: var(--gcc-surface); color: var(--gcc-ink-soft);
display: flex; align-items: center; justify-content: center;
overflow: hidden; font-size: 0.9rem;
}
.gcc-gqr__cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gcc-gqr__cell.is-done { border-color: var(--gcc-accent); }
.gcc-gqr__foot { justify-content: space-between; }
@media (max-width: 560px) {
.gcc-gqr__grid2 { grid-template-columns: 1fr; justify-items: center; }
}
.gcc-gzs__body { display: flex; flex-direction: column; gap: 0.7rem; }
/* Instrucción: UNA franja horizontal encima del visor. Antes ocupaba media
pantalla en columna y le robaba el sitio a la imagen, que es lo que el
asistente mira mientras encuadra. */
.gcc-gzs__guide {
display: flex; align-items: center; gap: 0.7rem;
padding: 0.6rem 0.85rem; border-radius: 0.7rem;
background: var(--gcc-recess); border: 1px solid var(--gcc-line);
}
.gcc-gzs__step { flex: 0 0 auto; color: var(--gcc-accent, var(--gcc-ink-soft)); }
/* La flecha se lee antes que el texto: da la dirección de un vistazo. Va en un
disco de acento para que destaque sobre la franja y no se pierda entre el
paso y el texto. */
.gcc-gzs__arrow {
flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
width: 2.3rem; height: 2.3rem; border-radius: 50%;
font-size: 1.4rem; line-height: 1;
background: var(--gcc-accent, var(--gcc-ink)); color: #fff;
}
.gcc-gzs__asks { display: flex; flex-direction: column; min-width: 0; }
.gcc-gzs__ask { font-size: 1rem; font-weight: 700; color: var(--gcc-ink); line-height: 1.2; }
.gcc-gzs__pos { line-height: 1.2; }
/* Visor: el protagonista. Alto ligado al viewport para que en pantalla grande
crezca y en laptop no desborde el modal. */
.gcc-gzs__shot {
position: relative; height: clamp(240px, 46vh, 420px);
border-radius: 0.7rem; overflow: hidden;
border: 1px solid var(--gcc-line); background: #000;
display: flex; align-items: center; justify-content: center;
}
.gcc-gzs__shot img, .gcc-gzs__video { object-position: center; }
/* Retícula de encuadre sobre el video (no se imprime en la foto: se dibuja en
el DOM, no en el lienzo de captura). Trazo claro con sombra para que se lea
igual sobre piel clara y sobre fondo oscuro. */
/* Geometría (left/top/width/height) la fija layoutReticle() en JS para que
calce con el cuadro real del video, no con el contenedor. */
.gcc-gzs__reticle { position: absolute; pointer-events: none; }
.gcc-gzs__reticle line, .gcc-gzs__reticle circle, .gcc-gzs__reticle path {
fill: none; stroke: rgba(255, 255, 255, 0.85);
vector-effect: non-scaling-stroke;
filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.8));
}
/* La línea de los ojos es la referencia principal (cabeza sin inclinar): va
continua y algo más marcada. El resto, punteado y discreto. */
.gcc-gzs__ret-eye { stroke-width: 1.5; }
.gcc-gzs__ret-mid { stroke-width: 1; stroke-dasharray: 4 4; opacity: 0.75; }
.gcc-gzs__ret-eyec { stroke-width: 1.5; }
.gcc-gzs__ret-corner { stroke-width: 2; opacity: 0.9; }
/* OD/OI: se quedan FIJAS en el cuadro aunque el video se voltee, para que el
espejo se vea. `stroke: none` porque la regla de arriba pinta contorno a
todo el SVG y en texto se leería como borde. */
/* El `font-size` NO va aquí: lo fija drawReticle() como atributo, en píxeles
del cuadro, y una regla CSS lo pisaría (el CSS vence a los atributos de
presentación en SVG). */
.gcc-gzs__ret-eyelbl {
fill: rgba(255, 255, 255, 0.95); stroke: none;
font-weight: 700; text-anchor: middle;
paint-order: stroke; filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.9));
}
/* Flecha de dirección sobre el video: se pega al borde hacia donde deben ir los
ojos EN LA PANTALLA. La posición dentro del cuadro la fija paintDirArrow()
con justify/align, y la caja la alinea layoutReticle() con el video real. */
.gcc-gzs__dirarrow {
position: absolute; display: flex; pointer-events: none;
padding: 1.6rem;
}
.gcc-gzs__dirbox {
display: flex; flex-direction: column; align-items: center; gap: 0.1rem;
/* Late suave: llama la atención sin volverse un parpadeo molesto en una
sesión de nueve tomas seguidas. */
animation: gccDirPulse 1.8s ease-in-out infinite;
}
.gcc-gzs__dirglyph {
display: flex; align-items: center; justify-content: center;
width: 3rem; height: 3rem; border-radius: 50%;
font-size: 1.9rem; line-height: 1;
background: rgba(140, 74, 56, 0.92); color: #fff;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
.gcc-gzs__dirside {
font-size: 0.68rem; font-weight: 700; color: #fff;
background: rgba(0, 0, 0, 0.55); border-radius: 0.3rem;
padding: 0.05rem 0.35rem; white-space: nowrap;
}
@keyframes gccDirPulse {
0%, 100% { opacity: 0.75; transform: scale(1); }
50% { opacity: 1; transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
.gcc-gzs__dirbox { animation: none; opacity: 1; }
}
.gcc-gzs__rettoggle {
position: absolute; top: 6px; right: 6px;
width: 1.9rem; height: 1.9rem; padding: 0; border: 0; border-radius: 0.4rem;
display: flex; align-items: center; justify-content: center; cursor: pointer;
background: rgba(0, 0, 0, 0.45); color: rgba(255, 255, 255, 0.6);
}
.gcc-gzs__rettoggle.is-on { color: #fff; background: rgba(0, 0, 0, 0.65); }
/* El de espejo va a la izquierda del de guías, en la misma esquina. */
.gcc-gzs__mirror { right: 2.5rem; }
.gcc-gzs__mirror.is-on { color: #fff; background: rgba(140, 74, 56, 0.9); }
.gcc-gzs__hint {
position: absolute; left: 0; right: 0; bottom: 0;
padding: 0.25rem 0.5rem; text-align: center;
background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
color: rgba(255, 255, 255, 0.92); line-height: 1.25;
}
/* `contain`, NO `cover`: la captura toma el cuadro COMPLETO del stream, así que
recortar en pantalla haría que lo alineado con la retícula no fuera lo que
queda en la foto. Con contain, lo que se ve es exactamente lo que se guarda
(las bandas negras son el fondo del visor, como en cualquier app de cámara). */
.gcc-gzs__shot img,
.gcc-gzs__video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.gcc-gzs__empty { color: var(--gcc-ink-soft); text-align: center; padding: 0.8rem; line-height: 1.35; }
.gcc-gzs__live {
position: absolute; top: 6px; left: 6px;
background: #D02B2B; color: #fff;
font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
padding: 0.1rem 0.4rem; border-radius: 0.25rem;
}
.gcc-gzs__badge {
position: absolute; left: 0; right: 0; bottom: 0;
background: var(--bs-warning); color: #15171D;
font-size: 0.68rem; font-weight: 700; text-align: center; padding: 0.1rem 0;
}
.gcc-gzs__actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem; }
/* Disparador: el control dominante de la pantalla. Alto generoso porque se
toca con el paciente enfrente, muchas veces sin mirar la tablet. */
.gcc-gzs__shoot {
flex: 1 1 auto; margin: 0; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
min-height: 3rem; padding: 0 1.1rem; border-radius: 0.7rem;
background: var(--gcc-accent, var(--gcc-ink)); color: #fff;
font-size: 1rem; font-weight: 700;
transition: filter 0.12s ease;
}
.gcc-gzs__shoot:hover { filter: brightness(1.08); }
.gcc-gzs__shoot.is-retake { background: var(--gcc-surface); color: var(--gcc-ink); border: 1px solid var(--gcc-line); }
/* Respaldo por archivo: deliberadamente discreto (un ícono), para que no
compita con el disparador — es la salida cuando la cámara no está. */
.gcc-gzs__pick {
flex: 0 0 auto; margin: 0; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
width: 3rem; min-height: 3rem; border-radius: 0.7rem;
border: 1px solid var(--gcc-line); background: var(--gcc-surface); color: var(--gcc-ink-soft);
}
.gcc-gzs__pick:hover { color: var(--gcc-accent); border-color: var(--gcc-accent); }
.gcc-gzs__camsel { flex: 0 0 auto; max-width: 9rem; }
/* Mapa de avance: referencia secundaria, no debe competir con el visor. Se
deja compacto y centrado, con el ancho justo de sus 3 columnas. */
.gcc-gzs__map {
display: grid; grid-template-columns: repeat(3, 34px); gap: 3px;
justify-content: center; align-self: center;
}
.gcc-gzs__mapcell {
position: relative; padding: 0; border: 1px solid var(--gcc-line);
border-radius: 0.3rem; overflow: hidden; cursor: pointer;
height: 30px; background: var(--gcc-surface); color: var(--gcc-ink-soft);
display: flex; align-items: center; justify-content: center;
}
.gcc-gzs__mapcell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gcc-gzs__mapcell.is-done { border-color: var(--gcc-accent, var(--gcc-ink-soft)); }
.gcc-gzs__mapcell.is-current { outline: 2px solid var(--gcc-accent, var(--gcc-ink)); outline-offset: -2px; }
.gcc-gzs__mapicon { font-size: 0.9rem; }
.gcc-gzs__foot { justify-content: space-between; }
@media (max-width: 560px) {
.gcc-gzs__shot { height: clamp(200px, 38vh, 300px); }
.gcc-gzs__ask { font-size: 0.92rem; }
.gcc-gzs__arrow { font-size: 1.4rem; }
}
/* Mosaico en la NOTA (columna derecha): mismo 3×3, en miniatura. */
.gcc-note-mosaic { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin: 0.35rem 0 0.5rem; }
.gcc-note-mosaic__cell { margin: 0; text-align: center; }
.gcc-note-mosaic__cell img { width: 100%; height: 46px; object-fit: cover; border-radius: 0.25rem; display: block; }
.gcc-note-mosaic__cell.is-ppm img { outline: 1px solid var(--gcc-ink-soft); outline-offset: -1px; }
.gcc-note-mosaic__cell figcaption { font-size: 0.55rem; color: var(--gcc-ink-soft); line-height: 1.1; margin-top: 1px; }
.gcc-note-mosaic__empty {
display: block; height: 46px; border-radius: 0.25rem;
background: var(--gcc-recess); color: var(--gcc-line);
font-size: 0.7rem; line-height: 46px;
}
@media (max-width: 620px) {
.gcc-gaze__grid { gap: 0.45rem; }
.gcc-gaze__cell { padding: 0.55rem; }
.gcc-gaze__name { font-size: 0.66rem; }
.gcc-gaze__row { flex-direction: column; align-items: stretch; gap: 0.3rem; }
.gcc-gaze__photo { height: 52px; }
}
/* ===== retina-map: mapa de fundus por regiones (retina) =============== */
.gcc-retmap { display: flex; flex-direction: column; gap: 0.85rem; }
.gcc-retmap__eyes {
display: inline-flex; gap: 0.25rem; align-self: flex-start;
background: var(--gcc-recess); padding: 0.25rem; border-radius: 0.6rem;
}
.gcc-retmap__eye {
border: 0; background: transparent; cursor: pointer;
padding: 0.35rem 0.9rem; border-radius: 0.45rem;
font-size: 0.78rem; font-weight: 600; color: var(--gcc-ink-soft);
transition: background 0.15s ease, color 0.15s ease;
}
.gcc-retmap__eye.active { background: var(--gcc-surface); color: var(--gcc-ink); box-shadow: 0 1px 3px rgba(21, 23, 29, 0.14); }
.gcc-retmap__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(82px, auto);
gap: 0.6rem;
}
.gcc-retmap__cell {
display: flex; flex-direction: column; gap: 0.45rem;
padding: 0.6rem 0.65rem;
background: var(--gcc-surface);
border: 1px solid var(--gcc-line);
border-radius: 0.7rem;
transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.gcc-retmap__cell.is-filled {
border-color: var(--gcc-accent, var(--gcc-ink-soft));
box-shadow: inset 0 0 0 1px var(--gcc-accent, var(--gcc-line));
}
/* Polo posterior (centro) destacado como referencia anatómica. */
.gcc-retmap__cell--pole { background: var(--gcc-recess); border-style: dashed; }
.gcc-retmap__cell--pole.is-filled { border-style: solid; background: color-mix(in srgb, var(--gcc-accent, #888) 6%, var(--gcc-recess)); }
.gcc-retmap__cell-name { color: var(--gcc-ink-soft); }
.gcc-retmap__cell--pole .gcc-retmap__cell-name { color: var(--gcc-ink); }
.gcc-retmap__chips { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
.gcc-retmap__chip {
display: inline-flex; align-items: center;
padding: 0.2rem 0.5rem;
font-size: 0.74rem; font-weight: 600; line-height: 1.1;
border-radius: 0.4rem; cursor: pointer;
border: 1px solid var(--gcc-accent, var(--gcc-line));
background: color-mix(in srgb, var(--gcc-accent, #888) 12%, var(--gcc-surface));
color: var(--gcc-ink);
}
.gcc-retmap__chip i { opacity: 0.55; }
.gcc-retmap__chip:hover i { opacity: 1; }
.gcc-retmap__add {
width: 1.65rem; height: 1.65rem; flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 0.4rem; cursor: pointer;
border: 1px dashed var(--gcc-line); background: transparent; color: var(--gcc-ink-soft);
transition: border-color 0.15s ease, color 0.15s ease;
}
.gcc-retmap__add:hover { border-color: var(--gcc-accent, var(--gcc-ink-soft)); color: var(--gcc-accent, var(--gcc-ink)); }
.gcc-retmap__legend { display: flex; align-items: center; line-height: 1.3; }
/* Popover de catálogo de hallazgos (anclado a la celda, montado en BODY).
Al vivir en body, NO hereda los tokens --gcc-* del .gcc-note-scope; por eso
usa variables --bs-* (theme-aware por data-bs-theme) para tener fondo sólido
en claro y oscuro. --gcc-accent sí se setea inline en el popover (hover/activo). */
.gcc-retpop {
position: fixed; z-index: 1100;
background: var(--bs-body-bg, #fff);
border: 1px solid var(--bs-border-color, #DCDFE7);
border-radius: 0.6rem;
box-shadow: 0 18px 44px -18px rgba(0, 0, 0, 0.5);
padding: 0.6rem; max-width: 340px;
}
.gcc-retpop__list { display: flex; flex-wrap: wrap; gap: 0.3rem; max-height: 280px; overflow-y: auto; }
.gcc-retpop__opt {
padding: 0.32rem 0.62rem;
font-size: 0.78rem; font-weight: 600; line-height: 1.1;
border-radius: 0.4rem; cursor: pointer;
border: 1px solid var(--bs-border-color, #DCDFE7);
background: var(--bs-secondary-bg, #f1f1f4);
color: var(--bs-body-color, #3f4254);
transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.gcc-retpop__opt:hover { border-color: var(--gcc-accent, var(--bs-primary)); color: var(--bs-body-color, #3f4254); }
.gcc-retpop__opt.active {
background: var(--gcc-accent, var(--bs-primary));
border-color: var(--gcc-accent, var(--bs-primary));
color: #fff;
}
@media (max-width: 620px) {
.gcc-retmap__grid { gap: 0.45rem; }
.gcc-retmap__cell { padding: 0.5rem; }
}
/* ===== retina-map v2: carta de retina (lienzo radial) ================= */
/* El cromo de la carta (anillos, meridianos, horas) se colorea con estas dos
variables; el SVG las consume con fallback para que el MISMO markup se vea
bien aquí y en la ventana de impresión, que no carga este archivo. Los
colores de las LESIONES son literales: son convención clínica, no tema. */
.gcc-retc,
.gcc-retdoc {
--gcc-retc-line: #A6ABB8;
--gcc-retc-ink: #6B7280;
}
[data-bs-theme="dark"] .gcc-retc,
[data-bs-theme="dark"] .gcc-retdoc {
--gcc-retc-line: #4A505F;
--gcc-retc-ink: #9AA1B1;
}
.gcc-retc { display: flex; flex-direction: column; gap: 0.85rem; }
.gcc-retc__bar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.gcc-retc__baractions { margin-left: auto; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; }
.gcc-retc__expand {
display: inline-flex; align-items: center; gap: 0.35rem;
padding: 0.32rem 0.7rem;
font-size: 0.78rem; font-weight: 600;
border-radius: 0.5rem; cursor: pointer;
border: 1px solid var(--gcc-line); background: var(--gcc-surface); color: var(--gcc-ink);
transition: border-color 0.15s ease, background 0.15s ease;
}
.gcc-retc__expand:hover { border-color: var(--gcc-ink-soft); background: var(--gcc-recess); }
/* Acción aún no disponible (analizar desde estudios): se ve, se entiende y no
invita a pulsarla. */
.gcc-retc__expand:disabled { opacity: 0.5; cursor: not-allowed; }
.gcc-retc__expand:disabled:hover { border-color: var(--gcc-line); background: var(--gcc-surface); }
.gcc-retc__soon {
font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
padding: 0.05rem 0.32rem; border-radius: 0.3rem;
background: var(--gcc-recess); color: var(--gcc-ink-soft);
}
.gcc-retc__main { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
/* Instancia grande (modal "Ver completo"). El diálogo vive en , fuera de
.gcc-panel: ahí no existen los tokens --gcc-* del motor, así que se remapean
desde las variables de Bootstrap (theme-aware) con los mismos fallbacks Piedra
que usa el modal de refracción. Sin esto, la carta grande saldría sin fondos
ni bordes. */
.gcc-refmodal__dialog.gcc-retc-modal {
width: min(1120px, 100%);
--gcc-surface: var(--bs-card-bg, #FAFBFD);
--gcc-recess: var(--bs-gray-200, #EBEDF2);
--gcc-chip-fill: var(--ig-input-bg, #E4E6EA);
--gcc-line: var(--bs-border-color, #DCDFE7);
--gcc-ink: var(--bs-body-color, #15171D);
--gcc-ink-soft: var(--bs-secondary-color, #5C6170);
--gcc-accent: var(--gcc-caoba, #8C4A38);
}
.gcc-retc-modal .gcc-muted { color: var(--gcc-ink-soft); }
.gcc-retc--big .gcc-retc__chart { max-width: 640px; flex: 1 1 460px; }
.gcc-retc--big .gcc-retc__side { flex: 1 1 300px; max-width: 380px; }
.gcc-retc__chart {
flex: 1 1 300px; max-width: 420px; min-width: 240px;
padding: 0.5rem;
background: var(--gcc-surface);
border: 1px solid var(--gcc-line);
border-radius: 0.7rem;
/* Con una lesión activa el dedo/lápiz DIBUJA (touch-action:none, si no el
arrastre se lo lleva el scroll del panel). Sin lesión activa la carta no
captura nada: el médico tiene que poder deslizar la nota apoyando el dedo
encima del dibujo — es media pantalla del iPad. */
touch-action: pan-y;
-webkit-user-select: none; user-select: none;
/* iOS Safari: sin esto, mantener el dedo sobre el dibujo saca el menú de
copiar / "Buscar" o intenta arrastrar el SVG como imagen — justo encima del
gesto de marcar. */
-webkit-touch-callout: none;
}
.gcc-retc__chart.is-drawing {
cursor: crosshair;
border-color: var(--gcc-accent, var(--gcc-ink-soft));
touch-action: none;
}
.gcc-retc__svg { display: block; width: 100%; height: auto; }
/* Una marca ya puesta se arrastra para recolocarla. touch-action:none aquí (y no
en toda la carta) deja que el dedo sobre el dibujo siga haciendo scroll de la
nota, pero que sobre una lesión la agarre en vez de arrastrar la página. */
.gcc-retc-mark { cursor: move; touch-action: none; }
/* Con lesión activa el cursor dice "dibujar", pero sobre un SELLO la acción real
sigue siendo moverlo (ver el despachador de pointerdown): el cursor tiene que
decir la verdad. Los sectores sí se dibujan encima, así que ahí no se cambia. */
.gcc-retc__chart.is-drawing .gcc-retc-mark { cursor: crosshair; }
.gcc-retc__chart.is-drawing g.gcc-retc-mark[data-mid] { cursor: move; }
.gcc-retc-mark--sel { filter: drop-shadow(0 0 3px rgba(21, 23, 29, 0.45)); }
/* Tirador de la marca seleccionada: se agarra siempre, con o sin lesión activa.
touch-action:none para que el arrastre no se lo lleve el scroll del panel. */
.gcc-retc-handle { cursor: grab; touch-action: none; }
.gcc-retc-handle:active { cursor: grabbing; }
.gcc-retc__chart.is-drawing .gcc-retc-handle { cursor: grab; }
/* ✕ de quitar, junto al tirador. Se activa con click (presionar y soltar), así que
NO lleva touch-action:none: si el dedo resbala, el gesto se convierte en scroll
y no en un borrado accidental. */
.gcc-retc-del { cursor: pointer; }
.gcc-retc__chart.is-drawing .gcc-retc-del { cursor: pointer; }
.gcc-retc-del:hover circle:nth-of-type(2) { fill: #D02B2B; }
.gcc-retc-del:hover path { stroke: #fff; }
/* Detalle de la marca seleccionada (extensión, actividad, tracción). */
.gcc-retc__detail {
display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem;
padding: 0.5rem 0.6rem 0.55rem;
border: 0; background: transparent;
}
.gcc-retc__detail-hint { flex: 1 1 100%; font-size: 0.74rem; color: var(--gcc-ink-soft); }
.gcc-retc__detail-label { flex: 0 0 auto; font-size: 0.74rem; color: var(--gcc-ink-soft); }
.gcc-retc__detail-input {
flex: 1 1 auto; min-width: 0;
border: 1px solid var(--gcc-line); border-radius: 0.35rem;
background: var(--gcc-recess); color: var(--gcc-ink);
padding: 0.2rem 0.45rem; font-size: 0.82rem;
}
/* La fila de la lista es un botón real: alcanzable con teclado y con foco visible
(antes era un con click, sin ninguna de las dos cosas). */
.gcc-retc__mark-btn {
flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 0.45rem;
padding: 0; border: 0; background: none; color: inherit; text-align: left;
}
.gcc-retc__side { flex: 1 1 240px; min-width: 220px; display: flex; flex-direction: column; gap: 0.35rem; }
/* Escala tipográfica del componente: los tamaños viven AQUÍ (rem), no en
utilidades fs-8/fs-9 del markup — esas traen !important y dejaban los
controles de ambos mapas en 10-11px, ilegibles en la práctica. */
.gcc-retc__group { color: var(--gcc-ink-soft); margin-top: 0.4rem; font-size: 0.74rem; }
.gcc-retc__group:first-child { margin-top: 0; }
/* Paleta en REJILLA de celdas idénticas, no en flujo que envuelve. Con nombres de
3 y de 36 caracteres en la misma fila, el `flex-wrap` dejaba renglones de largos
distintos y huecos al final de cada uno: se leía como items mal puestos, no como
una paleta. La rejilla fija el ancho de columna y el alto de celda, así que
aparece un ritmo y las posiciones se aprenden.
`auto-fill` reparte las columnas según el ancho real: ~6 con la nota ancha, 2 en
el panel del modal, 1 en tablet angosta — sin media queries. */
.gcc-retc__les-box {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
gap: 0.35rem;
}
/* Píldoras de hallazgo SIN borde, sobre el gris Piedra L2. `--gcc-recess` es el
mapeo local de `--ig-stone-l2` (#EBEDF2): se usa el token del componente y no el
global porque la carta grande vive en un modal fuera de `.gcc-panel`, donde los
`--ig-*` no están en scope y los `--gcc-*` sí se remapean.
El relleno sustituye al contorno: con 25 píldoras, 25 bordes eran 25 líneas que
competían con el dibujo. */
.gcc-retc__les {
display: flex; align-items: center; gap: 0.45rem;
/* Alto de DOS renglones + padding. Fijo a propósito: es lo que da el ritmo de
la rejilla, y de paso son ~44px, el blanco de toque mínimo. */
min-height: 2.75rem;
padding: 0.34rem 0.7rem;
font-size: 0.86rem; font-weight: 600; line-height: 1.2; text-align: left;
border-radius: var(--gcc-chip-radius); cursor: pointer;
border: 0; background: var(--gcc-chip-fill); color: var(--gcc-ink);
transition: background 0.15s ease, box-shadow 0.15s ease;
}
/* Dos renglones máximo; lo que no quepa se corta con elipsis. El nombre completo
sigue a la vista en la barra MARCANDO y en el `title`, así que no se pierde. */
.gcc-retc__les-name {
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
overflow: hidden;
}
.gcc-retc__les:hover { background: color-mix(in srgb, var(--gcc-ink) 8%, var(--gcc-chip-fill)); }
/* Activa: anillo con `box-shadow` y no con `border`, para que al seleccionarla la
píldora no cambie de tamaño y la fila no se reacomode. */
.gcc-retc__les.active {
background: var(--gcc-surface);
box-shadow: 0 0 0 2px var(--gcc-accent, var(--gcc-ink));
}
/* Marca de la píldora: punto = se toca para colocar · arco = se arrastra sobre el
reloj. El gesto se lee en la propia píldora, antes de intentarlo. */
.gcc-retc__swatch { width: 0.7rem; height: 0.7rem; border-radius: 50%; flex: 0 0 auto; background: var(--sw, #666); }
.gcc-retc__swatch--arc {
width: 0.8rem; height: 0.42rem;
background: transparent; border-radius: 50% 50% 0 0 / 100% 100% 0 0;
border: 2px solid var(--sw, #666); border-bottom: 0;
}
/* Barra de HERRAMIENTA ACTIVA, arriba de la paleta: dice con qué hallazgo estás
marcando y con qué gesto, y aloja las acciones que dependen de esa elección
(360° solo aplica a un hallazgo extenso). Antes el hallazgo activo solo se
distinguía por el anillo de su píldora, que con 25 píldoras hay que ir a buscar. */
.gcc-retc__toolbar {
display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem;
padding: 0.45rem 0.5rem 0.45rem 0.7rem;
margin-bottom: 0.6rem;
border-radius: var(--gcc-chip-radius);
background: var(--gcc-chip-fill);
}
.gcc-retc__toolbar-label { flex: 1 1 auto; min-width: 7rem; display: flex; align-items: baseline; gap: 0.45rem; }
.gcc-retc__toolbar-eyebrow {
font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--gcc-ink-soft); white-space: nowrap;
}
.gcc-retc__toolbar-name { font-size: 0.9rem; font-weight: 700; color: var(--gcc-ink); }
.gcc-retc__toolbar-gesture { font-size: 0.78rem; color: var(--gcc-ink-soft); }
.gcc-retc__toolbar-actions { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 0.3rem; }
/* Dentro de la barra los botones van sobre el gris, así que llevan superficie
propia para separarse del fondo. */
.gcc-retc__toolbar .gcc-retc__tool {
border-style: solid; background: var(--gcc-surface);
}
.gcc-retc__tools { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.5rem; }
.gcc-retc__tool {
padding: 0.3rem 0.7rem;
font-size: 0.84rem; font-weight: 600;
border-radius: 0.4rem; cursor: pointer;
border: 1px dashed var(--gcc-line); background: transparent; color: var(--gcc-ink-soft);
}
.gcc-retc__tool:hover:not(:disabled) { border-style: solid; color: var(--gcc-ink); }
.gcc-retc__tool:disabled { opacity: 0.45; cursor: not-allowed; }
.gcc-retc__normal { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.gcc-retc__normal-label { margin-right: 0.15rem; }
.gcc-retc__nchip {
display: inline-flex; align-items: center;
padding: 0.3rem 0.65rem;
font-size: 0.84rem; font-weight: 600; line-height: 1.2;
border-radius: 0.4rem; cursor: pointer;
border: 1px dashed var(--gcc-line); background: transparent; color: var(--gcc-ink-soft);
}
.gcc-retc__nchip.active {
border-style: solid; border-color: #1E9E5A; color: #1E9E5A;
background: color-mix(in srgb, #1E9E5A 10%, var(--gcc-surface));
}
.gcc-retc__nchip:disabled { cursor: default; }
.gcc-retc__marks { display: flex; flex-direction: column; gap: 0.35rem; }
/* Acordeón de la marca: fila + detalle en un solo bloque. El reposo usa el MISMO
gris que las píldoras de la barra de herramientas (`--gcc-chip-fill`), para que
la lista se lea como parte del mismo juego de controles y no como otra cosa. */
.gcc-retc__item {
border-radius: var(--gcc-chip-radius);
background: var(--gcc-chip-fill);
transition: background 0.15s ease, box-shadow 0.15s ease;
}
.gcc-retc__item:hover { background: color-mix(in srgb, var(--gcc-ink) 8%, var(--gcc-chip-fill)); }
/* Seleccionada: tinte de caoba + anillo, no caoba a fondo completo. El punto de
color de la lesión es DATO clínico y sobre un relleno oscuro cambia de lectura;
además el bloque contiene un input de texto que habría que invertir. El anillo
destaca igual y deja los dos legibles. */
.gcc-retc__item.active {
background: color-mix(in srgb, var(--gcc-accent, var(--gcc-ink)) 10%, var(--gcc-surface));
box-shadow: 0 0 0 2px var(--gcc-accent, var(--gcc-ink-soft));
}
.gcc-retc__mark {
display: flex; align-items: center; gap: 0.5rem;
/* Era ~1.9rem de alto y se veían delgadas frente a las píldoras de 2.75rem. */
min-height: 2.5rem;
padding: 0.45rem 0.6rem;
cursor: pointer;
background: transparent; border: 0;
}
.gcc-retc__item.active > .gcc-retc__mark { border-bottom: 1px solid color-mix(in srgb, var(--gcc-accent, var(--gcc-ink)) 22%, transparent); }
.gcc-retc__item.active:not(:has(.gcc-retc__detail)) > .gcc-retc__mark { border-bottom: 0; }
.gcc-retc__dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; flex: 0 0 auto; }
.gcc-retc__mark-text { flex: 1 1 auto; color: var(--gcc-ink); font-size: 0.9rem; line-height: 1.35; }
.gcc-retc__del {
flex: 0 0 auto; width: 1.7rem; height: 1.7rem;
display: inline-flex; align-items: center; justify-content: center;
border: 0; background: transparent; color: var(--gcc-ink-soft);
border-radius: 0.35rem; cursor: pointer;
}
.gcc-retc__del:hover { background: var(--gcc-surface); color: var(--gcc-ink); }
.gcc-retc__empty { font-size: 0.85rem; line-height: 1.45; }
.gcc-retmap__legend { font-size: 0.78rem; }
/* Cartas dentro de la nota / documento: no interactivas, solo lectura. */
.gcc-retdoc svg { pointer-events: none; }
@media (max-width: 620px) {
.gcc-retc__chart { max-width: none; }
}
/* ===== Reorganización por secciones (retina Y segmento anterior) ========
La COLUMNA de la carta agrupa el dibujo con su lectura (lista de marcas):
lo que se marca se lee justo debajo del mapa. La paleta de hallazgos se
enmarca como sección propia, y "Explorado sin alteraciones" es otro bloque
independiente debajo — misma gramática visual que la card de CA. */
.gcc-retc__chartcol {
flex: 1 1 300px; max-width: 420px; min-width: 240px;
display: flex; flex-direction: column; gap: 0.45rem;
}
.gcc-retc__chartcol .gcc-retc__chart { flex: none; max-width: none; min-width: 0; }
.gcc-retc--big .gcc-retc__chartcol { max-width: 640px; flex: 1 1 460px; }
/* Paleta de hallazgos SIN caja propia. Tenía borde, fondo y radio, y al lado de la
carta —que también va enmarcada— la sección se leía como una cuadrícula de marcos
anidados: el ojo cuenta bordes antes de leer los nombres. Las lesiones ya son
píldoras con su propio contorno, así que el panel no necesita otro alrededor; lo
que agrupa es el espacio y el encabezado de cada grupo. */
.gcc-retc__side {
padding: 0;
border: 0;
background: transparent;
}
/* "Explorado sin alteraciones" fuera de la columna (nota firmada): también plano. */
.gcc-retc__normal {
padding: 0.55rem 0 0.6rem;
border: 0;
background: transparent;
}
/* Dentro de la columna derecha (que ya es una card), "sin alteraciones" y
la cámara anterior NO llevan caja propia: separador fino arriba — la
separación es una línea, no otra caja dentro de la caja. */
.gcc-retc__side .gcc-retc__normal,
.gcc-retc__side .gcc-asc__ca {
border: 0; border-radius: 0; background: transparent;
padding: 0.6rem 0 0;
margin-top: 0.55rem;
border-top: 1px solid var(--gcc-line);
}
/* En la columna angosta las filas de CA se apilan: label eyebrow arriba,
píldoras abajo (una fila label+6 píldoras no cabe en ~260px). */
.gcc-retc__side .gcc-asc__ca-row { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
.gcc-retc__side .gcc-asc__ca-row .gcc-asc__ca-label { min-width: 0; }
.gcc-retc__side .gcc-asc__ca-row--mm { flex-direction: row; align-items: center; gap: 1rem; }
/* La lista de hallazgos a lo ancho del componente respira respecto a la
fila carta+paleta de arriba. */
.gcc-retc__main + .gcc-retc__marks { margin-top: 0.55rem; }
.gcc-retc__normal-label {
flex: 0 0 100%;
margin: 0 0 0.15rem;
font-size: 0.74rem; font-weight: 700; line-height: 1.2;
text-transform: uppercase; letter-spacing: 0.07em;
color: var(--gcc-ink-soft);
}
/* ===== Mapa de segmento anterior (anterior-map) ========================
Reusa todo el chasis .gcc-retc (barra, carta, paleta, chips, lista de
marcas). Aquí solo vive lo propio: el bloque de cámara anterior (SUN),
las píldoras de graduación y el editor de parámetros AAO de una marca
(dimensiones en mm, profundidad estromal con su vista en corte). */
.gcc-asc__ca {
display: flex; flex-direction: column; gap: 0.45rem;
padding: 0.6rem 0.7rem 0.65rem;
border: 1px solid var(--gcc-line); border-radius: 0.55rem;
background: var(--gcc-surface);
}
.gcc-asc__ca-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; }
/* Label de campo: eyebrow discreto (misma jerarquía que los títulos de grupo
de la paleta). Los BOTONES van en tinta; el gris es solo para etiquetas. */
.gcc-asc__ca-label {
flex: 0 0 auto; min-width: 8rem;
font-size: 0.74rem; font-weight: 700; line-height: 1.2;
text-transform: uppercase; letter-spacing: 0.07em;
color: var(--gcc-ink-soft);
}
.gcc-asc__pills { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; }
/* Mismo lenguaje que los botones de hallazgo de la carta de retina
(.gcc-retc__les): superficie + borde línea + TINTA, activo en recess. */
/* Píldoras de VALOR (células SUN, flare, Shaffer, pigmento, técnica). Mismo
relleno de control que las lesiones, pero al elegirlas se rellenan de caoba en
lugar de llevar anillo — y es deliberado: una lesión es una HERRAMIENTA que estás
por usar (el anillo dice "armada"), mientras que éstas son un VALOR ya asentado
(el relleno dice "esto quedó registrado"). Además no contienen ni un punto de
color clínico ni un input, así que el relleno oscuro no estorba. */
.gcc-asc__pill {
min-height: 2rem;
padding: 0.34rem 0.7rem;
font-size: 0.86rem; font-weight: 600; line-height: 1.2;
border-radius: var(--gcc-chip-radius); cursor: pointer;
border: 0; background: var(--gcc-chip-fill); color: var(--gcc-ink);
transition: background 0.15s ease, color 0.15s ease;
}
.gcc-asc__pill:hover { background: color-mix(in srgb, var(--gcc-ink) 8%, var(--gcc-chip-fill)); }
.gcc-asc__pill:hover:not(:disabled) { border-color: var(--gcc-ink-soft); }
.gcc-asc__pill.active { background: var(--gcc-accent, var(--gcc-ink)); color: #fff; }
.gcc-asc__pill:disabled { opacity: 0.55; cursor: default; }
.gcc-asc__ca-row--mm { gap: 1.25rem; }
.gcc-asc__mmfield { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; }
.gcc-asc__mmfield .gcc-asc__ca-label { min-width: 0; }
.gcc-asc__mm {
width: 5.5rem;
padding: 0.34rem 0.5rem;
font-size: 0.9rem;
border: 0; border-radius: 0.45rem;
background: var(--gcc-chip-fill); color: var(--gcc-ink);
}
.gcc-asc__mm:focus { outline: none; border-color: var(--gcc-ink); }
.gcc-asc__dims-x { color: var(--gcc-ink-soft); font-size: 0.9rem; }
.gcc-asc__dims-unit { color: var(--gcc-ink-soft); font-size: 0.78rem; font-weight: 600; }
/* Hallazgos como ACORDEONES sutiles: cada ítem es una card fina (1px de
línea, superficie, radio) — sin filos ni bordes laterales de color. El
caret dice "esto se expande"; abierto, el cuerpo se separa del encabezado
con un hairline y el único acento es el caret en caoba. */
.gcc-asc .gcc-retc__marks { gap: 0.4rem; }
.gcc-asc__item {
border: 0;
border-radius: var(--gcc-chip-radius);
background: var(--gcc-chip-fill);
overflow: hidden;
transition: background 0.15s ease, box-shadow 0.15s ease;
}
.gcc-asc__item:hover { background: color-mix(in srgb, var(--gcc-ink) 8%, var(--gcc-chip-fill)); }
/* Abierto: tinte de caoba + anillo, igual que la lista de retina. El tinte es MÁS
CLARO que el reposo a propósito: es lo que deja ver los inputs grises que
aparecen dentro (dimensiones, profundidad, detalle). Si el abierto fuera más
oscuro, los controles se fundirían con su propio contenedor. */
.gcc-asc__item.open {
background: color-mix(in srgb, var(--gcc-accent, var(--gcc-ink)) 10%, var(--gcc-surface));
box-shadow: 0 0 0 2px var(--gcc-accent, var(--gcc-ink-soft));
}
.gcc-asc__item > .gcc-retc__mark,
.gcc-asc__item > .gcc-retc__mark.active {
border: 0; border-radius: 0; background: transparent;
padding: 0.5rem 0.65rem;
}
.gcc-asc__item > .gcc-retc__mark:hover { background: var(--gcc-recess); }
.gcc-asc__item.open > .gcc-retc__mark { border-bottom: 1px solid color-mix(in srgb, var(--gcc-accent, var(--gcc-ink)) 22%, transparent); }
.gcc-asc__caret {
flex: 0 0 auto; width: 1.5rem; height: 1.5rem;
display: inline-flex; align-items: center; justify-content: center;
color: var(--gcc-ink-soft);
transition: transform 0.15s ease;
}
.gcc-asc__item.open .gcc-asc__caret { transform: rotate(180deg); color: var(--gcc-accent, #8C4A38); }
/* Cuerpo del editor: vive dentro de la card del hallazgo, sin marco propio. */
.gcc-asc__edit {
display: flex; flex-direction: column; gap: 0.55rem;
margin: 0;
padding: 0.6rem 0.7rem 0.65rem;
border: 0;
background: transparent;
border-radius: 0;
}
.gcc-asc__field { display: flex; flex-direction: column; gap: 0.3rem; }
.gcc-asc__field-label {
font-size: 0.74rem; font-weight: 700; line-height: 1.2;
text-transform: uppercase; letter-spacing: 0.07em;
color: var(--gcc-ink-soft);
}
.gcc-asc__dims { display: flex; align-items: center; gap: 0.4rem; }
.gcc-asc__note {
width: 100%;
padding: 0.34rem 0.5rem;
font-size: 0.9rem;
border: 0; border-radius: 0.45rem;
background: var(--gcc-chip-fill); color: var(--gcc-ink);
}
.gcc-asc__note:focus { outline: none; border-color: var(--gcc-ink); }
.gcc-asc__cut { max-width: 260px; margin-top: 0.15rem; }
.gcc-asc__cut-svg { width: 100%; height: auto; display: block; }
/* El atajo "Segmento anterior sano" hereda el chip de normalidad. */
.gcc-asc__allok { border-style: solid; }
/* Quitar hallazgo: acción explícita del editor de la marca seleccionada
(la ✕ del renglón sigue existiendo; esta es imposible de no ver). */
.gcc-asc__edit-row--actions {
display: flex; justify-content: flex-end;
padding-top: 0.45rem; border-top: 1px solid var(--gcc-line);
}
.gcc-asc__delbtn {
display: inline-flex; align-items: center;
padding: 0.3rem 0.7rem;
font-size: 0.84rem; font-weight: 600; line-height: 1.2;
border-radius: 0.4rem; cursor: pointer;
border: 1px solid color-mix(in srgb, #D02B2B 45%, var(--gcc-line));
background: var(--gcc-surface); color: #D02B2B;
}
.gcc-asc__delbtn:hover {
background: color-mix(in srgb, #D02B2B 10%, var(--gcc-surface));
border-color: #D02B2B;
}
/* La ✕ por renglón con área táctil digna de dedo (solo en este mapa). */
.gcc-asc .gcc-retc__del { width: 1.8rem; height: 1.8rem; }
/* ===== Mapa de gonioscopía (gonio-map) ================================
Reusa el chasis .gcc-retc y la gramática de píldoras / acordeones del
mapa de segmento anterior (.gcc-asc__*). Aquí solo vive lo propio: la
lista de los 4 cuadrantes (el dato primario del componente, a lo ancho)
y el bloque de técnica y complementarios por ojo. */
.gcc-gon .gcc-retc__del { width: 1.8rem; height: 1.8rem; }
.gcc-gon__quads { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.55rem; }
/* Los cuadrantes ENCABEZAN la columna derecha: son el dato primario de la
gonioscopía, así que van pegados a la carta y sin margen arriba. Lo que sigue
—el modo de dibujo y la paleta de hallazgos— se separa con el mismo hairline
que ya usan "sin alteraciones" y la cámara anterior, para que se lea como otro
apartado de la misma card y no como otra caja. */
.gcc-retc__side .gcc-gon__quads { margin-top: 0; }
/* Al mudarse los cuadrantes a la derecha, esa columna pasa a llevar el control
principal: se le da algo más de ancho (los renglones traen "Malla trabecular ·
Shaffer 2 · pigmento 2+" y a 220px se partían en tres líneas). Solo en
gonioscopía — retina y segmento anterior siguen con su reparto. */
.gcc-gon .gcc-retc__side { flex: 1 1 300px; min-width: 258px; }
/* El anillo es zona de graduación: el cursor lo anuncia. */
.gcc-gon__q { cursor: pointer; }
.gcc-retc__chart.is-drawing .gcc-gon__q { cursor: crosshair; }
.gcc-gon__q:hover { fill-opacity: 0.4; }
.gcc-retc__chart.is-drawing .gcc-gon__q:hover { fill-opacity: inherit; }
/* Cuadrante sin graduar: el renglón se lee apagado hasta que tiene dato. */
.gcc-gon__quad .gcc-retc__mark-text.gcc-muted { font-style: italic; }
/* Técnica y complementarios: misma card que la cámara anterior del mapa
de segmento anterior (dentro de la columna derecha pierde el marco y se
separa con un hairline — regla heredada de .gcc-retc__side). */
.gcc-gon__exam {
display: flex; flex-direction: column; gap: 0.45rem;
padding: 0.6rem 0.7rem 0.65rem;
border: 1px solid var(--gcc-line); border-radius: 0.55rem;
background: var(--gcc-surface);
}
.gcc-retc__side .gcc-gon__exam {
border: 0; border-radius: 0; background: transparent;
padding: 0.6rem 0 0;
margin-top: 0.55rem;
border-top: 1px solid var(--gcc-line);
}
.gcc-retc__side .gcc-gon__exam .gcc-asc__ca-row { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
.gcc-retc__side .gcc-gon__exam .gcc-asc__ca-label { min-width: 0; }
/* Acciones del cuadrante: "aplicar a los 4" a la izquierda, limpiar a la
derecha — la primaria del bloque no debe quedar arrinconada. */
.gcc-gon__quad .gcc-asc__edit-row--actions { justify-content: space-between; gap: 0.5rem; }
/* Avisos de incoherencia: ÁMBAR, nunca rojo. No es un error del sistema ni
bloquea nada — señala que dos capturas del mismo cuadrante no cuadran y
deja la decisión al médico. */
.gcc-gon__warn { flex: 0 0 auto; display: inline-flex; align-items: center; color: #B4690E; }
.gcc-gon__warnbox {
display: flex; flex-direction: column; gap: 0.2rem;
margin: 0 0.7rem 0.6rem;
padding: 0.45rem 0.6rem;
font-size: 0.82rem; line-height: 1.35;
border: 1px solid color-mix(in srgb, #B4690E 38%, var(--gcc-line));
border-radius: 0.45rem;
background: color-mix(in srgb, #B4690E 8%, var(--gcc-surface));
color: var(--gcc-ink);
}
/* Dentro del editor del cuadrante ya hay padding del contenedor. */
.gcc-asc__edit > .gcc-gon__warnbox { margin: 0; }
.gcc-gon__warnbox-title {
display: inline-flex; align-items: center;
font-size: 0.72rem; font-weight: 700; line-height: 1.2;
text-transform: uppercase; letter-spacing: 0.07em;
color: #B4690E;
}
/* ===== Panel lateral de antecedentes ================================== */
.gcc-history {
position: absolute; top: 0; right: 0; bottom: 0;
width: 340px; max-width: 86%;
display: flex; flex-direction: column; z-index: 5;
background: var(--gcc-surface);
border-left: 1px solid var(--gcc-line);
box-shadow: -12px 0 32px -16px rgba(21, 23, 29, 0.3);
transform: translateX(100%); opacity: 0; visibility: hidden;
transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease, visibility 0.24s ease;
}
.gcc-history--shown { transform: translateX(0); opacity: 1; visibility: visible; }
.gcc-history__head { flex: 0 0 auto; }
.gcc-history__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.gcc-history__group { padding: 0.55rem 0; border-bottom: 1px solid var(--gcc-line); }
.gcc-history__group:last-child { border-bottom: 0; }
.gcc-history__list { list-style: none; margin: 0; padding: 0 0 0 2rem; }
/* Estudios con miniatura (ej. Pentacam) */
.gcc-study {
display: flex; gap: 0.75rem; align-items: flex-start;
padding: 0.65rem 0; border-bottom: 1px solid var(--gcc-line);
text-decoration: none; color: inherit;
}
.gcc-study:last-of-type { border-bottom: 0; }
.gcc-study__thumb {
width: 72px; height: 72px; flex-shrink: 0;
object-fit: cover; border-radius: 0.5rem;
border: 1px solid var(--gcc-line); background: var(--gcc-recess);
transition: transform 0.14s ease;
}
.gcc-study:hover .gcc-study__thumb { transform: scale(1.03); }
.gcc-study__title { line-height: 1.25; }
.gcc-study__desc { line-height: 1.35; }
.gcc-history__item { padding: 0.12rem 0; position: relative; }
.gcc-history__item::before { content: ""; position: absolute; left: -0.9rem; top: 0.62em; width: 4px; height: 4px; border-radius: 50%; background: var(--gcc-ink-soft); opacity: 0.5; }
.gcc-panel .gcc-panel-btn { background: var(--gcc-surface); border: 1px solid var(--gcc-line); color: var(--gcc-ink); font-weight: 500; }
.gcc-panel .gcc-panel-btn:hover { border-color: var(--gcc-ink-soft); }
.gcc-panel .gcc-panel-btn.active { background: var(--gcc-ink); border-color: var(--gcc-ink); color: #fff; }
/* En modo comparación se ocultan los botones del header (Antecedentes/Estudios/Atenciones).
!important porque .d-inline-flex de Bootstrap trae display !important. */
.gcc-panel.gcc-comparing .gcc-panel-btn { display: none !important; }
/* ===== Menú "más opciones" (3 puntitos) — solo móvil ==================== */
.gcc-header-actions { position: relative; }
.gcc-more-btn { display: none; } /* oculto en desktop (se ven los 3 botones) */
.gcc-more-menu {
position: absolute; top: calc(100% + 6px); right: 0; z-index: 30;
min-width: 190px; padding: 0.35rem;
background: var(--gcc-surface); border: 1px solid var(--gcc-line);
border-radius: 0.65rem; box-shadow: 0 18px 44px -16px rgba(21, 23, 29, 0.42);
display: none;
}
.gcc-more-menu--show { display: block; }
.gcc-panel .gcc-more-item {
display: flex; align-items: center; gap: 0.6rem; width: 100%;
appearance: none; -webkit-appearance: none; border: 0; background: transparent;
color: var(--gcc-ink); text-align: left;
padding: 0.55rem 0.65rem; border-radius: 0.5rem;
font-size: 0.9rem; font-weight: 500; cursor: pointer;
transition: background-color 0.12s ease;
}
.gcc-panel .gcc-more-item:hover { background: var(--gcc-recess); }
.gcc-panel .gcc-more-item.active { background: var(--gcc-ink); color: #fff; }
.gcc-panel .gcc-more-item.active i { color: #fff; }
/* En modo comparación, fuera también el kebab y su menú. */
.gcc-panel.gcc-comparing .gcc-more-btn { display: none !important; }
.gcc-panel.gcc-comparing .gcc-more-menu { display: none !important; }
/* Móvil: oculta los 3 botones sueltos y muestra el kebab que los agrupa. */
@media (max-width: 575.98px) {
.gcc-panel .gcc-panel-btn { display: none !important; }
.gcc-panel .gcc-more-btn { display: inline-flex !important; }
}
/* ===== Nota en vivo (panel derecho) =================================== */
/* Chevron de la nota: solo visible/funcional en responsive (acordeón) */
.gcc-note-chevron { display: none; transition: transform 0.2s ease; }
.gcc-note-sec { padding: 0.65rem 0; border-bottom: 1px solid var(--gcc-line); }
.gcc-note-sec:last-child { border-bottom: 0; }
/* Título de sección en la "Nota en construcción": mismo ordinal y mismo caoba
que la card del centro, para que se lean como la misma sección a dos vistas.
El número lo escribe renderNote (no un contador CSS): el orden de esta columna
y el del centro pueden divergir — ver stageOrder() en clinical-chat.js. */
/* Es un
: atajo a esa sección en el formulario (gotoSection). Se resetea
el chrome de botón para que siga leyéndose como el rótulo que era; la pista de
que es pulsable la da el subrayado en hover, no una caja. */
.gcc-panel .gcc-note-sec__title {
appearance: none; -webkit-appearance: none;
display: flex;
align-items: baseline;
gap: 0.4rem;
width: 100%;
border: 0;
background: transparent;
padding: 0;
margin: 0 0 0.4rem;
text-align: left;
font: inherit;
color: var(--gcc-caoba, #8C4A38);
cursor: pointer;
}
.gcc-panel .gcc-note-sec__title:hover .gcc-note-sec__label { text-decoration: underline; }
.gcc-panel .gcc-note-sec__title:focus-visible {
outline: 2px solid color-mix(in srgb, var(--gcc-caoba, #8C4A38) 60%, transparent);
outline-offset: 2px;
border-radius: 0.3rem;
}
/* Nota finalizada: el título se pinta como (no hay a dónde ir). */
.gcc-panel div.gcc-note-sec__title { cursor: default; }
.gcc-note-sec__num {
flex: 0 0 auto;
font-family: var(--ig-font-mono, 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace);
font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: 0;
opacity: 0.85;
}
.gcc-note-sec__label { min-width: 0; }
/* Sección aún sin capturar: el par ordinal+título se apaga a tinta suave, así se
ve de un vistazo qué falta sin perder la numeración. */
.gcc-note-sec--empty .gcc-note-sec__title { color: var(--gcc-ink-soft); opacity: 0.75; }
.gcc-note-sec--empty .gcc-note-sec__body { opacity: 0.7; }
.gcc-note-row { padding: 0.18rem 0; }
.gcc-note-row__label { display: block; font-size: 0.78rem; }
.gcc-note-row__vals { display: flex; flex-wrap: wrap; gap: 0.15rem 1rem; }
.gcc-note-eye { font-size: 0.85rem; color: var(--gcc-ink); }
.gcc-note-eye b { margin-right: 0.25rem; font-size: 0.7rem; color: var(--gcc-ink-soft); }
.gcc-note-sec--pulse {
animation: gccNotePulse 0.9s ease-out 1;
border-radius: 0.5rem; margin: 0 -0.6rem; padding-left: 0.6rem; padding-right: 0.6rem;
}
@keyframes gccNotePulse { 0% { background: rgba(6, 109, 240, 0.12); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .gcc-note-sec--pulse { animation: none; } }
/* ===== Fin: revisión de receta + acciones ============================= */
.gcc-finish { max-width: 820px; margin: 0 auto; }
/* En el resumen final se oculta la columna de la nota → ancho completo. */
.gcc-panel.gcc-finished .gcc-note-col { display: none; }
/* Bloque "Medicamentos (Rx)": recuadro propio para distinguirlo del resto del
tratamiento (indicaciones, estudios, lentes). */
.gcc-receta__sec--meds {
background: var(--gcc-recess);
border: 1px solid var(--gcc-line);
border-radius: 0.6rem;
padding: 0.75rem 0.95rem;
margin: 0.5rem 0;
}
.gcc-receta__sec--meds + .gcc-receta__sec { border-top: 0; }
.gcc-receta {
background: var(--gcc-surface);
border: 1px solid var(--gcc-line);
border-radius: 0.75rem;
padding: 1.5rem 1.6rem;
animation: gccRecetaIn 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes gccRecetaIn { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } }
/* (El encabezado ℞ + Paciente del resumen se retiró: ahora el resumen usa el
membrete real — ver "Resumen/nota firmada como DOCUMENTO" más abajo. Las
clases __sec / __list / __sign siguen vivas: las usa la columna de recetas
y órdenes, y el bloque de firma.) */
.gcc-receta__sec { padding: 0.7rem 0; border-bottom: 1px solid var(--gcc-line); }
.gcc-receta__sec:last-child { border-bottom: 0; }
.gcc-receta__sec-title { margin-bottom: 0.35rem; }
/* Botón de imprimir por sección (receta / órdenes) — icono + texto */
.gcc-receta__print {
flex: 0 0 auto;
display: inline-flex; align-items: center; gap: 0.3rem;
padding: 0.3rem 0.6rem;
border: 1px solid var(--gcc-line); background: var(--gcc-surface);
color: var(--gcc-ink-soft); border-radius: 0.45rem; cursor: pointer;
font-size: 0.72rem; font-weight: 600; line-height: 1;
letter-spacing: normal; text-transform: none;
transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.gcc-panel .gcc-receta__print:hover { border-color: #1B84D6; color: #1B84D6; background: var(--gcc-recess); }
.gcc-receta__list { list-style: none; margin: 0; padding: 0; }
.gcc-receta__item { padding: 0.12rem 0; color: var(--gcc-ink); }
/* ===== Resumen/nota firmada como DOCUMENTO ==============================
Membrete real (logo del consultorio + médico con cédula), franja de paciente
y cuerpo en DOS columnas por bloque clínico. Sustituye la lista plana donde
toda sección pesaba igual. Mismo layout para revisar y para la nota firmada. */
.gcc-receta--doc { padding: 1.75rem 1.9rem 1.5rem; }
.gcc-doc__head {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 1.5rem; padding-bottom: 0.9rem; border-bottom: 2px solid var(--gcc-ink);
}
.gcc-doc__brand { display: flex; align-items: center; gap: 0.9rem; min-width: 0; }
.gcc-doc__logo { max-height: 54px; max-width: 180px; object-fit: contain; }
.gcc-doc__rx {
width: 44px; height: 44px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-size: 1.55rem; font-weight: 700; color: var(--gcc-ink);
border: 1px solid var(--gcc-line); border-radius: 0.6rem; background: var(--gcc-recess);
}
.gcc-doc__clinic { font-size: 1.05rem; font-weight: 600; color: var(--gcc-ink); line-height: 1.25; }
.gcc-doc__clinicmeta { margin-top: 0.12rem; }
.gcc-doc__ident { text-align: right; flex-shrink: 0; }
.gcc-doc__doctitle {
font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em;
color: var(--gcc-ink); margin-bottom: 0.3rem;
}
.gcc-doc__doctor { color: var(--gcc-ink); }
/* Franja de identificación: se reparte sola según cuántos datos haya. */
.gcc-doc__patient {
display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 0.7rem 1.5rem; padding: 0.85rem 0; border-bottom: 1px solid var(--gcc-line);
}
.gcc-doc__field { min-width: 0; } /* un dato largo no rompe el grid */
.gcc-doc__flabel { margin-bottom: 0.1rem; }
.gcc-doc__fvalue { color: var(--gcc-ink); }
.gcc-doc__body { padding-top: 1.1rem; }
/* Cada bloque ocupa el ancho completo; sus secciones se reparten en DOS columnas
con multicolumna (el navegador balancea la altura, así que la exploración —que
en oftalmología es casi toda la nota— no deja media hoja vacía a la derecha).
Grid no sirve aquí: alinearía filas y dejaría huecos entre secciones de
distinta altura. */
.gcc-doc__cols--2 { columns: 2; column-gap: 2rem; column-rule: 1px solid var(--gcc-line); }
.gcc-doc__cols--2 > * { break-inside: avoid; }
.gcc-doc__block { margin-bottom: 1.5rem; }
.gcc-doc__block:last-child { margin-bottom: 0; }
.gcc-doc__blocktitle {
color: var(--gcc-ink); margin: 0 0 0.55rem;
padding-bottom: 0.3rem; border-bottom: 1px solid var(--gcc-line);
}
/* Un solo dato corto → etiqueta y valor en la misma línea (densidad de documento). */
.gcc-doc__row { display: flex; gap: 0.75rem; align-items: baseline; padding: 0.22rem 0; }
.gcc-doc__rowlabel { flex: 0 0 7.25rem; }
.gcc-doc__rowvals { color: var(--gcc-ink); }
/* Varias líneas o tabla → apilado. */
.gcc-doc__sec { padding: 0.3rem 0 0.55rem; }
.gcc-doc__seclabel { margin-bottom: 0.28rem; }
.gcc-doc__list { list-style: none; margin: 0; padding: 0; }
.gcc-doc__list li { padding: 0.1rem 0; color: var(--gcc-ink); }
.gcc-doc__obs { margin-top: 0.3rem; }
/* Mediciones/hallazgos por ojo: micro-tabla OD | OI en vez de un renglón corrido. */
.gcc-doc__eyes { width: 100%; border-collapse: collapse; }
.gcc-doc__eyes th, .gcc-doc__eyes td {
text-align: left; padding: 0.2rem 0.5rem 0.2rem 0; border-bottom: 1px solid var(--gcc-line);
vertical-align: top;
}
.gcc-doc__eyes thead th { padding-bottom: 0.15rem; }
.gcc-doc__eyes tbody th { font-weight: 500; color: var(--gcc-ink-soft); width: 38%; }
.gcc-doc__eyes tbody td { color: var(--gcc-ink); }
.gcc-doc__eyes tbody tr:last-child th, .gcc-doc__eyes tbody tr:last-child td { border-bottom: 0; }
/* Diagnóstico: código CIE-10 como badge + ojo. */
.gcc-doc__dx { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; padding: 0.18rem 0; }
.gcc-doc__bullet { width: 5px; height: 5px; border-radius: 50%; background: var(--gcc-ink); flex-shrink: 0; }
.gcc-doc__code {
font-size: 0.68rem; font-weight: 600; padding: 0.08rem 0.35rem;
border: 1px solid var(--gcc-line); border-radius: 0.3rem;
color: var(--gcc-ink-soft); background: var(--gcc-recess);
}
/* Estadio del diagnóstico (escala AAO): parte del dato clínico, no metadato —
por eso va en tinta plena y no atenuado como el código. */
.gcc-doc__stage { color: var(--gcc-ink); font-weight: 500; }
.gcc-doc__stage::before { content: "·"; margin-right: 0.4rem; color: var(--gcc-ink-soft); }
/* Observación libre del diagnóstico: en tono secundario y con guion largo, para
que se lea como aclaración y no se confunda con el estadio. */
.gcc-doc__dxnote { color: var(--gcc-ink-soft); }
.gcc-doc__dxnote::before { content: "—"; margin-right: 0.4rem; }
.gcc-doc__eye { color: #1B84D6; }
/* SOAP (síntesis narrativa): a ancho completo y en UNA columna — se lee mejor. */
.gcc-doc__wide { border-top: 1px solid var(--gcc-line); margin-top: 0.9rem; padding-top: 0.9rem; }
.gcc-doc__empty { padding: 1.5rem 0; }
@media (max-width: 780px) {
.gcc-doc__cols--2 { columns: 1; column-rule: 0; }
.gcc-doc__head { flex-direction: column; }
.gcc-doc__ident { text-align: left; }
}
.gcc-receta__sign { margin: 1.6rem 0 0.25rem auto; width: 220px; }
.gcc-receta__sign-line { border-top: 1px solid var(--gcc-ink-soft); margin-bottom: 0.3rem; }
.gcc-finish__actions { margin-top: 1.5rem; animation: gccIn 0.4s ease-out 0.28s both; }
.gcc-finish__grid { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.gcc-finish__action { display: inline-flex; align-items: center; gap: 0.4rem; }
/* Toast de demo */
.gcc-toast {
position: absolute; left: 50%; bottom: 1.25rem; transform: translate(-50%, 12px);
background: var(--gcc-ink); color: #fff;
padding: 0.5rem 1rem; border-radius: 0.5rem; font-size: 0.85rem; font-weight: 600;
opacity: 0; z-index: 20;
box-shadow: 0 8px 24px -10px rgba(21, 23, 29, 0.55);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.gcc-toast--show { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
.gcc-receta, .gcc-finish__actions { animation: none; }
}
/* ===== Responsive ===================================================== */
@media (max-width: 860px) {
.gcc-overlay { padding: 0; }
.gcc-panel { max-width: 100%; max-height: 100%; height: 100%; border-radius: 0; }
.gcc-body { flex-direction: column; }
.gcc-stage-col { flex: 1 1 auto; min-height: 0; }
.gcc-history { width: 320px; }
/* Nota → acordeón: solo el header ocupa espacio; el cuerpo se despliega al tocar */
.gcc-note-col { flex: 0 0 auto; border-start: 0; border-top: 1px solid var(--gcc-line); }
.gcc-note-head { cursor: pointer; }
.gcc-note-chevron { display: inline-block; }
.gcc-note { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
/* svh, no vh: en iOS `vh` es el viewport GRANDE (chrome oculto), así que el
acordeón abría más alto de lo que realmente se ve. */
.gcc-note-col--open .gcc-note { max-height: 42vh; max-height: 42svh; overflow-y: auto; }
.gcc-note-col--open .gcc-note-chevron { transform: rotate(180deg); }
}
/* Táctil: sin transición de max-height. `max-height` es propiedad de LAYOUT —
animarla son 250ms de reflow del panel entero, y como cambia el clientHeight
de .gcc-stage, el navegador va clampeando su scrollTop frame a frame: en un
iPad se ve como si todo brincara al abrir/cerrar la nota en construcción.
Con ratón el reflow es barato y la transición se conserva. */
@media (pointer: coarse) {
.gcc-note { transition: none; }
}
body.gcc-open { overflow: hidden; }
/* ===== Lista de atenciones previas (panel lateral) ===================== */
.gcc-panel .gcc-at-item {
display: flex; align-items: center; gap: 0.65rem; width: 100%;
text-align: left; background: var(--gcc-surface);
border: 1px solid var(--gcc-line); border-radius: 0.6rem;
padding: 0.6rem 0.7rem; margin-bottom: 0.5rem;
transition: border-color 0.12s ease, background-color 0.12s ease;
}
.gcc-panel .gcc-at-item:hover { border-color: var(--gcc-ink-soft); background: var(--gcc-recess); }
.gcc-at-item__info { display: flex; flex-direction: column; line-height: 1.25; }
/* ===== Modo comparación (capa sobre el cuerpo) ========================= */
.gcc-compare {
position: absolute; inset: 0; z-index: 8;
background: var(--gcc-bg);
display: flex; flex-direction: column;
animation: gccIn 0.2s ease-out both;
}
.gcc-cmp-bar {
flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
gap: 1rem; padding: 0.7rem 1.25rem; border-bottom: 1px solid var(--gcc-line);
}
.gcc-cmp-select { width: auto; min-width: 170px; }
.gcc-cmp-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 1rem 1.25rem 1.5rem; }
.gcc-cmp-badge { font-size: 0.62rem; font-weight: 700; color: #fff; background: #066DF0; border-radius: 999px; padding: 0.05rem 0.4rem; letter-spacing: 0; margin-left: 0.4rem; }
/* Dos documentos: construcción | pasada (un contenedor por columna) */
.gcc-cmp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }
.gcc-cmp-doc {
background: var(--gcc-surface); border: 1px solid var(--gcc-line);
border-radius: 0.75rem; padding: 0.9rem 1.1rem;
}
.gcc-cmp-doc__head { color: var(--gcc-ink-soft); padding-bottom: 0.6rem; margin-bottom: 0.3rem; border-bottom: 1px solid var(--gcc-line); }
.gcc-cmp-doc--cur .gcc-cmp-doc__head { color: var(--gcc-ink); }
.gcc-cmp-item { padding: 0.6rem 0; border-bottom: 1px solid var(--gcc-line); }
.gcc-cmp-item:last-child { border-bottom: 0; }
.gcc-cmp-item--changed {
background: rgba(6, 109, 240, 0.06);
border-radius: 0.45rem; margin: 0 -0.55rem; padding: 0.6rem 0.55rem;
}
.gcc-cmp-item__title { display: flex; align-items: center; color: var(--gcc-ink-soft); margin-bottom: 0.3rem; }
.gcc-cmp-line { font-size: 0.86rem; color: var(--gcc-ink); padding: 0.12rem 0; }
.gcc-cmp-line--empty { color: var(--gcc-ink-soft); font-style: italic; }
/* Animación: construcción se asienta (izq) y la pasada entra desde la derecha. */
@keyframes gccCmpLeft { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }
@keyframes gccCmpRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
.gcc-cmp-doc--cur { animation: gccCmpLeft 0.30s cubic-bezier(0.22, 1, 0.36, 1) both; }
.gcc-cmp-doc--past { animation: gccCmpRight 0.34s cubic-bezier(0.22, 1, 0.36, 1) 0.07s both; }
/* Tarjeta de tendencia (debajo de la comparación) + gráfica ApexCharts */
.gcc-trend {
background: var(--gcc-surface); border: 1px solid var(--gcc-line);
border-radius: 0.75rem; padding: 0.85rem 1.1rem; margin-top: 1.25rem;
}
.gcc-trend__head { margin-bottom: 0.5rem; }
.gcc-trend__select { width: auto; min-width: 190px; }
.gcc-trend__chart { width: 100%; min-height: 210px; }
.gcc-trend__empty { padding: 1.5rem 0; text-align: center; }
@media (prefers-reduced-motion: reduce) {
.gcc-cmp-doc--cur, .gcc-cmp-doc--past { animation: none; }
}
@media (max-width: 760px) {
.gcc-cmp-cols { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
.gcc-cmp-head, .gcc-cmp-cols { grid-template-columns: 1fr; }
.gcc-cmp-head__cell--cur { display: none; }
}
/* ===== Popover-rueda de valores (refracción) =========================== */
/* Vive en (fuera de .gcc-panel) → colores cálidos explícitos. */
.gcc-vp {
z-index: 1100;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background: #FAFBFD;
color: #15171D;
border: 1px solid #DCDFE7;
border-radius: 0.65rem;
box-shadow: 0 18px 44px -16px rgba(21, 23, 29, 0.45);
padding: 0.55rem 0.6rem 0.65rem;
min-width: 160px;
animation: gccVpIn 0.14s ease-out both;
}
@keyframes gccVpIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.gcc-vp__head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; padding: 0 0.15rem 0.5rem; border-bottom: 1px solid #DCDFE7; margin-bottom: 0.5rem; }
.gcc-vp__label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #5C6170; }
.gcc-vp__val { font-size: 1rem; font-weight: 700; color: #15171D; font-variant-numeric: tabular-nums; }
/* Signo como toggle segmentado unido (no dos botones sueltos estirados) */
.gcc-vp__sign {
display: flex; margin-bottom: 0.6rem;
border: 1px solid #DCDFE7; border-radius: 0.5rem; overflow: hidden;
}
.gcc-vp__signbtn {
flex: 1 1 0; padding: 0.42rem 0; border: 0;
background: #FAFBFD; color: #15171D;
font-weight: 700; font-size: 1.05rem; line-height: 1; cursor: pointer;
transition: background-color 0.1s ease, color 0.1s ease;
}
.gcc-vp__signbtn + .gcc-vp__signbtn { border-left: 1px solid #DCDFE7; }
.gcc-vp__signbtn:hover { background: #EBEDF2; }
.gcc-vp__signbtn.active { background: #066DF0; color: #fff; }
.gcc-vp__cols { display: flex; gap: 0.4rem; }
.gcc-vp__col {
max-height: 208px; overflow-y: auto;
display: flex; flex-direction: column; gap: 2px;
flex: 1 1 auto; min-width: 64px;
scrollbar-width: thin;
}
.gcc-vp__col--dec { flex: 0 0 auto; min-width: 56px; }
.gcc-vp__cell {
padding: 0.34rem 0.5rem; border: 0; background: transparent;
border-radius: 0.4rem; color: #15171D; font-size: 0.9rem;
font-variant-numeric: tabular-nums; text-align: center; white-space: nowrap;
transition: background-color 0.1s ease;
}
.gcc-vp__cell:hover { background: #EBEDF2; }
.gcc-vp__cell.active { background: #066DF0; color: #fff; font-weight: 700; }
/* ===== Modal de refracción (dos columnas OD | OI) ====================== */
/* Vive en : usa variables --bs-* (theme-aware) con fallbacks Piedra. */
.gcc-refmodal {
position: fixed; inset: 0; z-index: 1090;
display: flex; align-items: center; justify-content: center;
padding: 1.5rem;
background: rgba(15, 17, 23, 0.45);
animation: gccRfIn 0.15s ease-out both;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
@keyframes gccRfIn { from { opacity: 0; } to { opacity: 1; } }
.gcc-refmodal__dialog {
width: min(960px, 100%); max-height: 90vh;
display: flex; flex-direction: column;
background: var(--bs-card-bg, #FAFBFD);
color: var(--bs-body-color, #15171D);
border: 1px solid var(--bs-border-color, #DCDFE7);
border-radius: 0.9rem;
box-shadow: 0 30px 80px -24px rgba(15, 17, 23, 0.6);
overflow: hidden;
animation: gccRfDialogIn 0.16s ease-out both;
}
@keyframes gccRfDialogIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.gcc-refmodal__head {
flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
gap: 1rem; padding: 0.9rem 1.25rem;
}
.gcc-refmodal__title { font-size: 1.15rem; font-weight: 700; color: var(--bs-heading-color, #15171D); }
.gcc-refmodal__close {
border: 0; background: transparent; color: var(--bs-secondary-color, #5C6170);
width: 32px; height: 32px; border-radius: 0.5rem; cursor: pointer; line-height: 1;
display: inline-flex; align-items: center; justify-content: center;
transition: background-color 0.12s ease, color 0.12s ease;
}
.gcc-refmodal__close:hover { background: var(--bs-gray-200, #EBEDF2); color: var(--bs-body-color, #15171D); }
.gcc-refmodal__body { flex: 1 1 auto; overflow: auto; padding: 1.1rem 1.25rem; }
.gcc-refmodal__eyes { display: flex; align-items: stretch; gap: 0.5rem; }
.gcc-refmodal__eye {
flex: 1 1 0; min-width: 0;
border: 1px solid var(--bs-border-color, #DCDFE7); border-radius: 0.65rem;
padding: 0.6rem 0.7rem 0.75rem; background: var(--bs-body-bg, #FAFBFD);
}
.gcc-refmodal__eye--od { border-top: 3px solid var(--bs-primary, #066DF0); }
.gcc-refmodal__eye--oi { border-top: 3px solid var(--bs-info, #17a2b8); }
.gcc-refmodal__eyehd {
display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem;
padding-bottom: 0.5rem; margin-bottom: 0.5rem;
border-bottom: 1px solid var(--bs-border-color, #DCDFE7);
}
.gcc-refmodal__eyetag { font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--bs-secondary-color, #5C6170); }
.gcc-refmodal__eyeval { font-size: 1rem; font-weight: 700; color: var(--bs-primary, #066DF0); font-variant-numeric: tabular-nums; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gcc-refmodal__fields { display: flex; gap: 0.35rem; }
.gcc-rf-field { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.gcc-rf-field--av { flex: 1.25 1 0; }
/* Entrada libre por campo (teclear en lugar de buscar en la rueda/lista). */
.gcc-rf-free { margin-bottom: 0.45rem; text-align: center; flex-shrink: 0; }
.gcc-vp__free { padding: 0.4rem 0.6rem 0.15rem; }
.gcc-rf-field__label {
font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
color: var(--bs-secondary-color, #5C6170); text-align: center; margin-bottom: 0.35rem; white-space: nowrap;
}
.gcc-rf-sign {
display: flex; border: 1px solid var(--bs-border-color, #DCDFE7);
border-radius: 0.45rem; overflow: hidden; margin-bottom: 0.35rem;
}
.gcc-rf-sign__btn {
flex: 1 1 0; border: 0; background: transparent; padding: 0.24rem 0;
font-weight: 700; font-size: 1.05rem; line-height: 1; cursor: pointer; color: var(--bs-body-color, #15171D);
}
.gcc-rf-sign__btn + .gcc-rf-sign__btn { border-left: 1px solid var(--bs-border-color, #DCDFE7); }
.gcc-rf-sign__btn:hover { background: var(--bs-gray-200, #EBEDF2); }
.gcc-rf-sign__btn.active { background: var(--bs-primary, #066DF0); color: #fff; }
.gcc-rf-cols { display: flex; gap: 0.25rem; }
.gcc-rf-col {
flex: 1 1 auto; min-width: 0; max-height: 240px; overflow-y: auto;
display: flex; flex-direction: column; gap: 2px; scrollbar-width: thin;
}
.gcc-rf-col--dec { flex: 0 0 auto; min-width: 46px; }
.gcc-rf-col--av { max-height: 300px; }
.gcc-rf-cell {
border: 0; background: transparent; padding: 0.34rem 0.4rem; border-radius: 0.4rem;
color: var(--bs-body-color, #15171D); font-size: 0.95rem; font-variant-numeric: tabular-nums;
text-align: center; white-space: nowrap; cursor: pointer; transition: background-color 0.1s ease;
}
.gcc-rf-cell--wide { text-align: left; padding-left: 0.5rem; }
.gcc-rf-cell:hover { background: var(--bs-gray-200, #EBEDF2); }
.gcc-rf-cell.active { background: var(--bs-primary, #066DF0); color: #fff; font-weight: 700; }
.gcc-rf-optgroup {
font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
color: var(--bs-secondary-color, #5C6170); padding: 0.3rem 0.2rem 0.15rem;
position: sticky; top: 0; background: var(--bs-body-bg, #FAFBFD); z-index: 1;
}
.gcc-rf-text { text-align: center; }
.gcc-refmodal__mid { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.gcc-refmodal__dup {
border: 1px solid var(--bs-border-color, #DCDFE7); background: var(--bs-body-bg, #FAFBFD);
color: var(--bs-secondary-color, #5C6170); width: 38px; height: 38px; border-radius: 50%;
cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
transition: background-color 0.12s ease, color 0.12s ease, transform 0.12s ease;
}
.gcc-refmodal__dup:hover { background: var(--bs-primary, #066DF0); color: #fff; }
.gcc-refmodal__dup:active { transform: scale(0.94); }
.gcc-refmodal__foot {
flex: 0 0 auto; display: flex; align-items: center; gap: 0.5rem;
padding: 0.85rem 1.25rem;
}
.gcc-refmodal__foot-right { margin-left: auto; display: flex; gap: 0.5rem; }
.gcc-refmodal__btn {
border: 1px solid var(--bs-border-color, #DCDFE7); background: var(--bs-body-bg, #FAFBFD);
color: var(--bs-body-color, #15171D); padding: 0.45rem 1rem; border-radius: 0.5rem;
font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: background-color 0.12s ease;
}
.gcc-refmodal__btn:hover { background: var(--bs-gray-200, #EBEDF2); }
.gcc-refmodal__btn--primary { background: var(--bs-primary, #066DF0); border-color: var(--bs-primary, #066DF0); color: #fff; }
.gcc-refmodal__btn--primary:hover { background: var(--bs-primary, #066DF0); filter: brightness(1.06); }
/* Bajo ~720px: los ojos se apilan (evita scroll horizontal en el modal). */
@media (max-width: 720px) {
.gcc-refmodal__eyes { flex-direction: column; }
.gcc-refmodal__mid { transform: rotate(90deg); }
}
/* Fila de refracción colapsada (resumen por ojo + lápiz que abre el modal) */
.gcc-row--cols2 .gcc-eye--od.gcc-eye--summary,
.gcc-row--cols2 .gcc-eye--oi.gcc-eye--summary {
justify-content: stretch; align-items: center; flex-wrap: nowrap; gap: 0.5rem;
}
.gcc-eye__sum {
flex: 1 1 auto; min-width: 0; text-align: left;
border: 1px dashed var(--gcc-line, #DCDFE7); background: transparent;
border-radius: 0.5rem; padding: 0.42rem 0.6rem;
font-size: 0.85rem; color: var(--gcc-ink, #15171D); font-variant-numeric: tabular-nums;
cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
transition: border-color 0.1s ease, background-color 0.1s ease;
}
.gcc-eye__sum:hover { border-color: var(--bs-primary, #066DF0); background: rgba(6, 109, 240, 0.05); }
.gcc-eye__sum--empty { color: var(--gcc-ink-soft, #5C6170); font-style: italic; }
/* Aviso óptico por campo (0.25 D · cil⇒eje): ámbar, no bloquea. */
.gcc-panel input.gcc-input--warn {
border-color: #E8B007 !important;
box-shadow: 0 0 0 1px rgba(232, 176, 7, 0.35) !important;
}
/* El SweetAlert de "Revisa la graduación" debe quedar SOBRE el modal de
refracción (z-index 1090; el contenedor default de Swal es 1060). */
.gcc-swal-top { z-index: 2200 !important; }
.gcc-swap--edit:active { transform: none; }
/* ===== Pestañas de modo de llenado (guiada · documento · enfocada) ===== */
.gcc-tabs {
flex: 0 0 auto;
gap: 0.25rem;
padding: 0 1.5rem;
background: var(--gcc-bg);
border-bottom: 1px solid var(--gcc-line);
}
.gcc-panel .gcc-tab {
appearance: none; -webkit-appearance: none;
border: 0; background: transparent;
padding: 0.6rem 0.85rem 0.7rem;
font-size: 0.85rem; font-weight: 600;
color: var(--gcc-ink-soft);
border-bottom: 2px solid transparent;
margin-bottom: -1px; /* solapa el borde 1px de la barra */
cursor: pointer;
transition: color 0.12s ease, border-color 0.12s ease;
}
.gcc-panel .gcc-tab:hover { color: var(--gcc-ink); }
.gcc-panel .gcc-tab.active { color: var(--gcc-ink); border-bottom-color: var(--gcc-ink); }
/* En modo comparación se ocultan las pestañas (igual que los botones del header). */
.gcc-panel.gcc-comparing .gcc-tabs { display: none !important; }
/* En celulares no ofrecemos el modo "Enfocada" (layout pensado para desktop/tablet). */
@media (max-width: 767.98px) {
.gcc-panel .gcc-tab--enfocada { display: none !important; }
}
/* Barra "Finalizar nota" del modo documento */
.gcc-finalize-bar { margin-top: 0.25rem; }
/* ===== Modo Guiada: footer "Continuar con…" (elige la próxima sección) === */
/* Las secciones restantes se agrupan por categoría (Exploración · Diagnóstico y
notas · Órdenes y recetas) y cada chip toma el acento de SU sección. Sustituye
al muro de chips negros idénticos: color tenue theme-aware vía color-mix. */
.gcc-next-label { letter-spacing: 0.08em; }
/* "Continuar con…" es un COMPONENTE propio: card separada al final del stage
(misma anatomía .gcc-card que las secciones), no un footer con separador. */
/* "Desplegar todo": mismo lenguaje CARBÓN que las acciones secundarias de
sección (.gcc-typical) — píldora oscura, texto de la surface. */
.gcc-next-head { min-height: 1.75rem; }
.gcc-panel .gcc-next-expand {
appearance: none; -webkit-appearance: none;
display: inline-flex; align-items: center; gap: 0.3rem;
border: 0;
background: color-mix(in srgb, var(--gcc-ink, #15171D) 78%, var(--gcc-surface, #FAFBFD));
color: var(--gcc-surface, #FAFBFD);
border-radius: 0.6rem; padding: 0.35rem 0.75rem;
font-size: 0.75rem; font-weight: 600; cursor: pointer; white-space: nowrap;
transition: background 0.12s ease, color 0.12s ease;
}
.gcc-panel .gcc-next-expand:hover { background: color-mix(in srgb, var(--gcc-ink, #15171D) 90%, var(--gcc-surface, #FAFBFD)); }
.gcc-panel .gcc-next-expand i { color: inherit; }
.gcc-next-group { margin-bottom: 0.85rem; }
.gcc-next-group:last-of-type { margin-bottom: 1rem; }
.gcc-next-group__label {
display: flex; align-items: center; gap: 0.4rem;
font-size: 0.68rem; font-weight: 700; letter-spacing: 0.09em;
text-transform: uppercase; margin-bottom: 0.45rem;
/* Eyebrow con el color de la categoría (oscurecido hacia Ink para legibilidad
en mayúsculas pequeñas). Ata el grupo entero a un solo tono. */
color: color-mix(in srgb, var(--gcc-accent, var(--gcc-ink-soft)) 62%, var(--gcc-ink));
}
.gcc-next-group__label i { font-size: 0.95rem; color: color-mix(in srgb, var(--gcc-accent, var(--gcc-ink-soft)) 78%, var(--gcc-ink)); }
/* Chip coloreado por el acento de su sección (tenue, no relleno fuerte). El
acento se inyecta por JS en --gcc-accent; fallback a Ink soft si faltara. */
.gcc-panel .gcc-next-chip {
appearance: none; -webkit-appearance: none;
display: inline-flex; align-items: center; gap: 0.35rem;
border: 1px solid color-mix(in srgb, var(--gcc-accent, var(--gcc-ink-soft)) 35%, var(--gcc-line));
background: color-mix(in srgb, var(--gcc-accent, var(--gcc-ink-soft)) 10%, var(--gcc-surface));
color: color-mix(in srgb, var(--gcc-accent, var(--gcc-ink-soft)) 72%, var(--gcc-ink));
border-radius: 0.5rem; padding: 0.4rem 0.8rem;
font-size: 0.85rem; font-weight: 600; cursor: pointer;
transition: background 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
}
.gcc-panel .gcc-next-chip:hover {
background: color-mix(in srgb, var(--gcc-accent, var(--gcc-ink-soft)) 18%, var(--gcc-surface));
border-color: color-mix(in srgb, var(--gcc-accent, var(--gcc-ink-soft)) 55%, var(--gcc-line));
}
.gcc-panel .gcc-next-chip:active { transform: scale(0.98); }
.gcc-panel .gcc-next-chip i { color: inherit; opacity: 0.85; }
/* Botón "Finalizar consulta": verde (completar), distinto de los chips negros.
Verde tomado de la paleta fría del demo (esmeralda #1FA45C). */
.gcc-panel .gcc-finish-btn {
appearance: none; -webkit-appearance: none;
display: inline-flex; align-items: center; gap: 0.4rem;
border: 1px solid #1FA45C; background: #1FA45C; color: #fff;
border-radius: 0.5rem; padding: 0.5rem 1rem;
font-size: 0.88rem; font-weight: 700; cursor: pointer;
transition: opacity 0.12s ease, transform 0.08s ease;
}
.gcc-panel .gcc-finish-btn:hover { opacity: 0.9; }
.gcc-panel .gcc-finish-btn:active { transform: scale(0.98); }
.gcc-panel .gcc-finish-btn i { color: #fff; }
/* ===== Vista previa de una sección fuera de la nota ===================== *
La usa el configurador ("Configurar mi nota") para enseñar el componente TAL
CUAL se ve en la nota — es el mismo nodo, no una réplica. El envoltorio trae
`.gcc-panel` porque de ahí cuelgan la paleta `--gcc-*` y casi todas las
reglas; aquí se le quita lo que es LAYOUT de la nota completa (alto de 92vh,
fondo, sombra) y se deja solo el scope de estilos. */
/* La doble clase (.gcc-preview-scope.gcc-note-scope) sube la especificidad a
propósito: `clinical-note-page.css` define `.gcc-note-scope .gcc-page
.gcc-panel` con alto de 100svh y carga DESPUÉS de este archivo, así que con
igual especificidad ganaría ella y la vista previa mediría toda la pantalla.
Con una clase más, esto gana sin depender del orden de los