/* Visión cromática (js/modules/hc-color-vision.js): plegada por defecto, con el
   mismo lenguaje de vidrio de la historia clínica. Sin blur propio: va dentro
   del panel de vidrio de la historia. */
#hc-color-vision-root, #hc-color-vision-root * { box-sizing: border-box; }
.hc-cv {
    --cv-acento: var(--glass-primary, #2563eb);
    --cv-spring: cubic-bezier(.22, 1, .36, 1);
    border-radius: 18px;
    background: rgba(255, 255, 255, .62);
    border: 1px solid rgba(255, 255, 255, .85);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 10px 24px -20px rgba(15, 23, 42, .45);
    padding: 12px 14px;
    color: #0f172a;
}
.hc-cv.abierta { padding-bottom: 16px; }

/* Línea principal (lo único que se ve plegada) */
.hc-cv-fila { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hc-cv-ico {
    width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: 12px;
    background: conic-gradient(from 200deg, #ef4444, #f59e0b, #22c55e, #0ea5e9, #8b5cf6, #ef4444);
    color: #fff; font-size: 20px; box-shadow: 0 6px 14px -8px rgba(15, 23, 42, .5);
}
.hc-cv-tit { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; }
.hc-cv-tit b { font-size: .92rem; }
.hc-cv-tit small { color: #64748b; font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-cv-chip { font-size: .7rem; font-weight: 800; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.hc-cv-chip.pendiente { background: #f1f5f9; color: #64748b; }
.hc-cv-chip.progreso { background: #e0f2fe; color: #0369a1; }
.hc-cv-chip.ok { background: #dcfce7; color: #15803d; }
.hc-cv-chip.aviso { background: #fef3c7; color: #b45309; }
.hc-cv-chip.alerta { background: #fee2e2; color: #b91c1c; }
.hc-cv-acc { display: flex; gap: 6px; flex-wrap: wrap; }

.hc-cv-btn {
    display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 13px; border: 0; border-radius: 999px;
    background: linear-gradient(180deg, #fff, #f8fafc); color: #334155; font: inherit; font-size: .78rem; font-weight: 800; cursor: pointer;
    box-shadow: 0 0 0 .5px rgba(15, 23, 42, .14), 0 3px 8px -5px rgba(15, 23, 42, .35);
    transition: transform .25s var(--cv-spring), box-shadow .2s;
}
.hc-cv-btn .material-symbols-outlined { font-size: 18px; }
.hc-cv-btn:hover { transform: translateY(-1px); }
.hc-cv-btn:active { transform: scale(.97); }
.hc-cv-btn.primario { background: linear-gradient(180deg, color-mix(in srgb, var(--cv-acento) 85%, #fff), var(--cv-acento)); color: #fff; box-shadow: 0 6px 14px -7px color-mix(in srgb, var(--cv-acento) 80%, transparent); }
.hc-cv-btn.suave { width: 34px; padding: 0; justify-content: center; color: #64748b; }

/* Configuración (una sola fila liviana) */
.hc-cv-config { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0 12px; padding-top: 12px; border-top: 1px solid rgba(148, 163, 184, .22); }
.hc-cv-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: rgba(241, 245, 249, .9); box-shadow: inset 0 1px 2px rgba(15, 23, 42, .06); }
.hc-cv-seg button { border: 0; background: transparent; padding: 5px 12px; border-radius: 999px; font: inherit; font-size: .76rem; font-weight: 800; color: #475569; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.hc-cv-seg button.on { background: #fff; color: var(--cv-acento); box-shadow: 0 0 0 .5px rgba(15, 23, 42, .1), 0 3px 8px -4px rgba(15, 23, 42, .3); }
.hc-cv-seg button.on.ok { color: #15803d; } .hc-cv-seg button.on.aviso { color: #b45309; } .hc-cv-seg button.on.alerta { color: #b91c1c; }
.hc-cv-mini { display: inline-flex !important; align-items: center; gap: 6px; font-size: .74rem; font-weight: 700; color: #64748b; margin: 0 !important; }
.hc-cv-mini select { height: 32px; padding: 0 28px 0 10px !important; font-size: .78rem !important; border-radius: 999px !important; width: auto !important; }
.hc-cv-cond { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: .72rem; color: #94a3b8; }
.hc-cv-cond .material-symbols-outlined { font-size: 16px; color: #f59e0b; }

/* Trabajo: lámina + respuestas */
.hc-cv-trabajo { display: grid; grid-template-columns: minmax(220px, 340px) minmax(0, 1fr); gap: 18px; align-items: start; }
.hc-cv-trabajo.libro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.hc-cv-lamina { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hc-cv-lamina canvas { width: 100%; max-width: 340px; aspect-ratio: 1; border-radius: 50%; background: #fffaf4; box-shadow: 0 0 0 6px rgba(255, 255, 255, .85), 0 18px 36px -20px rgba(120, 53, 15, .5); }
.hc-cv-marca { font-size: .66rem; color: #94a3b8; font-weight: 700; }
.hc-cv-puntos { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; max-width: 340px; }
.hc-cv-puntos button { width: 13px; height: 13px; padding: 0; border-radius: 999px; border: 0; cursor: pointer; background: #e2e8f0; transition: transform .25s var(--cv-spring); }
.hc-cv-puntos button:hover { transform: scale(1.3); }
.hc-cv-puntos button.correcta { background: #22c55e; }
.hc-cv-puntos button.incorrecta { background: #ef4444; }
.hc-cv-puntos button.no_identifica { background: #f59e0b; }
.hc-cv-puntos button.actual { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--cv-acento); }

.hc-cv-pregunta small { display: block; font-size: .72rem; font-weight: 800; color: #64748b; text-transform: uppercase; letter-spacing: .04em; }
.hc-cv-pregunta h4 { margin: 4px 0 12px; font-size: 1.05rem; }
.hc-cv-opciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hc-cv-opciones button, .hc-cv-nove {
    height: 64px; border: 0; border-radius: 18px; font: inherit; font-size: 1.6rem; font-weight: 800; color: #0f172a; cursor: pointer;
    background: linear-gradient(180deg, #fff, #f8fafc);
    box-shadow: 0 0 0 .5px rgba(15, 23, 42, .12), inset 0 1px 0 #fff, 0 6px 14px -10px rgba(15, 23, 42, .4);
    transition: transform .25s var(--cv-spring), box-shadow .2s, background .2s;
    font-variant-numeric: tabular-nums;
}
.hc-cv-opciones button:hover, .hc-cv-nove:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-acento) 45%, transparent), 0 10px 18px -10px rgba(15, 23, 42, .45); }
.hc-cv-opciones button:active, .hc-cv-nove:active { transform: scale(.96); }
.hc-cv-opciones button.bien { background: linear-gradient(180deg, #dcfce7, #bbf7d0); color: #15803d; }
.hc-cv-opciones button.mal, .hc-cv-nove.mal { background: linear-gradient(180deg, #fee2e2, #fecaca); color: #b91c1c; }
.hc-cv-nove { width: 100%; height: 46px; margin-top: 10px; font-size: .86rem; color: #475569; }
.hc-cv-otro { display: flex !important; align-items: center; gap: 8px; margin: 12px 0 0 !important; font-size: .74rem; font-weight: 700; color: #64748b; }
.hc-cv-otro input { flex: 1; height: 34px; font-size: .86rem !important; }
.hc-cv-ayuda { margin: 10px 0 0; font-size: .72rem; color: #94a3b8; }

/* Libro físico */
.hc-cv-libro { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; font-size: .95rem; font-weight: 700; color: #334155; }
.hc-cv-libro input { width: 72px !important; height: 44px; text-align: center; font-size: 1.2rem !important; font-weight: 800 !important; }

/* Resultado */
.hc-cv-final { border-radius: 16px; padding: 14px; background: #fff; box-shadow: 0 0 0 .5px rgba(15, 23, 42, .1), 0 10px 22px -16px rgba(15, 23, 42, .45); }
.hc-cv-final.ok { background: linear-gradient(180deg, #f0fdf4, #fff); }
.hc-cv-final.aviso { background: linear-gradient(180deg, #fffbeb, #fff); }
.hc-cv-final.alerta { background: linear-gradient(180deg, #fef2f2, #fff); }
.hc-cv-final.vacio { display: flex; align-items: center; gap: 10px; color: #94a3b8; }
.hc-cv-final.vacio p { margin: 0; font-size: .82rem; }
.hc-cv-marcador { display: flex; align-items: baseline; gap: 8px; }
.hc-cv-marcador b { font-size: 2.2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.hc-cv-marcador b small { font-size: 1rem; color: #94a3b8; }
.hc-cv-marcador span { font-size: .8rem; color: #64748b; font-weight: 700; }
.hc-cv-final > p { margin: 8px 0 12px; font-size: .86rem; line-height: 1.45; color: #334155; }
.hc-cv-concl small { display: block; margin-bottom: 6px; font-size: .68rem; font-weight: 800; color: #64748b; text-transform: uppercase; letter-spacing: .04em; }
.hc-cv-obs { display: flex !important; flex-direction: column; align-items: stretch; gap: 5px; margin: 12px 0 0 !important; font-size: .74rem; font-weight: 700; color: #64748b; }
.hc-cv-obs textarea { width: 100% !important; min-height: 56px; font-size: .84rem !important; }
.hc-cv-fin-acc { display: flex; justify-content: flex-end; margin-top: 10px; }

@media (max-width: 760px) {
    .hc-cv-trabajo, .hc-cv-trabajo.libro { grid-template-columns: 1fr; }
    .hc-cv-lamina canvas { max-width: 260px; }
    .hc-cv-cond { margin-left: 0; }
    .hc-cv-acc { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .hc-cv *, .hc-cv { transition: none !important; }
}
/* Las reglas generales de la historia limitaban el ancho del campo. */
#hc-color-vision-root .hc-cv-obs { width: 100%; }
#hc-color-vision-root .hc-cv-obs textarea { width: 100% !important; max-width: none !important; }