/* ---------------------------------------------------------------------------
   Dash Comercial — sistema visual HYDRA
   Paleta del manual de marca v1.0: Primario #0B1226, Acento #00D4FF, Secundario #8B5CF6, Alerta #FF4F6E, Éxito #22C55E, Atención #F59E0B, Fondo #F7F4EE, Superficie #E9E5DF. Tipografía: Inter.
   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;
}
@font-face {
  font-family: 'Sora';
  src: url('/fonts/sora-latin.woff2') format('woff2');
  font-weight: 100 800;
  font-display: swap;
}

:root {
  --fg: #0B1226;
  color-scheme: light;
  --red: #6D3FE0;
  --red-dark: #4F2AB5;
  --red-soft: #EFE9FD;
  --ink: #0B1226;
  --graphite: #454B5C;
  --steel: #8A8F9C;
  --ice: #E9E5DF;
  --ivory: #F7F4EE;
  --paper: #FFFFFF;

  --good: #2E8B57;
  --info: #2F7FBF;
  --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: 'Inter', 'Montserrat', 'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--ivory);
  color: var(--fg);
  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 (manual de marca HYDRA v1.0) ---------- */
.login {
  --h-night: #0B1226; --h-deep: #0F1E3D; --h-sky: #6ED3FF; --h-violet: #A781FF; --h-mist: #E9F2FF; --h-graphite: #1F2533;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--h-mist);
  background:
    radial-gradient(900px 600px at 8% -8%, rgba(167, 129, 255, .30), transparent 60%),
    radial-gradient(1000px 700px at 85% 95%, rgba(110, 211, 255, .16), transparent 62%),
    linear-gradient(160deg, #0F1E3D 0%, #0B1226 55%, #080E1E 100%);
  overflow: hidden;
}
.login-top { display: flex; gap: .9rem; padding: 1.1rem 2rem; font-size: .68rem; letter-spacing: .32em; color: rgba(233, 242, 255, .7); text-transform: uppercase; }
.login-top i { font-style: normal; opacity: .55; }
.login-shell { flex: 1; display: grid; grid-template-columns: minmax(340px, 520px) 1fr; gap: 2rem; align-items: center; padding: 0 2rem 2rem 4vw; }
.login-brand { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1.4rem; }
.login-logo { width: 104px; height: 104px; border-radius: 50%; flex: none; box-shadow: 0 0 0 3px rgba(110, 211, 255, .55), 0 0 34px rgba(110, 211, 255, .35); }
.login-brand h1 { font-family: var(--display); font-size: 3rem; letter-spacing: .08em; line-height: 1; color: #fff; margin: 0; }
.login-kicker { margin: .5rem 0 .55rem; font-size: .66rem; letter-spacing: .26em; color: rgba(233, 242, 255, .8); text-transform: uppercase; }
.login-tag { display: inline-block; margin: 0; padding: .18rem .9rem; font-style: italic; font-weight: 600; font-size: .9rem; color: #fff; border: 1px solid var(--h-violet); border-radius: 999px; box-shadow: 0 0 16px rgba(167, 129, 255, .35); }
.login-card {
  background: linear-gradient(180deg, rgba(15, 30, 61, .86), rgba(11, 18, 38, .9));
  border: 1px solid rgba(110, 211, 255, .45);
  border-radius: 16px;
  padding: 1.9rem 1.9rem 1.5rem;
  box-shadow: 0 0 0 1px rgba(110, 211, 255, .12), 0 28px 70px rgba(2, 6, 18, .55);
  display: flex; flex-direction: column; gap: .35rem;
}
.login-card h2 { font-family: var(--display); font-size: 1.7rem; color: #fff; margin: 0; }
.login-card h2::before { content: ''; display: inline-block; width: 5px; height: 1.5rem; margin-right: .7rem; vertical-align: -.2rem; background: var(--h-sky); transform: skewX(-18deg); border-radius: 2px; }
.login-sub { color: rgba(233, 242, 255, .78); font-size: .9rem; margin: .1rem 0 1rem; }
.login-card label { font-size: .85rem; font-weight: 600; color: var(--h-mist); margin-top: .6rem; }
.login .login-card input[type=email], .login .login-card input[type=password] {
  padding: .8rem .9rem;
  border: 1px solid rgba(110, 211, 255, .35);
  border-radius: 10px;
  font: inherit;
  color: #fff;
  background: rgba(8, 14, 30, .75);
}
.login .login-card input::placeholder { color: rgba(233, 242, 255, .5); }
.login .login-card input:focus-visible { outline: 2px solid var(--h-sky); outline-offset: 1px; }
.login-card .btn-primary {
  margin-top: 1.1rem; padding: .85rem 1rem; border: 1px solid rgba(110, 211, 255, .7); border-radius: 12px;
  font-family: var(--display); font-size: 1.05rem;
  border: 1px solid rgba(110, 211, 255, .7); color: #fff; background: linear-gradient(90deg, #35C4F2 0%, #6B7DEA 60%, #8A6FF0 100%); box-shadow: 0 10px 26px rgba(107, 125, 234, .35);
}
.login-card .btn-primary:hover { filter: brightness(1.08); }
.login-error { background: rgba(208, 40, 30, .16); color: #FFB4AE; border: 1px solid rgba(208, 40, 30, .4); border-radius: 8px; padding: .6rem .7rem; font-size: .82rem; margin-top: .8rem; }
.login-foot { color: rgba(233, 242, 255, .68); font-size: .78rem; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid rgba(110, 211, 255, .2); }
.login-foot small { display: block; margin-top: .35rem; font-size: .7rem; opacity: .75; }
.login-art { position: relative; min-height: 520px; display: grid; place-items: center; }
.art-halo { position: absolute; width: 440px; height: 440px; border-radius: 50%; background: radial-gradient(circle, rgba(110, 211, 255, .30), rgba(167, 129, 255, .12) 55%, transparent 70%); filter: blur(6px); }
.art-ring { position: absolute; width: 470px; height: 470px; border-radius: 50%; border: 2px solid transparent; background: conic-gradient(from 210deg, rgba(110, 211, 255, .0), rgba(110, 211, 255, .9), rgba(167, 129, 255, .8), rgba(110, 211, 255, 0)) border-box; -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .85; }
.art-emblem { position: relative; width: 340px; height: 340px; border-radius: 50%; box-shadow: 0 0 60px rgba(110, 211, 255, .45), 0 0 0 6px rgba(110, 211, 255, .25); }
.art-tile { position: absolute; padding: .7rem 1.1rem; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: linear-gradient(160deg, rgba(110, 211, 255, .22), rgba(167, 129, 255, .22)); border: 1px solid rgba(110, 211, 255, .55); border-radius: 12px; backdrop-filter: blur(4px); box-shadow: 0 10px 26px rgba(2, 6, 18, .45); }
.art-tile b { display: block; font-size: 1.3rem; margin-bottom: .15rem; color: var(--h-sky); }
.art-t1 { top: 12%; left: 6%; transform: rotate(-6deg); }
.art-t2 { top: 9%; right: 4%; transform: rotate(5deg); }
.art-t3 { bottom: 20%; left: 2%; transform: rotate(4deg); }
.art-t4 { bottom: 16%; right: 1%; transform: rotate(-5deg); }
@media (max-width: 980px) {
  .login-shell { grid-template-columns: 1fr; padding: 0 1.2rem 2rem; }
  .login-art { display: none; }
  .login-brand h1 { font-size: 2.3rem; }
  .login-logo { width: 84px; height: 84px; }
}

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

.sidebar {
  background: var(--ink);
  color: #E8F1FA;
  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: 38px; height: 38px; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 2px rgba(114, 214, 250, .45); }
.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: #B7C6DA;
  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: #8B5CF6; 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(--fg); 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(--fg); }
.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(--fg);
  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(--fg); 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(--fg); }
.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(--fg); 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(--fg);
  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(--fg);
  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; }

/* WhatsApp: bandeja de conversaciones de la línea Paraguay */
.wa-layout { display: grid; grid-template-columns: minmax(260px, 360px) 1fr; gap: 1rem; align-items: start; }
@media (max-width: 860px) { .wa-layout { grid-template-columns: 1fr; } }
.wa-list { display: flex; flex-direction: column; gap: .5rem; max-height: 70vh; overflow-y: auto; }
.wa-list .list-item.selected { border-color: var(--red); background: var(--red-soft); }
.wa-thread { background: var(--paper); border: 1px solid var(--ice); border-radius: 12px; padding: 1rem; min-height: 320px; }
.wa-thread-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; border-bottom: 1px solid var(--ice); padding-bottom: .75rem; margin-bottom: .75rem; flex-wrap: wrap; }
.wa-messages { display: flex; flex-direction: column; gap: .5rem; max-height: 60vh; overflow-y: auto; padding-right: .25rem; }
.wa-bubble { max-width: 78%; padding: .55rem .75rem; border-radius: 12px; font-size: .88rem; line-height: 1.35; white-space: pre-wrap; word-break: break-word; }
.wa-bubble.in { align-self: flex-start; background: var(--ivory); border: 1px solid var(--ice); }
.wa-bubble.out { align-self: flex-end; background: #E7F6EC; border: 1px solid #CFE9D8; }
.wa-meta { display: block; margin-top: .25rem; font-size: .7rem; color: var(--steel); }
.field-inline input { padding: .45rem .6rem; border: 1px solid var(--ice); border-radius: 8px; min-width: 220px; font: inherit; }

/* ---------- Portal de tableros (acceso único) ---------- */
.portal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; margin-top: .4rem; }
.portal-tile { display: flex; flex-direction: column; gap: .25rem; padding: .85rem .95rem; border: 1px solid rgba(110, 211, 255, .4); border-radius: 12px; text-decoration: none; color: #E9F2FF; background: linear-gradient(160deg, rgba(110, 211, 255, .12), rgba(167, 129, 255, .12)); transition: transform .12s ease, box-shadow .12s ease; }
.portal-tile b { font-family: var(--display); font-size: 1rem; color: #fff; }
.portal-tile span { font-size: .76rem; color: rgba(233, 242, 255, .75); }
a.portal-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(110, 211, 255, .2); }
.portal-tile.off { opacity: .5; }
.portal-exit { background: none; border: 0; color: #6ED3FF; cursor: pointer; font: inherit; padding: 0; text-decoration: underline; }
@media (max-width: 520px) { .portal-grid { grid-template-columns: 1fr; } }

/* ---------- Kit HYDRA v2 (logo bloqueado, perfil con avatar, tarjetas claras) ----------
   Fuente de verdad: HYDRA_Implementation_Kit_v2. El módulo (acento + hidra) se elige con data-module en <body>.
   Borrar este bloque devuelve el diseño anterior. */
:root {
  --hydra-navy: #0B1226; --hydra-page: #F7F9FE; --hydra-surface: #FFFFFF; --hydra-surface-soft: #FBFCFF;
  --hydra-line: #DCE4F4; --hydra-line-strong: #C9D5EF; --hydra-text: #14213D; --hydra-muted: #66738F;
  --hydra-danger: #E84B67; --hydra-warning: #F1A11B; --hydra-success: #24B977; --hydra-info: #2A9DF4;
  --accent-soft: rgba(38, 199, 242, .12); --accent2-soft: rgba(122, 83, 243, .10);
  --sidebar-w: 252px; --content-max: 1660px; --gutter: 28px;
  --shadow-soft: 0 14px 38px rgba(55, 72, 128, .09); --shadow-card: 0 8px 22px rgba(58, 75, 132, .07); --shadow-control: 0 5px 14px rgba(58, 75, 132, .06);
  --font-ui: Inter, 'Segoe UI', Arial, sans-serif; --font-display: Sora, Inter, 'Segoe UI', Arial, sans-serif; --display: var(--font-display);
  --fg: #14213D; --paper: #FFFFFF; --ivory: #F7F9FE; --ice: #DCE4F4; --graphite: #455577; --steel: #66738F;
  --red: var(--accent2); --red-dark: #5A33D6; --red-soft: #EEE9FF; --info: #2A9DF4; --good: #24B977; --warn: #F1A11B; --bad: #E84B67;
  --good-soft: #DCF7E8; --info-soft: #DFF3FF; --warn-soft: #FFF0CF; --bad-soft: #FFE0E6;
  --shadow: var(--shadow-soft); --shadow-lg: 0 24px 60px rgba(36, 58, 120, .22); --radius: 16px; --radius-sm: 11px;
}
[data-module="comercial"] { --accent: #26C7F2; --accent2: #7A53F3; --hydra-image: url('/arte/hydra-header-comercial.webp'); }
[data-module="preproduccion"] { --accent: #8B5CF6; --accent2: #D946EF; --hydra-image: url('/arte/hydra-header-preproduccion.webp'); }
[data-module="produccion"] { --accent: #19D1C0; --accent2: #25A8FF; --hydra-image: url('/arte/hydra-header-produccion.webp'); }
[data-module="postproduccion"] { --accent: #F3A51D; --accent2: #F77B42; --hydra-image: url('/arte/hydra-header-postproduccion.webp'); }
[data-module="diseno"] { --accent: #E548B8; --accent2: #9B5DE5; --hydra-image: url('/arte/hydra-header-diseno.webp'); }
[data-module="administracion"] { --accent: #22BFA3; --accent2: #25B96E; --hydra-image: url('/arte/hydra-header-administracion.webp'); }
body { font-family: var(--font-ui); font-size: 15px; color: var(--hydra-text); background: var(--hydra-page); }
h1, h2, h3, h4 { font-family: var(--font-display); }

/* Barra lateral */
.shell { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; overflow: hidden; padding: 18px 14px 16px; gap: 0; color: #fff; display: flex; flex-direction: column;
  background: linear-gradient(180deg, #08152f 0%, #0c1b3d 58%, #17316f 100%); border-right: 1px solid rgba(255, 255, 255, .08); }
.sidebar::after { content: ''; position: absolute; inset: 0; background: url('/arte/sidebar-glow.svg') calc(100% + 48px) top / auto 100% no-repeat; opacity: .72; pointer-events: none; }
.sidebar > * { position: relative; z-index: 2; }
.sidebar-brand { display: block; padding: 2px 6px 18px; }
.sidebar-brand .brand-lockup { width: 176px; max-width: 100%; height: auto; display: block; border-radius: 0; box-shadow: none; object-fit: contain; }
.brand-module { display: block; font-size: 13px; color: #c0cbe3; margin: 4px 0 0 54px; }
.sidebar-nav { gap: 4px; }
.nav-item { gap: 12px; padding: 10px 12px; border-radius: 10px; font-size: 14px; font-weight: 650; color: #eef3ff; border: 0; }
.nav-item:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.nav-item.active { color: #fff; background: linear-gradient(90deg, #2dc8f8, #7651f5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .42), 0 0 22px rgba(61, 181, 255, .24); }
.nav-icon { font-size: 0; width: 18px; height: 18px; display: inline-block; flex: none; background: currentColor; opacity: .92; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.nav-item[data-view="hoy"] .nav-icon { --ic: url('/arte/icons/home.svg'); }
.nav-item[data-view="prospectos"] .nav-icon { --ic: url('/arte/icons/prospects.svg'); }
.nav-item[data-view="ejecutivos"] .nav-icon { --ic: url('/arte/icons/accounts.svg'); }
.nav-item[data-view="postventa"] .nav-icon { --ic: url('/arte/icons/heart.svg'); }
.nav-item[data-view="whatsapp"] .nav-icon { --ic: url('/arte/icons/whatsapp.svg'); }
.nav-item[data-view="operacion"] .nav-icon { --ic: url('/arte/icons/play.svg'); }
.nav-item[data-view="agentes"] .nav-icon { --ic: url('/arte/icons/agents.svg'); }
.nav-item[data-view="estadisticas"] .nav-icon { --ic: url('/arte/icons/chart.svg'); }
.nav-item[data-view="reportes"] .nav-icon { --ic: url('/arte/icons/reports.svg'); }
.nav-item[data-view="sistema"] .nav-icon { --ic: url('/arte/icons/settings.svg'); }
.sidebar-user { margin-top: auto; padding: 16px 8px 0; border-top: 1px solid rgba(255, 255, 255, .13); text-align: center; position: relative; }
.profile-avatar { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto 8px; background: #0B1226; box-shadow: 0 0 0 2px rgba(91, 221, 255, .9), 0 0 30px rgba(61, 178, 255, .28); }
.profile-name { font-family: var(--font-display); font-size: 18px; font-weight: 750; }
.profile-role { font-size: 12px; color: #bdc8e4; margin: 2px 0 12px; }
.profile-actions { display: grid; gap: 8px; }
.profile-btn { min-height: 36px; width: 100%; border: 1px solid rgba(107, 196, 255, .65); border-radius: 10px; background: rgba(8, 27, 62, .68); color: #fff; font: 700 13px var(--font-ui); display: flex; align-items: center; justify-content: center; gap: 9px; cursor: pointer; padding: 0 10px; }
.profile-btn:hover { background: rgba(20, 50, 110, .8); }
.profile-btn:focus-visible { outline: 2px solid #6ED3FF; outline-offset: 2px; }
.profile-btn::before { content: ''; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
#admin-btn { --ic: url('/arte/icons/settings.svg'); } #logout-btn { --ic: url('/arte/icons/logout.svg'); }
.profile-btn.logout { background: linear-gradient(90deg, rgba(31, 108, 255, .72), rgba(122, 67, 244, .78)); border-color: #8fa7ff; }
.admin-menu { position: absolute; left: 8px; right: 8px; bottom: 96px; z-index: 6; background: #0e2150; border: 1px solid rgba(107, 196, 255, .6); border-radius: 12px; padding: 6px; box-shadow: 0 18px 40px rgba(0, 0, 20, .5); text-align: left; }
.admin-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: none; color: #eef3ff; font: 600 13px var(--font-ui); cursor: pointer; text-align: left; }
.admin-menu button:hover { background: rgba(255, 255, 255, .1); }
.admin-menu button::before { content: ''; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.admin-menu [data-act="password"] { --ic: url('/arte/icons/key.svg'); } .admin-menu [data-act="users"] { --ic: url('/arte/icons/user.svg'); }
.u-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: 8px; box-shadow: 0 0 0 1px rgba(91, 221, 255, .7); background: #0B1226; }

/* Área de trabajo clara */
.main { position: relative; padding: 0 var(--gutter) 46px; overflow: hidden; background: linear-gradient(180deg, #fff 0%, #f8faff 55%, #f5f8ff 100%); }
.main > .view, .main > header.topbar { max-width: var(--content-max); width: 100%; margin-left: auto; margin-right: auto; }

/* Encabezado con la hidra real (la superposición blanca difumina el recuadro de la imagen, como en el kit) */
.topbar { position: relative; isolation: isolate; min-height: 222px; padding: 22px 0 20px; margin: 0; border: 0; align-items: flex-start; overflow: hidden; }
.topbar::before { content: ''; position: absolute; z-index: -2; inset: 0 -4vw auto 22%; height: 220px; background-image: var(--hydra-image); background-size: 760px auto; background-repeat: no-repeat; background-position: center top; opacity: .92; mix-blend-mode: multiply; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 390px 250px at 50% 0, #000 52%, transparent 98%); mask-image: radial-gradient(ellipse 390px 250px at 50% 0, #000 52%, transparent 98%); }
.topbar::after { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .96) 18%, rgba(255, 255, 255, .42) 55%, rgba(255, 255, 255, .08) 72%, #fff 100%); }
.crumbs { position: absolute; left: 0; top: 22px; margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; color: #1b2a4d; z-index: 2; }
.crumbs::after { content: ''; display: inline-block; width: 46px; height: 2px; margin-left: .9rem; vertical-align: middle; background: var(--accent); }
.topbar-title { padding-top: 30px; max-width: 670px; position: relative; z-index: 2; }
.eyebrow { font-size: 11px; font-weight: 850; letter-spacing: .15em; color: var(--accent2); margin: 8px 0 10px; text-transform: uppercase; }
.topbar h1 { font-size: 42px; line-height: 1.02; letter-spacing: -.035em; margin: 0 0 8px; font-weight: 800; color: var(--hydra-text); }
.topbar-sub { margin: 0; color: #304260; font-size: 15px; line-height: 1.45; }
.topbar-tools { position: relative; z-index: 2; padding-top: 96px; gap: 10px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.field-inline > span { font-size: 13px; font-weight: 760; color: #3f4f74; }
.area-badge { position: absolute; right: var(--gutter); top: 22px; display: flex; align-items: center; gap: 14px; z-index: 4; }
.area-badge .tile { width: 62px; height: 62px; border-radius: 16px; display: grid; place-items: center; background: rgba(255, 255, 255, .88); border: 1px solid color-mix(in srgb, var(--accent) 45%, #fff); box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 30%, transparent), inset 0 0 18px color-mix(in srgb, var(--accent) 20%, transparent); }
.area-badge .tile i { width: 32px; height: 32px; background: linear-gradient(180deg, var(--accent), var(--accent2)); -webkit-mask: url('/arte/icons/chart.svg') center / contain no-repeat; mask: url('/arte/icons/chart.svg') center / contain no-repeat; }
.area-badge b { display: block; font-family: var(--font-display); font-size: 24px; letter-spacing: .1em; font-weight: 800; line-height: 1.05; }
.area-badge span { display: block; font-size: 22px; }
.area-badge em { display: block; margin-top: 8px; padding: 6px 22px; border-radius: 999px; font-style: normal; font-weight: 800; font-size: 14px; color: #fff; text-align: center; background: linear-gradient(90deg, var(--accent), var(--accent2)); box-shadow: 0 8px 22px color-mix(in srgb, var(--accent2) 25%, transparent); }

/* Controles */
.btn { min-height: 40px; font-weight: 720; border-radius: 11px; }
.btn-secondary { border: 1px solid var(--hydra-line-strong); background: rgba(255, 255, 255, .88); color: #223354; padding: 9px 14px; box-shadow: var(--shadow-control); display: inline-flex; align-items: center; gap: .5rem; }
.btn-secondary:hover { background: #fff; border-color: color-mix(in srgb, var(--accent) 65%, #bcc9e4); box-shadow: 0 0 0 3px var(--accent-soft); }
.btn-primary { border: 1px solid color-mix(in srgb, var(--accent2) 32%, #cbd5ea); color: #4324a4; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, #fff), color-mix(in srgb, var(--accent2) 11%, #fff)); box-shadow: var(--shadow-control); }
.btn-small { min-height: 34px; padding: 6px 12px; }
#download-btn::before, #refresh-btn::before { content: ''; width: 19px; height: 19px; background: var(--accent2); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
#download-btn { --ic: url('/arte/icons/download.svg'); } #refresh-btn { --ic: url('/arte/icons/refresh.svg'); }
input, select, textarea { background: rgba(255, 255, 255, .9); border: 1px solid var(--hydra-line-strong); border-radius: 11px; padding: 9px 13px; color: #243457; font: inherit; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }

/* Tarjetas claras (Reportes y el resto): borde fino azul-violeta, sombra suave, decoración de baja opacidad */
.panel, .card, .search-panel { position: relative; overflow: hidden; background: linear-gradient(180deg, #fff 0%, #fbfcff 100%); border: 1px solid color-mix(in srgb, var(--accent2) 28%, #dce4f4); border-radius: 18px; box-shadow: var(--shadow-soft); color: var(--hydra-text); backdrop-filter: none; }
.panel { padding: 22px; }
.panel::after { content: ''; position: absolute; right: -50px; top: -40px; width: 330px; height: 170px; pointer-events: none; background: radial-gradient(circle at 55% 50%, rgba(167, 129, 255, .14), transparent 58%), linear-gradient(140deg, transparent 45%, rgba(110, 211, 255, .10), rgba(167, 129, 255, .10), transparent 79%); }
.panel > * { position: relative; z-index: 1; }
.search-panel { padding: 18px 22px; }
.search-panel::after { content: ''; position: absolute; right: -60px; top: 10px; width: 360px; height: 240px; background: var(--hydra-image) center / cover no-repeat; opacity: .075; mix-blend-mode: multiply; border-radius: 50%; pointer-events: none; }
.search-panel > * { position: relative; z-index: 2; }
.panel-head { display: flex; align-items: center; justify-content: flex-start; gap: 13px; margin-bottom: 14px; text-align: left; }
.panel-head > div { text-align: left; }
.panel-head::before { content: none; width: 42px; height: 42px; flex: none; border-radius: 11px; background: linear-gradient(135deg, #1fcaf4, #704cf0); box-shadow: 0 8px 18px rgba(88, 87, 225, .22); }
#view-reportes .panel-head::before { content: ''; background: linear-gradient(135deg, #1fcaf4, #704cf0); -webkit-mask: none; mask: none; }
#view-reportes .panel-head { position: relative; }
#view-reportes .panel-head::after { content: ''; position: absolute; left: 10px; top: 10px; width: 22px; height: 22px; background: #fff; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
#view-reportes .panel:has(#report-funnel) .panel-head { --ic: url('/arte/icons/chart.svg'); }
#view-reportes .panel:has(#report-aging) .panel-head { --ic: url('/arte/icons/clock.svg'); }
#view-reportes .panel:has(#report-sources) .panel-head { --ic: url('/arte/icons/accounts.svg'); }
#view-reportes .panel:has(#report-owners) .panel-head { --ic: url('/arte/icons/user.svg'); }
#view-reportes .panel:has(#report-markets) .panel-head { --ic: url('/arte/icons/search.svg'); }
#view-reportes .panel:has(#report-losses) .panel-head { --ic: url('/arte/icons/reports.svg'); }
#view-reportes .panel:has(#report-quality) .panel-head { --ic: url('/arte/icons/settings.svg'); }
#view-reportes .panel:has(#report-activity) .panel-head { --ic: url('/arte/icons/refresh.svg'); }
.panel-head h2, .card-title { font-size: 20px; font-weight: 780; margin: 0; }
.panel-head .eyebrow { margin: 0 0 3px; letter-spacing: .14em; }
#view-reportes .muted.small { font-size: 12px; color: #52617e; line-height: 1.45; margin: 0 0 13px; }
#view-reportes .toolbar { position: relative; overflow: hidden; min-height: 70px; border: 1px solid color-mix(in srgb, var(--accent2) 28%, #dce4f4); border-radius: 18px; background: linear-gradient(90deg, #fff 0%, #fafcff 48%, #f7f5ff 100%); box-shadow: var(--shadow-card); padding: 14px 20px; display: flex; align-items: center; gap: 14px; }
#view-reportes .toolbar::after { content: ''; position: absolute; right: -10px; top: 0; width: 360px; height: 100%; pointer-events: none; background: radial-gradient(ellipse at 70% 20%, rgba(125, 82, 243, .14), transparent 55%), linear-gradient(130deg, transparent 40%, rgba(110, 211, 255, .09), rgba(167, 129, 255, .12), transparent 78%); }
#view-reportes .toolbar > * { position: relative; z-index: 1; }
#view-reportes .toolbar .field-inline > span { font-weight: 760; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--hydra-text); }
#view-reportes .toolbar .field-inline > span::before { content: ''; width: 18px; height: 18px; background: var(--accent2); -webkit-mask: url('/arte/icons/clock.svg') center / contain no-repeat; mask: url('/arte/icons/clock.svg') center / contain no-repeat; }
#view-reportes .grid-2 { grid-template-columns: minmax(0, 1.45fr) minmax(360px, 1fr); gap: 18px; }
.bar-row { grid-template-columns: 150px minmax(120px, 1fr) 44px; gap: 12px; font-size: 13px; }
.bar-row .bar-label { font-weight: 680; color: var(--hydra-text); }
.bar-track { height: 14px; border-radius: 999px; background: #e8edf8; }
.bar-fill { border-radius: inherit; background: linear-gradient(90deg, #6b5bf7, #9e59f0); }
.chart-block .bar-row:first-child .bar-fill { background: linear-gradient(90deg, #25c8ef, #347ef4); }
.bar-fill.is-bad { background: linear-gradient(90deg, #ff7a93, #e84b67); }
.bar-fill.info { background: linear-gradient(90deg, #25c8ef, #347ef4); } .bar-fill.good { background: linear-gradient(90deg, #3ed598, #24b977); } .bar-fill.warn { background: linear-gradient(90deg, #ffc15a, #f1a11b); } .bar-fill.neutral { background: linear-gradient(90deg, #8e9bb8, #66738f); }
.bar-value { color: #455577; }

/* Hoy y listas */
.drawer-section > h3 { font-size: 13px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; color: var(--accent2); margin: 0 0 12px; display: flex; align-items: center; gap: 14px; }
.drawer-section > h3::after { content: ''; width: 46px; height: 2px; background: var(--accent); }
.drawer-section { margin-top: 18px; }
.filter-bar { background: transparent; border: 0; border-bottom: 1px solid #e7ecf7; border-radius: 0; padding: 14px 0; margin: 0; }
.temp-tier-row { display: flex; gap: 8px; flex-wrap: wrap; padding: 6px 0; }
.temp-tier-btn { border: 1px solid #cdd7ed; background: #fbfcff; color: #233153; padding: 8px 14px; border-radius: 10px; font-size: 13px; font-weight: 700; box-shadow: none; min-height: 0; }
.temp-tier-btn.active { border-color: var(--accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent) inset; color: #3a22a6; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 9%, #fff), color-mix(in srgb, var(--accent2) 10%, #fff)); }
.agenda-strip-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 10px; }
.agenda-strip-row .chip { height: 26px; border-radius: 999px; padding: 5px 12px; font-size: 11px; font-weight: 730; display: flex; align-items: center; background: #e9eef9; color: #263555; }
.agenda-strip-row .chip.bad { background: #fde0e5; color: #b6203d; } .agenda-strip-row .chip.info { background: #dff3ff; color: #1167b2; } .agenda-strip-row .chip.warn { background: #fff0cf; color: #9f5b00; }
.agenda-strip-row .chip.bad::before, .agenda-strip-row .chip.info::before, .agenda-strip-row .chip.warn::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 8px; flex: none; }
.list-item { background: rgba(255, 255, 255, .86); border: 1px solid #dce4f4; border-left: 3px solid var(--accent); border-radius: 13px; padding: 12px 14px; box-shadow: 0 4px 14px rgba(68, 89, 140, .06); }
.list-item:nth-child(even) { border-left-color: var(--accent2); }
.list-item.static { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.list-item + .list-item { margin-top: 10px; }
.li-title { font-size: 15px; font-weight: 820; color: var(--hydra-text); }
.li-sub { font-size: 12.5px; color: #334566; line-height: 1.45; margin-top: 5px; display: block; }
.li-side { display: flex; gap: 8px; align-items: center; }
.chip { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 999px; font-size: 11px; font-weight: 720; background: #eaf2ff; color: #355686; }
.chip.plain { background: #eaf2ff; color: #355686; } .chip.bad { background: #ffe0e6; color: #b92848; } .chip.warn { background: #fff0cf; color: #9f5b00; } .chip.good { background: #dcf7e8; color: #176b43; } .chip.info { background: #dff3ff; color: #1167b2; }
.chip-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border: 1px solid #cdbbff; border-radius: 11px; background: #fff; color: #4520b2; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: var(--shadow-control); }
.chip-btn:hover { background: #f5f0ff; border-color: var(--accent2); }
.chip-btn::before { content: ''; width: 17px; height: 17px; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
[data-today-done] { --ic: url('/arte/icons/check.svg'); } [data-today-postpone] { --ic: url('/arte/icons/clock.svg'); } [data-today-open] { --ic: url('/arte/icons/file.svg'); }
.data-table th { background: #f1f4ff; color: var(--steel); } .data-table tbody tr:hover { background: #f7f9ff; }
.opportunity-card, .alert-card, .mini-stat, .proposal-box, .persona-card, .stat, .kpi { background: rgba(255, 255, 255, .86); border: 1px solid #dce4f4; border-radius: 14px; box-shadow: 0 4px 14px rgba(68, 89, 140, .06); color: var(--hydra-text); }
.modal, .dialog { background: #fff; color: var(--hydra-text); } .toast { background: #151F4A; color: #fff; }
.login .login-card input[type=email], .login .login-card input[type=password] { background: rgba(8, 14, 30, .75); color: #fff; border-color: rgba(110, 211, 255, .35); }

@media (max-height: 820px) { .profile-avatar { width: 84px; height: 84px; } .profile-role { margin-bottom: 8px; } .sidebar-brand .brand-lockup { width: 150px; } }
@media (max-width: 1180px) { :root { --sidebar-w: 224px; } #view-reportes .grid-2 { grid-template-columns: 1fr; } .profile-avatar { width: 96px; height: 96px; } .bar-row { grid-template-columns: 130px 1fr 42px; } .topbar::before { left: 12%; opacity: .62; } .topbar-tools { padding-top: 110px; } .agenda-strip-row { grid-template-columns: repeat(3, 1fr); } .list-item.static { grid-template-columns: 1fr; } }
@media (max-width: 820px) { .shell { display: block; } .sidebar { position: relative; height: auto; } .sidebar-brand .brand-lockup { width: 160px; } .sidebar-nav { display: grid; grid-template-columns: 1fr 1fr; } .sidebar-user { margin-top: 14px; } .profile-avatar { width: 86px; height: 86px; } .profile-actions { grid-template-columns: 1fr 1fr; } .main { padding: 0 16px 34px; } .topbar { min-height: 300px; } .topbar-tools { padding-top: 130px; justify-content: flex-start; } .topbar::before { left: 0; right: -35%; top: 64px; background-size: 560px auto; opacity: .42; } .area-badge { position: static; margin: 12px 0; } .bar-row { grid-template-columns: 110px 1fr 38px; } .agenda-strip-row { grid-template-columns: 1fr 1fr; } }