/* Leads Nativa — hoja de estilos única */
:root{
  /* Colores de marca Nativa: morado #4B4999, magenta #E6115A, amarillo #FDC316 */
  --tinta:#1a1a2e; --tinta-2:#54546e; --tinta-3:#85859c;
  --fondo:#f6f6f9; --papel:#ffffff; --linea:#e4e4ec;
  --acento:#4b4999; --acento-suave:#ecebf6; --acento-borde:#c9c7e6; --acento-oscuro:#393778;
  --alerta:#c60e4d; --alerta-suave:#fce7ee;
  --aviso:#8a6100; --aviso-suave:#fef3d8;
  --radio:10px; --sombra:0 1px 2px rgba(26,26,46,.06), 0 4px 16px rgba(26,26,46,.05);
  --fuente:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--fuente);font-size:15px;line-height:1.5;color:var(--tinta);background:var(--fondo);-webkit-font-smoothing:antialiased}
a{color:var(--acento-oscuro)}
h1,h2,h3{margin:0 0 .5rem;line-height:1.25}
h1{font-size:1.35rem}h2{font-size:1.05rem}h3{font-size:.95rem}

/* ---------- Estructura ---------- */
.barra{background:var(--papel);border-bottom:1px solid var(--linea);position:sticky;top:0;z-index:20}
.barra-interior{max-width:1240px;margin:0 auto;padding:.6rem 1rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.logo{margin:0;line-height:0;flex-shrink:0}
.logo a{display:block;line-height:0}
.logo img{display:block;height:22px;width:auto}
.menu{display:flex;gap:.15rem;flex-wrap:wrap;flex:1}
.menu a{padding:.4rem .7rem;border-radius:8px;text-decoration:none;color:var(--tinta-2);font-weight:500;font-size:.9rem}
.menu a:hover{background:var(--fondo)}
.menu a.activo{background:var(--acento-suave);color:var(--acento-oscuro)}
.usuario{display:flex;align-items:center;gap:.6rem;font-size:.85rem;color:var(--tinta-3)}
.contenido{max-width:1240px;margin:0 auto;padding:1.25rem 1rem 4rem}
.encabezado{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.sub{color:var(--tinta-3);margin:.15rem 0 0;font-size:.9rem}

.pie{max-width:1240px;margin:0 auto;padding:0 1rem 2rem;color:var(--tinta-3);font-size:.78rem;text-align:center}

/* ---------- Tarjetas y avisos ---------- */
.panel{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);box-shadow:var(--sombra)}
.panel-p{padding:1rem}
.aviso{padding:.7rem .9rem;border-radius:8px;margin-bottom:.9rem;font-size:.9rem;border:1px solid transparent}
.aviso.ok{background:var(--acento-suave);border-color:var(--acento-borde);color:var(--acento-oscuro)}
.aviso.error{background:var(--alerta-suave);border-color:#f6c4d6;color:var(--alerta)}
.aviso.warn{background:var(--aviso-suave);border-color:#f6dfa6;color:var(--aviso)}

/* ---------- Métricas ---------- */
.metricas{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:.6rem;margin-bottom:1rem}
.metrica{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);padding:.7rem .8rem;text-decoration:none;color:inherit;display:block}
.metrica:hover{border-color:var(--acento)}
.metrica .n{font-size:1.5rem;font-weight:700;letter-spacing:-.02em}
.metrica .t{font-size:.78rem;color:var(--tinta-3);text-transform:uppercase;letter-spacing:.04em}
.metrica.destacada{background:var(--acento-suave);border-color:var(--acento-borde)}

/* ---------- Formularios ---------- */
.form label{display:block;margin-bottom:.7rem;font-size:.85rem;color:var(--tinta-2);font-weight:500}
input,select,textarea{width:100%;padding:.55rem .65rem;border:1px solid var(--linea);border-radius:8px;font:inherit;font-size:.92rem;background:var(--papel);color:var(--tinta);margin-top:.25rem}
input:focus,select:focus,textarea:focus{outline:2px solid var(--acento);outline-offset:-1px;border-color:var(--acento)}
textarea{resize:vertical;min-height:78px}
.rejilla-2{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.filtros{display:flex;gap:.5rem;flex-wrap:wrap;align-items:flex-end;margin-bottom:1rem}
.filtros label{margin:0;font-size:.78rem;flex:0 1 152px;min-width:0}
.filtros .ancho{flex:0 1 200px}
.filtros input,.filtros select{margin-top:.2rem;width:100%;min-width:0}

.btn{display:inline-block;padding:.55rem .95rem;border-radius:8px;border:1px solid var(--linea);background:var(--papel);color:var(--tinta);font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;text-decoration:none;text-align:center}
.btn:hover{background:var(--fondo)}
.btn-primario{background:var(--acento);border-color:var(--acento);color:#fff}
.btn-primario:hover{background:var(--acento-oscuro)}
.btn-peligro{color:var(--alerta);border-color:#f6c4d6}
.btn-chico{padding:.3rem .55rem;font-size:.8rem;font-weight:500}
.acciones{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}

/* ---------- Tabla ---------- */
.tabla-caja{overflow-x:auto;background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);box-shadow:var(--sombra)}
table{width:100%;border-collapse:collapse;font-size:.88rem}
th{text-align:left;padding:.6rem .75rem;border-bottom:1px solid var(--linea);color:var(--tinta-3);font-size:.76rem;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
td{padding:.6rem .75rem;border-bottom:1px solid var(--linea);vertical-align:top}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:#fafbfa}
.td-nombre{font-weight:600}
.td-nombre a{text-decoration:none;color:var(--tinta)}
.td-nombre a:hover{color:var(--acento)}
.menudo{font-size:.78rem;color:var(--tinta-3)}
.vacio{padding:2.5rem 1rem;text-align:center;color:var(--tinta-3)}

/* ---------- Etiquetas de estado ---------- */
.etq{display:inline-block;padding:.15rem .5rem;border-radius:99px;font-size:.75rem;font-weight:600;white-space:nowrap;border:1px solid transparent}
.etq-nuevo{background:#f1f1f7;color:#5c5c7a;border-color:#e2e2ee}
.etq-contactado{background:var(--acento-suave);color:var(--acento-oscuro);border-color:var(--acento-borde)}
.etq-seguimiento{background:var(--aviso-suave);color:var(--aviso);border-color:#f6dfa6}
.etq-cotizado{background:#fde9d6;color:#a25a12;border-color:#f4d0ae}
.etq-ganado{background:var(--acento);color:#fff;border-color:var(--acento)}
.etq-perdido{background:#eceeed;color:var(--tinta-3);border-color:#dfe3e1}
.etq-plat{background:var(--fondo);color:var(--tinta-3);border-color:var(--linea);font-weight:500}

/* Selector de estado dentro de la tabla: se ve como etiqueta, guarda solo */
.form-estado{display:inline-block;margin:0}
.sel-estado{appearance:none;-webkit-appearance:none;width:auto;min-width:124px;margin:0;
  padding:.22rem 1.4rem .22rem .58rem;border:1px solid transparent;border-radius:99px;
  font:inherit;font-size:.75rem;font-weight:600;line-height:1.45;cursor:pointer;
  background-repeat:no-repeat;background-position:right .45rem center;background-size:9px 6px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'%3E%3Cpath fill='%23000' fill-opacity='.4' d='M0 0h9L4.5 6z'/%3E%3C/svg%3E")}
.sel-estado:focus{outline:2px solid var(--acento);outline-offset:1px}
.sel-estado:disabled{opacity:.55;cursor:progress}
.sel-nuevo{background-color:#f1f1f7;color:#5c5c7a;border-color:#e2e2ee}
.sel-contactado{background-color:var(--acento-suave);color:var(--acento-oscuro);border-color:var(--acento-borde)}
.sel-seguimiento{background-color:var(--aviso-suave);color:var(--aviso);border-color:#f6dfa6}
.sel-cotizado{background-color:#fde9d6;color:#a25a12;border-color:#f4d0ae}
.sel-ganado{background-color:var(--acento);color:#fff;border-color:var(--acento);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'%3E%3Cpath fill='%23fff' fill-opacity='.8' d='M0 0h9L4.5 6z'/%3E%3C/svg%3E")}
.sel-perdido{background-color:#eceeed;color:var(--tinta-3);border-color:#dfe3e1}
.sel-estado.guardado{animation:destello .9s ease-out}
@keyframes destello{
  0%{box-shadow:0 0 0 0 rgba(75,73,153,.45)}
  100%{box-shadow:0 0 0 8px rgba(75,73,153,0)}
}
@media (prefers-reduced-motion:reduce){.sel-estado.guardado{animation:none}}
.alerta-fecha{color:var(--alerta);font-weight:600}

/* ---------- Tablero ---------- */
.tablero{display:grid;grid-template-columns:repeat(6,minmax(188px,1fr));gap:.7rem;overflow-x:auto;padding-bottom:1rem}
.columna{background:#eef0ee;border-radius:var(--radio);padding:.6rem;min-height:180px}
.columna.sobre{outline:2px dashed var(--acento);outline-offset:-2px}
.columna h3{display:flex;justify-content:space-between;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--tinta-2);margin-bottom:.6rem}
.ficha{background:var(--papel);border:1px solid var(--linea);border-radius:8px;padding:.55rem .65rem;margin-bottom:.5rem;cursor:grab;display:block;text-decoration:none;color:inherit}
.ficha:hover{border-color:var(--acento)}
.ficha.arrastrando{opacity:.4}
.ficha b{display:block;font-size:.88rem}

/* ---------- Detalle ---------- */
.dos-columnas{display:grid;grid-template-columns:1.35fr 1fr;gap:1rem;align-items:start}
.datos{list-style:none;padding:0;margin:0;font-size:.9rem}
.datos li{display:flex;justify-content:space-between;gap:1rem;padding:.45rem 0;border-bottom:1px solid var(--linea)}
.datos li:last-child{border-bottom:0}
.datos .k{color:var(--tinta-3);white-space:nowrap}
.datos .v{text-align:right;word-break:break-word}
.bitacora{list-style:none;padding:0;margin:0}
.bitacora li{padding:.6rem 0;border-bottom:1px solid var(--linea);font-size:.88rem}
.bitacora li:last-child{border-bottom:0}
.bitacora .meta{font-size:.75rem;color:var(--tinta-3);margin-top:.15rem}

/* ---------- Pantallas de acceso ---------- */
.pantalla-centro{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:1.25rem}
.tarjeta{background:var(--papel);border:1px solid var(--linea);border-radius:14px;box-shadow:var(--sombra);padding:1.75rem;width:100%;max-width:390px}
.tarjeta-ancha{max-width:560px}
.marca{margin:0 0 1.25rem;text-align:center;line-height:0}
.marca img{height:34px;width:auto;display:inline-block}
.titulo-tarjeta{font-size:1.15rem;text-align:center;margin-bottom:.25rem}
.tarjeta .sub{text-align:center;margin-bottom:1.25rem}
.ayuda{font-size:.85rem;color:var(--tinta-3)}
.pasos{font-size:.9rem;color:var(--tinta-2);padding-left:1.1rem}
.pasos li{margin-bottom:.4rem}
.codigo{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem}
#qr{display:flex;justify-content:center;padding:1rem;background:#fff;border:1px solid var(--linea);border-radius:var(--radio);margin-bottom:.75rem}
#qr img,#qr canvas{display:block}
.secreto{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1rem;letter-spacing:.08em;text-align:center;background:var(--fondo);border:1px dashed var(--linea);border-radius:8px;padding:.6rem;word-break:break-all}
.codigo-otp{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.6rem;letter-spacing:.35em;text-align:center}
.lista-codigos{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.95rem;margin:1rem 0}
.lista-codigos span{background:var(--fondo);border:1px solid var(--linea);border-radius:6px;padding:.4rem;text-align:center}
.separador{display:flex;align-items:center;gap:.6rem;color:var(--tinta-3);font-size:.8rem;margin:1.1rem 0 .8rem}
.separador::before,.separador::after{content:"";flex:1;height:1px;background:var(--linea)}
details summary{cursor:pointer;font-size:.85rem;color:var(--tinta-2)}

@media (max-width:900px){
  .dos-columnas{grid-template-columns:1fr}
  .tablero{grid-template-columns:repeat(6,minmax(200px,1fr))}
}
@media (max-width:640px){
  .rejilla-2{grid-template-columns:1fr}
  .filtros{flex-direction:column;align-items:stretch}
  .filtros .ancho,.filtros input,.filtros select{min-width:0;width:100%}
  .oculto-movil{display:none}
}
@media print{ .barra,.filtros,.acciones{display:none} }