/* 7VEN JUICES · SISTEMA VISUAL FINAL
   Capa exclusivamente visual: color, contraste y tipografia.
   No modifica estructura, estados, eventos ni flujos de la aplicacion. */

:root{
  --seven-green:#69B42C;
  --seven-deep:#0C3120;
  --seven-yellow:#FFC911;
  --seven-orange:#FE330A;
  --seven-red:#B11A2B;
  --seven-magenta:#930F4B;
  --seven-ink:#17271E;
  --seven-muted:#5B6C62;
  --seven-canvas:#F4F7F5;
  --seven-line:#D8E2DB;
  --seven-white:#FFFFFF;
  --seven-font:"Segoe UI",Arial,Helvetica,sans-serif;
  --seven-shadow:0 10px 28px rgba(12,49,32,.08);
  --seven-shadow-hover:0 16px 36px rgba(12,49,32,.13);
}

/* Tipografia y legibilidad comunes */
.public-shell,
.admin-shell,
.modal,
.toast{
  font-family:var(--screen-font,var(--seven-font)),var(--seven-font)!important;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.public-shell{
  color:var(--screen-body-color,var(--seven-ink));
  font-size:16px;
  line-height:1.55;
}

.public-shell h1,
.public-shell h2,
.public-shell h3,
.public-shell h4,
.admin-shell h1,
.admin-shell h2,
.admin-shell h3{
  text-wrap:balance;
  letter-spacing:-.018em;
}

.public-shell h1{line-height:1.04}
.public-shell h2{line-height:1.12}
.public-shell h3,.public-shell h4{line-height:1.2}
.public-shell p,.public-shell li{line-height:1.6}

.public-shell .section-title h2{
  color:var(--screen-section-title,var(--seven-deep));
  font-size:clamp(1.55rem,3vw,2.35rem);
  font-weight:var(--screen-section-title-weight,800);
}

.public-shell .kicker{
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.13em;
}

/* Controles: mismas proporciones en todas las pantallas */
.public-shell .btn,
.public-shell .cart-btn,
.public-shell button,
.admin-shell .btn,
.admin-shell button{
  font-family:inherit;
}

.public-shell .btn{
  min-height:44px;
  padding:11px 18px;
  border-radius:var(--screen-button-radius,12px);
  font-size:clamp(.82rem,1.05vw,.94rem);
  font-weight:var(--screen-button-weight,800);
  letter-spacing:.012em;
}

.public-shell .btn-primary{
  background:var(--screen-button-bg,var(--seven-green));
  color:var(--screen-button-text,#fff);
}

.public-shell .btn-dark{background:var(--seven-deep);color:#fff}
.public-shell .btn-yellow{background:var(--seven-yellow);color:var(--seven-deep)}
.public-shell .btn-ghost{background:#EEF4EF;color:var(--seven-deep)}
.public-shell .btn-outline{background:#fff;color:var(--seven-deep);border-color:currentColor}

.public-shell input,
.public-shell select,
.public-shell textarea,
.admin-shell input,
.admin-shell select,
.admin-shell textarea{
  font-family:inherit;
  font-size:max(15px,.9rem);
  color:var(--seven-ink);
}

.public-shell :is(button,a,input,select,textarea):focus-visible,
.admin-shell :is(button,a,input,select,textarea):focus-visible,
.modal :is(button,a,input,select,textarea):focus-visible{
  outline:3px solid var(--seven-yellow)!important;
  outline-offset:3px!important;
}

/* Header y footer conservan los colores editables de cada pantalla */
.public-header{
  background:var(--screen-header-bg,var(--seven-deep))!important;
  color:var(--screen-header-text,#fff)!important;
  border-bottom:1px solid rgba(255,255,255,.16);
  box-shadow:0 5px 18px rgba(5,25,15,.12);
}

.public-header .header-inner{
  min-height:clamp(70px,var(--screen-header-height,78px),92px);
}

.public-header .nav button{
  color:var(--screen-header-text,#fff)!important;
  font-size:clamp(.79rem,1vw,.9rem);
  font-weight:var(--screen-header-weight,750);
  letter-spacing:.01em;
}

.public-header .nav button:hover,
.public-header .nav button.active{
  background:rgba(255,255,255,.13)!important;
  color:var(--screen-header-text,#fff)!important;
  box-shadow:inset 0 -3px 0 var(--seven-accent,var(--seven-green));
}

.public-header .cart-btn{
  min-height:42px;
  color:var(--screen-header-text,#fff);
  border-color:rgba(255,255,255,.28);
  background:rgba(0,0,0,.14);
}

.footer{
  background:var(--screen-footer-bg,var(--seven-deep))!important;
  color:var(--screen-footer-text,#fff)!important;
  border-top:1px solid rgba(255,255,255,.14);
}
.footer h4,.footer p,.footer a,.footer span{color:inherit!important}
.footer p,.footer a,.footer span{opacity:.88}

/* Cards: el editor sigue decidiendo sus colores */
.public-shell .card{
  background:var(--screen-card-bg,#fff);
  color:var(--screen-card-text,var(--seven-ink));
  border-color:var(--screen-card-border,var(--seven-line));
  border-radius:var(--screen-card-radius,18px);
  box-shadow:var(--screen-card-shadow,var(--seven-shadow));
}
.public-shell .card h2,
.public-shell .card h3,
.public-shell .card h4{color:var(--screen-card-title,var(--seven-deep))}
.public-shell .muted{color:var(--seven-muted)}

/* Pantalla 00 · Acceso */
.screen-00{--seven-accent:var(--seven-yellow)}
.screen-00 .landing{
  background:
    radial-gradient(circle at 12% 18%,rgba(105,180,44,.31),transparent 34%),
    radial-gradient(circle at 88% 76%,rgba(255,201,17,.18),transparent 30%),
    linear-gradient(135deg,#06180D 0%,var(--seven-deep) 58%,#071B10 100%);
}
.screen-00 .access-panel{
  background:rgba(5,29,16,.86);
  border-color:rgba(255,255,255,.18);
}
.screen-00 .landing h1 span{color:#8BD342}
.screen-00 .rainbow-line{background:linear-gradient(90deg,var(--seven-green),var(--seven-yellow),var(--seven-orange),var(--seven-magenta))}
.screen-00 .admin-entry{color:var(--seven-yellow);border-color:rgba(255,201,17,.62)}

/* Pantalla 01 · Inicio */
.screen-01{--seven-accent:var(--seven-yellow)}
.screen-01 .hero{
  border-color:#CFE0D3;
  box-shadow:var(--seven-shadow);
}
.screen-01 .hero h1,.screen-01 .hero h2{color:var(--seven-deep)}
.screen-01 .hero h1 span{color:var(--seven-green)}
.screen-01 .benefit-strip{border-color:#D5E4D8;box-shadow:0 7px 22px rgba(12,49,32,.06)}
.screen-01 .benefit-icon{color:var(--seven-green)}
.screen-01 .social-teaser{
  background:linear-gradient(120deg,var(--seven-deep),#184B31 58%,var(--seven-magenta));
}

/* Pantalla 02 · Planes y suscripciones */
.screen-02{--seven-accent:var(--seven-yellow)}
.screen-02 .plan-card{
  border-color:#E6CF66;
  box-shadow:0 10px 28px rgba(94,74,0,.08);
}
.screen-02 .plan-card.weekly{border-color:var(--seven-green)}
.screen-02 .plan-card.monthly{border-color:var(--seven-yellow)}
.screen-02 .plan-config{
  background:#FFF9E9;
  border-color:#E8D48C;
}
.screen-02 .tab.active{background:var(--seven-deep);color:#fff;border-color:var(--seven-deep)}
.screen-02 .day-select-card:focus-within{border-color:var(--seven-green);box-shadow:0 0 0 3px rgba(105,180,44,.13)}

/* Pantalla 03 · Mix y extras */
.screen-03{--seven-accent:var(--seven-orange)}
.screen-03 .filter{background:#FFF0E9;color:#82290C}
.screen-03 .filter.active{background:var(--seven-orange);color:#fff}
.screen-03 .extra-card{border-top:4px solid var(--seven-orange)}
.screen-03 .extra-visual{background:linear-gradient(135deg,#FFF7D9,#FFE9E2)}

/* Pantalla 04 · Entregas */
.screen-04{--seven-accent:var(--seven-yellow)}
.screen-04 .route-status.active{border-color:var(--seven-yellow)}
.screen-04 .route-status.enpoint.active{border-color:var(--seven-green)}
.screen-04 .mapbox{background:linear-gradient(135deg,#EEF3EC,#C9D8CA);color:var(--seven-deep)}
.screen-04 .point-num{background:var(--seven-green);color:#fff}

/* Pantalla 05 · 7VEN Social */
.screen-05{--seven-accent:var(--seven-red)}
.screen-05 .s15-page{line-height:1.55}
.screen-05 .s15-head h1,.screen-05 .s15-profile-hero h1{letter-spacing:-.025em}
.screen-05 .s15-card,.screen-05 .s15-form,.screen-05 .s15-gate{transition:border-color .18s ease,box-shadow .18s ease}
.screen-05 .s15-card:hover{border-color:color-mix(in srgb,var(--s15-primary-bg) 42%,var(--s15-border))!important}
.screen-05 .s15-primary{min-height:44px;font-weight:850!important}
.screen-05 .s17-top-badge,
.screen-05 .s17-notification i,
.screen-05 .s17-conversation i{background:var(--seven-red)}
.screen-05 .s17-story{border-color:var(--s15-primary-bg,var(--seven-red))}

/* Pantalla 06 · Mi Cuenta */
.screen-06{--seven-accent:var(--seven-green)}
.screen-06 .a9-account-page{color:var(--seven-ink)}
.screen-06 .a9-account-kicker{color:var(--seven-deep)}
.screen-06 .a9-photo-edit{background:var(--seven-green);color:#fff}
.screen-06 .a9-glance>div,.screen-06 .a9-module{border-color:#D6E3DA;box-shadow:var(--seven-shadow)}
.screen-06 .a9-module:nth-child(2),.screen-06 .a9-module:nth-child(5){background:#F3F9F0}
.screen-06 .a9-module:nth-child(3),.screen-06 .a9-module:nth-child(6){background:#FFF9E8}
.screen-06 .a9-module:nth-child(2) .a9-module-icon,
.screen-06 .a9-module:nth-child(5) .a9-module-icon{background:var(--seven-green)}
.screen-06 .a9-module:nth-child(3) .a9-module-icon,
.screen-06 .a9-module:nth-child(6) .a9-module-icon{background:var(--seven-yellow);color:var(--seven-deep)}
.screen-06 .a9-window-body h3{color:var(--seven-deep)}

/* Pantalla 07 · Carrito */
.screen-07{--seven-accent:var(--seven-yellow)}
.screen-07 .ju3-cart-rule-card{
  --ju3-t1-color:var(--seven-deep);
  --ju3-t2-color:#2C6B35;
  --ju3-t3-color:#24372B;
  --ju3-t4-color:#5A6C61;
  --ju3-card-bg:#FFFFFF;
  --ju3-card-border:#D4E0D7;
  box-shadow:var(--seven-shadow)!important;
}
.screen-07 .ju3-purchase{
  background:linear-gradient(90deg,var(--seven-yellow),#FFD94D)!important;
  color:var(--seven-deep)!important;
  box-shadow:0 10px 24px rgba(181,137,0,.19);
}
.screen-07 .ju3-purchase:hover{box-shadow:0 14px 30px rgba(181,137,0,.25)}
.screen-07 .ju3-month-mode-options label.selected{background:#EFF8E9!important;border-color:var(--seven-green)!important}

/* Pantalla 08 · Administracion */
.admin-shell{
  background:var(--seven-canvas);
  color:var(--seven-ink);
  font-size:15px;
  line-height:1.48;
}
.admin-sidebar{background:#10283B;color:#fff}
.admin-nav button{color:#E5EDF3;font-weight:650}
.admin-nav button.active,.admin-nav button:hover{background:var(--seven-green);color:#fff}
.admin-main{background:linear-gradient(180deg,#F6F8F7,#F1F5F2)}
.admin-top h1{color:#10283B;font-size:clamp(1.65rem,3vw,2.25rem);font-weight:850}
.admin-top .kicker{color:#4E9E24}
.admin-card,.admin-panel,.kpi,.editor-controls,.live-preview{
  border-color:var(--seven-line);
  box-shadow:0 5px 18px rgba(16,40,59,.045);
}
.admin-panel h2,.admin-panel h3,.admin-card h3{color:#10283B}
.admin-table th{
  color:#435C4D;
  background:#EEF4F0;
  font-weight:850;
  letter-spacing:.04em;
}
.admin-table td{color:#263A2E}
.admin-shell .btn{font-weight:800;letter-spacing:.01em}
.admin-shell .btn-primary{background:var(--seven-green);color:#fff}
.admin-shell .btn-dark{background:var(--seven-deep);color:#fff}
.admin-shell .btn-yellow{background:var(--seven-yellow);color:var(--seven-deep)}
.admin-shell .btn-outline{background:#fff;color:#2F7A28;border-color:#69B42C}
.admin-shell .tab.active{background:var(--seven-deep);color:#fff;border-color:var(--seven-deep)}
.admin-shell .field label{color:#455C4E;font-weight:800}
.admin-shell .field input,.admin-shell .field select,.admin-shell .field textarea{
  border-color:#C9D7CD;
  color:var(--seven-ink);
}
.admin-shell .field input:focus,.admin-shell .field select:focus,.admin-shell .field textarea:focus{border-color:var(--seven-green)}
.admin-shell .success-box{background:#EEF8EA;border-color:#98C985;color:#245B27}
.admin-shell .warning-box{background:#FFF8E5;border-color:#E1BE55;color:#674B00}
.admin-shell .danger-box{background:#FFF0EF;border-color:#E3A4A0;color:#76231E}

/* Modales y avisos */
.modal{border:1px solid var(--seven-line);color:var(--seven-ink)}
.modal-head h2{color:var(--seven-deep);font-size:clamp(1.35rem,2.4vw,1.85rem)}
.modal-close{color:var(--seven-deep)}
.toast{background:var(--seven-deep);color:#fff}

@media(max-width:760px){
  .public-shell{font-size:15px}
  .public-header .header-inner{min-height:68px;padding-inline:14px}
  .public-shell .section-title h2{font-size:clamp(1.4rem,7vw,1.9rem)}
  .public-shell .btn{min-height:46px}
  .admin-shell{font-size:14px}
  .admin-main{padding:16px 12px}
  .admin-top h1{font-size:1.55rem}
}

@media(prefers-reduced-motion:reduce){
  .public-shell *,.admin-shell *{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}