/* ==========================================================
   Estilos del panel de referidos
   Para cambiar la apariencia, edita primero las variables de :root
   ========================================================== */
:root{
  --bg:#f4f5f9; --card:#fff; --text:#22243a; --muted:#6b6f85; --line:#e3e5ee;
  --primary:#4b3fa8; --primary-d:#3a3084; --ok:#1f8a55; --err:#c0392b; --warn:#b9770e;
  /* Colores de estado de las concreciones */
  --c-contacto-bg:#fff8e6; --c-contacto:#b9770e;   /* contactó, sin producto */
  --c-pend-bg:#e7f6ee;     --c-pend:#1f8a55;       /* concretó, pendiente de pago */
  --c-pagado-bg:#eaf1fb;   --c-pagado:#2f5fa7;     /* comisión ya pagada */
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.45}
a{color:var(--primary)}
.top{background:var(--primary);color:#fff;padding:.8rem 1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.top h1{font-size:1.1rem;margin:0}
.top a{color:#fff;text-decoration:none}
.wrap{max-width:1100px;margin:0 auto;padding:1rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1.1rem;margin-bottom:1.1rem;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.card h2{margin:.1rem 0 .9rem;font-size:1.05rem}
.card h3.sub{margin:1.2rem 0 .6rem;font-size:.95rem;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem}
.full{grid-column:1/-1}
label{display:block;font-size:.85rem;color:var(--muted);margin-bottom:.25rem}
label.chk{display:flex;gap:.5rem;align-items:flex-start;color:var(--text);margin:.6rem 0}
label.chk input{margin-top:.2rem}
input[type=text],input[type=email],input[type=tel],input[type=password],select{
  width:100%;padding:.65rem .75rem;border:1px solid var(--line);border-radius:8px;font-size:1rem;background:#fff;color:var(--text)}
select:disabled{background:#f1f2f6;color:var(--muted)}
input:focus,select:focus{outline:2px solid #cfc9f5;border-color:var(--primary)}
.btn{display:inline-block;background:var(--primary);color:#fff;border:0;border-radius:8px;padding:.6rem 1rem;font-size:.95rem;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--primary-d)}
.btn.sec{background:#fff;color:var(--primary);border:1px solid var(--primary)}
.btn.sec:hover{background:#f1effc}
.btn.danger{background:#fff;color:var(--err);border:1px solid var(--err)}
.btn.danger:hover{background:#fdecea}
.btn.sm{padding:.35rem .65rem;font-size:.82rem}
.msg{padding:.7rem .9rem;border-radius:8px;margin-bottom:1rem;font-size:.95rem}
.msg.ok{background:#e7f6ee;color:var(--ok);border:1px solid #bfe5cf}
.msg.error{background:#fdecea;color:var(--err);border:1px solid #f4c3bd}
.msg.warn{background:#fdf0dc;color:var(--warn);border:1px solid #f0d9a8}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:.6rem .5rem;border-bottom:1px solid var(--line);vertical-align:top;font-size:.92rem}
th{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
td.acc{text-align:right;white-space:nowrap}
.code{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700;background:#efedfb;color:var(--primary-d);padding:.15rem .45rem;border-radius:6px}
.tag{font-size:.75rem;padding:.12rem .5rem;border-radius:99px;white-space:nowrap}
.tag.on{background:#e7f6ee;color:var(--ok)}
.tag.off{background:#fdf0dc;color:var(--warn)}
.tag.contacto{background:#fdf0dc;color:var(--c-contacto)}
.tag.pend{background:#d4efe0;color:var(--c-pend)}
.tag.pagado{background:#d9e6f7;color:var(--c-pagado)}
.monto{font-weight:700;color:var(--c-pend)}
.legend{font-size:.85rem;color:var(--muted);line-height:2}
/* Filas del registro de accesos según el estado de la concreción */
tr.fila-contacto{background:var(--c-contacto-bg)}
tr.fila-pendiente{background:var(--c-pend-bg)}
tr.fila-pagado{background:var(--c-pagado-bg)}
.acts{display:flex;flex-wrap:wrap;gap:.35rem}
.acts form{margin:0}
.linkbox{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.linkbox input{flex:1;min-width:200px}
.muted{color:var(--muted)}
.stats{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:.8rem}
.stat{background:#f6f5fd;border-radius:10px;padding:.6rem 1rem;min-width:120px}
.stat b{display:block;font-size:1.4rem}
.stat.money{background:var(--c-pend-bg)}
.stat.money b{color:var(--c-pend)}
.center{max-width:380px;margin:12vh auto}
@media (max-width:720px){
  .grid{grid-template-columns:1fr}
  .stat{flex:1 1 40%;min-width:0}
  table.resp thead{display:none}
  table.resp,table.resp tbody,table.resp tr,table.resp td{display:block;width:100%}
  table.resp tr{border:1px solid var(--line);border-radius:10px;padding:.5rem .7rem;margin-bottom:.8rem;background:#fff}
  table.resp tr.fila-contacto{background:var(--c-contacto-bg);border-color:#f0d9a8}
  table.resp tr.fila-pendiente{background:var(--c-pend-bg);border-color:#bfe5cf}
  table.resp tr.fila-pagado{background:var(--c-pagado-bg);border-color:#c5d8f1}
  table.resp td{border:0;padding:.3rem 0;display:flex;justify-content:space-between;gap:1rem;text-align:right}
  table.resp td::before{content:attr(data-label);font-weight:600;color:var(--muted);text-align:left;flex:0 0 38%}
  table.resp td.acc{display:block;text-align:right;padding-top:.5rem}
  table.resp td.acc::before{content:none}
  table.resp td.acc .acts{justify-content:flex-end}
}
.hint{display:block;font-size:.8rem;color:var(--muted);margin-top:.3rem;line-height:1.35}