/* Campus UMEC — contenido armado con el editor (clases, descripción de cursos).
   Se usa igual en el editor del panel y en el sitio, así lo que se ve al editar es lo que ve el alumno. */
@font-face{font-family:"Archivo";src:url(../fonts/archivo-var.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(../fonts/atkinson-regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(../fonts/atkinson-bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(../fonts/atkinson-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
.rich{font-size:17px;line-height:1.75;color:#1C2943;font-family:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow-wrap:break-word}
.rich::after{content:"";display:block;clear:both}
.rich p{margin:0 0 1em}
.rich h2,.rich h3,.rich h4{font-family:"Archivo",system-ui,sans-serif;font-weight:800;font-stretch:108%;letter-spacing:-.01em;color:#13233F;line-height:1.2;margin:1.2em 0 .55em}
.rich h2{font-size:1.5rem}.rich h3{font-size:1.25rem}.rich h4{font-size:1.08rem}
.rich>:first-child{margin-top:0}
.rich a{color:#2259D6}
.rich ul,.rich ol{padding-left:1.4em;margin:0 0 1em}
.rich li{margin-bottom:.35em}
.rich blockquote{margin:1.1em 0;padding:12px 18px;border-left:5px solid #FF8A1E;background:#FFF6EB;border-radius:0 12px 12px 0}
.rich hr{border:0;border-top:2px solid #D9E2F2;margin:1.6em 0}

/* Imágenes: tamaño (arrastrando las esquinas en el editor), ubicación y epígrafe */
.rich img{display:inline-block;max-width:100%;height:auto;vertical-align:middle}
.rich figure{margin:.4em 0 1.1em}
.rich figure.image{display:table;margin-left:0;margin-right:0}
.rich figure.image img{display:block;margin:0}
.rich figure.image figcaption{display:table-caption;caption-side:bottom;font-size:.9rem;color:#5E6B86;text-align:center;padding:6px 4px 0;line-height:1.4}
.rich figure.image.align-left{float:left;margin:.3em 1.5em 1em 0}
.rich figure.image.align-right{float:right;margin:.3em 0 1em 1.5em}
.rich figure.image.align-center{margin-left:auto;margin-right:auto}
.rich img[style*="float: left"],.rich img[style*="float:left"]{margin:.3em 1.5em 1em 0}
.rich img[style*="float: right"],.rich img[style*="float:right"]{margin:.3em 0 1em 1.5em}
.rich .rd-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:0 0 1.2em;clear:both}
.rich .rd-gallery figure{margin:0}

/* Tablas: colores y bordes que elija el editor (Propiedades de tabla / celda) */
.rich table{border-collapse:collapse;max-width:100%;margin:0 0 1.2em}
.rich table:not([border="0"]) td,.rich table:not([border="0"]) th{border:1px solid #C7D3EA}
.rich td,.rich th{padding:8px 10px;vertical-align:top}
.rich th{background:#E8EFFF;text-align:left}
.rich td img,.rich th img{margin:0 auto}
.rich .tbl-scroll{overflow-x:auto;clear:both;margin:0 0 1.2em}
.rich .tbl-scroll table{margin:0}

/* Párrafos destacados */
.rich .callout{clear:both;border-radius:14px;padding:14px 18px 14px 20px;margin:0 0 1.1em;border:1.5px solid;border-left-width:6px}
.rich .callout>:last-child{margin-bottom:0}
.rich .callout-info{background:#EEF3FD;border-color:#C9D8F6;border-left-color:#2259D6}
.rich .callout-warn{background:#FFF4E8;border-color:#FBD7B0;border-left-color:#FF8A1E}
.rich .callout-ok{background:#E9F7F1;border-color:#BFE6D5;border-left-color:#0F9D6E}
.rich .callout-note{background:#F3F4F7;border-color:#DCE0E8;border-left-color:#5B6880}

/* Secciones desplegables */
.rich details{border:1.5px solid #D9E2F2;border-radius:12px;padding:10px 14px;margin:0 0 1em;background:#fff}
.rich details>summary{cursor:pointer;font-weight:700;color:#13233F}
.rich details[open]>summary{margin-bottom:.6em}

/* Videos insertados (YouTube, etc.) */
.rich iframe{max-width:100%}
.rich .mce-preview-object,.rich video{max-width:100%}

/* Celular: las imágenes al costado pasan a ocupar el ancho */
@media (max-width:600px){
  .rich figure.image.align-left,.rich figure.image.align-right{float:none;margin:.4em auto 1em}
  .rich img[style*="float"]{float:none!important;display:block;margin:.4em auto 1em!important}
}

/* Dentro del editor */
body.mce-content-body.rich{margin:16px 20px;background:#fff}
.mce-content-body .callout{position:relative}
/* Subtítulos con la barra naranja (igual que en las clases de antes).
   Sin "flex": así una imagen ubicada al costado dentro del subtítulo sigue flotando donde se la puso. */
.rich h2::before,.rich h3::before,.rich h4::before{content:"";display:inline-block;width:6px;height:1.1em;border-radius:3px;background:#FF8A1E;margin-right:10px;vertical-align:-.17em}
.rich td h2::before,.rich td h3::before,.rich td h4::before,.rich th h2::before,.rich th h3::before,.rich th h4::before{display:none}
.rich h2.sin-texto::before,.rich h3.sin-texto::before,.rich h4.sin-texto::before{display:none}
.rich p.rd-hold{margin:0}