/* ---------------------------------------------------------------------------
   Dash Comercial — sistema visual Makosén
   Paleta oficial del manual de marca: rojo #D90416, negro #111111,
   grafito #4A4A4A, marfil #F6F2EC, gris hielo #E7E5E2, gris acero #8A8A8A.
   Tipografías de marca servidas localmente (la CSP no permite CDNs).
--------------------------------------------------------------------------- */

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/montserrat-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  --red: #D90416;
  --red-dark: #A80311;
  --red-soft: #FDECEE;
  --ink: #111111;
  --graphite: #4A4A4A;
  --steel: #8A8A8A;
  --ice: #E7E5E2;
  --ivory: #F6F2EC;
  --paper: #FFFFFF;

  --good: #2E8B57;
  --info: #3A6FA8;
  --warn: #B26B00;
  --bad: #D0281E;
  --good-soft: #E8F4ED;
  --info-soft: #E9F0F7;
  --warn-soft: #FBF1E0;
  --bad-soft: #FBEAE8;

  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(17, 17, 17, .06), 0 8px 24px rgba(17, 17, 17, .06);
  --shadow-lg: 0 24px 60px rgba(17, 17, 17, .18);
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Montserrat', 'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--display); margin: 0; letter-spacing: -.01em; }
h1 { font-size: 1.65rem; font-weight: 700; }
h2 { font-size: 1.1rem; font-weight: 700; }
h3 { font-size: .95rem; font-weight: 700; }
p { margin: 0; }
a { color: inherit; }

.eyebrow {
  font-family: var(--display);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: .2rem;
}
.muted { color: var(--graphite); }
.small { font-size: .8rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
[hidden] { display: none !important; }

/* ---------- Acceso ---------- */
.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(217, 4, 22, .10), transparent 60%),
    linear-gradient(160deg, #16110f 0%, #111111 55%, #1c1512 100%);
}
.login-card {
  width: min(420px, 100%);
  background: var(--paper);
  border-radius: 14px;
  padding: 2.4rem 2.2rem;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.login-logo { width: 240px; margin-bottom: 1.4rem; }
.login-card h1 { font-size: 1.5rem; }
.login-sub { color: var(--graphite); font-size: .84rem; margin-bottom: 1.2rem; }
.login-card label { font-size: .78rem; font-weight: 600; color: var(--graphite); margin-top: .5rem; }
.login-card input {
  padding: .7rem .8rem;
  border: 1px solid var(--ice);
  border-radius: var(--radius-sm);
  font: inherit;
  background: #FCFBFA;
}
.login-card input:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }
.login-error {
  background: var(--bad-soft);
  color: #8A1911;
  border-radius: var(--radius-sm);
  padding: .6rem .7rem;
  font-size: .82rem;
  margin-top: .8rem;
}
.login-foot { color: var(--steel); font-size: .74rem; margin-top: .9rem; text-align: center; }

/* ---------- Estructura ---------- */
.shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }

.sidebar {
  background: var(--ink);
  color: #EFEBE6;
  display: flex;
  flex-direction: column;
  padding: 1.4rem 1rem;
  gap: 1.6rem;
  position: sticky;
  top: 0;
  height: 100vh;
}
.sidebar-brand { display: flex; align-items: center; gap: .7rem; padding: 0 .3rem; }
/* El sello va como ícono redondeado, igual que el avatar del manual de marca. */
.sidebar-brand img { width: 34px; height: 34px; object-fit: cover; border-radius: 8px; }
.sidebar-brand strong { display: block; font-family: var(--display); font-size: .95rem; }
.sidebar-brand small { color: var(--steel); font-size: .7rem; }

.sidebar-nav { display: flex; flex-direction: column; gap: .15rem; flex: 1; }
.nav-item {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .6rem .7rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: #C9C3BC;
  font-size: .9rem;
  font-weight: 500;
  transition: background .12s ease, color .12s ease;
}
.nav-item:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.nav-item.active { background: var(--red); color: #fff; }
.nav-icon { width: 1.1rem; text-align: center; opacity: .9; }

.sidebar-foot { display: flex; flex-direction: column; gap: .6rem; }
.user-chip { display: flex; align-items: center; gap: .6rem; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--red); color: #fff;
  font-family: var(--display); font-size: .75rem; font-weight: 700;
}
.user-chip strong { display: block; font-size: .82rem; }
.user-chip small { color: var(--steel); font-size: .7rem; text-transform: capitalize; }

.main { min-width: 0; padding: 1.6rem 2rem 3rem; }
.topbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--ice);
  margin-bottom: 1.6rem;
}
.topbar-sub { color: var(--graphite); font-size: .85rem; margin-top: .25rem; }
.topbar-tools { display: flex; align-items: center; gap: .7rem; }

