/*
 * Adaptador de seguridad/API.
 * El bloque visual original permanece, sin cambios, en styles.css.
 * Aquí sólo viven estados y controles que el prototipo en memoria no tenía.
 */

noscript {
  display: block;
  padding: 14px;
  color: #fff;
  background: #A8322D;
  text-align: center;
}

.loading-page {
  min-height: 360px;
  display: grid;
  place-items: center;
}

.spinner {
  width: 38px;
  height: 38px;
  border: 3px solid rgba(12,47,63,.18);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: adapter-spin .8s linear infinite;
}

body.gate .spinner {
  border-color: rgba(255,255,255,.25);
  border-top-color: var(--goldl);
}

@keyframes adapter-spin { to { transform: rotate(360deg); } }

.request-pending {
  cursor: wait;
}

.request-pending::after {
  content: "";
  display: inline-block;
  width: .9em;
  height: .9em;
  margin-left: .55em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -.12em;
  animation: adapter-spin .8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .request-pending::after {
    animation: none;
  }
}

.booth-head p {
  margin-top: 7px;
  font-size: 13px;
  color: var(--muted);
}

.auth-actions { margin-top: 14px; text-align: center; }
.linkbtn {
  min-height: 36px;
  padding: 5px;
  color: var(--navy);
  font-size: 13px;
  text-decoration: underline;
}

.success {
  background: rgba(46,125,91,.1);
  border: 1px solid rgba(46,125,91,.45);
  color: #1E6548;
  border-radius: 7px;
  padding: 11px 12px;
  font-size: 13.5px;
  margin-bottom: 14px;
}

.iconbtn {
  position: relative;
  width: 36px;
  min-height: 34px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(216,190,124,.35);
  border-radius: 999px;
  color: rgba(216,190,124,.8);
  font-size: 16px;
  vertical-align: middle;
}

.iconbtn:hover { background: rgba(255,255,255,.08); }

.notification-badge {
  position: absolute;
  top: -6px;
  right: -5px;
  min-width: 19px;
  height: 19px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border: 2px solid var(--navy);
  border-radius: 999px;
  background: #A8322D;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
}

.notification-panel {
  position: fixed;
  z-index: 55;
  top: 64px;
  right: 14px;
  width: min(390px, calc(100vw - 28px));
  max-height: min(560px, calc(100vh - 90px));
  overflow: auto;
  padding: 17px;
  border: 1px solid rgba(12,47,63,.18);
  border-radius: 9px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 16px 42px rgba(0,0,0,.28);
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 300ms ease,
    transform 300ms ease;
}

.notification-panel.is-closing {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}

.notification-panel h2 {
  font-family: var(--display);
  font-size: 20px;
  color: var(--navy);
}

.notification-panel .sub { margin-bottom: 12px; }
.notification-list { display: grid; gap: 10px; }
.notification-item {
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--paper2);
}
.notification-item > b {
  font-family: var(--display);
  font-size: 15px;
  color: var(--navy);
}
.notification-item p { margin-top: 5px; font-size: 12.5px; }
.notification-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  margin-top: 10px;
}

.btn.danger { background: #A8322D; color: #fff; }
.slot.pending { border-color: #A86620; color: #A86620; }
.cadena.pending {
  border-color: rgba(168,102,32,.45);
  background: rgba(168,102,32,.1);
}
.cadena.rejected {
  border-color: rgba(168,50,45,.4);
  background: rgba(168,50,45,.08);
}

.search-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}
.person-results { display: grid; gap: 7px; margin-top: 9px; }
.person-option {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--paper2);
}
.person-option small { display: block; color: var(--muted); }

.modal-backdrop {
  position: fixed;
  z-index: 80;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(2,22,29,.72);
}
.modal {
  width: min(540px, 100%);
  max-height: calc(100vh - 36px);
  overflow: auto;
  border: 1px solid rgba(176,141,63,.5);
  border-radius: 7px;
  background: var(--paper);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px 13px;
  border-bottom: 1px solid var(--line);
}
.modal-head h2 {
  font-family: var(--display);
  font-size: 21px;
  color: var(--navy);
}
.modal-body { padding: 18px 20px 20px; }
.modal-body > p { margin-bottom: 14px; }
.closebtn {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(12,47,63,.06);
  color: var(--navy);
  font-size: 22px;
}

.level-cell { white-space: nowrap; }

.toast.error { background: #A8322D; color: #fff; }

/* Valores visuales originales, aplicados mediante clases compatibles con CSP. */
.tone-default { --adapter-tone: #0C2F3F; }
.tone-com, .tone-f1 { --adapter-tone: #1F6E8C; }
.tone-int, .tone-f4 { --adapter-tone: #B5651D; }
.tone-cul, .tone-f9 { --adapter-tone: #7A4E9E; }
.tone-pro, .tone-f7 { --adapter-tone: #2E7D5B; }
.tone-lid, .tone-f6 { --adapter-tone: #A8322D; }
.tone-bie, .tone-f10 { --adapter-tone: #0E7C86; }
.tone-esp, .tone-f5 { --adapter-tone: #8A6D1F; }
.tone-f2 { --adapter-tone: #2A6E7A; }
.tone-f3 { --adapter-tone: #3D6B99; }
.tone-f8 { --adapter-tone: #3F7A4E; }
.tstamp[class*="tone-"] { border-color: var(--adapter-tone); color: var(--adapter-tone); }
.grule[class*="tone-"] { background: var(--adapter-tone); }
.visabox[class*="tone-"] { border-color: var(--adapter-tone); }
.entry[class*="tone-"], .rn[class*="tone-"] { --tc: var(--adapter-tone); }

.entry-territory { margin: -4px 0 8px; }
.legend-complete { background: var(--ok); }
.legend-empty { background: #B9C4C9; }
.bar .progress-fill, .bar2 .progress-fill {
  display: block;
  width: 100%;
  height: 100%;
}

@media(max-width:480px) {
  .notification-panel { position: fixed; top: 64px; right: 7px; }
  .search-row { grid-template-columns: 1fr; }
  .search-row .btn { width: 100%; }
}