/* ---------- BRAND PANEL ---------- */
  .brand-panel{
    margin:0 0 var(--space-4) 0;
    display:flex; flex-direction:column; gap:var(--space-4);
  }
  .brand-panel-head h3{
    font-family:var(--font-mono); font-size:var(--font-sm); letter-spacing:0.12em; margin:0;
    color:var(--paper-ink); text-transform:uppercase;
  }
  .brand-field{ display:flex; flex-direction:column; gap:var(--space-2); }
  .brand-field input[type=text]{
    padding:var(--space-2) var(--space-2); border:1px solid var(--paper-line); border-radius:var(--radius-sm);
    font-family:var(--font-ui); font-size:var(--font-sm); background:var(--graphite-light); color:var(--paper-ink);
    outline:none;
  }
  .brand-field input[type=text]:focus{ border-color:var(--color-electric-blue); box-shadow:var(--ring-focus); }
  .logo-row{ display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; }
  .logo-preview{
    width:48px; height:48px; object-fit:contain; border-radius:var(--radius-sm);
    border:1px solid var(--paper-line); background:var(--graphite-light);
  }
  .product-img-preview{
    width:40px; height:40px; object-fit:cover; border-radius:var(--radius-sm);
    border:1px solid var(--paper-line); background:var(--graphite-light);
  }
  .field input[type=file], .brand-field input[type=file]{ font-family:var(--font-ui); font-size:var(--font-sm); color:var(--color-text-muted); }
  .chip-thumb{
    width:20px; height:20px; object-fit:cover; border-radius:var(--radius-sm);
    vertical-align:middle; margin-right:5px;
  }
  .brand-hint{ font-family:var(--font-mono); font-size:var(--font-xs); color:var(--paper-fade); }
