/* Mi CRM (B114, 23 oct, Roberto): el menú lateral. Diseño del 23 oct (noche):
   - Computadora (≥ 1024 px): el menú y la página en dos columnas (`.crm-marco`, una grilla). El menú va pegado bajo la
     cabecera (sticky) y, si es más alto que la pantalla, se desplaza por dentro; la columna blanca llega de arriba abajo y
     el pie va siempre debajo de las dos (nunca encima del menú, sin espacio de más). Se contrae a una columna de iconos.
   - Pantallas anchas: el menú y el contenido, juntos y centrados; la columna llega al borde izquierdo (sin flotar).
   - Celular y tableta: una franja de pestañas bajo la cabecera, con el botón de «todas las secciones» (una hoja).
   - Los grupos siguen el principio de Mi inicio (B112); el número de cada opción, con el color de su urgencia.
   Contraste AA sobre blanco: textos #33404A y #5F6E75; el activo, #007A80 sobre #E6F4F5. */
:root { --crm-w: 272px; --crm-lado: 0px; --crm-linea: rgba(36,35,74,.10); }

.crm-menu, .crm-hoja { --crm-tinta: #33404A; --crm-suave: #5F6E75; font-family: var(--fuente-ui); }
.crm-menu [hidden], .crm-hoja [hidden], .crm-menu[hidden] { display: none !important; }

/* ---------- La opción (una fila; en el celular, una pestaña) ---------- */
.crm-op { position: relative; display: flex; align-items: center; gap: 11px; min-height: 36px; padding: 0 10px;
  border-radius: 10px; color: var(--crm-tinta); font-size: 14px; font-weight: 500; line-height: 1.2; text-decoration: none;
  transition: background-color .15s var(--ui-curva, ease), color .15s var(--ui-curva, ease); }
.crm-op > .ui-ic { font-size: 18px; color: var(--crm-suave); transition: color .15s; }
.crm-op-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-op:focus-visible, .crm-plegar:focus-visible, .crm-todo:focus-visible, .crm-hoja-cerrar:focus-visible {
  outline: 2px solid var(--marca, #00989E); outline-offset: 2px; }
.crm-op.activa { background: var(--marca-suave, #E6F4F5); color: var(--marca-texto, #007A80); font-weight: 700; }
.crm-op.activa > .ui-ic { color: var(--marca-texto, #007A80); }
@media (hover: hover) {
  .crm-op:hover { background: rgba(36,35,74,.05); color: var(--ui-noche, #15142C); }
  .crm-op:hover > .ui-ic { color: var(--ui-noche, #15142C); }
  .crm-op.activa:hover { background: var(--marca-suave, #E6F4F5); color: var(--marca-texto, #007A80); }
  .crm-op.activa:hover > .ui-ic { color: var(--marca-texto, #007A80); }
}

/* El número: gris si es informativo; con el color del bloque en «Para vender hoy»; lleno si alguien espera respuesta. */
.crm-op-n { flex: none; display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 7px;
  border-radius: 999px; background: rgba(36,35,74,.07); color: #4A5560; font: 700 12px/1 var(--fuente-num, inherit);
  font-variant-numeric: tabular-nums; letter-spacing: 0; }
.crm-op[data-tono="energia"] .crm-op-n { background: #FFEDE5; color: #B4441C; }
.crm-op[data-tono="dorado"] .crm-op-n { background: #FAF1D6; color: #7D6312; }
.crm-op[data-tono="marca"] .crm-op-n { background: var(--marca-suave, #E6F4F5); color: var(--marca-texto, #007A80); }
.crm-op[data-tono="urgente"] .crm-op-n { background: #C2410C; color: #fff; box-shadow: 0 0 0 3px rgba(194,65,12,.15); }

/* ---------- Cabecera y grupos ---------- */
.crm-menu-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px 4px 10px; }
.crm-menu-t { font-family: var(--fuente-titulo); font-size: 21px; font-weight: 600; color: var(--ui-noche, #15142C);
  text-decoration: none; letter-spacing: -.01em; white-space: nowrap; }
.crm-grupo { display: flex; flex-direction: column; gap: 2px; }
.crm-grupo-t { margin: 18px 10px 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--crm-suave); line-height: 1.3; }
.crm-plegar, .crm-todo, .crm-hoja-cerrar { display: inline-grid; place-items: center; flex: none; padding: 0;
  border: 0; background: none; color: var(--crm-suave); cursor: pointer; border-radius: 10px; }
.crm-plegar { width: 34px; height: 34px; font-size: 19px; }
@media (hover: hover) {
  .crm-plegar:hover, .crm-hoja-cerrar:hover { background: rgba(36,35,74,.06); color: var(--ui-noche, #15142C); }
}

/* ---------- Computadora: dos columnas ---------- */
@media (min-width: 1024px) {
  /* El espacio que sobra a cada lado en pantallas anchas (contenido de 1.440 px + 32 px de aire a cada lado). */
  :root { --crm-lado: max(0px, (100vw - var(--crm-w) - 1504px) / 2); }
  html.crm-contraido { --crm-w: 72px; }
  .crm-marco { display: grid; grid-template-columns: calc(var(--crm-lado) + var(--crm-w)) minmax(0, 1fr); align-items: start;
    background: linear-gradient(to right, #fff calc(var(--crm-lado) + var(--crm-w) - 1px),
      var(--crm-linea) 0 calc(var(--crm-lado) + var(--crm-w)), transparent 0); }
  .crm-marco > main { grid-column: 2; min-width: 0; }
  .crm-marco > main .container { width: min(1440px, calc(100% - 64px)); margin-left: 32px; margin-right: auto; }
  .crm-menu { grid-column: 1; grid-row: 1; position: sticky; top: var(--cabecera-h, 72px); margin-top: var(--cabecera-h, 72px);
    max-height: calc(100vh - var(--cabecera-h, 72px)); max-height: calc(100dvh - var(--cabecera-h, 72px));
    display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
    scrollbar-color: transparent transparent; padding: 20px 12px 24px calc(var(--crm-lado) + 12px); }
  .crm-menu:focus-within { scrollbar-color: rgba(36,35,74,.18) transparent; }
  .crm-todo { display: none !important; }
  /* El pie, alineado con el contenido (Roberto, 23 oct). */
  body:has(.crm-marco) .pie-sitio .container { width: min(1440px, calc(100% - var(--crm-lado) - var(--crm-w) - 64px));
    margin-left: calc(var(--crm-lado) + var(--crm-w) + 32px); margin-right: auto; }

  /* Contraído: solo los iconos; el número, en la esquina del icono; el nombre, al pasar el mouse (title). */
  html.crm-contraido .crm-menu { padding-inline: calc(var(--crm-lado) + 12px) 12px; scrollbar-width: none; }
  html.crm-contraido .crm-menu::-webkit-scrollbar { display: none; }
  html.crm-contraido .crm-menu-cab { justify-content: center; padding: 0 0 6px; }
  html.crm-contraido .crm-menu-t, html.crm-contraido .crm-menu .crm-op-txt, html.crm-contraido .crm-menu .crm-grupo-t {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  html.crm-contraido .crm-plegar .ui-ic { transform: scaleX(-1); }
  html.crm-contraido .crm-menu .crm-grupo + .crm-grupo { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--crm-linea); }
  html.crm-contraido .crm-menu .crm-op { justify-content: center; width: 48px; min-height: 42px; padding: 0; }
  html.crm-contraido .crm-menu .crm-op > .ui-ic { font-size: 20px; }
  html.crm-contraido .crm-menu .crm-op-n { position: absolute; top: 3px; right: 1px; min-width: 17px; height: 17px; padding: 0 4px;
    font-size: 10px; box-shadow: 0 0 0 2px #fff; }
  html.crm-contraido .crm-menu .crm-op[data-tono="urgente"] .crm-op-n { box-shadow: 0 0 0 2px #fff; }
  html.crm-contraido .crm-menu .crm-op-n[data-texto] { top: 7px; right: 7px; min-width: 0; width: 8px; height: 8px; padding: 0;
    font-size: 0; background: var(--crm-suave); }
}

@media (min-width: 1024px) and (hover: hover) {
  .crm-menu:hover { scrollbar-color: rgba(36,35,74,.18) transparent; }
}
/* Pantallas bajas (laptops de 768 px): el mismo menú, más junto, para que «Para vender hoy» y lo demás quepan. */
@media (min-width: 1024px) and (max-height: 860px) {
  .crm-menu { padding-top: 14px; }
  .crm-menu .crm-op { min-height: 33px; }
  .crm-menu .crm-grupo { gap: 1px; }
  .crm-menu .crm-grupo-t { margin: 12px 10px 4px; }
  html.crm-contraido .crm-menu .crm-op { min-height: 38px; }
  html.crm-contraido .crm-menu .crm-grupo + .crm-grupo { margin-top: 6px; padding-top: 6px; }
}

/* ---------- Celular y tableta: la franja de pestañas ---------- */
@media (max-width: 1023.98px) {
  .crm-menu { position: sticky; top: var(--cabecera-h, 72px); margin-top: var(--cabecera-h, 72px); z-index: 30;
    display: flex; align-items: center; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    padding: 8px 16px 8px 12px; background: #fff; border-bottom: 1px solid var(--crm-linea);
    box-shadow: 0 6px 16px -12px rgba(21,20,44,.35); scroll-padding-inline: 60px 32px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
  .crm-menu::-webkit-scrollbar { display: none; }
  .crm-marco > main.pegado-a-topbar { padding-top: 0; }
  .crm-menu-cab, .crm-menu .crm-grupo-t { display: none; }
  .crm-menu .crm-grupo { display: contents; }
  .crm-menu .crm-grupo-paginas::before { content: ""; flex: none; align-self: center; width: 1px; height: 24px; margin: 0 4px;
    background: var(--crm-linea); }
  .crm-menu .crm-op { flex: none; min-height: 40px; padding: 0 14px; gap: 8px; border-radius: 999px;
    background: rgba(36,35,74,.05); font-size: 14px; font-weight: 600; }
  .crm-menu .crm-op-txt { overflow: visible; }
  .crm-menu .crm-op > .ui-ic { font-size: 17px; }
  .crm-menu .crm-op.activa { background: var(--ui-morado, #24234A); color: #fff; }
  .crm-menu .crm-op.activa > .ui-ic { color: #fff; }
  /* «Todas las secciones»: fijo a la izquierda de la franja; las pestañas pasan por debajo. */
  .crm-todo { position: sticky; left: 0; z-index: 1; width: 42px; height: 40px; margin-right: 2px; font-size: 20px;
    background: #fff; color: var(--ui-noche, #15142C); border: 1px solid var(--crm-linea); border-radius: 12px;
    box-shadow: -13px 0 0 0 #fff, 10px 0 10px -4px #fff; }
  .crm-todo-n { position: absolute; top: -5px; right: -5px; display: inline-grid; place-items: center; min-width: 18px;
    height: 18px; padding: 0 5px; border-radius: 999px; background: #C2410C; color: #fff;
    font: 700 11px/1 var(--fuente-num, inherit); box-shadow: 0 0 0 2px #fff; }
}
@media (max-width: 1023.98px) and (hover: hover) {
  .crm-menu .crm-op.activa:hover { background: var(--ui-morado, #24234A); color: #fff; }
  .crm-menu .crm-op.activa:hover > .ui-ic { color: #fff; }
}

/* ---------- Celular: la hoja con todas las secciones ---------- */
.crm-hoja { position: fixed; inset: auto 0 0 0; width: 100%; max-width: 560px; margin: 0 auto; padding: 0 0 calc(14px + env(safe-area-inset-bottom));
  max-height: 86vh; max-height: 86dvh; overflow-y: auto; overscroll-behavior: contain; border: 0; border-radius: 22px 22px 0 0;
  background: #fff; color: var(--crm-tinta); box-shadow: var(--ui-sombra-3, 0 14px 40px rgba(21,20,44,.22)); }
.crm-hoja[open] { animation: crm-subir .22s var(--ui-curva, ease) both; }
.crm-hoja:focus { outline: none; }
.crm-hoja::backdrop { background: rgba(21,20,44,.55); }
.crm-hoja-cab { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between;
  padding: 18px 10px 6px 22px; background: #fff; }
.crm-hoja-cab::before { content: ""; position: absolute; top: 7px; left: 50%; width: 40px; height: 4px; margin-left: -20px;
  border-radius: 99px; background: rgba(36,35,74,.18); }
.crm-hoja-cab h2 { margin: 0; font-family: var(--fuente-titulo); font-size: 22px; font-weight: 600; color: var(--ui-noche, #15142C); }
.crm-hoja-cerrar { width: 44px; height: 44px; font-size: 20px; }
.crm-hoja .crm-grupo { padding: 0 12px; }
.crm-hoja .crm-grupo-t { margin: 16px 10px 4px; }
.crm-hoja .crm-op { min-height: 48px; padding: 0 12px; gap: 12px; border-radius: 12px; font-size: 15.5px; }
.crm-hoja .crm-op > .ui-ic { font-size: 20px; }
.crm-hoja .crm-op-n { min-width: 26px; height: 24px; font-size: 13px; }
@keyframes crm-subir { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .crm-op, .crm-op > .ui-ic { transition: none; }
  .crm-hoja[open] { animation: none; }
}

/* ---------- Una sección a la vez (solo en Mi CRM, con JS) ---------- */
/* `crm-js` lo pone el marco antes del primer dibujo. Hasta que corre crm.js (y si no carga): la sección del hash (:target)
   o, sin hash, el resumen. Después, crm.js marca cada sección (`data-crm-s`) y la que se ve (`crm-visible`). */
.crm-js:not(.crm-listo) .crm-con-menu .crm-contenido > .container > [data-bloque]:not(:target):not(:has(:target)),
.crm-js:not(.crm-listo) .crm-con-menu .crm-contenido:has(> .container > [data-bloque]:target, > .container > [data-bloque] :target) > [data-crm-seccion] {
  display: none; }
.crm-js.crm-listo .crm-con-menu [data-crm-s]:not(.crm-visible) { display: none !important; }
.crm-js .crm-con-menu .inicio-barra-bloques,
.crm-js .crm-con-menu .inicio-bloque-cab .inicio-bloque-flecha { display: none; }
/* Sin acordeón: cada sección se ve abierta (sin tocar la memoria de pliegues de inicio.js). */
.crm-js .crm-con-menu .crm-contenido > .container > [data-bloque] > .inicio-bloque-cuerpo { display: block !important; }
.crm-js .crm-con-menu .ui-inicio-cuerpo { padding-top: 20px; }

/* ---------- «Agregar a mi calendario» (B67; socios 24 oct: una sola macro, `_agregar_calendario.html`) ----------
   Las dos opciones dicen para qué calendario son, como los botones de «Sincronizar calendario»: iPhone o Mac (el .ics)
   y Google Calendar. Va en esta hoja porque la usan Visitas y Mi CRM (Listos para avanzar, Próximas visitas). */
.ui-agregar-opciones .btn { gap: 8px; }
.ui-agregar-opciones .btn > .ui-ic { flex: none; font-size: 16px; }
.ui-agregar-t { display: inline-grid; gap: 1px; line-height: 1.2; text-align: left; }
.ui-agregar-t small { font-size: 11.5px; font-weight: 500; color: #5F6E75; }

/* ---------- Visitas · «Mes» (socios 24 oct, bloque C) ----------
   La cuadrícula del mes, de lunes a domingo: cada día con sus visitas (la hora y el código; el título si entra), con el
   color de su estado en el borde; hoy, en el turquesa de la marca. Bajo 768 px, una lista por día con solo los días que
   tienen visitas (y hoy): nada sale de su caja a 375 px. Contraste AA sobre blanco. */
.vmes-vista { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(36,35,74,.06); gap: 2px; }
.vmes-vista a { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 14px; border-radius: 999px;
  color: #33404A; font-size: 13.5px; font-weight: 600; text-decoration: none; }
.vmes-vista a .ui-ic { font-size: 16px; }
.vmes-vista a.on { background: #fff; color: #007A80; box-shadow: 0 1px 3px rgba(21,20,44,.12); }
.vmes-vista a:focus-visible, .vmes-nav:focus-visible, .vmes-v:focus-visible, .vmes-hoy-btn:focus-visible {
  outline: 2px solid var(--marca, #00989E); outline-offset: 2px; }
.vmes { padding: 4px 20px 20px; }
.vmes-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 12px; }
.vmes-t { margin: 0; min-width: 9.5em; text-align: center; font-family: var(--fuente-titulo); font-size: 20px; color: var(--ui-noche, #15142C); }
.vmes-nav { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(36,35,74,.14);
  color: #33404A; background: #fff; }
.vmes-nav:not(.vmes-nav-sig) .ui-ic { transform: rotate(180deg); }
.vmes-hoy-btn { font-size: 13.5px; font-weight: 600; color: #007A80; }
.vmes-total { margin-left: auto; font-size: 13px; color: #5F6E75; }
.vmes-semana, .vmes-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.vmes-semana span { padding: 0 8px 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #5F6E75; }
.vmes-dias { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(36,35,74,.10); border-left: 1px solid rgba(36,35,74,.10); }
.vmes-dia { min-width: 0; min-height: 96px; padding: 6px; display: flex; flex-direction: column; gap: 4px;
  border-right: 1px solid rgba(36,35,74,.10); border-bottom: 1px solid rgba(36,35,74,.10); background: #fff; }
.vmes-dia.fuera { background: #f7f7fa; }
.vmes-n { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #33404A; }
.vmes-dsem { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vmes-dnum { display: inline-grid; place-items: center; min-width: 26px; height: 26px; border-radius: 50%; }
.vmes-dia.hoy { background: color-mix(in srgb, var(--ui-turquesa, #00989E) 5%, #fff); }
.vmes-dia.hoy .vmes-dnum { background: #007A80; color: #fff; }
.vmes-hoy { font-size: 11.5px; font-weight: 700; color: #007A80; }
.vmes-v { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 4px 6px 4px 8px; border-radius: 6px;
  border-left: 3px solid #00989E; background: #f2f8f8; color: #15142C; font-size: 12.5px; line-height: 1.25; text-decoration: none; }
.vmes-hora { font-size: 12px; color: #33404A; }
.vmes-inm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vmes-tit { font-weight: 400; color: #5F6E75; }
@media (hover: hover) { .vmes-v:hover { background: #e2f1f1; } .vmes-nav:hover { border-color: #00989E; } }
.vmes-pendiente { border-left-color: #E06A3D; background: #fdf1ec; }
.vmes-por_confirmar { border-left-color: #B8901F; background: #fbf5e3; }
.vmes-asistio { border-left-color: #2E7D5B; background: #eef6f1; }
.vmes-no_asistio { border-left-color: #8A8AA0; background: #f3f3f6; }
.vmes-sin { font-size: 12.5px; color: #5F6E75; }
.vmes-vacio { margin: 12px 0 0; font-size: 14px; color: #5F6E75; }
.vmes-leyenda { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 0 0; font-size: 12px; color: #5F6E75; }
.vmes-l { display: inline-flex; align-items: center; gap: 6px; padding-left: 9px; border-left: 3px solid #00989E; }
.vmes-l.vmes-pendiente { border-left-color: #E06A3D; } .vmes-l.vmes-por_confirmar { border-left-color: #B8901F; }
.vmes-l.vmes-asistio { border-left-color: #2E7D5B; } .vmes-l.vmes-no_asistio { border-left-color: #8A8AA0; }
.vmes-l.vmes-pendiente, .vmes-l.vmes-por_confirmar, .vmes-l.vmes-asistio, .vmes-l.vmes-no_asistio { background: none; }
@media (max-width: 767px) {
  .vmes { padding: 4px 0 16px; }
  .vmes-t { min-width: 0; flex: 1; font-size: 18px; }
  .vmes-total { margin-left: 0; flex-basis: 100%; }
  .vmes-semana { display: none; }
  .vmes-dias { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; border: 0; }
  .vmes-dia { min-height: 0; flex-direction: row; flex-wrap: wrap; align-items: flex-start; padding: 10px 12px;
    border: 1px solid rgba(36,35,74,.10); border-radius: 12px; }
  .vmes-dia.fuera, .vmes-dia:not(.con):not(.hoy) { display: none; }
  .vmes-n { flex: 0 0 100%; font-size: 14px; }
  .vmes-dsem { position: static; width: auto; height: auto; overflow: visible; clip: auto; text-transform: capitalize; }
  .vmes-dnum { min-width: 0; height: auto; border-radius: 0; }
  .vmes-dia.hoy .vmes-dnum { background: none; color: inherit; }
  .vmes-v { flex: 1 1 100%; flex-direction: row; align-items: baseline; gap: 8px; padding: 8px 10px; font-size: 13.5px; }
  .vmes-hora { flex: none; }
}