/* Explosion Group — Estilos suaves y scoped */
.ex-dashboard h2,
.ex-dashboard h3 { margin: 0 0 .5rem; font-weight: 700; }

.ex-card { background: #fff; border: 1px solid #e6e7ea; border-radius: 10px; padding: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
@media (prefers-color-scheme: dark){
  .ex-card { background: #1d1f24; border-color: #2a2e34; box-shadow: none; }
}

.shop_table, .widefat { border-radius: 10px; overflow: hidden; }
.shop_table thead th, .widefat thead th { position: sticky; top: 0; background: #f6f7f7; z-index: 1; }
.shop_table td, .shop_table th { padding: 10px 12px !important; }

.ex-badge { display: inline-flex; align-items: center; gap: .4em; padding: .18rem .5rem; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid transparent; }
.ex-status-aprobado   { color: #0b6b43; background: #e9f7ef; border-color: #bde5ce; }
.ex-status-pendiente  { color: #8a5a00; background: #fff7e6; border-color: #fde1a8; }
.ex-status-programado { color: #334155; background: #eef2f7; border-color: #dce3ec; }
.ex-status-pagado     { color: #0b3f6b; background: #e6f2ff; border-color: #b8d4ff; }

.ex-toast {
  position: fixed; right: 18px; bottom: 18px; z-index: 9999;
  background: #111827; color: #fff; padding: 12px 14px; border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18); transform: translateY(16px); opacity: 0;
  transition: transform .24s ease, opacity .24s ease;
}
.ex-toast.show { transform: translateY(0); opacity: 1; }
.ex-toast small { opacity: .8; display: block; }

/* Botoncitos suaves */
a.button, .button { border-radius: 8px !important; }

/* Toggle Sonidos kawaii */
.ex-sound-toggle {
  display: inline-flex; align-items: center; gap: .6rem; margin: 10px 0 14px;
}
.ex-sound-toggle button {
  border: 1px solid #e6e7ea; border-radius: 999px; padding: .35rem .7rem; cursor: pointer;
  background: #fff; font-weight: 700;
}
.ex-sound-toggle button.on { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.ex-sound-toggle button.off { background: #fff1f2; color: #9f1239; border-color: #fecdd3; }

@media (prefers-color-scheme: dark){
  .ex-sound-toggle button{ background:#1d1f24; border-color:#2a2e34; }
  .ex-sound-toggle button.on{ background:#062d26; color:#34d399; border-color:#0b4b3f; }
  .ex-sound-toggle button.off{ background:#381a21; color:#fecdd3; border-color:#5b2a34; }
}

/* === Explosion Group — Notificaciones (campana rosa) + texto blanco === */
.ex-bell { position: fixed; right: 16px; bottom: 88px; z-index: 10000;
  background:#ffe4f1; color:#b10566; border:2px solid #ff9ed0; width:44px; height:44px;
  border-radius:999px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px rgba(0,0,0,.18); cursor:pointer; font-size:20px; user-select:none; }
.ex-bell .count{ position:absolute; top:-6px; right:-6px; background:#ef4444; color:#fff;
  width:20px; height:20px; border-radius:999px; font-size:12px; display:flex; align-items:center; justify-content:center; font-weight:700; }
.ex-notifs { position: fixed; right: 16px; bottom: 140px; width: 320px; max-height: 60vh; overflow:auto;
  background:#111827; color:#fff; border-radius:12px; box-shadow:0 12px 40px rgba(0,0,0,.32);
  z-index:10000; display:none; border:1px solid rgba(255,255,255,.1); }
.ex-notifs.show{ display:block; }
.ex-notifs header{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.12); color:#fff; }
.ex-notifs ul{ list-style:none; margin:0; padding:0; color:#fff; }
.ex-notifs li{ padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.08); color:#fff; }
.ex-notifs time{ opacity:.85; font-size:12px; display:block; margin-top:2px; color:#fff; }
.ex-notifs .actions{ margin-top:6px; display:flex; gap:8px; }
.ex-notifs .actions button{ font-size:12px; border-radius:999px; padding:4px 8px; cursor:pointer;
  background:#fff; border:1px solid #e6e7ea; color:#111827; }
.ex-notifs .actions button.destructive{ background:#fee2e2; border-color:#fecaca; color:#991b1b; }
.ex-toast { background:#111; color:#fff; }


/* Legibilidad: color de texto y enlaces dentro de tarjetas */
.ex-card { color:#111827; }
.ex-card a { color:#0ea5e9; text-decoration: underline; }
.ex-card a.button { text-decoration:none; }

@media (prefers-color-scheme: dark){
  .ex-card { color:#e5e7eb; }
  .ex-card a { color:#93c5fd; }
}