/* ====== Theme (match app) ====== */
:root{
  --primary:#1e88e5;       /* azul */
  --primary-50:#e8f2ff;    /* fondo suave p/ iconos */
  --primary-700:#1878cc;

  --secondary:#00bfa5;     /* turquesa - CTA */
  --secondary-600:#00a892; /* hover/active */
  --secondary-50:#e7fff8;  /* chip/pastilla suave */

  --background:#ffffff;
  --surface:#f5f7fb;
  --card:#ffffff;
  --border:#e5e7eb;

  --text:#1a1a1a;
  --text-dim:#6b7280;

  --danger:#e53935;
  --success:#00bfa5;

  --focus-ring: 0 0 0 3px rgba(30,136,229,.18);
  --shadow-1: 0 8px 24px rgba(0,0,0,.06);
  --shadow-2: 0 6px 20px rgba(0,0,0,.06);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--surface);
  color:var(--text);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Arial;
}
.muted{color:var(--text-dim)}

/* ====== Header ====== */
.site-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 16px;border-bottom:1px solid var(--border);background:#fff;
  position:sticky;top:0;z-index:10;
}
.brand{display:flex;gap:10px;align-items:center}
.logo{
  width:44px;height:44px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:var(--primary-50);
  border:1px solid var(--border);
  color:var(--primary);font-size:22px;
}
.brand h1{font-size:18px;margin:0}
.brand .muted{margin:0;color:var(--text-dim);font-size:12px}
.actions .btn{margin-left:8px}

/* ====== Avisos ====== */
.avisos{max-width:980px;margin:14px auto;padding:0 12px}
.aviso{
  background:#F5FAFF;border:1px solid #D9EBFF;color:#0f3c66;
  padding:10px 12px;border-radius:12px;margin:6px 0;display:flex;gap:10px;align-items:flex-start;
}
.aviso .badge{font-size:12px;font-weight:800;padding:2px 8px;border-radius:999px;background:#D9EBFF}

/* ====== Card (wizard) ====== */
.wizard-card{
  max-width:980px;margin:16px auto;background:var(--card);
  border:1px solid var(--border);border-radius:14px;padding:16px;
  box-shadow:var(--shadow-1);
}
.step h2{margin:6px 0 12px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.row{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.row.end{flex-direction:row;justify-content:flex-end;align-items:center;margin-top:14px}

label{font-weight:800}
input,select{
  padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:#fff;color:var(--text);
}
input:focus,select:focus{outline:none;border-color:var(--primary);box-shadow:var(--focus-ring)}

/* ====== Botones ====== */
.btn{
  appearance:none;border:none;border-radius:12px;padding:10px 14px;cursor:pointer;font-weight:800;
  background:#eef2f6;color:#0f172a;transition:transform .06s ease, background .15s ease, box-shadow .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--secondary);color:#fff}
.btn.primary:hover{background:var(--secondary-600)}
.btn.ghost{background:#fff;border:1px solid var(--border)}
.btn.tiny{padding:6px 10px}
.btn.success{background:var(--secondary);color:#fff}
.btn.success:hover{background:var(--secondary-600)}
.btn.danger{background:var(--danger);color:#fff}
.btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* ====== Choices grandes ====== */
.big-choice{
  display:flex;gap:12px;align-items:center;padding:14px;border:1px solid var(--border);
  border-radius:12px;background:#fff;cursor:pointer;text-align:left;box-shadow:none;transition:box-shadow .15s ease,border-color .15s ease;
}
.big-choice:hover{box-shadow:var(--shadow-2);border-color:#d8dee6}
.big-choice .icon{
  width:36px;height:36px;border-radius:18px;display:flex;align-items:center;justify-content:center;
  background:var(--primary-50);border:1px solid var(--border);font-size:18px;
  color:var(--primary);
}

/* ====== Calendario (día clickeable) ====== */
.calendar{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#fff}
.cal-header{
  display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:#f6fbff;border-bottom:1px solid var(--border)
}
#mesLabel{font-weight:900}
.cal-grid{
  display:grid;grid-template-columns:repeat(7,1fr);
  gap:1px;background:var(--border);
}
.cal-grid .cell{
  background:#fff;min-height:82px;padding:8px;display:flex;flex-direction:column;gap:6px;
  border-radius:0; transition:background .12s ease, box-shadow .12s ease, outline-color .12s ease;
}
.cell .day{font-weight:900;font-size:13px}
.cell .avail{margin-top:auto;display:flex;gap:6px;flex-wrap:wrap}
.pill{
  padding:2px 8px;border-radius:999px;font-size:12px;
  border:1px solid #CFF0E9;background:var(--secondary-50);color:#0b3d35;font-weight:800;
}

/* estados */
.cell.disabled{color:#b9c3c8;background:#f7f9fb}
.cell.clickable{cursor:pointer;touch-action:manipulation}
.cell.clickable:hover{background:#f0faf8}
.cell.selected{
  box-shadow: inset 0 0 0 3px var(--secondary);
  background:#f6fffb;
  outline: none;
}

/* leyenda */
.legend{color:var(--text-dim);font-size:12px;padding:8px}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin:0 6px 0 16px;vertical-align:middle}
.dot.available{background:var(--secondary)}
.dot.none{background:#cbd5e1}

/* ====== Slots horarios ====== */
.slots-wrap{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.slot-btn{
  padding:10px 12px;border:1px solid #CFF0E9;border-radius:12px;background:#fff;cursor:pointer;font-weight:800;color:#0b3d35;
}
.slot-btn:hover{background:#f0faf8}

/* ====== Resumen / avisos ====== */
.summary{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px;
  background:#f6fbff;border:1px solid var(--border);border-radius:12px;padding:12px;margin:8px 0 10px;
}
.notice{
  background:#fff8e1;border:1px solid #fde68a;color:#7a5d00;padding:10px 12px;border-radius:12px
}

/* ====== Consulta / lista ====== */
.turnos-list{margin-top:12px}
.turno-item{
  display:flex;justify-content:space-between;align-items:center;
  border:1px solid var(--border);border-radius:12px;padding:10px 12px;margin:8px 0;background:#fff;
}
.turno-item .meta{color:var(--text-dim);font-size:13px}

/* ====== Footer ====== */
.site-footer{max-width:980px;margin:18px auto;text-align:center;color:var(--text-dim)}

/* ====== Helpers ====== */
label{color:var(--text)}
#legend{user-select:none}
.summary b, .turno-item b { font-weight:800 }

/* ====== Responsive ====== */
@media (max-width: 900px){
  .site-header{flex-wrap:wrap;gap:8px}
  .actions{width:100%;display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
}
@media (max-width: 720px){
  .wizard-card{padding:12px}
  .cal-grid .cell{min-height:68px;padding:6px}
  .cell .day{font-size:12px}
  .pill{font-size:11px;padding:2px 6px}
}
@media (max-width: 480px){
  .brand h1{font-size:16px}
  .cal-header{padding:8px 10px}
}