/* Usina Fácil — application stylesheet.
 *
 * Same architecture as lr-express/work/site/assets/app.css: hand-written, no
 * CDN, no build step, CSS custom properties, mobile-first with the media query
 * adding the desktop layout. Different palette, because this is a different
 * product.
 */
:root {
  --solar:       #f59e0b;
  --solar-dark:  #d97706;
  --solar-50:    #fffbeb;
  --solar-200:   #fde68a;
  --verde:       #16a34a;
  --verde-dark:  #15803d;
  --verde-50:    #f0fdf4;
  --verde-200:   #bbf7d0;
  --navy:        #0f172a;
  --navy-soft:   #1e293b;
  --red:         #dc2626;
  --red-50:      #fef2f2;
  --grey-50:     #f8fafc;
  --grey-100:    #f1f5f9;
  --grey-200:    #e2e8f0;
  --grey-400:    #94a3b8;
  --grey-600:    #475569;
  --grey-800:    #1e293b;
  --radius:      12px;
  --tap:         44px;   /* minimum comfortable touch target */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;              /* < 16px makes iOS zoom on focus */
  line-height: 1.5;
  color: var(--grey-800);
  background: var(--grey-100);
  -webkit-text-size-adjust: 100%;
}

/* -- Layout ---------------------------------------------------------------- */

.wrap      { max-width: 640px;  margin: 0 auto; padding: 0 16px; }
.wrap-wide { max-width: 1120px; margin: 0 auto; padding: 0 16px; }

.card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(15, 23, 42, .07);
  padding: 20px;
  margin-bottom: 16px;
}

.row     { display: flex; flex-wrap: wrap; gap: 12px; }
.row > * { flex: 1 1 100%; }
.between { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; }
.stack > * + * { margin-top: 12px; }

/* Botões lado a lado. Existe porque `.row > *` estica todo filho a 100%: uma
   dupla Salvar/Cancelar dentro de .row empilhava, com o Cancelar em largura
   cheia logo abaixo do Salvar — do mesmo tamanho e igualmente convidativo. */
.acoes         { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.acoes > .btn  { flex: 0 0 auto; }

/* Gráficos. O SVG e' gerado no PHP (app/Grafico.php) e usa as variaveis de cor
   daqui, entao nao ha hexadecimal repetido nos dois lugares. */
.graf         { display: block; width: 100%; height: auto; min-width: 320px; }
.graf-fatias  { display: block; width: 100%; height: 26px; border-radius: 6px;
                overflow: hidden; background: var(--grey-100); }

h1 { font-size: 1.5rem;  line-height: 1.25; margin: 0 0 8px; color: var(--navy); letter-spacing: -.02em; }
h2 { font-size: 1.25rem; margin: 0 0 12px; color: var(--navy); letter-spacing: -.01em; }
h3 { font-size: 1rem;    margin: 0 0 6px;  color: var(--navy); }

p { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }

.muted  { color: var(--grey-600); font-size: .875rem; }
.tiny   { color: var(--grey-400); font-size: .75rem; }
.center { text-align: center; }
.num    { font-variant-numeric: tabular-nums; }

hr { border: 0; border-top: 1px solid var(--grey-200); margin: 20px 0; }

a { color: var(--solar-dark); }

/* -- Brand ----------------------------------------------------------------- */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--navy);
  text-decoration: none;
  letter-spacing: -.02em;
}
.brand svg   { flex: none; }
.brand .fac  { color: var(--solar-dark); }

/* -- Site header ----------------------------------------------------------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--grey-200);
}
.site-head .wrap-wide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 60px;
}
.site-nav { display: none; gap: 22px; }
.site-nav a {
  color: var(--grey-600);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 600;
}
.site-nav a:hover { color: var(--navy); }

/* -- Buttons --------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 10px 18px;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--navy);
  background: var(--solar);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
.btn:hover       { background: var(--solar-dark); color: #fff; }
.btn-block       { display: flex; width: 100%; }
.btn-green       { background: var(--verde); color: #fff; }
.btn-green:hover { background: var(--verde-dark); }
.btn-navy        { background: var(--navy); color: #fff; }
.btn-navy:hover  { background: var(--navy-soft); }
.btn-ghost       { background: #fff; color: var(--navy); border: 1px solid var(--grey-200); }
.btn-ghost:hover { background: var(--grey-50); color: var(--navy); }
.btn-danger      { background: #fff; color: var(--red); border: 1px solid #fecaca; }
.btn-danger:hover{ background: var(--red-50); color: var(--red); }
.btn-sm          { min-height: 38px; padding: 6px 14px; font-size: .875rem; }

/* -- Forms ----------------------------------------------------------------- */

