/* =====================================================================
   Blue para vendedores de seguros de vida — Etapa 1
   Marca oficial Blue (manual): #6941C6 · #8551D5 · #27BDDB · #7CBFEB
   · #3B235D · blanco. Degradado #6941C6 → #8551D5 → #27BDDB.
   Tipografía Inter. Ambiente: centro de mando oscuro, datos vivos.
   Nada de aspecto de CRM gris: aquí la tecnología SE VE trabajando.
   ===================================================================== */

:root {
  --violeta: #6941C6;
  --violeta-luz: #8551D5;
  --cian: #27BDDB;
  --cian-suave: #7CBFEB;
  --fondo: #1D0B38;
  --fondo-panel: #3B235D;
  --fondo-tarjeta: rgba(133, 81, 213, 0.14);
  --borde: rgba(124, 191, 235, 0.28);
  --texto: #FFFFFF;
  --texto-suave: #C9B8F2;
  --texto-tenue: #9B87C9;
  --degradado: linear-gradient(120deg, #6941C6, #8551D5, #27BDDB);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Inter', Arial, sans-serif;
  color: var(--texto);
  background: var(--fondo);
}

.fondo-mando {
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(39, 189, 219, 0.20), transparent 60%),
    radial-gradient(800px 600px at -10% 110%, rgba(133, 81, 213, 0.28), transparent 60%),
    linear-gradient(160deg, #241243 0%, #1D0B38 55%, #150826 100%);
  min-height: 100vh;
}

/* ---------- Marca ---------- */
.marca { display: flex; align-items: center; gap: 10px; }
.marca-punto {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--degradado);
  box-shadow: 0 0 18px rgba(39, 189, 219, 0.65);
  animation: pulso 2.6s ease-in-out infinite;
}
.marca-nombre { font-weight: 800; font-size: 22px; letter-spacing: 0.4px; }
@keyframes pulso {
  0%, 100% { box-shadow: 0 0 10px rgba(39, 189, 219, 0.35); }
  50% { box-shadow: 0 0 22px rgba(39, 189, 219, 0.8); }
}

/* ---------- Login ---------- */
.login-caja {
  max-width: 400px; margin: 0 auto; padding: 64px 24px 40px;
  display: flex; flex-direction: column; gap: 14px;
}
.login-caja h1 { font-size: 28px; margin: 10px 0 0; line-height: 1.15; }
.lema { color: var(--cian-suave); font-size: 17px; margin: 0; font-weight: 600; }
.form-login { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; }
.form-login label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--texto-suave); }
.form-login input, .form-login select {
  padding: 13px 14px; border-radius: 12px; border: 1px solid var(--borde);
  background: rgba(59, 35, 93, 0.65); color: var(--texto); font-size: 16px; font-family: inherit;
}
.form-login input:focus, .form-login select:focus { outline: 2px solid var(--cian); border-color: transparent; }
.btn-principal {
  margin-top: 4px; padding: 14px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--degradado); color: #fff; font-size: 16px; font-weight: 800; font-family: inherit;
}
.btn-principal:hover { filter: brightness(1.1); }
.aviso-error {
  background: rgba(105, 65, 198, 0.35); border: 1px solid var(--cian);
  border-left: 5px solid var(--cian);
  color: #FFFFFF; padding: 10px 12px; border-radius: 10px; font-size: 14px; margin: 0;
  font-weight: 600;
}
.pie-login { color: var(--texto-tenue); font-size: 13px; margin-top: 8px; }