.view { display: flex; flex-direction: column; gap: 1.2rem; }

/* ---------- Controles ---------- */
.btn {
  font: inherit;
  font-weight: 600;
  font-size: .85rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  padding: .55rem 1rem;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  white-space: nowrap;
}
.btn:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-dark); }
.btn-secondary { background: var(--paper); color: var(--ink); border-color: var(--ice); }
.btn-secondary:hover { border-color: var(--steel); }
.btn-ghost { background: transparent; color: var(--graphite); }
.btn-ghost:hover { background: rgba(17, 17, 17, .05); color: var(--ink); }
.drawer-head .btn-ghost { color: #C9C3BC; }
.drawer-head .btn-ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.btn-small { padding: .35rem .7rem; font-size: .78rem; }
.btn-block { width: 100%; justify-content: center; margin-top: 1rem; padding: .7rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-danger { background: var(--bad-soft); color: #8A1911; border-color: #F1C7C2; }
.btn-danger:hover { background: #F6D9D6; }

.field, .field-inline { display: flex; gap: .35rem; }
.field { flex-direction: column; margin-bottom: .8rem; }
.field > span, .field-inline > span {
  font-size: .72rem; font-weight: 600; color: var(--graphite);
  text-transform: uppercase; letter-spacing: .04em;
}
.field-inline { align-items: center; gap: .5rem; }
.field-inline > span { text-transform: none; letter-spacing: 0; font-size: .78rem; }

input[type=text], input[type=url], input[type=number], input[type=date], input[type=email],
input[type=password], input[type=search], input[type=datetime-local], select, textarea {
  font: inherit;
  font-size: .87rem;
  padding: .5rem .65rem;
  border: 1px solid var(--ice);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  max-width: 100%;
}
textarea { resize: vertical; line-height: 1.5; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--red); outline-offset: 1px; border-color: transparent;
}
.field-search { flex: 1; min-width: 220px; }
.field-search input { width: 100%; }

.toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .8rem;
  background: var(--paper); border: 1px solid var(--ice);
  border-radius: var(--radius); padding: .8rem 1rem;
}
.toolbar .btn-primary { margin-left: auto; }

/* ---------- Buscador grande + filtros chicos (Prospectos) ----------
   El buscador manda: es lo que se usa todo el tiempo. Los filtros de abajo
   (agenda, etapa, fuente, temperatura, orden) son prefiltros ocasionales y
   se ven claramente en segundo plano, más chicos y en su propia franja. */
.search-panel {
  background: var(--paper); border: 1px solid var(--ice);
  border-radius: var(--radius); padding: 1rem 1.1rem;
}
.search-row { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.field-search-big { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: .3rem; }
.field-search-big-label {
  font-size: .78rem; font-weight: 700; color: var(--graphite);
  text-transform: uppercase; letter-spacing: .04em;
}
.field-search-big-box { display: flex; align-items: stretch; gap: .5rem; }
.field-search-big-box input {
  flex: 1; font-size: 1.05rem; padding: .75rem .9rem;
}
.search-icon-btn {
  flex: 0 0 auto; width: 3rem; font-size: 1.2rem; line-height: 1;
  border: 1px solid var(--ice); border-radius: var(--radius-sm);
  background: var(--red); color: #fff; cursor: pointer;
}
.search-icon-btn:hover { background: var(--red-dark); }
.search-icon-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

.temp-tier-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.temp-tier-btn { font-size: .78rem; }

.toolbar-filters { margin: .8rem 0 0; }
/* Una etiqueta de campo pegada al párrafo anterior se lee como parte de él. */
p + .field, .muted + .field { margin-top: .9rem; }

/* ---------- Paneles y grillas ---------- */
.panel {
  background: var(--paper);
  border: 1px solid var(--ice);
  border-radius: var(--radius);
  padding: 1.2rem 1.3rem;
  box-shadow: var(--shadow);
  min-width: 0;
}
.panel-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: .9rem;
}
.grid-2 { display: grid; grid-template-columns: 1.35fr 1fr; gap: 1.2rem; align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; align-items: start; }
.column-stack { display: flex; flex-direction: column; gap: 1.2rem; }

/* ---------- Franja de agenda ---------- */
/* Tres escalones, de arriba a abajo: (1) toda la cartera partida en 4
   categorías excluyentes que suman el total — Cerrada/Postergada/
   Atrasada/En conversación —, (2) la composición de esas dos que hace
   falta accionar, (3) Hoy/Mañana/Semana/Mes/Sin fecha de las tareas
   sueltas. Son preguntas distintas ("¿cuánta gente tengo en cada estado?"
   vs. "¿qué tarea vence esta semana?"), por eso van en filas separadas y
   no una sola grilla pareja. */
.agenda-strip { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1rem; }
.portfolio-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: .8rem; }
.portfolio-detail { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
.agenda-strip-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: .8rem; }
.agenda-breakdown { margin: .3rem 0 0; }
.agenda-card {
  background: var(--paper); border: 1px solid var(--ice); border-radius: var(--radius);
  padding: .9rem 1rem; cursor: pointer; text-align: left; font: inherit;
  border-left: 3px solid var(--ice); transition: border-color .12s ease, transform .12s ease;
}
.agenda-card:hover { transform: translateY(-1px); border-left-color: var(--red); }
.agenda-card strong { display: block; font-family: var(--display); font-size: 1.7rem; line-height: 1.1; }
.agenda-card span { font-size: .74rem; color: var(--graphite); text-transform: uppercase; letter-spacing: .05em; }
.agenda-card.is-critical { border-left-color: var(--bad); }
.agenda-card.is-critical strong { color: var(--bad); }
.agenda-card.is-today { border-left-color: var(--warn); }
.agenda-card.is-today strong { color: var(--warn); }
.agenda-card-lead strong { font-size: 2.2rem; }
.agenda-card-total { cursor: default; border-left-color: var(--graphite); }
.agenda-card-total:hover { transform: none; }
.agenda-card-lead span { text-transform: none; letter-spacing: 0; font-size: .8rem; }

/* ---------- Listas ---------- */
.stack-list { display: flex; flex-direction: column; gap: .55rem; }
.stack-list.compact .list-item { padding: .6rem .75rem; }
.list-item {
  display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem;
  padding: .8rem .9rem; border: 1px solid var(--ice); border-radius: var(--radius-sm);
  background: #FDFCFB; cursor: pointer; text-align: left; font: inherit; width: 100%;
  transition: border-color .12s ease, background .12s ease;
}
.list-item:hover { border-color: var(--steel); background: var(--paper); }
.list-item.static { cursor: default; }
.list-item.static:hover { border-color: var(--ice); background: #FDFCFB; }
.list-item .li-main { min-width: 0; flex: 1; }
.list-item .li-title { font-weight: 600; font-size: .9rem; }
.list-item .li-sub { color: var(--graphite); font-size: .78rem; margin-top: .15rem; }
.list-item .li-side { text-align: right; flex-shrink: 0; font-size: .78rem; color: var(--graphite); }
.empty {
  padding: 1.4rem; text-align: center; color: var(--steel); font-size: .85rem;
  border: 1px dashed var(--ice); border-radius: var(--radius-sm);
}

/* ---------- Etiquetas de estado ---------- */
.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .16rem .5rem; border-radius: 999px;
  font-size: .7rem; font-weight: 600; letter-spacing: .01em;
  background: var(--ice); color: var(--graphite); white-space: nowrap;
}
.chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.bad { background: var(--bad-soft); color: #8A1911; }
.chip.warn { background: var(--warn-soft); color: #7A4A00; }
.chip.good { background: var(--good-soft); color: #1D5E3B; }
.chip.info { background: var(--info-soft); color: #29527A; }
.chip.plain::before { display: none; }

.chip-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.chip-btn {
  font: inherit; font-size: .76rem; padding: .3rem .65rem; border-radius: 999px;
  border: 1px solid var(--ice); background: var(--paper); cursor: pointer; color: var(--graphite);
}
.chip-btn:hover { border-color: var(--red); color: var(--red); }

/* ---------- Tabla ---------- */
.table-wrap { background: var(--paper); border: 1px solid var(--ice); border-radius: var(--radius); overflow: auto; box-shadow: var(--shadow); }
.data-table { width: 100%; border-collapse: collapse; font-size: .87rem; }
.data-table th {
  text-align: left; font-family: var(--display); font-size: .68rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--graphite); font-weight: 700;
  padding: .75rem 1rem; border-bottom: 1px solid var(--ice); background: #FBFAF8;
  position: sticky; top: 0; z-index: 1;
}
.data-table td { padding: .7rem 1rem; border-bottom: 1px solid #F1EEEA; vertical-align: top; }
.data-table tbody tr { cursor: pointer; }
.data-table tbody tr:hover { background: #FCFBF9; }
.data-table tbody tr:last-child td { border-bottom: none; }
.cell-strong { font-weight: 600; }
.cell-sub { color: var(--steel); font-size: .76rem; }
.pager { display: flex; align-items: center; justify-content: center; gap: 1rem; font-size: .82rem; color: var(--graphite); }

/* ---------- Gráficos ---------- */
.chart-block { display: flex; flex-direction: column; gap: .55rem; }
.bar-row { display: grid; grid-template-columns: 150px 1fr auto; align-items: center; gap: .7rem; font-size: .82rem; }
.bar-row .bar-label { color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Requerimiento 15: los tramos del embudo y del aging abren su listado. */
.bar-row[role="button"] { cursor: pointer; border-radius: var(--radius-sm); padding: .15rem .3rem; margin: 0 -.3rem; }
.bar-row[role="button"]:hover, .bar-row[role="button"]:focus-visible { background: var(--surface-2, rgba(0,0,0,.04)); outline: none; }
/* Pista y relleno son <span>: sin display:block el ancho y el alto no se
   aplican y la barra queda invisible. */
.bar-track { display: block; background: #F2EFEB; border-radius: 4px; height: 14px; overflow: hidden; }
.bar-fill { display: block; width: 0; height: 100%; border-radius: 4px; background: var(--red); }
.bar-fill.neutral { background: var(--graphite); }
.bar-fill.info { background: var(--info); }
.bar-fill.good { background: var(--good); }
.bar-fill.warn { background: var(--warn); }
.bar-value { font-variant-numeric: tabular-nums; color: var(--graphite); font-size: .8rem; min-width: 3.4rem; text-align: right; }
.bar-split { display: flex; width: 0; gap: 2px; height: 14px; }
.bar-split > span { height: 100%; }
.bar-split > span:first-child { border-radius: 4px 0 0 4px; }
.bar-split > span:last-child { border-radius: 0 4px 4px 0; }
.legend { display: flex; flex-wrap: wrap; gap: .8rem; font-size: .75rem; color: var(--graphite); margin-top: .3rem; }
.legend span { display: inline-flex; align-items: center; gap: .35rem; }
.legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.funnel-drop { font-size: .72rem; color: var(--steel); padding-left: 157px; margin-top: -.25rem; }

.mini-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: .7rem; }
.mini-stat { background: #FBFAF8; border: 1px solid var(--ice); border-radius: var(--radius-sm); padding: .7rem .8rem; }
.mini-stat strong { display: block; font-family: var(--display); font-size: 1.3rem; line-height: 1.2; }
.mini-stat span { font-size: .72rem; color: var(--graphite); }

.alert-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .55rem; }
.alert-card {
  border: 1px solid var(--ice); border-radius: var(--radius-sm); padding: .6rem .7rem;
  background: #FDFCFB; cursor: pointer; text-align: left; font: inherit;
}
.alert-card:hover { border-color: var(--red); }
.alert-card strong { display: block; font-family: var(--display); font-size: 1.15rem; }
.alert-card span { font-size: .72rem; color: var(--graphite); }
.alert-card.zero strong { color: var(--good); }

/* ---------- Modo Jornada ---------- */
.journey-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.journey-controls { display: flex; align-items: center; gap: .7rem; }
.journey-card {
  background: var(--paper); border: 1px solid var(--ice); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1.4rem 1.5rem;
}
.journey-progress { height: 4px; background: var(--ice); border-radius: 2px; overflow: hidden; margin-bottom: 1.2rem; }
.journey-progress > span { display: block; width: 0; height: 100%; background: var(--red); }
.journey-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 1.6rem; }
.journey-section { margin-top: 1.2rem; }
.journey-section h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--graphite); margin-bottom: .4rem; }

/* ---------- Ficha (drawer) ---------- */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(17, 17, 17, .45); z-index: 40; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(700px, 100%);
  background: var(--ivory); z-index: 50; display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg); animation: slide-in .18s ease;
}
@keyframes slide-in { from { transform: translateX(24px); opacity: .4; } to { transform: none; opacity: 1; } }
.drawer-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.2rem 1.4rem; background: var(--ink); color: #fff;
}
.drawer-head .eyebrow { color: #F2A3AB; }
.drawer-body { overflow-y: auto; padding: 1.2rem 1.4rem 3rem; display: flex; flex-direction: column; gap: 1rem; }
.drawer-section { background: var(--paper); border: 1px solid var(--ice); border-radius: var(--radius); padding: 1rem 1.1rem; }
.drawer-section > h3 { font-size: .72rem; text-transform: uppercase; letter-spacing: .09em; color: var(--red); margin-bottom: .7rem; }

.fact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .7rem .9rem; margin: 0; }
.fact { min-width: 0; }
.fact dt { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--steel); }
.fact dd { margin: .1rem 0 0; font-size: .86rem; font-weight: 500; overflow-wrap: anywhere; }

