/* =============================================================================
   Educación Financiera para la Vida Dominicana — estilos del curso.
   Dos bloques: el teléfono de Banco MiCurso y los elementos de la lección.
   ========================================================================== */

/* ==========================================================  el teléfono  == */
/* Abajo a la derecha ya vive MCbot (#mcbot: right 20, bottom 20, alto ~56).
   El teléfono se apila encima, no al lado: en pantallas estrechas pelearse
   por esa esquina deja uno de los dos inservible. */

.bmc {
  position: fixed;
  right: 20px;
  bottom: 88px;
  z-index: 96;
  font-family: inherit;
  transition: right .22s ease, opacity .18s ease;
}

/* Con el chat de MCbot abierto (panel de 400 px a la derecha) el teléfono se
   corre a su izquierda, para que se puedan usar los dos a la vez. */
.bmc.bmc-apartado { right: 436px; bottom: 20px; }

/* Por debajo de 820 px no caben lado a lado: mientras el chat esté abierto el
   teléfono se recoge, y vuelve solo al cerrarlo. */
@media (max-width: 820px) {
  .bmc.bmc-apartado { opacity: 0; pointer-events: none; }
}

.bmc-abrir {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 12px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #0f766e, #059669);
  color: #fff;
  box-shadow: 0 10px 26px rgba(4, 68, 60, .32);
  cursor: pointer;
  font-size: 14px;
  transition: transform .15s, box-shadow .15s;
}

.bmc-abrir:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(4, 68, 60, .4); }

.bmc-abrir-ico { font-size: 22px; }

.bmc-abrir-txt { display: flex; flex-direction: column; line-height: 1.25; text-align: left; }

.bmc-abrir-txt b { font-weight: 700; }

.bmc-abrir-saldo { font-size: 12px; opacity: .88; font-variant-numeric: tabular-nums; }

.bmc.abierto .bmc-abrir { display: none; }

/* --- el marco ------------------------------------------------------------- */

.bmc-marco {
  width: 340px;
  max-height: min(calc(100vh - 130px), 700px);
  display: flex;
  flex-direction: column;
  border-radius: 34px;
  background: #0b1220;
  border: 9px solid #151d2e;
  box-shadow: 0 26px 60px rgba(2, 18, 30, .45);
  overflow: hidden;
  color: #e6edf6;
}

.bmc-notch {
  height: 20px;
  flex: none;
  background: #151d2e;
  border-radius: 0 0 14px 14px;
  width: 120px;
  margin: 0 auto;
}

.bmc-cab {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px 4px;
}

