/*
  Onboarding wizard -- FoodIQ
  Mismos tokens de marca ya usados en el resto del panel (navy/teal/verde/
  terracota, tipografía Outfit). Nombres de clase calcados 1:1 del mockup
  validado con Alvaro para que la auditoría visual sea directa.
*/
:root{
  --ob-navy:#001529;
  --ob-navy-2:#0a2540;
  --ob-crema:#F6FBF7;
  --ob-verde:#8ECF6A;
  --ob-teal:#18A293;
  --ob-teal-dk:#127a70;
  --ob-terracota:#E8734A;
  --ob-ink:#12222f;
  --ob-muted:#6b7c86;
  --ob-line:#e3ece7;
  --ob-card:#ffffff;
  --ob-radius:14px;
}
.ob-app,.ob-app *,.ob-app *::before,.ob-app *::after{box-sizing:border-box;}
.ob-app{font-family:'Outfit',system-ui,sans-serif;display:grid;grid-template-columns:290px 1fr;min-height:100vh;background:var(--ob-crema);color:var(--ob-ink);}

/* ---------- SIDEBAR ---------- */
.ob-sidebar{background:linear-gradient(180deg,var(--ob-navy) 0%, var(--ob-navy-2) 100%);color:#cfe0e6;padding:28px 22px 22px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;}
.ob-brand{margin-bottom:20px;}
.ob-logo-link{display:block;}
.ob-logo-img{max-width:190px;width:100%;height:auto;display:block;}
.ob-trial-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(142,207,106,0.12);border:1px solid rgba(142,207,106,0.35);color:var(--ob-verde);font-size:11.5px;font-weight:600;padding:6px 10px;border-radius:20px;margin-bottom:24px;width:fit-content;}
.ob-progress-wrap{margin-bottom:22px;}
.ob-progress-label{display:flex;justify-content:space-between;font-size:12px;color:#8ba3ae;margin-bottom:7px;}
.ob-progress-label b{color:#fff;font-weight:600;}
.ob-progress-track{height:6px;border-radius:6px;background:rgba(255,255,255,0.08);overflow:hidden;}
.ob-progress-fill{height:100%;background:linear-gradient(90deg,var(--ob-teal),var(--ob-verde));border-radius:6px;}
.ob-steps{list-style:none;margin:0;padding:0;flex:1;overflow-y:auto;}
.ob-steps li{display:flex;align-items:flex-start;gap:12px;padding:11px 10px;border-radius:10px;margin-bottom:2px;}
.ob-steps li.active{background:rgba(24,162,147,0.16);}
.ob-steps li.disabled{opacity:.45;}
.ob-steps li.clickable{padding:0;}
.ob-step-link{display:flex;align-items:flex-start;gap:12px;width:100%;padding:11px 10px;border-radius:10px;text-decoration:none;color:inherit;cursor:pointer;transition:background .15s ease;}
.ob-step-link:hover{background:rgba(255,255,255,0.07);}
.ob-steps li.active .ob-step-link:hover{background:rgba(24,162,147,0.24);}
.ob-step-num{flex:none;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;background:rgba(255,255,255,0.08);color:#93a9b3;border:1.5px solid rgba(255,255,255,0.14);}
.ob-steps li.active .ob-step-num{background:var(--ob-teal);color:#fff;border-color:var(--ob-teal);}
.ob-steps li.done .ob-step-num{background:var(--ob-verde);color:#06210c;border-color:var(--ob-verde);}
.ob-step-txt .t1{font-size:13.5px;font-weight:600;color:#e8f0f2;}
.ob-steps li.active .ob-step-txt .t1{color:#fff;}
.ob-step-txt .t2{font-size:11px;color:#7f97a3;margin-top:1px;}
.ob-step-skip{font-size:10px;color:var(--ob-terracota);font-weight:600;margin-top:2px;}
.ob-sidebar-foot{font-size:11px;color:#5f7681;line-height:1.5;border-top:1px solid rgba(255,255,255,0.08);padding-top:14px;margin-top:10px;}

/* ---------- MAIN ---------- */
.ob-main{padding:34px 46px 46px;max-width:900px;}
.ob-main-wide{max-width:1380px;}
.ob-topline{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px;flex-wrap:wrap;row-gap:8px;}
.ob-crumb{font-size:12.5px;color:var(--ob-muted);font-weight:500;}
.ob-crumb b{color:var(--ob-teal);}
/* Botón "Ir al panel principal" del topline (26/09/2026) -- visible Paso 2 a 8. */
.ob-btn-dashboard{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--ob-teal-dk);background:#fff;border:1.5px solid var(--ob-teal);border-radius:999px;padding:8px 15px;text-decoration:none;white-space:nowrap;transition:background .15s ease,color .15s ease;}
.ob-btn-dashboard i{font-size:11px;}
.ob-btn-dashboard:hover{background:var(--ob-teal);color:#fff;text-decoration:none;}
/* Texto aclaratorio debajo del botón (27/09/2026) -- ver layout.blade.php. */
.ob-dashboard-btn-wrap{display:flex;flex-direction:column;align-items:flex-end;gap:6px;max-width:100%;}
.ob-dashboard-hint{margin:0;font-size:11px;line-height:1.4;color:var(--ob-muted);text-align:right;white-space:nowrap;}
@media (max-width:640px){
  .ob-topline{flex-wrap:wrap;gap:10px;}
  .ob-btn-dashboard{padding:7px 12px;font-size:11.5px;}
  .ob-dashboard-btn-wrap{align-items:flex-start;}
  .ob-dashboard-hint{text-align:left;white-space:normal;}
}
.ob-step-head{margin-bottom:22px;}
.ob-step-head h1{font-size:26px;font-weight:700;margin:0 0 6px;letter-spacing:-.01em;}
.ob-step-head p{font-size:14.5px;color:var(--ob-muted);margin:0;max-width:100%;line-height:1.5;}

.ob-welcome-banner{display:flex;gap:12px;align-items:flex-start;background:#f4faf7;border:1px solid #d7ebe3;border-radius:12px;padding:14px 16px;margin-bottom:20px;}
.ob-wb-emoji{font-size:20px;}
.ob-wb-t{font-size:14px;font-weight:700;color:var(--ob-ink);}
.ob-wb-p{font-size:14px;color:var(--ob-muted);margin-top:2px;}

.ob-field-card{background:var(--ob-card);border:1px solid var(--ob-line);border-radius:var(--ob-radius);padding:20px 22px;margin-bottom:14px;}
.ob-field-card h3{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ob-muted);font-weight:700;margin:0 0 16px;display:flex;align-items:center;gap:8px;}
.ob-field-card h3 i{color:var(--ob-teal);font-size:13px;}

.ob-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;}
.ob-field-item{padding:12px 0;border-bottom:1px solid #f0f4f1;}
.ob-field-item.full{grid-column:1 / -1;}
.ob-field-item-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:6px;}
.ob-field-item-head label{font-size:13.5px;font-weight:600;color:var(--ob-ink);margin:0;}
.ob-field-item input,.ob-field-item select,.ob-field-item textarea{width:100%;padding:9px 12px;border:1.5px solid var(--ob-line);border-radius:9px;font-family:inherit;font-size:13.5px;color:var(--ob-ink);background:#fbfdfc;outline:none;}
.ob-field-item input:focus,.ob-field-item select:focus,.ob-field-item textarea:focus{border-color:var(--ob-teal);background:#fff;box-shadow:0 0 0 3px rgba(24,162,147,0.12);}
.ob-field-item textarea{resize:vertical;min-height:64px;}

/* ---------- Mostrar/ocultar contraseña ---------- */
.ob-password-wrap{position:relative;}
.ob-password-wrap input{padding-right:42px;}
.ob-password-toggle{
  position:absolute;right:5px;top:50%;transform:translateY(-50%);
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:none;border:none;color:var(--ob-muted);cursor:pointer;font-size:14px;line-height:1;
  transition:background .15s ease, color .15s ease;
}
.ob-password-toggle i{pointer-events:none;}
.ob-password-toggle:hover{background:#eef3f0;color:var(--ob-teal-dk);}
.ob-password-toggle:focus-visible{outline:2px solid var(--ob-teal);outline-offset:1px;}
.ob-field-hint{font-size:11.5px;color:var(--ob-muted);margin-top:5px;}
.ob-field-error{font-size:11.5px;color:var(--ob-terracota);margin-top:5px;font-weight:600;display:none;}
.ob-field-error.show{display:block;}
.ob-invalid{border-color:var(--ob-terracota) !important;background:#fff6f3 !important;}
.ob-db-ref{display:none;} /* visible solo en el mockup de validación, no en producción */

.ob-tag{flex:none;font-size:10.5px;font-weight:700;letter-spacing:.02em;padding:5px 10px;border-radius:20px;white-space:nowrap;}
.ob-tag.req{background:rgba(232,115,74,0.12);color:var(--ob-terracota);}
.ob-tag.opt{background:rgba(142,207,106,0.15);color:#4c8a2c;}

.ob-tip-box{background:#eaf7f1;border:1px solid #cfe9de;border-radius:10px;padding:12px 14px;font-size:12.5px;color:#1f6e52;line-height:1.55;display:flex;gap:9px;margin-top:14px;}
.ob-tip-box b{color:#0f4a35;}
.ob-note-box{background:#fff7ef;border:1px solid #f4dcc4;border-radius:12px;padding:14px 16px;font-size:13px;color:#8a5a2f;line-height:1.55;display:flex;gap:10px;margin-top:18px;}
.ob-note-box-success{background:rgba(24,162,147,0.08);border-color:rgba(24,162,147,0.3);color:var(--ob-teal-dk);}
.ob-note-box i{color:var(--ob-terracota);margin-top:2px;}

.ob-day-pills{display:flex;flex-wrap:wrap;gap:7px;}
.ob-day-pill{width:44px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;border:1.5px solid var(--ob-line);color:var(--ob-muted);cursor:pointer;background:#fff;}
.ob-day-pill.on{background:var(--ob-teal);border-color:var(--ob-teal);color:#fff;}

.ob-tax-existing{display:flex;align-items:center;gap:8px;background:#f1f6f2;color:var(--ob-teal-dk);padding:8px 13px;border-radius:20px;font-size:12.5px;font-weight:700;width:fit-content;margin-bottom:8px;}
.ob-btn-add-tax{background:transparent;border:1.5px dashed #b9cbc3;color:var(--ob-teal-dk);padding:8px 14px;border-radius:20px;font-size:12px;font-weight:700;cursor:pointer;}

.ob-upload-box{border:1.5px dashed var(--ob-line);border-radius:10px;padding:16px;text-align:center;font-size:12.5px;color:var(--ob-muted);background:#fbfdfc;cursor:pointer;display:block;}
.ob-upload-box i{font-size:20px;color:var(--ob-teal);display:block;margin-bottom:6px;}
.ob-upload-preview{max-width:120px;max-height:80px;display:block;margin:0 auto 8px;border-radius:8px;object-fit:contain;}

/* ---------- Patrón Sí / No (mismo del mockup) ---------- */
.ob-yn-btn{padding:7px 15px;border-radius:20px;border:1.5px solid var(--ob-line);background:#fff;font-size:12px;font-weight:700;color:var(--ob-muted);cursor:pointer;}
.ob-yn-btn[data-yn="si"].active{background:var(--ob-teal);border-color:var(--ob-teal);color:#fff;}
.ob-yn-btn[data-yn="no"].active{background:#eef3f0;border-color:var(--ob-line);color:var(--ob-ink);}
.ob-yn-detail{margin-top:14px;}

.ob-footer{margin-top:24px;padding:16px 4px 4px;border-top:1px solid var(--ob-line);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;}
.ob-btn{border:none;border-radius:10px;padding:11px 22px;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:8px;text-decoration:none;}
.ob-btn-primary{background:var(--ob-teal);color:#fff;box-shadow:0 6px 16px rgba(24,162,147,0.28);}
.ob-btn-primary:hover{background:var(--ob-teal-dk);color:#fff;}
.ob-btn-ghost{background:transparent;color:var(--ob-muted);}
.ob-footer-status{font-size:12px;color:var(--ob-muted);}

@media (max-width:880px){
  .ob-app{grid-template-columns:1fr;}
  .ob-sidebar{position:relative;height:auto;}
  .ob-main{padding:24px 20px 40px;}
}

/* ---------- Fase 2 (31/08/2026): pasos 3-8 ---------- */

/* Paso 4: builder de mesas -- grilla simple de cuadrados de vista previa */
.ob-mesa-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.ob-mesa-chip{width:52px;height:52px;border-radius:10px;background:#eef3f0;border:1.5px solid var(--ob-line);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--ob-ink);}
.ob-mesa-chip.existing{background:rgba(24,162,147,0.12);border-color:var(--ob-teal);color:var(--ob-teal-dk);}

/* Paso 5: lista de zonas de delivery agregadas */
.ob-zone-list{display:flex;flex-direction:column;gap:8px;margin-top:10px;}
.ob-zone-item{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#f7faf8;border:1px solid var(--ob-line);border-radius:10px;padding:10px 14px;font-size:13px;}
.ob-zone-item b{color:var(--ob-ink);}
.ob-zone-item span{color:var(--ob-muted);font-size:12px;}

/* Paso 8: tarjetas de conexión (Meta/TikTok/Gmail) */
.ob-connect-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:10px;}
.ob-connect-card{border:1.5px solid var(--ob-line);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:10px;align-items:flex-start;}
.ob-connect-card i{font-size:22px;color:var(--ob-teal);}
.ob-connect-card.connected{border-color:var(--ob-teal);background:rgba(24,162,147,0.06);}
.ob-connect-card .ob-connect-status{font-size:11px;font-weight:700;color:var(--ob-teal-dk);}

/* Paso 7: dos botones grandes de acción */
.ob-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:10px;}
.ob-choice-card{border:1.5px solid var(--ob-line);border-radius:12px;padding:20px;text-align:center;text-decoration:none;color:var(--ob-ink);transition:border-color .15s ease,background .15s ease;}
.ob-choice-card:hover{border-color:var(--ob-teal);background:rgba(24,162,147,0.05);}
.ob-choice-card i{font-size:26px;color:var(--ob-teal);display:block;margin-bottom:10px;}
.ob-choice-card .t1{font-weight:700;font-size:14px;margin-bottom:4px;}
.ob-choice-card .t2{font-size:12px;color:var(--ob-muted);}

@media (max-width:600px){
  .ob-choice-grid{grid-template-columns:1fr;}
}

/* ---------- Selector de código telefónico (dropdown propio, 02/09/2026 ronda 3) ---------- */
.ob-phone-row{display:flex;gap:6px;align-items:center;}
.ob-phone-code-wrap{position:relative;flex:0 0 auto;}
.ob-phone-code-btn{display:flex;align-items:center;gap:5px;height:38px;padding:0 8px 0 9px;border:1.5px solid var(--ob-line);border-radius:9px;background:#fbfdfc;font-family:inherit;font-size:12.5px;color:var(--ob-ink);cursor:pointer;box-sizing:border-box;}
.ob-phone-code-btn:hover{border-color:var(--ob-teal);}
.ob-phone-code-caret{font-size:9px;color:var(--ob-muted);margin-left:2px;}
.ob-phone-flag{width:18px;height:13px;border-radius:2px;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,0.06);}
.ob-phone-code-list{display:none;position:absolute;top:calc(100% + 4px);left:0;z-index:50;background:#fff;border:1.5px solid var(--ob-line);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,0.12);min-width:180px;max-height:240px;overflow-y:auto;padding:4px;}
.ob-phone-code-list.show{display:block;}
.ob-phone-code-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:7px;font-size:12.5px;color:var(--ob-ink);cursor:pointer;white-space:nowrap;}
.ob-phone-code-item:hover{background:#f1f6f2;}
.ob-phone-code-item.active{background:rgba(24,162,147,0.12);font-weight:700;}
.ob-phone-row input[type="tel"]{flex:1 1 auto;width:auto;min-width:0;height:38px;box-sizing:border-box;}

/* ---------- Grupo B (01/09/2026): rediseño de Canales de Venta ---------- */
.ob-channel-subtitle{font-size:12.5px;color:var(--ob-muted);margin:-6px 0 14px;}
.ob-channel-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.ob-channel-card{border:1.5px solid var(--ob-line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:8px;cursor:pointer;transition:border-color .15s ease,background .15s ease,box-shadow .15s ease;background:#fff;}
.ob-channel-card:hover{border-color:var(--ob-teal);}
.ob-channel-card.active{border-color:var(--ob-teal);background:rgba(24,162,147,0.06);box-shadow:0 0 0 1px var(--ob-teal);}
.ob-channel-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.ob-channel-icon{width:40px;height:40px;border-radius:11px;background:#eef3f0;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--ob-teal-dk);flex:none;transition:background .15s ease,color .15s ease;}
.ob-channel-card.active .ob-channel-icon{background:var(--ob-teal);color:#fff;}
.ob-channel-title{font-size:14px;font-weight:700;color:var(--ob-ink);margin-top:4px;}
.ob-channel-desc{font-size:12px;color:var(--ob-muted);line-height:1.45;}

/* Switch */
.ob-switch{position:relative;display:inline-block;width:40px;height:23px;flex:none;cursor:pointer;}
.ob-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;}
.ob-switch-track{position:absolute;inset:0;background:#d8e0dc;border-radius:999px;transition:background .15s ease;}
.ob-switch-thumb{position:absolute;left:3px;top:3px;width:17px;height:17px;background:#fff;border-radius:50%;transition:transform .15s ease;box-shadow:0 1px 3px rgba(0,0,0,0.25);}
.ob-switch input:checked ~ .ob-switch-track{background:var(--ob-teal);}
.ob-switch input:checked ~ .ob-switch-track .ob-switch-thumb{transform:translateX(17px);}

@media (max-width:600px){
  .ob-channel-grid{grid-template-columns:1fr;}
}

/* ---------- Grupo C (01/09/2026): modal genérico + Pagos/WhatsApp ---------- */
.ob-modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,21,41,0.55);z-index:9999;align-items:center;justify-content:center;padding:20px;}
.ob-modal-overlay.show{display:flex;}
.ob-modal-box{background:#fff;border-radius:16px;padding:24px;width:100%;max-height:88vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,0.3);}
.ob-modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.ob-modal-head b{font-size:16px;color:var(--ob-ink);}
.ob-modal-close{background:#f1f3f2;border:none;width:30px;height:30px;border-radius:50%;color:var(--ob-muted);cursor:pointer;flex:none;}
.ob-modal-close:hover{background:#e5e9e7;}

/* Selección de proveedor de pago (adaptado de la pantalla real de Canales de Venta) */
.pov-provider-btn{flex:1;height:130px;border-radius:14px;border:1.5px solid var(--ob-line);background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease;}
.pov-provider-btn img{max-width:88%;max-height:90px;}
.pov-provider-btn:hover{border-color:var(--ob-teal);box-shadow:0 4px 14px rgba(24,162,147,0.15);}
.pov-env-btn{flex:1;padding:9px;border-radius:8px;border:1.5px solid var(--ob-line);background:#fff;color:var(--ob-muted);font-size:12.5px;font-weight:600;cursor:pointer;}
.pov-env-btn.active{background:var(--ob-teal);border-color:var(--ob-teal);color:#fff;}

/* Modal de WhatsApp -- QR */
.ob-wa-qr-row{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;}
.ob-wa-qr-square{width:180px;height:180px;background:#f6f5f0;border-radius:10px;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;}
.ob-wa-qr-steps{flex:1;min-width:160px;display:flex;flex-direction:column;gap:12px;padding-top:2px;}
.ob-wa-qr-step{display:flex;gap:9px;align-items:flex-start;}
.ob-wa-qr-step p{margin:0;font-size:12.5px;font-weight:600;color:var(--ob-ink);line-height:1.4;}
.ob-wa-qr-step-num{width:20px;height:20px;border-radius:50%;background:var(--ob-navy);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}

@media (max-width:600px){
  .ob-modal-box{padding:18px;}
  .ob-wa-qr-square{width:150px;height:150px;}
}

/* ---------- Grupo D (01/09/2026): Cajas, Mesas, Zonas de delivery + mapa ---------- */

/* Cajas (punto 8) */
.ob-caja-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:10px;}
.ob-caja-card{border:1.5px solid var(--ob-line);border-radius:12px;padding:16px 14px;text-align:center;background:rgba(24,162,147,0.04);position:relative;}
.ob-caja-card i{font-size:20px;color:var(--ob-teal);}
.ob-caja-card .t1{font-weight:700;font-size:13.5px;color:var(--ob-ink);margin-top:8px;}
.ob-caja-card .t2{font-size:11px;color:var(--ob-teal-dk);font-weight:600;margin-top:2px;}
.ob-caja-card-edit{position:absolute;top:6px;right:6px;width:22px;height:22px;border:none;border-radius:6px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,0.12);color:var(--ob-muted);font-size:10.5px;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.ob-caja-card-edit:hover{color:var(--ob-teal-dk);}
.ob-caja-add{border:1.5px dashed var(--ob-line);border-radius:12px;padding:16px 14px;text-align:center;background:none;cursor:pointer;color:var(--ob-muted);font-size:12.5px;font-weight:600;transition:border-color .15s ease,color .15s ease;}
.ob-caja-add i{font-size:18px;display:block;margin-bottom:6px;}
.ob-caja-add:hover{border-color:var(--ob-teal);color:var(--ob-teal-dk);}

/* Badge de zona (Mesas, punto 9) */
.ob-zone-badge{display:inline-flex;align-items:center;gap:4px;background:rgba(24,162,147,0.1);color:var(--ob-teal-dk);font-weight:700;font-size:11px;padding:2px 8px;border-radius:999px;}

/* Zonas de delivery: layout cards + mapa (puntos 10-11) */
.ob-dz-layout{display:flex;gap:20px;align-items:flex-start;margin-top:10px;}
.ob-dz-side{width:340px;flex-shrink:0;}
.ob-dz-map-col{flex:1;min-width:0;}
.ob-zonecard-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;}
.ob-zonecard{border:1.5px solid var(--ob-line);border-radius:12px;padding:12px 14px;background:#fff;}
.ob-zonecard .t1{font-weight:700;font-size:13px;color:var(--ob-ink);}
.ob-zonecard .t2{font-size:11.5px;color:var(--ob-muted);margin-top:3px;}
.ob-zonecard-add{border:1.5px dashed var(--ob-line);border-radius:12px;padding:12px 14px;text-align:center;background:none;cursor:pointer;color:var(--ob-muted);font-size:12px;font-weight:600;transition:border-color .15s ease,color .15s ease;}
.ob-zonecard-add i{display:block;margin-bottom:4px;font-size:15px;}
.ob-zonecard-add:hover{border-color:var(--ob-teal);color:var(--ob-teal-dk);}
.ob-dz-map-wrap{position:relative;}
.ob-dz-map{width:100%;height:400px;border-radius:12px;background:#eaf0ec;overflow:hidden;position:relative;z-index:1;}
.ob-dz-map-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;font-size:12.5px;color:var(--ob-muted);background:#eaf0ec;border-radius:12px;}

@media (max-width:760px){
  .ob-dz-layout{flex-direction:column;}
  .ob-dz-side{width:100%;}
  .ob-dz-map{height:280px;}
}

/* ---------- Grupo E (01/09/2026): Banner y Galería (Paso 6) ---------- */
.ob-thumb-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;}
.ob-thumb-wrap{position:relative;width:110px;height:80px;border-radius:10px;overflow:hidden;flex:none;}
.ob-thumb{width:100%;height:100%;object-fit:cover;display:block;}
.ob-thumb-delete{position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,0.55);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;text-decoration:none;}
.ob-thumb-delete:hover{background:rgba(192,57,43,0.85);}
.ob-thumb-add{width:110px;height:80px;border-radius:10px;border:1.5px dashed var(--ob-line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--ob-muted);font-size:11px;font-weight:600;text-decoration:none;flex:none;transition:border-color .15s ease,color .15s ease;}
.ob-thumb-add i{font-size:16px;}
.ob-thumb-add:hover{border-color:var(--ob-teal);color:var(--ob-teal-dk);}
.ob-thumb-add.uploading{pointer-events:none;color:var(--ob-teal-dk);border-color:var(--ob-teal);text-align:center;padding:0 6px;}

/* ---------- Grupo F (01/09/2026): Productos inline (Paso 7) ---------- */
.ob-product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-top:10px;}
.ob-product-card{border:1.5px solid var(--ob-line);border-radius:12px;overflow:hidden;background:#fff;position:relative;}
.ob-product-actions{position:absolute;top:6px;right:6px;display:flex;gap:4px;}
.ob-product-action-btn{width:24px;height:24px;border-radius:50%;border:none;background:var(--ob-teal);color:#fff;font-size:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,0.25);}
.ob-product-action-btn:hover{background:var(--ob-teal-dk);}
.ob-product-action-btn.danger{background:#e74c3c;}
.ob-product-action-btn.danger:hover{background:#c0392b;}
.ob-product-thumb{width:100%;height:90px;background:#f1f6f2;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.ob-product-thumb img{width:100%;height:100%;object-fit:cover;}
.ob-product-thumb i{font-size:22px;color:var(--ob-teal);}
.ob-product-info{padding:10px 12px;}
.ob-product-info .t1{font-weight:700;font-size:13px;color:var(--ob-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ob-product-info .t2{font-size:12px;color:var(--ob-teal-dk);font-weight:600;margin-top:2px;}
.ob-product-add{border:1.5px dashed var(--ob-line);border-radius:12px;min-height:132px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:none;cursor:pointer;color:var(--ob-muted);font-size:12.5px;font-weight:600;transition:border-color .15s ease,color .15s ease;}
.ob-product-add i{font-size:20px;}
.ob-product-add:hover{border-color:var(--ob-teal);color:var(--ob-teal-dk);}

/* ---------- Grupo G (01/09/2026): preview en Tu Web (Paso 6) ---------- */
/* FIX (03/09/2026, a pedido de Alvaro): el breakpoint fijo de 1400px
   comparaba el ancho de VENTANA contra un número que nunca tuvo en
   cuenta los 290px del sidebar de onboarding + el padding del
   contenido -- por eso en pantallas de 1366-1440px (laptops comunes)
   se apilaba a 100% de zoom, y solo se veía al costado al bajar el
   zoom (el navegador reporta más "px CSS" disponibles al zoom out).
   Se reemplaza el breakpoint mágico por flex-wrap real: las columnas
   se acomodan solas según el espacio que realmente hay, sin depender
   de adivinar el ancho de pantalla. */
.ob-web-layout{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;}
.ob-web-side{flex:1 1 460px;min-width:0;}
.ob-web-preview-col{flex:0 0 460px;width:460px;}
.ob-web-preview-sticky{position:sticky;top:20px;}
.ob-web-preview-label{font-size:11px;font-weight:700;color:var(--ob-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;}
.ob-web-preview-phone{border:1.5px solid var(--ob-line);border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 6px 20px rgba(0,0,0,0.08);}
.ob-web-preview-header{padding:16px 14px;display:flex;flex-direction:column;align-items:center;gap:8px;transition:background .2s ease;}
.ob-web-preview-logo{width:44px;height:44px;border-radius:50%;object-fit:cover;background:#fff;}
.ob-web-preview-logo-placeholder{display:flex;align-items:center;justify-content:center;color:#aaa;font-size:16px;}
.ob-web-preview-name{color:#fff;font-weight:700;font-size:13.5px;text-align:center;}
.ob-web-preview-banner{width:100%;height:90px;background:#eef3f0;display:flex;align-items:center;justify-content:center;overflow:hidden;color:#aaa;font-size:20px;}
.ob-web-preview-banner img{width:100%;height:100%;object-fit:cover;}
.ob-web-preview-body{padding:12px 14px 16px;}
.ob-web-preview-desc{font-size:11.5px;color:var(--ob-muted);line-height:1.4;margin-bottom:12px;min-height:30px;}
.ob-web-preview-btn{color:#fff;font-size:12px;font-weight:700;text-align:center;padding:8px;border-radius:8px;transition:background .2s ease;}

/* Solo en pantallas realmente angostas (celular) la columna de preview
   pasa a ocupar el 100%% del ancho -- en cualquier ventana de escritorio
   normal, aunque sea angosta, flex-wrap ya la baja de línea sola. */
@media (max-width:600px){
  .ob-web-preview-col{flex:1 1 100%;width:100%;}
  .ob-web-preview-sticky{position:static;}
  .ob-web-preview-phone{max-width:280px;margin:0 auto;}
}

/* ---------- Grupo H (01/09/2026): Importar por Excel real (Paso 7) ---------- */
.ob-import-steps{display:flex;gap:4px;margin-bottom:18px;}
.ob-import-step{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;}
.ob-import-step-num{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;background:#eef3f0;color:var(--ob-muted);}
.ob-import-step.active .ob-import-step-num{background:var(--ob-teal);color:#fff;}
.ob-import-step-label{font-size:9.5px;text-align:center;color:var(--ob-muted);line-height:1.25;}
.ob-import-step.active .ob-import-step-label{color:var(--ob-ink);}

.ob-import-template-box{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#f7faf8;border:1px solid var(--ob-line);border-radius:12px;padding:14px 16px;margin-bottom:18px;flex-wrap:wrap;}
.ob-import-template-title{font-weight:700;font-size:13.5px;color:var(--ob-ink);}
.ob-import-template-desc{font-size:12px;color:var(--ob-muted);}

.ob-import-dropzone-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.ob-import-dropzone{border:1.5px dashed var(--ob-line);border-radius:12px;padding:20px 14px;text-align:center;cursor:pointer;display:block;transition:border-color .15s ease;}
.ob-import-dropzone:hover{border-color:var(--ob-teal);}
.ob-import-dropzone.filled{border-color:var(--ob-teal);background:rgba(24,162,147,0.05);}
.ob-import-dropzone i{font-size:26px;color:var(--ob-teal);display:block;margin-bottom:8px;}
.ob-import-dropzone .t1{font-size:13px;font-weight:700;color:var(--ob-ink);}
.ob-import-dropzone .t2{font-size:11.5px;color:var(--ob-muted);margin-top:3px;line-height:1.4;}

.ob-import-match-list{display:flex;flex-direction:column;gap:10px;max-height:340px;overflow-y:auto;}
.ob-import-match-row{display:flex;align-items:center;gap:12px;border:1px solid var(--ob-line);border-radius:12px;padding:10px 14px;}
.ob-import-match-thumb{width:40px;height:40px;border-radius:8px;background:#eef3f0;display:flex;align-items:center;justify-content:center;color:var(--ob-teal);font-size:16px;flex:none;overflow:hidden;}
.ob-import-match-thumb img{width:100%;height:100%;object-fit:cover;}
.ob-import-match-thumb.empty{color:#c0392b;}
.ob-import-match-name{flex:1;font-size:13px;font-weight:700;color:var(--ob-ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ob-import-match-select{flex:none;width:190px;}

@media (max-width:600px){
  .ob-import-dropzone-grid{grid-template-columns:1fr;}
  .ob-import-match-row{flex-wrap:wrap;}
  .ob-import-match-select{width:100%;}
}

/* ---------- Grupo I (01/09/2026): modal real de impuestos + símbolo % ---------- */
.ob-percent-input-wrap{position:relative;}
.ob-percent-input-wrap input{padding-right:28px;}
.ob-percent-suffix{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--ob-muted);font-size:13px;font-weight:600;pointer-events:none;}

/* ---------- Grupo K (02/09/2026): preview real, números EXACTOS de
   admin/mipaginaweb/_preview.blade.php (la pantalla real que Alvaro
   mostró funcionando bien) -- portados tal cual, sin recalcular. La
   columna se agrandó a 460px para que esta escala (pensada para esa
   pantalla) entre bien acá también, en vez de forzarla en una columna
   angosta como se había hecho antes (esa fue la causa de todas las
   rondas fallidas anteriores). ---------- */
.ob-preview-browser{border:1px solid var(--ob-line);border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 4px 16px rgba(0,0,0,0.06);}
.ob-preview-browser-bar{background:#f2f2f0;padding:8px 12px;display:flex;gap:6px;}
.ob-preview-browser-bar span{width:8px;height:8px;border-radius:50%;background:#ddd;display:inline-block;}

/* FIX (a pedido de Alvaro, sept 2026): formato Móvil fijo, sin toggle --
   mismo criterio que en Mi Página Web (dashboard real). El sitio real se
   renderiza a ancho de celular (420px) adentro del iframe, sin necesidad
   de escalarlo hacia abajo, así que llena el mockup con contenido real. */
.ob-preview-iframe-wrap{width:100%;height:1418px;position:relative;background:#fff;}
.ob-preview-iframe{width:420px;height:5000px;border:none;position:absolute;top:0;left:0;transform:scale(1.02);transform-origin:0 0;}

/* Selector de plan en el registro (08/09/2026, a pedido de Alvaro) */
.ob-plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:4px}
.ob-plan-card{border:1.5px solid var(--ob-line);border-radius:12px;padding:18px 18px 16px;cursor:pointer;position:relative;transition:.15s;background:#fff}
.ob-plan-card:hover{border-color:#bcdad3}
.ob-plan-card.selected{border-color:var(--ob-teal);box-shadow:0 0 0 3px rgba(24,162,147,.12)}
.ob-plan-badge{position:absolute;top:-10px;left:16px;background:var(--ob-verde);color:#0a2416;font-size:10px;font-weight:800;letter-spacing:.03em;padding:3px 10px;border-radius:20px;text-transform:uppercase}
.ob-plan-radio{position:absolute;top:16px;right:16px;width:20px;height:20px;border-radius:50%;border:2px solid var(--ob-line);display:flex;align-items:center;justify-content:center}
.ob-plan-card.selected .ob-plan-radio{border-color:var(--ob-teal)}
.ob-plan-card.selected .ob-plan-radio::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--ob-teal)}
.ob-plan-name{font-size:15px;font-weight:700;color:var(--ob-ink);margin:2px 0 2px}
.ob-plan-desc{font-size:12px;color:var(--ob-muted);margin:0 0 12px;line-height:1.4;min-height:32px}
.ob-plan-price{font-size:22px;font-weight:800;color:var(--ob-navy)}
.ob-plan-price small{font-size:12px;font-weight:600;color:var(--ob-muted)}
.ob-plan-trial{font-size:11px;color:var(--ob-teal-dk);font-weight:700;margin:2px 0 12px}
.ob-plan-features{list-style:none;padding:0;margin:0;border-top:1px solid #f0f4f1;padding-top:10px}
.ob-plan-features li{font-size:12px;color:var(--ob-ink);padding:3px 0;display:flex;gap:6px}
.ob-plan-features li::before{content:"✓";color:var(--ob-teal);font-weight:800}
.ob-plan-footnote{font-size:11.5px;color:var(--ob-muted);margin-top:10px;display:flex;align-items:center;gap:6px}
.ob-plan-footnote a{color:var(--ob-teal-dk);font-weight:700;text-decoration:none}
@media(max-width:820px){.ob-plan-grid{grid-template-columns:1fr}.ob-plan-grid>*{min-width:0}}

/* ---------- Paso 3 (24/09/2026): Métodos de pago por canal ---------- */
/* Rediseño a pedido de Alvaro -- separa WhatsApp de los métodos de pago,
   agrupa los métodos alternos por canal (Delivery/Recojo, mismo patrón de
   "solo se muestra si el canal está prendido" que Canales de Venta en el
   dashboard), y separa Transferencia bancaria de Yape/Plin en switches
   independientes, cada uno con sus propios datos. */
.ob-pm-note{background:#eaf3fb;border:1px solid #cfe1f2;border-radius:10px;padding:12px 14px;font-size:12px;color:#1d5fa8;line-height:1.55;display:flex;gap:9px;margin-bottom:18px;}
.ob-pm-online-row{border:1.5px solid var(--ob-line);border-radius:12px;padding:16px 18px;display:flex;align-items:center;gap:14px;margin-bottom:22px;}
.ob-pm-online-row.connected{border-color:var(--ob-teal);background:rgba(24,162,147,0.06);}
.ob-pm-online-icon{width:40px;height:40px;border-radius:10px;background:#f1f6f2;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--ob-teal);flex:none;}
.ob-pm-online-row.connected .ob-pm-online-icon{background:var(--ob-teal);color:#fff;}
.ob-pm-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px;white-space:nowrap;}
.ob-pm-badge.pending{background:#fdf1de;color:#a3690f;}
.ob-pm-badge.ok{background:#e9fbf1;color:#0f7a67;}
.ob-pm-channel{margin-bottom:22px;}
.ob-pm-channel:last-child{margin-bottom:0;}
.ob-pm-channel-head{display:flex;align-items:center;gap:8px;margin-bottom:12px;}
.ob-pm-channel-head i{color:var(--ob-teal);font-size:14px;}
.ob-pm-channel-head .lbl{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ob-muted);}
.ob-pm-channel-head .rule{flex:1;height:1px;background:var(--ob-line);}
.ob-pm-methods{display:flex;flex-direction:column;gap:10px;}
.ob-pm-method{border:1.5px solid var(--ob-line);border-radius:12px;padding:14px 16px;transition:border-color .15s ease,background .15s ease,box-shadow .15s ease,opacity .15s ease;}
.ob-pm-method-top{display:flex;align-items:center;gap:12px;}
.ob-pm-method-title{font-weight:700;font-size:13px;color:var(--ob-ink);}
.ob-pm-method-desc{font-size:11.5px;color:var(--ob-muted);}
.ob-pm-method.off{opacity:.6;}
.ob-pm-method.locked{border-color:#f1b8ae;background:#fef6f4;}
.ob-pm-method-warn{display:flex;gap:8px;align-items:flex-start;margin-top:12px;padding-left:50px;font-size:12px;color:#a6382a;line-height:1.5;}
.ob-pm-method-fields{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:10px;margin-top:12px;padding-left:50px;}
.ob-pm-method-fields.two-col{grid-template-columns:1fr 1fr;}
.ob-pm-method-fields .full{grid-column:1 / -1;}
.ob-pm-field-label{font-size:10.5px;font-weight:600;color:var(--ob-muted);margin-bottom:4px;display:block;}
.ob-pm-method-fields input,.ob-pm-method-fields select{width:100%;padding:8px 11px;border:1.5px solid var(--ob-line);border-radius:8px;font-family:inherit;font-size:12.5px;color:var(--ob-ink);background:#fbfdfc;outline:none;}
.ob-pm-method-fields input:focus,.ob-pm-method-fields select:focus{border-color:var(--ob-teal);background:#fff;box-shadow:0 0 0 3px rgba(24,162,147,0.12);}
@media(max-width:640px){.ob-pm-method-fields{grid-template-columns:1fr;padding-left:0;}.ob-pm-method-warn{padding-left:0;}}

/* Bloque "¿Tienes dudas?" del sidebar (Ronda 73, 30/09/2026). */
.ob-help{background:rgba(255,255,255,0.06);border-radius:12px;padding:12px;margin:10px 0 4px;}
.ob-help-t{font-size:12.5px;font-weight:700;color:#fff;margin-bottom:8px;}
.ob-help-wa{display:flex;align-items:center;justify-content:center;gap:7px;background:#25D366;color:#fff;font-size:12px;font-weight:700;border-radius:999px;padding:8px 10px;text-decoration:none;}
.ob-help-or{font-size:11px;color:#7f97a3;margin:9px 0 5px;text-align:center;}
.ob-help textarea{width:100%;font-size:12px;border-radius:8px;border:1px solid rgba(255,255,255,0.15);background:rgba(255,255,255,0.08);color:#fff;padding:7px 8px;resize:vertical;}
.ob-help textarea::placeholder{color:#7f97a3;}
.ob-help button#obHelpSend{width:100%;margin-top:6px;border:0;border-radius:8px;background:#18A293;color:#fff;font-size:12px;font-weight:700;padding:7px;cursor:pointer;}
.ob-help button:disabled{opacity:.6;}
.ob-help-ok{font-size:11.5px;color:#7be0b4;margin-top:6px;text-align:center;}

/* Ronda 73b: sidebar más compacto para que no aparezca barra de scroll
   (se quitó el chip "Configura a tu ritmo" y el pie del sidebar). */
.ob-sidebar{padding:22px 22px 16px;}
.ob-brand{margin-bottom:14px;}
.ob-progress-wrap{margin-bottom:12px;}
.ob-steps li{padding:7px 10px;}
.ob-help{margin:8px 0 0;padding:10px 12px;}

/* Ronda 73c: bloque de ayuda plegable (cerrado por defecto). */
.ob-help-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;margin:0;background:transparent;border:0;color:#fff;font-size:12.5px;font-weight:700;padding:2px 0;cursor:pointer;text-align:left;}
.ob-help-toggle i.ob-help-chev{font-size:11px;transition:transform .15s ease;}
.ob-help.open .ob-help-chev{transform:rotate(180deg);}
.ob-help-body{margin-top:10px;}
.ob-help button.ob-help-toggle{margin-top:0;}

/* Ronda 73d: barra "¿Tienes dudas?" verde y resaltante. */
.ob-help{background:transparent;padding:0;margin:8px 0 0;}
.ob-help-toggle{background:linear-gradient(135deg,#1fbf8f,#18A293);color:#fff;font-size:13.5px;padding:12px 14px;border-radius:12px;box-shadow:0 4px 14px rgba(31,191,143,.35);transition:filter .15s ease,transform .15s ease;}
.ob-help-toggle:hover{filter:brightness(1.08);transform:translateY(-1px);}
.ob-help-toggle i{font-size:14px;}
.ob-help-toggle i.ob-help-chev{font-size:12px;}
.ob-help.open .ob-help-toggle{border-bottom-left-radius:0;border-bottom-right-radius:0;box-shadow:none;transform:none;}
.ob-help-body{margin-top:0;background:rgba(31,191,143,0.12);border:1px solid rgba(31,191,143,.45);border-top:0;border-radius:0 0 12px 12px;padding:12px;}
.ob-help button#obHelpSend{background:#fff;color:#0f7f6c;}

/* [REGISTRO-DIRECTO] Paso 1 sin barra lateral: una sola columna centrada. */
.ob-app.ob-nosidebar{display:block;}
.ob-app.ob-nosidebar .ob-main{margin:0 auto;max-width:900px;}