/* public/css/widget.css — responsive desktop + mobile */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  background: #f0f0ee;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2rem 1rem;
  color: #1a1a18;
}

/* ── Widget container ─────────────────────────────── */
.widget {
  background: #ffffff;
  border: 1px solid #e0e0de;
  border-radius: 12px;
  width: 100%;
  max-width: 520px;   /* más ancho para desktop */
  overflow: hidden;
}

/* ── Header ───────────────────────────────────────── */
.widget-header {
  background: #ffffff;
  border-bottom: 1px solid #efefed;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.doctor-logo {
  width: 52px; height: 52px; border-radius: 8px;
  object-fit: contain; border: 1px solid #efefed;
  flex-shrink: 0; background: #fafafa;
}
.doctor-name      { font-size: 16px; font-weight: 500; color: #1a1a18; margin-bottom: 2px; }
.doctor-specialty { font-size: 13px; color: #888; }

/* ── Body ─────────────────────────────────────────── */
.widget-body { padding: 22px 24px; background: #ffffff; }

/* ── Steps ────────────────────────────────────────── */
.step-bar  { display: flex; align-items: center; margin-bottom: 22px; }
.step-item { display: flex; align-items: center; gap: 6px; }
.step-num  {
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 500; flex-shrink: 0; transition: all 0.2s;
}
.step-num.done   { background: #1a1a18; color: #fff; }
.step-num.active { background: #1a1a18; color: #fff; }
.step-num.pend   { background: #f0f0ee; color: #aaa; border: 1px solid #e0e0de; }
.step-label        { font-size: 12px; color: #aaa; }
.step-label.active { color: #1a1a18; font-weight: 500; }
.step-label.done   { color: #555; }
.step-line { flex: 1; height: 1px; background: #e0e0de; margin: 0 6px; }

/* ── Sections ─────────────────────────────────────── */
.sec        { display: block; }
.sec.hidden { display: none; }
.sec-label  {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.07em; color: #aaa; margin-bottom: 10px;
}

/* ── Type cards — clic directo ───────────────────── */
.type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.type-card {
  border: 1px solid #e0e0de; border-radius: 10px; padding: 16px;
  cursor: pointer; transition: all 0.15s;
  background: #fff; text-align: left; width: 100%;
}
.type-card:hover { border-color: #1a1a18; background: #fafafa; transform: translateY(-1px); }
.type-card:active { transform: translateY(0); }
.type-icon { font-size: 22px; margin-bottom: 8px; color: #555; }
.type-name { font-size: 14px; font-weight: 500; color: #1a1a18; }
.type-dur  { font-size: 12px; color: #aaa; margin-top: 3px; }
.type-price { font-size: 12px; color: #555; margin-top: 2px; font-weight: 500; }

/* ── Calendar ─────────────────────────────────────── */
.month-nav {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.month-nav-label { font-size: 15px; font-weight: 500; color: #1a1a18; text-transform: capitalize; }
.month-btn {
  width: 32px; height: 32px; border-radius: 8px;
  border: 1px solid #e0e0de; background: #fff; color: #555;
  cursor: pointer; font-size: 16px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.month-btn:hover { border-color: #aaa; }

.cal-week-header {
  display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 6px;
}
.cal-week-header span {
  text-align: center; font-size: 11px; font-weight: 600;
  color: #aaa; text-transform: uppercase; padding: 4px 0;
}

.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 3px; margin-bottom: 18px;
}
.cal-cell {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; font-size: 14px; cursor: pointer;
  transition: all 0.15s; border: 1px solid transparent; color: #1a1a18;
  min-height: 36px;   /* altura mínima para no comprimir */
}
.cal-cell.empty   { cursor: default; }
.cal-cell.past    { color: #ccc; cursor: not-allowed; }
.cal-cell.off     { color: #ddd; cursor: not-allowed; }
.cal-cell.today   { font-weight: 700; border-color: #e0e0de; }
.cal-cell.avail:hover { border-color: #aaa; background: #fafafa; }
.cal-cell.active  { background: #1a1a18 !important; color: #fff !important; border-color: #1a1a18; }

/* ── Slots ────────────────────────────────────────── */
.slots-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 6px; margin-bottom: 18px;
}
.slot {
  padding: 9px 4px; border-radius: 8px; border: 1px solid #e0e0de;
  text-align: center; font-size: 13px; font-weight: 500;
  background: #fff; color: #1a1a18; cursor: pointer; transition: all 0.15s;
}
.slot:hover:not(.taken) { border-color: #aaa; background: #fafafa; }
.slot.active { background: #1a1a18 !important; color: #ffffff !important; border-color: #1a1a18 !important; }
.slot.taken  { color: #ccc; background: #f8f8f6; text-decoration: line-through; cursor: not-allowed; }

/* ── Form ─────────────────────────────────────────── */
.form-group { margin-bottom: 12px; }
.form-group label {
  display: block; font-size: 13px; color: #555; margin-bottom: 5px; font-weight: 500;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%; padding: 9px 11px;
  border: 1px solid #e0e0de; border-radius: 8px;
  font-size: 14px; font-family: inherit; color: #1a1a18; background: #fff;
  transition: border-color 0.15s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none; border-color: #888; box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}
.form-group textarea { resize: none; }
.form-row   { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.req        { color: #dc2626; margin-left: 1px; }

/* ── Summary ──────────────────────────────────────── */
.summary-box {
  background: #f8f8f6; border-radius: 8px;
  padding: 12px 14px; margin-bottom: 16px; font-size: 14px;
}
.summary-row { display: flex; gap: 8px; margin-bottom: 5px; color: #555; }
.summary-row:last-child { margin-bottom: 0; }
.summary-row span { color: #1a1a18; }

/* ── Confirm ──────────────────────────────────────── */
.confirm-ok    { text-align: center; margin-bottom: 18px; }
.confirm-check {
  width: 52px; height: 52px; border-radius: 50%;
  background: #f0fdf4; border: 1px solid #bbf7d0;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: #15803d; margin: 0 auto 12px;
}
.confirm-ok h2 { font-size: 17px; font-weight: 500; margin-bottom: 4px; }
.confirm-ok p  { font-size: 13px; color: #888; }
.confirm-card  { background: #f8f8f6; border-radius: 8px; padding: 14px; margin-bottom: 14px; }
.confirm-row   {
  display: flex; justify-content: space-between;
  font-size: 13px; padding: 6px 0; border-bottom: 1px solid #efefed;
}
.confirm-row:last-child { border-bottom: none; }
.confirm-row .lbl { color: #888; }
.confirm-row .val { font-weight: 500; color: #1a1a18; }

/* ── Alerts ───────────────────────────────────────── */
.error-box {
  background: #fef2f2; border: 1px solid #fca5a5;
  border-radius: 8px; padding: 10px 13px;
  font-size: 13px; color: #991b1b; margin-bottom: 14px;
}
.alert-warning {
  background: #fffbeb; border: 1px solid #fde68a;
  border-radius: 8px; padding: 10px 13px;
  font-size: 13px; color: #92400e; margin-bottom: 14px;
}

/* ── Buttons ──────────────────────────────────────── */
.btn-row { display: flex; gap: 8px; margin-top: 18px; }
.btn-primary {
  flex: 1; height: 42px; background: #1a1a18; color: #fff;
  border: none; border-radius: 8px; font-size: 14px; font-weight: 500;
  cursor: pointer; font-family: inherit; transition: opacity 0.15s;
}
.btn-primary:disabled { opacity: 0.35; cursor: not-allowed; }
.btn-primary:hover:not(:disabled) { opacity: 0.85; }
.btn-back {
  height: 42px; padding: 0 16px; background: #fff;
  border: 1px solid #e0e0de; border-radius: 8px;
  font-size: 14px; color: #555; cursor: pointer; font-family: inherit;
  white-space: nowrap;
}
.btn-back:hover { border-color: #aaa; }
.btn-secondary {
  width: 100%; height: 42px; background: #fff;
  border: 1px solid #e0e0de; border-radius: 8px;
  font-size: 14px; color: #555; cursor: pointer; font-family: inherit;
}
.loading-msg {
  text-align: center; padding: 18px 0; font-size: 13px;
  color: #aaa; grid-column: 1/-1;
}

/* ── RESPONSIVE: móvil ────────────────────────────── */
@media (max-width: 540px) {
  body { padding: 0; align-items: stretch; background: #fff; }
  .widget {
    border-radius: 0; border: none;
    max-width: 100%; min-height: 100vh;
  }
  .widget-body { padding: 18px 16px; }
  .widget-header { padding: 16px; }
  .form-row { grid-template-columns: 1fr; }
  .type-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .type-card { padding: 13px; }
  .type-name { font-size: 13px; }
  .slots-grid { grid-template-columns: repeat(4, 1fr); gap: 5px; }
  .slot { font-size: 12px; padding: 8px 3px; }
  .cal-cell { font-size: 13px; min-height: 34px; }
}

/* ── RESPONSIVE: desktop grande ──────────────────── */
@media (min-width: 768px) {
  body { padding: 3rem 1rem; }
  .slots-grid { grid-template-columns: repeat(5, 1fr); }
}