/* ══════════════════════════════════════════════════════════════════════════════════════════════
   CAMPO B2B · va DESPUÉS de las hojas copiadas de Nunio (style, nunio, nunio-sistema, nunio-letra).
   Solo cambia la PALETA (SPEC 3.3: rojo moderno, fondos neutros cálidos, modo oscuro) y agrega
   los componentes que Nunio no tiene. La densidad, la letra, los radios y los controles son los de
   Nunio y no se tocan acá.
   La marca de cada empresa se inyecta en <html style="--marca:…"> desde el panel; estos son los
   valores por defecto (la marca propia).
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

:root {
  /* rojo moderno: #E11D48 da 4.70:1 sobre blanco (AA) */
  --marca: #e11d48;
  --marca-fuerte: #be123c;
  --marca-texto: #be123c;          /* 6.1:1 sobre blanco */
  --marca-borde: #e11d48;
  --marca-tenue: rgba(225, 29, 72, .10);
  --marca-encima: #ffffff;
  --marca-acento: #881337;         /* rojo oscuro de acento */
  --marca-anillo: rgba(225, 29, 72, .28);

  /* noche cálida: la barra lateral y el modo oscuro dejan el azul de Nunio por un gris piedra */
  --noche-fondo: #1c1917;
  --noche-alto: #171412;
  --noche-panel: #292524;
  --noche-panel2: #2f2a28;
  --noche-linea: #44403c;
  --noche-sep: #3a3532;
  --noche-hondo: #141210;
  --noche-texto: #f0ebe7;
  --noche-texto2: #d6cfc9;
  --noche-tenue: #a8a29e;
  --noche-tenue2: #8f8985;
  --noche-titulo: #fafaf9;
  --noche-acento: #fb7185;

  --dia-titulo: #1c1917;
  --dia-fondo: #f6f4f2;
}

/* fondos neutros cálidos en el día */
:root {
  --ui-fondo: #f6f4f2;
  --ui-hondo: #f1eeeb;
  --ui-linea: #e4dfdb;
  --ui-linea2: #efebe8;
  --ui-texto: #292524;
  --ui-texto2: #44403c;
  --ui-tenue: #57534e;
  --ui-tenue2: #6b6560;
}

:root.oscuro:not(.light) {
  --marca: #f43f5e;
  --marca-fuerte: #fb7185;
  --marca-texto: #fda4af;
  --marca-borde: #fb7185;
  --marca-tenue: rgba(244, 63, 94, .16);
  --marca-anillo: rgba(251, 113, 133, .35);
  --marca-acento: #fda4af;
}

