/* Cuadro de error del sistema estilo Windows XP (js/syserror.js) */

.sx-overlay {
  position: fixed; inset: 0; z-index: 99990;          /* sobre las ventanas, bajo los toasts (99998) */
  display: flex; align-items: center; justify-content: center;
  background: transparent;                             /* XP no oscurece el escritorio */
}

.sx-box {
  width: 420px; max-width: calc(100vw - 24px);
  background: #ece9d8; color: #000;
  font: 11px Tahoma, "Segoe UI", Verdana, sans-serif;
  border: 1px solid #0a246a; border-top: 0;
  border-radius: 8px 8px 0 0;
  box-shadow: 4px 6px 14px rgba(0,0,0,.45), inset 0 0 0 2px #0058e6;
  padding: 0 3px 3px;                                  /* marco azul alrededor, como una ventana XP */
  background-clip: padding-box;
  position: relative;
}
.sx-box::before {                                       /* marco azul XP (laterales/base) */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, #0058e6, #3a81f3 12%, #0054e3 88%, #00379f);
}

.sx-titlebar {
  height: 28px; margin: 0 -3px; padding: 0 5px 0 9px;
  display: flex; align-items: center; justify-content: space-between;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, #0997ff 0%, #0053ee 8%, #0050ee 40%, #06f 88%, #06f 93%, #005bff 95%, #003dd7 96%, #003dd7 100%);
  color: #fff; font-weight: 700; font-size: 13px;
  text-shadow: 1px 1px #0f1089;
  user-select: none;
}
.sx-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-close {
  width: 21px; height: 21px; padding: 0; line-height: 17px; text-align: center;
  color: #fff; font: 700 13px Tahoma, sans-serif; cursor: pointer;
  border: 1px solid #fff; border-radius: 3px;
  background: linear-gradient(180deg, #e8a08a, #d4552f 55%, #c43e1a);
  text-shadow: 0 0 2px rgba(0,0,0,.5);
}
.sx-close:hover { filter: brightness(1.12); }
.sx-close:active { filter: brightness(.9); }

.sx-body { display: flex; gap: 16px; padding: 18px 16px 12px; background: #ece9d8; align-items: flex-start; }
.sx-icon {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff9a8a, #e0301e 55%, #a81408);
  border: 2px solid #fff; box-shadow: 0 0 0 1px #8c1a10, 1px 2px 3px rgba(0,0,0,.4);
  color: #fff; font: 700 20px/28px Arial, sans-serif; text-align: center;
  text-shadow: 0 1px 1px rgba(0,0,0,.4);
}
.sx-icon--question { background: radial-gradient(circle at 35% 30%, #9cc7ff, #2f6fdc 55%, #13409a); box-shadow: 0 0 0 1px #0f2f73, 1px 2px 3px rgba(0,0,0,.4); }
.sx-icon--warning  { border-radius: 4px; clip-path: polygon(50% 0, 100% 100%, 0 100%); border: 0;
                     background: linear-gradient(#ffe36b, #f4b400); color: #222; text-shadow: none; line-height: 34px; box-shadow: none; }
.sx-text { flex: 1; font-size: 11.5px; line-height: 1.45; }
.sx-text p { margin: 0 0 9px; }
.sx-text p:last-child { margin-bottom: 0; }
.sx-code { color: #555; font-size: 10.5px; }

.sx-details {
  margin: 0 12px 4px; padding: 8px 10px; background: #fff; border: 1px inset #7f9db9;
  font-size: 11px; line-height: 1.45; max-height: 170px; overflow: auto;
}
.sx-details[hidden] { display: none; }
.sx-details p { margin: 0 0 6px; }
.sx-details p:last-child { margin-bottom: 0; }

.sx-buttons { display: flex; justify-content: center; gap: 8px; padding: 8px 12px 12px; background: #ece9d8; }
.sx-btn {
  min-width: 78px; padding: 4px 12px; font: 11px Tahoma, "Segoe UI", sans-serif; color: #000; cursor: pointer;
  background: linear-gradient(180deg, #fff, #ecebe5 85%, #d6d0c5);
  border: 1px solid #003c74; border-radius: 3px;
}
.sx-btn:hover { box-shadow: inset 0 0 0 2px #f8b330; }
.sx-btn:active { background: linear-gradient(180deg, #cdcac3, #e3e3db); }
.sx-btn-default, .sx-btn:focus { outline: none; box-shadow: inset 0 0 0 2px #97b3f6; }

/* Pulsar fuera de un modal: parpadeo de la barra de título, como en XP */
.sx-flash .sx-titlebar { animation: sx-blink .5s steps(2, jump-none) 3; }
@keyframes sx-blink {
  0%   { background: linear-gradient(180deg, #d9d9d9, #b8b8b8); color: #666; text-shadow: none; }
  100% { background: linear-gradient(180deg, #0997ff, #0050ee 40%, #003dd7); color: #fff; }
}