/* Portal del Director de Ventas — Vivanto Smart para INFORTEC.
   Estructura visual tomada de Odoo (barra de módulos arriba, barra de filtros
   debajo, tarjetas KPI y tablas densas), con la paleta de datos validada del
   sistema de visualización: los colores de serie y de estado NO son elección
   estética, pasaron el validador de daltonismo y contraste. */

:root {
  color-scheme: light;
  /* superficies e ink */
  --superficie: #fcfcfb;
  --plano: #f4f4f1;
  --tinta: #0b0b0b;
  --tinta-2: #52514e;
  --tinta-mute: #898781;
  --grilla: #e1e0d9;
  --eje: #c3c2b7;
  --borde: rgba(11, 11, 11, .10);
  --sombra: 0 1px 2px rgba(11,11,11,.06), 0 1px 8px rgba(11,11,11,.04);
  /* marca (del logo de Vivanto Smart) */
  --marca: #2b3a40;
  --marca-claro: #3d5159;
  --marca-tinta: #ffffff;
  /* series categóricas (slots 1 y 2 de la paleta validada) */
  --s1: #2a78d6;
  --s2: #eb6834;
  /* rampa ordinal azul: nada más claro que el paso 250 sobre fondo claro */
  --o1: #86b6ef; --o2: #5598e7; --o3: #2a78d6; --o4: #1c5cab; --o5: #104281;
  /* estados: paleta fija, nunca tematizada. Siempre con ícono + etiqueta. */
  --verde: #0ca30c;
  --ambar: #fab219;
  --rojo: #d03b3b;
  --verde-suave: #e8f6e8;
  --ambar-suave: #fdf3dd;
  --rojo-suave: #fbe9e9;
  --radio: 6px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --superficie: #1a1a19;
    --plano: #0d0d0d;
    --tinta: #ffffff;
    --tinta-2: #c3c2b7;
    --tinta-mute: #898781;
    --grilla: #2c2c2a;
    --eje: #383835;
    --borde: rgba(255,255,255,.10);
    --sombra: none;
    --s1: #3987e5;
    --s2: #d95926;
    --o1: #184f95; --o2: #256abf; --o3: #2a78d6; --o4: #5598e7; --o5: #9ec5f4;
    --verde-suave: #122a12;
    --ambar-suave: #2e2510;
    --rojo-suave: #2e1414;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--plano);
  color: var(--tinta);
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
button { font: inherit; cursor: pointer; }

/* ---------------------------------------------------------------- login -- */
.login {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background: linear-gradient(160deg, var(--marca) 0%, #17232a 100%);
}
.login-caja {
  width: 100%; max-width: 380px; background: var(--superficie);
  border-radius: 10px; padding: 32px 28px; box-shadow: 0 12px 40px rgba(0,0,0,.28);
}
.login-logo { display: block; width: 220px; max-width: 100%; margin: 0 auto 20px; }
.login h1 { font-size: 17px; margin: 0 0 4px; text-align: center; letter-spacing: -.01em; }
.login p.sub { margin: 0 0 22px; text-align: center; color: var(--tinta-2); font-size: 13px; }
.campo { margin-bottom: 14px; }
.campo label { display: block; font-size: 12px; color: var(--tinta-2); margin-bottom: 5px; font-weight: 600; }
.campo input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--plano); color: var(--tinta); font: inherit;
}
.campo input:focus { outline: 2px solid var(--s1); outline-offset: -1px; }
.boton-primario {
  width: 100%; padding: 11px; border: 0; border-radius: var(--radio);
  background: var(--marca); color: var(--marca-tinta); font-weight: 600;
}
.boton-primario:disabled { opacity: .6; cursor: progress; }
.aviso-error {
  background: var(--rojo-suave); color: var(--rojo); border-radius: var(--radio);
  padding: 9px 12px; font-size: 13px; margin-bottom: 14px; font-weight: 500;
}
.login .pie { margin-top: 18px; text-align: center; font-size: 11.5px; color: var(--tinta-mute); line-height: 1.5; }

