:root{font-family:Arial,sans-serif;color:#262626;background:#f5f5f5}*{box-sizing:border-box}body{margin:0}header{background:#da291c;color:#fff;padding:23px max(24px,calc((100vw - 1120px)/2));display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{font-size:36px;font-weight:700;letter-spacing:-2px}header small{font-size:12px;letter-spacing:1px}main{max-width:1120px;margin:32px auto;padding:0 20px}main.client{max-width:520px;margin:48px auto}.card{background:#fff;border-radius:20px;padding:28px;box-shadow:0 8px 35px #0000000d;margin-bottom:24px}.icon{width:56px;height:56px;background:#fff0ee;color:#da291c;border-radius:50%;display:grid;place-items:center;font-size:30px;margin-bottom:24px}h1{font-size:28px;line-height:1.2;margin:0 0 16px}h2{font-size:21px}p{font-size:16px;line-height:1.6;color:#606060}.badge{font-size:12px;color:#9d241d;background:#fff0ee;padding:7px 10px;border-radius:8px;display:inline-block;margin-bottom:18px}button,.button{display:inline-block;text-align:center;padding:12px 16px;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;text-decoration:none;margin:4px 6px 4px 0;border:1px solid #da291c;background:#fff;color:#b51c14}.primary{color:#fff;background:#da291c}button:disabled{opacity:.55;cursor:wait}.note{font-size:12px;line-height:1.5;color:#757575}footer{text-align:center;font-size:12px;color:#777;margin:24px 0}[role=alert]{color:#a01810}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #222;outline-offset:3px}.scroll{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:13px}th,td{text-align:left;border-bottom:1px solid #eee;padding:10px;vertical-align:top;overflow-wrap:anywhere}label{display:block;font-size:14px;margin:12px 0}input,select,textarea{display:block;width:100%;font:inherit;border:1px solid #aaa;border-radius:6px;padding:9px;margin-top:6px}textarea{min-height:90px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px}.status{font-weight:700}.hidden{display:none}@media(max-width:600px){main,main.client{margin:24px auto}.card{padding:22px}h1{font-size:25px}.grid{grid-template-columns:1fr}header{flex-wrap:wrap}}

[hidden]{display:none!important}.pay-button{display:block;width:100%;font-size:18px;padding:16px}.resume-code{display:block;font:700 38px monospace;letter-spacing:6px;margin:18px 0;color:#b51c14}summary{cursor:pointer;font-weight:700}details.card>section{margin-top:24px}#payment-form{margin-top:24px}#payment-error{color:#a01810}

.header-actions{display:flex;align-items:center;gap:22px}.header-actions button{color:#fff;border-color:#ffffff88;background:transparent;font-size:13px}.tabs{display:flex;gap:8px;border-bottom:1px solid #dedee5;margin:24px 0;overflow-x:auto}.tabs button{border:0;border-radius:10px 10px 0 0;background:transparent;color:#656574;white-space:nowrap;margin:0;padding:16px 20px}.tabs [aria-selected=true]{color:#b51c14;background:#fff;border-bottom:3px solid #da291c}.service-state{display:flex;align-items:center;gap:18px;padding:24px;border-radius:16px;background:#f2f3f6}.service-state>span{font-size:32px;font-weight:700}.service-state h2{margin:0;font-size:28px}.service-state p{margin:8px 0 0}.service-state[data-state=active]{background:#edf8f1;color:#17653e}.service-state[data-state=suspended]{background:#fff1ee;color:#a1261e}.actions{margin-top:24px}.empty{text-align:center;padding:32px;color:#747483}thead{background:#f6f7fa}th{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:#656574;padding:15px}td{padding:16px 15px;line-height:1.5}tbody tr:nth-child(even){background:#fafbfc}tbody tr:hover{background:#f1f4f8}.technical{margin-top:20px}.technical summary{font-size:13px;color:#686875}[data-state=active] .icon{background:#e7f6ed;color:#17653e}[data-state=active] .badge{background:#e7f6ed;color:#17653e}.client [data-state=active]{border-top:4px solid #258452}@media(max-width:600px){.header-actions{gap:8px;flex-wrap:wrap;justify-content:flex-end}.header-actions small{display:none}.tabs button{padding:14px 12px}.service-state{padding:18px}.service-state h2{font-size:24px}}

/* Customer service: self-contained assets for access while suspended. */
.customer-portal{min-height:100svh;background:radial-gradient(ellipse at 15% 20%,#fff0ee 0,transparent 45%),radial-gradient(ellipse at 90% 90%,#f1f3f7 0,transparent 45%),#fafafa;font-family:Arial,Helvetica,sans-serif}
.customer-portal header{background:#fff;color:#da291c;border-bottom:1px solid #ececef;padding-top:20px;padding-bottom:20px}
.customer-portal header small{color:#73737d;font-size:10px;letter-spacing:1.5px}
.customer-portal .brand{position:relative;font-size:40px;padding-right:12px}
.customer-portal .brand:after{content:'';position:absolute;right:1px;top:1px;width:7px;height:7px;background:#da291c;border-radius:50%;box-shadow:7px 8px 0 -1px #da291c}
main.client{max-width:660px;margin:clamp(28px,7vh,80px) auto;padding:0 20px}
.service-hero{position:relative;isolation:isolate;overflow:hidden;text-align:center;border:1px solid #ececf0!important;border-top:0!important;border-radius:30px;padding:44px 40px 32px;box-shadow:0 24px 70px #2424330d}
.service-hero:before{content:'';position:absolute;top:0;left:0;right:0;height:6px;background:#da291c}
.service-hero[data-state=active]:before{background:#23835b}
.service-hero .badge{border-radius:100px;padding:9px 16px;font-size:12px;font-weight:700;letter-spacing:.3px;margin-bottom:30px}
.service-hero .icon{position:relative;width:104px;height:104px;margin:0 auto 30px;border-radius:50%;font-size:64px;font-weight:700;line-height:1;color:#c52c23;background:#ffebe8;box-shadow:0 0 0 12px #fff6f4}
.service-hero[data-state=active] .icon{color:#188253;background:#e2f5ea;box-shadow:0 0 0 12px #f2faf5}
.service-hero h1{font-size:clamp(29px,5vw,40px);line-height:1.15;letter-spacing:-1.2px;margin:0 auto 18px;max-width:470px;text-wrap:balance;color:#24242c}
.service-hero[data-state=active] h1{color:#176540}
.service-hero .hero-description{max-width:425px;margin:0 auto 28px;font-size:17px;line-height:1.65;color:#676774;text-wrap:pretty}
.hero-orbit{position:absolute;width:280px;height:280px;right:-180px;top:40px;border:32px solid #f7f7f9;border-radius:50%;z-index:-1}
.connection-summary{display:flex;align-items:center;justify-content:center;gap:10px;background:#f1f9f4;color:#176540;border:1px solid #dceee3;border-radius:14px;padding:18px;font-size:14px;font-weight:700}
.connection-dot{width:8px;height:8px;background:#23835b;border-radius:50%}
.service-hero #payment{text-align:left;margin-top:30px}.service-hero .pay-button{border-radius:14px;margin:0;background:#da291c;box-shadow:0 6px 18px #da291c26}
.service-hero #payment-form{padding:20px;background:#fafafa;border:1px solid #eee;border-radius:16px}.service-hero #payment-form h2{margin-top:0}.service-hero #payment-code{font-size:24px;letter-spacing:6px;text-align:center;padding:14px;min-width:0}.service-hero #confirm-payment{width:100%;margin:8px 0 0;font-size:14px;min-height:48px}.service-hero .note{margin-top:24px;font-size:12px;color:#85858f}.service-hero #payment-result:empty,.service-hero #payment-error:empty{display:none}
.customer-portal footer{font-size:11px;color:#8b8b95;letter-spacing:.3px;margin-top:28px}
@media(max-width:600px){.customer-portal header{padding:18px 22px;flex-wrap:nowrap}.customer-portal header small{font-size:9px;letter-spacing:.6px;text-align:right}.customer-portal .brand{font-size:34px}.service-hero{padding:32px 24px 26px;border-radius:24px}.service-hero .icon{width:90px;height:90px;font-size:56px;margin-bottom:28px}.service-hero .badge{margin-bottom:28px}.service-hero .hero-description{font-size:16px}.service-hero #payment-form{padding:16px}.connection-summary{font-size:13px;padding:16px 10px}}
@media(prefers-reduced-motion:no-preference){.service-hero .icon{animation:service-appear .35s ease-out}@keyframes service-appear{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}}

/* Operator readability: secondary copy remains comfortable on mobile. */
.admin-portal .note{font-size:15px;line-height:1.65;color:#595963}
.admin-portal .badge{font-size:14px;line-height:1.5}
.admin-portal table{font-size:15px}
.admin-portal th{font-size:13px;color:#52525e;line-height:1.5}
.admin-portal label{font-size:16px;line-height:1.5}
.admin-portal summary{font-size:16px;line-height:1.5}
.admin-portal .technical summary{font-size:15px;color:#595963}
.admin-portal footer{font-size:14px;color:#595963;line-height:1.5}
.admin-portal header small{font-size:14px}
.admin-portal .header-actions button{font-size:15px}
.admin-portal .resume-code{font-size:clamp(26px,6vw,38px);letter-spacing:clamp(3px,1vw,6px);overflow-wrap:anywhere}


/* Customer payment: consistent, readable spacing down to 320px. */
.customer-portal header small,.customer-portal footer{font-size:15px;line-height:1.5;letter-spacing:0;color:#62626d}
.customer-portal header{gap:16px}
.customer-portal header small{max-width:180px;text-align:right}
.service-hero .badge,.service-hero .note,.service-hero .connection-summary{font-size:15px;line-height:1.6}
.service-hero .note{color:#62626d;margin:24px 0 0;text-align:left}
.service-hero #payment{margin-top:24px}
.service-hero #payment button{font-size:16px;line-height:1.5;min-height:50px;padding:13px 16px;border-radius:12px}
.service-hero #payment-form{display:grid;gap:20px;margin-top:20px;padding:24px;background:#f8f8fa;border:1px solid #e3e3e9;border-radius:16px}
.service-hero #payment-form h2{font-size:22px;line-height:1.3;margin:0;color:#24242c}
.service-hero #payment-form p{font-size:16px;line-height:1.6;margin:0;color:#62626d}
.service-hero #payment-form label{font-size:16px;font-weight:700;line-height:1.5;margin:0;color:#34343f}
.service-hero #payment-code{width:100%;min-width:0;min-height:60px;margin-top:10px;padding:12px 10px;font-size:28px;font-weight:600;line-height:1.2;letter-spacing:6px;border:1px solid #a4a4af;border-radius:10px;background:#fff;color:#24242c}
.service-hero #payment-code::placeholder{font-size:24px;font-weight:400;letter-spacing:0;color:#73737e;opacity:1}
.service-hero #confirm-payment{margin:0;width:100%;white-space:normal}
.service-hero #payment-result,.service-hero #payment-error{font-size:16px;line-height:1.6;margin:20px 0 0;overflow-wrap:anywhere}
@media(max-width:420px){
  .customer-portal main.client{padding:0 12px;margin:24px auto}
  .customer-portal .service-hero{padding:28px 18px 24px}
  .service-hero #payment-form{padding:18px 14px;gap:18px}
  .service-hero h1{font-size:29px;letter-spacing:-.7px}
  .customer-portal header{padding:16px 18px}
}

/* Pago real visible; simulación secundaria y explícita. */
.service-hero #express-pay{display:block;width:100%;font-size:18px;line-height:1.5;min-height:54px;padding:15px 18px;color:#fff}
.service-hero .payment-destination{font-size:15px;line-height:1.55;margin:12px 0 24px;color:#62626d;text-align:center}
.service-hero .demo-options{border-top:1px solid #e8e8ed;padding-top:18px}
.service-hero .demo-options summary{font-size:15px;font-weight:400;color:#62626d}
.service-hero .demo-options .note{margin:16px 0}
.service-hero .demo-options #pay{width:auto;background:transparent;color:#62626d;border-color:#b9b9c0;box-shadow:none}


/* URL visible y seleccionable, sin depender del portapapeles del navegador. */
.service-hero .payment-copy-label{font-size:15px;font-weight:400;line-height:1.55;color:#62626d;margin:0 0 24px}
.service-hero .payment-copy-url{font-size:15px;line-height:1.5;min-width:0;width:100%;color:#34343f;background:#f8f8fa;cursor:text;-webkit-user-select:text;user-select:text}