/* ---------- Barra superior ---------- */
.barra {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px; border-bottom: 1px solid var(--borde);
  background: rgba(29, 11, 56, 0.75); backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 5; flex-wrap: wrap;
}
.barra-titulo { color: var(--texto-suave); font-weight: 600; margin-left: 8px; }
.barra-acciones { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.barra-usuario { color: var(--texto-suave); font-size: 14px; }
.btn-suave {
  color: var(--cian-suave); text-decoration: none; font-size: 14px; font-weight: 600;
  border: 1px solid var(--borde); padding: 7px 12px; border-radius: 999px;
}
.btn-suave:hover { background: rgba(39, 189, 219, 0.12); }

/* ---------- Cabina ---------- */
.cabina { max-width: 1060px; margin: 0 auto; padding: 26px 20px 48px; }
.cabina-saludo h2 { margin: 0 0 4px; font-size: 26px; }
.cabina-hora { color: var(--texto-suave); margin: 0 0 22px; }

.metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 22px; }
.tarjeta-metrica {
  background: var(--fondo-tarjeta); border: 1px solid var(--borde); border-radius: 16px;
  padding: 18px; display: flex; flex-direction: column; gap: 4px;
}
.tarjeta-metrica.destacada { background: linear-gradient(150deg, rgba(105, 65, 198, 0.55), rgba(39, 189, 219, 0.25)); }
.metrica-numero { font-size: 36px; font-weight: 800; line-height: 1; }
.metrica-etiqueta { color: var(--texto-suave); font-size: 13px; font-weight: 600; }

.panel-bloque {
  background: rgba(59, 35, 93, 0.45); border: 1px solid var(--borde);
  border-radius: 18px; padding: 20px; margin-bottom: 22px;
}
.panel-bloque h3 { margin: 0 0 16px; font-size: 17px; }
.estado-vacio { color: var(--texto-tenue); font-size: 14px; line-height: 1.55; margin: 10px 0 0; list-style: none; }

/* Tubería de estados: el flujo vivo de la venta */
.tuberia { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px; }
.tubo-cabeza { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.tubo-nombre { font-size: 13px; color: var(--texto-suave); font-weight: 600; }
.tubo-numero { font-size: 22px; font-weight: 800; }
.tubo-riel { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.10); overflow: hidden; }
.tubo-relleno {
  height: 100%; border-radius: 99px; background: var(--degradado);
  transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Columnas: mapa de calor + feed */
.cabina-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 760px) { .cabina-columnas { grid-template-columns: 1fr; } }

.mapa-calor { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.calor-celda { border-radius: 14px; padding: 16px 10px; text-align: center; display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--borde); }
.calor-numero { font-size: 28px; font-weight: 800; }
.calor-nombre { font-size: 12px; font-weight: 600; color: var(--texto-suave); }
/* El calor se expresa SOLO con la paleta Blue: más caliente = más
   degradado e intensidad de marca; más frío = más cian y calma. */
.calor-caliente { background: linear-gradient(150deg, rgba(105, 65, 198, 0.85), rgba(39, 189, 219, 0.50)); box-shadow: 0 0 18px rgba(133, 81, 213, 0.45); }
.calor-tibio { background: linear-gradient(160deg, rgba(133, 81, 213, 0.50), rgba(59, 35, 93, 0.40)); }
.calor-frio { background: linear-gradient(160deg, rgba(39, 189, 219, 0.28), rgba(59, 35, 93, 0.35)); }

.feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.feed li { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; border-bottom: 1px dashed rgba(124, 191, 235, 0.20); padding-bottom: 8px; }
.feed-hora { color: var(--texto-tenue); font-size: 12px; white-space: nowrap; }
.cabina-pie { color: var(--texto-tenue); font-size: 13px; line-height: 1.55; }