.bmc-logo { font-size: 14px; letter-spacing: .2px; color: #8fe8d2; }

.bmc-logo b { color: #fff; }

.bmc-cerrar {
  border: 0;
  background: transparent;
  color: #7f8ea8;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.bmc-cerrar:hover { color: #fff; }

.bmc-saldo-caja {
  flex: none;
  padding: 10px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: linear-gradient(135deg, #0f766e, #065f46);
}

.bmc-saldo-caja .bmc-etq { font-size: 11px; text-transform: uppercase; letter-spacing: .7px; color: #a7f3d0; }

.bmc-saldo { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }

.bmc-sub { font-size: 11.5px; color: #c9f5e6; min-height: 15px; font-variant-numeric: tabular-nums; }

.bmc-aviso {
  flex: none;
  margin: 8px 12px 0;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.45;
  background: #1e293b;
  border-left: 3px solid #64748b;
}

.bmc-aviso.bmc-bien { background: #052e26; border-left-color: #10b981; color: #a7f3d0; }

.bmc-aviso.bmc-mal { background: #3b0d0d; border-left-color: #ef4444; color: #fecaca; }

.bmc-aviso.bmc-alerta { background: #3a2c07; border-left-color: #f59e0b; color: #fde68a; }

.bmc-aviso.bmc-info { background: #1e293b; border-left-color: #60a5fa; color: #dbeafe; }

.bmc-vista {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 12px 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scrollbar-width: thin;
}

.bmc-nav {
  flex: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid #1e293b;
  background: #0d1526;
}

.bmc-tab {
  border: 0;
  background: transparent;
  color: #64748b;
  padding: 9px 2px 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 10px;
}

.bmc-tab span:first-child { font-size: 17px; }

.bmc-tab:hover { color: #94a3b8; }

.bmc-tab.on { color: #34d399; }

/* --- piezas de dentro ----------------------------------------------------- */

.bmc-titulo-sec {
  margin: 8px 0 2px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: #7f8ea8;
}

.bmc-mosaico { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.bmc-cuadro {
  background: #131d30;
  border: 1px solid #1e2b45;
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.bmc-cuadro.bmc-ancho { grid-column: 1 / -1; }

.bmc-cuadro b { font-size: 16px; font-variant-numeric: tabular-nums; }

.bmc-etq { font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; color: #7f8ea8; }

.bmc-nota { font-size: 11.5px; color: #94a3b8; line-height: 1.45; }

.bmc-acciones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

.bmc-btn {
  border: 1px solid #2b6d5d;
  background: #0f3c34;
  color: #a7f3d0;
  border-radius: 9px;
  padding: 9px 13px;
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
  transition: background .13s;
}

.bmc-btn:hover:not(:disabled) { background: #14584b; }

.bmc-btn:disabled { opacity: .45; cursor: default; }

.bmc-btn.bmc-mini { padding: 6px 11px; font-size: 12px; }

.bmc-fila {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  padding: 5px 2px;
  border-bottom: 1px dashed #1e2b45;
}

.bmc-fila b { font-variant-numeric: tabular-nums; }

.bmc-fila.bmc-total { border-bottom: 0; border-top: 2px solid #2b6d5d; margin-top: 4px; padding-top: 8px; }

.bmc-fila.bmc-total b { color: #34d399; font-size: 14px; }

.bmc-mov {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 10px;
  background: #131d30;
  border-left: 3px solid #ef4444;
}

.bmc-mov.bmc-entra { border-left-color: #10b981; }
.bmc-mov.bmc-prestado { border-left-color: #f59e0b; }
.bmc-prestado .bmc-monto { color: #fbbf24; }

.bmc-mov.bmc-tj { border-left-color: #f59e0b; }

.bmc-mov b { display: block; font-size: 12.5px; font-weight: 600; }

.bmc-mov span { font-size: 11px; color: #7f8ea8; }

.bmc-monto { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }

.bmc-entra .bmc-monto { color: #34d399; }

.bmc-desglose {
  margin: -2px 0 6px 12px;
  padding: 8px 11px;
  border-left: 2px solid #1e2b45;
  background: #0e1626;
  border-radius: 0 10px 10px 0;
}

.bmc-servicio {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 11px;
  border-radius: 10px;
  background: #131d30;
}

.bmc-servicio b { display: block; font-size: 12.5px; }

.bmc-servicio span { font-size: 11px; color: #7f8ea8; }

.bmc-meta {
  background: #131d30;
  border: 1px solid #1e2b45;
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bmc-meta.bmc-lograda { border-color: #10b981; background: #0c2c24; }

.bmc-barra { height: 7px; border-radius: 999px; background: #1e2b45; overflow: hidden; }

.bmc-barra i { display: block; height: 100%; background: linear-gradient(90deg, #10b981, #34d399); transition: width .35s; }

.bmc-tarjeta {
  border-radius: 14px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #1e3a8a, #4c1d95);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.bmc-tarjeta b { font-size: 24px; font-variant-numeric: tabular-nums; }

.bmc-tarjeta .bmc-nota { color: #c7d2fe; }

.bmc-tarjeta .bmc-etq { color: #c7d2fe; }

.bmc-aclara {
  font-size: 11.5px;
  color: #94a3b8;
  line-height: 1.55;
  background: #111b2c;
  border-radius: 9px;
  padding: 9px 11px;
  margin-top: 6px;
}

.bmc-vacio { font-size: 12.5px; color: #94a3b8; line-height: 1.55; padding: 14px 4px; text-align: center; }

@media (max-width: 720px) {.bmc { right: 12px; bottom: 74px; left: 12px; }

.bmc-marco { width: auto; max-height: calc(100vh - 150px); }

.bmc-abrir { width: 100%; justify-content: center; }
}

/* =========================================  elementos de la lección  ====== */
/* Sin prefijo de contenedor: estas clases son de este curso y funcionan igual
   en las páginas normales (.cuerpo-rico) que en las libres (.curso-libre).    */

.tarea-banco {
  border: 1px solid #99f6e4;
  border-left: 5px solid #0d9488;
  background: #f0fdfa;
  border-radius: 12px;
  padding: 16px 18px;
  margin: 22px 0;
}
.tarea-banco > h4 { margin: 0 0 6px; font-size: 16px; color: #0f766e; }
.tarea-banco p:last-of-type { margin-bottom: 0; }
.tarea-banco.hecha { border-color: #6ee7b7; background: #ecfdf5; }

.tarea-pie {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.tarea-pie .bmc-btn { border-color: #0d9488; background: #0d9488; color: #fff; }
.tarea-pie .bmc-btn:hover:not(:disabled) { background: #0f766e; }
.tarea-sello {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
}
.tarea-sello.listo { background: #d1fae5; color: #065f46; }

.accion-banco {
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
  padding: 14px 16px;
  margin: 20px 0;
}
.accion-banco p { margin: 0 0 10px; }
.accion-banco .bmc-btn { border-color: #1d4ed8; background: #1d4ed8; color: #fff; }
.accion-banco .bmc-btn:hover:not(:disabled) { background: #1e40af; }

.escenario {
  border: 1px solid #fed7aa;
  border-left: 5px solid #f97316;
  background: #fff7ed;
  border-radius: 12px;
  padding: 16px 18px;
  margin: 24px 0;
}
.escenario > h4 { margin: 0 0 8px; font-size: 16px; color: #9a3412; }
.escenario .opciones {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.escenario .opciones li { margin: 0; }

.escenario-op {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid #fdba74;
  background: #fff;
  color: #7c2d12;
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .13s, background .13s;
}
.escenario-op:hover:not(:disabled) { border-color: #ea580c; background: #ffedd5; }
.escenario-op:disabled { opacity: .6; cursor: default; }
.escenario-op.elegida {
  border-color: #ea580c;
  border-width: 2px;
  background: #ffedd5;
  font-weight: 600;
  opacity: 1;
}

.escenario-resultado {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.6;
}
.escenario-resultado.bien  { background: #ecfdf5; border: 1px solid #6ee7b7; color: #065f46; }
.escenario-resultado.alerta { background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; }
.escenario-resultado.mal   { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; }
.escenario-resultado.info  { background: #eff6ff; border: 1px solid #93c5fd; color: #1e40af; }

/* --- piezas de contenido -------------------------------------------------- */

.dato-rd {
  border-left: 4px solid #2563eb;
  background: #eff6ff;
  border-radius: 0 10px 10px 0;
  padding: 13px 16px;
  margin: 20px 0;
  font-size: 14.5px;
}
.dato-rd strong { color: #1e3a8a; }
.dato-rd p:last-child, .dato-rd ul:last-child { margin-bottom: 0; }

.ojo {
  border-left: 4px solid #dc2626;
  background: #fef2f2;
  border-radius: 0 10px 10px 0;
  padding: 13px 16px;
  margin: 20px 0;
  font-size: 14.5px;
}
.ojo strong { color: #991b1b; }
.ojo p:last-child { margin-bottom: 0; }

.tabla-plata {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 14px;
  display: block;
  overflow-x: auto;
}
.tabla-plata th,
.tabla-plata td {
  border: 1px solid #e2e8f0;
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
}
.tabla-plata th { background: #f1f5f9; font-weight: 600; }
.tabla-plata td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla-plata tr.destaca td { background: #fef9c3; font-weight: 600; }

figure.foto { margin: 24px 0; }
figure.foto img { width: 100%; border-radius: 12px; display: block; margin: 0; }
figure.foto figcaption {
  font-size: 12px;
  color: #64748b;
  margin-top: 7px;
  line-height: 1.5;
}
figure.foto figcaption a { color: #64748b; }

/* --- las páginas «libre» no heredan tipografía del aula: se la pone el curso */

.curso-libre { font-size: 16.4px; line-height: 1.75; color: #2f3545; }
.curso-libre h2 { font-size: 1.5rem; margin: 1.9em 0 .55em; }
.curso-libre h3 { font-size: 1.16rem; margin: 1.6em 0 .45em; }
.curso-libre p { margin: 0 0 1.15em; }
.curso-libre ul, .curso-libre ol { margin: 0 0 1.2em; padding-left: 1.35em; }
.curso-libre li { margin-bottom: .42em; }
.curso-libre a { color: #0f766e; }

.entradilla {
  font-size: 18px;
  line-height: 1.65;
  color: #475569;
  border-left: 3px solid #0d9488;
  padding-left: 16px;
  margin: 0 0 1.6em;
}
.nota-legal { color: #64748b; line-height: 1.6; }