/* ===========================================================================
   IA Vendedor · Seguros
   Identidad: oficina de seguros. Sobria, con peso, sin ser gris.
   Azul marino profundo para la estructura, dorado para lo que hay que mirar,
   y el color propio de cada productor como acento.
   =========================================================================== */

:root {
  /* --- la estructura */
  --tinta:        #0d2137;   /* azul marino casi negro: los titulos */
  --tinta-suave:  #4a5f78;   /* texto secundario */
  --suave:        #6b7f96;   /* rotulos y notas */
  --marino:       #123458;
  --marino-hondo: #0a2440;

  /* --- el acento: lo pisa el color de cada productor */
  --acento:       #1a5fa8;
  --acento-hondo: #0f4785;
  --acento-suave: #e7f0fa;
  --acento-borde: #bcd6ee;

  /* --- el dorado: para lo que hay que mirar si o si */
  --oro:          #b07d18;
  --oro-suave:    #fdf5e3;
  --oro-borde:    #ecd9a8;

  /* --- superficies */
  --fondo:        #eef2f7;
  --panel:        #ffffff;
  --panel2:       #f7f9fc;
  --borde:        #dbe3ed;
  --borde-suave:  #e9eef5;

  /* --- estados */
  --ok:      #12724a;  --ok-f:      #e3f4ec;  --ok-b:      #b3ddc8;
  --alerta:  #a1660a;  --alerta-f:  #fdf3e0;  --alerta-b:  #eed7a6;
  --mal:     #b4232c;  --mal-f:     #fdeaeb;  --mal-b:     #f0c2c5;

  --radio:   10px;
  --radio-g: 14px;

  --sombra:   0 1px 2px rgba(13,33,55,.05), 0 2px 8px rgba(13,33,55,.05);
  --sombra-m: 0 2px 6px rgba(13,33,55,.07), 0 8px 24px rgba(13,33,55,.07);
  --sombra-g: 0 10px 40px rgba(13,33,55,.13);

  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 14.5px;
  color: var(--tinta);
  background: var(--fondo);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ======================================================================= barra */
header.barra {
  background: linear-gradient(180deg, var(--marino) 0%, #0d2b49 100%);
  border-bottom: 3px solid var(--oro);
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 30;
  box-shadow: 0 2px 14px rgba(13,33,55,.18);
}

header.barra .identidad {
  display: flex;
  align-items: center;
  margin-right: 20px;
  padding: 9px 0;
  color: #fff;
}
header.barra .identidad:hover { text-decoration: none; opacity: .9; }

header.barra .marca {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: .01em;
  white-space: nowrap;
  color: #fff;
}
header.barra .logo {
  height: 34px;
  max-width: 190px;
  object-fit: contain;
  display: block;
  background: #fff;
  border-radius: 6px;
  padding: 3px 7px;
}

header.barra nav { display: flex; gap: 1px; flex-wrap: wrap; flex: 1; }
header.barra nav a {
  padding: 13px 12px;
  color: rgba(255,255,255,.72);
  border-bottom: 3px solid transparent;
  margin-bottom: -3px;
  font-weight: 500;
  font-size: 13.5px;
  white-space: nowrap;
  transition: color .12s, background .12s;
}
header.barra nav a:hover { color: #fff; background: rgba(255,255,255,.07); text-decoration: none; }
header.barra nav a.activo { color: #fff; border-bottom-color: var(--oro); font-weight: 600; }

header.barra > .chico.suave { color: rgba(255,255,255,.6) !important; }
header.barra button, header.barra .boton {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.22);
  color: #fff;
}
header.barra button:hover, header.barra .boton:hover { background: rgba(255,255,255,.2); }

main { max-width: 1420px; margin: 0 auto; padding: 26px 20px 70px; }

/* ================================================================== titulos */
h1 {
  font-family: var(--serif);
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 0 0 5px;
  color: var(--tinta);
}
h2 {
  font-size: 16px;
  font-weight: 700;
  margin: 28px 0 12px;
  color: var(--tinta);
  letter-spacing: -.005em;
}
h3 { font-size: 14px; font-weight: 700; margin: 0 0 8px; }
.sub { color: var(--tinta-suave); margin: 0 0 20px; font-size: 14px; }

/* ================================================================== paneles */
.panel {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-g);
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: var(--sombra);
}
.panel > h2:first-child { margin-top: 0; }

.rejilla { display: grid; gap: 15px; }
.rejilla.c2 { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.rejilla.c3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.rejilla.c4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* =================================================================== fichas */
.ficha {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-g);
  padding: 15px 17px 16px;
  box-shadow: var(--sombra);
  position: relative;
  overflow: hidden;
}
.ficha::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--acento);
}
.ficha .rotulo {
  color: var(--suave);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.ficha .valor {
  font-size: 29px;
  font-weight: 700;
  margin-top: 5px;
  line-height: 1.1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
}
.ficha .pie { color: var(--suave); font-size: 12px; margin-top: 5px; line-height: 1.4; }
.ficha-ico {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--acento-suave); color: var(--acento-hondo);
}
.ficha.mal .ficha-ico    { background: var(--mal-f); color: var(--mal); }
.ficha.ok .ficha-ico     { background: var(--ok-f); color: var(--ok); }
.ficha.alerta .ficha-ico { background: var(--oro-suave); color: var(--oro); }
.ficha .rotulo { padding-right: 40px; }