/* ---------- Marcar (pantalla mínima) ---------- */
.marcar-cuerpo { max-width: 640px; margin: 0 auto; padding: 30px 20px 48px; }
.marcar-titulo { font-size: 28px; margin: 0 0 6px; }
.marcar-nota { color: var(--texto-suave); line-height: 1.55; margin: 0 0 22px; }
.cola { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cola-item {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: rgba(59, 35, 93, 0.55); border: 1px solid var(--borde);
  border-left: 5px solid var(--cian); border-radius: 14px; padding: 16px;
}
.cola-item.calor-borde-caliente { border-left-color: var(--violeta-luz); box-shadow: inset 0 0 24px rgba(133, 81, 213, 0.35); }
.cola-item.calor-borde-tibio { border-left-color: var(--violeta); }
.cola-item.calor-borde-frio { border-left-color: var(--cian); }
.cola-datos { display: flex; flex-direction: column; gap: 3px; }
.cola-nombre { font-size: 19px; font-weight: 800; }
.cola-detalle { color: var(--texto-suave); font-size: 14px; }
.cola-motivo { color: var(--cian-suave); font-size: 13px; }
.btn-llamar {
  border: 0; border-radius: 999px; padding: 14px 26px; font-size: 17px; font-weight: 800;
  font-family: inherit; background: var(--degradado); color: #fff; cursor: pointer; white-space: nowrap;
}
.btn-llamar:disabled { opacity: 0.45; cursor: not-allowed; }
.cola-vacia {
  background: rgba(59, 35, 93, 0.45); border: 1px dashed var(--borde);
  border-radius: 16px; padding: 28px 22px; color: var(--texto-suave); line-height: 1.55;
}
.cola-vacia-grande { color: var(--texto); font-size: 19px; font-weight: 800; margin: 0 0 6px; }
.linea-nota { color: var(--texto-tenue); font-size: 13px; line-height: 1.55; margin-top: 22px; }
.barra-simple { gap: 10px; }

/* ---------- Formularios y tablas del panel (segundo pase) ----------
   Cargar base, Usuarios y Números comparten estas piezas. Mismos
   controles que el login, en ancho de cabina; tablas sobrias con la
   marca en los encabezados; el movimiento queda para los datos. */
.form-panel { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.form-panel label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--texto-suave); }
.form-panel input, .form-panel select {
  padding: 12px 14px; border-radius: 12px; border: 1px solid var(--borde);
  background: rgba(59, 35, 93, 0.65); color: var(--texto); font-size: 15px; font-family: inherit;
}
.form-panel input:focus, .form-panel select:focus { outline: 2px solid var(--cian); border-color: transparent; }
.form-panel input[type="file"] { padding: 10px 14px; }
.campo-ayuda { color: var(--texto-tenue); font-size: 12.5px; line-height: 1.5; font-weight: 400; }
.rejilla-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 680px) { .rejilla-2 { grid-template-columns: 1fr; } }
.grupo-opciones { border: 1px solid var(--borde); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; margin: 0; }
.grupo-opciones legend { color: var(--texto-suave); font-size: 13px; font-weight: 600; padding: 0 6px; }
.opcion-radio { flex-direction: row !important; align-items: center; gap: 9px !important; color: var(--texto) !important; cursor: pointer; }
.opcion-radio input { accent-color: var(--violeta-luz); width: 17px; height: 17px; }
label.opcion-check { flex-direction: row; align-items: center; gap: 9px; color: var(--texto-suave); cursor: pointer; padding-top: 26px; }
.opcion-check input { accent-color: var(--violeta-luz); width: 17px; height: 17px; }
.form-cancelar { margin-top: 14px; }
.form-cancelar .btn-suave, .form-inline .btn-suave { background: transparent; cursor: pointer; font-family: inherit; }
.form-inline { margin: 0; }
.btn-principal:disabled { opacity: 0.45; cursor: not-allowed; }

