/* Alta rápida con la misma identidad visual de los paneles Rolo. */
:root{--paper:#f3f0eb;--card:#fffdfa;--ink:#21191a;--muted:#756a6c;--line:#e3dbd2;--wine:#741f34;--wine-dark:#571728;--wine-soft:#f6e9ec;--gold:#d7b56a;--navy:#4b1423;--shadow:0 18px 55px rgba(52,22,30,.08)}
body{background:radial-gradient(circle at 82% 8%,rgba(183,138,66,.08),transparent 25%),var(--paper)}
.topbar{height:78px;padding:0 max(22px,calc((100vw - 1480px)/2));color:#fff8f3;background:linear-gradient(110deg,#4b1423,#701e35 62%,#3b101c);border:0;box-shadow:0 14px 40px rgba(62,15,30,.16)}
.brand{gap:14px}.brand>img{display:block;width:142px;height:auto;object-fit:contain;filter:drop-shadow(0 7px 16px rgba(0,0,0,.18))}.brand>span{padding-left:14px;border-left:1px solid rgba(255,255,255,.2)}.brand b{color:#fff;font:800 13px/1.2 var(--sans)}.brand small{margin-top:3px;color:rgba(255,255,255,.52);font-size:9px}
.save-state{color:rgba(255,255,255,.68)}.save-state>i{box-shadow:0 0 0 4px rgba(255,255,255,.08)}.restart-button{border-color:rgba(255,255,255,.22);color:#fff;background:rgba(255,255,255,.06)}.restart-button:hover{border-color:var(--gold);color:#fff;background:rgba(255,255,255,.12)}.role-badge{color:#351019;background:linear-gradient(135deg,#f0d58f,#c89a52)}
.shell{grid-template-columns:240px minmax(0,1fr);gap:38px;padding-top:38px}.sidebar{top:106px}.progress-card{background:linear-gradient(145deg,#4b1423,#761f38);box-shadow:0 18px 45px rgba(78,19,38,.16)}.progress i{background:linear-gradient(90deg,#efd48d,#c99445)}
.sidebar nav button{border:1px solid transparent}.sidebar nav button:hover,.sidebar nav button.active{color:#3a111d;background:#fff;border-color:var(--line);box-shadow:0 8px 22px rgba(43,21,27,.06)}.sidebar nav button.active>b{color:#fff;border-color:var(--wine);background:var(--wine)}
.prototype-note{margin-bottom:30px;border-color:#e2d3b6;background:#fff9eb;box-shadow:0 7px 20px rgba(54,34,22,.035)}
.step-heading{margin-bottom:28px}.step-heading h1{max-width:780px;font-size:clamp(38px,4.2vw,58px)}.step-heading p{font-size:15px}.step-status{padding:8px 12px}
.card{padding:24px;border-radius:20px;box-shadow:0 8px 28px rgba(53,26,32,.045)}.product-types span,.function-option,.calendar-option,.category-editor{border-radius:14px}.product-types input:checked+span{box-shadow:0 12px 28px rgba(116,31,52,.09)}
.import-methods{gap:9px}.import-methods button{border-radius:14px}.import-methods button.active{box-shadow:0 10px 26px rgba(116,31,52,.1)}
.preview-column{border-radius:22px;background:#e9dfd4}.phone{border-color:#21191a;border-radius:29px}.step-actions button,.import-actions button,.import-actions a,.paste-actions button,.editor-actions button,.text-button,.preview-head button,.validation-card button{border-radius:12px}.primary{box-shadow:0 10px 25px rgba(116,31,52,.16)}
body[data-embedded="true"] .shell{padding:26px;gap:26px}body[data-embedded="true"] .sidebar{top:26px}
@media(max-width:780px){.topbar{height:68px}.brand>img{width:112px}.brand>span{display:none}.top-actions{gap:8px}.restart-button{padding:7px 9px}.shell{padding-top:20px}.sidebar{margin-bottom:20px}.prototype-note{margin-bottom:22px}.step-heading h1{font-size:38px}.card{padding:18px}}
@media(max-width:450px){.save-state{display:none}.topbar{padding:0 12px}.brand>img{width:104px}.role-badge{font-size:8px}.restart-button{font-size:9px}.step-heading h1{font-size:33px}}

/* Modo app dentro de admin y colaborador: navegación táctil, sin doble panel ni
   barras que desperdicien pantalla. La misma interfaz funciona en tablet y móvil. */
@media(max-width:1100px),(orientation:landscape) and (max-height:900px) and (pointer:coarse){
  body[data-embedded="true"]{min-height:100dvh;background:var(--paper)}
  body[data-embedded="true"] .shell{display:block;max-width:none;padding:0 0 94px}
  body[data-embedded="true"] .sidebar{position:sticky;z-index:60;top:0;max-height:none;margin:0;padding:9px 14px 10px;border-bottom:1px solid var(--line);background:rgba(244,239,231,.96);box-shadow:0 8px 24px rgba(48,23,30,.07);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
  body[data-embedded="true"] .progress-card{display:grid;grid-template-columns:auto auto minmax(90px,1fr);align-items:center;gap:8px;padding:7px 10px;border-radius:12px;box-shadow:none}
  body[data-embedded="true"] .progress-card>span{font-size:8px}
  body[data-embedded="true"] .progress-card strong{display:block;margin:0;font:700 18px/1 var(--sans)}
  body[data-embedded="true"] .progress-card .progress{height:5px}
  body[data-embedded="true"] .progress-card small{display:none}
  body[data-embedded="true"] .sidebar nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:7px 0 0;padding:0;overflow:visible}
  body[data-embedded="true"] .sidebar nav button{min-width:0;min-height:48px;justify-content:center;padding:7px 8px;border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--muted);text-align:center}
  body[data-embedded="true"] .sidebar nav button.active{border-color:var(--wine);background:var(--wine);color:#fff;box-shadow:0 8px 20px rgba(116,31,52,.14)}
  body[data-embedded="true"] .sidebar nav button>b{width:25px;height:25px;background:rgba(255,255,255,.72)}
  body[data-embedded="true"] .sidebar nav button.active>b{border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.16)}
  body[data-embedded="true"] .sidebar nav span{min-width:0;font-size:11px;line-height:1.15}
  body[data-embedded="true"] .sidebar nav small{display:none}
  body[data-embedded="true"] main{padding:20px clamp(14px,3vw,30px) 12px}
  body[data-embedded="true"] .step-heading{margin-bottom:18px}
  body[data-embedded="true"] .step-heading h1{font-size:clamp(34px,5vw,48px)}
  body[data-embedded="true"] .content-layout{grid-template-columns:minmax(0,1fr)}
  body[data-embedded="true"] .preview-column{position:relative;top:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,.72fr);gap:10px}
  body[data-embedded="true"] .preview-head,body[data-embedded="true"] .preview-note{grid-column:1/-1}
  body[data-embedded="true"] .phone{height:520px;min-height:0}
  body[data-embedded="true"] .step-actions{position:fixed;z-index:70;right:0;bottom:0;left:0;min-height:70px;margin:0;padding:10px max(14px,calc((100vw - 920px)/2)) calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:rgba(255,253,250,.96);box-shadow:0 -12px 34px rgba(43,18,26,.1);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
  body[data-embedded="true"] .step-actions>span:empty{display:none}
  body[data-embedded="true"] .step-actions button{min-height:48px;flex:1;font-size:13px}
}
@media(max-width:700px){
  body[data-embedded="true"] main{padding:15px 12px 8px}
  body[data-embedded="true"] .sidebar{padding:7px 8px 8px}
  body[data-embedded="true"] .progress-card{grid-template-columns:auto auto 1fr;padding:6px 9px}
  body[data-embedded="true"] .sidebar nav{gap:5px;margin-top:6px}
  body[data-embedded="true"] .sidebar nav button{min-height:45px;gap:5px;padding:6px 4px}
  body[data-embedded="true"] .sidebar nav button>b{width:23px;height:23px;font-size:9px}
  body[data-embedded="true"] .sidebar nav span{font-size:9.5px}
  body[data-embedded="true"] .step-heading{display:grid;gap:9px;margin-bottom:14px}
  body[data-embedded="true"] .step-heading h1{margin:5px 0 6px;font-size:30px;line-height:1.02}
  body[data-embedded="true"] .step-heading p{font-size:12.5px;line-height:1.48}
  body[data-embedded="true"] .step-status{justify-self:start;margin:0;padding:6px 9px}
  body[data-embedded="true"] .card{margin-bottom:10px;padding:15px;border-radius:16px}
  body[data-embedded="true"] .card-heading{margin-bottom:13px}
  body[data-embedded="true"] .card-heading h2{font-size:23px}
  body[data-embedded="true"] .product-types{grid-template-columns:1fr 1fr;gap:7px}
  body[data-embedded="true"] .product-types span{min-height:104px;padding:12px}
  body[data-embedded="true"] .product-types input:checked+span{padding:11px}
  body[data-embedded="true"] .product-types i{margin-bottom:10px}
  body[data-embedded="true"] .import-methods{grid-template-columns:1fr 1fr;gap:7px}
  body[data-embedded="true"] .import-methods button{min-height:76px;padding:10px}
  body[data-embedded="true"] .import-methods button.active{padding:9px}
  body[data-embedded="true"] .external-intro{padding:10px 11px}
  body[data-embedded="true"] .preview-column{display:block;margin:0 0 10px;padding:11px;border-radius:15px}
  body[data-embedded="true"] .preview-column .phone,body[data-embedded="true"] .preview-note{display:none}
  body[data-embedded="true"] .preview-head{margin:0}
  body[data-embedded="true"] .preview-head button{min-height:42px;padding:8px 12px}
  body[data-embedded="true"] .field input,body[data-embedded="true"] .field select{height:50px}
  body[data-embedded="true"] .function-option{min-height:62px}
  body[data-embedded="true"] .step-actions{gap:8px;min-height:68px;padding:9px 10px calc(9px + env(safe-area-inset-bottom))}
  body[data-embedded="true"] .step-actions button{min-width:0;padding:9px 10px;font-size:11.5px}
  body[data-embedded="true"] .final-state{align-items:flex-start;padding:15px}
  body[data-embedded="true"] .final-state h2{font-size:21px}
}
@media(max-width:380px){body[data-embedded="true"] .product-types,body[data-embedded="true"] .import-methods{grid-template-columns:1fr}body[data-embedded="true"] .product-types span{min-height:88px}}

/* Afinado para 800 x 1340: mantiene dos columnas útiles y reduce el recorrido
   sin convertir la tablet en una versión ampliada del teléfono. */
@media(min-width:701px) and (max-width:900px){
  body[data-embedded="true"] .shell{padding-bottom:88px}
  body[data-embedded="true"] .sidebar{padding:9px 16px 10px}
  body[data-embedded="true"] main{padding:18px 20px 10px}
  body[data-embedded="true"] .step-heading h1{font-size:42px}
  body[data-embedded="true"] .product-types span{min-height:116px}
  body[data-embedded="true"] .import-methods button{min-height:82px}
  body[data-embedded="true"] .sidebar nav button,body[data-embedded="true"] .step-actions button,body[data-embedded="true"] .field input,body[data-embedded="true"] .field select{min-height:50px}
}

/* En horizontal el progreso y los pasos comparten una sola franja. Así queda
   más alto disponible para capturar el menú y revisar la demo. */
@media(orientation:landscape) and (max-height:900px) and (pointer:coarse){
  body[data-embedded="true"] .shell{padding-bottom:78px}
  body[data-embedded="true"] .sidebar{display:grid;grid-template-columns:minmax(250px,.55fr) minmax(0,1fr);align-items:center;gap:12px;padding:7px 18px}
  body[data-embedded="true"] .progress-card{grid-template-columns:auto auto minmax(80px,1fr);margin:0}
  body[data-embedded="true"] .sidebar nav{margin:0}
  body[data-embedded="true"] .sidebar nav button{min-height:48px}
  body[data-embedded="true"] main{padding:14px 24px 8px}
  body[data-embedded="true"] .step-heading{margin-bottom:14px}
  body[data-embedded="true"] .step-heading h1{font-size:36px}
  body[data-embedded="true"] .step-heading p{font-size:13px}
  body[data-embedded="true"] .card{padding:18px}
  body[data-embedded="true"] .product-types span{min-height:108px;padding:13px}
  body[data-embedded="true"] .product-types input:checked+span{padding:12px}
  body[data-embedded="true"] .product-types i{margin-bottom:11px}
  body[data-embedded="true"] .import-methods button{min-height:72px}
  body[data-embedded="true"] .preview-column{display:block;margin-bottom:10px}
  body[data-embedded="true"] .preview-column .phone,body[data-embedded="true"] .preview-note{display:none}
  body[data-embedded="true"] .preview-head{margin:0}
  body[data-embedded="true"] .step-actions{min-height:66px;padding:8px max(20px,calc((100vw - 1100px)/2)) calc(8px + env(safe-area-inset-bottom))}
}