:root {
  --bg: #f6f2ee;
  --card: #fff;
  --ink: #3b2f2a;
  --muted: #8a7b72;
  --accent: #e05a7a;
  --accent-dark: #c23f5f;
  --line: #ecdcd2;
  --ok: #2f9e68;
  --warn: #e0a020;
  --danger: #c03a3a;
  --radius: 14px;
  --shadow: 0 6px 20px rgba(80, 45, 30, .08);
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--ink); }
.hidden { display: none !important; }

/* Tabs */
.tab { display: none; }
.tab.active { display: block; }

/* Login */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 36px; width: 320px; display: flex; flex-direction: column; gap: 12px; }
.login-logo { font-size: 26px; font-weight: 800; text-align: center; }
.login-logo span { color: var(--accent); }
.login-sub { text-align: center; color: var(--muted); margin: -6px 0 8px; }
.error-msg { color: var(--danger); font-size: 13px; text-align: center; min-height: 18px; }

/* App shell */
.app { display: flex; min-height: 100vh; }
.sidebar { width: 230px; background: #2a1e1a; color: #f3e9e4; padding: 18px 12px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.sidebar .brand { font-weight: 800; font-size: 18px; padding: 6px 10px 18px; letter-spacing: .5px; }
.sidebar nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.sidebar nav button { background: transparent; border: 0; color: #d9c9c2; text-align: left; padding: 11px 12px; border-radius: 10px; font-size: 14.5px; cursor: pointer; }
.sidebar nav button:hover { background: rgba(255,255,255,.07); }
.sidebar nav button.active { background: var(--accent); color: #fff; font-weight: 600; }
.sidebar-foot { padding-top: 12px; border-top: 1px solid rgba(255,255,255,.1); }
.content { flex: 1; padding: 24px 28px; max-width: 1280px; }
.topbar h1 { margin: 0 0 18px; font-size: 22px; }

/* Cards / grids */
.grid { display: grid; gap: 14px; }
.grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; }
.card h3 { margin: 0 0 12px; font-size: 15px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.stat { font-size: 30px; font-weight: 800; }
.stat.ok { color: var(--ok); } .stat.warn { color: var(--warn); } .stat.danger { color: var(--danger); } .stat.accent { color: var(--accent); }

/* Table */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { color: var(--muted); font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: .3px; }
td.actions { white-space: nowrap; }
tr.clickable { cursor: pointer; }
tr.clickable:hover { background: #fdf6f2; }

/* Badges */
.badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge.CONFIRMADO { background: #e1f5ea; color: var(--ok); }
.badge.SOLICITADO, .badge.AGUARDANDO_APROVACAO { background: #fdeee0; color: #c2701a; }
.badge.AGUARDANDO_CONFIRMACAO { background: #fdf3d3; color: #a67c00; }
.badge.CANCELADO { background: #fbe4e4; color: var(--danger); }
.badge.CONCLUIDO { background: #e3eefb; color: #2a6ab0; }
.badge.AGUARDANDO_PAGAMENTO { background: #fdeee0; color: #c2701a; }
.badge.NAO_CONFIRMADO, .badge.REMARCADO, .badge.NAO_APROVADO, .badge.FALTOU { background: #ececf0; color: var(--muted); }
.badge.alert { background: #fdf3d3; color: #a67c00; }
.badge.price { background: #e0f0e8; color: #1a6b3a; }

/* Buttons */
.btn { border: 0; border-radius: 10px; padding: 9px 14px; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.btn.primary { background: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-dark); }
.btn.ghost { background: transparent; border: 1px solid var(--line); color: var(--ink); }
.btn.danger { background: #fbe4e4; color: var(--danger); }
.btn.ok { background: #e1f5ea; color: var(--ok); }
.btn.wide { width: 100%; }
.btn.sm { padding: 5px 10px; font-size: 12px; }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.toolbar .spacer { flex: 1; }

/* Forms */
input, select, textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; background: #fff; color: var(--ink); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); border-color: transparent; }
label { display: block; font-size: 12.5px; color: var(--muted); margin: 2px 0 4px; font-weight: 600; }
.field { margin-bottom: 12px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

/* Modal */
.modal { position: fixed; inset: 0; background: rgba(40,25,15,.45); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 20px; }
.modal-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); width: min(90vw, 700px); max-width: 100%; height: 100%; max-height: calc(100vh - 40px); display: flex; flex-direction: column; overflow: hidden; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.modal-head h3 { margin: 0; }
#modal-body { padding: 20px; flex: 1; min-height: 0; overflow-y: auto; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* Agenda */
.agenda-grid { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.slot-list { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; min-width: 300px; flex: 1; }
.slot-row { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 8px; }
.slot-row.free { color: var(--ok); }
.slot-row.taken { color: var(--ink); background: #fdf6f2; }
.slot-time { font-weight: 700; min-width: 52px; }
.slot-status { font-size: 12px; color: var(--muted); }
.month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.month-day { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px; font-size: 12px; min-height: 70px; }
.month-day .dnum { font-weight: 800; font-size: 13px; }
.month-day.closed { opacity: .5; }
.month-day .busy { color: var(--accent); font-weight: 600; }
.free-slot-chip { background: #e1f5ea; color: var(--ok); }

/* Misc */
.alerts-ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.empty { color: var(--muted); text-align: center; padding: 30px 0; font-size: 14px; }
.pill-log { font-family: ui-monospace, monospace; font-size: 12.5px; }
.group-title { margin-bottom: 6px; font-weight: 700; }

/* CM Studio visual system: keeps the existing DOM and behavior, but gives the
   operational panel a calmer premium studio identity and mobile-first layout. */
:root {
  --bg: #f8f5f2;
  --card: #fffdfb;
  --ink: #322624;
  --muted: #8b7770;
  --accent: #c85b78;
  --accent-dark: #a84461;
  --line: #eadeda;
  --soft-accent: #f8e8ed;
  --shadow: 0 12px 32px rgba(75, 42, 35, .07);
  --shadow-hover: 0 16px 36px rgba(75, 42, 35, .12);
  --sidebar: #291d1b;
}
html { background: var(--bg); }
body { min-width: 320px; background: radial-gradient(circle at 88% -10%, #fcebed 0, transparent 28rem), var(--bg); color: var(--ink); }
button, input, select, textarea { font: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(200, 91, 120, .24); outline-offset: 2px; }
.app { min-height: 100dvh; }
.sidebar { width: 248px; padding: 26px 16px 18px; background: linear-gradient(180deg, #30201f, var(--sidebar)); box-shadow: 12px 0 30px rgba(38, 23, 19, .08); z-index: 20; }
.sidebar .brand { display: flex; align-items: center; gap: 10px; padding: 0 10px 34px; color: #fff8f5; font-size: 17px; letter-spacing: .16em; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.35); border-radius: 11px; color: #fff; font-size: 11px; letter-spacing: 0; }
.sidebar nav { gap: 6px; }
.sidebar nav button { position: relative; padding: 12px 13px; border-radius: 12px; color: #cdbbb5; transition: background .2s, color .2s, transform .2s; }
.sidebar nav button:hover { background: rgba(255,255,255,.08); color: #fff; transform: translateX(2px); }
.sidebar nav button.active { background: linear-gradient(100deg, var(--accent), #d97691); box-shadow: 0 8px 18px rgba(200,91,120,.2); }
.sidebar-foot { border-top-color: rgba(255,255,255,.12); }
.sidebar-foot .btn.ghost { border-color: rgba(255,255,255,.14); color: #d7c6c0; }
.content { width: min(100%, 1380px); max-width: none; padding: 34px clamp(22px, 4vw, 58px) 56px; }
.topbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 28px; }
.topbar h1 { margin: 0; font-size: clamp(25px, 3vw, 34px); letter-spacing: -.04em; }
.eyebrow { margin: 0 0 7px; color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow span { color: var(--muted); font-weight: 600; }
.topbar-status { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,253,251,.72); color: var(--muted); font-size: 12px; font-weight: 650; white-space: nowrap; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px #e5f5eb; }
.card, .slot-list { border: 1px solid rgba(234,222,218,.8); box-shadow: var(--shadow); transition: box-shadow .2s, transform .2s; }
.card:hover { box-shadow: var(--shadow-hover); }
.card h3 { color: var(--muted); font-size: 11px; letter-spacing: .12em; }
.stat { margin-top: 2px; font-size: clamp(30px, 3vw, 38px); letter-spacing: -.05em; }
.grid { gap: 18px; }
.grid[style*="margin-top"] { margin-top: 18px !important; }
.btn { min-height: 40px; border-radius: 11px; transition: background .2s, border-color .2s, transform .2s, box-shadow .2s; }
.btn:hover { transform: translateY(-1px); }
.btn.primary { background: linear-gradient(110deg, var(--accent), #d87390); box-shadow: 0 7px 16px rgba(200,91,120,.18); }
.btn.primary:hover { background: var(--accent-dark); box-shadow: 0 9px 20px rgba(168,68,97,.2); }
.btn.ghost { background: #fffaf8; }
input, select, textarea { min-height: 42px; border-color: var(--line); background: #fffdfb; }
label { letter-spacing: .01em; }
table { font-size: 13.5px; }
th, td { padding: 13px 12px; }
th { font-size: 10.5px; letter-spacing: .1em; }
tbody tr { transition: background .16s; }
tr.clickable:hover, tbody tr:hover { background: #fff8f6; }
.slot-row { min-height: 42px; padding: 8px 10px; }
.slot-row.taken { background: #fff8f6; }
.month-day { min-height: 82px; padding: 10px; transition: border-color .2s, transform .2s; }
.month-day:hover { border-color: var(--accent); transform: translateY(-2px); }
.modal { padding: 20px; backdrop-filter: blur(4px); }
.modal-card { border: 1px solid var(--line); box-shadow: 0 24px 70px rgba(50, 27, 22, .2); }
.modal-head { padding: 18px 22px; }
.modal-head h3 { color: var(--ink); font-size: 17px; text-transform: none; letter-spacing: -.02em; }
#modal-body { padding: 22px; flex: 1; min-height: 0; overflow-y: auto; }
.modal-actions { align-items: center; }
.login-wrap { background: radial-gradient(circle at 50% 0, #fce4ea 0, transparent 30rem), var(--bg); }
.login-card { width: min(390px, 100%); padding: 42px; border: 1px solid var(--line); box-shadow: 0 24px 70px rgba(75, 42, 35, .12); }
.login-logo { letter-spacing: .08em; }
.login-logo span { letter-spacing: .12em; }
.sidebar-toggle { display: none; }

@media (max-width: 900px) {
  .sidebar { width: 218px; }
  .content { padding-inline: 24px; }
  .grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.cols-2 { grid-template-columns: 1fr; }
  .agenda-grid { flex-direction: column; }
  .agenda-grid > .card { width: 100%; }
}

@media (max-width: 680px) {
  body { background: var(--bg); }
  .app { display: block; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: min(82vw, 290px); transform: translateX(-105%); transition: transform .25s ease; box-shadow: 18px 0 40px rgba(31, 18, 15, .22); }
  .sidebar::after { content: ''; position: fixed; inset: 0 -100vw 0 100%; background: rgba(35, 23, 20, .35); opacity: 0; pointer-events: none; transition: opacity .25s; }
  .sidebar-open .sidebar { transform: translateX(0); }
  .sidebar-open .sidebar::after { opacity: 1; pointer-events: auto; }
  .sidebar-toggle { position: fixed; top: 18px; left: 18px; z-index: 30; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); font-size: 0; box-shadow: var(--shadow); cursor: pointer; }
  .sidebar-toggle::after { content: '☰'; font-size: 18px; }
  .content { padding: 82px 16px 32px; }
  .topbar { align-items: flex-start; margin-bottom: 22px; padding-left: 58px; }
  .topbar-status { padding: 8px; font-size: 0; }
  .topbar-status .status-dot { margin: 0 2px; }
  .eyebrow { font-size: 9px; }
  .topbar h1 { font-size: 27px; }
  .grid.cols-4 { gap: 10px; }
  .grid.cols-4 .card { padding: 14px; }
  .card { padding: 16px; border-radius: 13px; }
  .stat { font-size: 29px; }
  .toolbar { gap: 8px; }
  .toolbar .spacer { display: none; }
  .toolbar > input[type="search"] { flex: 1 1 100%; }
  .toolbar > .btn.primary { flex: 1; }
  .agenda-grid { gap: 12px; }
  .month-grid { gap: 4px; overflow-x: auto; }
  .month-day { min-width: 72px; min-height: 68px; padding: 7px; font-size: 11px; }
  .month-day .busy, .month-day .free-slot-chip { font-size: 10px; }
  .card:has(table) { overflow-x: auto; padding: 9px; }
  table { min-width: 610px; }
  #tab-clients .card, #tab-procedures .card, #tab-promotions .card, #tab-events .card, #tab-blocks .card, #tab-logs .card { overflow-x: auto; }
  .form-row, .form-row-3 { grid-template-columns: 1fr; gap: 0; }
  .modal { align-items: flex-end; padding: 0; }
  .modal-card { width: 100%; max-height: calc(100dvh - 20px); border-radius: 20px 20px 0 0; border-bottom: 0; display: flex; flex-direction: column; overflow: hidden; }
  .modal-head { padding: 16px 18px; }
  #modal-body { padding: 18px; flex: 1; min-height: 0; overflow-y: auto; }
  .modal-actions { position: sticky; bottom: -18px; margin-inline: -18px; padding: 14px 18px 18px; background: linear-gradient(transparent, var(--card) 22%); display: flex; flex-wrap: wrap; gap: 8px; }
  .modal-actions .btn { flex: 1 1 calc(50% - 4px); min-height: 44px; font-size: 14px; }
  .slot-row[style*="cursor:pointer"]:active { background: #f0e0e6; }
  .card { padding: 13px; }
  .content { padding: 72px 14px 26px; }
  .btn { min-height: 44px; padding: 10px 14px; font-size: 14px; }
}

@media (max-width: 400px) {
  .grid.cols-4 { grid-template-columns: 1fr 1fr; }
  .grid.cols-4 .card h3 { min-height: 28px; }
  .slot-row { gap: 5px; font-size: 12px; }
  .slot-time { min-width: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.card-head h3 { margin-bottom: 0; }
#ag-free { display: grid; grid-template-columns: repeat(auto-fit, minmax(82px, 1fr)); gap: 5px; }
#ag-free .slot-row { min-height: 34px; justify-content: center; padding: 5px 6px; background: #f0faf4; border: 1px solid #d9f0e2; font-size: 12px; }
#ag-free .slot-time { min-width: 0; }
.table-scroll { overflow-x: auto; }
.all-appointments-table { width: 100%; }
@media (max-width: 680px) {
  .card-head { align-items: flex-start; }
  .card-head .btn { flex: 0 0 auto; font-size: 11px; }
  #ag-free { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Agendamentos: tabela vira cards empilhados no celular (igual Mensagens do Bot) */
  .all-appointments-table, .all-appointments-table thead, .all-appointments-table tbody,
  .all-appointments-table th, .all-appointments-table td, .all-appointments-table tr { display: block; }
  .all-appointments-table { min-width: 0; width: 100%; }
  .all-appointments-table thead { display: none; }
  .all-appointments-table tr { margin-bottom: 8px; border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; background: var(--card); }
  .all-appointments-table tr:last-child { margin-bottom: 0; }
  .all-appointments-table td { border: 0; padding: 3px 2px; }
  .all-appointments-table td::before { content: attr(data-h); display: block; font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }
  .table-scroll { overflow: visible; }
}

/* ---------- Cards de planos (Combos / Pacotes) ---------- */
.plan-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px; box-shadow: var(--shadow); transition: box-shadow .2s, opacity .2s; }
.plan-card:hover { box-shadow: var(--shadow-hover); }
.plan-card.inactive { opacity: .6; border-color: rgba(234,222,218,.5); background: #faf7f5; }
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.plan-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.plan-title b { font-size: 15px; }
.plan-sep { color: var(--muted); margin: 0 2px; }
.plan-summary { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; }
.plan-body { display: flex; flex-direction: column; gap: 6px; border-top: 1px dashed var(--line); padding-top: 10px; }
.plan-item { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.plan-item .plan-qty { color: var(--muted); font-size: 12px; min-width: 28px; }
.plan-badges { display: flex; gap: 4px; flex-wrap: wrap; margin-left: 4px; }
.plan-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.plan-foot .spacer { flex: 1; }

/* ---------- Linhas dinâmicas de procedimento (novo combo / pacote) ---------- */
.proc-lines { display: flex; flex-direction: column; gap: 6px; }
.proc-line { display: flex; align-items: center; gap: 6px; }
.proc-line select { flex: 1; }
.proc-line .pl-del { flex: 0 0 auto; }

@media (max-width: 680px) {
  .plan-foot { justify-content: flex-end; }
  .plan-head { flex-direction: column; align-items: flex-start; }
  .proc-line { flex-wrap: wrap; }
  .proc-line select { flex: 1 1 100%; }
}

/* ---------- Barra de filtros da seção Pacotes ---------- */
.pkg-filterbar { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.pkg-filterbar > .field { display: flex; flex-direction: column; gap: 4px; min-width: 200px; margin-bottom: 0; }
.pkg-filterbar > .field label { font-size: 12px; color: var(--muted); }
.pkg-show { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12.5px; margin: 0 0 2px; white-space: nowrap; }
.pkg-show input[type="checkbox"] { width: 15px; height: 15px; margin: 0; accent-color: var(--primary, #7c3aed); cursor: pointer; }
.force-opt { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12.5px; margin: 2px 0 12px; white-space: nowrap; }
.force-opt input[type="checkbox"] { width: 15px; height: 15px; margin: 0; accent-color: var(--primary, #7c3aed); cursor: pointer; }
@media (max-width: 480px) {
  .pkg-filterbar { align-items: flex-start; flex-direction: column; gap: 8px; }
  .pkg-filterbar > .field { width: 100%; }
}

/* ---------- Expediente padrão: 2 turnos compactos (quebra por grupo, não input solto) ---------- */
.card:has(.sch-start) .slot-row.exp-row { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 6px; padding: 4px 4px; }
.card:has(.sch-start) .slot-row .slot-time { font-size: 12.5px; min-width: 0; white-space: nowrap; }
.card:has(.sch-start) .exp-turn { display: flex; align-items: center; gap: 4px; min-width: 0; }
.card:has(.sch-start) .exp-turn input[type="time"] { width: auto; flex: 1 1 72px; min-width: 72px; min-height: 0; padding: 5px 5px; font-size: 12px; }
.card:has(.sch-start) .exp-turn select.sch-open { width: auto; flex: 0 0 auto; min-width: 56px; padding: 5px 6px; font-size: 12px; }
.card:has(.sch-start) .exp-turn2 { justify-self: end; }
@media (max-width: 900px) {
  .card:has(.sch-start) .slot-row.exp-row { grid-template-columns: auto 1fr; }
  .card:has(.sch-start) .exp-turn2 { grid-column: 2; justify-self: stretch; }
}
@media (max-width: 460px) {
  .card:has(.sch-start) .slot-row.exp-row { grid-template-columns: 1fr; gap: 3px; }
  .card:has(.sch-start) .exp-turn2 { grid-column: 1; }
}
@media (max-width: 380px) {
  .card:has(.sch-start) .exp-turn { flex-wrap: wrap; }
}

/* ---------- Compactação global (site todo) ---------- */
.content { padding: 22px clamp(16px, 3vw, 34px) 36px; }
.topbar { margin-bottom: 18px; }
.topbar h1 { font-size: clamp(22px, 2.6vw, 30px); }
.card { padding: 14px 16px; }
.grid { gap: 14px; }
input, select, textarea { padding: 8px 10px; min-height: 36px; font-size: 13.5px; border-radius: 8px; }
.btn { min-height: 34px; padding: 7px 12px; font-size: 13px; }
.btn.sm { padding: 4px 8px; font-size: 11.5px; }
th, td { padding: 9px 10px; font-size: 13px; }
th { font-size: 10px; }
.modal-head { padding: 14px 18px; }
#modal-body { padding: 18px; flex: 1; min-height: 0; overflow-y: auto; }
.sidebar { padding: 20px 14px 14px; }
.sidebar nav button { padding: 9px 12px; font-size: 13.5px; }
.agenda-grid > .slot-list { padding: 12px 14px; }
.month-day { min-height: 70px; padding: 8px; }

/* ---------- Dashboard mobile (compacto, sem estourar) ---------- */
@media (max-width: 560px) {
  #tab-dashboard .grid.cols-4 { grid-template-columns: 1fr 1fr; gap: 8px; }
  #tab-dashboard .grid.cols-4 .card { padding: 10px 12px; }
  #tab-dashboard .stat { font-size: 22px; }
  #tab-dashboard .card h3 { font-size: 10px; margin-bottom: 6px; }
  #tab-dashboard .card-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  #tab-dashboard .card-head .btn.sm { align-self: flex-start; }
  #tab-dashboard .slot-row { flex-wrap: wrap; gap: 4px 8px; padding: 10px 6px; border-radius: 8px; min-height: 44px; }
  #tab-dashboard .slot-row .slot-time { min-width: 0; flex: 0 0 auto; }
  #tab-dashboard .slot-row b { flex: 1 1 auto; min-width: 0; }
  #tab-dashboard .slot-row .badge { margin-left: auto; }
  #tab-dashboard .grid.cols-2 { grid-template-columns: 1fr; }
  #tab-dashboard .alerts-ul li { font-size: 12.5px; }
  #tab-dashboard .slot-row[style*="cursor:pointer"]:active { background: #f0e0e6; transform: scale(0.98); }
}

/* ---------- Mensagens do Bot ---------- */
.pill-bm { font-family: ui-monospace, monospace; font-size: 12.5px; white-space: nowrap; }
.bm-content { white-space: pre-wrap; max-width: 520px; word-break: break-word; line-height: 1.4; }
.badge.privado, .badge.automatico { background: #e3eefb; color: #2a6ab0; }
.badge.grupo { background: #fdeee0; color: #c2701a; }
#tab-botmsgs .pkg-filterbar input { flex: 1 1 240px; min-width: 160px; }
@media (max-width: 560px) {
  #tab-botmsgs table, #tab-botmsgs thead, #tab-botmsgs tbody, #tab-botmsgs th, #tab-botmsgs td, #tab-botmsgs tr { display: block; }
  #tab-botmsgs thead { display: none; }
  #tab-botmsgs tr { margin-bottom: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
  #tab-botmsgs td { border: 0; padding: 3px 0; }
  #tab-botmsgs td::before { content: attr(data-h); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; display: block; }
  #tab-botmsgs .bm-content { max-width: none; white-space: pre-wrap; }
  #tab-botmsgs .pill-bm { white-space: normal; }
}

/* ---------- Paginação Mensagens do Bot ---------- */
.bm-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.bm-pager .btn { padding: 5px 14px; font-size: 13px; }
.bm-pager .btn:disabled { opacity: .4; cursor: not-allowed; }
.bm-pager-info { font-size: 13px; color: var(--muted); }


/* =====================================================================
   VISUAL V2 (2026-10-09) -- "caderno de horarios"
   Estudio de unhas/estetica; quem usa e' a Camila, no celular, entre um
   atendimento e outro. Um elemento memoravel: a Agenda alinhada a semana
   com barra de ocupacao por dia. O resto calmo: sem rotulo em CAIXA ALTA,
   sem cartao que "levanta", sem degrade radial; numeros tabulares.
   ===================================================================== */
:root {
  --bg: #faf6f5;
  --card: #ffffff;
  --ink: #2b1d1c;
  --muted: #7d6a66;
  --accent: #b8476a;
  --accent-dark: #9a3756;
  --soft-accent: #f7e9ee;
  --line: #eee3e0;
  --ok: #2f7d5b;
  --warn: #a86a12;
  --danger: #b83a3a;
  --sidebar: #2b1d1c;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(43, 29, 28, .04);
  --shadow-hover: 0 1px 2px rgba(43, 29, 28, .04);
}
body { font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); }
.login-wrap { background: var(--bg); }
.stat, td, .slot-time, .pill-log, .badge { font-variant-numeric: tabular-nums; }

/* superficies planas: borda fina, sem sombra pesada nem "levantar" */
.card, .slot-list, .plan-card { border: 1px solid var(--line); box-shadow: var(--shadow); }
.card:hover, .plan-card:hover { box-shadow: var(--shadow); }
.btn:hover, .sidebar nav button:hover, .month-day:hover { transform: none; }
.btn.primary { background: var(--accent); box-shadow: none; }
.btn.primary:hover { background: var(--accent-dark); box-shadow: none; }
.btn.ghost { background: var(--card); border-color: var(--line); }
.btn.ghost:hover { border-color: #dccbc6; }

/* titulos em caixa normal: o peso esta no texto, nao no enfeite */
.card h3 { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 700; color: var(--ink); }
th { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 600; color: var(--muted); }
label { font-weight: 600; letter-spacing: 0; }
.eyebrow { letter-spacing: .06em; font-size: 10.5px; }
.topbar h1 { letter-spacing: -.02em; font-weight: 800; }
.stat { font-weight: 800; letter-spacing: -.03em; }
.stat.accent { color: var(--accent); }
.stat.ok { color: var(--ok); }

/* barra lateral: cafe chapado, item ativo rosa sem degrade */
.sidebar { background: var(--sidebar); box-shadow: none; }
.sidebar nav button.active { background: var(--accent); box-shadow: none; }
.sidebar nav button { color: #d8c8c3; }
/* "Sair" estava quase invisivel (texto claro em fundo claro) */
.sidebar-foot .btn.ghost, #logout-btn { background: transparent; color: #f1e4e0; border: 1px solid rgba(255,255,255,.22); }
.sidebar-foot .btn.ghost:hover, #logout-btn:hover { background: rgba(255,255,255,.08); }

/* badges: tons suaves, texto legivel */
.badge { font-weight: 600; font-size: 11.5px; padding: 3px 9px; }
.badge.CONFIRMADO { background: #e6f2ec; color: var(--ok); }
.badge.AGUARDANDO_CONFIRMACAO { background: #fbf1df; color: var(--warn); }
.badge.SOLICITADO, .badge.AGUARDANDO_APROVACAO, .badge.AGUARDANDO_PAGAMENTO { background: #fbecdf; color: #a35a12; }
.badge.CANCELADO { background: #f8e6e6; color: var(--danger); }
.badge.CONCLUIDO { background: #e8eef7; color: #33598a; }

/* ---------- Agenda: o elemento memoravel ---------- */
.ag-bar { align-items: center; }
.ag-nav { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.ag-nav input[type="date"] { width: auto; min-width: 150px; }
.ag-nav .btn { min-width: 38px; }
.ag-dow { font-weight: 700; color: var(--ink); margin: 0 4px 0 6px; white-space: nowrap; }
.card-head h3 { text-transform: none; }

.mes-legenda { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.mes-legenda i { display: inline-block; width: 10px; height: 6px; border-radius: 3px; }
.mes-legenda .lg-ocup { background: var(--accent); }
.mes-legenda .lg-livre { background: #eadcd8; margin-left: 6px; }
.month-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 4px 0 6px;
  font-size: 12px; font-weight: 700; color: var(--muted); text-align: center; }
.month-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; overflow: visible; }
.month-pad { min-height: 1px; }
.month-day { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left;
  min-height: 74px; min-width: 0; padding: 8px 9px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--ink); font: inherit; cursor: pointer; transition: border-color .15s, background .15s; }
.month-day:hover { border-color: var(--accent); }
.month-day .dnum { font-size: 14px; font-weight: 800; }
.month-day .ocup { display: block; width: 100%; height: 5px; border-radius: 3px; background: #eadcd8; overflow: hidden; }
.month-day .ocup i { display: block; height: 100%; background: var(--accent); }
.month-day .mtxt { font-size: 11px; color: var(--muted); line-height: 1.25; }
.month-day .mtxt b { color: var(--accent); }
.month-day.closed { opacity: 1; background: #f6f0ee; border-style: dashed; }
.month-day.closed .dnum { color: var(--muted); }
.month-day.hoje .dnum { color: #fff; background: var(--accent); border-radius: 6px; padding: 0 6px; }
.month-day.sel { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--soft-accent); }
#ag-free .slot-row { background: #eef6f1; border-color: #d6eadf; }
.slot-row.taken { background: #fbf5f4; }

/* ---------- Mensagens do Bot: a busca virava uma caixa de ~200px no celular ---------- */
#bm-q { min-height: 36px; height: auto; }
@media (max-width: 480px) { #tab-botmsgs .pkg-filterbar input { flex: 0 0 auto; width: 100%; } }
.bm-content { max-width: 560px; }

/* ---------- Configuracoes: horarios do expediente nao espremem no desktop ---------- */
@media (min-width: 901px) {
  /* o expediente (dia + aberto/fechado + 4 horarios) ocupa a linha toda;
     Regras e Manutencao ficam lado a lado embaixo */
  .grid:has(.sch-start) > .card:has(.sch-start) { grid-column: 1 / -1; }
  .card:has(.sch-start) .slot-row.exp-row { grid-template-columns: 110px minmax(0, 360px) minmax(0, 260px); justify-content: start; gap: 14px; }
  .card:has(.sch-start) .exp-turn2 { justify-self: start; }
  .card:has(.sch-start) .exp-turn input[type="time"] { flex: 0 0 110px; }
}

/* ---------- Celular: toda tabela vira pilha de cartoes (data-h vem do app.js) ---------- */
@media (max-width: 680px) {
  table.auto-cards { min-width: 0 !important; }
  table.auto-cards, table.auto-cards tbody, table.auto-cards tr, table.auto-cards td { display: block; width: 100%; }
  table.auto-cards thead { display: none; }
  table.auto-cards tr { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin-bottom: 8px; background: var(--card); }
  table.auto-cards td { border: 0; padding: 3px 0; white-space: normal; }
  table.auto-cards td[data-h]::before { content: attr(data-h); display: block; font-size: 11px; font-weight: 600;
    color: var(--muted); text-transform: none; letter-spacing: 0; }
  table.auto-cards td:first-child { font-size: 15px; }
  table.auto-cards td.actions, table.auto-cards td:last-child:has(.btn) { padding-top: 6px; }
  table.auto-cards td.actions::before, table.auto-cards td:has(> .btn:only-child)::before { display: none; }
  table.auto-cards td.empty, table.auto-cards td[colspan] { text-align: center; }
  table.auto-cards td[colspan]::before { display: none; }
  .card:has(table.auto-cards), #tab-clients .card, #tab-procedures .card, #tab-promotions .card,
  #tab-events .card, #tab-blocks .card, #tab-logs .card { overflow-x: visible; padding: 12px; }

  /* agenda no celular: barra de data numa linha, calendario sem rolar de lado */
  .ag-bar { flex-direction: column; align-items: stretch; }
  .ag-nav { width: 100%; }
  .ag-nav input[type="date"] { flex: 1; min-width: 0; }
  .ag-nav #ag-today { flex: 0 0 auto; }
  .ag-dow { display: none; }
  .month-week, .month-grid { gap: 3px; }
  .month-day { min-width: 0; min-height: 52px; padding: 5px 4px; gap: 4px; border-radius: 8px; }
  .month-day .dnum { font-size: 12.5px; }
  .month-day .mtxt { display: none; }
  .mes-legenda { display: none; }
}

/* rotulos das Mensagens do Bot no mesmo padrao das outras tabelas */
@media (max-width: 560px) {
  #tab-botmsgs td::before { text-transform: none; letter-spacing: 0; font-weight: 600; }
}

/* =====================================================================
   V3 "NUDE ELEGANTE" (2026-10-09) -- pedido do Edson: cores nude, lateral
   clara, mais compacto e dashboard com vida. Este bloco vence o V2.
   ===================================================================== */
:root {
  --bg: #f7f1ee;
  --card: #ffffff;
  --ink: #33262a;
  --muted: #8a7479;
  --accent: #a8566f;
  --accent-dark: #8d4259;
  --soft-accent: #f6e8ec;
  --gold: #c9a27e;
  --gold-soft: #f4ebe1;
  --line: #ecdfdb;
  --ok: #4f7f63;
  --warn: #a7741f;
  --danger: #b04a4a;
  --sidebar: #ffffff;
  --radius: 12px;
}
body, .login-wrap { background: var(--bg); color: var(--ink); }

/* ---- lateral clara, borda fina; ativo em rose com marcador dourado ---- */
.sidebar { background: var(--sidebar); color: var(--ink); border-right: 1px solid var(--line); box-shadow: none; padding: 18px 12px 14px; }
.sidebar .brand { color: var(--ink); padding: 0 8px 22px; }
.brand-mark { border-color: var(--gold); color: var(--accent); background: var(--gold-soft); }
.sidebar nav { gap: 2px; }
.sidebar nav button { color: #6f5a60; padding: 8px 12px; font-size: 13.5px; font-weight: 500; border-radius: 9px; }
.sidebar nav button:hover { background: #faf4f2; color: var(--ink); }
.sidebar nav button.active { background: var(--soft-accent); color: var(--accent-dark); font-weight: 700; box-shadow: inset 3px 0 0 var(--gold); }
.sidebar-foot { border-top-color: var(--line); }
.sidebar-foot .btn.ghost, #logout-btn { background: transparent; color: var(--muted); border: 1px solid var(--line); }
.sidebar-foot .btn.ghost:hover, #logout-btn:hover { background: #faf4f2; color: var(--ink); }
.sidebar-toggle { background: var(--card); }

/* ---- topo e ritmo mais compactos ---- */
.content { padding: 18px clamp(14px, 2.6vw, 30px) 30px; }
.topbar { margin-bottom: 14px; }
.topbar h1 { font-size: clamp(21px, 2.2vw, 26px); }
.eyebrow { color: var(--gold); }
.eyebrow span { color: var(--muted); }
.topbar-status { padding: 6px 11px; background: var(--card); }
.card { padding: 13px 15px; border-radius: var(--radius); }
.card h3 { font-size: 13.5px; margin: 0 0 10px; }
.card-head { margin-bottom: 8px; }
.grid { gap: 12px; }
th, td { padding: 8px 10px; }
.btn.primary { background: var(--accent); }
.btn.primary:hover { background: var(--accent-dark); }
.btn.ghost { color: var(--ink); }
input:focus, select:focus, textarea:focus { outline-color: rgba(168, 86, 111, .35); }
.badge.CONFIRMADO { background: #e9f1ec; color: var(--ok); }
.badge.AGUARDANDO_CONFIRMACAO { background: var(--gold-soft); color: var(--warn); }
.badge.CANCELADO { background: #f7e7e7; color: var(--danger); }
.month-day.hoje .dnum { background: var(--accent); }
.month-day .ocup i, .mes-legenda .lg-ocup { background: var(--accent); }
.month-day .ocup, .mes-legenda .lg-livre { background: #efe3df; }
#ag-free .slot-row { background: #f1f6f2; border-color: #dfeae2; color: var(--ok); }

/* ---- dashboard v3 ---- */
#tab-dashboard .kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
#tab-dashboard .kpi { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; min-width: 0; }
#tab-dashboard .kpi-l { display: block; font-size: 11.5px; color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tab-dashboard .kpi-v { display: block; font-size: 21px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tab-dashboard .kpi-s { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tab-dashboard .kpi.destaque .kpi-v { color: var(--accent); }
#tab-dashboard .kpi.ok .kpi-v { color: var(--ok); }
.dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dash-grid .card { min-width: 0; }
.vazio-curto { color: var(--muted); font-size: 13px; padding: 4px 0 8px; }
.sub-t { font-size: 12px; font-weight: 700; color: var(--muted); margin: 10px 0 6px; }
.sub-t:first-child { margin-top: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip { font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 999px; background: #f1f6f2; color: var(--ok); border: 1px solid #dfeae2; font-variant-numeric: tabular-nums; }
.ag-item { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px solid #f3eae7; cursor: pointer; border-radius: 6px; }
.ag-item:last-child { border-bottom: 0; }
.ag-item:hover { background: #fbf6f4; }
.ag-hora { font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; line-height: 1.15; }
.ag-hora small { display: block; font-weight: 500; color: var(--muted); font-size: 11px; }
.ag-quem { min-width: 0; line-height: 1.2; }
.ag-quem b { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-quem small { display: block; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-sem, .mini-mes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.mini-sem span { text-align: center; font-size: 11px; font-weight: 700; color: var(--muted); padding-bottom: 2px; }
.mini-dia { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 2px 6px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); font: inherit; font-size: 12px; font-weight: 600; color: var(--ink); cursor: pointer; }
.mini-dia:hover { border-color: var(--accent); }
.mini-dia i { display: block; width: 70%; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--accent) var(--p), #efe3df var(--p)); }
.mini-dia.fechado { background: #f6efec; color: var(--muted); border-style: dashed; }
.mini-dia.hoje { border-color: var(--accent); background: var(--soft-accent); color: var(--accent-dark); }

@media (max-width: 1100px) { #tab-dashboard .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .dash-grid { grid-template-columns: 1fr; }
  #tab-dashboard .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  #tab-dashboard .kpi-v { font-size: 18px; }
}
@media (max-width: 680px) {
  .sidebar { box-shadow: 18px 0 40px rgba(51, 38, 42, .12); }
  .content { padding: 72px 12px 24px; }
  .card { padding: 11px 12px; }
  .ag-item { grid-template-columns: 46px minmax(0, 1fr) auto; gap: 8px; }
  .ag-item .badge { font-size: 10.5px; padding: 2px 7px; }
}
@media (max-width: 560px) {
  #tab-dashboard .card-head { flex-direction: row; align-items: center; gap: 8px; }
  #tab-dashboard .card h3 { font-size: 13px; margin-bottom: 8px; }
  #tab-dashboard .card-head h3 { margin-bottom: 0; }
}

/* cartoes do celular compactos: rotulo e valor na MESMA linha; o 1o campo
   (nome/protocolo) e' o titulo do cartao, sem rotulo */
@media (max-width: 680px) {
  table.auto-cards tr { padding: 7px 11px; margin-bottom: 6px; }
  table.auto-cards td[data-h] { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 2px 0; text-align: right; }
  table.auto-cards td[data-h]::before { display: inline; flex: 0 0 auto; font-size: 11.5px; text-align: left; }
  table.auto-cards td:first-child { display: block; text-align: left; font-size: 15px; font-weight: 700; padding-bottom: 4px; }
  table.auto-cards td:first-child::before { display: none; }
  table.auto-cards td.actions, table.auto-cards td:has(> .btn) { justify-content: flex-start; gap: 6px; text-align: left; padding-top: 6px; }
  table.auto-cards td.actions::before, table.auto-cards td:has(> .btn)::before { display: none; }
  table.auto-cards td.bm-content { display: block; text-align: left; }
  table.auto-cards td.bm-content::before { display: block; }
}

/* ---------- v2 financeiro + FALTOU (2026-10-20) ---------- */
.badge.FALTOU { background: #f8e6e6; color: var(--danger); }
#tab-finance .kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
#tab-finance .kpi { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; min-width: 0; }
#tab-finance .kpi-l { display: block; font-size: 11.5px; color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tab-finance .kpi-v { display: block; font-size: 21px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tab-finance .kpi.destaque .kpi-v { color: var(--accent); }
#tab-finance .kpi.ok .kpi-v { color: var(--ok); }
#tab-finance .kpi.warn .kpi-v { color: var(--warn); }
#tab-finance .field-inline { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); font-weight: 600; }
.fin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
td.venc { color: var(--danger); font-weight: 700; }
.parcela-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 5px 0; border-bottom: 1px dashed var(--line); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.parcela-row:last-of-type { border-bottom: 0; }
@media (max-width: 1100px) { #tab-finance .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  #tab-finance .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  #tab-finance .kpi-v { font-size: 18px; }
  .fin-grid { grid-template-columns: 1fr; }
}

/* Modal do agendamento: Finalizar fica junto do pagamento, longe de Confirmar */
.ap-finish { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.ap-finish .btn { width: 100%; min-height: 44px; }