.pasos { display: flex; gap: 10px; list-style: none; margin: 0 0 20px; padding: 0; flex-wrap: wrap; }
.pasos li {
  border: 1px solid var(--borde); border-radius: 999px; padding: 7px 14px;
  font-size: 13.5px; font-weight: 600; color: var(--texto-tenue);
}
.pasos li.activo { color: #fff; background: var(--degradado); border-color: transparent; }

.tabla-scroll { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th {
  text-align: left; color: var(--cian-suave); font-weight: 700; font-size: 12.5px;
  letter-spacing: 0.3px; padding: 8px 10px; border-bottom: 1px solid var(--borde); white-space: nowrap;
}
.tabla td { padding: 9px 10px; border-bottom: 1px dashed rgba(124, 191, 235, 0.16); color: var(--texto); vertical-align: top; }
.tabla-previa td { color: var(--texto-suave); white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }

.aviso-ok {
  background: rgba(39, 189, 219, 0.14); border: 1px solid var(--cian);
  border-left: 5px solid var(--cian);
  color: #FFFFFF; padding: 12px 14px; border-radius: 10px; font-size: 14.5px; margin: 0 0 16px;
  line-height: 1.55;
}
.clave-temporal {
  font-size: 19px; letter-spacing: 1px; background: rgba(29, 11, 56, 0.8);
  border: 1px dashed var(--cian); border-radius: 8px; padding: 2px 10px; white-space: nowrap;
}
.ficha-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ficha-lista li { display: flex; justify-content: space-between; gap: 14px; font-size: 14.5px; border-bottom: 1px dashed rgba(124, 191, 235, 0.18); padding-bottom: 8px; }
.ficha-lista li span { color: var(--texto-suave); }
.ficha-lista li strong { text-align: right; }

/* ---------- Cabina viva + Desempeño (Paquete Único · Pieza B) ----------
   Saludo con avatar, «Tu base en vivo» con barras animadas, widget
   de meta del día y la página de Desempeño (prima y comisión).
   Solo paleta Blue y el movimiento de siempre: los datos se ven
   trabajando; sin JS, los valores servidos quedan visibles. */
.saludo-flex { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.saludo-flex h2 { margin: 0 0 4px; }
.saludo-flex .cabina-hora { margin: 0; }
.saludo-avatar { flex: 0 0 auto; display: flex; align-items: center; }
.saludo-avatar img { border-radius: 50%; display: block; }

.enlace-claro { color: var(--cian-suave); font-weight: 600; }

.vivo-sub {
  color: var(--cian-suave); font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.4px; text-transform: uppercase; margin: 14px 0 10px;
}
.vivo-sub:first-of-type { margin-top: 0; }
.vivo-fila { display: grid; grid-template-columns: 108px 1fr 86px; align-items: center; gap: 10px; margin-bottom: 10px; }
.vivo-nombre { font-size: 14px; font-weight: 600; color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vivo-barra { height: 10px; border-radius: 99px; background: rgba(255, 255, 255, 0.10); overflow: hidden; display: block; }
.vivo-relleno {
  display: block; height: 100%; border-radius: 99px; background: var(--degradado);
  transition: width 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.vivo-dato { text-align: right; font-size: 14px; font-weight: 700; white-space: nowrap; }
.vivo-nota { color: var(--texto-tenue); font-size: 13px; line-height: 1.5; margin: 10px 0 0; }

.meta-grande { font-size: 34px; font-weight: 800; line-height: 1.1; margin: 0 0 12px; }
.meta-unidad { font-size: 15px; font-weight: 600; color: var(--texto-suave); }
.meta-linea { color: var(--texto-suave); font-size: 14px; line-height: 1.55; margin: 10px 0 0; }

.prima-flujo { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 10px; align-items: stretch; }
@media (max-width: 760px) {
  .prima-flujo { grid-template-columns: 1fr; }
  .prima-flecha { transform: rotate(90deg); justify-self: center; }
}
.prima-etapa {
  background: var(--fondo-tarjeta); border: 1px solid var(--borde); border-radius: 16px;
  padding: 16px; display: flex; flex-direction: column; gap: 4px;
}
.prima-etiqueta { color: var(--cian-suave); font-size: 12.5px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; }
.prima-monto { font-size: 28px; font-weight: 800; line-height: 1.1; }
.prima-personas { color: var(--texto-suave); font-size: 13px; margin-bottom: 8px; }
.prima-flecha { align-self: center; font-size: 22px; color: var(--cian-suave); font-weight: 800; }

.comision-linea {
  display: flex; justify-content: space-between; gap: 14px; font-size: 14.5px;
  border-bottom: 1px dashed rgba(124, 191, 235, 0.18); padding-bottom: 8px; margin: 0 0 9px;
}
.comision-linea span { color: var(--texto-suave); }
.comision-linea strong { text-align: right; white-space: nowrap; }

.cierre-datos { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 16px; color: var(--texto-suave); font-size: 14px; }
.cierre-datos strong { color: var(--texto); font-size: 17px; }