/* Cognitiva-AI · Agentes — identidad continua del tema del sitio (espec. 1.5)
   Paleta: petróleo, menta y naranja · Space Grotesk + JetBrains Mono */
:root {
	--cae-petroleo: #0e4749;
	--cae-petroleo-osc: #092f31;
	--cae-menta: #2a9d8f;
	--cae-naranja: #f4771f;
	--cae-crema: #f7f5f0;
	--cae-tinta: #1a1a1a;
	--cae-borde: #d8dede;
}
.cae-app { font-family: 'Space Grotesk', system-ui, sans-serif; color: var(--cae-tinta); max-width: 960px; margin: 0 auto; }
.cae-h { color: var(--cae-petroleo); font-weight: 700; margin: 0 0 .2em; }
.cae-h3 { color: var(--cae-petroleo); border-bottom: 2px solid var(--cae-menta); padding-bottom: .25em; margin-top: 2em; }
.cae-sub { color: #5a6666; font-size: .92em; margin-top: 0; }
.cae-hint { color: #7a8686; font-size: .85em; }
.cae-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .8em 1em; }
.cae-f { display: flex; flex-direction: column; gap: .25em; font-size: .9em; }
.cae-f > span { font-weight: 500; color: var(--cae-petroleo-osc); }
.cae-f > span em { font-weight: 400; color: #7a8686; font-style: normal; font-size: .88em; }
.cae-f input, .cae-f select, .cae-f textarea, .cae-tabla input, .cae-tabla select, #cs_aclaracion {
	border: 1px solid var(--cae-borde); border-radius: 8px; padding: .5em .6em;
	font: inherit; background: #fff; width: 100%; box-sizing: border-box;
}
.cae-f input:focus, .cae-f textarea:focus, .cae-f select:focus { outline: 2px solid var(--cae-menta); border-color: var(--cae-menta); }
.cae-pre { background: var(--cae-crema) !important; }
.cae-wide { grid-column: 1 / -1; }
.cae-chk { display: flex; gap: .5em; align-items: flex-start; font-size: .9em; padding: .3em 0; }
.cae-chk input { accent-color: var(--cae-menta); margin-top: .25em; }
.cae-cid { font-family: 'JetBrains Mono', monospace; color: var(--cae-naranja); font-size: .82em; margin-right: .35em; }
.cae-marco { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2em; }
@media (max-width: 700px) { .cae-marco { grid-template-columns: 1fr; } }
.cae-marco h4 { color: var(--cae-petroleo); margin: .4em 0; }
.cae-compfila { display: flex; gap: .5em; align-items: flex-start; margin-bottom: .5em; }
.cae-compfila textarea { flex: 1; border: 1px solid var(--cae-borde); border-radius: 8px; padding: .45em; font: inherit; }
.cae-unit { border: 1px solid var(--cae-borde); border-left: 4px solid var(--cae-menta); border-radius: 10px; padding: .9em 1em; margin-bottom: .9em; background: #fff; }
.cae-uh { display: flex; justify-content: space-between; font-weight: 600; color: var(--cae-petroleo); margin-bottom: .5em; }
.cae-tabla { width: 100%; border-collapse: collapse; font-size: .88em; margin: .6em 0; }
.cae-tabla th { background: var(--cae-petroleo); color: #fff; padding: .5em .6em; text-align: left; }
.cae-tabla td { border: 1px solid var(--cae-borde); padding: .35em .4em; background: #fff; }
.cae-tabla tr.cae-pf td { background: #fdf3ea; }
.cae-suma { display: flex; justify-content: space-between; align-items: center; font-size: .92em; }
.cae-btn { background: var(--cae-naranja); color: #fff; border: 0; border-radius: 10px; padding: .7em 1.4em; font: inherit; font-weight: 600; cursor: pointer; }
.cae-btn:hover { filter: brightness(1.06); }
.cae-btn:disabled { opacity: .55; cursor: wait; }
.cae-btn.cae-sec { background: var(--cae-petroleo); }
.cae-link { background: none; border: 0; color: var(--cae-menta); font: inherit; font-size: .9em; cursor: pointer; text-decoration: underline; padding: 0; }
.cae-actions { display: flex; align-items: center; gap: 1em; margin: 1.6em 0; }
.cae-msg { color: var(--cae-petroleo); font-size: .92em; }
.cae-box { border-radius: 10px; padding: 1em 1.2em; margin: 1em 0; }
.cae-warn { background: #fdf3ea; border: 1px solid var(--cae-naranja); }
.cae-find { border-left: 4px solid; border-radius: 6px; background: #fff; padding: .55em .8em; margin: .4em 0; font-size: .88em; display: flex; flex-direction: column; }
.cae-find span { color: #5a6666; }
.cae-crit { border-color: #c0392b; } .cae-g-crit { color: #c0392b; }
.cae-warn.cae-find { border-color: var(--cae-naranja); background: #fff; } .cae-g-warn { color: var(--cae-naranja); }
.cae-ok { border-color: var(--cae-menta); } .cae-g-ok { color: var(--cae-menta); }
.cae-topbar { display: flex; justify-content: space-between; gap: 1em; align-items: flex-start; flex-wrap: wrap; }
.cae-quota { text-align: right; font-size: .85em; color: var(--cae-petroleo); font-family: 'JetBrains Mono', monospace; }
.cae-qbar { display: block; width: 160px; height: 6px; background: var(--cae-crema); border-radius: 3px; margin-top: .3em; overflow: hidden; }
.cae-qbar span { display: block; height: 100%; background: var(--cae-menta); width: 0; transition: width .3s; }
.cae-q-low { color: var(--cae-naranja); }
.cae-result { border: 1px solid var(--cae-menta); border-radius: 12px; margin-top: 1.4em; overflow: hidden; }
.cae-result-bar { display: flex; justify-content: space-between; align-items: center; background: var(--cae-petroleo); color: #fff; padding: .7em 1em; }
.cae-result-bar .cae-btn { background: var(--cae-naranja); text-decoration: none; }
.cae-result pre { white-space: pre-wrap; padding: 1.2em; margin: 0; background: #fff; font-family: 'JetBrains Mono', monospace; font-size: .82em; max-height: 480px; overflow: auto; }
.cae-modo { display: flex; flex-direction: column; gap: .4em; margin-bottom: 1em; }
.cae-modo .cae-chk { border: 1px solid var(--cae-borde); border-radius: 10px; padding: .7em .9em; background: #fff; cursor: pointer; }
.cae-modo .cae-chk:has(input:checked) { border-color: var(--cae-menta); background: #f2faf8; }
.cae-info { background: #f2faf8; border: 1px solid var(--cae-menta); font-size: .9em; }

/* ==================== F2.6 · Espacio docente (cascarón) ==================== */
.cae-shell { display: flex; gap: 0; font-family: 'Space Grotesk', system-ui, sans-serif; color: var(--cae-tinta); border: 1px solid var(--cae-borde); border-radius: 14px; overflow: hidden; background: #fff; min-height: 70vh; max-width: 1100px; margin: 0 auto; }
.cae-side { width: 208px; flex-shrink: 0; background: var(--cae-petroleo); color: #eaf4f2; display: flex; flex-direction: column; padding: 1.1em .7em; }
.cae-marca { font-weight: 700; letter-spacing: .02em; padding: .2em .6em 1.1em; color: #fff; }
.cae-marca::after { content: " Educación"; font-weight: 400; opacity: .65; font-size: .8em; }
.cae-nav { display: flex; flex-direction: column; gap: .15em; }
.cae-nav a { display: flex; align-items: center; gap: .55em; color: #cfe3e0; text-decoration: none; padding: .55em .6em; border-radius: 9px; font-size: .93em; }
.cae-nav a svg { width: 18px; height: 18px; flex-shrink: 0; }
.cae-nav a:hover { background: var(--cae-petroleo-osc); color: #fff; }
.cae-nav a.activo { background: var(--cae-menta); color: #fff; font-weight: 600; }
.cae-side-pie { margin-top: auto; padding: .8em .6em 0; font-family: 'JetBrains Mono', monospace; font-size: .78em; color: #cfe3e0; }
.cae-side-pie .cae-qbar { width: 100%; background: var(--cae-petroleo-osc); }
.cae-side-pie .cae-qbar span { background: var(--cae-naranja); }
.cae-main { flex: 1; min-width: 0; padding: 1.6em 1.8em 2.2em; background: var(--cae-crema); }
.cae-main .cae-app { max-width: none; }
.cae-vista.cae-cargando { opacity: .55; pointer-events: none; transition: opacity .15s; }
.cae-vh { display: flex; justify-content: space-between; align-items: center; gap: 1em; flex-wrap: wrap; }
.cae-mini { font-size: .82em; color: #5a6666; font-weight: 400; }
.cae-volver { color: var(--cae-menta); text-decoration: none; font-size: .9em; }

/* tarjetas y chips */
.cae-card { background: #fff; border: 1px solid var(--cae-borde); border-radius: 12px; padding: 1em 1.2em; margin: .8em 0; }
.cae-card-cerrado { background: #fbfaf7; }
.cae-card .cae-ct { color: var(--cae-petroleo); }
.cae-vacio { text-align: center; padding: 2em 1.5em; }
.cae-vacio h3 { color: var(--cae-petroleo); margin: 0 0 .3em; }
.cae-chips { display: flex; flex-wrap: wrap; gap: .45em; align-items: center; margin-top: .6em; }
.cae-chip { display: inline-block; font-size: .78em; padding: .25em .8em; border-radius: 999px; border: 1px solid var(--cae-borde); background: #fff; color: #5a6666; }
.cae-chip-ok { background: #f2faf8; border-color: var(--cae-menta); color: #0d6e63; }
.cae-chip-warn { background: #fdf3ea; border-color: var(--cae-naranja); color: #a34d0d; }
.cae-chip-gris { background: var(--cae-crema); }
.cae-chip-off { opacity: .6; border-style: dashed; }
.cae-chip-accion { cursor: pointer; border-color: var(--cae-menta); color: var(--cae-menta); font: inherit; font-size: .78em; }
.cae-chip-accion:hover { background: #f2faf8; }
.cae-chip-sug { background: #fdf3ea; border-color: var(--cae-naranja); color: var(--cae-naranja); font-weight: 600; }
.cae-chip-filtro { cursor: pointer; font: inherit; font-size: .8em; }
.cae-chip-filtro.activo { background: var(--cae-petroleo); border-color: var(--cae-petroleo); color: #fff; }
.cae-filtro { margin: .4em 0 1em; }
.cae-abrir { margin-left: auto; color: var(--cae-menta); text-decoration: none; font-size: .88em; white-space: nowrap; }
.cae-prog { height: 6px; background: var(--cae-crema); border-radius: 3px; overflow: hidden; margin-top: .7em; }
.cae-prog span { display: block; height: 100%; background: var(--cae-menta); transition: width .3s; }

/* inicio */
.cae-sug { background: #fff; border: 2px solid var(--cae-menta); border-radius: 12px; padding: 1.1em 1.3em; margin: 1em 0; }
.cae-sug h3 { color: var(--cae-petroleo); margin: .5em 0 .2em; }
.cae-mets { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7em; margin: 1em 0; }
.cae-met { background: #fff; border: 1px solid var(--cae-borde); border-radius: 10px; padding: .8em 1em; display: flex; flex-direction: column; }
.cae-met span { font-size: .8em; color: #5a6666; }
.cae-met strong { font-size: 1.5em; color: var(--cae-petroleo); font-family: 'JetBrains Mono', monospace; }
.cae-aviso { display: flex; justify-content: space-between; align-items: center; gap: 1em; background: #fff; border: 1px solid var(--cae-borde); border-left: 4px solid var(--cae-naranja); border-radius: 8px; padding: .6em .9em; margin: .5em 0; font-size: .88em; color: #5a6666; }
.cae-aviso a { color: var(--cae-menta); white-space: nowrap; }

/* curso detalle y portafolio */
.cae-etapa .cae-etq { display: inline-block; font-size: .7em; text-transform: uppercase; letter-spacing: .06em; color: var(--cae-naranja); font-weight: 700; margin-right: .6em; }
.cae-doclist { border-top: 1px solid var(--cae-borde); margin-top: .7em; padding-top: .3em; }
.cae-docfila { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; padding: .35em 0; font-size: .92em; flex-wrap: wrap; }
.cae-doct { color: var(--cae-tinta); }
.cae-docacc { display: flex; gap: .9em; font-size: .95em; }
.cae-docacc a, .cae-exp { color: var(--cae-menta); }
.cae-vers { font-size: .84em; color: #5a6666; margin: .2em 0 .4em; }
.cae-vers summary { cursor: pointer; color: #7a8686; }
.cae-vers ul { margin: .3em 0 .3em 1.2em; }
.cae-asignar { display: flex; gap: .5em; align-items: center; font-size: .85em; }
.cae-asignar select { border: 1px solid var(--cae-borde); border-radius: 8px; padding: .3em .5em; font: inherit; font-size: .95em; background: #fff; }
.cae-acciones-curso { display: flex; gap: 1.4em; margin-top: 1.2em; flex-wrap: wrap; }

/* modal */
.cae-modal { position: fixed; inset: 0; background: rgba(9, 47, 49, .45); display: flex; align-items: center; justify-content: center; z-index: 99999; padding: 1em; }
.cae-modal[hidden] { display: none; }
.cae-modal-caja { background: #fff; border-radius: 14px; padding: 1.4em 1.6em; max-width: 560px; width: 100%; max-height: 90vh; overflow: auto; font-family: 'Space Grotesk', system-ui, sans-serif; }

/* responsive */
@media (max-width: 820px) {
	.cae-shell { flex-direction: column; }
	.cae-side { width: auto; flex-direction: row; align-items: center; gap: .6em; padding: .6em .8em; }
	.cae-marca { padding: 0 .4em 0 0; font-size: .9em; }
	.cae-marca::after { content: ""; }
	.cae-nav { flex-direction: row; flex-wrap: wrap; }
	.cae-nav a span { display: none; }
	.cae-nav a.activo span { display: inline; }
	.cae-side-pie { margin: 0 0 0 auto; padding: 0; }
	.cae-side-pie .cae-qbar { width: 90px; }
	.cae-main { padding: 1.1em 1em 1.8em; }
}

/* ==================== F3 · vista previa con formato ==================== */
.cae-mdprev { padding: 1.2em 1.4em; background: #fff; max-height: 520px; overflow: auto; font-size: .92em; line-height: 1.55; }
.cae-mdprev h2 { color: var(--cae-petroleo); margin: .2em 0 .4em; font-size: 1.25em; }
.cae-mdprev h3 { color: var(--cae-petroleo); border-bottom: 2px solid var(--cae-menta); padding-bottom: .2em; margin: 1.2em 0 .5em; font-size: 1.05em; }
.cae-mdprev h4, .cae-mdprev h5 { color: var(--cae-petroleo); margin: 1em 0 .4em; }
.cae-mdprev table { width: 100%; border-collapse: collapse; font-size: .92em; margin: .6em 0 1em; }
.cae-mdprev th { background: var(--cae-petroleo); color: #fff; padding: .45em .55em; text-align: left; }
.cae-mdprev td { border: 1px solid var(--cae-borde); padding: .35em .5em; vertical-align: top; }
.cae-mdprev ul, .cae-mdprev ol { margin: .4em 0 .8em 1.4em; }
.cae-mdprev p { margin: .4em 0 .8em; }

/* ==================== F3 · plantilla personal del docente ==================== */
.cae-plsubir { display: flex; gap: .6em; flex-wrap: wrap; align-items: center; margin-top: .8em; }
.cae-plsubir input[type="text"] { flex: 1; min-width: 200px; border: 1px solid var(--cae-borde); border-radius: 8px; padding: .5em .7em; font: inherit; }
.cae-plsubir input[type="file"] { font-size: .85em; max-width: 240px; }
#cae_pl_personal { margin-top: 1.2em; }
#cae_pl_personal code { background: var(--cae-crema); padding: .1em .35em; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: .85em; }

/* ==================== v0.8 · confirmación y secciones ==================== */
.cae-modal { position: fixed; inset: 0; background: rgba(14,71,73,.45); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 1em; }
.cae-modal-caja { background: #fff; border-radius: 14px; padding: 1.4em 1.6em; max-width: 560px; width: 100%; box-shadow: 0 18px 50px rgba(0,0,0,.25); max-height: 88vh; overflow: auto; }
.cae-conf { width: 100%; border-collapse: collapse; margin: .4em 0 .8em; font-size: .93em; }
.cae-conf th { text-align: left; color: var(--cae-petroleo); padding: .3em .6em .3em 0; white-space: nowrap; vertical-align: top; }
.cae-conf td { padding: .3em 0; }
.cae-warnbox { background: #fff4e8; border-left: 4px solid var(--cae-naranja); padding: .5em .8em; border-radius: 6px; font-size: .9em; }
.cae-okbox { background: #ecf7f4; border-left: 4px solid var(--cae-menta); padding: .5em .8em; border-radius: 6px; font-size: .9em; }
#cs_secciones .cae-chk { display: inline-flex; margin-right: 1.1em; }
#cs_secciones .cae-mini { float: right; }

/* ==================== v0.9 · editor de validación ==================== */
.cae-result-acciones { padding: .5em 1.2em 0; }
#cs_editor { padding: 1em 1.2em; }
#cs_editor textarea, #cs_editor input[type="text"] { width: 100%; border: 1px solid var(--cae-borde); border-radius: 8px; padding: .45em .6em; font: inherit; font-size: .93em; }
#cs_editor select { border: 1px solid var(--cae-borde); border-radius: 8px; padding: .4em .5em; font: inherit; font-size: .93em; width: 100%; }
.cae-edunidad { margin: .9em 0; }
.cae-edses { border-left: 3px solid var(--cae-menta); padding: .3em 0 .3em .8em; margin: .5em 0; }
.cae-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .7em; }
@media (max-width: 720px) { .cae-grid2 { grid-template-columns: 1fr; } }

/* ==================== F5 · sesiones ==================== */
.cae-sesion { padding: .8em 1.1em; }
.cae-sesion-actual { border-left: 4px solid var(--cae-naranja); }
#ses_editor { padding: 1.2em 1.4em; }
#ses_editor textarea, #ses_editor input[type="text"] { width: 100%; border: 1px solid var(--cae-borde); border-radius: 8px; padding: .45em .6em; font: inherit; font-size: .93em; }

/* v0.10.2 · vista previa de sesión dentro de la tarjeta */
.cae-sesprev { margin-top: .8em; border-top: 2px solid var(--cae-menta); }

/* v0.11 · instrumentos */
.cae-ins-tipo { border: 1px solid var(--cae-borde); border-radius: 8px; padding: .35em .5em; font: inherit; font-size: .88em; }
#ins_editor { padding: 1.2em 1.4em; }
#ins_editor textarea, #ins_editor input[type="text"] { width: 100%; border: 1px solid var(--cae-borde); border-radius: 8px; padding: .45em .6em; font: inherit; font-size: .93em; }
#ins_editor input[type="text"][style] { width: auto; }

/* v0.12 · cierre */
.cae-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8em; }
@media (max-width: 720px) { .cae-grid3 { grid-template-columns: 1fr; } }
#cie_editor { padding: 1.2em 1.4em; }
#cie_editor textarea { width: 100%; border: 1px solid var(--cae-borde); border-radius: 8px; padding: .45em .6em; font: inherit; font-size: .93em; }

/* v0.12.5 — portada centrada en la vista previa, como en el Word */
.cae-mdprev .cae-md-centro { text-align: center; }
.cae-mdprev h2.cae-md-centro { border-bottom: 0; }

/* v0.14.0 — distinguir visualmente "modo coordinador" de "modo docente" cuando
   una misma cuenta tiene ambos roles (capacidades aditivas). */
.cae-rol-coord { border-left: 4px solid var(--cae-petroleo); position: relative; }
.cae-rol-doc { border-left: 4px solid var(--cae-menta); position: relative; }
.cae-rol-badge {
	display: inline-block; font-size: .72em; font-weight: 700; letter-spacing: .04em;
	padding: .2em .6em; border-radius: 999px; margin-bottom: .5em;
}
.cae-rol-badge-coord { background: var(--cae-petroleo); color: #fff; }
.cae-rol-badge-doc { background: var(--cae-menta); color: #063; }

/* v0.14.1 — tablero de completitud del programa */
.cae-tabla-mini { width: 100%; border-collapse: collapse; font-size: .85em; margin: .4em 0 .8em; }
.cae-tabla-mini th, .cae-tabla-mini td { padding: .35em .5em; border-bottom: 1px solid var(--cae-borde); text-align: left; }
.cae-tabla-mini th { color: var(--cae-petroleo); font-weight: 700; }

/* v0.15.0 — foto del docente, cabecera del perfil, salir/sitio principal */
.cae-perfil-cabecera { display: flex; align-items: center; gap: 1em; margin-bottom: .8em; }
.cae-foto-docente { text-align: center; flex: 0 0 auto; }
.cae-foto-img { width: 72px; height: 72px; border-radius: 999px; object-fit: cover; display: block; margin: 0 auto .3em; border: 2px solid var(--cae-menta); }
.cae-foto-vacia { width: 72px; height: 72px; border-radius: 999px; background: var(--cae-lienzo, #f4f1ea); display: flex; align-items: center; justify-content: center; font-size: 2em; margin: 0 auto .3em; border: 2px dashed var(--cae-borde); }
.cae-side-salir { margin-top: .6em; display: flex; flex-direction: column; gap: .3em; }
.cae-side-salir a { font-size: .82em; color: #cfd8d8; text-decoration: none; }
.cae-side-salir a:hover { color: #fff; text-decoration: underline; }

/* v0.15.1 — competencias generales/específicas separadas visualmente */
.cae-h4 { font-size: .95em; color: var(--cae-petroleo); margin: .3em 0 .2em; font-weight: 700; }
.cp-grupo { padding-left: .1em; }

/* v0.15.3 — alineación de competencias: tabla admin + selector buscar/elegir del docente */
.cae-tabla-comp td, .cae-tabla-comp th { vertical-align: top; padding: .5em .6em; }
.cae-comp-picker { border: 1px solid var(--cae-borde); border-radius: 8px; }
.cae-comp-buscar { width: 100%; padding: .5em .7em; border: 0; border-bottom: 1px solid var(--cae-borde); border-radius: 8px 8px 0 0; box-sizing: border-box; }
.cae-comp-resultados { max-height: 220px; overflow-y: auto; }
.cae-comp-op { display: flex; align-items: baseline; gap: .5em; padding: .4em .7em; cursor: pointer; border-bottom: 1px solid #f0eee7; }
.cae-comp-op:hover { background: var(--cae-lienzo, #f7f5f0); }
.cae-comp-op.cae-comp-elegida { background: #eaf5f3; }
.cae-comp-elegidas { padding: .5em .7em; border-top: 1px solid var(--cae-borde); }
.cae-comp-chip { display: inline-flex; align-items: center; gap: .35em; background: var(--cae-menta); color: #063; border-radius: 999px; padding: .15em .3em .15em .7em; margin: .2em .3em .2em 0; font-size: .85em; }
.cae-comp-chip button { border: 0; background: none; cursor: pointer; font-weight: 700; padding: 0 .4em; color: #063; }
