/* ============================================================
   OxxoBot · Estilo corporativo OXXO
   Rojo #E30613 · Amarillo #FFD100 · Blanco · Gris #F5F5F7
   ============================================================ */

:root{
  --oxxo-red:#E30613;
  --oxxo-red-dark:#B20510;
  --oxxo-yellow:#FFD100;
  --oxxo-gray:#F5F5F7;
  --oxxo-gray-2:#E9ECEF;
  --oxxo-text:#1f2328;
  --oxxo-muted:#6c757d;
  --oxxo-radius:16px;
  --oxxo-shadow:0 6px 24px rgba(0,0,0,.08);
  --oxxo-shadow-sm:0 2px 8px rgba(0,0,0,.06);
}

*{box-sizing:border-box}
html,body{height:100%}
body.oxxo-body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:linear-gradient(180deg,#fff 0%, var(--oxxo-gray) 100%);
  color:var(--oxxo-text);
  min-height:100vh;
  display:flex; flex-direction:column;
}

/* ---------- Topbar ---------- */
.oxxo-topbar{
  background:#fff;
  border-bottom:1px solid var(--oxxo-gray-2);
  position:sticky; top:0; z-index:1020;
}
.oxxo-logo{
  font-weight:800; letter-spacing:.5px; color:var(--oxxo-red);
  font-size:1.15rem; display:flex; align-items:center; gap:.5rem;
}
.oxxo-logo-dot{
  width:12px; height:12px; border-radius:50%;
  background:var(--oxxo-red);
  box-shadow:0 0 0 3px var(--oxxo-yellow);
}
.oxxo-progress{
  height:4px; background:var(--oxxo-gray-2);
}
.oxxo-progress-bar{
  height:100%;
  background:linear-gradient(90deg,var(--oxxo-red),var(--oxxo-yellow));
  transition:width .45s ease;
}

/* ---------- Main ---------- */
.oxxo-main{ flex:1; padding:1.25rem 1rem; max-width:1280px; margin:0 auto; width:100%; }

