/* CRM IAlvaro Tech — hoja de estilo. Creado 09/09/2026.
   Herramienta de trabajo diario: tabla densa, alto contraste, sin adornos.
   Funciona en iPhone porque el panel Hoy, la ficha y la cola se usan desde el móvil. */

:root{
  --tinta:#12161c; --tinta-2:#4a5563; --tinta-3:#7b8794;
  --fondo:#f5f6f8; --papel:#ffffff; --linea:#dfe3e8; --linea-2:#eef0f3;
  --azul:#1b4f9c; --azul-claro:#e8f0fb;
  --verde:#2e7d32; --ambar:#b07d00; --rojo:#bf2b2b; --morado:#6a3da8; --pizarra:#8b949e;
  --alto:34px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:13px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--tinta); background:var(--fondo);
  -webkit-text-size-adjust:100%;
}
a{color:var(--azul);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- estructura ---------- */
.barra{
  display:flex;align-items:center;gap:2px;flex-wrap:wrap;
  background:var(--tinta);padding:0 10px;position:sticky;top:0;z-index:50;
}
.barra a.nav{color:#c8d0da;padding:10px 11px;font-weight:600;font-size:13px;border-radius:5px 5px 0 0}
.barra a.nav:hover{color:#fff;background:#232a33;text-decoration:none}
.barra a.nav.activo{color:#fff;background:var(--azul)}
.barra .yo{margin-left:auto;color:#9aa5b1;font-size:12px;display:flex;align-items:center;gap:8px}
.barra .yo b{color:#fff}
.barra .yo a{color:#9aa5b1}
.punto{width:9px;height:9px;border-radius:50%;display:inline-block}

.envoltura{padding:12px}
.ancho{max-width:1700px;margin:0 auto}
h1{font-size:17px;margin:0 0 10px}
h2{font-size:14px;margin:16px 0 7px;color:var(--tinta-2);text-transform:uppercase;letter-spacing:.04em}
.silencio{color:var(--tinta-3)}
.mini{font-size:11.5px}

/* ---------- tarjetas ---------- */
.caja{background:var(--papel);border:1px solid var(--linea);border-radius:7px;margin-bottom:12px}
.caja>h3{margin:0;padding:8px 11px;font-size:12.5px;border-bottom:1px solid var(--linea);
  text-transform:uppercase;letter-spacing:.04em;color:var(--tinta-2);background:#fbfcfd;border-radius:7px 7px 0 0}
.caja>.cuerpo{padding:11px}

/* ---------- tabla densa ---------- */
.tablilla{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
table.densa{width:100%;border-collapse:collapse;background:var(--papel);font-size:12.5px}
table.densa th{
  text-align:left;padding:6px 8px;border-bottom:2px solid var(--linea);
  font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--tinta-2);
  white-space:nowrap;background:#fbfcfd;position:sticky;top:0;z-index:5;
}
table.densa th a{color:var(--tinta-2)}
table.densa td{padding:5px 8px;border-bottom:1px solid var(--linea-2);vertical-align:top}
table.densa tr:hover td{background:#f7f9fc}
table.densa tr.sel td{background:var(--azul-claro)}
.nowrap{white-space:nowrap}
.recorta{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}

/* ---------- etiquetas ---------- */
.eti{display:inline-block;padding:1px 7px;border-radius:10px;font-size:10.5px;font-weight:700;
  color:#fff;white-space:nowrap;letter-spacing:.02em}
.eti.hueca{background:#fff;border:1px solid var(--linea);color:var(--tinta-2);font-weight:600}
.bc3{display:inline-block;min-width:30px;text-align:center;padding:1px 6px;border-radius:4px;
  font-weight:700;font-size:11.5px;background:#eef0f3;color:var(--tinta-2)}
.bc3.alto{background:#0b6e4f;color:#fff}
.bc3.medio{background:#b07d00;color:#fff}
.bc3.bajo{background:#e6e9ed;color:var(--tinta-2)}

/* ---------- formularios ---------- */
input[type=text],input[type=search],input[type=password],input[type=number],
input[type=date],input[type=datetime-local],input[type=email],select,textarea{
  font:inherit;padding:5px 7px;border:1px solid #c9d0d8;border-radius:5px;background:#fff;
  color:var(--tinta);min-height:var(--alto);max-width:100%;
}
textarea{min-height:70px;width:100%;resize:vertical}
select{min-width:110px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--azul);outline-offset:-1px;border-color:var(--azul)}
label.campo{display:flex;flex-direction:column;gap:2px;font-size:11px;color:var(--tinta-2);font-weight:600}
.filtros{display:flex;flex-wrap:wrap;gap:7px;align-items:flex-end}
.filtros .par{display:flex;gap:4px;align-items:flex-end}

.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  min-height:var(--alto);padding:6px 13px;border-radius:6px;border:1px solid #c9d0d8;
  background:#fff;color:var(--tinta);font:inherit;font-weight:600;cursor:pointer;text-decoration:none;
}
.boton:hover{background:#f2f5f9;text-decoration:none}
.boton.primario{background:var(--azul);border-color:var(--azul);color:#fff}
.boton.primario:hover{background:#163f7d}
.boton.verde{background:var(--verde);border-color:var(--verde);color:#fff}
.boton.rojo{background:var(--rojo);border-color:var(--rojo);color:#fff}
.boton.grande{min-height:44px;font-size:15px;padding:10px 18px}
.boton[disabled]{opacity:.45;cursor:not-allowed}

.aviso{padding:8px 11px;border-radius:6px;margin-bottom:11px;font-weight:600}
.aviso.ok{background:#e7f4e9;border:1px solid #b7dcbc;color:#1e5c22}
.aviso.mal{background:#fdeaea;border:1px solid #f2bfbf;color:#8f1f1f}
.aviso.ojo{background:#fdf5e2;border:1px solid #ecd9a5;color:#7a5600}

/* ---------- barra de lote ---------- */
.lote{position:sticky;bottom:0;background:var(--tinta);color:#fff;padding:8px 11px;
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;border-radius:7px;margin-top:10px;z-index:40}
.lote b{color:#fff}
/* display:flex pisa al [hidden] del navegador: hay que decirlo a mano
   o la barra de lote se ve siempre, con cero contactos marcados. */
.lote[hidden]{display:none}
.lote select,.lote input{min-height:30px}

/* ---------- ficha ---------- */
.dosc{display:grid;grid-template-columns:1fr 380px;gap:12px;align-items:start}
.datos{display:grid;grid-template-columns:130px 1fr;gap:3px 10px;font-size:12.5px}
.datos dt{color:var(--tinta-3);font-weight:600}
.datos dd{margin:0;word-break:break-word}

.linea{list-style:none;margin:0;padding:0}
.linea li{display:flex;gap:9px;padding:7px 0;border-bottom:1px solid var(--linea-2)}
.linea li:last-child{border-bottom:0}
.linea .cuando{color:var(--tinta-3);font-size:11px;white-space:nowrap;width:88px;flex:none;font-variant-numeric:tabular-nums}
.linea .icono{width:17px;flex:none;text-align:center}
.linea li.auto{opacity:.55}
.linea li.auto .qué::after{content:" · automática";color:var(--tinta-3);font-weight:400}

/* ---------- señales BC3 ---------- */
.senales{display:flex;flex-wrap:wrap;gap:4px}
.senal{background:#eef4ff;border:1px solid #cfe0f8;color:#1b4f9c;border-radius:4px;
  padding:1px 6px;font-size:11px;font-weight:600}

/* ---------- modo llamada a pantalla completa ---------- */
.marcar{max-width:820px;margin:0 auto;padding:14px}
.marcar .empresa{font-size:30px;font-weight:800;line-height:1.15;margin:0 0 4px}
.marcar .tel{font-size:34px;font-weight:800;letter-spacing:.5px;color:var(--azul);
  display:inline-block;margin:6px 0;font-variant-numeric:tabular-nums}
.marcar .tel:hover{text-decoration:none}
.resultados{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-top:12px}
.resultados button{
  display:flex;align-items:center;gap:9px;min-height:46px;padding:8px 12px;
  border:1px solid #c9d0d8;border-radius:7px;background:#fff;font:inherit;font-size:14px;
  font-weight:600;cursor:pointer;text-align:left;
}
.resultados button:hover{background:#f2f5f9}
.resultados button kbd{
  background:var(--tinta);color:#fff;border-radius:4px;padding:2px 7px;font:700 12px ui-monospace,monospace;flex:none;
}
.progreso{font-size:12px;color:var(--tinta-3);font-variant-numeric:tabular-nums}

/* ---------- móvil ---------- */
@media (max-width:900px){
  .dosc{grid-template-columns:1fr}
  .resultados{grid-template-columns:1fr}
  .barra a.nav{padding:9px 8px;font-size:12px}
  .envoltura{padding:9px}
  .recorta{max-width:150px}
  .marcar .empresa{font-size:24px}
  .marcar .tel{font-size:30px}
  table.densa{font-size:12px}
}
@media (max-width:560px){
  .ocultar-movil{display:none}
}