@font-face { font-family:"Poppins"; font-style:normal; font-weight:400; font-display:swap; src:url("./fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family:"Poppins"; font-style:normal; font-weight:500; font-display:swap; src:url("./fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family:"Poppins"; font-style:normal; font-weight:600; font-display:swap; src:url("./fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family:"Poppins"; font-style:normal; font-weight:700; font-display:swap; src:url("./fonts/poppins-700.woff2") format("woff2"); }
@font-face { font-family:"Comfortaa"; font-style:normal; font-weight:300 700; font-display:swap; src:url("./fonts/comfortaa-variable.woff2") format("woff2"); }

:root { --ink:#293126; --muted:#6c7568; --paper:#f8fbf5; --soft-paper:#fff; --navy:#587a2e; --purple:#789b4a; --coral:#6f9639; --gold:#c8a748; --line:rgba(62,81,48,.16); --serif:"Poppins",Arial,sans-serif; --font-geist-sans:"Poppins",Arial,sans-serif; --font-geist-mono:"Poppins",Arial,sans-serif; }
* { box-sizing:border-box; } html { background:var(--paper); } body { margin:0; background:var(--paper); color:var(--ink); font-family:"Poppins",Arial,sans-serif; } button,input,select { font:inherit; } button { cursor:pointer; } button:disabled { cursor:not-allowed; opacity:.5; }
.invoice-shell { max-width:1380px; margin:0 auto; padding:22px 28px 30px; }.masthead { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); padding:0 0 17px; }.brand { color:var(--ink); font-family:var(--font-geist-mono),monospace; font-size:11px; font-weight:700; letter-spacing:.16em; text-decoration:none; }.brand span { color:var(--coral); padding:0 4px; }.private-note { color:var(--muted); font-family:var(--font-geist-mono),monospace; font-size:9px; letter-spacing:.13em; }
.hero { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(260px,.55fr); gap:48px; padding:clamp(56px,10vw,126px) 0 48px; }.eyebrow { color:var(--coral); font-family:var(--font-geist-mono),monospace; font-size:10px; font-weight:700; letter-spacing:.16em; margin:0 0 16px; text-transform:uppercase; }.hero h1 { font-family:var(--serif); font-size:clamp(48px,7vw,92px); font-weight:400; letter-spacing:-.065em; line-height:.92; margin:0; max-width:850px; }.hero-copy { color:#4f535d; font-size:17px; line-height:1.6; margin:28px 0 0; max-width:525px; }.guardrail { align-self:end; border-left:1px solid var(--ink); display:grid; grid-template-columns:30px 1fr; gap:9px 14px; padding:3px 0 3px 20px; }.guardrail-index { color:var(--coral); font-family:var(--font-geist-mono),monospace; font-size:10px; }.guardrail p { font-size:12px; margin:0; }.guardrail-line { background:var(--line); grid-column:2; height:1px; width:100%; }
.workbench { background:var(--soft-paper); border:1px solid var(--line); display:grid; grid-template-columns:190px minmax(0,1fr) 266px; min-height:584px; }.step-rail { border-right:1px solid var(--line); display:flex; flex-direction:column; padding:28px 18px; }.step { align-items:center; background:transparent; border:0; color:#999da6; display:flex; font-size:12px; gap:10px; padding:14px 6px; text-align:left; transition:color .2s ease; }.step span { font-family:var(--font-geist-mono),monospace; font-size:9px; }.step.active { color:var(--ink); font-weight:700; }.step.active span,.step.done span { color:var(--coral); }.step.done { color:#575c65; }.invoice-form { padding:46px clamp(28px,5vw,72px); } fieldset { border:0; margin:0; min-width:0; padding:0; } legend { font-family:var(--serif); font-size:clamp(31px,3.3vw,48px); letter-spacing:-.045em; line-height:1; margin:0; max-width:620px; padding:0; }.field-intro { color:var(--muted); font-size:13px; line-height:1.55; margin:16px 0 30px; max-width:560px; }.field-grid { display:grid; gap:18px; grid-template-columns:repeat(2,minmax(0,1fr)); }.field { display:block; min-width:0; }.field.full { grid-column:1 / -1; }.field span { color:#616671; display:block; font-family:var(--font-geist-mono),monospace; font-size:9px; letter-spacing:.08em; margin:0 0 8px; text-transform:uppercase; }.field input,.field select { background:#fff; border:1px solid #d7d4cc; border-radius:0; color:var(--ink); min-height:47px; outline:none; padding:0 13px; transition:border-color .2s ease,box-shadow .2s ease; width:100%; }.field input::placeholder { color:#a4a5aa; }.field input:focus,.field select:focus { border-color:var(--purple); box-shadow:0 0 0 3px rgba(83,52,131,.11); }.form-actions { align-items:center; display:flex; gap:12px; justify-content:flex-end; margin-top:42px; }.primary-button,.secondary-button { background:var(--ink); border:1px solid var(--ink); color:#fff; font-size:12px; font-weight:700; min-height:48px; padding:0 22px; transition:background .2s ease,transform .2s ease; }.primary-button:hover:not(:disabled),.secondary-button:hover { background:var(--coral); border-color:var(--coral); transform:translateY(-1px); }.primary-button span { color:var(--gold); margin-left:8px; }.back-button { background:transparent; border:0; color:var(--muted); font-size:12px; min-height:48px; padding:0 13px; }.back-button:hover { color:var(--ink); }.form-error { color:#b81e38; font-size:12px; margin:26px 0 -20px; }
.invoice-summary { background:var(--navy); color:#fff; display:flex; flex-direction:column; padding:30px 24px; }.summary-kicker { color:rgba(255,255,255,.54); font-family:var(--font-geist-mono),monospace; font-size:9px; letter-spacing:.12em; margin:0 0 12px; text-transform:uppercase; }.issuer-toggle { display:grid; gap:6px; grid-template-columns:1fr 1fr; }.issuer-toggle button { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.17); color:rgba(255,255,255,.58); font-family:var(--font-geist-mono),monospace; font-size:9px; min-height:33px; padding:0 5px; }.issuer-toggle button.selected { background:#fff; border-color:#fff; color:var(--navy); font-weight:700; }.summary-rule { background:rgba(255,255,255,.18); height:1px; margin:28px 0; }.summary-line { border-bottom:1px solid rgba(255,255,255,.13); display:flex; flex-direction:column; gap:5px; margin:0 0 14px; padding:0 0 14px; }.summary-line span { color:rgba(255,255,255,.51); font-size:10px; }.summary-line strong { font-size:12px; font-weight:500; line-height:1.38; overflow-wrap:anywhere; }.summary-footnote { color:rgba(255,255,255,.68); font-size:11px; line-height:1.55; margin:auto 0 0; }.review-grid { border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:30px; }.review-grid div { border-bottom:1px solid var(--line); min-height:78px; padding:15px 8px 15px 0; }.review-grid div:nth-child(even) { padding-left:18px; }.review-grid span { color:var(--muted); display:block; font-family:var(--font-geist-mono),monospace; font-size:9px; letter-spacing:.09em; margin-bottom:7px; text-transform:uppercase; }.review-grid strong { display:block; font-size:12px; line-height:1.35; overflow-wrap:anywhere; }.attestation { align-items:flex-start; display:flex; gap:11px; margin-top:27px; }.attestation input { accent-color:var(--coral); margin-top:2px; }.attestation span { color:#515661; font-size:12px; line-height:1.5; }.progress-mobile { display:none; }.page-footer { color:#747781; display:flex; font-family:var(--font-geist-mono),monospace; font-size:9px; justify-content:space-between; letter-spacing:.12em; padding:17px 0 0; }.honeypot { left:-10000px; position:absolute; }
.habitos-brand { color:var(--coral); display:flex; flex-direction:column; font-size:25px; font-weight:400; letter-spacing:-.06em; line-height:.78; text-decoration:none; }.habitos-brand strong { font-weight:400; }.habitos-brand span { font-weight:400; }.habitos-brand small { color:#70885b; font-family:var(--font-geist-sans),Arial,sans-serif; font-size:8px; font-weight:700; letter-spacing:.02em; margin:9px 0 0 2px; }.habitos-hero h1 { color:#3b4434; max-width:790px; }.habitos-summary { background:linear-gradient(150deg,#6e9639,#4d702a); }.habitos-summary h2 { font-family:var(--serif); font-size:28px; font-weight:400; letter-spacing:-.04em; line-height:1; margin:0; }.fixed-field { background:#eff5e9; border-left:3px solid var(--coral); display:flex; flex-direction:column; gap:7px; justify-content:center; min-height:47px; padding:9px 12px; }.fixed-field.full { grid-column:1 / -1; }.fixed-field span { color:#66775a; font-family:var(--font-geist-mono),monospace; font-size:9px; letter-spacing:.08em; text-transform:uppercase; }.fixed-field strong { color:#405435; font-size:12px; font-weight:600; line-height:1.35; }.fiscal-alert { background:#fff8e7; border-left:3px solid #c8a748; color:#735c1f; font-size:12px; line-height:1.55; margin:20px 0 0; padding:12px 14px; }
.receipt-shell { align-items:center; background:radial-gradient(circle at 50% 0%,#e7e0d1,var(--paper) 43%); display:flex; justify-content:center; min-height:100vh; padding:22px; }.receipt-card { background:var(--soft-paper); border:1px solid var(--line); max-width:590px; padding:clamp(38px,8vw,74px); text-align:center; }.receipt-mark { align-items:center; background:var(--navy); border-radius:50%; color:#fff; display:flex; font-size:22px; height:50px; justify-content:center; margin:0 auto 23px; width:50px; }.receipt-card h1 { font-family:var(--serif); font-size:clamp(39px,6vw,61px); font-weight:400; letter-spacing:-.06em; line-height:.96; margin:0; }.receipt-card p { color:#515661; font-size:14px; line-height:1.65; margin:24px auto; max-width:420px; }.request-code { border-bottom:1px solid var(--line); border-top:1px solid var(--line); display:flex; flex-direction:column; gap:8px; margin:30px 0; padding:19px; }.request-code span { color:var(--muted); font-family:var(--font-geist-mono),monospace; font-size:9px; letter-spacing:.12em; text-transform:uppercase; }.request-code strong { font-family:var(--font-geist-mono),monospace; font-size:14px; }.receipt-note { color:var(--muted); font-size:11px; line-height:1.55; margin:0 0 27px; }
.operator-shell { background:var(--soft-paper); min-height:100vh; padding:32px max(24px,7vw); }.operator-header { align-items:end; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; padding-bottom:28px; }.operator-header h1,.operator-lock h1 { font-family:var(--serif); font-size:clamp(46px,6vw,75px); font-weight:400; letter-spacing:-.06em; line-height:.93; margin:0; }.operator-link { color:var(--navy); font-size:12px; font-weight:700; text-decoration:none; }.operator-status { display:grid; gap:24px; grid-template-columns:180px 180px 1fr; padding:28px 0; }.operator-status div { display:flex; flex-direction:column; gap:7px; }.operator-status span { color:var(--muted); font-family:var(--font-geist-mono),monospace; font-size:9px; letter-spacing:.1em; text-transform:uppercase; }.operator-status strong { font-size:25px; }.operator-status .connected { color:#216a53; font-size:14px; }.operator-status .not-connected { color:#a44b24; font-size:14px; }.operator-status p { border-left:1px solid var(--line); color:#555a65; font-size:12px; line-height:1.6; margin:0; padding-left:22px; }.operator-message { background:#ecf1ea; border-left:3px solid #216a53; color:#315241; font-size:12px; padding:13px 15px; }.request-list { border-top:1px solid var(--line); }.request-row { align-items:center; border-bottom:1px solid var(--line); display:grid; gap:30px; grid-template-columns:minmax(250px,1fr) 200px 190px; padding:24px 0; }.request-meta { display:flex; gap:12px; }.request-meta span { color:var(--coral); font-family:var(--font-geist-mono),monospace; font-size:9px; letter-spacing:.08em; }.request-main h2 { font-family:var(--serif); font-size:27px; font-weight:400; letter-spacing:-.03em; margin:10px 0 5px; }.request-main p,.request-payment span { color:var(--muted); font-size:11px; line-height:1.5; margin:0; }.request-main .request-concept { color:var(--ink); margin-top:10px; }.request-payment { display:flex; flex-direction:column; gap:6px; }.request-payment strong { font-size:17px; }.request-action { align-items:flex-end; display:flex; flex-direction:column; gap:13px; }.request-status { font-size:10px; line-height:1.2; text-align:right; }.request-status.pending_review { color:#9a5d18; }.request-status.approved_waiting_connection { color:#825727; }.request-status.approved_ready_to_issue { color:#1b6d56; }.request-action button { background:var(--ink); border:0; color:#fff; font-size:11px; font-weight:700; min-height:37px; padding:0 15px; }.empty-state { color:var(--muted); font-size:13px; padding:30px 0; }.operator-lock { min-height:100vh; padding:15vh max(24px,9vw); }.operator-lock p:last-child { color:var(--muted); max-width:430px; line-height:1.6; }
@media (max-width:900px) { .invoice-shell { padding:18px 16px 22px; }.private-note { display:none; }.hero { display:block; padding:68px 7px 40px; }.hero h1 { font-size:clamp(48px,14vw,76px); }.hero-copy { font-size:15px; }.guardrail { display:none; }.workbench { display:flex; flex-direction:column; }.step-rail { display:none; }.progress-mobile { align-items:baseline; border-bottom:1px solid var(--line); display:flex; gap:10px; padding:16px 20px; }.progress-mobile span:first-child { color:var(--coral); font-family:var(--font-geist-mono),monospace; font-size:10px; }.progress-mobile p { font-size:12px; font-weight:700; margin:0; }.progress-mobile span:last-child { color:var(--muted); font-family:var(--font-geist-mono),monospace; font-size:9px; margin-left:auto; }.invoice-form { order:1; padding:35px 20px 31px; } legend { font-size:38px; }.field-grid { grid-template-columns:1fr; }.field.full { grid-column:auto; }.invoice-summary { min-height:auto; order:2; padding:25px 20px; }.summary-rule { margin:21px 0; }.summary-footnote { margin-top:14px; }.form-actions { margin-top:33px; }.primary-button { flex:1; }.review-grid { grid-template-columns:1fr; }.review-grid div:nth-child(even) { padding-left:0; }.page-footer { font-size:8px; padding:14px 1px 0; }.operator-shell { padding:24px 18px; }.operator-header { align-items:flex-start; flex-direction:column; gap:22px; }.operator-status { grid-template-columns:1fr 1fr; }.operator-status p { border-left:0; border-top:1px solid var(--line); grid-column:1 / -1; padding:17px 0 0; }.request-row { align-items:flex-start; gap:16px; grid-template-columns:1fr; }.request-action { align-items:flex-start; }.request-status { text-align:left; } }
.field-help { color:var(--muted); display:block; font-size:10px; line-height:1.45; margin:-2px 0 8px; }
.field select { max-width:100%; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.field-error { color:#b81e38; display:block; font-size:11px; line-height:1.45; margin:7px 0 0; }
.field input[aria-invalid="true"],.field select[aria-invalid="true"] { border-color:#b81e38; }
.amount-input { align-items:center; background:#fff; border:1px solid #d7d4cc; display:flex; min-height:47px; width:100%; }
.amount-input:focus-within { border-color:var(--purple); box-shadow:0 0 0 3px rgba(83,52,131,.11); }
.amount-input > span { color:var(--ink); display:block; flex:0 0 auto; font-family:"Poppins",Arial,sans-serif; font-size:15px; letter-spacing:0; margin:0; padding-left:13px; text-transform:none; }
.amount-input input { border:0; box-shadow:none!important; min-width:0; padding-left:7px; }
.amount-input:has(input[aria-invalid="true"]) { border-color:#b81e38; }
.currency-note { color:var(--muted); display:block; font-size:9px; letter-spacing:.08em; margin:6px 0 0; }
@media (max-width:900px) { .invoice-shell,.workbench,.invoice-form,.field-grid,.field { max-width:100%; min-width:0; }.invoice-shell { overflow-x:hidden; }.form-actions { position:relative; }.field-error { font-size:11px; }.amount-input input { font-size:16px; } }