.btn-secondary:hover:not(:disabled) { background: var(--ui-linea); }
.sidebar-logo .logo-empresa { display: block; max-height: 38px; max-width: 160px; width: auto; object-fit: contain; }
.sidebar-logo .logo-nombre { font-family: var(--letra-titulo); font-weight: 700; font-size: var(--t-titulo); color: #fff; letter-spacing: .2px; }
.nav-item.active { background: var(--marca-tenue); color: #fff; border-left-color: var(--marca); }
.sidebar .nav-seccion { padding: 14px 16px 4px; font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .6px; color: rgba(255,255,255,.38); }

/* ── utilidades ─────────────────────────────────────────────────────────────────────────── */
.fila { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.fila-sep { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 10px; }
.tenue { color: var(--ui-tenue); }
.chico { font-size: var(--t-chico); }
.micro { font-size: var(--t-micro); }
.fuerte { font-weight: var(--p-fuerte); }
.mt { margin-top: 14px; }
.mb { margin-bottom: 14px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
.vacio { text-align: center; color: var(--ui-tenue2); padding: 40px 16px; }
.aviso-demo { background: var(--fondo-aviso); color: #92400e; border-radius: var(--radio); padding: 10px 14px; font-size: var(--t-chico); }
html.oscuro .aviso-demo { background: rgba(245,158,11,.14); color: #fcd34d; }
.cifra-grande { font-family: var(--letra-titulo); font-size: var(--t-cifra); font-weight: 700; color: var(--ui-titulo); line-height: 1.1; }
.pildora { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: var(--t-micro); font-weight: 600; background: var(--ui-hondo); color: var(--ui-texto2); }
.punto { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--noche-fondo); color: #fff; padding: 11px 18px; border-radius: var(--radio); box-shadow: var(--sombra-alta); z-index: 3000; font-size: var(--t-base); max-width: 92vw; }
.toast.error { background: var(--estado-error); }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
@media (max-width: 700px) { .form-row, .form-row-3 { grid-template-columns: 1fr; } }
.link { color: var(--marca-texto); cursor: pointer; text-decoration: none; background: none; border: 0; font: inherit; padding: 0; }
.link:hover { text-decoration: underline; }
textarea.form-control { min-height: 80px; resize: vertical; }

/* estados del asesor en el mapa (SPEC 5.1) */
.est-visita { background: #16a34a; }
.est-ruta { background: #2563eb; }
.est-detenido { background: #f59e0b; }
.est-sinsenal { background: #6b7280; }
.est-desactivada { background: #dc2626; }
.est-fuera { background: #a8a29e; }

/* ── mapa en vivo ───────────────────────────────────────────────────────────────────────── */
.mapa-layout { display: grid; grid-template-columns: 320px 1fr; height: calc(100vh - 61px); }
.mapa-lista { border-right: 1px solid var(--ui-linea); overflow-y: auto; background: var(--ui-panel); }
.mapa-lienzo { position: relative; min-height: 400px; }
.mapa-lienzo .leaflet-container { width: 100%; height: 100%; font-family: var(--letra); }
.mapa-asesor { padding: 11px 14px; border-bottom: 1px solid var(--ui-linea2); cursor: pointer; display: flex; gap: 10px; align-items: flex-start; }
.mapa-asesor:hover, .mapa-asesor.sel { background: var(--marca-tenue); }
.mapa-detalle { position: absolute; right: 12px; top: 12px; width: 300px; max-height: calc(100% - 24px); overflow-y: auto; z-index: 500; }
.mapa-pin { width: 30px; height: 30px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 12px; font-family: var(--letra-titulo); }
@media (max-width: 900px) {
  .mapa-layout { grid-template-columns: 1fr; grid-template-rows: 45vh 1fr; height: auto; }
  .mapa-lista { order: 2; border-right: 0; }
  .mapa-lienzo { order: 1; height: 45vh; }
  .mapa-detalle { position: static; width: auto; max-height: none; }
}

/* ── tablero por columnas (oportunidades) ───────────────────────────────────────────────── */
.kanban { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 10px; align-items: flex-start; }
.kanban-col { min-width: 250px; width: 250px; background: var(--ui-hondo); border-radius: var(--radio); padding: 8px; flex: 0 0 auto; }
.kanban-col.sobre { outline: 2px dashed var(--marca); }
.kanban-col h4 { font-size: var(--t-chico); padding: 4px 6px 8px; display: flex; justify-content: space-between; color: var(--ui-texto2); }
.kanban-tarjeta { background: var(--ui-panel); border-radius: var(--radio); padding: 10px 11px; margin-bottom: 8px; box-shadow: var(--sombra); cursor: grab; border-left: 3px solid transparent; }
.kanban-tarjeta.vencido { border-left-color: var(--estado-error); }
.kanban-tarjeta .t-nombre { font-weight: 600; font-size: var(--t-base); color: var(--ui-titulo); }
.kanban-tarjeta .t-meta { font-size: var(--t-micro); color: var(--ui-tenue); margin-top: 4px; display: flex; justify-content: space-between; gap: 6px; }
.rojo { color: var(--estado-error); font-weight: 600; }

/* ── línea de tiempo (actividad) ─────────────────────────────────────────────────────────── */
.timeline { position: relative; padding-left: 22px; }
.timeline::before { content: ''; position: absolute; left: 7px; top: 4px; bottom: 4px; width: 2px; background: var(--ui-linea); }
.tl-item { position: relative; padding: 0 0 14px; }
.tl-item::before { content: ''; position: absolute; left: -19px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--marca); border: 2px solid var(--ui-panel); }
.tl-hora { font-size: var(--t-micro); color: var(--ui-tenue); }

/* ── calendario ─────────────────────────────────────────────────────────────────────────── */
.cal-semana { display: grid; grid-template-columns: 54px repeat(7, 1fr); border: 1px solid var(--ui-linea); border-radius: var(--radio); overflow: hidden; background: var(--ui-panel); }
.cal-cab { padding: 8px 6px; text-align: center; font-size: var(--t-chico); font-weight: 600; border-bottom: 1px solid var(--ui-linea); background: var(--ui-panel2); }
.cal-cab.hoy { color: var(--marca-texto); }
.cal-hora { font-size: var(--t-micro); color: var(--ui-tenue); text-align: right; padding: 2px 6px; height: 48px; border-top: 1px solid var(--ui-linea2); }
.cal-celda { position: relative; height: 48px; border-top: 1px solid var(--ui-linea2); border-left: 1px solid var(--ui-linea2); }
.cal-celda.sobre { background: var(--marca-tenue); }
.cal-evento { position: absolute; left: 2px; right: 2px; border-radius: 6px; padding: 3px 6px; font-size: var(--t-micro); color: #fff; overflow: hidden; cursor: grab; z-index: 2; line-height: 1.25; box-shadow: var(--sombra); }
.cal-mes { display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid var(--ui-linea); border-radius: var(--radio); overflow: hidden; background: var(--ui-panel); }
.cal-mes-dia { min-height: 96px; border-top: 1px solid var(--ui-linea2); border-left: 1px solid var(--ui-linea2); padding: 4px; font-size: var(--t-micro); }
.cal-mes-dia.otro { background: var(--ui-hondo); color: var(--ui-tenue2); }
.cal-chip { display: block; border-radius: 4px; padding: 1px 5px; margin-top: 2px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }

/* ── chat interno ───────────────────────────────────────────────────────────────────────── */
.hilos { display: grid; grid-template-columns: 320px 1fr; height: calc(100vh - 61px); }
.hilo-item { padding: 12px 14px; border-bottom: 1px solid var(--ui-linea2); cursor: pointer; }
.hilo-item.sel, .hilo-item:hover { background: var(--marca-tenue); }
.burbuja { max-width: 72%; padding: 8px 12px; border-radius: 12px; margin: 4px 0; font-size: var(--t-base); line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.burbuja.mia { background: var(--marca); color: #fff; margin-left: auto; border-bottom-right-radius: 4px; }
.burbuja.otra { background: var(--ui-hondo); color: var(--ui-texto); border-bottom-left-radius: 4px; }
@media (max-width: 900px) { .hilos { grid-template-columns: 1fr; height: auto; } }

/* ── ventana flotante (modal) — misma forma que el componente de Nunio ─────────────────── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal { background: var(--ui-panel); border-radius: 12px; width: min(560px, 100%); max-height: 92vh; overflow-y: auto; box-shadow: var(--sombra-alta); }
.modal.ancho { width: min(860px, 100%); }
.modal-header { padding: 16px 20px; border-bottom: 1px solid var(--ui-linea2); display: flex; justify-content: space-between; align-items: center; }
.modal-header h3 { font-size: var(--t-titulo); color: var(--ui-titulo); }
.modal-body { padding: 18px 20px; }
.modal-footer { padding: 12px 20px; border-top: 1px solid var(--ui-linea2); display: flex; justify-content: flex-end; gap: 8px; }
.modal-close { background: none; border: 0; font-size: 22px; cursor: pointer; color: var(--ui-tenue); }

/* ── pestañas ───────────────────────────────────────────────────────────────────────────── */
.tab-nav { display: flex; gap: 4px; border-bottom: 1px solid var(--ui-linea); margin-bottom: 16px; overflow-x: auto; }
.tab-btn { background: none; border: 0; padding: 10px 14px; cursor: pointer; color: var(--ui-tenue); border-bottom: 2px solid transparent; font-size: var(--t-base); white-space: nowrap; }
.tab-btn.active { color: var(--marca-texto); border-bottom-color: var(--marca); }

/* ── interruptor ────────────────────────────────────────────────────────────────────────── */
.toggle-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex: 0 0 auto; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; cursor: pointer; inset: 0; background: var(--ui-linea); border-radius: 22px; transition: .2s; }
.toggle-slider::before { content: ''; position: absolute; height: 16px; width: 16px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: .2s; }
.toggle-switch input:checked + .toggle-slider { background: var(--marca); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(18px); }
.toggle-switch input:focus-visible + .toggle-slider { outline: 2px solid var(--marca); outline-offset: 2px; }

/* ── barras simples (tablero) ───────────────────────────────────────────────────────────── */
.barra-h { height: 8px; background: var(--ui-hondo); border-radius: 999px; overflow: hidden; }
.barra-h > span { display: block; height: 100%; background: var(--marca); border-radius: 999px; }
.ranking td:first-child { width: 36px; font-weight: 700; color: var(--marca-texto); }

/* ── entrada: el mismo componente de Nunio con la paleta cálida ─────────────────────────── */
.login-page { background: radial-gradient(1200px 600px at 20% 10%, rgba(225, 29, 72, .28), transparent 60%), linear-gradient(135deg, #1c1917, #292524 55%, #3f1d26); }