:root {
  --salsa: #BF7634;
  --campo: #313323;
  --sol: #BF7634;
  --lino: #F4E6D0;
  --noche: #313323;
  --text-primary: #191714;
  --text-secondary: #5C584F;
  --text-muted: #8A8378;
  --bg: #FAF8F3;
  --bg-card: #FFFFFF;
  --border: #E8E4DC;
  --radius: 12px;
}


*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text-primary);
  min-height: 100vh;
  -webkit-text-size-adjust: 100%;
}

.admin-app { max-width: 640px; margin: 0 auto; padding: 0 1rem; }

/* LOGIN */
.login-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem 0;
}
.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2.5rem 2rem;
  text-align: center;
}
.login-logo {
  font-size: 2rem;
  font-weight: 900;
  color: var(--salsa);
  letter-spacing: 0.05em;
}
.login-subtitle {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin: 0.25rem 0 2rem;
}

.field { text-align: left; margin-bottom: 1rem; }
.field label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.35rem;
}
.field input, .field select {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 0.95rem;
  background: var(--bg);
  color: var(--text-primary);
  transition: border-color 0.2s;
}
.field input:focus, .field select:focus {
  outline: none;
  border-color: var(--salsa);
}

.btn-login, .btn-create {
  width: 100%;
  padding: 0.8rem;
  background: var(--salsa);
  color: #FFF;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: 0.5rem;
  transition: opacity 0.2s;
}
.btn-login:hover, .btn-create:hover { opacity: 0.9; }
.btn-login:disabled, .btn-create:disabled { opacity: 0.5; cursor: not-allowed; }

.login-error {
  color: var(--salsa);
  font-size: 0.85rem;
  margin-top: 0.75rem;
  min-height: 1.2em;
}

/* DASHBOARD */
.dash-header {
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 10;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
}
.dash-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dash-logo {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--salsa);
  letter-spacing: 0.05em;
}
.dash-role {
  font-size: 0.75rem;
  color: var(--text-muted);
}
.btn-logout {
  padding: 0.4rem 1rem;
  background: transparent;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}
.btn-logout:hover { border-color: var(--salsa); color: var(--salsa); }

/* PANEL VIEWS & MENU */
.panel-view { display: none; padding: 1.5rem 0 3rem; }
.panel-view.active { display: block; }

.menu-welcome {
  margin-bottom: 1.25rem;
  padding: 1.25rem;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  border-left: 4px solid var(--salsa);
}
.menu-welcome-greeting {
  font-size: 1.1rem;
  color: var(--text-primary);
  margin-bottom: 0.2rem;
}
.menu-welcome-role {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.85rem;
  background: transparent;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 1.25rem;
  transition: border-color 0.2s, color 0.2s;
}
.btn-back:hover { border-color: var(--salsa); color: var(--salsa); }

.menu-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.625rem;
  padding-top: 0.5rem;
}
.menu-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.menu-card:hover {
  border-color: var(--salsa);
  box-shadow: 0 2px 12px rgba(191, 118, 52, 0.1);
}
.menu-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--lino);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  flex-shrink: 0;
}
.menu-card-body {
  flex: 1;
  min-width: 0;
}
.menu-card-label {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.15rem;
}
.menu-card-desc {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.35;
}
.menu-card-arrow {
  color: var(--text-muted);
  font-size: 1.1rem;
  flex-shrink: 0;
  transition: color 0.2s;
}
.menu-card:hover .menu-card-arrow { color: var(--salsa); }

/* VENDOR SETTINGS */
.vendor-settings-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.vendor-settings-card h3 {
  font-size: 1rem;
  margin-bottom: 0.75rem;
}
.vendor-settings-card h4 {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
}
.vendor-settings-info p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 0.2rem;
}
.vendor-settings-info p strong {
  color: var(--text-primary);
}
.stand-assign-badge {
  display: inline-block;
  background: var(--campo);
  color: #FFF;
  padding: 0.3rem 0.75rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

/* SCANNER */
.stand-indicator {
  background: var(--campo);
  color: #FFF;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 1rem;
  text-align: center;
  margin-bottom: 1.25rem;
}

.admin-stand-select { margin-bottom: 1.25rem; }
.admin-stand-select label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}
.stand-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}
.stand-buttons button {
  padding: 0.6rem 0.4rem;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1.3;
}
.stand-buttons button.selected {
  border-color: var(--campo);
  background: var(--campo);
  color: #FFF;
}

.scanner-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}
.scanner-box h3 {
  font-size: 0.95rem;
  margin-bottom: 1rem;
}

#qrReader {
  width: 100%;
  margin-bottom: 1rem;
  border-radius: 8px;
  overflow: hidden;
}
#qrReader video { border-radius: 8px; }

.btn-scan {
  width: 100%;
  padding: 0.75rem;
  background: var(--campo);
  color: #FFF;
  border: none;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 1rem;
  transition: opacity 0.2s;
}
.btn-scan:hover { opacity: 0.9; }
.btn-scan.active { background: var(--salsa); }

