:root {
    --color-primary-base: 46 117 163;
    --color-primary-gradient: 36 77 103;
    --color-primary-button-text: 46 117 163;
    --color-primary-button-alternative-text: 255 255 255;

    --color-secondary-base: 243 126 47;
    --color-secondary-gradient: 224 100 16;
    --color-secondary-button-text: 255 255 255;

    --color-tertiary-base: 51 51 51;
    --color-tertiary-gradient: 0 0 0;
    --color-tertiary-button-text: 255 255 255;

    --color-success-base: 119 170 12;
    --color-success-gradient: 83 127 0;
    --color-success-button-text: 255 255 255;

    --color-info-base: 13 123 253;
    --color-info-gradient: 0 84 211;
    --color-info-button-text: 255 255 255;

    --color-warning-base: 245 206 1;
    --color-warning-gradient: 186 152 0;
    --color-warning-button-text: 0 0 0;

    --color-danger-base: 223 59 59;
    --color-danger-gradient: 180 0 21;
    --color-danger-button-text: 255 255 255;

    --color-form-base: 46 117 163;
}
  @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --azul:        #2E5FA3;
    --azul-dark:   #1B3A6B;
    --azul-mid:    #2E5FA3;
    --azul-light:  #D6E4F7;
    --azul-pale:   #EEF4FB;
    --verde:       #2E6B3E;
    --verde-light: #D6EFD8;
    --ambar:       #C05A1B;
    --ambar-light: #FEE8D4;
    --gris-txt:    #4A4A4A;
    --gris-sec:    #4A4A4A;
    --gris-bg:     #F5F7FA;
    --borde:       #DEE4ED;
    --radio:       10px;
    --font-display: 'Open Sans', sans-serif;
    --font-body:    'Roboto Condensed', sans-serif;
  }

  body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.75;
    color: var(--gris-txt);
    background: #fff;
    /*max-width: 860px;*/
    margin: 0 auto;
    padding: 0 1.5rem 4rem;
  }

  /* ── CABECERA DE MÓDULO ── */
  .modulo-header {
    border-top: 4px solid var(--azul);
    padding: 2.5rem 0 2rem;
    margin-bottom: 2rem;
  }
  .modulo-tag {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--azul-mid);
    background: var(--azul-light);
    padding: 4px 12px;
    border-radius: 4px;
    margin-bottom: 1rem;
  }
  .modulo-header h1 {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 600;
    color: var(--azul-dark);
    line-height: 1.25;
    margin-bottom: .5rem;
  }
  .modulo-header .subtitulo {
    font-size: 15px;
    color: var(--gris-sec);
  }
  .meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--borde);
  }
  .meta-item { display: flex; flex-direction: column; gap: 2px; }
  .meta-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--gris-sec); opacity: .7; }
  .meta-value { font-size: 14px; font-weight: 600; color: var(--gris-txt); }

  /* ── SECCIONES ── */
  section { margin-bottom: 2.75rem; }
  .section-eyebrow {
    font-size: 10px; font-weight: 600; letter-spacing: .12em;
    text-transform: uppercase; color: var(--azul-mid);
    margin-bottom: .5rem;
  }
  h2 {
    font-family: var(--font-display);
    font-size: 1.4rem; font-weight: 600;
    color: var(--azul-dark); margin-bottom: 1rem;
    line-height: 1.3;
  }
  h3 {
    font-family: var(--font-body);
    font-size: 1rem; font-weight: 600;
    color: var(--gris-txt); margin-bottom: .4rem; margin-top: 1.25rem;
  }
  p { margin-bottom: .85rem; color: var(--gris-sec); }
  p:last-child { margin-bottom: 0; }

  /* ── CITA / CALLOUT ── */
  .callout {
    border-left: 3px solid var(--azul);
    background: var(--azul-pale);
    padding: 1.1rem 1.4rem;
    border-radius: 0 var(--radio) var(--radio) 0;
    margin: 1.5rem 0;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--azul-dark);
  }

  /* ── RECUADROS ── */
  .box {
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    overflow: hidden;
    margin: 1.25rem 0;
  }
  .box-head {
    padding: .7rem 1.2rem;
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .04em;
  }
  .box-body { padding: 1.1rem 1.4rem; }
  .box-body p { font-size: 15px; }

  .box-azul .box-head  { background: var(--azul); color: #fff; }
  .box-azul .box-body  { background: var(--azul-light); }
  .box-verde .box-head { background: var(--verde); color: #fff; }
  .box-verde .box-body { background: var(--verde-light); }
  .box-ambar .box-head { background: var(--ambar); color: #fff; }
  .box-ambar .box-body { background: var(--ambar-light); }
  .box-gris .box-head  { background: var(--gris-txt); color: #fff; }
  .box-gris .box-body  { background: var(--gris-bg); }

  /* ── LISTA LIMPIA ── */
  ul.lista { list-style: none; padding: 0; margin: .5rem 0; }
  ul.lista li {
    padding: .4rem 0 .4rem 1.4rem;
    position: relative;
    font-size: 15px;
    color: var(--gris-sec);
    border-bottom: 1px solid var(--borde);
  }
  ul.lista li:last-child { border-bottom: none; }
  ul.lista li::before {
    content: "→";
    position: absolute; left: 0;
    color: var(--azul-mid); font-weight: 600;
  }

  ol.numerada { padding-left: 1.4rem; margin: .5rem 0; }
  ol.numerada li {
    font-size: 15px; color: var(--gris-sec);
    padding: .3rem 0; margin-bottom: .2rem;
  }

  /* ── AXIOMAS ── */
  .axiomas { display: flex; flex-direction: column; gap: 10px; margin: 1.25rem 0; }
  .axioma {
    display: flex; gap: 1rem; align-items: flex-start;
    background: var(--azul-pale);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 1rem 1.2rem;
  }
  .axioma-num {
    flex-shrink: 0;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--azul); color: #fff;
    font-weight: 700; font-size: 14px;
    display: flex; align-items: center; justify-content: center;
  }
  .axioma-body strong { display: block; font-size: 14px; color: var(--azul-dark); margin-bottom: 3px; }
  .axioma-body span { font-size: 14px; color: var(--gris-sec); }

  /* ── TABLA ── */
  .tabla-wrap { overflow-x: auto; margin: 1.25rem 0; }
  table { width: 100%; border-collapse: collapse; font-size: 14px; }
  thead tr { background: var(--azul); color: #fff; }
  thead th { padding: .65rem .9rem; text-align: left; font-weight: 600; }
  tbody tr:nth-child(even) { background: var(--gris-bg); }
  tbody td { padding: .6rem .9rem; color: var(--gris-sec); border-bottom: 1px solid var(--borde); vertical-align: top; }

  /* ── VIÑETAS CLÍNICAS ── */
  .vineta {
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    margin: 1rem 0;
    overflow: hidden;
  }
  .vineta-head {
    background: var(--gris-bg);
    border-bottom: 1px solid var(--borde);
    padding: .6rem 1.2rem;
    font-size: 13px; font-weight: 600;
    color: var(--gris-txt);
  }
  .vineta-body { padding: 1rem 1.2rem; font-size: 14.5px; color: var(--gris-sec); }
  .vineta-preguntas {
    background: var(--azul-pale);
    padding: .8rem 1.2rem;
    border-top: 1px solid var(--borde);
  }
  .vineta-preguntas p { font-size: 13px; font-weight: 600; color: var(--azul-dark); margin-bottom: .3rem; }
  .vineta-preguntas ol { padding-left: 1.2rem; font-size: 13.5px; color: var(--gris-sec); }
  .vineta-preguntas ol li { margin-bottom: .25rem; }

  /* ── ACTIVIDADES ── */
  .tarea {
    background: var(--ambar-light);
    border: 1px solid #e8d4b0;
    border-radius: var(--radio);
    padding: 1.2rem 1.4rem;
    margin: 1rem 0;
  }
  .tarea-titulo {
    font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--ambar); margin-bottom: .6rem;
  }
  .tarea p, .tarea li { font-size: 14.5px; color: var(--gris-txt); }

  /* ── AUTOEVALUACIÓN ── */
  .pregunta-ae {
    background: var(--gris-bg);
    border-left: 3px solid var(--azul-mid);
    padding: .9rem 1.2rem;
    margin: .75rem 0;
    border-radius: 0 var(--radio) var(--radio) 0;
    font-size: 15px;
    color: var(--gris-txt);
  }
  .pregunta-num {
    font-size: 11px; font-weight: 700;
    color: var(--azul-mid); margin-bottom: .2rem;
    text-transform: uppercase; letter-spacing: .08em;
  }

  /* ── LECTURAS ── */
  .lectura {
    display: flex; gap: .9rem;
    padding: .8rem 0;
    border-bottom: 1px solid var(--borde);
    font-size: 14px;
  }
  .lectura:last-child { border-bottom: none; }
  .lectura-badge {
    flex-shrink: 0;
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    padding: 3px 8px; border-radius: 4px;
    height: fit-content; margin-top: 2px;
  }
  .badge-ob { background: var(--azul); color: #fff; }
  .badge-rec { background: var(--gris-bg); color: var(--gris-sec); border: 1px solid var(--borde); }
  .lectura-texto { color: var(--gris-sec); line-height: 1.55; }
  .lectura-texto em { font-style: italic; }
  .lectura-nota {
    display: inline-block; margin-top: 3px;
    font-size: 12px; font-weight: 600; color: var(--azul-mid);
  }

  /* ── DIVISOR ── */
  hr { border: none; border-top: 1px solid var(--borde); margin: 2.5rem 0; }


  /*---------------------------
  ---------------------------*/
  .app-sidebar__bottom{
    display: none!important;
  }

 /* ============================================================
 * ACE — INICIO
 * ============================================================
 * Bloque de estilos del proyecto ACE para Chamilo (NO-SCORM).
 * Pegar al final de /themes/chamilo/colors.css.
 *
 * Reglas de convivencia con colors.css existente:
 *   - Variables: prefijos --az/--azM/--azC/--azLL/--vd/--vdC/--nr/--nrC
 *     y --ace-* para tokens auxiliares. No chocan con
 *     --azul/--azul-dark/--verde/--ambar ya definidos.
 *   - Clases: prefijo .ace-* (utilitarias) o contenedor
 *     .tiny-content (selectores automáticos). No se redefinen
 *     body, p, h2, h3, section, table globales.
 *   - Nombres cortos (--az, --vd, --nr) son TOKENS NEUTROS:
 *     primario / éxito / neutro acento. No colores literales.
 *
 * IMPORTANTE — colors.css tiene reglas globales sobre p, h2, h3,
 * section, table que se heredan dentro de .tiny-content. Por eso
 * aquí reforzamos color y tipografía dentro del contenedor para
 * que ACE gane por especificidad sin tocar lo global.
 * ============================================================ */

:root {
  /* Paleta primaria ACE */
  --az:#133451;
  --azM:#1F5A7A;
  --azC:#dce8f7;
  --azLL:#f0f5fc;
  /* Éxito / secundario */
  --vd:#33876E;
  --vdC:#e8f5e9;
  /* Neutro acento */
  --nr:#617079;
  --nrC:#e9eef3;
  /* Texto */
  --ace-gr:#3A3A3A;
  --ace-grS:#6b6b6b;
  /* Estructura */
  --ace-rule:#A7B3BF;
  --ace-cream:#f2f4f8;
  --ace-bl:#ffffff;
  /* Tokens secundarios */
  --ace-tab-border:#D6E4F7;
  --ace-footer-rule:#d4cfc8;
  --ace-progress-fill:#7DB8F7;
}

/* ============================================================
 * Contenedor base — TinyMCE / contenidos editables Chamilo
 * ============================================================
 * Chamilo 2.0 envuelve los contenidos creados con TinyMCE
 * dentro de un .tiny-content. Todo lo que sigue solo aplica
 * dentro de ese contenedor para no afectar la UI de Chamilo.
 * ============================================================ */
.tiny-content {
  font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 400;
  color: var(--ace-gr);
  line-height: 1.75;
  margin: 0 auto;
  padding: 28px 12px;
  background: var(--ace-cream);
}

/* Refuerzo sobre la regla global `p { color: var(--gris-sec); }`
   del colors.css. Sin esto, los párrafos heredan #4A4A4A gris,
   no nuestro --ace-gr. */
.tiny-content p {
  color: var(--ace-gr);
  font-family: inherit;
  font-weight: 400;
  margin-bottom: 0;
}

/* ============================================================
 * TAREAS — patrones automáticos para entregables del curso
 * ============================================================ */

/* Enunciado principal — primer párrafo de la tarea */
.tiny-content > p:first-of-type {
  background: var(--ace-bl);
  border-left: 4px solid var(--az);
  padding: 18px 22px;
  margin-bottom: 18px;
  font-size: .98rem;
  font-weight: 400;
  color: var(--ace-gr);
}

/* Frase puente ("Responde a continuación...") — texto oscuro alto contraste.
   Se excluye el caso donde el tercer <p> es también el último,
   porque entonces NO es un puente entre secciones sino el cierre. */
.tiny-content > p:nth-of-type(3):not(:last-of-type) {
  font-size: .92rem;
  color: var(--az);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 14px 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ace-rule);
  background: transparent;
  border-left: none;
}

/* Párrafos con pregunta — los que empiezan con <strong> */
.tiny-content p:has(> strong:first-child) {
  background: var(--azLL);
  border-left: 4px solid var(--azM);
  padding: 16px 20px;
  margin: 12px 0;
  font-size: .95rem;
  font-weight: 400;
}

/* Etiqueta inicial en negrita ("Primera pregunta", etc.) */
.tiny-content p > strong:first-child {
  color: var(--az);
  font-weight: 700;
  display: inline-block;
  margin-right: 2px;
  text-transform: none;
  letter-spacing: 0;
}

/* Énfasis itálico dentro del cuerpo */
.tiny-content em {
  color: var(--azM);
  font-style: italic;
  font-weight: 500;
}

/* Bloque de "Extensión total" — último párrafo como nota destacada.
   Se excluye el caso donde el último también es el primero
   (tareas con un solo <p>), porque entonces NO es una nota de
   entrega sino el enunciado completo. */
.tiny-content > p:last-of-type:not(:first-of-type) {
  background: var(--vdC);
  border-left: 4px solid var(--vd);
  padding: 14px 18px;
  margin-top: 22px;
  font-size: .9rem;
  font-weight: 400;
  color: var(--ace-gr);
}
.tiny-content > p:last-of-type:not(:first-of-type) strong:first-child {
  color: var(--vd);
}

/* Párrafos vacíos de TinyMCE — colapsar para no abrir huecos enormes */
.tiny-content p:empty,
.tiny-content p:has(> br:only-child) {
  display: none;
}

/* ============================================================
 * CLASES UTILITARIAS ACE — para usar manualmente en tareas
 * complejas que necesiten más control que el de selectores
 * automáticos. Prefijo .ace-* para no chocar con .box, .callout,
 * .tarea ya existentes en colors.css.
 * ============================================================ */

/* Enunciado inicial — el "qué hay que hacer" */
.tiny-content .ace-prompt {
  background: var(--ace-bl);
  border-left: 4px solid var(--az);
  padding: 18px 22px;
  margin: 0 0 18px;
  font-size: .98rem;
  font-weight: 400;
  color: var(--ace-gr);
}

/* Frase puente — separador tipo "Responde a continuación..." */
.tiny-content .ace-bridge {
  font-size: .92rem;
  color: var(--az);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 14px 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ace-rule);
  background: transparent;
  border-left: none;
}

/* Cajas — variantes primaria / éxito / neutro */
.tiny-content .ace-box {
  padding: 18px 20px;
  margin: 14px 0;
  border-left: 4px solid var(--ace-rule);
  background: var(--ace-bl);
  border-radius: 0;
  font-weight: 400;
}
.tiny-content .ace-box--primary {
  background: var(--azLL);
  border-left-color: var(--az);
}
.tiny-content .ace-box--success {
  background: var(--vdC);
  border-left-color: var(--vd);
}
.tiny-content .ace-box--neutral {
  background: var(--nrC);
  border-left-color: var(--nr);
}
.tiny-content .ace-box h4 {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: var(--az);
  font-family: inherit;
}
.tiny-content .ace-box--success h4 { color: var(--vd); }
.tiny-content .ace-box--neutral h4 { color: var(--nr); }

/* Cita destacada — para verbatims y principios */
.tiny-content .ace-callout {
  background: var(--az);
  color: #fff;
  padding: 22px 26px;
  margin: 22px 0;
  border-radius: 0;
}
.tiny-content .ace-callout .src {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: 10px;
  display: block;
}
.tiny-content .ace-callout p {
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  color: #fff;
  margin: 0;
  line-height: 1.65;
  font-size: 1.05rem;
  background: transparent;
  border: none;
  padding: 0;
}

/* Pregunta numerada — para listas de reflexión */
.tiny-content .ace-question {
  background: var(--azLL);
  border-left: 4px solid var(--azM);
  padding: 14px 18px;
  margin: 10px 0;
  font-size: .95rem;
  font-weight: 400;
}
.tiny-content .ace-question-num {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--azM);
  margin-bottom: 4px;
  display: block;
}

/* Nota / instrucciones de entrega */
.tiny-content .ace-deliverable {
  background: var(--vdC);
  border-left: 4px solid var(--vd);
  padding: 14px 18px;
  margin: 18px 0;
  font-size: .9rem;
  font-weight: 400;
}
.tiny-content .ace-deliverable strong { color: var(--vd); }

/* Responsive */
@media (max-width: 620px) {
  .tiny-content {
    padding: 18px 8px;
  }
  .tiny-content > p:first-of-type,
  .tiny-content > p:last-of-type,
  .tiny-content p:has(> strong:first-child),
  .tiny-content .ace-prompt,
  .tiny-content .ace-box,
  .tiny-content .ace-callout,
  .tiny-content .ace-question,
  .tiny-content .ace-deliverable {
    padding: 14px 16px;
  }
}

/* ============================================================
 * ACE — FIN
 * ============================================================ */