/* Botón entrar — SIEMPRE usa colores del negocio */
#odinConfirmModal #ocnEntrar{
  flex:1;
  background:var(--ocn-color, var(--red)) !important;
  color:#fff;border:none;border-radius:100px;
  padding:10px 14px;font-size:13px;font-weight:700;cursor:pointer;
  font-family:var(--font);
  transition:background .15s,transform .15s var(--spring),box-shadow .15s,filter .15s;
  box-shadow:0 4px 14px color-mix(in srgb, var(--ocn-color, var(--red)) 38%, transparent);
}
#odinConfirmModal #ocnEntrar:hover{
  background:var(--ocn-color2, var(--red2)) !important;
  transform:translateY(-1px);
  filter:brightness(1.08);
}

#odinConfirmModal #ocnCancelar{
  flex:1;background:none;color:var(--muted);
  border:1.5px solid var(--border2);
  border-radius:100px;padding:10px;font-size:13px;
  font-family:var(--font);cursor:pointer;transition:background .15s;
}
#odinConfirmModal #ocnCancelar:hover{background:var(--s2)}

/* Borde superior con gradiente del negocio */
.ocn-box{position:relative;overflow:hidden}
.ocn-box::before{
  content:'';position:absolute;top:0;left:0;right:0;height:5px;
  background:linear-gradient(90deg,
    var(--ocn-color, var(--red)),
    var(--ocn-color2, var(--red2)),
    var(--ocn-color, var(--red))
  );
  border-radius:20px 20px 0 0;
  background-size:200% 100%;
  animation:gradFlow 6s ease-in-out infinite;
  z-index:2;
}
@keyframes gradFlow{
  0%,100%{background-position:0% 0%}
  50%{background-position:100% 0%}
}

/* Sombra en el modal tinta con el color del negocio */
#odinConfirmModal.open .ocn-box{
  transform:scale(1);
  box-shadow:
    0 24px 64px rgba(0,0,0,.25),
    0 0 0 1px color-mix(in srgb, var(--ocn-color, var(--red)) 18%, transparent);
}

/* FONDO DEL MODAL — derivado del color del negocio */
.ocn-box{
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--ocn-color, transparent) 10%, white) 0%,
      color-mix(in srgb, var(--ocn-color, transparent) 5%, white) 50%,
      color-mix(in srgb, var(--ocn-color2, transparent) 4%, white) 100%
    );
  border:1px solid color-mix(in srgb, var(--ocn-color, transparent) 12%, transparent);
}

/* Nombre del negocio en su color */
#odinConfirmModal #ocnNombre{
  color:var(--ocn-color, var(--text)) !important;
  text-shadow:0 1px 2px color-mix(in srgb, var(--ocn-color, transparent) 15%, transparent);
}

/* Contador de productos en tono medio del color */
#odinConfirmModal #ocnCount{
  color:color-mix(in srgb, var(--ocn-color, var(--muted)) 60%, var(--muted)) !important;
}

/* Hint adaptado al color */
#odinConfirmModal .ocn-hint{
  background:color-mix(in srgb, var(--ocn-color, transparent) 6%, white) !important;
  border:1px solid color-mix(in srgb, var(--ocn-color, transparent) 15%, transparent) !important;
  color:color-mix(in srgb, var(--ocn-color, var(--text)) 70%, var(--text)) !important;
}
#odinConfirmModal .ocn-hint strong{
  color:var(--ocn-color, var(--red)) !important;
}

/* Botón Cancelar con borde tinta */
#odinConfirmModal #ocnCancelar{
  border:1.5px solid color-mix(in srgb, var(--ocn-color, var(--border2)) 25%, var(--border2)) !important;
  color:color-mix(in srgb, var(--ocn-color, var(--muted)) 50%, var(--muted)) !important;
}
#odinConfirmModal #ocnCancelar:hover{
  background:color-mix(in srgb, var(--ocn-color, transparent) 8%, white) !important;
}

/* Glow detrás del logo */
.ocn-fluent{
  filter:drop-shadow(0 4px 16px color-mix(in srgb, var(--ocn-color, rgba(0,0,0,.2)) 45%, transparent));
}

/* ══ MODAL DE SALIDA AL PORTAL ══ */
#odinExitModal{
  position:fixed;inset:0;z-index:9000;
  background:rgba(0,0,0,.55);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity .25s ease;
}
#odinExitModal.open{opacity:1;pointer-events:all}
#odinExitModal .oxm-box{
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--ocn-color, transparent) 10%, white) 0%,
    color-mix(in srgb, var(--ocn-color, transparent) 4%, white) 100%
  );
  border:1px solid color-mix(in srgb, var(--ocn-color, transparent) 18%, transparent);
  border-radius:18px;
  padding:24px 22px 18px;
  text-align:center;
  width:min(360px, calc(100vw - 36px));
  position:relative;overflow:hidden;
  transform:scale(.85);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
  box-shadow:
    0 24px 64px rgba(0,0,0,.3),
    0 0 0 1px color-mix(in srgb, var(--ocn-color, transparent) 15%, transparent);
}
#odinExitModal.open .oxm-box{transform:scale(1)}
#odinExitModal .oxm-box::before{
  content:'';position:absolute;top:0;left:0;right:0;height:5px;
  background:linear-gradient(90deg,
    var(--ocn-color, var(--red)),
    var(--ocn-color2, var(--red2)),
    var(--ocn-color, var(--red))
  );
  background-size:200% 100%;
  animation:gradFlow 6s ease-in-out infinite;
  border-radius:18px 18px 0 0;
}
.oxm-icon{
  font-size:38px;
  margin:6px 0 10px;
  filter:drop-shadow(0 4px 12px color-mix(in srgb, var(--ocn-color, rgba(0,0,0,.2)) 45%, transparent));
  animation:boing .5s var(--spring) both;
}
.oxm-titulo{
  font-size:17px;font-weight:700;
  color:var(--ocn-color, var(--text)) !important;
  margin-bottom:6px;
}
.oxm-sub{
  font-size:12.5px;line-height:1.5;
  color:color-mix(in srgb, var(--ocn-color, var(--muted)) 50%, var(--muted));
  margin-bottom:18px;padding:0 6px;
}
.oxm-sub strong{color:var(--ocn-color, var(--red))}
.oxm-btns{display:flex;gap:8px}
#odinExitModal #oxmCancelar{
  flex:1;background:none;
  border:1.5px solid color-mix(in srgb, var(--ocn-color, var(--border2)) 25%, var(--border2));
  color:color-mix(in srgb, var(--ocn-color, var(--muted)) 50%, var(--muted));
  border-radius:100px;padding:9px;font-size:12.5px;
  font-family:var(--font);cursor:pointer;transition:background .15s;
}
#odinExitModal #oxmCancelar:hover{
  background:color-mix(in srgb, var(--ocn-color, transparent) 8%, white);
}
#odinExitModal #oxmConfirmar{
  flex:1.4;
  background:var(--ocn-color, var(--red)) !important;
  color:#fff;border:none;border-radius:100px;
  padding:9px 14px;font-size:12.5px;font-weight:700;
  cursor:pointer;font-family:var(--font);
  transition:background .15s,transform .15s var(--spring),filter .15s;
  box-shadow:0 4px 14px color-mix(in srgb, var(--ocn-color, var(--red)) 38%, transparent);
}
#odinExitModal #oxmConfirmar:hover{
  background:var(--ocn-color2, var(--red2)) !important;
  transform:translateY(-1px);
  filter:brightness(1.08);
}