.manual-input p {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
  text-align: center;
}
.folio-input-row {
  display: flex;
  gap: 0.5rem;
}
.folio-input-row input {
  flex: 1;
  padding: 0.65rem 0.75rem;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 0.95rem;
  background: var(--bg);
  color: var(--text-primary);
  text-transform: uppercase;
}
.folio-input-row input:focus { outline: none; border-color: var(--campo); }
.folio-input-row button {
  padding: 0.65rem 1.25rem;
  background: var(--campo);
  color: #FFF;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
}

/* USER CARD */
.user-card {
  background: var(--bg-card);
  border: 2px solid var(--campo);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}
.user-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.user-card-header h3 { font-size: 1.1rem; }
.folio-badge {
  background: var(--campo);
  color: #FFF;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  font-family: monospace;
}

.user-details {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 1rem;
}
.user-details p { margin-bottom: 0.25rem; }

.user-stamps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 1rem;
}
.user-stamps .stamp-dot {
  width: 2rem;
  height: 1.5rem;
  border-radius: 4px;
  border: 2px dashed var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5rem;
  font-weight: 700;
  color: var(--text-muted);
}
.user-stamps .stamp-dot.filled {
  border-style: solid;
  border-color: var(--campo);
  background: rgba(45, 106, 63, 0.1);
  color: var(--campo);
}

.btn-stamp {
  width: 100%;
  padding: 1rem;
  background: var(--salsa);
  color: #FFF;
  border: none;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 800;
  cursor: pointer;
  transition: opacity 0.2s;
}
.btn-stamp:hover { opacity: 0.9; }
.btn-stamp:disabled { opacity: 0.5; cursor: not-allowed; }

.stamp-result {
  margin-top: 0.75rem;
  padding: 1rem;
  border-radius: 8px;
  font-size: 0.9rem;
  text-align: center;
  display: none;
}
.stamp-result.success {
  display: block;
  background: rgba(45, 106, 63, 0.1);
  color: var(--campo);
  border: 1px solid var(--campo);
}
.stamp-result.error {
  display: block;
  background: rgba(217, 59, 30, 0.1);
  color: var(--salsa);
  border: 1px solid var(--salsa);
}
.stamp-result .stamp-code {
  font-size: 1.5rem;
  font-weight: 900;
  font-family: monospace;
  letter-spacing: 0.1em;
  margin: 0.5rem 0;
}

/* RECENT STAMPS */
.recent-stamps h4 {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}
.recent-stamps ul { list-style: none; }
.recent-stamps li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.75rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 0.4rem;
  font-size: 0.8rem;
}
.recent-stamps li .name { font-weight: 600; }
.recent-stamps li .code {
  font-family: monospace;
  color: var(--campo);
  font-weight: 700;
}

/* VENDORS */
.vendors-section h3 {
  font-size: 1rem;
  margin-bottom: 1rem;
}
.vendor-form {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
}
.form-msg {
  font-size: 0.85rem;
  margin-top: 0.75rem;
  min-height: 1.2em;
}
.form-msg.success { color: var(--campo); }
.form-msg.error { color: var(--salsa); }

.vendor-list { margin-top: 0.75rem; }
.vendor-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 0.5rem;
  gap: 0.5rem;
}
.vendor-item .vendor-info { flex: 1; }
.vendor-item .vendor-name { font-weight: 700; font-size: 0.9rem; }
.vendor-item .vendor-email { font-size: 0.75rem; color: var(--text-muted); }
.vendor-item .vendor-stand {
  background: var(--campo);
  color: #FFF;
  padding: 0.2rem 0.6rem;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}
.vendor-stand-row { flex-shrink: 0; }
.vendor-stand-select {
  font-size: 0.75rem;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-card);
  color: var(--text-primary);
  max-width: 150px;
  cursor: pointer;
}
.empty-msg {
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: center;
  padding: 2rem;
}

/* STATS */
.stats-section h3 {
  font-size: 1rem;
  margin-bottom: 1rem;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 0.75rem;
  text-align: center;
}
.stat-num {
  display: block;
  font-size: 2rem;
  font-weight: 900;
  color: var(--salsa);
}
.stat-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.btn-export {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.6rem 1.2rem;
  background: var(--campo);
  color: #FFF;
  border: none;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}
.btn-export:hover { opacity: 0.85; }

/* REGISTRO LIST */
.registro-list { margin-top: 0.5rem; }
.registro-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  margin-bottom: 0.5rem;
}
.registro-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.35rem;
}
.registro-item-header strong { font-size: 0.9rem; }
.registro-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem 1rem;
  margin-top: 0.5rem;
}
.registro-detail {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.detail-key {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.detail-val {
  font-size: 0.8rem;
  color: var(--text-primary);
  word-break: break-word;
}

/* CHANGE PASSWORD */
.btn-change-pw {
  padding: 0.35rem 0.75rem;
  background: transparent;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.2s, color 0.2s;
}
.btn-change-pw:hover { border-color: var(--salsa); color: var(--salsa); }

.pw-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 1rem;
}
.pw-modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  width: 100%;
  max-width: 380px;
}
.pw-modal h3 {
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
}
.pw-modal-name {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}
.pw-modal-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.pw-modal-actions .btn-create {
  flex: 1;
  margin-top: 0;
}
.pw-modal-actions .btn-logout {
  margin-top: 0;
}