.ficha.mal::before { background: var(--mal); }
.ficha.mal .valor { color: var(--mal); }
.ficha.ok::before { background: var(--ok); }
.ficha.ok .valor { color: var(--ok); }
.ficha.alerta::before { background: var(--oro); }
.ficha.alerta .valor { color: var(--oro); }

.ficha.clic { cursor: pointer; transition: box-shadow .14s, transform .14s; display: block; color: inherit; }
.ficha.clic:hover { box-shadow: var(--sombra-m); transform: translateY(-1px); text-decoration: none; }

/* =================================================================== tablas */
.tabla-marco {
  overflow-x: auto;
  border: 1px solid var(--borde);
  border-radius: var(--radio-g);
  background: var(--panel);
  box-shadow: var(--sombra);
}
table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
th {
  text-align: left;
  padding: 11px 13px;
  background: linear-gradient(180deg, #f4f7fb 0%, #eef3f9 100%);
  border-bottom: 2px solid var(--borde);
  color: var(--tinta-suave);
  font-weight: 700;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
}
td { padding: 10px 13px; border-bottom: 1px solid var(--borde-suave); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--panel2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.chico { color: var(--tinta-suave); font-size: 12.5px; }
td strong { font-weight: 600; }

/* Acceso rapido al chat, en la fila de un cliente. */
.wa-directo {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; border-radius: 7px; margin-left: 6px;
  background: #e7f7f1; color: #017561; vertical-align: middle;
  transition: background .12s;
}
.wa-directo:hover { background: #c9efe1; text-decoration: none; }

/* ================================================================ chapitas */
.chapa {
  display: inline-block;
  padding: 2.5px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid transparent;
  letter-spacing: .01em;
}
.chapa.gris     { background: #eef1f6; color: var(--suave); border-color: #dfe5ee; }
.chapa.verde    { background: var(--ok-f); color: var(--ok); border-color: var(--ok-b); }
.chapa.amarilla { background: var(--alerta-f); color: var(--alerta); border-color: var(--alerta-b); }
.chapa.roja     { background: var(--mal-f); color: var(--mal); border-color: var(--mal-b); }
.chapa.azul     { background: var(--acento-suave); color: var(--acento-hondo); border-color: var(--acento-borde); }
.chapa.oro      { background: var(--oro-suave); color: var(--oro); border-color: var(--oro-borde); }

/* ================================================================== botones */
button, .boton {
  font: inherit;
  font-weight: 600;
  font-size: 13.5px;
  padding: 8px 15px;
  border-radius: 8px;
  border: 1px solid var(--borde);
  background: var(--panel);
  color: var(--tinta);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: background .12s, border-color .12s, box-shadow .12s;
  line-height: 1.4;
}
button:hover, .boton:hover { background: var(--panel2); border-color: #c6d2e0; text-decoration: none; }

button.principal, .boton.principal {
  background: linear-gradient(180deg, var(--acento) 0%, var(--acento-hondo) 100%);
  border-color: var(--acento-hondo);
  color: #fff;
  box-shadow: 0 1px 3px rgba(13,33,55,.18);
}
button.principal:hover, .boton.principal:hover { filter: brightness(1.1); border-color: var(--acento-hondo); }

button.oro, .boton.oro {
  background: linear-gradient(180deg, #d19b2c 0%, var(--oro) 100%);
  border-color: var(--oro);
  color: #fff;
}
button.peligro { color: var(--mal); border-color: var(--mal-b); background: var(--panel); }
button.peligro:hover { background: var(--mal-f); }
button.chico { padding: 4px 10px; font-size: 12px; border-radius: 6px; }
button:disabled, .boton:disabled { opacity: .45; cursor: not-allowed; }

/* ============================================================= formularios */
label {
  display: block;
  font-size: 11.5px;
  color: var(--tinta-suave);
  font-weight: 700;
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
input, select, textarea {
  font: inherit;
  font-size: 14px;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid #cfd9e5;
  border-radius: 8px;
  background: var(--panel);
  color: var(--tinta);
  transition: border-color .12s, box-shadow .12s;
}
input::placeholder, textarea::placeholder { color: #9fb0c4; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-suave);
}
input[type=color] { padding: 3px; height: 38px; cursor: pointer; }
input[type=file] { padding: 7px; background: var(--panel2); font-size: 13px; }
textarea { min-height: 78px; resize: vertical; line-height: 1.5; }
.campo { margin-bottom: 14px; }
.fila { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.fila > * { flex: 1; min-width: 140px; }
.fila > .angosto { flex: 0 0 auto; min-width: 0; }

/* ================================================================== avisos */
.vacio { padding: 46px 20px; text-align: center; color: var(--suave); font-size: 13.5px; }
.aviso {
  padding: 12px 15px;
  border-radius: 10px;
  margin-bottom: 15px;
  border: 1px solid;
  border-left-width: 4px;
  font-size: 13.5px;
  line-height: 1.5;
}
.aviso.info   { background: var(--acento-suave); border-color: var(--acento-borde); border-left-color: var(--acento); color: #0d3f70; }
.aviso.mal    { background: var(--mal-f); border-color: var(--mal-b); border-left-color: var(--mal); color: #8c1a22; }
.aviso.ok     { background: var(--ok-f); border-color: var(--ok-b); border-left-color: var(--ok); color: #0b5637; }
.aviso.alerta { background: var(--oro-suave); border-color: var(--oro-borde); border-left-color: var(--oro); color: #7d5810; }
.aviso a { color: inherit; text-decoration: underline; }

/* ================================================================= grafico */
.barras { display: flex; align-items: flex-end; gap: 6px; height: 118px; margin-top: 12px; }
.barras .col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; min-width: 0; }
.barras .b1 { background: linear-gradient(180deg, var(--acento) 0%, var(--acento-hondo) 100%); border-radius: 3px 3px 0 0; }
.barras .b2 { background: linear-gradient(180deg, #d9a942 0%, var(--oro) 100%); border-radius: 3px 3px 0 0; }
.barras .et { font-size: 9.5px; color: var(--suave); text-align: center; overflow: hidden; white-space: nowrap; font-weight: 600; }

/* ================================================================== varios */
.derecha { text-align: right; }
.entre { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.chico { font-size: 12.5px; }
.suave { color: var(--suave); }
.nowrap { white-space: nowrap; }
.mono { font-family: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace; font-size: 12.5px; letter-spacing: -.01em; }

hr { border: 0; border-top: 1px solid var(--borde); margin: 20px 0; }

/* =================================================================== dialogos */
dialog {
  border: 1px solid var(--borde);
  border-radius: 16px;
  padding: 0;
  max-width: 680px;
  width: 94%;
  box-shadow: var(--sombra-g);
  color: var(--tinta);
}
dialog::backdrop { background: rgba(13,33,55,.5); backdrop-filter: blur(2px); }
dialog .cuerpo { padding: 22px 24px; }
dialog .pie {
  padding: 14px 24px;
  border-top: 1px solid var(--borde);
  background: var(--panel2);
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  border-radius: 0 0 15px 15px;
}
dialog h2 { margin-top: 0; font-family: var(--serif); font-size: 20px; font-weight: 600; }

/* =============================================================== impresion */
@media print {
  header.barra, .no-imprimir { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .panel, .tabla-marco { border: 0; box-shadow: none; padding: 0; }
  main { max-width: none; padding: 0; }
  th { position: static; background: #eee !important; }
  .ficha::before { display: none; }
}

/* ================================================================= chiquito */
@media (max-width: 760px) {
  main { padding: 18px 14px 60px; }
  h1 { font-size: 22px; }
  .ficha .valor { font-size: 23px; }
  header.barra { padding: 0 12px; }
  header.barra .identidad { margin-right: 10px; }
  header.barra nav a { padding: 11px 9px; font-size: 13px; }
}