label { display: block; font-weight: 600; margin-bottom: 6px; font-size: .9rem; color: var(--navy); }

input[type=text], input[type=password], input[type=email], input[type=tel],
input[type=date], input[type=number], select, textarea {
  width: 100%;
  min-height: var(--tap);
  padding: 10px 12px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--grey-800);
  background: #fff;
  border: 1px solid var(--grey-200);
  border-radius: 8px;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--solar);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, .25);
}
input[readonly] { background: var(--grey-100); color: var(--grey-600); }

.field       { margin-bottom: 14px; }
.field .hint { margin-top: 6px; }
.req         { color: var(--red); }

.radio-row { display: flex; flex-wrap: wrap; gap: 10px; }
.radio-opt {
  flex: 1 1 160px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  padding: 10px 14px;
  border: 1px solid var(--grey-200);
  border-radius: 10px;
  font-weight: 600;
  font-size: .925rem;
  cursor: pointer;
  background: #fff;
}
.radio-opt input { width: 20px; height: 20px; min-height: 0; flex: none; accent-color: var(--solar-dark); }
.radio-opt.on    { border-color: var(--solar); background: var(--solar-50); }

.pct-field { position: relative; }
.pct-field input { padding-right: 40px; font-weight: 700; }
.pct-field::after {
  content: '%';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  color: var(--grey-400);
  pointer-events: none;
}

/* -- Chips, badges, alerts ------------------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
}
.chip-soon   { background: var(--grey-100); color: var(--grey-600); }
.chip-sent   { background: var(--verde-50);  color: var(--verde-dark); border: 1px solid var(--verde-200); }
.chip-ready  { background: var(--solar-50);  color: var(--solar-dark); border: 1px solid var(--solar-200); }
.chip-wait   { background: var(--grey-100);  color: var(--grey-600);   border: 1px solid var(--grey-200); }
.chip-warn   { background: #fffbeb;          color: #b45309;           border: 1px solid var(--solar-200); }
.chip-usina  { background: var(--verde);     color: #fff; }
.chip-admin  { background: var(--navy);      color: var(--solar); }

.alert {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid;
  margin-bottom: 14px;
  font-size: .9rem;
}
.alert-info  { color: var(--grey-600);   background: var(--grey-50);  border-color: var(--grey-200); }
.alert-warn  { color: #b45309;           background: #fffbeb;         border-color: var(--solar-200); }
.alert-ok    { color: var(--verde-dark); background: var(--verde-50);  border-color: var(--verde-200); }

/* -- Landing: hero --------------------------------------------------------- */

.hero {
  background:
    radial-gradient(900px 380px at 78% -12%, rgba(245, 158, 11, .20), transparent 62%),
    linear-gradient(180deg, #fff 0%, var(--grey-100) 100%);
  padding: 40px 0 44px;
}
.hero-grid { display: grid; gap: 28px; }
.hero h1   { font-size: 2rem; }
.hero .lede { font-size: 1.05rem; color: var(--grey-600); margin-bottom: 20px; }
.hero-cta  { display: flex; flex-wrap: wrap; gap: 10px; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--solar-200);
  color: var(--solar-dark);
  font-size: .8rem;
  font-weight: 700;
}

.login-card { margin-bottom: 0; padding: 24px; }
.login-card h2 { margin-bottom: 4px; }

/* -- Landing: sections ----------------------------------------------------- */

section { padding: 44px 0; }
section.alt { background: #fff; }

.sec-head { max-width: 600px; margin-bottom: 24px; }
.sec-head p { color: var(--grey-600); }

.grid { display: grid; gap: 16px; }

.step .n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  margin-bottom: 12px;
  border-radius: 10px;
  background: var(--navy);
  color: var(--solar);
  font-weight: 800;
}

.swap { display: grid; gap: 10px; }
.swap li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--grey-50);
  border: 1px solid var(--grey-200);
  font-size: .95rem;
}
.swap ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.swap .mark { flex: none; font-weight: 800; }
.swap .no   { color: var(--red); }
.swap .yes  { color: var(--verde-dark); }

.soon-card { border: 1px dashed var(--grey-200); background: var(--grey-50); box-shadow: none; }
.soon-card h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.plan-card { border: 2px solid var(--solar); }
.price { font-size: 2rem; font-weight: 800; color: var(--navy); letter-spacing: -.02em; }
.plan-card ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; font-size: .925rem; }
.plan-card li::before { content: '✓ '; color: var(--verde-dark); font-weight: 800; }

