@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700;800;900&display=swap');
:root{font-family:'DM Sans',Arial,sans-serif;color:#20222b;background:#f3f4f7;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}#app{min-height:100vh}.shell{display:flex;min-height:100vh}.sidebar{width:262px;background:#111318;color:white;position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;padding:30px 18px;z-index:5}.brand{font:900 27px Outfit,Arial;letter-spacing:-1.2px;padding:0 13px 30px;white-space:nowrap}.brand b{color:#fa253b}.brand small{display:block;font:600 9px 'DM Sans';letter-spacing:3px;color:#a2a6b0;margin-top:1px}.nav{display:flex;flex-direction:column;gap:6px}.nav button{border:0;background:transparent;color:#b9bdc8;text-align:left;padding:13px 16px;border-radius:12px;font-weight:700;display:flex;gap:13px;align-items:center}.nav button.active,.nav button:hover{background:#ef263d;color:#fff}.nav .ico{font-size:19px;width:24px;text-align:center}.sidefoot{margin-top:auto;border-top:1px solid #333640;padding:20px 12px 0;color:#afb3be;font-size:12px;line-height:1.7}.main{margin-left:262px;width:calc(100% - 262px);padding:29px 36px 90px;max-width:1600px}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:27px;gap:16px}.eyebrow{color:#8e93a0;font-size:12px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase}.topbar h1{font:800 clamp(26px,3vw,37px) Outfit;margin:5px 0 0;letter-spacing:-1.1px}.topright{display:flex;align-items:center;gap:12px}.tag{display:inline-flex;align-items:center;border-radius:999px;background:#eaf8ef;color:#198447;padding:7px 11px;font-size:11px;font-weight:800}.userpick{background:white;border:1px solid #e0e2e8;padding:11px 13px;border-radius:12px;font-weight:800;max-width:175px}.grid{display:grid;gap:18px}.stats{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:22px}.card{background:#fff;border:1px solid #e9eaf0;border-radius:19px;box-shadow:0 7px 28px rgba(29,35,49,.035);padding:22px;min-width:0}.stat{display:flex;align-items:center;gap:14px}.stat .bubble{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-size:22px;flex:none}.green{background:#e4f8e9;color:#169b52}.blue{background:#e8f1ff;color:#2479db}.orange{background:#fff0e1;color:#e78924}.purple{background:#f1eaff;color:#8b4de5}.stat small,.muted{color:#848995}.stat small{display:block;font-size:12px;font-weight:700}.stat strong{font:800 26px Outfit;display:block;margin-top:4px}.cols{grid-template-columns:1.35fr 1fr}.sectiontitle{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px}.sectiontitle h2{font:800 20px Outfit;margin:0}.sectiontitle p{margin:5px 0 0;color:#8a8f9a;font-size:13px}.btn{border:0;border-radius:11px;padding:12px 17px;background:#f0f1f5;color:#30323b;font-weight:800}.btn.red{background:#ef233c;color:white}.btn.dark{background:#161820;color:#fff}.btn.light{background:#fff;border:1px solid #e2e3e8}.btn.small{font-size:12px;padding:9px 11px}.btn.full{width:100%}.field{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}.field label{font-size:12px;font-weight:800;color:#515662}.field input,.field select,.field textarea{border:1px solid #e1e3e9;background:#f9fafb;padding:12px 13px;border-radius:10px;width:100%;outline:none;min-width:0}.field input:focus,.field select:focus,.field textarea:focus{border-color:#f12b43;background:white}.formgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}.wide{grid-column:1/-1}.pillrow{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}.pill{border:1px solid #e4e6eb;background:#f5f6f8;color:#666b76;padding:10px 12px;border-radius:10px;font-size:12px;font-weight:800}.pill.active{background:#ef233c;color:#fff;border-color:#ef233c}.tablewrap{overflow-x:auto}table{width:100%;border-collapse:collapse;text-align:left;font-size:13px}th{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:#8a8f9a;padding:13px 10px;border-bottom:1px solid #e9eaf0;white-space:nowrap}td{padding:15px 10px;border-bottom:1px solid #eff0f3;vertical-align:middle}tr:last-child td{border-bottom:0}.strong{font-weight:800}.chip{font-size:11px;font-weight:800;border-radius:7px;padding:6px 8px;display:inline-block;white-space:nowrap}.chip.ok{background:#e3f8e9;color:#178448}.chip.wait{background:#fff1db;color:#bd7917}.chip.red{background:#ffe9ed;color:#d72b45}.empty{color:#969aa5;text-align:center;padding:34px 10px;font-size:13px}.hero{background:linear-gradient(110deg,#17191f,#2b171e);color:white;padding:27px 30px;border-radius:19px;margin-bottom:21px;display:flex;justify-content:space-between;align-items:center;gap:15px;overflow:hidden;position:relative}.hero:after{content:'M';position:absolute;right:24%;top:-63px;font:900 240px Outfit;color:#ffffff09;pointer-events:none}.hero h2{font:800 27px Outfit;margin:0 0 7px}.hero p{color:#c6c6cd;font-size:13px;margin:0}.hero .btn{z-index:1}.mechanics{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:20px}.mech{display:flex;align-items:center;gap:12px}.avatar{height:44px;width:44px;flex:none;border-radius:13px;display:grid;place-items:center;background:#fce5e8;color:#e9223c;font:900 20px Outfit}.mech strong{display:block}.mech small{color:#9296a1}.mech .money{margin-left:auto;font:800 21px Outfit}.divider{height:1px;background:#eceef2;margin:18px 0}.bar{height:9px;background:#eef0f4;border-radius:12px;overflow:hidden}.bar>span{height:100%;display:block;background:linear-gradient(90deg,#fc6b77,#ee233c);border-radius:12px}.minirow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid #eff0f3;font-size:13px}.minirow:last-child{border:0}.note{font-size:12px;color:#858b96;line-height:1.7}.notice{background:#fff7e9;border:1px solid #f6e6c6;border-radius:12px;padding:12px 15px;color:#96651d;font-size:12px;line-height:1.6}.actionrow{display:flex;flex-wrap:wrap;gap:8px}.login{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;background:#111318}.loginart{padding:8vw;display:flex;flex-direction:column;justify-content:center;color:white;background:radial-gradient(circle at 25% 75%,#932037 0,transparent 36%),linear-gradient(140deg,#111318,#25232b)}.loginart .brand{padding:0;font-size:45px}.loginart h1{font:900 clamp(35px,5vw,65px) Outfit;line-height:1.02;max-width:570px;letter-spacing:-2px}.loginart p{color:#bdc0c9;line-height:1.8;max-width:420px}.loginform{display:grid;place-items:center;background:#f6f7f9;padding:30px}.loginbox{max-width:410px;width:100%}.loginbox h2{font:800 32px Outfit;margin:0 0 8px}.loginbox p{color:#878c97;font-size:14px;margin-bottom:25px}.loginbox .field{margin-bottom:18px}.loginbox .field input,.loginbox .field select{background:white}.mobilebar{display:none}.smallprint{font-size:11px;color:#989da7;margin-top:18px;line-height:1.6}.redtext{color:#ee233c}.filterline{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.filterline input{border:1px solid #e3e4e9;border-radius:10px;padding:10px;background:#fff;min-width:190px}.bigamount{font:900 37px Outfit;letter-spacing:-1px}.split{display:grid;grid-template-columns:1fr 1fr;gap:12px}.split>div{background:#f5f6f9;border-radius:12px;padding:15px}.split small{color:#8b909b;display:block}.split strong{font:800 24px Outfit}.listcards{display:grid;gap:12px}.listitem{border:1px solid #e8eaf0;border-radius:13px;padding:16px;background:#fff}.listitem .head{display:flex;align-items:center;justify-content:space-between;gap:10px}.listitem h3{margin:0;font:800 17px Outfit}.listitem p{font-size:12px;color:#858a96;margin:6px 0}.footspace{height:20px}@media(max-width:1100px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.cols{grid-template-columns:1fr}.mechanics{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:750px){.sidebar{display:none}.main{margin:0;width:100%;padding:19px 14px 90px}.topbar{align-items:flex-start}.topright{flex-direction:column;align-items:flex-end;gap:6px}.topbar h1{font-size:28px}.stats{gap:9px}.card{padding:16px;border-radius:15px}.stat{gap:9px}.stat .bubble{width:38px;height:38px;font-size:18px}.stat strong{font-size:21px}.stat small{font-size:10px}.mechanics{grid-template-columns:1fr;gap:9px}.hero{padding:22px}.hero h2{font-size:22px}.hero .btn{font-size:11px}.mobilebar{display:flex;position:fixed;bottom:0;left:0;right:0;background:#111318;z-index:6;padding:9px 7px max(9px,env(safe-area-inset-bottom));justify-content:space-around;box-shadow:0 -5px 20px #0002}.mobilebar button{background:transparent;color:#adb0bb;border:0;font-size:10px;display:grid;gap:4px;justify-items:center;min-width:55px}.mobilebar button.active{color:#fa3046}.mobilebar .ico{font-size:22px}.login{grid-template-columns:1fr}.loginart{min-height:250px;padding:40px 25px}.loginart .brand{font-size:30px}.loginart h1{font-size:35px;margin:22px 0 0}.loginart p{font-size:12px}.loginform{padding:40px 20px;align-items:start}.formgrid{grid-template-columns:1fr}.wide{grid-column:auto}.split{grid-template-columns:1fr 1fr}}#toast{position:fixed;bottom:85px;left:50%;transform:translateX(-50%);background:#1e2028;color:#fff;border-radius:12px;padding:12px 18px;font-size:13px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:20;box-shadow:0 8px 25px #0003}#toast.show{opacity:1}

/* V4: mobile-first compatibility refinements for phones and tablets */
html{min-width:0;-webkit-text-size-adjust:100%;scroll-padding-bottom:90px}
body,#app,.shell,.main{min-width:0;max-width:100%}
button,input,select,textarea{max-width:100%}
button{touch-action:manipulation}
.card,.listitem,.hero,.sectiontitle,.topbar,.topright,.minirow{min-width:0}
.card,.listitem{overflow-wrap:anywhere}
input,select,textarea{font-size:16px}
button,.btn,.nav button{min-height:42px}
@media (min-width:751px) and (max-width:1180px){
 .sidebar{width:215px;padding:22px 11px}
 .sidebar .brand{font-size:23px;padding:0 8px 24px}
 .nav button{padding:12px 9px;gap:8px;font-size:12px}
 .main{margin-left:215px;width:calc(100% - 215px);padding:24px 20px 65px}
 .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
 .cols{grid-template-columns:1fr}
 .mechanics{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:750px){
 .main{padding:18px 12px calc(104px + env(safe-area-inset-bottom));overflow-x:hidden}
 .topbar{flex-wrap:wrap;gap:12px;margin-bottom:17px}
 .topbar h1{font-size:clamp(23px,6vw,30px);overflow-wrap:anywhere}
 .topright{flex-direction:row;align-items:center;flex-wrap:wrap;justify-content:flex-start;width:100%}
 .userpick{max-width:100%;flex:1;min-width:145px}
 .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .stat{flex-direction:column;align-items:flex-start;gap:7px}
 .stat strong{font-size:clamp(19px,5vw,26px)}
 .stat small{font-size:11px;overflow-wrap:anywhere}
 .sectiontitle{align-items:flex-start;flex-wrap:wrap}
 .sectiontitle h2{font-size:18px}
 .cols,.mechanics{grid-template-columns:minmax(0,1fr)}
 .hero{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
 .hero .btn{width:100%}
 .formgrid{grid-template-columns:minmax(0,1fr)}
 .split{grid-template-columns:repeat(2,minmax(0,1fr))}
 .split strong{font-size:19px}
 .actionrow{gap:8px}
 .actionrow .btn{flex:1 1 auto}
 .filterline{align-items:stretch}
 .filterline input,.filterline select{min-width:0;width:100%}
 .mobilebar{overflow-x:auto;overscroll-behavior-x:contain;gap:2px;justify-content:space-between}
 .mobilebar button{min-width:0;flex:1;padding:5px 2px;font-size:10px;overflow-wrap:anywhere}
 .mobilebar .ico{font-size:20px}
 .login{min-height:100dvh;grid-template-columns:minmax(0,1fr)}
 .loginart{min-height:190px;padding:25px 20px}
 .loginart h1{font-size:clamp(29px,8vw,40px);margin:12px 0 0}
 .loginform{padding:25px 16px 45px}
 .loginbox h2{font-size:26px}
 .listitem .head{flex-wrap:wrap}
}
@media (max-width:390px){
 .main{padding-left:10px;padding-right:10px}
 .card{padding:12px}
 .stat .bubble{width:34px;height:34px}
 .stats{gap:7px}
 .split{grid-template-columns:1fr}
 .mobilebar button{font-size:9px}
}
@media print{.sidebar,.mobilebar,.topright,.btn{display:none!important}.main{margin:0;width:100%;padding:0}.card{box-shadow:none}}

/* V5: registro de tres campos con detalles opcionales */
.extra-details{grid-column:1/-1;border:1px solid #d9dce2;border-radius:12px;padding:12px;margin:6px 0 14px}.extra-details summary{cursor:pointer;font-weight:750;padding:5px}.extra-details .formgrid{padding-top:14px}

/* V6: selector de servicios nativo, accesible en teléfonos */
#serviceChoice{width:100%;min-height:49px;cursor:pointer;background:#f8f9fb;border:1px solid #d9dce2;border-radius:11px;padding:11px 12px;color:#172033;font:inherit}
#serviceChoice:focus{outline:2px solid #e9203d;outline-offset:1px}
#serviceCustom{width:100%}

/* V8 · Cinematic login responsive: desktop / tablet / mobile */
.login{min-height:100vh;min-height:100dvh;grid-template-columns:minmax(0,1.2fr) minmax(390px,.8fr);background:#111318;color:white}
.loginart{position:relative;isolation:isolate;overflow:hidden;padding:clamp(28px,4vw,65px);justify-content:stretch;background:#080a0e}
.loginart:before{content:"";position:absolute;z-index:-2;inset:0;background-image:url('moto_cinematica.webp');background-position:68% center;background-size:cover;filter:saturate(.9) contrast(1.15)}
.loginart:after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,rgba(4,5,8,.95) 0%,rgba(4,5,8,.82) 35%,rgba(4,5,8,.15) 100%),linear-gradient(0deg,rgba(2,3,5,.83),transparent 42%)}
.loginart-inner{display:flex;flex-direction:column;min-height:calc(100dvh - clamp(56px,8vw,130px));width:100%;max-width:850px}
.loginart .brand{font-size:clamp(27px,3.1vw,45px);letter-spacing:-1.5px;padding:0;line-height:1.1}
.loginart .brand small{font-size:clamp(8px,.9vw,12px);letter-spacing:4px;margin-left:48px;margin-top:7px}
.brandgear{color:#ed1936;margin-right:8px;font-size:1.15em;vertical-align:-.04em}
.loginpitch{margin:auto 0;max-width:620px;padding:35px 0}
.loginart h1{font-size:clamp(37px,4.4vw,72px);line-height:1.02;margin:0 0 18px;letter-spacing:-2px;text-shadow:0 3px 20px #000a}
.loginart p{font-size:clamp(13px,1.25vw,18px);line-height:1.55;color:#d5d5dc;max-width:490px;text-shadow:0 2px 12px #000}
.loginfeatures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;max-width:460px;margin-top:25px}
.loginfeatures span{font-size:26px;display:flex;flex-direction:column;align-items:flex-start;gap:7px;text-shadow:0 2px 12px #000}
.loginfeatures small{font-size:12px;line-height:1.25;color:#fff;font-weight:700;max-width:115px}
.loginpromise{font:italic 800 clamp(24px,2.8vw,42px) cursive;line-height:1.04;color:white;text-shadow:0 4px 20px #000;transform:rotate(-7deg);margin:0 0 12px 10px;align-self:flex-start;border-bottom:5px solid #ef233c;padding-bottom:9px}
.loginform{background:radial-gradient(ellipse at 100% 45%,#4c1b25 0%,transparent 65%),#121317;padding:clamp(20px,3.2vw,52px);min-width:0}
.loginbox{position:relative;max-width:530px;border:1px solid #62646a;border-radius:27px;padding:clamp(26px,3.5vw,55px);background:linear-gradient(135deg,#33343a99,#151619df);box-shadow:0 20px 60px #0009;backdrop-filter:blur(15px)}
.loginbox .eyebrow{color:#bfc1cb;margin:30px 0 10px}
.loginbox h2{font-size:clamp(35px,4vw,62px);line-height:1.05;color:white;margin-bottom:12px;letter-spacing:-1.5px}
.loginbox p{color:#c3c4cd;line-height:1.6;font-size:15px}
.loginbadge{display:table;margin-left:auto;background:#164c2e;color:#aaf6c0;padding:9px 13px;border-radius:30px;font-size:12px;font-weight:800}
.loginbox .field label{color:white;font-size:14px}
.loginbox .field input,.loginbox .field select{background:#292b32;color:white;border:1px solid #7b7e89;min-height:55px;padding:14px;border-radius:13px}
.loginbox .field input::placeholder{color:#b5b6c1}
.loginbox .field select option{color:#17191e;background:#fff}
.loginbox .btn.red{background:linear-gradient(120deg,#fc2b43,#dc0928);min-height:60px;border-radius:13px;font-size:16px;margin-top:8px}
.logindivider{display:flex;align-items:center;gap:16px;color:#7c7e87;margin:25px 0 12px}.logindivider:before,.logindivider:after{content:"";height:1px;background:#53545b;flex:1}
.loginbox .smallprint{color:#bfc0c7;font-size:11px;line-height:1.8}
@media(max-width:1100px){.login{grid-template-columns:minmax(0,1fr) minmax(340px,.9fr)}.loginfeatures{gap:10px}.loginart{padding:28px}.loginbox{padding:25px}.loginart-inner{min-height:calc(100dvh - 56px)}}
@media(max-width:750px){.login{grid-template-columns:minmax(0,1fr)}.loginart{min-height:0;padding:25px 20px 18px}.loginart:before{background-position:center 45%}.loginart:after{background:linear-gradient(90deg,#08090cef,rgba(8,9,12,.6)),linear-gradient(0deg,#08090caa,transparent)}.loginart-inner{min-height:0}.loginart .brand{font-size:29px}.loginart .brand small{margin-left:35px;font-size:8px}.loginpitch{padding:28px 0 8px}.loginart h1{font-size:clamp(36px,9vw,52px);margin:0 0 10px}.loginart p{font-size:13px;line-height:1.5;margin:0}.loginfeatures{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:18px}.loginfeatures span{font-size:21px}.loginfeatures small{font-size:10px}.loginpromise{display:none}.loginform{padding:16px 14px 28px;display:block}.loginbox{max-width:100%;padding:23px 20px;border-radius:20px}.loginbox .eyebrow{margin:10px 0 5px}.loginbox h2{font-size:36px}.loginbox p{margin:0 0 17px;font-size:13px}.loginbox .field{margin-bottom:12px}.loginbox .field input,.loginbox .field select{min-height:49px}.loginbox .btn.red{min-height:53px}.logindivider{margin:15px 0 7px}}
@media(min-width:751px) and (max-height:680px){.loginart-inner{min-height:0}.loginpitch{padding:25px 0}.loginfeatures{margin-top:10px}.loginpromise{display:none}.loginbox{padding:23px}.loginbox .eyebrow{margin-top:10px}}

/* V9 · Motorcycle stays visible on phones and portrait tablets.
   The photograph has its own stage instead of being hidden behind the headline. */
@media (min-width:751px) and (max-width:1100px){
  .loginart:before{background-position:57% center}
  .loginart:after{background:linear-gradient(90deg,rgba(4,5,8,.91) 0%,rgba(4,5,8,.68) 44%,rgba(4,5,8,.12) 100%),linear-gradient(0deg,#08090cbd,transparent 55%)}
}
@media (max-width:900px) and (orientation:portrait), (max-width:750px){
  .login{display:flex;flex-direction:column}
  .loginart{display:block;min-height:0;padding:0;background:#090b0e;overflow:hidden}
  .loginart:before{inset:0 0 auto 0;height:clamp(245px,48vw,365px);background-size:cover;background-position:center 47%;filter:saturate(1.08) contrast(1.08)}
  .loginart:after{inset:0 0 auto 0;height:clamp(245px,48vw,365px);background:linear-gradient(180deg,#05060870 0%,#05060808 32%,#090b0e 100%),linear-gradient(90deg,#05060877,transparent 70%)}
  .loginart-inner{min-height:0;max-width:none;padding:24px clamp(18px,5vw,42px) 15px}
  .loginart .brand{position:relative;z-index:1;font-size:clamp(28px,4vw,37px);text-shadow:0 3px 15px #000}
  .loginpitch{padding:clamp(205px,39vw,320px) 0 0;margin:0}
  .loginart h1{font-size:clamp(30px,5.8vw,46px);margin:0 0 8px;letter-spacing:-1.2px}
  .loginart p{font-size:13px;line-height:1.5;max-width:620px}
  .loginfeatures{max-width:540px;margin-top:15px;gap:9px}
  .loginfeatures span{font-size:20px}
  .loginfeatures small{font-size:11px}
  .loginpromise{display:none}
  .loginform{padding:16px clamp(14px,5vw,42px) 35px;display:block}
  .loginbox{max-width:620px;margin:auto}
}
@media(max-width:480px){
  .loginart:before,.loginart:after{height:260px}
  .loginart-inner{padding:18px 18px 12px}
  .loginpitch{padding-top:215px}
  .loginart h1{font-size:clamp(30px,8vw,38px)}
  .loginfeatures{grid-template-columns:repeat(3,minmax(0,1fr))}
  .loginfeatures small{font-size:10px}
  .loginbox{padding:22px 18px}
}

.device-person{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 0;border-bottom:1px solid #e5e7eb}.device-person>div:first-child{flex:1;min-width:0}.device-link{display:block;width:100%;margin-top:9px;padding:10px;border:1px solid #d8dce3;border-radius:8px;background:#f7f8fa;font-size:12px}.device-actions{display:flex;gap:8px;flex-wrap:wrap}@media(max-width:650px){.device-person{display:block}.device-actions{margin-top:10px}.device-actions .btn{flex:1}}

/* V18: panel realista de mecánicos incrustado en ADMIN */
.preview-shell{display:grid;grid-template-columns:180px minmax(0,1fr);border:1px solid #e4e7ed;border-radius:14px;overflow:hidden;margin-top:12px;background:#f3f5f8}.preview-sidebar{background:#111318;color:#fff;padding:18px 12px;display:flex;flex-direction:column;gap:7px}.preview-brand{font-weight:900;font-size:16px;padding:8px 8px 18px}.preview-brand b{color:#ef233f}.preview-brand small{display:block;font-size:9px;letter-spacing:1px;margin-top:4px;color:#aab0bf}.preview-tab{width:100%;border:0;border-radius:8px;text-align:left;padding:12px 10px;background:transparent;color:#e5e7eb;font-weight:700;cursor:pointer}.preview-tab.active{background:#ef233f;color:#fff}.preview-tab:hover:not(.active){background:#30343c}.preview-foot{font-size:11px;color:#aab0bf;margin-top:auto;padding:24px 8px 8px}.preview-main{min-width:0;padding:20px}.preview-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px}.preview-header h2{margin:4px 0 0}.preview-main .card{margin-bottom:12px}.preview-main fieldset[disabled]{opacity:.88}.preview-main .tablewrap{overflow:auto}@media(max-width:720px){.preview-shell{grid-template-columns:1fr}.preview-sidebar{padding:12px;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center}.preview-brand{width:100%;padding:4px}.preview-tab{width:auto;flex:1;min-width:100px;text-align:center;font-size:12px}.preview-foot{display:none}.preview-main{padding:12px}.preview-header{flex-wrap:wrap}}

.demo-quick{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px;margin-bottom:12px;border:1px solid #e4e6ec;background:#fff;border-radius:12px;font-size:12px;font-weight:700;color:#505766}.demo-quick .btn{white-space:nowrap}@media(max-width:480px){.demo-quick{padding:8px 10px}}

/* V28: vista previa integrada de la landing comercial en el panel de José */
.plus-preview-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:18px 0 10px}.plus-preview-head strong{display:block;font-size:14px;letter-spacing:.03em}.plus-preview-head small{display:block;color:#748095;margin-top:5px}.plus-preview-actions{display:flex;gap:8px;flex-wrap:wrap}.plus-preview-frame{width:100%;height:540px;overflow:hidden;border:1px solid #dce1e8;border-radius:15px;background:#101116;box-shadow:0 9px 30px rgba(20,30,45,.12)}.plus-preview-frame iframe{display:block;width:100%;height:100%;border:0;background:#fff}.plus-preview-hint{font-size:12px;color:#687588;margin:10px 0 22px}.plus-edit-title{font-size:13px;font-weight:800;padding:13px 0;border-top:1px solid #e5e9ef;margin-bottom:12px}@media(max-width:680px){.plus-preview-frame{height:470px}.plus-preview-head{align-items:flex-start}.plus-preview-actions .btn{font-size:11px}}

.plus-offer-row{display:flex;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid #e5e9ef;flex-wrap:wrap}.plus-offer-row img{width:68px;height:54px;object-fit:cover;border-radius:8px}.plus-offer-row>div{flex:1;min-width:130px}.plus-offer-row small{display:block;color:#657186;margin-top:4px}.plus-offer-row .btn{font-size:11px}@media(max-width:700px){.plus-offer-row .btn{padding:8px 10px}}

/* V29 base: la página web destaca discretamente; rojo solamente para la vista activa. */
.sidebar .nav button[data-nav="webplus"]:not(.active){border-left:3px solid #df3150;font-weight:800}
.sidebar .nav button[data-nav="webplus"].active{border-left:3px solid #fff}

/* V29: herramientas comerciales de compartir (sin tocar lógica del taller) */
.web-promo-panel{display:grid;grid-template-columns:minmax(0,1fr) 164px;gap:20px;background:linear-gradient(125deg,#151a22,#2a131b);color:white;padding:22px;border-radius:18px;margin:17px 0 8px;border:1px solid #513039;align-items:center;box-shadow:0 12px 28px #08080816}
.web-promo-kicker{font-size:10px;font-weight:900;letter-spacing:1.8px;color:#ff7f8f}.web-promo-copy h3{color:white;font-size:clamp(21px,2.6vw,28px);line-height:1.2;margin:9px 0}.web-promo-copy p{color:#e0dadd;line-height:1.5;margin:0 0 15px;max-width:570px}.web-promo-actions{display:flex;gap:8px;flex-wrap:wrap}.web-promo-actions .btn{font-size:12px;white-space:nowrap}.web-public-url{margin-top:13px;color:#ded2d6;font-size:12px;overflow-wrap:anywhere}.web-promo-qr{border-radius:14px;background:#fff;color:#1a1a1a;padding:12px;display:flex;align-items:center;flex-direction:column;gap:7px;text-align:center}.web-promo-qr img{display:block;width:120px;height:120px;object-fit:contain}.web-promo-qr strong{font-size:10px;letter-spacing:1px}.web-promo-qr a{font-size:12px;font-weight:850;color:#bd1530;text-decoration:none}.web-publish-hint{font-size:12px;color:#65707b;line-height:1.45;margin:8px 0 20px}@media(max-width:740px){.web-promo-panel{grid-template-columns:1fr;padding:15px}.web-promo-qr{max-width:170px;width:100%}.web-promo-actions .btn{flex:1;min-width:150px;text-align:center}.web-promo-qr img{width:112px;height:112px}}

/* QR administrativo: tamaño fijo y seguro */
.web-promo-panel{grid-template-columns:minmax(0,1fr) 164px!important;align-items:center!important}
.web-promo-qr{width:164px!important;max-width:164px!important;box-sizing:border-box!important}
.web-promo-qr img{width:116px!important;height:116px!important;max-width:100%!important;aspect-ratio:1!important;object-fit:contain!important}
.web-promo-qr a{display:block!important;line-height:1.35!important}
@media(max-width:740px){.web-promo-panel{grid-template-columns:minmax(0,1fr)!important}.web-promo-qr{width:156px!important;max-width:156px!important}.web-promo-qr img{width:108px!important;height:108px!important}}

/* Editor de fotografías de promociones */
.offer-photo-tools{margin-top:12px;padding:13px;background:#f7f8fa;border:1px solid #dde2e9;border-radius:12px;display:flex;flex-direction:column;gap:7px}.offer-photo-tools label{font-size:12px;font-weight:800;color:#242933}.offer-photo-tools input{max-width:100%;font-size:13px}.offer-photo-tools small{font-size:11px;line-height:1.45;color:#626975}.offer-photo-preview{display:block;width:180px;max-width:100%;height:110px;object-fit:cover;border-radius:10px}.offer-photo-preview[hidden]{display:none}