.action-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: .45rem; }
.action-btn {
  font: inherit; font-size: .8rem; font-weight: 600; padding: .55rem .6rem;
  border: 1px solid var(--ice); border-radius: var(--radius-sm); background: var(--paper);
  cursor: pointer; text-align: center; transition: all .12s ease;
}
.action-btn:hover { border-color: var(--red); color: var(--red); }
.action-btn.primary { background: var(--red); border-color: var(--red); color: #fff; }
.action-btn.primary:hover { background: var(--red-dark); color: #fff; }
.action-btn.win { border-color: #BFE0CD; color: #1D5E3B; background: var(--good-soft); }
.action-btn.lose { border-color: #F1C7C2; color: #8A1911; background: var(--bad-soft); }

.timeline { display: flex; flex-direction: column; gap: .1rem; }
.timeline-item { display: grid; grid-template-columns: 92px 1fr; gap: .8rem; padding: .55rem 0; border-bottom: 1px solid #F3F0EC; }
.timeline-item:last-child { border-bottom: none; }
.timeline-date { font-size: .72rem; color: var(--steel); font-variant-numeric: tabular-nums; }
.timeline-body { font-size: .84rem; min-width: 0; }
.timeline-body strong { font-weight: 600; }
.timeline-actor { font-size: .72rem; color: var(--steel); }

.opportunity-card {
  border: 1px solid var(--ice); border-radius: var(--radius-sm); padding: .75rem .85rem;
  background: #FDFCFB; cursor: pointer; display: flex; justify-content: space-between; gap: .8rem;
  width: 100%; font: inherit; text-align: left; margin-bottom: .5rem;
}
.opportunity-card:hover { border-color: var(--red); }
.opportunity-card.active { border-color: var(--red); background: var(--red-soft); }

/* ---------- Agentes ---------- */
.agent-tabs { display: flex; gap: .4rem; border-bottom: 1px solid var(--ice); flex-wrap: wrap; }
.tab {
  font: inherit; font-size: .86rem; font-weight: 600; padding: .6rem 1rem;
  background: transparent; border: none; border-bottom: 2px solid transparent;
  cursor: pointer; color: var(--graphite);
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--red); border-bottom-color: var(--red); }
.agent-panel { display: flex; flex-direction: column; gap: 1.2rem; }

.chat-log {
  display: flex; flex-direction: column; gap: .7rem; max-height: 380px; overflow-y: auto;
  padding: .8rem; background: #FBFAF8; border: 1px solid var(--ice); border-radius: var(--radius-sm);
}
.chat-bubble { padding: .7rem .85rem; border-radius: var(--radius-sm); font-size: .87rem; max-width: 92%; }
.chat-bubble.agent { background: var(--paper); border: 1px solid var(--ice); }
.chat-bubble.user { background: var(--ink); color: #fff; align-self: flex-end; }
.chat-bubble p + p { margin-top: .5rem; }
.chat-form { display: flex; gap: .6rem; margin-top: .7rem; align-items: flex-end; }
.chat-form textarea { flex: 1; }

.capture-result { margin-top: .9rem; }
.proposal-box { border: 1px solid var(--ice); border-radius: var(--radius-sm); padding: .9rem 1rem; background: #FBFAF8; }
.proposal-box h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; color: var(--red); margin-bottom: .6rem; }

.readiness { border-radius: var(--radius-sm); padding: .8rem .9rem; margin-bottom: .9rem; font-size: .85rem; border: 1px solid var(--ice); }
.readiness.green { background: var(--good-soft); border-color: #BFE0CD; }
.readiness.yellow { background: var(--warn-soft); border-color: #EAD3A8; }
.readiness.red { background: var(--bad-soft); border-color: #F1C7C2; }
.readiness ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.readiness li { font-size: .8rem; }

.generator-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.audit-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.generator-result { margin-top: 1rem; }
.council-result { margin-top: 1rem; display: flex; flex-direction: column; gap: .9rem; }
.council-block { border-left: 3px solid var(--red); padding-left: .9rem; }
.council-block h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--graphite); }
.council-block p { font-size: .88rem; margin-top: .2rem; }

.section-editor { border: 1px solid var(--ice); border-radius: var(--radius-sm); margin-bottom: .5rem; background: var(--paper); }
.section-editor summary { padding: .6rem .8rem; cursor: pointer; font-weight: 600; font-size: .85rem; }
.section-editor .section-body { padding: 0 .8rem .8rem; }
.section-editor pre {
  white-space: pre-wrap; font: inherit; font-size: .84rem; color: var(--graphite);
  background: #FBFAF8; padding: .7rem; border-radius: var(--radius-sm); margin: 0 0 .6rem;
}

.persona-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .8rem; }
.persona-card { border: 1px solid var(--ice); border-radius: var(--radius-sm); padding: .8rem; background: #FBFAF8; }
.persona-card img { width: 100%; border-radius: var(--radius-sm); margin-bottom: .5rem; display: block; }
.persona-slot {
  border: 1px dashed var(--steel); border-radius: var(--radius-sm); padding: 1rem; text-align: center;
  color: var(--steel); font-size: .78rem; margin-bottom: .5rem;
}
.prompt-box {
  font-size: .74rem; color: var(--graphite); background: var(--paper); border: 1px solid var(--ice);
  border-radius: var(--radius-sm); padding: .5rem; max-height: 130px; overflow-y: auto; white-space: pre-wrap;
  margin-bottom: .5rem;
}

/* ---------- Modal y avisos ---------- */
.modal {
  border: none; border-radius: 12px; padding: 0; width: min(560px, 92vw);
  box-shadow: var(--shadow-lg); color: var(--ink); background: var(--paper);
}
.modal::backdrop { background: rgba(17, 17, 17, .5); }
.modal form { padding: 1.4rem 1.5rem; }
.modal h2 { margin-bottom: 1rem; }
.modal-foot { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.2rem; }

.toast-stack { position: fixed; bottom: 1.4rem; right: 1.4rem; display: flex; flex-direction: column; gap: .5rem; z-index: 90; }
.toast {
  background: var(--ink); color: #fff; padding: .7rem 1rem; border-radius: var(--radius-sm);
  font-size: .85rem; box-shadow: var(--shadow-lg); max-width: 380px;
}
.toast.error { background: #8A1911; }
.toast.ok { background: #1D5E3B; }

.spinner {
  display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-line { color: var(--steel); font-size: .85rem; padding: 1rem 0; }

/* ---------- Utilidades ----------
   La política de seguridad del servicio bloquea los atributos style="…", así
   que el espaciado puntual vive acá y los anchos de las barras se aplican por
   CSSOM desde app.js (ver paintDataStyles). */
.mt-xs { margin-top: .3rem; }
.mt-sm { margin-top: .4rem; }
.mt-sm2 { margin-top: .5rem; }
.mt-md { margin-top: .6rem; }
.mt-md2 { margin-top: .7rem; }
.mt-lg { margin-top: .8rem; }
.mt-xl { margin-top: 1rem; }
.mt-2xl { margin-top: 1.2rem; }
.mb-md { margin-bottom: .7rem; }
.mb-lg { margin-bottom: 1rem; }
.mv-sm { margin: .4rem 0; }
.subhead { margin: .5rem 0 .3rem; }
.material-head { margin: 1.2rem 0 .4rem; }
.material-head-lg { margin: 1.2rem 0 .6rem; }
.material-subhead { margin: 1rem 0 .4rem; }
.right { text-align: right; }
.end { justify-content: flex-end; }
.flat { box-shadow: none; }
.w-full { width: 100%; }
.title-lg { font-size: 1.35rem; }
.warn-text { color: var(--warn); }
.scroll-panel { max-height: 50vh; overflow-y: auto; }
.track-tall { height: 18px; }
.track-clear { background: transparent; }
.swatch-good, .split-good { background: var(--good); }
.swatch-info, .split-info { background: var(--info); }
.swatch-bad, .split-bad { background: var(--bad); }

/* ---------- Sistema: cajas de igual tamaño y panel de usuarios ---------- */
.sys-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin-bottom: 1.2rem; }
.sys-card { display: flex; flex-direction: column; height: 24rem; }
.sys-card .panel-head { flex: 0 0 auto; }
.sys-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: .25rem; scrollbar-width: thin; }
.sys-card .mini-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; align-content: stretch; }

.users-panel { padding: 1.3rem 1.4rem; }
.users-table-wrap { overflow-x: auto; }
.users-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.users-table th { text-align: left; font-family: var(--display); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--steel); padding: .5rem .7rem; border-bottom: 1px solid var(--ice); white-space: nowrap; }
.users-table td { padding: .75rem .7rem; border-bottom: 1px solid #F3F0EC; vertical-align: middle; }
.users-table tr:last-child td { border-bottom: none; }
.users-table tr.is-inactive td { opacity: .55; }
.users-table .u-name { font-weight: 600; font-size: .92rem; }
.users-table .u-mail { color: var(--graphite); }
.users-table .u-when { color: var(--graphite); font-size: .8rem; white-space: nowrap; }
.users-table .u-actions { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; }
.users-table .u-you { margin-left: .4rem; font-size: .68rem; color: var(--red); font-weight: 700; letter-spacing: .04em; }
.field input.mono-pass { font-family: ui-monospace, Menlo, Consolas, monospace; }
.pw-generate { margin-top: -.55rem; margin-bottom: .8rem; }
@media (max-width: 1180px) { .sys-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) { .sys-grid { grid-template-columns: 1fr; } .sys-card { height: 22rem; } }

/* ---------- Adaptación a pantallas chicas ---------- */
@media (max-width: 1180px) {
  .grid-2, .grid-3, .generator-grid, .journey-grid { grid-template-columns: 1fr; }
  .agenda-strip-row { grid-template-columns: repeat(3, 1fr); }
  .portfolio-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; flex-direction: row; align-items: center; flex-wrap: wrap; }
  .sidebar-nav { flex-direction: row; flex-wrap: wrap; }
  .main { padding: 1.2rem; }
  .topbar { flex-direction: column; align-items: flex-start; }
  .agenda-strip-row { grid-template-columns: repeat(2, 1fr); }
  .portfolio-row, .portfolio-detail { grid-template-columns: 1fr; }
  .alert-grid { grid-template-columns: 1fr; }
  .bar-row { grid-template-columns: 110px 1fr auto; }
  .funnel-drop { padding-left: 117px; }
}

/* ---------------------------------------------------------------------------
   Jerarquía de la oportunidad (requerimiento 06) y temperatura (requerimiento 11)
--------------------------------------------------------------------------- */

/* "Oportunidades" pasa a ser un rótulo de sección: lo que manda es la etapa. */
.section-tag {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--steel);
  margin: 0 0 10px;
}

.stage-headline { margin-bottom: 14px; }

.stage-now {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 28px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0;
}

.stage-sub {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--steel);
}

.card-stage {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 15px;
  letter-spacing: -.01em;
}

/* Stepper de las cuatro fases del proceso comercial. */
.stepper {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  font-size: 12px;
  color: var(--steel);
}

.step {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.step-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--ice);
  background: var(--paper);
  flex: none;
}

.step.is-done { color: var(--graphite); }
.step.is-done .step-dot { background: var(--graphite); border-color: var(--graphite); }

.step.is-current { color: var(--red); font-weight: 600; }
.step.is-current .step-dot { background: var(--red); border-color: var(--red); }

.stepper.is-paused { opacity: .65; }

.meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.meta-chip {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--ivory);
  border: 1px solid var(--ice);
  font-size: 12px;
  color: var(--graphite);
}

/* Tres estados con color propio, iguales en ficha, listados y reportes. */
.temp-picker {
  display: inline-flex;
  border: 1px solid var(--ice);
  border-radius: 999px;
  overflow: hidden;
  background: var(--paper);
}

.temp-option {
  border: 0;
  background: transparent;
  padding: 4px 12px;
  font: inherit;
  font-size: 12px;
  color: var(--steel);
  cursor: pointer;
}

.temp-option + .temp-option { border-left: 1px solid var(--ice); }
.temp-option:hover { background: var(--ivory); }

.temp-option.temp-cold.is-on { background: var(--info-soft); color: var(--info); font-weight: 600; }
.temp-option.temp-warm.is-on { background: var(--warn-soft); color: var(--warn); font-weight: 600; }
.temp-option.temp-hot.is-on  { background: var(--bad-soft);  color: var(--bad);  font-weight: 600; }

.temp-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  vertical-align: middle;
}