.site-foot {
  background: var(--navy);
  color: var(--grey-400);
  padding: 28px 0;
  font-size: .85rem;
}
.site-foot a { color: var(--solar-200); }

/* -- App shell (logged in) ------------------------------------------------- */

.app-head {
  background: #fff;
  border-bottom: 1px solid var(--grey-200);
}
.app-head .wrap-wide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 62px;
}
.app-main { padding: 22px 0 48px; }

.menu { position: relative; display: inline-block; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::marker { content: ''; }
.menu-items {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 50;
  min-width: 230px;
  background: #fff;
  border: 1px solid var(--grey-200);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .16);
  overflow: hidden;
  text-align: left;
}
.menu-items a {
  display: block;
  padding: 11px 14px;
  color: var(--grey-800);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 600;
}
.menu-items a:hover { background: var(--grey-50); }
.menu-items a + a   { border-top: 1px solid var(--grey-200); }

@media (max-width: 639px) {
  .menu-items { right: auto; left: auto; min-width: min(260px, calc(100vw - 48px)); }
}

.crumb { display: inline-block; margin-bottom: 12px; font-size: .875rem; font-weight: 600; text-decoration: none; }

/* -- Summary tiles --------------------------------------------------------- */

/* -- Modal (aviso ao abrir a tela) ---------------------------------------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;                       /* acima do menu (50) e do header (40) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 23, 42, .45);
}
.modal-backdrop[hidden] { display: none; }
.modal {
  width: 100%;
  max-width: 460px;
  padding: 24px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .16);
}
.modal h2 { font-size: 1.2rem; }

/* -- Boas-vindas da demonstracao (ucs.php) --------------------------------- */

.dbv { max-width: 760px; padding: 0; overflow: hidden; max-height: 92vh; overflow-y: auto; }

.dbv-hero {
  position: relative;
  padding: 36px 36px 30px;
  color: #fff;
  background:
    radial-gradient(520px 260px at 92% -40%, rgba(245, 158, 11, .55), transparent 70%),
    radial-gradient(360px 220px at -10% 120%, rgba(22, 163, 74, .35), transparent 70%),
    linear-gradient(135deg, var(--navy) 0%, var(--navy-soft) 100%);
}
.dbv-hero::after {              /* a linha solar, como no e-mail e no PDF */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: linear-gradient(90deg, var(--solar), var(--solar-200), var(--verde));
}
.dbv-sun {
  width: 72px; height: 72px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 0 0 8px rgba(245, 158, 11, .12), 0 0 40px rgba(245, 158, 11, .35);
  margin-bottom: 18px;
}
.dbv-eyebrow {
  display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--solar-200); margin-bottom: 8px;
}
.dbv-hero h2 { font-size: 1.85rem; line-height: 1.15; margin: 0 0 12px; color: #fff; letter-spacing: -.02em; }
.dbv-hero p  { font-size: 1rem; line-height: 1.7; margin: 0; color: rgba(255, 255, 255, .82); max-width: 560px; }
.dbv-hero p strong { color: #fff; }

.dbv-body { padding: 28px 36px 30px; }

.dbv-cols { display: grid; gap: 18px; }
.dbv-card {
  border: 1px solid var(--grey-200);
  border-radius: 14px;
  padding: 20px 20px 16px;
  background: #fff;
}
.dbv-card-plus {
  border-color: var(--solar-200);
  background: linear-gradient(180deg, var(--solar-50), #fff 60%);
}
.dbv-card h3 {
  display: flex; align-items: center; gap: 10px;
  font-size: .95rem; margin: 0 0 14px; color: var(--navy);
}
.dbv-tag {
  font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
}
.dbv-tag-agora { background: var(--grey-100);  color: var(--grey-600); }
.dbv-tag-plus  { background: var(--solar);     color: var(--navy); }
.dbv-card ul { list-style: none; margin: 0; padding: 0; }
.dbv-card li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 0; line-height: 1.6; font-size: .93rem; color: var(--grey-800);
  border-top: 1px dashed var(--grey-200);
}
.dbv-card li:first-child { border-top: 0; padding-top: 0; }
.dbv-ico {
  flex: 0 0 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--grey-100); font-size: 1.05rem;
}
.dbv-card-plus .dbv-ico { background: #fff; box-shadow: inset 0 0 0 1px var(--solar-200); }

.dbv-nota { margin: 20px 0 0; font-size: .82rem; color: var(--grey-400); }

.dbv-acoes {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--grey-200);
}
.dbv-check { display: flex; gap: 8px; align-items: center; margin: 0; font-size: .9rem; color: var(--grey-600); }

@media (min-width: 640px) {
  .dbv-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 639px) {
  .dbv-hero, .dbv-body { padding-left: 22px; padding-right: 22px; }
  .dbv-hero h2 { font-size: 1.45rem; }
}

.tiles { display: grid; gap: 12px; margin-bottom: 18px; }
.tile {
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid var(--grey-200);
  padding: 14px 16px;
}
.tile .k { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--grey-400); }
.tile .v { font-size: 1.5rem; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.tile .v.money { color: var(--verde-dark); }

/* -- UC cards -------------------------------------------------------------- */

.uc-grid { display: grid; gap: 14px; }

.uc {
  display: block;
  background: #fff;
  border: 1px solid var(--grey-200);
  border-left: 4px solid var(--solar);
  border-radius: var(--radius);
  padding: 16px;
  text-decoration: none;
  color: inherit;
}
.uc:hover { border-color: var(--solar); box-shadow: 0 6px 18px rgba(15, 23, 42, .09); }
.uc-top   { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 3px; }
.uc-name  { font-weight: 700; font-size: 1.05rem; color: var(--navy); }
.uc-meta  { font-size: .8rem; color: var(--grey-400); margin-bottom: 12px; }
.uc-figs  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: end; padding-top: 12px; border-top: 1px solid var(--grey-100); }
.uc-figs > div { display: flex; flex-direction: column; justify-content: flex-end; }
.uc-figs .k { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--grey-400); white-space: nowrap; }
.uc-figs .v { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--navy); white-space: nowrap; }
.uc-figs .v.money { color: var(--verde-dark); }

