/* Estilos generales del sistema — Contigo Perú */

  body { font-family: -apple-system, 'Segoe UI', sans-serif; }
  .btn-menu.activo { background: #5A2E14; color: white; }
  .btn-menu { color: #E4C2A6; }
  .btn-menu:hover { background: rgba(255,255,255,0.08); color: white; }
  label.campo { display: block; font-size: 12px; font-weight: 500; color: #0B3A7E; margin-bottom: 4px; margin-top: 14px; }
  input.campo, select.campo { width: 100%; padding: 8px 12px; border: 1px solid #C6DBF5; border-radius: 8px; font-size: 14px; }
  input.campo:focus, select.campo:focus { outline: none; border-color: #1565D8; }
  select.campo:disabled, input.campo:disabled { background: #D6E6FB; color: #7C9CC8; }
  #form-nueva-solicitud select.campo:disabled, #form-nueva-solicitud input.campo:disabled, #form-nueva-solicitud textarea.campo:disabled, #modal-evaluacion-revision textarea.campo:disabled { color: #071430; font-weight: 600; -webkit-text-fill-color: #071430; opacity: 1; }
  #modal-evaluacion-revision select.campo:disabled, #modal-evaluacion-revision input.campo:disabled { color: #071430; font-weight: 600; -webkit-text-fill-color: #071430; opacity: 1; }
  h4.seccion { font-size: 13px; font-weight: 700; color: #0B3A7E; text-transform: uppercase; letter-spacing: 0.4px; margin: 22px 0 4px 0; padding-top: 14px; border-top: 1px solid #D6E6FB; }
  h4.seccion:first-child { margin-top: 0; padding-top: 0; border-top: none; }

/* =====================================================   Metas y Desempeño (prefijo mk-)
   ============================================================ */
  .mk-tabs { display: flex; gap: 4px; overflow-x: auto; padding: 4px; margin-bottom: 18px; background: #EEF5FE; border: 1px solid #D6E6FB; border-radius: 12px; -webkit-overflow-scrolling: touch; }
  .mk-tab { flex: 0 0 auto; padding: 8px 16px; border-radius: 9px; font-size: 13px; font-weight: 500; color: #0B3A7E; background: transparent; white-space: nowrap; transition: background .15s, color .15s; }
  .mk-tab:hover { background: #D6E6FB; }
  .mk-tab.activo { background: #0B1F3F; color: #fff; box-shadow: 0 1px 3px rgba(11,31,63,.25); }
  .mk-tab:focus-visible, .mk-btn:focus-visible { outline: 2px solid #1565D8; outline-offset: 2px; }

  .mk-panel { background: #fff; border: 1px solid #D6E6FB; border-radius: 16px; padding: 18px; margin-bottom: 20px; }
  .mk-panel-cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 12px; }
  .mk-panel-cab h3 { font-size: 15px; font-weight: 600; color: #0B3A7E; }
  .mk-panel-cab p { font-size: 12px; color: #4F6B95; }
  .mk-seccion { font-size: 11px; font-weight: 700; color: #4F6B95; text-transform: uppercase; letter-spacing: .5px; margin: 20px 0 4px; padding-top: 14px; border-top: 1px solid #D6E6FB; }
  .mk-seccion:first-of-type { margin-top: 8px; padding-top: 0; border-top: none; }
  .mk-ayuda { font-size: 11px; color: #4F6B95; margin-top: 3px; line-height: 1.35; }

  .mk-btn { font-size: 13px; font-weight: 500; padding: 8px 14px; border-radius: 8px; transition: background .15s; white-space: nowrap; }
  .mk-btn-primario { background: #1565D8; color: #fff; font-weight: 600; }
  .mk-btn-primario:hover:not(:disabled) { background: #0F4FB0; }
  .mk-btn-oscuro { background: #0B1F3F; color: #fff; }
  .mk-btn-oscuro:hover:not(:disabled) { background: #081833; }
  .mk-btn-claro { background: #EEF5FE; color: #0B3A7E; }
  .mk-btn-claro:hover:not(:disabled) { background: #D6E6FB; }
  .mk-btn:disabled { opacity: .5; cursor: not-allowed; }

  .mk-msg { font-size: 12px; margin-top: 10px; padding: 8px 12px; border-radius: 8px; }
  .mk-msg:empty { display: none; }
  .mk-msg.ok { background: #ECFDF5; color: #047857; }
  .mk-msg.error { background: #FFF1F2; color: #BE123C; }
  .mk-msg.info { background: #EEF5FE; color: #0B3A7E; }
  .mk-cargando { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #4F6B95; padding: 14px 4px; }
  .mk-cargando::before { content: ""; width: 14px; height: 14px; border: 2px solid #C6DBF5; border-top-color: #1565D8; border-radius: 50%; animation: mk-giro .7s linear infinite; }
  @keyframes mk-giro { to { transform: rotate(360deg); } }

  .mk-vacio { text-align: center; color: #4F6B95; font-size: 13px; padding: 32px 12px; }

  .mk-chip { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
  .mk-chip.ok { background: #ECFDF5; color: #047857; }
  .mk-chip.alerta { background: #FFFBEB; color: #B45309; }
  .mk-chip.mal { background: #FFF1F2; color: #BE123C; }
  .mk-chip.neutro { background: #EEF5FE; color: #4F6B95; }
  .mk-chip.info { background: #F0F9FF; color: #0369A1; }

  .mk-cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; background: #fff; border: 1px solid #D6E6FB; border-radius: 16px; padding: 14px 18px; margin-bottom: 14px; }
  .mk-cabecera .mk-quien { font-size: 18px; font-weight: 700; color: #071430; }
  .mk-cabecera .mk-periodo { font-size: 12px; color: #4F6B95; }

  .mk-kpi { background: #fff; border: 1px solid #D6E6FB; border-radius: 16px; padding: 14px 16px; border-top-width: 4px; }
  .mk-kpi .t { font-size: 11px; font-weight: 700; color: #4F6B95; text-transform: uppercase; letter-spacing: .4px; }
  .mk-kpi .v { font-size: 28px; font-weight: 700; color: #071430; line-height: 1.15; margin-top: 4px; }
  .mk-kpi .s { font-size: 12px; color: #4F6B95; margin-top: 2px; }
  .mk-kpi.verde { border-top-color: #10B981; } .mk-kpi.azul { border-top-color: #0EA5E9; }
  .mk-kpi.ambar { border-top-color: #F59E0B; } .mk-kpi.rojo { border-top-color: #F43F5E; }
  .mk-kpi.gris { border-top-color: #9DB8DD; }
  .mk-mini { background: #fff; border: 1px solid #D6E6FB; border-radius: 12px; padding: 10px 12px; text-align: center; }
  .mk-mini .t { font-size: 10px; color: #4F6B95; text-transform: uppercase; letter-spacing: .4px; }
  .mk-mini .v { font-size: 17px; font-weight: 600; color: #0B3A7E; margin-top: 2px; }

  .mk-barra { height: 7px; background: #D6E6FB; border-radius: 999px; overflow: hidden; margin-top: 8px; }
  .mk-barra > span { display: block; height: 100%; border-radius: 999px; background: #10B981; transition: width .4s; }
  .mk-barra.alerta > span { background: #F59E0B; } .mk-barra.mal > span { background: #F43F5E; } .mk-barra.neutro > span { background: #9DB8DD; }

  .mk-lista > div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px dashed #DCE8F8; font-size: 13px; }
  .mk-lista > div:last-child { border-bottom: none; }
  .mk-lista .k { color: #4F6B95; } .mk-lista .v { color: #12284D; font-weight: 500; text-align: right; }
  .mk-lista .total { font-weight: 700; border-top: 1px solid #D6E6FB; border-bottom: none; padding-top: 8px; margin-top: 4px; }
  .mk-lista .total .k { color: #0B3A7E; } .mk-lista .total .v { color: #1565D8; }
  .mk-subtitulo { font-size: 11px; font-weight: 700; color: #4F6B95; text-transform: uppercase; letter-spacing: .5px; margin: 14px 0 4px; }
  .mk-nota { font-size: 11px; color: #4F6B95; line-height: 1.4; margin-top: 8px; }
  .mk-nota.alerta { color: #B45309; }

  .mk-tabla-caja { overflow-x: auto; border: 1px solid #D6E6FB; border-radius: 12px; background: #fff; }
  .mk-tabla { width: 100%; font-size: 13px; border-collapse: separate; border-spacing: 0; }
  .mk-tabla thead th { background: #EEF5FE; color: #4F6B95; font-size: 11px; text-transform: uppercase; letter-spacing: .3px; padding: 9px 12px; white-space: nowrap; font-weight: 600; }
  .mk-tabla thead tr.grupos th { text-align: center; color: #0B3A7E; border-bottom: 1px solid #C6DBF5; border-left: 1px solid #C6DBF5; }
  .mk-tabla tbody td, .mk-tabla tfoot td { padding: 10px 12px; border-top: 1px solid #D6E6FB; white-space: nowrap; }
  .mk-tabla tbody tr:hover td { background: #F7FAFF; }
  .mk-tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
  .mk-tabla tfoot td { background: #F5F9FF; font-weight: 700; color: #0B3A7E; }
  .mk-tabla .fijo1, .mk-tabla .fijo2 { position: sticky; background: #fff; z-index: 1; }
  .mk-tabla thead .fijo1, .mk-tabla thead .fijo2, .mk-tabla tfoot .fijo1, .mk-tabla tfoot .fijo2 { background: #EEF5FE; }
  .mk-tabla tfoot .fijo1, .mk-tabla tfoot .fijo2 { background: #F5F9FF; }
  .mk-tabla tbody tr:hover .fijo1, .mk-tabla tbody tr:hover .fijo2 { background: #F7FAFF; }
  .mk-tabla .fijo1 { left: 0; min-width: 64px; } .mk-tabla .fijo2 { left: 64px; box-shadow: 2px 0 3px -2px rgba(11,31,63,.25); }

  .mk-detalle summary { cursor: pointer; font-size: 12px; font-weight: 600; color: #0B3A7E; padding: 6px 0; }
  .mk-detalle .fila-cli { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px dashed #F0DCC8; font-size: 12px; }
  .mk-detalle .fila-cli:last-child { border-bottom: none; }
  .mk-detalle .dni { color: #4F6B95; font-size: 11px; }

  @media (max-width: 640px) {
    .mk-panel { padding: 14px; } .mk-kpi .v { font-size: 24px; }
  }
/* ---------- Menú lateral en acordeón (js/32-menu-acordeon.js) ----------
   Solo visual. Las 7 categorías tienen el mismo alto (40px) y ancho
   (todo el menú); el ícono va en una caja fija para que los textos queden
   alineados aunque cada emoji mida distinto. Una sola categoría abierta. */
  @media (min-width: 768px) { aside.menu-lateral { width: 264px; } }
  .menu-grupo + .menu-grupo { margin-top: 6px; }
  .menu-grupo-titulo {
    display: flex; align-items: center; gap: 8px; width: 100%; height: 40px;
    padding: 0 10px 0 8px; border-radius: 8px; border: 0; cursor: pointer;
    background: rgba(255,255,255,0.05); color: #D6E4F7; text-align: left;
    font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
  }
  .menu-grupo-titulo:hover { background: rgba(255,255,255,0.10); color: #fff; }
  .menu-grupo-titulo:focus-visible { outline: 2px solid #F3A26B; outline-offset: 2px; }
  .menu-grupo.abierto > .menu-grupo-titulo { background: #1565D8; color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.25); }
  .menu-grupo.abierto > .menu-grupo-titulo:hover { background: #0F4FB0; }
  /* Categoría cerrada que contiene el módulo abierto: marca naranja a la izquierda */
  .menu-grupo.tiene-activo:not(.abierto) > .menu-grupo-titulo { box-shadow: inset 3px 0 0 #1565D8; color: #fff; }
  .menu-grupo-icono { flex: 0 0 22px; text-align: center; font-size: 14px; line-height: 1; }
  .menu-grupo-texto { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .menu-grupo-flecha { flex: 0 0 16px; width: 16px; height: 16px; opacity: .8; transition: transform .25s ease; }
  .menu-grupo.abierto .menu-grupo-flecha { transform: rotate(90deg); opacity: 1; }
  /* Apertura animada: el alto pasa de 0 al contenido real */
  .menu-grupo-items { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }
  .menu-grupo.abierto > .menu-grupo-items { grid-template-rows: 1fr; }
  .menu-grupo-lista { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 2px; margin-left: 18px; padding-left: 8px; border-left: 1px solid rgba(214,228,247,0.18); }
  .menu-grupo.abierto .menu-grupo-lista { padding-top: 6px; padding-bottom: 4px; }
  .menu-grupo-lista .btn-menu { position: relative; width: 100%; padding: 7px 10px; font-size: 13.5px; line-height: 1.3; border-radius: 6px; overflow: hidden; text-overflow: ellipsis; }
  .menu-grupo-lista .btn-menu.activo { font-weight: 600; }
  .menu-grupo-lista .btn-menu.activo::before { content: ""; position: absolute; left: -9px; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: #1565D8; }
  .menu-grupo.sin-modulos { display: none; }

  /* Celular: el menú es una fila que se desliza; se ve todo como antes (sin acordeón) */
  @media (max-width: 767px) {
    .menu-grupo, .menu-grupo-items, .menu-grupo-lista { display: contents; }
    .menu-grupo.sin-modulos { display: none; }
    .menu-grupo + .menu-grupo { margin-top: 0; }
    .menu-grupo-titulo, .menu-grupo.abierto > .menu-grupo-titulo { flex: 0 0 auto; width: auto; height: auto; padding: 6px 10px; background: #1565D8; color: #fff; box-shadow: none; cursor: default; }
    .menu-grupo-flecha { display: none; }
    .menu-grupo-lista .btn-menu { width: auto; padding: 8px 12px; font-size: 14px; }
    .menu-grupo-lista .btn-menu.activo::before { display: none; }
  }

/* Íconos de línea (SVG) dentro de botones: toman el color del texto */
.ico { width: 1.05em; height: 1.05em; flex-shrink: 0; display: inline-block; vertical-align: -0.15em; margin-right: .4em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Altura uniforme de las filas de datos en todas las tablas (no afecta el
   encabezado). 44 px: estándar de sistemas financieros modernos. Si el
   contenido necesita dos líneas, la fila crece sola. */
main table tbody tr { height: 44px; }
main table tbody td:not([colspan]) { padding-top: 10px !important; padding-bottom: 10px !important; vertical-align: middle; }
main table tbody td { white-space: nowrap; }
main table tbody td .celda-recortada { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Campo con error de validación (Solicitudes): se resalta y se enfoca desde resaltarCampoSolicitud() */
.campo-invalido { border-color: #E11D48 !important; box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.15); }
/* Columnas secundarias de la lista de Solicitudes: solo se ven en pantallas anchas (el <style> de index.html fuerza .hidden con !important, por eso no se usa esa clase) */
.col-secundaria { display: none; }
@media (min-width: 1536px) { .col-secundaria { display: table-cell; } }
/* Barra fija del formulario de Solicitudes: el scroll de la página lo hace <main>, que debe dejar de recortar para que position:sticky funcione */
main.sol-sticky-activo { overflow: visible; }
/* Lista de Solicitudes en celular: cada fila se muestra como tarjeta (los textos de cada dato salen de data-label) */
@media (max-width: 767px) {
  #sol-vista-lista table, #tabla-solicitudes { display: block; min-width: 0 !important; width: 100%; }
  #sol-vista-lista thead { display: none; }
  main #tabla-solicitudes tr { display: block; height: auto; margin: 10px; padding: 8px 14px; border: 1px solid #D6E6FB !important; border-radius: 12px; background: #fff; }
  main #tabla-solicitudes td { white-space: normal; display: flex !important; justify-content: space-between; align-items: center; gap: 14px; padding: 4px 0 !important; text-align: right !important; }
  #tabla-solicitudes td::before { content: attr(data-label); color: #4F6B95; font-size: 11px; text-align: left; flex-shrink: 0; }
  #tabla-solicitudes td.col-secundaria { display: none !important; }
}
/* Avisos numéricos en el menú lateral (Solicitudes: observadas tuyas; Revisión: pendientes) */
.badge-menu { display: inline-block; min-width: 18px; margin-left: 8px; padding: 1px 6px; border-radius: 999px; background: #E11D48; color: #fff; font-size: 11px; font-weight: 700; line-height: 16px; text-align: center; vertical-align: middle; }
.badge-menu[hidden] { display: none; }

/* Botón "Actualizar" de cada módulo: el icono gira mientras recarga */
@keyframes giro-actualizar { to { transform: rotate(-360deg); } }
.btn-actualizar.cargando .ico { animation: giro-actualizar .9s linear infinite; }
.btn-actualizar:disabled { opacity: .7; cursor: wait; }
  /* ---- Tarjetas ejecutivas de los reportes gerenciales (Cobranza / Comercial) ---- */
  .kpi-card { position: relative; background: #fff; border: 1px solid #D6E6FB; border-left: 4px solid #7C9CC8; border-radius: 14px; padding: 14px 16px; box-shadow: 0 1px 2px rgba(11,58,126,.06); }
  .kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .kpi-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #4F6B95; }
  .kpi-icono { font-size: 16px; line-height: 1; }
  .kpi-valor { font-size: 22px; font-weight: 700; color: #0B1F3F; margin-top: 6px; font-variant-numeric: tabular-nums; line-height: 1.15; }
  .kpi-sub { font-size: 11px; color: #4F6B95; margin-top: 4px; }
  .kpi-ok { border-left-color: #059669; } .kpi-ok .kpi-valor { color: #047857; }
  .kpi-alerta { border-left-color: #D97706; } .kpi-alerta .kpi-valor { color: #B45309; }
  .kpi-peligro { border-left-color: #E11D48; } .kpi-peligro .kpi-valor { color: #E11D48; }
  .kpi-info { border-left-color: #1565D8; } .kpi-info .kpi-valor { color: #0B3A7E; }
  .tabular-nums { font-variant-numeric: tabular-nums; }
  .rep-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
  .rep-tarjetas.hidden { display: none; }
.barra-actualizar-cabecera { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 2px; white-space: nowrap; }
.barra-actualizar-cabecera.hidden { display: none; }
.barra-actualizar-cabecera .btn-actualizar { display: inline-flex; align-items: center; gap: 3px; }
.barra-actualizar-cabecera .ico { width: 12px; height: 12px; }

/* =====================================================
   Modal de pago de cuota (prefijo pcm-) — solo presentación
   ===================================================== */
  textarea.campo { width: 100%; padding: 8px 12px; border: 1px solid #C6DBF5; border-radius: 8px; font-size: 14px; resize: vertical; }
  textarea.campo:focus { outline: none; border-color: #1565D8; }
  #modal-pago-cuota .hidden { display: none !important; }
  #modal-pago-cuota label.campo { margin-top: 10px; }
  #modal-pago-cuota .pcm-panel { background: #fff; border-radius: 16px; width: 100%; max-width: 640px; max-height: 94vh; display: flex; flex-direction: column; box-shadow: 0 20px 50px rgba(7,20,48,.35); overflow: hidden; }
  #modal-pago-cuota .pcm-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid #D6E6FB; flex-shrink: 0; }
  #modal-pago-cuota .pcm-cab h3 { font-size: 18px; font-weight: 700; color: #0B3A7E; line-height: 1.2; }
  #modal-pago-cuota .pcm-cab-cliente { font-size: 13px; color: #4F6B95; margin-top: 2px; }
  #modal-pago-cuota .pcm-cab-cliente strong { color: #12284D; font-weight: 600; }
  #modal-pago-cuota .pcm-cerrar { color: #4F6B95; font-size: 18px; line-height: 1; padding: 4px 8px; border-radius: 8px; }
  #modal-pago-cuota .pcm-cerrar:hover { background: #EEF5FE; color: #0B3A7E; }
  #modal-pago-cuota #pc-historial { padding: 12px 20px 0; max-height: 34vh; overflow-y: auto; flex-shrink: 0; }
  #modal-pago-cuota #pc-historial:empty { display: none; }
  #modal-pago-cuota #pc-form-nuevo-pago { display: flex; flex-direction: column; min-height: 0; flex: 1; }
  #modal-pago-cuota .pcm-cuerpo { padding: 14px 20px 8px; overflow-y: auto; flex: 1; min-height: 0; }
  #modal-pago-cuota .pcm-pie { padding: 12px 20px; border-top: 1px solid #D6E6FB; background: #F5F9FF; flex-shrink: 0; }
  #modal-pago-cuota .pcm-resumen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  #modal-pago-cuota .pcm-dato { background: #EEF5FE; border-radius: 10px; padding: 8px 10px; min-width: 0; }
  #modal-pago-cuota .pcm-dato small { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: #4F6B95; }
  #modal-pago-cuota .pcm-dato span { display: block; font-size: 15px; font-weight: 600; color: #12284D; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
  #modal-pago-cuota .pcm-dato.pcm-destacado { background: #FDE8E3; }
  #modal-pago-cuota .pcm-dato.pcm-destacado span { color: #E11D48; }
  #modal-pago-cuota .pcm-sec { font-size: 11px; font-weight: 700; color: #4F6B95; text-transform: uppercase; letter-spacing: .5px; margin: 16px 0 2px; padding-top: 12px; border-top: 1px solid #D6E6FB; }
  #modal-pago-cuota .pcm-sec:first-child { margin-top: 0; padding-top: 0; border-top: none; }
  #modal-pago-cuota .pcm-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
  #modal-pago-cuota .pcm-ayuda { font-size: 11px; color: #4F6B95; margin-top: 4px; line-height: 1.35; }
  #modal-pago-cuota .pcm-monto-input { font-size: 20px !important; font-weight: 700; color: #0B3A7E; font-variant-numeric: tabular-nums; }
  #modal-pago-cuota .pcm-acciones-monto { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
  #modal-pago-cuota .pcm-chip { font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; }
  #modal-pago-cuota .pcm-aviso { display: flex; align-items: flex-start; gap: 8px; border-radius: 10px; padding: 8px 12px; margin-top: 10px; font-size: 12px; cursor: pointer; }
  #modal-pago-cuota .pcm-aviso input { margin-top: 2px; flex-shrink: 0; }
  #modal-pago-cuota .pcm-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
  #modal-pago-cuota .pcm-total small { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: #4F6B95; font-weight: 600; }
  #modal-pago-cuota .pcm-total strong { font-size: 24px; font-weight: 800; color: #0B3A7E; font-variant-numeric: tabular-nums; }
  #modal-pago-cuota .pcm-botones { display: flex; gap: 8px; }
  #modal-pago-cuota .pcm-botones #btn-guardar-pago { flex: 1; padding: 11px 16px; font-size: 15px; }
  #modal-pago-cuota .pcm-botones #btn-guardar-pago:disabled { opacity: .6; cursor: not-allowed; }
  #modal-pago-cuota .pcm-atajos { font-size: 11px; color: #4F6B95; margin-top: 8px; }
  #modal-pago-cuota .pcm-atajos kbd { font-family: inherit; font-weight: 600; background: #fff; border: 1px solid #C6DBF5; border-radius: 4px; padding: 0 5px; color: #0B3A7E; }
  @media (max-width: 520px) {
    #modal-pago-cuota .pcm-resumen { grid-template-columns: repeat(2, 1fr); }
    #modal-pago-cuota .pcm-grid2 { grid-template-columns: 1fr; }
    #modal-pago-cuota .pcm-atajos { display: none; }
    #modal-pago-cuota .pcm-cab, #modal-pago-cuota .pcm-cuerpo, #modal-pago-cuota .pcm-pie { padding-left: 14px; padding-right: 14px; }
  }
  #modal-pago-cuota #pc-selector-cuotas-wrap .pcm-sec { margin-top: 14px; padding-top: 12px; border-top: 1px solid #D6E6FB; }
/* Solicitudes: con "Tiempos por estado" abierto se oculta el listado y queda solo ese panel */
#sol-vista-lista.sol-modo-tiempos > *:not(#sol-tiempos-panel) { display: none; }

/* Clave del login: campo de texto enmascarado con puntos (no <input type="password">) para que el navegador
   NO ofrezca ni rellene usuario/clave guardados de otro colaborador (computadoras compartidas). */
#login-clave.clave-oculta { -webkit-text-security: disc; text-security: disc; }

/* =====================================================   Metas y Desempeño — navegación ágil (js/42-metas-navegacion.js)
   Solo presentación. ============================================================ */
  .mk-tabs { align-items: center; gap: 2px; scrollbar-width: thin; }
  .mk-tab { display: inline-flex; align-items: center; gap: 6px; }
  .mk-tab-ico { font-size: 14px; line-height: 1; }
  .mk-tab-sep { flex: 0 0 1px; align-self: stretch; margin: 6px 6px; background: #C6DBF5; }
  .mk-guia { font-size: 12.5px; color: #0B3A7E; background: #F5F9FF; border: 1px solid #D6E6FB; border-left: 4px solid #1565D8; border-radius: 10px; padding: 8px 12px; margin: -6px 0 16px; line-height: 1.4; }
  .mk-guia:empty { display: none; }

  .mk-mes { display: flex; align-items: stretch; gap: 4px; }
  .mk-mes .campo { flex: 1 1 auto; min-width: 0; }
  .mk-mes-btn { flex: 0 0 auto; width: 34px; margin-top: 4px; border-radius: 8px; background: #EEF5FE; color: #0B3A7E; font-size: 18px; font-weight: 700; line-height: 1; transition: background .15s; }
  .mk-mes-btn:hover:not(:disabled) { background: #D6E6FB; }
  .mk-mes-btn:focus-visible { outline: 2px solid #1565D8; outline-offset: 2px; }

  .mk-saltos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 14px; font-size: 12px; color: #4F6B95; }
  .mk-saltos button { padding: 4px 12px; border-radius: 999px; background: #EEF5FE; color: #0B3A7E; font-weight: 500; transition: background .15s; }
  .mk-saltos button:hover { background: #D6E6FB; }
  .mk-saltos button:focus-visible { outline: 2px solid #1565D8; outline-offset: 2px; }
  #mk-sec-meta, #mk-sec-comision, #mk-sec-avance, #mk-sec-gestion, #mk-sec-mora { scroll-margin-top: 16px; }

  .mk-filtro-rapido { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 10px; }
  .mk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .mk-chipbtn { padding: 5px 12px; border-radius: 999px; background: #EEF5FE; color: #0B3A7E; font-size: 12px; font-weight: 500; border: 1px solid transparent; transition: background .15s; }
  .mk-chipbtn:hover { background: #D6E6FB; }
  .mk-chipbtn.activo { background: #0B1F3F; color: #fff; }
  .mk-chipbtn:focus-visible { outline: 2px solid #1565D8; outline-offset: 2px; }

  /* Lectura más rápida: tarjetas con más jerarquía, filas alternadas y encabezados que no se pierden */
  .mk-kpi .v { font-size: 30px; letter-spacing: -.3px; }
  .mk-kpi { transition: box-shadow .15s, transform .15s; }
  .mk-kpi:hover { box-shadow: 0 4px 14px rgba(11,31,63,.08); transform: translateY(-1px); }
  .mk-tabla tbody tr:nth-child(even) td { background: #FBFDFF; }
  .mk-tabla tbody tr:nth-child(even) .fijo1, .mk-tabla tbody tr:nth-child(even) .fijo2 { background: #FBFDFF; }
  .mk-tabla tbody tr:hover td, .mk-tabla tbody tr:hover .fijo1, .mk-tabla tbody tr:hover .fijo2 { background: #EEF5FE; }
  .mk-panel-cab h3 { font-size: 16px; }
  .mk-cabecera .mk-quien { font-size: 20px; }

  @media (min-width: 768px) {
    .mk-tabs { flex-wrap: wrap; overflow-x: visible; } /* en pantallas anchas todas las pestañas se ven, sin deslizar */
  }
  @media (max-width: 640px) {
    .mk-tab { padding: 8px 12px; }
    .mk-guia { margin-top: 0; }
    .mk-kpi .v { font-size: 26px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .mk-kpi, .mk-kpi:hover { transition: none; transform: none; }
  }

/* =====================================================   Configuración de Metas e Historial (pasos, tarjetas, barra de acciones)
   Solo presentación; los ids y la lógica están en js/21-metas.js. ============================================================ */
  .mk-pasos { counter-reset: mkpaso; }
  .mk-paso { padding: 14px 0 6px; border-top: 1px solid #D6E6FB; }
  .mk-paso:first-of-type { border-top: none; padding-top: 4px; }
  .mk-paso-t { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; color: #0B3A7E; margin-bottom: 10px; }
  .mk-paso-t::before { counter-increment: mkpaso; content: counter(mkpaso); flex: 0 0 auto; width: 22px; height: 22px; border-radius: 999px; background: #1565D8; color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
  .mk-tarjeta { background: #FBFDFF; border: 1px solid #D6E6FB; border-radius: 12px; padding: 14px 16px; }
  .mk-tarjeta-t { font-size: 12px; font-weight: 700; color: #4F6B95; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 2px; }
  .mk-tarjeta .campo:first-of-type { margin-top: 6px; }

  .mk-barra-acciones { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 18px -18px -18px; padding: 12px 18px; background: rgba(255,255,255,.96); border-top: 1px solid #D6E6FB; border-radius: 0 0 16px 16px; box-shadow: 0 -6px 14px -10px rgba(11,31,63,.25); }
  .mk-barra-acciones-sep { flex: 1 1 auto; }
  .mk-barra-acciones .mk-btn-primario { padding: 10px 22px; font-size: 14px; }

  .mk-filtros-linea { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin-bottom: 12px; }
  .mk-filtros-linea > div:not(.mk-chips) { min-width: 150px; }
  .mk-filtros-linea .mk-chips { align-self: center; margin-left: auto; }
  #tabla-historial-metas tr { cursor: pointer; }
  #tabla-historial-metas tr:hover td { background: #EEF5FE; }
  #mk-historial-metas, #meta-form-caja { scroll-margin-top: 16px; }

  @media (max-width: 640px) {
    .mk-barra-acciones { margin-left: -14px; margin-right: -14px; padding-left: 14px; padding-right: 14px; }
    .mk-barra-acciones-sep { display: none; }
    .mk-filtros-linea .mk-chips { margin-left: 0; }
  }

/* =====================================================   Metas y Desempeño — pestañas en dos filas y paneles de Pagos Puntuales / Clientes Nuevos
   Solo presentación (js/43-metas-pagos-nuevos.js). ============================================================ */
  .mk-tabs { display: block; padding: 4px 6px; overflow: visible; }
  .mk-tabs-fila { display: flex; align-items: center; gap: 2px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .mk-tabs-fila + .mk-tabs-fila { margin-top: 4px; padding-top: 4px; border-top: 1px solid #C6DBF5; }
  .mk-tabs-rotulo { flex: 0 0 150px; font-size: 10px; font-weight: 700; color: #4F6B95; text-transform: uppercase; letter-spacing: .5px; line-height: 1.2; padding-left: 8px; }
  .mk-grid-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
  @media (max-width: 767px) { .mk-tabs-rotulo { display: none; } }
  @media (min-width: 768px) { .mk-tabs-fila { flex-wrap: wrap; overflow-x: visible; } }

/* =====================================================   Paginación de 20 en 20 (pintarPieDePaginacion, js/03-utilidades.js)
   ============================================================ */
  .pag20-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 10px 0 4px; font-size: 12px; color: #4F6B95; }
  .pag20-botones { display: flex; gap: 8px; }
  .pag20-botones button { padding: 6px 14px; border: 1px solid #C6DBF5; border-radius: 8px; background: #fff; color: #0B3A7E; font-weight: 500; transition: background .15s; }
  .pag20-botones button:hover:not(:disabled) { background: #EEF5FE; }
  .pag20-botones button:disabled { opacity: .4; cursor: not-allowed; }
  .pag20-botones button:focus-visible { outline: 2px solid #1565D8; outline-offset: 2px; }

/* Solicitudes: «Enviar a Revisión» de la barra fija oculto: se envía desde el paso 6 («Enviar propuesta final a Revisión») */
#btn-barra-enviar { display: none; }

/* =====================================================
   Celular (≤767 px) — más espacio útil y toques cómodos. SOLO presentación: no cambia ids, textos ni lógica.
   (filtros plegables: js/46-movil.js)
   ===================================================== */
.mv-filtros-barra { display: none; }
@media (max-width: 767px) {
  html { -webkit-text-size-adjust: 100%; }
  body { -webkit-tap-highlight-color: rgba(21,101,216,.15); }
  /* 16 px evita el zoom automático del iPhone al tocar un campo; alto cómodo para el dedo */
  input.campo, select.campo { font-size: 16px; min-height: 44px; }
  textarea.campo { font-size: 16px; }
  main button[class*="px-4"], main button[class*="px-5"] { min-height: 42px; }
  /* Encabezado del sistema: logo y barra de usuario compactos */
  .menu-lateral > div:first-child { padding: 6px 12px; }
  .menu-lateral #btn-inicio-sistema img { width: auto; max-height: 56px; margin: 0; }
  .menu-lateral #btn-inicio-sistema > div { display: none; }
  .menu-lateral nav { padding: 6px 8px; scrollbar-width: none; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
  .menu-lateral nav::-webkit-scrollbar { display: none; }
  .menu-lateral nav .btn-menu, .menu-lateral nav .menu-grupo-titulo { scroll-snap-align: start; min-height: 40px; display: inline-flex; align-items: center; }
  header.sticky { padding: 6px 12px; }
  header.sticky #header-avatar-iniciales, header.sticky #header-version { display: none; }
  header.sticky #header-info-nombre { font-size: 13px; line-height: 1.2; }
  header.sticky #header-info-perfil { font-size: 11px; line-height: 1.2; }
  header.sticky #btn-logout-header { padding: 6px 10px; font-size: 11px; min-height: 36px; }
  main { padding: 12px 12px calc(16px + env(safe-area-inset-bottom)) 12px; }
  #btn-inicio-modulo { margin-bottom: 8px; }
  /* Tablas: se desliza con inercia y la página no se mueve de lado */
  .overflow-x-auto { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  main table { font-size: 13px; }
  /* Tarjetas de indicadores: dos por fila */
  .rep-tarjetas, .mk-grid-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpi-card { padding: 10px 12px; }
  .kpi-valor { font-size: 18px; }
  /* Ventanas emergentes: casi a pantalla completa */
  .fixed.inset-0.p-4 { padding: 6px; }
  /* Paginación: botones grandes */
  .pag20-pie { justify-content: center; }
  .pag20-botones { width: 100%; }
  .pag20-botones button { flex: 1; min-height: 42px; }
  /* Filtros plegables */
  .mv-filtros-barra { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 44px; padding: 8px 12px; margin-bottom: 8px; border: 1px solid #C6DBF5; border-radius: 10px; background: #EEF5FE; color: #0B3A7E; font-size: 14px; font-weight: 600; text-align: left; }
  .mv-filtros-barra b { color: #1565D8; }
  .mv-filtros-cerrado .mv-campos { display: none !important; }
  /* Filas con 7 o más pestañas (reportes): una sola línea que se desliza con el dedo, en vez de ocupar media pantalla */
  main div.flex:has(> button:nth-child(7)):not(.mk-tabs-fila) { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  main div.flex:has(> button:nth-child(7)):not(.mk-tabs-fila)::-webkit-scrollbar { display: none; }
  main div.flex:has(> button:nth-child(7)):not(.mk-tabs-fila) > button { flex: 0 0 auto; white-space: nowrap; }
  /* Filas de hasta 5 botones o pestañas: pasan a la línea de abajo en vez de salirse de la pantalla (las filas largas siguen deslizándose) */
  main div.flex:has(> button):not(:has(> button:nth-child(6))):not(.overflow-x-auto):not(.mk-tabs-fila):not(.pag20-botones) { flex-wrap: wrap; }
}

/* Celular: tablas largas como tarjetas (js/46-movil.js), en pantallas y en ventanas emergentes. En pantallas anchas la celda «Ver todo» y la lista «Ordenar por» no se ven. */
td.mv-mas, .mv-ordenar { display: none; }
@media screen and (max-width: 767px) {
  table.mv-tarjetas { display: block; min-width: 0 !important; width: 100%; }
  table.mv-tarjetas thead { display: none; }
  table.mv-tarjetas tbody, table.mv-tarjetas tfoot { display: block; }
  :is(main, .fixed) table.mv-tarjetas tbody tr { display: block; height: auto; margin: 8px 0; padding: 6px 12px; border: 1px solid #D6E6FB !important; border-radius: 12px; background: #fff !important; }
  :is(main, .fixed) table.mv-tarjetas tfoot tr { display: block; height: auto; margin: 8px 0; padding: 6px 12px; border: 1px solid #C6DBF5 !important; border-radius: 12px; background: #F5F9FF !important; font-weight: 600; }
  :is(main, .fixed) table.mv-tarjetas :is(tbody, tfoot) td { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 4px 0 !important; text-align: right !important; white-space: normal; border: 0 !important; background: transparent !important; position: static !important; min-width: 0 !important; box-shadow: none !important; }
  table.mv-tarjetas td[data-label]::before { content: attr(data-label); color: #4F6B95; font-size: 11px; font-weight: 400; text-align: left; flex-shrink: 0; }
  table.mv-tarjetas td[colspan] { display: block; text-align: center !important; }
  table.mv-tarjetas tfoot td:empty { display: none; }
  table.mv-tarjetas tr:not(.mv-abierta) td.mv-extra { display: none; }
  table.mv-tarjetas td.mv-mas { display: block; padding-top: 6px !important; }
  table.mv-tarjetas td.mv-mas button { width: 100%; min-height: 40px; border: 1px solid #C6DBF5; border-radius: 8px; background: #EEF5FE; color: #0B3A7E; font-size: 13px; font-weight: 600; }
  table.mv-tarjetas td .celda-recortada { max-width: 60vw; }
  .mv-ordenar { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
  .mv-ordenar label { flex: 0 0 auto; margin: 0; font-size: 12px; color: #0B3A7E; font-weight: 600; }
  .mv-ordenar select { flex: 1 1 auto; min-width: 0; }
  .mv-ordenar button { flex: 0 0 auto; min-width: 44px; min-height: 44px; border: 1px solid #C6DBF5; border-radius: 8px; background: #EEF5FE; color: #0B3A7E; font-size: 18px; }
}

/* ---- Pago con voucher: doble digitación, vista previa y resumen (js/50-pago-voucher.js). Solo presentación. ---- */
#modal-pago-cuota { gap: 16px; }
.pcv-msg { font-size: 12px; margin-top: 4px; min-height: 16px; }
.pcv-rojo { color: #DC2626; font-weight: 600; }
.pcv-ok { color: #047857; }
input.campo.pcv-error { border-color: #DC2626; background: #FEF2F2; }
.pcv-lado { background: #fff; border-radius: 16px; width: 100%; max-width: 420px; max-height: 94vh; display: flex; flex-direction: column; box-shadow: 0 20px 50px rgba(7,20,48,.35); overflow: hidden; align-self: center; }
.pcv-lado-cab { padding: 10px 14px; border-bottom: 1px solid #D6E6FB; background: #F5F9FF; display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: #12284D; }
.pcv-lado-cab span { font-size: 12px; color: #4F6B95; }
.pcv-lado-cuerpo { padding: 10px; overflow: auto; flex: 1; min-height: 0; text-align: center; }
.pcv-visor { width: 100%; height: auto; max-height: 80vh; object-fit: contain; border: 1px solid #C6DBF5; border-radius: 8px; }
iframe.pcv-visor { height: 70vh; }
.pcv-confirmar { position: fixed; inset: 0; z-index: 80; background: rgba(7,20,48,.75); display: flex; align-items: center; justify-content: center; padding: 16px; }
.pcv-confirmar.hidden { display: none; }
.pcv-confirmar-caja { background: #fff; border-radius: 16px; width: 100%; max-width: 460px; max-height: 92vh; overflow-y: auto; padding: 20px; box-shadow: 0 20px 50px rgba(7,20,48,.4); }
.pcv-confirmar-caja h3 { font-size: 16px; font-weight: 600; color: #0B3A7E; margin-bottom: 12px; }
.pcv-fila { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid #D6E6FB; font-size: 14px; color: #4F6B95; }
.pcv-fila strong { color: #12284D; text-align: right; font-weight: 600; }
.pcv-monto { font-size: 18px; color: #0B3A7E; }
.pcv-aviso { margin-top: 12px; background: #FFFBEB; border: 1px solid #FCD34D; color: #92400E; border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.pcv-aviso.hidden { display: none; }
.pcv-confirmar-botones { display: flex; gap: 8px; margin-top: 16px; }
.pcv-btn-ok { flex: 1; background: #1565D8; color: #fff; font-weight: 600; border-radius: 8px; padding: 10px 14px; }
.pcv-btn-ok:hover { background: #0F4FB0; }
.pcv-btn-volver { color: #4F6B95; border: 1px solid #C6DBF5; border-radius: 8px; padding: 10px 18px; }
.pcv-btn-volver:hover { background: #EEF5FE; }
@media (max-width: 960px) {
  #modal-pago-cuota.pcv-activo { flex-direction: column; justify-content: flex-start; overflow-y: auto; }
  #modal-pago-cuota.pcv-activo .pcv-lado { order: -1; max-width: 640px; max-height: 32vh; flex-shrink: 0; }
  #modal-pago-cuota.pcv-activo .pcm-panel { max-height: 60vh; flex-shrink: 0; }
  #modal-pago-cuota.pcv-activo iframe.pcv-visor { height: 20vh; }
  #modal-pago-cuota.pcv-activo .pcv-visor { max-height: 22vh; }
}

/* =====================================================   Inteligencia de Cobranzas (prefijo cb-)
   Mismo lenguaje visual que Metas y Desempeño (mk-): pestañas, guía, tarjetas con borde de color, tablas y botones.
   El morado se usa SOLO para lo que es de la campaña. ============================================================ */
.cb-campana { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; font-size: 12.5px; color: #3B0764; background: #FAF7FF; border: 1px solid #E9E2FB; border-left: 4px solid #7C3AED; border-radius: 10px; padding: 8px 12px; margin-bottom: 14px; line-height: 1.4; }
.cb-campana b { font-weight: 700; }
.cb-campana .cb-tramos-mini { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.cb-campana .cb-tramos-mini span { background: #EDE9FE; color: #5B21B6; border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.cb-campana.cb-sin { color: #92400E; background: #FFFBEB; border-color: #FDE68A; border-left-color: #F59E0B; }

.cb-seg { display: inline-flex; background: #EEF5FE; border: 1px solid #D6E6FB; border-radius: 10px; padding: 3px; gap: 2px; }
.cb-seg button { font-size: 13px; font-weight: 500; color: #0B3A7E; padding: 6px 12px; border-radius: 8px; white-space: nowrap; }
.cb-seg button:hover { background: #D6E6FB; }
.cb-seg button.activo { background: #0B1F3F; color: #fff; }

.cb-panel { background: #fff; border: 1px solid #D6E6FB; border-radius: 16px; padding: 18px; margin-bottom: 16px; }
.cb-panel h3 { font-size: 15px; font-weight: 600; color: #0B3A7E; margin-bottom: 10px; }
.cb-filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
.cb-filtros > div { min-width: 170px; flex: 1 1 170px; }
.cb-filtros > div.ancho { flex: 2 1 260px; }
.cb-filtros label { display: block; font-size: 12px; font-weight: 500; color: #0B3A7E; margin-bottom: 4px; }
.cb-input { width: 100%; padding: 8px 12px; border: 1px solid #C6DBF5; border-radius: 8px; font-size: 14px; background: #fff; color: #071430; }
.cb-input:focus { outline: none; border-color: #1565D8; }
.cb-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.cb-chip { padding: 5px 12px; border-radius: 999px; background: #EEF5FE; color: #0B3A7E; font-size: 12px; font-weight: 500; border: 1px solid transparent; white-space: nowrap; }
.cb-chip:hover { background: #D6E6FB; }
.cb-chip.activo { background: #0B1F3F; color: #fff; }
.cb-barra { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 12px; }
.cb-barra .cb-nota, .cb-nota { font-size: 12px; color: #4F6B95; }

.cb-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; padding: 8px 14px; border-radius: 8px; white-space: nowrap; background: #0B1F3F; color: #fff; transition: background .15s; }
.cb-btn:hover:not(:disabled) { background: #081833; }
.cb-btn:disabled { opacity: .45; cursor: not-allowed; }
.cb-btn.sec { background: #EEF5FE; color: #0B3A7E; } .cb-btn.sec:hover:not(:disabled) { background: #D6E6FB; }
.cb-btn.nar { background: #1565D8; font-weight: 600; } .cb-btn.nar:hover:not(:disabled) { background: #0F4FB0; }
.cb-btn.mor { background: #6D28D9; font-weight: 600; } .cb-btn.mor:hover:not(:disabled) { background: #5B21B6; }
.cb-btn.ver { background: #059669; font-weight: 600; } .cb-btn.ver:hover:not(:disabled) { background: #047857; }
.cb-btn.roj { background: #fff; color: #BE123C; border: 1px solid #FECDD3; } .cb-btn.roj:hover:not(:disabled) { background: #FFF1F2; }
.cb-btn.chico { font-size: 12px; padding: 5px 10px; }
.cb-ico { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: #EEF5FE; color: #0B3A7E; flex: 0 0 auto; }
.cb-ico:hover { background: #D6E6FB; }
.cb-ico.wsp { background: #ECFDF5; color: #047857; } .cb-ico.wsp:hover { background: #D1FAE5; }
.cb-ico.off { opacity: .35; cursor: not-allowed; }
.cb-ico svg { width: 15px; height: 15px; }

/* Tablas: mismas medidas que .mk-tabla; cada celda en una sola línea (nada se monta sobre la columna vecina) */
.cb-tabla-caja { border: 1px solid #D6E6FB; border-radius: 12px; background: #fff; }
.cb-tabla { width: 100%; font-size: 13px; border-collapse: separate; border-spacing: 0; }
.cb-tabla thead th { background: #EEF5FE; color: #4F6B95; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; text-align: left; padding: 9px 12px; white-space: nowrap; }
.cb-tabla tbody td { padding: 9px 12px; border-top: 1px solid #D6E6FB; vertical-align: middle; color: #12284D; white-space: nowrap; }
.cb-tabla tbody tr:nth-child(even) td { background: #FBFDFF; }
.cb-tabla tbody tr:hover td { background: #EEF5FE; }
.cb-tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.cb-tabla .cen { text-align: center; }
.cb-tabla .corto { max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.cb-nombre { font-weight: 600; color: #071430; }
.cb-sub { font-size: 11px; color: #4F6B95; margin-top: 1px; }
.cb-acciones { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }

.cb-pill { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.cb-pill.verde { background: #ECFDF5; color: #047857; } .cb-pill.ambar { background: #FFFBEB; color: #B45309; } .cb-pill.rojo { background: #FFF1F2; color: #BE123C; }
.cb-pill.morado { background: #F5F3FF; color: #6D28D9; } .cb-pill.gris { background: #EEF5FE; color: #4F6B95; } .cb-pill.azul { background: #F0F9FF; color: #0369A1; }
.cb-dias { display: inline-block; min-width: 40px; text-align: center; font-weight: 700; font-size: 12px; padding: 2px 8px; border-radius: 999px; }
.cb-dias.d1 { background: #FFFBEB; color: #B45309; } .cb-dias.d2 { background: #FFF7ED; color: #C2410C; } .cb-dias.d3 { background: #FFF1F2; color: #BE123C; } .cb-dias.d4 { background: #BE123C; color: #fff; }

.cb-zonas { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.cb-zona { background: #fff; border: 1px solid #D6E6FB; border-radius: 12px; padding: 14px 16px; }
.cb-zona h4 { font-size: 13px; font-weight: 700; color: #071430; }
.cb-zona ul { margin-top: 8px; font-size: 12px; color: #12284D; }
.cb-zona li { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-top: 1px dashed #DCE8F8; }
.cb-zona li > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cb-ficha { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 1000px) { .cb-ficha { grid-template-columns: 1fr 1fr; } }
.cb-deuda { width: 100%; font-size: 13px; }
.cb-deuda td { padding: 6px 0; border-bottom: 1px dashed #DCE8F8; color: #4F6B95; }
.cb-deuda td:last-child { text-align: right; color: #12284D; font-weight: 500; font-variant-numeric: tabular-nums; }
.cb-deuda tr.total td { border-bottom: none; border-top: 1px solid #D6E6FB; font-weight: 700; font-size: 15px; color: #0B3A7E; padding-top: 10px; }
.cb-deuda tr.total td:last-child { color: #1565D8; }
.cb-oferta { border-radius: 12px; padding: 14px 16px; background: #FAF7FF; border: 1px solid #E9E2FB; border-top: 4px solid #7C3AED; color: #3B0764; font-size: 13px; }
.cb-oferta .grande { font-size: 28px; font-weight: 700; color: #6D28D9; line-height: 1.15; }
.cb-oferta.sin { background: #FBFDFF; border-color: #D6E6FB; border-top-color: #9DB8DD; color: #0B3A7E; }
.cb-barra-avance { height: 7px; background: #EDE9FE; border-radius: 999px; overflow: hidden; margin: 8px 0 6px; }
.cb-barra-avance div { height: 100%; background: #7C3AED; border-radius: 999px; }
.cb-linea-tiempo { font-size: 12px; margin-top: 4px; }
.cb-linea-tiempo li { padding: 5px 0 5px 10px; border-left: 2px solid #D6E6FB; margin-left: 2px; }

.cb-modal { position: fixed; inset: 0; z-index: 9990; background: rgba(7,20,48,.45); display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 16px; }
.cb-modal.hidden { display: none; }
.cb-modal-caja { background: #fff; border-radius: 16px; width: 100%; max-width: 540px; margin-top: 30px; padding: 20px; box-shadow: 0 20px 50px rgba(7,20,48,.35); }
.cb-modal-caja h3 { font-size: 16px; font-weight: 600; color: #0B3A7E; }
.cb-modal-cerrar { font-size: 22px; line-height: 1; color: #4F6B95; }
.cb-pregunta { font-size: 12px; font-weight: 700; color: #4F6B95; text-transform: uppercase; letter-spacing: .4px; margin: 16px 0 6px; }
.cb-opciones { display: flex; gap: 6px; flex-wrap: wrap; }
.cb-opcion { font-size: 13px; font-weight: 500; color: #0B3A7E; background: #EEF5FE; border: 1px solid transparent; padding: 7px 12px; border-radius: 8px; }
.cb-opcion:hover { background: #D6E6FB; }
.cb-opcion.activo { background: #0B1F3F; color: #fff; }
.cb-msg { font-size: 12px; margin-top: 10px; }
.cb-msg:empty { display: none; }
.cb-msg.err { color: #BE123C; } .cb-msg.ok { color: #047857; }
.cb-ayuda { font-size: 13px; color: #12284D; line-height: 1.55; }
.cb-ayuda li { margin: 4px 0 4px 18px; list-style: disc; }
.cb-vacio { text-align: center; color: #4F6B95; font-size: 13px; padding: 32px 12px; }

/* Barra de desplazamiento horizontal visible (arriba la agrega agregarScrollArriba de js/03) */
.cb-tabla-caja { scrollbar-color: #7C9CC8 #EEF5FE; }
.cb-tabla-caja::-webkit-scrollbar { height: 10px; }
.cb-tabla-caja::-webkit-scrollbar-track { background: #EEF5FE; border-radius: 999px; }
.cb-tabla-caja::-webkit-scrollbar-thumb { background: #7C9CC8; border-radius: 999px; }
#modulo-inteligencia div:has(+ .cb-tabla-caja) { scrollbar-color: #7C9CC8 #EEF5FE; }
#modulo-inteligencia div:has(+ .cb-tabla-caja)::-webkit-scrollbar { height: 10px; }
#modulo-inteligencia div:has(+ .cb-tabla-caja)::-webkit-scrollbar-track { background: #EEF5FE; border-radius: 999px; }
#modulo-inteligencia div:has(+ .cb-tabla-caja)::-webkit-scrollbar-thumb { background: #7C9CC8; border-radius: 999px; }
#modulo-inteligencia .mk-kpi.morado { border-top-color: #7C3AED; } #modulo-inteligencia .mk-kpi.morado .v { color: #6D28D9; }
#modulo-inteligencia .mk-tab .cb-cuenta { display: inline-block; min-width: 18px; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: #1565D8; color: #fff; font-size: 11px; font-weight: 700; text-align: center; }
.cb-tabla td.dir { white-space: normal; min-width: 260px; max-width: 340px; line-height: 1.35; }
.cb-tabla tbody tr.cb-grupo td { background: #F5F9FF !important; color: #0B3A7E; font-size: 12px; font-weight: 700; padding: 7px 12px; border-top: 2px solid #C6DBF5; }

/* Días de atraso real (Gestión de Cobranza): etiqueta sobria, en una sola línea */
.atraso-real-chip { display: inline-block; white-space: nowrap; font-size: 12px; font-weight: 600; color: #6D28D9; font-variant-numeric: tabular-nums; }
.atraso-real-chip.critico { color: #4C1D95; background: #F5F3FF; border: 1px solid #DDD6FE; border-left: 3px solid #6D28D9; border-radius: 4px; padding: 2px 8px; }

/* Inteligencia de Cobranzas: ventajas del convenio y aviso tras registrar un pago */
.cb-ventajas { margin: 10px 0 14px; background: #FFFFFF; border: 1px solid #E9D5FF; border-left: 4px solid #6D28D9; border-radius: 10px; padding: 10px 14px; color: #3B0764; }
.cb-ventajas-titulo { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #6D28D9; margin-bottom: 8px; }
.cb-ventajas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.cb-ventajas-grid > div { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.cb-ventajas-grid > div > span { font-size: 18px; line-height: 1; }
.cb-ventajas-grid small { display: block; color: #6B4E8A; font-size: 11.5px; }
.cb-ventajas.compacto { margin: 8px 0 0; padding: 6px 10px; font-size: 11.5px; border-left-width: 3px; }
.ic-aviso-flotante { position: fixed; right: 20px; bottom: 20px; z-index: 9999; max-width: 380px; background: #fff; border: 1px solid #C4B5FD; border-left: 5px solid #6D28D9; border-radius: 12px; padding: 12px 14px; box-shadow: 0 10px 30px rgba(11,31,63,.18); font-size: 13px; color: #3B0764; }

/* ==========================================================================
   ESTILO UNIFORME (21/10/2026): el aspecto de «Metas y Desempeño» en todos los módulos.
   SOLO VISUAL: no cambia textos, ids, clases que usa el JavaScript, cálculos ni datos.
   ========================================================================== */
/* 1) Pestañas de cada módulo (botones «xxx-tab»): una sola barra como la de Metas. La pestaña activa se reconoce por la
      clase que ya pone cada módulo (bg-[#0B1F3F]). No aplica a los pasos de los formularios (ns-tab, nc-tab). */
:is(div, nav):has(> button[class*="-tab "]:not(.mk-tab):not(.ns-tab):not(.nc-tab)) {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px !important; padding: 4px; margin-bottom: 18px;
  background: #EEF5FE; border: 1px solid #D6E6FB; border-radius: 12px; width: 100%;
}
:is(div, nav) > button[class*="-tab "]:not(.mk-tab):not(.ns-tab):not(.nc-tab) {
  background: transparent !important; color: #0B3A7E !important; border: 0 !important; border-radius: 9px !important;
  padding: 8px 16px !important; font-size: 13px !important; font-weight: 500 !important; box-shadow: none !important;
  white-space: nowrap; transition: background .15s, color .15s;
}
:is(div, nav) > button[class*="-tab "]:not(.mk-tab):not(.ns-tab):not(.nc-tab):hover { background: #D6E6FB !important; }
:is(div, nav) > button[class*="-tab "].bg-\[\#0B1F3F\]:not(.mk-tab):not(.ns-tab):not(.nc-tab) {
  background: #0B1F3F !important; color: #fff !important; box-shadow: 0 1px 3px rgba(11, 31, 63, .25) !important;
}
:is(div, nav) > button[class*="-tab "]:not(.mk-tab):focus-visible { outline: 2px solid #1565D8; outline-offset: 2px; }
/* 2) Encabezado del módulo: título arriba y la barra de pestañas debajo, como en Metas */
.modulo > div:first-child:has(> h2):has(button[class*="-tab "]) { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
.modulo > div:first-child:has(> h2):has(button[class*="-tab "]) > div:has(> button[class*="-tab "]) { margin-bottom: 0; }
.modulo h2.text-xl { font-size: 1.25rem; font-weight: 600; color: #0B3A7E; letter-spacing: -.01em; }
/* 3) Tablas: encabezado y filas con la misma medida que las de Metas */
.modulo table thead th { font-size: 11px; letter-spacing: .3px; font-weight: 600; }
.modulo table:not(.mk-tabla):not(.cb-tabla) tbody tr:hover > td { background-color: #F7FAFF; }
/* 4) Tarjetas y paneles blancos con el mismo borde redondeado */
.modulo .bg-white.rounded-xl.border, .modulo .bg-white.rounded-2xl { border-radius: 16px; }
.modulo .bg-white.border-l-4, .modulo button.border-l-4 { border-radius: 16px; }
/* 5) Accesos a reportes sobre las pestañas (Cobranza, Reporte Comercial): botones claros en una sola fila, como los de Metas */
.btn-reporte-pagos-asesor, .btn-rim-acceso { background: #EEF5FE !important; color: #0B3A7E !important; font-weight: 500 !important; border: 1px solid #D6E6FB !important; transition: background .15s; }
.btn-reporte-pagos-asesor:hover, .btn-rim-acceso:hover { background: #D6E6FB !important; }
.modulo > div[data-siempre-activo]:has(> .btn-reporte-pagos-asesor), .modulo > div[data-siempre-activo]:has(> .btn-rim-acceso) { display: inline-flex !important; gap: 8px; margin: 0 8px 12px 0 !important; vertical-align: top; }