.backup-row{ display:flex; gap:var(--space-2); flex-wrap:wrap; }
  .lock-overlay{
    position:fixed; inset:0; background: var(--overlay-rgba); z-index:200;
    backdrop-filter: blur(4px);
    display:flex; align-items:center; justify-content:center; padding:var(--space-5);
  }
  .lock-box{
    width:100%; max-width:340px; display:flex; flex-direction:column; align-items:center; gap:var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-lg);
  }
  .lock-icon{
    font-size: 48px;
    color: var(--color-electric-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px; height: 72px;
    background: var(--color-electric-blue);
    color: #fff;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-md);
  }
  .lock-title{
    font-family:var(--font-mono); font-size:var(--font-lg); letter-spacing:0.06em; color:var(--color-text-primary);
    margin: 0;
  }
  .lock-subtitle{
    font-family:var(--font-ui); font-size:var(--font-sm); color:var(--color-text-secondary);
    text-align: center; margin: 0;
    max-width: 260px;
  }
  .lock-pin-input{
    width:100%; max-width: 200px; text-align:center; font-size:32px; letter-spacing:0.6em; padding:var(--space-3) 0;
    border-radius:var(--radius-md); border:1px solid var(--color-border); background:var(--color-bg); color:var(--color-text-primary);
    font-family:var(--font-mono);
    transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
  }
  .lock-pin-input:focus{ outline:none; border-color:var(--color-electric-blue); box-shadow:var(--ring-focus); }
  .lock-error{
    font-family:var(--font-mono); font-size:var(--font-sm); color:var(--color-error);
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-error-bg);
    border: 1px solid var(--color-error-border);
    border-radius: var(--radius-sm);
    width: 100%;
    justify-content: center;
  }
  .lock-error .icon{
    font-size: 16px; flex-shrink: 0;
  }
  .lock-unlock-btn{
    width: 100%; min-height: 52px;
    background: var(--color-electric-blue);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--font-sm);
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-fast);
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  }
  .lock-unlock-btn:hover{
    background: var(--color-electric-blue-light);
    box-shadow: var(--shadow-glow-blue);
  }
  .lock-unlock-btn:active{
    transform: translateY(1px);
  }
  .lock-unlock-btn:disabled{
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* ---------- AUTH / INICIO DE SESIÓN (solo #authOverlay) ---------- */
  #authOverlay.lock-overlay{
    background: var(--overlay-rgba);
    backdrop-filter: blur(4px);
    align-items:center; justify-content:center; padding:24px;
  }
  #authOverlay .auth-shell{
    width:100%; max-width:960px; display:grid;
    grid-template-columns:1.15fr 1fr; gap:0;
    border:1px solid var(--color-border); border-radius:var(--radius-lg);
    overflow:hidden; box-shadow:var(--shadow-lg);
    background: var(--color-surface);
  }
  /* panel de marca (izquierda) */
  #authOverlay .auth-brand{
    background: var(--color-bg);
    color:var(--color-text-primary); padding:48px 44px 40px;
    display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-4); justify-content:center;
    position: relative;
    overflow: hidden;
  }
  #authOverlay .auth-brand::before{
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,119,255,0.05) 0%, rgba(123,47,255,0.05) 100%);
    pointer-events: none;
  }
  #authOverlay .auth-brand-logo{
    width:64px; height:64px; border-radius:var(--radius-lg);
    background: linear-gradient(135deg, var(--color-electric-blue) 0%, var(--color-purple) 100%);
    color:#fff; display:flex; align-items:center; justify-content:center;
    font-size:28px; box-shadow: var(--shadow-lg); margin-bottom: var(--space-3);
    position: relative;
    z-index: 1;
  }
  #authOverlay .auth-brand-name{
    font-family:var(--font-mono); font-size:var(--font-xl); letter-spacing:0.16em; font-weight:700; color:var(--color-text-primary);
    position: relative;
    z-index: 1;
  }
  #authOverlay .auth-brand-tag{
    font-family:var(--font-ui); font-size:var(--font-base); font-weight:600; color:var(--color-electric-blue);
    position: relative;
    z-index: 1;
  }
  #authOverlay .auth-brand-sub{
    margin:var(--space-2) 0 0; font-size:var(--font-base); line-height:1.55; color:var(--color-text-secondary); max-width:340px;
    position: relative;
    z-index: 1;
  }
  #authOverlay .auth-sync{
    margin-top:var(--space-5); padding:var(--space-4); border:1px solid var(--color-border); border-radius:var(--radius-md);
    background:var(--color-bg); max-width:360px;
    position: relative;
    z-index: 1;
  }
  #authOverlay .auth-sync-head{
    display:flex; align-items:center; gap:var(--space-2); font-family:var(--font-mono);
    font-size:var(--font-sm); letter-spacing:0.07em; text-transform:uppercase; font-weight:700; color:var(--color-success-green); margin-bottom:var(--space-2);
  }
  #authOverlay .auth-sync-head .icon{ font-size:var(--font-md); color:var(--color-success-green); }
  #authOverlay .auth-sync-sub{ font-size:var(--font-sm); line-height:1.55; color:var(--color-text-muted); }
  /* card de login (derecha) */
  #authOverlay .auth-card{
    background:var(--color-surface); color:var(--color-text-primary);
    padding:48px 44px; display:flex; flex-direction:column; justify-content:center;
  }
  #authOverlay .auth-card-title{
    font-family:var(--font-mono); font-size:var(--font-lg); letter-spacing:0.06em; font-weight:700;
    color:var(--color-text-primary); margin-bottom:var(--space-5); text-transform:uppercase;
  }
  #authOverlay .auth-field{ display:flex; flex-direction:column; gap:var(--space-2); margin-bottom:var(--space-4); }
  #authOverlay .auth-label{
    font-family:var(--font-mono); font-size:var(--font-xs); letter-spacing:0.08em; color:var(--color-text-muted);
    text-transform:uppercase; font-weight:700;
  }
  #authOverlay .auth-input{
    width:100%; min-height:var(--control-h-lg); padding:0 var(--space-4); border-radius:var(--radius-md);
    border:1px solid var(--color-border); background:var(--color-bg); color:var(--color-text-primary);
    font-family:var(--font-ui); font-size:var(--font-md); outline:none;
    transition:border-color var(--transition-normal), box-shadow var(--transition-normal), background var(--transition-normal);
  }
  #authOverlay .auth-input:focus{
    border-color:var(--color-electric-blue); box-shadow:var(--ring-focus); background:var(--color-surface);
  }
  #authOverlay .auth-input::placeholder{ color:var(--color-text-placeholder); }
  #authOverlay .auth-error{
    font-size:var(--font-sm); line-height:1.45; color:var(--color-error); margin:0 0 var(--space-3);
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-error-bg);
    border: 1px solid var(--color-error-border);
    border-radius: var(--radius-sm);
  }
  #authOverlay .auth-error .icon{
    font-size: 16px; flex-shrink: 0;
  }
  #authOverlay .auth-submit{
    width:100%; min-height:52px; margin:var(--space-2) 0 var(--space-3);
    background: var(--color-electric-blue);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--font-sm);
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-fast);
  }
  #authOverlay .auth-submit:hover{
    background: var(--color-electric-blue-light);
    box-shadow: var(--shadow-glow-blue);
  }
  #authOverlay .auth-submit:active{
    transform: translateY(1px);
  }
  #authOverlay .auth-submit:disabled{
    opacity: 0.5;
    cursor: not-allowed;
  }
  #authOverlay .auth-link{
    background:none; border:none; cursor:pointer; font-family:var(--font-ui);
    font-size:var(--font-sm); color:var(--color-electric-blue); text-decoration:none; padding:4px;
    transition: color var(--transition-normal);
  }
  #authOverlay .auth-link:hover{ color:var(--color-electric-blue-light); text-decoration: underline; }
  #authOverlay .auth-link-strong{ font-weight:700; }
  #authOverlay .auth-divider{
    display:flex; align-items:center; gap:var(--space-3); margin:var(--space-4) 0;
    color:var(--color-text-muted); font-size:var(--font-sm);
  }
  #authOverlay .auth-divider::before, #authOverlay .auth-divider::after{
    content:""; flex:1; height:1px; background:var(--color-border);
  }
  /* móvil: una sola columna */
  @media (max-width:760px){
    #authOverlay .auth-shell{ grid-template-columns:1fr; max-width:420px; }
    #authOverlay .auth-brand{ padding:32px 28px 12px; }
    #authOverlay .auth-brand-logo{ width:56px; height:56px; font-size:24px; }
    #authOverlay .auth-sync{ display:none; }
    #authOverlay .auth-card{ padding:32px 28px 38px; }
  }
  @media (max-width:380px){
    #authOverlay .auth-brand{ padding:24px 20px 8px; }
    #authOverlay .auth-card{ padding:28px 20px 32px; }
  }

  /* ---------- ESTADO DE SINCRONIZACIÓN EN PANEL ---------- */
  .cloud-status-row{
    display:flex; align-items:center; gap:var(--space-2); margin-top:6px;
  }
  .cloud-status-row .icon{
    font-size:var(--font-md); color:var(--felt); flex-shrink:0;
  }
  .cloud-status-dot{
    width:8px; height:8px; border-radius:var(--radius-pill); background:var(--felt); flex-shrink:0;
  }
  .cloud-status-row #cloudStatus{
    margin:0; font-family:var(--font-mono); font-size:11px; color:var(--paper-ink);
  }

  /* ---------- SUBSCRIPTION OVERLAY (subOverlay) ---------- */
  #subOverlay.lock-overlay{
    background: var(--overlay-rgba);
    backdrop-filter: blur(4px);
  }
  #subOverlay .lock-box{
    max-width: 380px;
    padding: var(--space-7);
  }
  #subOverlay .lock-icon{
    background: var(--color-warning);
    color: #fff;
  }
  #subOverlay .lock-title{
    font-size: var(--font-xl);
  }
  #subOverlay .lock-subtitle{
    font-size: var(--font-base);
    max-width: 300px;
  }
  #subOverlay .dash-period-tabs{
    margin: var(--space-4) 0 var(--space-3);
    display: flex; gap: var(--space-2); justify-content: center;
  }
  #subOverlay .dash-period-btn{
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    border-radius: var(--radius-pill);
    padding: var(--space-2) var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--font-xs);
    letter-spacing: 0.06em;
    cursor: pointer;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    transition: border-color var(--transition-normal), background var(--transition-normal), color var(--transition-normal);
  }
  #subOverlay .dash-period-btn:hover{
    border-color: var(--color-electric-blue);
    background: var(--color-surface-hover);
    color: var(--color-text-primary);
  }
  #subOverlay .dash-period-btn.active{
    background: var(--color-warning);
    color: #fff;
    border-color: var(--color-warning);
  }
  #subOverlay .plans-grid{
    margin-top: var(--space-4);
  }
  #subOverlay .plan-card{
    border: 2px solid var(--color-border);
  }
  #subOverlay .plan-card:hover{
    border-color: var(--color-warning);
  }
  #subOverlay .plan-card.featured{
    border-color: var(--color-warning);
  }
  #subOverlay .plan-card.featured::before{
    background: var(--color-warning);
  }
  #subOverlay .plan-action{
    background: var(--color-warning);
    color: #fff;
    border: none;
  }
  #subOverlay .plan-action:hover{
    background: var(--color-warning);
    opacity: 0.9;
  }
  #subOverlay .lock-unlock-btn{
    background: var(--color-warning);
    color: #fff;
  }
  #subOverlay .lock-unlock-btn:hover{
    background: var(--color-warning);
    opacity: 0.9;
    box-shadow: none;
  }