.uc.usina   { border-left-color: var(--verde); background: linear-gradient(100deg, var(--verde-50), #fff 46%); }
/* A usina tem quatro numeros (geracao, saldo, fatura, lavagem); as consumidoras, tres. */
.uc.usina .uc-figs { grid-template-columns: repeat(4, 1fr); }
.uc.waiting { border-left-color: var(--grey-200); background: var(--grey-50); }

/* -- The calculation ------------------------------------------------------- */

.calc {
  background: var(--navy);
  color: #e2e8f0;
  border-radius: var(--radius);
  padding: 20px;
  font-variant-numeric: tabular-nums;
}
.calc h2 { color: #fff; }
.calc-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  font-size: .9rem;
}
.calc-line .lbl { color: var(--grey-400); }
.calc-line .val { font-weight: 700; color: #fff; white-space: nowrap; }
.calc-line.minus .val { color: var(--solar); }
.calc-total {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 2px solid var(--solar);
}
.calc-total .lbl { font-size: 1rem; font-weight: 700; color: #fff; }
.calc-total .val { font-size: 1.9rem; font-weight: 800; color: var(--solar); letter-spacing: -.02em; }
.calc .formula { font-size: .75rem; color: var(--grey-400); margin-top: 10px; }

.calc-pix {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 16px;
  padding: 12px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(245, 158, 11, .45);
  border-radius: 10px;
}
.calc-pix .pix-qr { width: 92px; height: 92px; padding: 0; border: 0; }

.pix-copia { margin-top: 12px; }
.pix-copia textarea {
  width: 100%;
  min-height: 0;
  padding: 8px 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .7rem;
  line-height: 1.35;
  color: var(--grey-400);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 8px;
  resize: none;
  word-break: break-all;
}
.pix-copia textarea:focus { border-color: var(--solar); box-shadow: none; }
.pix-copia .btn { margin-top: 8px; }

.send-row { display: flex; flex-wrap: wrap; gap: 10px; }
.send-row .btn { flex: 1 1 150px; }

/* -- Uploads (logo e QR do PIX) -------------------------------------------- */

.upload-row  { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.upload-ctl  { flex: 1 1 260px; }
.upload-ctl label { margin-bottom: 8px; }
.upload-ctl .btn  { margin-top: 10px; }

.upload-prev {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 190px;
  height: 92px;
  padding: 8px;
  background: var(--grey-50);
  border: 1px dashed var(--grey-200);
  border-radius: 10px;
  overflow: hidden;
}
.upload-prev.qr { width: 118px; height: 118px; }
.upload-prev img { max-width: 100%; max-height: 100%; object-fit: contain; }

input[type=file] {
  width: 100%;
  min-height: var(--tap);
  padding: 9px 12px;
  font-size: .9rem;
  font-family: inherit;
  background: #fff;
  border: 1px solid var(--grey-200);
  border-radius: 8px;
}
input[type=file]::file-selector-button {
  margin-right: 12px;
  padding: 7px 14px;
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  color: var(--navy);
  background: var(--grey-100);
  border: 1px solid var(--grey-200);
  border-radius: 7px;
  cursor: pointer;
}
input[type=file]::file-selector-button:hover { background: var(--grey-200); }

/* -- Pré-visualização da cobrança que o cliente recebe --------------------- */

.mail-prev {
  border: 1px solid var(--grey-200);
  border-radius: 10px;
  padding: 18px;
  background: #fff;
  max-width: 420px;
}
.mail-head {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--navy);
  margin-bottom: 4px;
  min-height: 30px;
}
.mail-head img { max-height: 46px; max-width: 200px; object-fit: contain; display: block; }

.pix-block {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 12px;
  background: var(--solar-50);
  border: 1px solid var(--solar-200);
  border-radius: 10px;
}
.pix-qr {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px; height: 72px;
  background: #fff;
  border: 1px solid var(--grey-200);
  border-radius: 8px;
  overflow: hidden;
}
.pix-qr img { max-width: 100%; max-height: 100%; object-fit: contain; }

.empty-row td { border-top: 1px solid var(--grey-100); }
.empty-row:hover { background: none; }

/* -- Tables ---------------------------------------------------------------- */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table { width: 100%; border-collapse: collapse; font-size: .875rem; }
thead th {
  background: var(--grey-50);
  color: var(--grey-600);
  text-align: left;
  padding: 10px;
  font-weight: 700;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
  border-bottom: 1px solid var(--grey-200);
}
tbody td { padding: 10px; border-top: 1px solid var(--grey-100); white-space: nowrap; }
tbody tr:hover { background: var(--grey-50); }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }

/* -- Mockup banner --------------------------------------------------------- */

.mock-flag {
  background: var(--navy);
  color: var(--solar);
  font-size: .75rem;
  font-weight: 700;
  text-align: center;
  padding: 6px 16px;
  letter-spacing: .02em;
}

/* -- Desktop --------------------------------------------------------------- */

@media (min-width: 700px) {
  .site-nav { display: flex; }

  .hero      { padding: 64px 0 68px; }
  .hero-grid { grid-template-columns: 1.1fr .9fr; align-items: center; gap: 48px; }
  .hero h1   { font-size: 2.75rem; }
  .hero .lede{ font-size: 1.15rem; }

  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.4rem; }

  section    { padding: 64px 0; }
  .grid-3    { grid-template-columns: repeat(3, 1fr); }
  .swap      { grid-template-columns: 1fr 1fr; gap: 20px; }
  .tiles     { grid-template-columns: repeat(3, 1fr); }
  .tiles-4   { grid-template-columns: repeat(4, 1fr); }
  .uc-grid   { grid-template-columns: repeat(2, 1fr); }
  .plans     { grid-template-columns: repeat(2, 1fr); max-width: 720px; }

  .row > .half  { flex: 1 1 calc(50% - 6px); }
  .row > .third { flex: 1 1 calc(33.333% - 8px); }
  .row > .auto  { flex: 0 0 auto; }

  .send-row .btn { flex: 0 0 auto; }
}

@media (min-width: 1000px) {
  .uc-grid { grid-template-columns: repeat(3, 1fr); }
}

/* -- Print (the cobrança gets printed and handed over) --------------------- */

@media print {
  body { background: #fff; }
  .site-head, .app-head, .site-foot, .mock-flag,
  .btn, .send-row, .no-print, .crumb { display: none !important; }
  .app-main { padding: 0; }
  .card { box-shadow: none; border: 1px solid var(--grey-200); }
  .calc { background: #fff; color: #000; border: 2px solid #000; }
  .calc h2 { color: #000; }
  .calc-line .lbl { color: #333; }
  .calc-line .val, .calc-total .lbl { color: #000; }
  .calc-total .val { color: #000; }
  .calc-total { border-top-color: #000; }
  .calc .formula { color: #555; }
  .calc-pix { background: #fff; border-color: #000; }
  .calc-pix div { color: #000 !important; }
}

/* Troca de competência na tela da UC. Fica fora do bloco "Calcular cobrança"
   de propósito: quando o mês não tem fatura aquele bloco nem existe, e sem isto
   a tela vira um beco sem saída. */
.comp-troca        { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.comp-troca label  { margin: 0; color: var(--grey-600); }
.comp-troca select { width: auto; min-width: 180px; margin: 0; }