/* ---------- Bot card ---------- */
.oxxo-bot-card{
  background:#fff; border-radius:var(--oxxo-radius);
  box-shadow:var(--oxxo-shadow);
  padding:1.25rem; position:sticky; top:84px;
  text-align:center; border:1px solid var(--oxxo-gray-2);
}
.oxxo-bot-anim{
  width:100%; max-width:260px; margin:0 auto;
  aspect-ratio: 1/1;
  background:radial-gradient(circle at 50% 55%, #fff 0%, #e8e4d9 40%, #d4c4a8 100%);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  box-shadow:inset 0 0 20px rgba(0,0,0,0.05);
}
.oxxo-bot-anim svg{ width:100%; height:100% }
.oxxo-bubble{
  margin-top:.75rem; background:var(--oxxo-yellow);
  padding:.85rem 1rem; border-radius:14px;
  position:relative; font-weight:500; color:#1f2328;
  box-shadow:var(--oxxo-shadow-sm);
  min-height:64px;
}
.oxxo-bubble::before{
  content:""; position:absolute; top:-10px; left:50%; transform:translateX(-50%);
  border:10px solid transparent; border-bottom-color:var(--oxxo-yellow);
}
.oxxo-bubble-text{ font-size:.98rem; line-height:1.35 }
.oxxo-bot-meta{ margin-top:.5rem }

/* ---------- Screens ---------- */
.oxxo-screen{
  background:#fff; border-radius:var(--oxxo-radius);
  box-shadow:var(--oxxo-shadow);
  padding:1.25rem; min-height:60vh;
  border:1px solid var(--oxxo-gray-2);
}
.oxxo-screen h2{ margin:0 0 1rem; font-weight:800; color:var(--oxxo-red) }
.oxxo-screen h3{ font-weight:700 }

/* ---------- Category grid ---------- */
.oxxo-grid{
  display:grid; gap:.9rem;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
}
.oxxo-card{
  background:#fff; border:2px solid var(--oxxo-gray-2);
  border-radius:14px; padding:1rem; text-align:center;
  cursor:pointer; transition:transform .15s, box-shadow .15s, border-color .15s;
  min-height:130px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:.4rem;
  user-select:none;
}
.oxxo-card:hover{ transform:translateY(-3px); box-shadow:var(--oxxo-shadow); border-color:var(--oxxo-red) }
.oxxo-card i{ font-size:2rem; color:var(--oxxo-red) }
.oxxo-card .title{ font-weight:700; font-size:.98rem }
.oxxo-card .desc{ font-size:.8rem; color:var(--oxxo-muted) }

/* ---------- Big action buttons (diagnostic) ---------- */
.oxxo-actions{ display:grid; gap:.7rem; margin-top:1rem }
.oxxo-btn{
  background:#fff; border:2px solid var(--oxxo-gray-2);
  border-radius:12px; padding:1rem 1.1rem; font-size:1rem; font-weight:600;
  text-align:left; cursor:pointer; transition:all .15s;
  display:flex; align-items:center; gap:.75rem; width:100%;
}
.oxxo-btn:hover{ border-color:var(--oxxo-red); transform:translateX(3px) }
.oxxo-btn .idx{
  width:28px; height:28px; border-radius:50%;
  background:var(--oxxo-red); color:#fff; font-size:.85rem;
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.oxxo-btn.resolved{ border-color:#198754 }
.oxxo-btn.resolved:hover{ background:#e6f4ea }
.oxxo-btn.resolved .idx{ background:#198754 }
.oxxo-btn.escalate{ border-color:#fd7e14 }
.oxxo-btn.escalate:hover{ background:#fff4e6 }
.oxxo-btn.escalate .idx{ background:#fd7e14 }

/* ---------- Issue list items ---------- */
.oxxo-list-item{
  background:var(--oxxo-gray); border-radius:12px;
  padding:.85rem 1rem; cursor:pointer; margin-bottom:.5rem;
  display:flex; align-items:center; gap:.75rem; transition:all .15s;
}
.oxxo-list-item:hover{ background:var(--oxxo-yellow) }
.oxxo-list-item .bi{ color:var(--oxxo-red); font-size:1.25rem }

/* ---------- Breadcrumbs ---------- */
.oxxo-crumbs{
  display:flex; gap:.35rem; flex-wrap:wrap;
  font-size:.85rem; color:var(--oxxo-muted); margin-bottom:.75rem;
}
.oxxo-crumbs a{ color:var(--oxxo-red); text-decoration:none; cursor:pointer }
.oxxo-crumbs a:hover{ text-decoration:underline }

/* ---------- Stars ---------- */
.oxxo-stars{ font-size:1.8rem; color:#c8c8c8; cursor:pointer; user-select:none }
.oxxo-stars .bi{ margin-right:.2rem }
.oxxo-stars .active{ color:var(--oxxo-yellow) }

/* ---------- Result screens ---------- */
.oxxo-result{
  text-align:center; padding:2rem 1rem;
}
.oxxo-result.ok{ background:linear-gradient(180deg,#e6f4ea,transparent) }
.oxxo-result.ko{ background:linear-gradient(180deg,#fff4e6,transparent) }
.oxxo-result h3{ margin-top:.5rem }
.oxxo-result .big-icon{ font-size:3.5rem }
.oxxo-result.ok .big-icon{ color:#198754 }
.oxxo-result.ko .big-icon{ color:#fd7e14 }

/* ---------- Announcements list ---------- */
.ann-item{
  border-left:4px solid var(--oxxo-red); padding:.6rem .8rem;
  background:var(--oxxo-gray); border-radius:6px; margin-bottom:.5rem;
}
.ann-item.info{ border-color:#0d6efd }
.ann-item.success{ border-color:#198754 }
.ann-item.warning{ border-color:#fd7e14 }
.ann-item.danger{ border-color:var(--oxxo-red) }

/* ---------- Footer ---------- */
.oxxo-footer{ border-top:1px solid var(--oxxo-gray-2); background:#fff }

/* ---------- Animations ---------- */
@keyframes oxxoIn{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }
.oxxo-in{ animation:oxxoIn .3s ease both }

/* ---------- OXXOBot Animations ---------- */
.oxxo-bot-wrapper{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.oxxo-bot-img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  border-radius:50%;
  transition:transform .3s ease;
}

/* Animación flotante suave - estado idle */
@keyframes floatIdle{
  0%, 100%{ transform:translateY(0) scale(1); }
  50%{ transform:translateY(-6px) scale(1.01); }
}
.oxxo-bot-float-idle .oxxo-bot-img{
  animation:floatIdle 4s ease-in-out infinite;
}

/* Animación saludo - sutil balanceo */
@keyframes floatSaludo{
  0%, 100%{ transform:translateY(0) rotate(0deg); }
  25%{ transform:translateY(-4px) rotate(-1deg); }
  75%{ transform:translateY(-4px) rotate(1deg); }
}
.oxxo-bot-float-saludo .oxxo-bot-img{
  animation:floatSaludo 2.5s ease-in-out infinite;
}

/* Animación pensando - movimiento muy sutil */
@keyframes floatPensar{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-3px); }
}
.oxxo-bot-float-pensar .oxxo-bot-img{
  animation:floatPensar 2s ease-in-out infinite;
}

/* Animación éxito - rebote elegante */
@keyframes floatExito{
  0%, 100%{ transform:translateY(0) scale(1); }
  50%{ transform:translateY(-10px) scale(1.03); }
}
.oxxo-bot-float-exito .oxxo-bot-img{
  animation:floatExito 0.6s ease-in-out 3;
}

/* Animación alerta/error - vibración muy sutil */
@keyframes floatAlerta{
  0%, 100%{ transform:translateX(0); }
  25%{ transform:translateX(-2px); }
  75%{ transform:translateX(2px); }
}
.oxxo-bot-float-alerta .oxxo-bot-img,
.oxxo-bot-float-error .oxxo-bot-img{
  animation:floatAlerta 0.4s ease-in-out 4;
}

/* Ojos animados del bot - ajustados para los lentes del OXXOBot */
.oxxo-bot-eyes{
  position:absolute;
  top:26%;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:12%;
  pointer-events:none;
}

.oxxo-eye{
  width:10%;
  height:10%;
  background:#fff;
  border-radius:50%;
  position:relative;
  box-shadow:0 1px 3px rgba(0,0,0,0.3);
}

.oxxo-eye::after{
  content:'';
  position:absolute;
  top:35%;
  left:35%;
  width:30%;
  height:30%;
  background:#1f2328;
  border-radius:50%;
  transition:transform 0.1s;
}

/* Parpadeo */
@keyframes blinkAnim{
  0%, 100%{ transform:scaleY(1); }
  50%{ transform:scaleY(0.1); }
}
.oxxo-eye.blink{
  animation:blinkAnim 0.2s ease;
}

/* Efecto hover en la tarjeta del bot */
.oxxo-bot-card:hover .oxxo-bot-img{
  transform:scale(1.05);
}

/* ---------- Responsive ---------- */
@media (max-width: 991px){
  .oxxo-bot-card{ position:static; padding:1rem }
  .oxxo-bot-anim{ max-width:200px }
  .oxxo-screen{ min-height:auto }
}
@media (max-width: 575px){
  .oxxo-logo small{ display:none !important }
  .oxxo-card{ min-height:110px; padding:.75rem }
  .oxxo-card i{ font-size:1.5rem }
}

/* ---------- Teams embedded mode ---------- */
body.teams-mode .oxxo-topbar{ box-shadow:none }
body.teams-mode .oxxo-footer{ display:none }