:root {
        font-family: system-ui, sans-serif;
        color: #edf1ff;
        background: #0b1020;
      }
      * {
        box-sizing: border-box;
      }
      body {
        margin: 0;
      }
      main {
        max-width: 1100px;
        margin: 36px auto;
        padding: 18px;
      }
      .box {
        background: #161f36;
        border: 1px solid #34415d;
        border-radius: 15px;
        padding: 22px;
        margin: 14px 0;
      }
      h1 {
        margin: 0;
      }
      small,
      .muted {
        color: #b3c0d9;
      }
      input,
      button {
        font: inherit;
        border-radius: 9px;
        padding: 12px;
      }
      input {
        width: 100%;
        background: #111a30;
        color: white;
        border: 1px solid #34415d;
        margin: 6px 0 14px;
      }
      button {
        background: #6b56e8;
        color: white;
        border: 0;
        cursor: pointer;
        margin-right: 7px;
      }
      button:disabled {
        opacity: 0.5;
      }
      .hide {
        display: none;
      }
      .error {
        color: #ffb0bf;
      }
      .ok {
        color: #91f4c6;
      }
      table {
        border-collapse: collapse;
        width: 100%;
      }
      th,
      td {
        padding: 12px;
        border-bottom: 1px solid #34415d;
        text-align: left;
      }
      section {
        overflow: auto;
      }
      nav {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        align-items: center;
        flex-wrap: wrap;
      }
      .warn {
        background: #4a3921;
        padding: 13px;
        border-radius: 8px;
      }

      /* Estilo para los selectores de Clan y Rol */
      select {
        font: inherit;
        background: #111a30;
        color: white;
        border: 1px solid #34415d;
        border-radius: 9px;
        padding: 12px;
        margin: 6px 10px 14px 0;
        cursor: pointer;
      }

      /* Corregir tamaño de casillas */
      input[type="checkbox"] {
        width: 18px;
        height: 18px;
        padding: 0;
        margin: 0;
        accent-color: #6b56e8;
        cursor: pointer;
      }

      /* Alinear casilla y texto */
      label:has(input[type="checkbox"]) {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 15px 0;
        cursor: pointer;
      }
     
      .grid2 { display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px }
      .row { display:flex;flex-wrap:wrap;gap:8px;align-items:center }
      .row button {margin:0}
      .chip {display:inline-block;padding:5px 10px;border-radius:99px;background:#263455;margin:4px}
      .card {padding:12px;border:1px solid #34415d;border-radius:10px;margin:8px 0}
      .card button {margin-top:6px}
      .secondary {background:#34415d}
      .danger {background:#aa4265}
      #qrCanvas {background:white;padding:12px;border-radius:8px;max-width:100%}
      #cameraVideo {width:100%;max-width:450px;border-radius:12px}
      #qrReader {width:100%;max-width:450px;margin:12px 0;overflow:hidden;border-radius:12px}
      #qrReader video {width:100%;border-radius:12px}
      @media(max-width:650px){main{padding:9px;margin:10px auto}.box{padding:14px}table{font-size:13px}}

      .toolbar{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin:12px 0}
      .toolbar button{margin:0}.secondary{background:#354467}.import-table{max-height:360px;overflow:auto}
      .import-table table{min-width:720px}.pill{border-radius:20px;padding:4px 9px;background:#273b55}
      .small-btn{padding:7px 10px;font-size:.9rem}.progress{white-space:pre-line}
      @media(max-width:640px){main{margin:8px auto;padding:8px}.box{padding:14px}button{margin-bottom:6px}}
      /* Edición rápida sin perder la posición de la lista */
      #volunteerForm.edit-modal.hide{display:none!important}
      #volunteerForm.edit-modal{position:fixed;inset:0;z-index:9999;background:rgba(3,8,22,.78);display:flex;align-items:center;justify-content:center;padding:12px;overflow:auto}
      #volunteerForm.edit-modal .edit-dialog{background:#161f36;border:1px solid #56658c;border-radius:16px;width:min(100%,520px);max-height:calc(100dvh - 24px);display:flex;flex-direction:column;box-shadow:0 20px 70px #0009}
      #volunteerForm.edit-modal .edit-heading{padding:17px 20px 12px;border-bottom:1px solid #34415d;flex-shrink:0}
      #volunteerForm.edit-modal .edit-body{overflow-y:auto;padding:12px 20px;min-height:0}
      #volunteerForm.edit-modal .edit-actions{padding:12px 20px;border-top:1px solid #34415d;flex-shrink:0;background:#161f36;border-radius:0 0 16px 16px}
      #volunteerForm.edit-modal input,#volunteerForm.edit-modal select{max-width:100%}
      body.edit-open{overflow:hidden}
      .modal-overlay.hide{display:none!important}
      .modal-overlay{position:fixed;inset:0;z-index:10020;background:#030816db;display:flex;align-items:center;justify-content:center;padding:12px}
      .modal-dialog{width:min(100%,950px);max-height:calc(100dvh - 24px);overflow:auto;background:#161f36;border:1px solid #56658c;border-radius:16px;padding:20px;box-shadow:0 20px 70px #0009}
      .modal-dialog h3{margin-top:0}.modal-actions{position:sticky;bottom:-20px;background:#161f36;padding:12px 0 0;border-top:1px solid #34415d;display:flex;flex-wrap:wrap;gap:8px}
      .modal-dialog .import-table{max-height:48dvh}.modal-dialog input[type=file]{max-width:100%}
      .ops-matches{max-height:280px;overflow:auto;display:grid;gap:6px;padding:4px}
      .ops-matches button{margin:0;text-align:left;white-space:normal}
      .ops-matches button.active-person{background:#654bea;border:2px solid #c5b9ff;box-shadow:0 0 0 2px #654bea44}
      .selected-person{border:2px solid #8e7bff!important;background:#29234c!important;color:#fff!important}
      .ops-qr-inline{padding:14px;border:1px solid #5362a0;border-radius:12px;margin:12px 0;background:#111a30}
      .ops-qr-inline canvas{display:block;max-width:100%}
      .ops-qr-inline code{overflow-wrap:anywhere;font-size:11px}
      .clan-preview td,.clan-preview th{padding:8px}.clan-preview select{max-width:180px;margin:0;padding:8px}
      .clan-preview .clan-person-search{width:230px;max-width:100%;padding:8px;margin:0 0 5px;display:block}
      .clan-preview td select{width:230px;max-width:100%}
      .clan-preview tr.unmatched{background:#45301f}.clan-preview tr.matched{background:#16372d}
      @media(max-width:650px){.modal-dialog{padding:12px}.clan-preview{min-width:720px}}
    
/* === Diseño y temas: editar aquí para personalizar Confuror Staff === */
:root {
 --color-primary:#6b56e8; --color-primary-light:#a899ff;
 --color-background:#0b1020; --color-surface:#161f36;
 --color-border:#34415d; --color-text:#edf1ff;
 --color-muted:#b3c0d9; --color-success:#22c55e; --color-danger:#aa4265;
}
html {background:var(--color-background);color:var(--color-text)}
body {background:var(--color-background)}
button:focus-visible, input:focus-visible, select:focus-visible {outline:3px solid var(--color-primary-light);outline-offset:2px}
#private:not(.hide){display:grid;grid-template-columns:205px minmax(0,1fr);gap:18px;align-items:start}
.app-navigation {grid-column:1;grid-row:1 / span 8;position:sticky;top:16px;display:flex;flex-direction:column;gap:8px;padding:12px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:16px}
.app-nav-item {width:100%;display:flex;align-items:center;gap:10px;text-align:left;background:transparent;border:1px solid transparent;margin:0;padding:13px 11px}
.app-nav-item:hover {background:#293453}
.app-nav-item.is-active {background:var(--color-primary);border-color:var(--color-primary-light);font-weight:700}
.nav-icon{font-size:20px}.nav-label{font-size:14px}
.app-screen {grid-column:2;min-width:0}
.app-screen[hidden],.app-screen:not(.is-active){display:none!important}
.app-screen>.box{margin-top:0}
#opsSelected {position:relative;margin:12px 0 18px}
#opsMatches{max-height:220px}
@media(max-width:760px){
 main{padding:10px;margin:8px auto 90px}
 #private:not(.hide){display:block}
 .app-navigation{position:fixed;bottom:0;top:auto;left:0;right:0;z-index:9000;display:grid;grid-template-columns:repeat(7,minmax(72px,1fr));gap:2px;overflow-x:auto;padding:6px max(4px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left));border-radius:14px 14px 0 0;box-shadow:0 -8px 25px #0008}
 .app-nav-item{padding:7px 2px;flex-direction:column;gap:2px;justify-content:center;min-width:0}
 .nav-icon{font-size:21px}.nav-label{font-size:10px;white-space:nowrap}
 .app-nav-item[data-target="administracion"] .nav-label{font-size:0}
 .app-nav-item[data-target="administracion"] .nav-label::after{content:'Más';font-size:10px}
 .app-screen{width:100%}
 .modal-overlay{z-index:11000}
}

/* Tabla de voluntarios: encabezado visible y desplazamiento propio */
#registrations {
  max-height: min(68vh, 650px);
  overflow: auto;
  border: 1px solid var(--color-border, #34415d);
  border-radius: 10px;
  scrollbar-gutter: stable;
}
#registrations .tabla-voluntarios {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 660px;
}
#registrations .tabla-voluntarios thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #292444;
  color: #fff;
  box-shadow: inset 0 -2px 0 #7460e9;
  white-space: nowrap;
}
#registrations .tabla-voluntarios tbody tr:hover {
  background: rgba(139, 92, 246, .14);
}
#registrations .numero-voluntario {
  color: #c1b6ff;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  width: 60px;
}
@media (max-width: 650px) {
  #registrations { max-height: 62dvh; }
  #registrations .tabla-voluntarios th,
  #registrations .tabla-voluntarios td { padding: 10px; }
}

/* Mejoras de registro y confirmación de chalecos */
.qr-details { margin: 12px 0; border: 1px solid var(--color-border); border-radius: 12px; padding: 12px; background: #111a30; }
.qr-details summary { cursor: pointer; font-weight: 650; color: var(--color-primary-light); }
.qr-details .ops-qr-inline { margin: 12px 0 0; }
.vest-confirm-dialog { max-width: 560px; }
.vest-confirm-dialog .row { margin-top: 20px; }
.volunteer-qr-button { white-space: nowrap; }