/* =====================================================
   William CRM · Estilo macOS-like
   ===================================================== */
:root{
  --bg1:#f2f2f7;          /* systemGroupedBackground */
  --bg2:#ffffff;          /* card */
  --txt1:#000;
  --txt2:#3c3c4399;       /* secondary label */
  --accent:#007aff;       /* systemBlue */
  --radius:12px;
  --shadow:0 2px 8px rgba(0,0,0,.06);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
/* —— Reset básico —— */
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg1);color:var(--txt1);line-height:1.55;font-size:15px}

/* =================== Topbar ========================= */
.topbar{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;gap:1rem;
  padding:.7rem 1rem;
  background:var(--bg2);border-bottom:1px solid #dcdcdf;
}
.topbar .brand{font-weight:600}
.topbar nav{margin-left:auto;display:flex;gap:.9rem;flex-wrap:wrap;font-size:.9rem}
.topbar nav a{display:flex;align-items:center;gap:.25rem;color:var(--accent)}
.topbar nav a:hover{opacity:.7}

/* =================== Container ====================== */
.container{max-width:1200px;margin:2rem auto;padding:0 1rem}

/* =================== Cards resumo =================== */
.cards{
  display:grid;
  gap:1rem;
  margin:1.7rem 0 2rem;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
}
.card{
  background:var(--bg2);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1.1rem .95rem;
  display:flex;align-items:center;gap:.75rem
}
.card ion-icon{font-size:24px;color:var(--accent)}
.card span{font-size:1.25rem;font-weight:600}
.card small{font-size:.8rem;color:var(--txt2)}

/* =================== Charts grid ==================== */
.charts{
  display:grid;
  gap:1rem;
  margin-bottom:2rem;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.chart-card{
  background:var(--bg2);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:.8rem;
  display:flex;align-items:center;justify-content:center;
}
.chart-card canvas{width:100%!important;height:260px!important}

/* =================== Mini-listas ==================== */
.lists{display:grid;gap:1rem}
@media(min-width:800px){.lists{grid-template-columns:repeat(3,1fr)}}
.list-card{
  background:var(--bg2);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1rem;
}
.list-card h3{
  font-size:.95rem;
  margin-bottom:.6rem;
  display:flex;justify-content:space-between;align-items:center
}
.list-card ul{list-style:none}
.list-card li{
  padding:.35rem 0;
  font-size:.85rem;
  border-bottom:1px solid #ececee;
  display:flex;justify-content:space-between
}
.list-card li:last-child{border:none}
.cta{font-size:.76rem;color:var(--accent);text-decoration:none}
.cta:hover{opacity:.7}

/* =================== Tables genéricas =============== */
.table-wrap{overflow-x:auto}
table{
  width:100%;border-collapse:collapse;background:var(--bg2);
  box-shadow:var(--shadow);font-size:.83rem
}
th,td{padding:.5rem .6rem;border-bottom:1px solid #e9e9ea}
th{background:#fafafa;text-align:left;font-weight:600}
tr:hover td{background:#f6f6f8}

/* =================== Auth form ====================== */
.auth-form{
  max-width:360px;margin:2rem auto;
  display:flex;flex-direction:column;gap:.8rem
}
.auth-form input{
  padding:.55rem;border:1px solid #c7c7cc;
  border-radius:var(--radius);background:#f9f9ff
}
.auth-form button{
  padding:.6rem;border:none;border-radius:var(--radius);
  background:var(--accent);color:#fff;cursor:pointer;font-weight:600
}
.auth-form button:hover{filter:brightness(1.05)}
.alert{color:#ff3b30;font-size:.85rem;margin-bottom:.6rem}

/* =================== Footer ========================= */
.foot{text-align:center;padding:1.5rem 0;font-size:.8rem;color:var(--txt2)}