/* ------------------------------------------------------------ barra sup -- */
.barra-superior {
  position: sticky; top: 0; z-index: 30; background: var(--marca); color: var(--marca-tinta);
  display: flex; align-items: center; gap: 16px; padding: 0 14px; height: 50px;
}
.marca { display: flex; align-items: center; gap: 9px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.marca img { height: 26px; width: auto; filter: brightness(0) invert(1); }
.marca span.app { font-weight: 500; opacity: .85; font-size: 13px; }
.modulos { display: none; gap: 2px; margin-left: 8px; }
.modulos button {
  background: transparent; border: 0; color: rgba(255,255,255,.78);
  padding: 6px 12px; border-radius: 5px; font-size: 13.5px;
}
.modulos button:hover { background: rgba(255,255,255,.10); color: #fff; }
.modulos button[aria-current="page"] { background: rgba(255,255,255,.16); color: #fff; font-weight: 600; }
.usuario { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.usuario .quien { text-align: right; line-height: 1.25; display: none; }
.usuario .quien b { display: block; font-size: 13px; font-weight: 600; }
.usuario .quien small { font-size: 11px; opacity: .75; }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--marca-claro);
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
}
.salir { background: transparent; border: 1px solid rgba(255,255,255,.25); color: #fff;
  border-radius: 5px; padding: 5px 9px; font-size: 12px; }

/* --------------------------------------------------------- barra filtros -- */
.barra-filtros {
  position: sticky; top: 50px; z-index: 20; background: var(--superficie);
  border-bottom: 1px solid var(--borde); padding: 9px 14px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.barra-filtros select, .barra-filtros button.chip {
  border: 1px solid var(--borde); background: var(--plano); color: var(--tinta);
  border-radius: 5px; padding: 6px 10px; font-size: 13px;
}
.alcance {
  margin-left: auto; font-size: 12px; color: var(--tinta-2);
  display: flex; align-items: center; gap: 6px;
}
.punto { width: 7px; height: 7px; border-radius: 50%; background: var(--verde); flex: none; }

main { padding: 14px; max-width: 1500px; margin: 0 auto; padding-bottom: 76px; }

/* --------------------------------------------------------------- tarjetas -- */
.tarjeta {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: var(--sombra);
}
.tarjeta > header {
  padding: 11px 14px 0; display: flex; align-items: baseline; gap: 8px;
}
.tarjeta > header h2 { font-size: 13.5px; margin: 0; font-weight: 600; letter-spacing: -.005em; }
.tarjeta > header .nota { font-size: 11.5px; color: var(--tinta-mute); margin-left: auto; }
.tarjeta .cuerpo { padding: 12px 14px 14px; }

.grilla-kpi {
  display: grid; gap: 10px; margin-bottom: 14px;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
}
.kpi { padding: 12px 13px; }
.kpi .etiqueta { font-size: 11.5px; color: var(--tinta-2); font-weight: 600; text-transform: none; }
.kpi .valor { font-size: 27px; font-weight: 650; letter-spacing: -.02em; margin: 3px 0 2px; }
.kpi .detalle { font-size: 11.5px; color: var(--tinta-mute); }
.kpi.destacada { border-left: 3px solid var(--eje); }
.kpi.clicable { cursor: pointer; transition: box-shadow .12s, transform .12s; position: relative; }
.kpi.clicable:hover { box-shadow: 0 2px 6px rgba(11,11,11,.10), 0 6px 20px rgba(11,11,11,.07); transform: translateY(-1px); }
.kpi.clicable:focus-visible { outline: 2px solid var(--s1); outline-offset: 2px; }
.kpi .ver-lista { font-size: 11px; color: var(--s1); font-weight: 600; margin-top: 6px; opacity: 0; transition: opacity .12s; }
.kpi.clicable:hover .ver-lista, .kpi.clicable:focus-visible .ver-lista { opacity: 1; }
/* En pantallas táctiles no hay hover: la pista de que se puede tocar tiene que
   estar siempre visible, no aparecer al pasar un mouse que no existe. */
@media (hover: none) { .kpi .ver-lista { opacity: 1; } }
.kpi.verde  { border-left-color: var(--verde); }
.kpi.ambar  { border-left-color: var(--ambar); }
.kpi.rojo   { border-left-color: var(--rojo); }

/* Estado: SIEMPRE ícono + palabra. El color solo acompaña; nunca es el único
   portador del significado (regla de accesibilidad de la paleta de estados). */
.estado { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600;
  padding: 2px 7px; border-radius: 99px; white-space: nowrap; }
.estado.verde { background: var(--verde-suave); color: var(--verde); }
.estado.ambar { background: var(--ambar-suave); color: #8a6100; }
.estado.rojo  { background: var(--rojo-suave); color: var(--rojo); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .estado.ambar { color: var(--ambar); } }

.grilla-graficos { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 780px) { .grilla-graficos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .grilla-graficos.tres { grid-template-columns: repeat(3, 1fr); } }
.ancho-total { grid-column: 1 / -1; }

/* ---------------------------------------------------------------- gráficos -- */
.grafico svg { display: block; width: 100%; height: auto; overflow: visible; min-height: 150px; }
.leyenda { display: flex; flex-wrap: wrap; gap: 12px; margin: 2px 0 8px; font-size: 12px; color: var(--tinta-2); }
.leyenda i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; margin-right: 5px; }
.ver-datos {
  background: none; border: 0; color: var(--s1); font-size: 11.5px; padding: 4px 0; text-decoration: underline;
}
.tabla-datos { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 6px; }
.tabla-datos th, .tabla-datos td { text-align: right; padding: 3px 6px; border-bottom: 1px solid var(--grilla); font-variant-numeric: tabular-nums; }
.tabla-datos th:first-child, .tabla-datos td:first-child { text-align: left; }
.vacio { color: var(--tinta-mute); font-size: 12.5px; padding: 20px 4px; text-align: center; }

.pista {
  position: fixed; z-index: 60; pointer-events: none; background: var(--marca); color: #fff;
  padding: 7px 9px; border-radius: 5px; font-size: 12px; line-height: 1.4; box-shadow: 0 4px 14px rgba(0,0,0,.25);
  transform: translate(-50%, -115%); white-space: nowrap;
}
.pista b { font-weight: 650; }

/* ----------------------------------------------------------------- tablas -- */
.tabla-envoltorio { overflow-x: auto; }
table.densa { width: 100%; border-collapse: collapse; font-size: 13px; }
table.densa th {
  text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em;
  color: var(--tinta-mute); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--borde);
  position: sticky; top: 0; background: var(--superficie); white-space: nowrap;
}
table.densa td { padding: 9px 10px; border-bottom: 1px solid var(--grilla); vertical-align: middle; }
table.densa tr:hover td { background: color-mix(in srgb, var(--s1) 4%, transparent); }
table.densa .num { text-align: right; font-variant-numeric: tabular-nums; }
.cliente-nombre { font-weight: 600; }
.cliente-meta { font-size: 11.5px; color: var(--tinta-mute); }
.acciones-fila { display: flex; gap: 5px; justify-content: flex-end; }
.boton-mini {
  border: 1px solid var(--borde); background: var(--superficie); color: var(--tinta);
  border-radius: 5px; padding: 4px 8px; font-size: 12px; white-space: nowrap;
}
.boton-mini.primario { background: var(--s1); border-color: var(--s1); color: #fff; }
.boton-mini:hover { filter: brightness(.97); }
.fila-clic { cursor: pointer; }

/* ------------------------------------------------------------------- chat -- */
.chat { display: flex; flex-direction: column; height: min(60vh, 520px); min-height: 340px; }
.chat-mensajes { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.burbuja { max-width: 78%; padding: 9px 12px; border-radius: 12px; font-size: 13.5px; white-space: pre-wrap; }
.burbuja.ia { background: var(--plano); border: 1px solid var(--borde); border-bottom-left-radius: 3px; align-self: flex-start; }
.burbuja.yo { background: var(--s1); color: #fff; border-bottom-right-radius: 3px; align-self: flex-end; }
/* El nombre del cliente dentro de la respuesta: se lee como parte de la frase,
   pero se toca como un botón. */
.enlace-conversacion {
  background: none; border: 0; padding: 0; font: inherit; font-weight: 650;
  color: var(--s1); text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.enlace-conversacion:hover { color: var(--marca); }
.burbuja.ia .enlace-conversacion:focus-visible { outline: 2px solid var(--s1); outline-offset: 2px; border-radius: 3px; }
.chat-forma { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--borde); }
.chat-forma input { flex: 1; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 20px; background: var(--plano); color: var(--tinta); font: inherit; }
.chat-forma button { border: 0; background: var(--marca); color: #fff; border-radius: 20px; padding: 0 18px; font-weight: 600; }
/* Fijas debajo del hilo y encima del campo de escritura: se ven siempre, sin
   robarle altura a la conversación. En celular se deslizan en una sola fila. */
.sugerencias {
  display: flex; gap: 6px; padding: 10px 14px; border-top: 1px solid var(--borde);
  overflow-x: auto; flex-wrap: wrap; scrollbar-width: thin;
}
@media (max-width: 700px) { .sugerencias { flex-wrap: nowrap; } .sugerencias button { flex: none; } }
.sugerencias button { background: var(--plano); border: 1px solid var(--borde); color: var(--tinta-2); border-radius: 99px; padding: 5px 11px; font-size: 12.5px; }

/* ------------------------------------------------------------------ modal -- */
.velo { position: fixed; inset: 0; background: rgba(11,11,11,.45); z-index: 70; display: grid; place-items: center; padding: 16px; }
.modal { background: var(--superficie); border-radius: 10px; width: 100%; max-width: 480px; box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.modal header { padding: 15px 18px 0; }
.modal h3 { margin: 0; font-size: 15px; }
.modal .cuerpo { padding: 12px 18px 18px; }
.borrador {
  background: var(--plano); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 12px; font-size: 13.5px; white-space: pre-wrap; min-height: 90px; line-height: 1.5;
}
.modal .campo label .falta {
  color: var(--rojo); font-weight: 700; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .04em; margin-left: 4px;
}
.modal .campo input { font-size: 14px; }
/* Antes eran atributos style="" dentro de un innerHTML: la CSP del portal
   (style-src 'self') los bloquea. Los estilos viven acá o se aplican por CSSOM. */
.modal .nota-ficha { margin: 4px 0 0; }
.modal .nota-borrador { margin: 9px 0 0; }
.modal .pie-acciones { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; flex-wrap: wrap; }

/* ------------------------------------------------------- nav inferior móvil */
.barra-inferior {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; background: var(--superficie);
  border-top: 1px solid var(--borde); display: flex; padding: 4px 0 max(4px, env(safe-area-inset-bottom));
}
.barra-inferior button {
  flex: 1; background: none; border: 0; color: var(--tinta-mute); font-size: 10.5px;
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 0; font-weight: 600;
}
.barra-inferior button svg { width: 20px; height: 20px; }
.barra-inferior button[aria-current="page"] { color: var(--s1); }

@media (min-width: 860px) {
  .modulos { display: flex; }
  .barra-inferior { display: none; }
  .usuario .quien { display: block; }
  main { padding: 16px 20px; padding-bottom: 24px; }
  .barra-filtros { padding: 9px 20px; }
  .barra-superior { padding: 0 20px; }
}

/* En celular las tablas densas se vuelven fichas: una tabla con scroll
   horizontal en un teléfono se lee mal y se toca peor. */
@media (max-width: 700px) {
  table.densa, table.densa tbody, table.densa tr, table.densa td { display: block; width: 100%; }
  table.densa thead { display: none; }
  table.densa tr { border: 1px solid var(--borde); border-radius: var(--radio); margin-bottom: 8px; padding: 8px 10px; background: var(--superficie); }
  table.densa td { border: 0; padding: 3px 0; text-align: left !important; }
  table.densa td::before { content: attr(data-etiqueta) ": "; color: var(--tinta-mute); font-size: 11.5px; }
  table.densa td.sin-etiqueta::before { content: ""; }
  .acciones-fila { justify-content: flex-start; margin-top: 7px; }
}


/* ------------------------------------------------- modo chat (en Chatwoot) */
/* La pestaña dentro de Chatwoot es angosta y tiene un único trabajo: preguntar
   por el cliente que se está atendiendo. Todo lo demás vive en el panel. */
body.modo-chat main { padding: 10px; padding-bottom: 10px; }
body.modo-chat .barra-superior { height: 44px; padding: 0 10px; }
body.modo-chat .marca span.app { display: none; }
body.modo-chat .usuario .quien { display: none; }
body.modo-chat .chat { height: calc(100vh - 118px); min-height: 260px; }
body.modo-chat .tarjeta > header .nota { display: none; }
.abrir-panel {
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); color: #fff;
  border-radius: 5px; padding: 5px 11px; font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.abrir-panel:hover { background: rgba(255,255,255,.24); }
@media (max-width: 860px) { body.modo-chat #modulos { display: flex !important; } }