.temp-dot.temp-cold { background: var(--info); }
.temp-dot.temp-warm { background: var(--warn); }
.temp-dot.temp-hot  { background: var(--bad); }

/* ---------------------------------------------------------------------------
   Historial legible y accionable (requerimiento 05)
--------------------------------------------------------------------------- */

/* Ninguna entrada puede desbordar el marco de la ficha, ni siquiera con una
   URL larga pegada sin espacios. */
.timeline-body,
.timeline-body div,
.timeline-body strong {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.inline-link {
  color: var(--info);
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

.inline-link:hover { color: var(--red); }

.wa-btn {
  text-decoration: none;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Estadísticas (requerimiento 15)
--------------------------------------------------------------------------- */

/* Los tramos de atraso se leen como alerta, no como volumen normal. */
.bar-fill.is-bad { background: var(--bad); }

.sales-row {
  padding: 12px 0;
  border-bottom: 1px solid var(--ice);
}

.sales-row:last-of-type { border-bottom: 0; }

.sales-row > strong {
  display: inline-block;
  margin-bottom: 8px;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--steel);
}

.fact-grid.compact {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px 14px;
}

/* La tabla de agentes tiene diez columnas: en pantallas chicas scrollea sola
   dentro de su panel en vez de romper el ancho de la página. */
#stats-agents-table { min-width: 780px; }

/* ---------------------------------------------------------------------------
   Datos faltantes editables en el generador (requerimiento 17)
--------------------------------------------------------------------------- */

/* El bloque rojo dejó de ser una lista de errores: ahora es un formulario. */
.readiness-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 14px;
  align-items: end;
  margin: 12px 0 6px;
  padding-top: 12px;
  border-top: 1px solid var(--ice);
}

.readiness-form .field { margin: 0; }
.readiness-form .btn { align-self: end; }

/* ---------------------------------------------------------------------------
   Tablero de operación comercial (requerimiento 14)

   Cinco tarjetas por fila en escritorio y al menos seis filas por página: la
   idea es ubicar una empresa por barrido visual, no recorriendo 100 acciones
   de a una con el botón "Saltar".
--------------------------------------------------------------------------- */

.op-board {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}

@media (max-width: 1400px) { .op-board { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1100px) { .op-board { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px)  { .op-board { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .op-board { grid-template-columns: 1fr; } }

.op-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 132px;
  padding: 12px;
  text-align: left;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ice);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}

.op-card:hover {
  border-color: var(--red);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.op-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.op-card-company {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.25;
  /* Los nombres largos no pueden romper la grilla. */
  overflow-wrap: anywhere;
}

.op-card-action {
  font-size: 12px;
  color: var(--graphite);
  /* La acción se recorta a dos líneas: la ficha completa está a un clic. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.op-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: auto;
  font-size: 11px;
  color: var(--steel);
}

.op-card-stage {
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--ivory);
  border: 1px solid var(--ice);
  white-space: nowrap;
}

.op-card-owner {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Paginación numerada: se salta a cualquier página sin recorrer el resto. */
.op-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 18px;
}

.pager-btn {
  min-width: 34px;
  padding: 5px 10px;
  font: inherit;
  font-size: 12px;
  color: var(--graphite);
  background: var(--paper);
  border: 1px solid var(--ice);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.pager-btn:hover:not(:disabled) { border-color: var(--steel); }
.pager-btn:disabled { opacity: .45; cursor: default; }

.pager-btn.is-on {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  font-weight: 600;
}

/* Resumen de destinos de la transferencia (requerimiento 04) */
.handoff-summary {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}

.handoff-summary li {
  padding: 8px 0;
  border-bottom: 1px solid var(--ice);
}

.handoff-summary li:last-child { border-bottom: 0; }

.temp-very_cold { color: #35489a; background-color: #e7eafb; }
.temp-very_hot { color: #8c1830; background-color: #ffd5de; }
.temp-option.temp-very_cold.is-on { background: #35489a; color: white; }
.temp-option.temp-very_hot.is-on { background: #8c1830; color: white; }

.filter-bar { display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; margin:16px 0; padding:16px; border:1px solid var(--line,#e3e0da); border-radius:10px; background:#fff; }
#stats-summary [role="button"] { cursor:pointer; }
#stats-summary [role="button"]:hover, #stats-summary [role="button"]:focus-visible { border-color:#d4001c; outline:2px solid #d4001c; outline-offset:1px; }

/* Empresa asociada: cabecera + contactos individuales debajo */
.assoc-block { border: 1px solid var(--line, #2a2a2a); border-radius: 10px; margin: 0 0 14px; overflow: hidden; }
.assoc-block.selected { border-color: var(--accent, #d8232a); }
.assoc-block .assoc-head { border-bottom: 1px solid var(--line, #2a2a2a); }
.list-item.nested { margin-left: 18px; border-left: 3px solid var(--line, #2a2a2a); }

/* Ficha operativa de postventa: el "Qué hago ahora" operativo */
.ps-now { border-left: 4px solid var(--accent, #d8232a); padding: 10px 14px; margin: 10px 0; background: rgba(216, 35, 42, .06); border-radius: 6px; }
.ps-now-action { font-size: 1.05rem; margin: 2px 0 4px; }
.link-btn { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; }

/* Lectura comercial: mensaje sugerido (se copia, no se envía solo) */
.intel-msg { border-left: 4px solid var(--accent, #d8232a); padding: 8px 12px; margin: 8px 0 0; background: rgba(216, 35, 42, .06); border-radius: 6px; white-space: pre-wrap; font-size: .92rem; }