/* CHECK-IN */
.checkin-section { max-width: 600px; margin: 0 auto; }
.checkin-desc { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 1rem; }
.checkin-stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 1.5rem; }
.checkin-scanner-area { text-align: center; margin-bottom: 1rem; }
.btn-scan-checkin {
  padding: 0.7rem 1.5rem; background: var(--salsa); color: #FFF;
  border: none; border-radius: 8px; font-size: 1rem; font-weight: 700; cursor: pointer;
  margin-bottom: 0.75rem;
}
.btn-scan-checkin:hover { opacity: 0.85; }
.btn-scan-checkin.active { background: #C62828; }
.checkin-qr-reader { max-width: 350px; margin: 0 auto; border-radius: 10px; overflow: hidden; }
.checkin-or { text-align: center; color: var(--text-muted); font-size: 0.85rem; margin: 0.75rem 0; }
.checkin-input-area { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.checkin-input-area input {
  flex: 1; padding: 0.75rem; border: 2px solid #E0DCD4; border-radius: 8px;
  font-size: 1.1rem; font-weight: 700; text-transform: uppercase; text-align: center;
  letter-spacing: 0.1em;
}
.checkin-input-area input:focus { border-color: var(--salsa); outline: none; }
.btn-checkin {
  padding: 0.75rem 1.5rem; background: var(--campo); color: #FFF;
  border: none; border-radius: 8px; font-size: 1rem; font-weight: 700; cursor: pointer;
}
.btn-checkin:hover { opacity: 0.85; }
.checkin-success {
  background: #E8F5E9; border: 2px solid #4CAF50; border-radius: 10px;
  padding: 1rem; text-align: center; margin-bottom: 1rem;
}
.checkin-ok-icon { font-size: 2rem; color: #4CAF50; display: block; margin-bottom: 0.25rem; }
.checkin-success strong { display: block; font-size: 1.1rem; margin-bottom: 0.25rem; }
.checkin-duplicate {
  background: #FFF3E0; border: 2px solid #FF9800; border-radius: 10px;
  padding: 1rem; text-align: center; font-weight: 600; color: #E65100; margin-bottom: 1rem;
}
.checkin-dup-icon { font-size: 1.5rem; }
.checkin-error {
  background: #FFEBEE; border: 2px solid #F44336; border-radius: 10px;
  padding: 1rem; text-align: center; font-weight: 600; color: #C62828; margin-bottom: 1rem;
}
.checkin-warn { color: var(--text-muted); text-align: center; }
.checkin-loading { color: var(--text-secondary); text-align: center; }
.checkin-recent-item {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
  padding: 0.6rem 0; border-bottom: 1px solid #E0DCD4;
}
.checkin-recent-name { font-weight: 700; flex: 1; min-width: 120px; }
.checkin-recent-folio { font-size: 0.8rem; color: var(--salsa); font-weight: 600; }
.checkin-recent-people { font-size: 0.8rem; color: var(--text-secondary); }
.checkin-recent-time { font-size: 0.8rem; color: var(--text-muted); margin-left: auto; }

/* RIFA */
.rifa-section {
  max-width: 600px;
  margin: 0 auto;
}
.rifa-desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
}
.rifa-count {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--campo);
  margin-bottom: 1rem;
}
.btn-rifa {
  width: 100%;
  padding: 1rem;
  background: var(--salsa);
  color: #FFF;
  border: none;
  border-radius: 10px;
  font-size: 1.1rem;
  font-weight: 800;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
}
.btn-rifa:hover:not(:disabled) {
  opacity: 0.9;
  transform: scale(1.02);
}
.btn-rifa:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.rifa-winner {
  text-align: center;
  padding: 1.5rem;
  margin: 1.5rem 0;
  border-radius: 12px;
  background: var(--bg);
  border: 2px solid var(--border);
}
.rifa-winner.shuffling {
  animation: rifaShuffle 0.1s ease-in-out;
}
.rifa-winner.final {
  background: rgba(45, 106, 63, 0.08);
  border-color: var(--campo);
}
.rifa-winner h3 {
  font-size: 1.5rem;
  margin: 0 0 0.5rem;
  color: var(--campo);
}
.rifa-winner-name {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0.25rem 0;
}
.rifa-winner-details {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: 0.15rem 0;
}
@keyframes rifaShuffle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@media (max-width: 480px) {
  .admin-app { padding: 0 0.75rem; }
  .login-card { padding: 2rem 1.5rem; }
  .menu-card { padding: 1rem; gap: 0.75rem; }
  .menu-card-icon { width: 40px; height: 40px; font-size: 1.2rem; }
  .stats-grid { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
  .stat-card { padding: 1rem 0.5rem; }
  .stat-num { font-size: 1.5rem; }
}