/* 🎓 Capacitación: azul marino, dorado, Cormorant Garamond en títulos y Montserrat en texto */
@font-face { font-family: "Cormorant NISSI"; src: url("../js/vendor/fonts/CormorantGaramond-Bold.ttf"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Montserrat NISSI"; src: url("../js/vendor/fonts/Montserrat-Regular.ttf"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat NISSI"; src: url("../js/vendor/fonts/Montserrat-Bold.ttf"); font-weight: 700; font-display: swap; }
#view-capacitacion { overflow-y: auto; height: calc(100vh - 60px); box-sizing: border-box; background: #f7f4ec; padding: 20px; font-family: "Montserrat NISSI", sans-serif; color: #0D1B2A; }
.cap-h1 { font-family: "Cormorant NISSI", serif; font-size: 30px; color: #0D1B2A; margin: 0 0 12px; }
.cap-h2 { font-family: "Cormorant NISSI", serif; font-size: 22px; color: #0D1B2A; margin: 22px 0 8px; }
.cap-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.cap-btn { font: inherit; font-size: 14px; min-height: 40px; padding: 8px 16px; border-radius: 8px; border: 1px solid #0D1B2A; background: #fff; color: #0D1B2A; cursor: pointer; }
.cap-btn.oro { background: #C9A84C; border-color: #C9A84C; color: #0D1B2A; font-weight: 700; }
.cap-btn.act { background: #0D1B2A; color: #C9A84C; }
.cap-btn:disabled { opacity: .55; cursor: default; }
.cap-mod { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: #fff; border: 1px solid #e3ded0; border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; }
.cap-mod h3 { margin: 0 0 3px; font-size: 16px; font-family: "Montserrat NISSI", sans-serif; }
.cap-mut { color: #5d6875; font-size: 13px; }
.cap-tag { display: inline-block; font-size: 12px; border-radius: 6px; padding: 3px 8px; font-weight: 700; }
.cap-tag.aprobado { background: #9FE1CB; color: #04342C; } .cap-tag.en_curso, .cap-tag.disponible { background: #FAEEDA; color: #633806; }
.cap-tag.atrasado { background: #FCEBEB; color: #791F1F; } .cap-tag.bloqueado, .cap-tag.proximamente, .cap-tag.sin_empezar, .cap-tag.sin_asignar { background: #F1EFE8; color: #444441; }
.cap-tabla-w { overflow-x: auto; background: #fff; border: 1px solid #e3ded0; border-radius: 10px; }
.cap-tabla { border-collapse: collapse; width: 100%; font-size: 13px; }
.cap-tabla th, .cap-tabla td { padding: 8px 10px; border-bottom: 1px solid #eee7d6; text-align: left; white-space: nowrap; }
.cap-tabla td.ajusta { white-space: normal; min-width: 260px; }
.cap-fila { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 8px 0; }
.cap-fila input, .cap-fila select, .cap-ed textarea, .cap-ed input, .cap-ed select { font: inherit; font-size: 16px; padding: 7px 9px; border: 1px solid #c9c3b2; border-radius: 6px; background: #fff; color: #0D1B2A; }
.cap-err { background: #FCEBEB; color: #791F1F; border-radius: 8px; padding: 10px 14px; margin: 10px 0; font-size: 13px; }
.cap-err ul { margin: 4px 0 0; padding-left: 18px; }
.cap-ok { background: #E1F5EE; color: #085041; border-radius: 8px; padding: 10px 14px; margin: 10px 0; font-size: 13px; }
.cap-ed-bloque { background: #fff; border: 1px solid #e3ded0; border-radius: 10px; padding: 12px; margin: 10px 0; }
.cap-ed-sl { border-top: 1px solid #eee7d6; padding: 10px 0; }
.cap-ed label { display: block; font-size: 12px; color: #5d6875; margin: 6px 0 2px; }
.cap-ed textarea, .cap-ed input[type=text] { width: 100%; box-sizing: border-box; }
/* Visor a pantalla completa. Por debajo de la pantalla de recordatorios del CRM (z-index 9999). */
#cap-visor { position: fixed; inset: 0; z-index: 1040; background: #0D1B2A; color: #e8e4da; display: flex; flex-direction: column; font-family: "Montserrat NISSI", sans-serif; touch-action: pan-y; }
.cap-v-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px 6px; font-size: 13px; }
.cap-v-x { background: none; border: 1px solid #33475e; border-radius: 8px; color: #e8e4da; font: inherit; font-size: 13px; padding: 8px 12px; cursor: pointer; min-height: 40px; }
.cap-barra { height: 4px; background: #22344a; margin: 0 18px; border-radius: 2px; }
.cap-barra i { display: block; height: 4px; background: #C9A84C; border-radius: 2px; transition: width .25s; }
.cap-v-cuerpo { flex: 1; min-height: 0; overflow-y: auto; display: flex; padding: 20px 18px; }
.cap-slide { margin: auto; width: 100%; max-width: 820px; animation: capEntra .28s ease; }
@keyframes capEntra { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cap-slide { animation: none; } .cap-carta-in { transition: none !important; } }
.cap-slide h2 { font-family: "Cormorant NISSI", serif; color: #C9A84C; font-size: clamp(28px, 5vw, 44px); line-height: 1.12; margin: 0 0 12px; }
.cap-slide .sub { color: #C9A84C; font-size: 15px; margin: 0 0 12px; }
.cap-slide p, .cap-slide li { font-size: clamp(16px, 2.2vw, 20px); line-height: 1.6; }
.cap-slide li { margin-bottom: 8px; }
.cap-portada { text-align: center; }
.cap-portada h2 { font-size: clamp(38px, 7vw, 64px); }
.cap-cita { font-family: "Cormorant NISSI", serif; font-size: clamp(23px, 3.6vw, 34px) !important; line-height: 1.35 !important; border-left: 3px solid #C9A84C; padding-left: 18px; margin: 0; }
.cap-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.cap-col { border: 1px solid #33475e; border-radius: 10px; padding: 14px; }
.cap-col h3 { color: #C9A84C; margin: 0 0 8px; font-size: 16px; }
.cap-col ul { margin: 0; padding-left: 18px; }
.cap-col li { font-size: 15px; }
.cap-ej { background: #C9A84C; color: #0D1B2A; border-radius: 12px; padding: 20px; }
.cap-ej h2 { color: #0D1B2A; } .cap-ej .etq { font-size: 12px; font-weight: 700; margin-bottom: 6px; }
.cap-carta { perspective: 1000px; border: 0; background: none; width: 100%; padding: 0; font: inherit; color: inherit; cursor: pointer; display: block; }
.cap-carta-in { display: grid; transition: transform .45s; transform-style: preserve-3d; }
.cap-carta.volteada .cap-carta-in { transform: rotateY(180deg); }
.cap-cara { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; min-height: 210px; border: 1px solid #C9A84C; border-radius: 12px; padding: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size: clamp(17px, 2.4vw, 22px); line-height: 1.5; background: #13263a; }
.cap-cara.atras { transform: rotateY(180deg); background: #C9A84C; color: #0D1B2A; }
.cap-pista { font-size: 12px; color: #C9A84C; margin-top: 10px; }
.cap-op { display: block; width: 100%; text-align: left; font: inherit; font-size: 16px; color: #e8e4da; background: #13263a; border: 1px solid #33475e; border-radius: 8px; padding: 12px 14px; margin: 8px 0; min-height: 44px; cursor: pointer; }
.cap-op.sel { border-color: #C9A84C; background: #22344a; } .cap-op.bien { border-color: #1D9E75; color: #9FE1CB; } .cap-op.mal { border-color: #E24B4A; color: #F7C1C1; }
.cap-paso { display: flex; gap: 10px; align-items: center; background: #13263a; border: 1px solid #33475e; border-radius: 8px; padding: 8px 12px; margin: 8px 0; }
.cap-paso span { flex: 1; font-size: 15px; }
.cap-paso button { width: 44px; height: 44px; font-size: 18px; color: #C9A84C; background: none; border: 1px solid #33475e; border-radius: 8px; cursor: pointer; }
.cap-exp { background: #13263a; border-radius: 8px; padding: 12px 14px; margin-top: 10px; font-size: 15px; line-height: 1.5; }
.cap-v-pie { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 18px calc(14px + env(safe-area-inset-bottom, 0px)); }
.cap-v-pie button { font: inherit; font-size: 14px; min-height: 44px; padding: 8px 16px; border-radius: 8px; border: 1px solid #33475e; background: none; color: #e8e4da; cursor: pointer; }
.cap-v-pie button.oro { background: #C9A84C; border-color: #C9A84C; color: #0D1B2A; font-weight: 700; }
.cap-v-pie button:disabled { opacity: .4; }
.cap-img { max-width: 100%; max-height: 52vh; border-radius: 10px; display: block; margin: 0 auto 12px; }
.cap-video { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 10px; background: #000; }
.cap-grande { font-family: "Cormorant NISSI", serif; font-size: 72px; color: #C9A84C; margin: 0; line-height: 1; }