/* ================================================
   app.css — Shared UI components
   ================================================ */

/* --- Animated dots (connecting state) --- */
@keyframes _dot-pulse { 0%,80%,100%{opacity:.2} 40%{opacity:1} }
.s-dot { display:inline-block; width:5px; height:5px; border-radius:50%; background:currentColor; animation:_dot-pulse 1.4s infinite ease-in-out both; margin:0 1px; }
.s-dot:nth-child(2) { animation-delay:.16s; }
.s-dot:nth-child(3) { animation-delay:.32s; }

/* --- CSS variables --- */
:root {
  --text-1: rgba(33,35,34,.85);
  --border-1: rgba(33,35,34,.09);
  --row-stripe: rgba(33,35,34,.03);
}
[data-theme="dark"] {
  --text-1: rgba(255,255,255,.85);
  --border-1: rgba(255,255,255,.1);
  --row-stripe: rgba(255,255,255,.03);
}

/* --- Content wrapper --- */
.app-content { padding-bottom: 3rem; }

/* --- Page header --- */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.75rem 1.5rem 0;
}
@media (min-width: 1024px) { .page-header { padding: 0; } }
.page-subtitle {
  font-size: 0.875rem;
  margin-top: 0.375rem;
  color: rgba(33, 35, 34, 0.45);
  font-weight: 400;
}

/* --- Section (handles mobile padding) --- */
.app-section { padding: 0 1.5rem; }
@media (min-width: 1024px) { .app-section { padding: 0; } }

/* --- Card --- */
.app-card {
  border: 1px solid rgba(33, 35, 34, 0.1);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(33, 35, 34, 0.05);
}
.app-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1.5rem;
  border-bottom: 1px solid rgba(33, 35, 34, 0.08);
}
.app-card-header-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-left: auto;
}
.app-card-header-actions .btn,
.page-header-actions .btn {
  min-height: 42px;
}
.app-card-header-submit.btn {
  min-height: 2rem;
  padding: 0.375rem 0.875rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.04em;
  box-shadow: none;
}
.app-card-body  { padding: 1.5rem; }
.app-card-label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(33, 35, 34, 0.4);
}
 
.app-card-header-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.table-summary {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: rgba(1, 197, 186, 0.1);
  color: rgb(0, 125, 118);
  font-size: 0.75rem;
  font-weight: 700;
}

.btn-ghost {
  border: 1px solid rgba(33, 35, 34, 0.14);
  background: rgba(33, 35, 34, 0.02);
  color: rgba(33, 35, 34, 0.72);
}

.btn-ghost:hover {
  background: rgba(1, 197, 186, 0.08);
  border-color: rgb(1, 197, 186);
  color: rgb(1, 197, 186);
}

.btn-danger {
  border: 1px solid rgb(185, 46, 60);
  background: rgb(220, 53, 69);
  color: #fff;
}

.btn-danger:hover {
  background: rgb(185, 46, 60);
  border-color: rgb(185, 46, 60);
  color: #fff;
}

.form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-top: 1.25rem;
}

.form-feedback {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding: 0.875rem 1rem;
  border-radius: 10px;
  font-size: 0.875rem;
  line-height: 1.5;
}

.form-feedback.hidden {
  display: none;
}

.form-feedback-info {
  background: rgba(39, 122, 255, 0.08);
  color: rgb(39, 122, 255);
  border: 1px solid rgba(39, 122, 255, 0.18);
}

.form-feedback-success {
  background: rgba(1, 197, 186, 0.1);
  color: rgb(0, 125, 118);
  border: 1px solid rgba(1, 197, 186, 0.18);
}

.form-feedback-error {
  background: rgba(220, 53, 69, 0.08);
  color: rgb(185, 46, 60);
  border: 1px solid rgba(220, 53, 69, 0.18);
}

.has-error input,
.has-error select,
.has-error textarea {
  border-color: rgba(220, 53, 69, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.08);
}

.field-error {
  font-size: 0.75rem;
  line-height: 1.4;
  color: rgb(185, 46, 60);
}

/* --- Forms --- */
.app-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-overview {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.125rem;
  border: 1px solid rgba(33, 35, 34, 0.08);
  border-radius: 12px;
  background:
    radial-gradient(circle at top right, rgba(1, 197, 186, 0.14), transparent 40%),
    linear-gradient(180deg, rgba(33, 35, 34, 0.02), rgba(33, 35, 34, 0.01));
}

.form-overview-copy {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.form-eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgb(0, 125, 118);
}

.form-title {
  margin: 0;
  font-size: 1rem;
  line-height: 1.3;
  color: rgba(33, 35, 34, 0.9);
}

.form-description {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgba(33, 35, 34, 0.58);
}

.form-mode-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: rgba(1, 197, 186, 0.1);
  color: rgb(0, 125, 118);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

.form-mode-badge[data-mode="editing"] {
  background: rgba(39, 122, 255, 0.1);
  color: rgb(39, 122, 255);
}

.form-feedback-anchor {
  min-height: 0;
}

.form-layout {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.form-section {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1rem 1.125rem;
  border: 1px solid rgba(33, 35, 34, 0.08);
  border-radius: 12px;
  background: rgba(33, 35, 34, 0.015);
}

.form-section-header {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.form-section-title {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(33, 35, 34, 0.48);
}

.form-section-description {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: rgba(33, 35, 34, 0.58);
}

.form-grid {
  display: grid;
  gap: 0.875rem 1rem;
}

.form-grid-2,
.form-grid-3,
.form-grid-4,
.form-grid-5 {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
  .form-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .form-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
  .form-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}

.form-field-full {
  grid-column: 1 / -1;
}

.app-form label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(33, 35, 34, 0.7);
  opacity: 1;
}

.form-field[data-required="true"] label::after {
  content: '*';
  color: rgb(220, 53, 69);
}

.field-hint {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: rgba(33, 35, 34, 0.52);
}

.app-form input[type="text"],
.app-form input[type="email"],
.app-form input[type="password"],
.app-form input[type="number"],
.app-form input[type="tel"],
.app-form input[type="search"],
.app-form textarea,
.app-form select {
  width: 100%;
  min-height: 2.75rem;
  border-radius: 10px;
  border: 1px solid rgba(33, 35, 34, 0.12);
  background-color: #fff;
  padding: 0.75rem 0.875rem;
  color: rgba(33, 35, 34, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: border-color 0.12s, box-shadow 0.12s, background-color 0.12s;
}

.app-form textarea {
  min-height: 7rem;
}

.app-form select {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%236a6f6c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem 1rem;
  padding-right: 2.5rem;
}

.app-form select option {
  background: #fff;
  color: rgba(33, 35, 34, 0.82);
}

.app-form input[type="text"]::placeholder,
.app-form input[type="email"]::placeholder,
.app-form input[type="password"]::placeholder,
.app-form input[type="number"]::placeholder,
.app-form input[type="tel"]::placeholder,
.app-form textarea::placeholder {
  color: rgba(33, 35, 34, 0.34);
}

.app-form input[type="text"]:hover,
.app-form input[type="email"]:hover,
.app-form input[type="password"]:hover,
.app-form input[type="number"]:hover,
.app-form input[type="tel"]:hover,
.app-form textarea:hover,
.app-form select:hover {
  border-color: rgba(33, 35, 34, 0.2);
  box-shadow: 0 4px 12px rgba(33, 35, 34, 0.06);
}

.app-form input[type="text"]:focus,
.app-form input[type="email"]:focus,
.app-form input[type="password"]:focus,
.app-form input[type="number"]:focus,
.app-form input[type="tel"]:focus,
.app-form textarea:focus,
.app-form select:focus {
  border-color: rgba(1, 197, 186, 0.55);
  box-shadow: 0 0 0 4px rgba(1, 197, 186, 0.1);
  outline: none;
}

.app-form select.is-placeholder {
  color: rgba(33, 35, 34, 0.42);
}

.app-form .password-field {
  position: relative;
}

.app-form .password-field input {
  padding-right: 3rem;
}

.app-form .password-toggle {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: rgba(33, 35, 34, 0.45);
  transform: translateY(-50%);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.app-form .password-toggle:hover {
  background: rgba(1, 197, 186, 0.08);
  color: rgb(0, 125, 118);
}

.app-form .password-toggle svg {
  width: 1rem;
  height: 1rem;
  display: block;
}

.app-form .form-actions {
  margin-top: 0.125rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(33, 35, 34, 0.08);
}

.app-form .form-actions .btn {
  min-width: 9.5rem;
}

.app-form .form-actions .btn-ghost {
  background: #fff;
}

.app-form.is-busy {
  opacity: 0.92;
}

.app-form.is-busy .password-toggle {
  pointer-events: none;
  opacity: 0.45;
}

.has-error .field-hint {
  color: rgb(185, 46, 60);
}

@media (max-width: 639px) {
  .form-overview {
    flex-direction: column;
    align-items: stretch;
  }

  .form-mode-badge {
    align-self: flex-start;
  }
}

/* Table card — DataTables fills the space */
.app-card-table {
  overflow: hidden;
  --app-table-meta-color: rgba(33,35,34,0.5);
}
.app-card-table .dt-container,
.app-card-table .dataTables_wrapper,
.app-card-table .dt-layout-table,
.app-card-table .dt-scroll,
.app-card-table .dt-scroll-body,
.app-card-table .dt-scroll-head,
.app-card-table .dt-scroll-foot {
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
}
.app-card-table .dt-layout-table {
  overflow-x: auto;
}
.app-card-table .dt-container .dt-layout-row.dt-layout-table {
  display: block !important;
  width: 100% !important;
  padding: 0.75rem 1.5rem;
}
.app-card-table .dt-container .dt-layout-row.dt-layout-table .dt-layout-cell,
.app-card-table .dt-container .dt-layout-row.dt-layout-table .dt-layout-full {
  display: block !important;
  width: 100% !important;
  min-width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* ---- DataTables layout override ---- */

/* Rows as flex (override default display:table) */
.app-card-table .dt-container .dt-layout-row {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem;
  width: 100%;
  box-sizing: border-box;
}
.app-card-table .dt-container .dt-layout-row:first-child {
  border-bottom: 1px solid rgba(33,35,34,0.08);
}
.app-card-table .dt-container .dt-layout-row:last-child:not(.dt-layout-table) {
  border-top: 1px solid rgba(33,35,34,0.08);
}
.app-card-table .dt-container .dt-layout-cell {
  display: block !important;
  padding: 0 !important;
  min-width: 0;
}
.app-card-table .dt-container .dt-layout-start,
.app-card-table .dt-container .dt-layout-end {
  flex-shrink: 0;
  min-width: 0;
}

/* Export buttons */
.app-card-table .dt-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.app-card-table .dt-buttons .dt-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2rem;
  padding: 0 !important;
  font-size: 0 !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  border-radius: 5px !important;
  border: 1px solid rgba(33,35,34,0.14) !important;
  background: #fff !important;
  color: rgba(33,35,34,0.6) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.app-card-table .dt-buttons .dt-button svg {
  width: 1rem;
  height: 1rem;
  display: block;
}
.app-card-table .dt-buttons .dt-button:hover:not(.disabled) {
  background: rgba(1,197,186,0.08) !important;
  border-color: rgb(1,197,186) !important;
  color: rgb(1,197,186) !important;
}

/* Search */
.app-card-table .dt-search {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.app-card-table .dt-search label {
  display: none;
}
.app-card-table .dt-search input {
  min-height: auto !important;
  border: 1px solid rgba(33,35,34,0.15) !important;
  border-radius: 6px !important;
  padding: 0.35rem 0.75rem !important;
  font-size: 0.8125rem !important;
  background: #fff !important;
  color: rgba(33,35,34,0.8) !important;
  width: 180px;
  transition: border-color 0.12s;
  margin: 0 !important;
}
.app-card-table .dt-search input:focus {
  border-color: rgb(1,197,186) !important;
  outline: none;
}
/* Summary + clear button inside the search bar */
.app-card-table .dt-search .table-summary {
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.app-card-table .dt-search .table-clear-filters {
  padding: 0.35rem 0.75rem;
  font-size: 0.8125rem;
  border-radius: 6px;
  line-height: 1.4;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Info + length */
.app-card-table .dt-info {
  font-size: 0.8125rem;
  color: var(--app-table-meta-color) !important;
  white-space: nowrap;
}
.app-card-table .dt-length label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: var(--app-table-meta-color) !important;
  white-space: nowrap;
}
.app-card-table .dt-length select {
  min-height: auto !important;
  border: 1px solid rgba(33,35,34,0.15) !important;
  border-radius: 4px !important;
  padding: 0.2rem 2rem 0.2rem 0.5rem !important;
  font-size: 0.8125rem !important;
  background-color: #fff !important;
  color: rgba(33,35,34,0.7) !important;
}

/* Pagination */
.app-card-table .dt-paging { white-space: nowrap; }
.app-card-table .dt-paging .dt-paging-button {
  padding: 0.25rem 0.55rem !important;
  font-size: 0.8125rem !important;
  border-radius: 5px !important;
  min-width: 1.75rem;
  text-align: center;
}
.app-card-table .dt-paging .dt-paging-button.current,
.app-card-table .dt-paging .dt-paging-button.current:hover {
  background: rgba(1,197,186,0.1) !important;
  border-color: rgba(1,197,186,0.5) !important;
  color: rgb(1,197,186) !important;
}
.app-card-table .dt-paging .dt-paging-button:hover:not(.disabled):not(.current) {
  background: rgba(33,35,34,0.05) !important;
  border-color: rgba(33,35,34,0.2) !important;
  color: rgba(33,35,34,0.8) !important;
}
.app-card-table .dt-paging .dt-paging-button.disabled {
  opacity: 0.35;
}

/* --- Status badges --- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.5rem;
  border-radius: 100px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  vertical-align: middle;
  white-space: nowrap;
}
.badge-active   { color: #009e8c; background: rgba(1, 197, 186, 0.12); }
.badge-inactive { color: #888;    background: rgba(33, 35, 34, 0.07);  }
.badge-info { color: #277aff; background: rgba(39, 122, 255, 0.1); }
.badge-warning { color: #8a6400; background: rgba(250, 176, 5, 0.16); }

/* --- Stat cards (corp_departaments) --- */
.stats-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (min-width: 640px) { .stats-row { grid-template-columns: repeat(4, 1fr); } }

.stat-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid rgba(33, 35, 34, 0.1);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(33, 35, 34, 0.04);
}
.stat-card-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stat-card-info { display: flex; flex-direction: column; gap: 0.125rem; }
.stat-card-name {
  font-size: 0.8125rem;
  color: rgba(33, 35, 34, 0.55);
  white-space: nowrap;
}
.stat-card-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.25rem;
}
.stat-sub-item {
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
}
.stat-sub-active   { color: #009e8c; }
.stat-sub-inactive { color: #888; }
.stat-loading      { color: rgba(33,35,34,0.25); }

/* --- CRUD Modal --- */
.crud-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(0, 0, 0, 0.45);
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.crud-modal.open {
  display: flex;
}
.crud-modal-dialog {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.18);
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: crudModalIn 0.2s ease;
}
@keyframes crudModalIn {
  from { opacity: 0; transform: translateY(-16px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)     scale(1); }
}
.crud-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.4rem 0.9rem;
  border-bottom: 1px solid rgba(33,35,34,0.08);
  flex-shrink: 0;
}
.crud-modal-title {
  font-size: 1rem;
  font-weight: 700;
  color: #212322;
}
.crud-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: rgba(33,35,34,0.45);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.crud-modal-close:hover { background: rgba(33,35,34,0.07); color: #212322; }
.crud-modal-body {
  padding: 1.25rem 1.4rem;
  overflow-y: auto;
}
.crud-modal-body select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%236a6f6c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem 1rem;
  padding-right: 2.5rem;
}
.crud-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 0.9rem 1.4rem 1.1rem;
  border-top: 1px solid rgba(33,35,34,0.08);
  flex-shrink: 0;
}

/* --- DataTable: table body styling --- */

/* Override DataTables default CSS variables for brand colors */
.app-card-table table.dataTable {
  --dt-row-stripe: 1, 197, 186;
  --dt-row-hover: 1, 197, 186;
  --dt-column-ordering: 1, 197, 186;
  width: 100% !important;
  min-width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0 !important;
}

/* Header */
.app-card-table table.dataTable > thead > tr > th,
.app-card-table table.dataTable > thead > tr > td {
  padding: 0.625rem 1rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(33, 35, 34, 0.45);
  background: rgba(33, 35, 34, 0.02);
  border-bottom: 1px solid rgba(33, 35, 34, 0.08) !important;
  white-space: nowrap;
}
.app-card-table table.dataTable > thead > tr.filters > th,
.app-card-table table.dataTable > thead > tr.filters > td {
  padding: 0.375rem 0.75rem;
  background: #fff;
  border-bottom: 1px solid rgba(33, 35, 34, 0.08) !important;
}
.app-card-table table.dataTable > thead > tr.filters input,
.app-card-table table.dataTable > thead > tr.filters select {
  width: 100%;
  min-height: 1.75rem !important;
  height: 1.75rem;
  padding: 0.2rem 0.5rem !important;
  border: 1px solid rgba(33, 35, 34, 0.12) !important;
  border-radius: 6px !important;
  background: rgba(33, 35, 34, 0.02) !important;
  color: rgba(33, 35, 34, 0.82) !important;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  font-size: 0.6875rem !important;
  font-weight: 500;
  line-height: 1.2;
  box-shadow: none !important;
}
.app-card-table table.dataTable > thead > tr.filters input::placeholder,
.app-card-table table.dataTable > thead > tr.filters select::placeholder {
  color: rgba(33, 35, 34, 0.35) !important;
}
.app-card-table table.dataTable > thead > tr.filters input:hover,
.app-card-table table.dataTable > thead > tr.filters select:hover {
  border-color: rgba(33, 35, 34, 0.2) !important;
  background: rgba(33, 35, 34, 0.03) !important;
}
.app-card-table table.dataTable > thead > tr.filters input:focus,
.app-card-table table.dataTable > thead > tr.filters select:focus {
  border-color: rgba(1, 197, 186, 0.55) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(1, 197, 186, 0.1) !important;
  outline: none;
}

/* Sort arrows color */
.app-card-table table.dataTable thead > tr > th.dt-orderable-asc:hover,
.app-card-table table.dataTable thead > tr > th.dt-orderable-desc:hover {
  outline: 2px solid rgba(1, 197, 186, 0.12) !important;
  outline-offset: -2px;
}
.app-card-table table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order::before,
.app-card-table table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order::after {
  opacity: 0.7;
  color: rgb(1, 197, 186);
}

/* Body cells */
.app-card-table table.dataTable > tbody > tr > th,
.app-card-table table.dataTable > tbody > tr > td {
  padding: 0.45rem 0.875rem;
  font-size: 0.75rem;
  line-height: 1.35;
  color: rgba(33, 35, 34, 0.8);
  border-top: 1px solid rgba(33, 35, 34, 0.06) !important;
  vertical-align: middle;
  white-space: nowrap;
}
.app-card-table table.dataTable > tbody > tr:first-child > * {
  border-top: none !important;
}

/* Stripe: very light teal tint on odd rows */
.app-card-table table.dataTable.display > tbody > tr:nth-child(odd) > *,
.app-card-table table.dataTable.stripe  > tbody > tr:nth-child(odd) > * {
  box-shadow: inset 0 0 0 9999px rgba(1, 197, 186, 0.03) !important;
}

/* Row hover */
.app-card-table table.dataTable.hover > tbody > tr:hover > *,
.app-card-table table.dataTable.display > tbody > tr:hover > * {
  box-shadow: inset 0 0 0 9999px rgba(1, 197, 186, 0.07) !important;
}

/* Hide tfoot (duplicate header row) */
.app-card-table table.dataTable > tfoot { display: none; }

/* Action buttons inside table rows */
.app-card-table table.dataTable td button,
.app-card-table table.dataTable td .btn-large {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.5rem;
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.02em;
  border-radius: 5px;
  border: 1px solid rgba(33, 35, 34, 0.14);
  background: #fff;
  color: rgba(33, 35, 34, 0.6);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  margin-right: 0.25rem;
}
.app-card-table table.dataTable td button:last-child,
.app-card-table table.dataTable td .btn-large:last-child {
  margin-right: 0;
}
.app-card-table table.dataTable td .table-action {
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  justify-content: center;
}
.app-card-table table.dataTable td .table-action svg {
  width: 0.875rem;
  height: 0.875rem;
  display: block;
  pointer-events: none;
}
.app-card-table table.dataTable td .table-action svg * {
  pointer-events: none;
}
.app-card-table table.dataTable td button:hover,
.app-card-table table.dataTable td .btn-large:hover {
  background: rgba(1, 197, 186, 0.08);
  border-color: rgb(1, 197, 186);
  color: rgb(1, 197, 186);
}
/* Delete button: red on hover/focus/active */
.app-card-table table.dataTable td .table-action-delete:hover,
.app-card-table table.dataTable td .table-action-delete:focus,
.app-card-table table.dataTable td .table-action-delete:active {
  background: rgba(220, 53, 69, 0.07) !important;
  border-color: rgba(220, 53, 69, 0.5) !important;
  color: rgb(220, 53, 69) !important;
}
/* Incidents button: yellow base + yellow on hover/focus/active */
.app-card-table table.dataTable td .table-action-incidents {
  color: #e6a817;
}
.app-card-table table.dataTable td .table-action-incidents:hover,
.app-card-table table.dataTable td .table-action-incidents:focus,
.app-card-table table.dataTable td .table-action-incidents:active {
  background: rgba(230, 168, 23, 0.1) !important;
  border-color: rgba(230, 168, 23, 0.5) !important;
  color: #e6a817 !important;
}

/* --- Status toggle field --- */
.status-toggle-field {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  /* Alineación vertical con otros inputs de formulario */
  min-height: 42px;
}

.status-toggle {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 24px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: rgba(33, 35, 34, 0.15);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease, border-color 0.2s ease;
  outline: none;
}
.status-toggle:focus-visible {
  box-shadow: 0 0 0 3px rgba(1, 197, 186, 0.25);
  border-color: rgb(1, 197, 186);
}
.status-toggle[data-active="1"] {
  background: rgb(1, 197, 186);
  border-color: rgb(1, 197, 186);
}

.status-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease;
  pointer-events: none;
}
.status-toggle[data-active="1"] .status-toggle-thumb {
  transform: translateX(20px);
}

.status-toggle-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(33, 35, 34, 0.4);
  transition: color 0.15s;
  user-select: none;
}
.status-toggle[data-active="1"] ~ .status-toggle-label {
  color: rgb(1, 197, 186);
}

/* ================================================
   Dark mode — CSS custom properties override
   Activado automáticamente por prefers-color-scheme
   o manualmente añadiendo data-theme="dark" al <html>
   ================================================ */

/* ── Dark mode ────────────────────────────────────────────────────────────────
   Activado manualmente con el botón de luna (JS escribe data-theme="dark" en <html>).
   Por defecto siempre se arranca en modo claro.

   Paleta:
     Fondo body / nav / sidebar : #202222  (sin cambio — ya son dark by design)
     Superficie card             : #2c2e2e  (ligeramente más claro para distinguirse)
     Superficie elevada (inputs) : #323434
     Texto principal             : #ffffff
     Texto secundario            : rgba(255,255,255,.55)
     Borde                       : rgba(255,255,255,.08)
   ─────────────────────────────────────────────────────────────────────────── */

/* Nav y sidebar: SIN CAMBIO — body, nav y aside son #202222 en ambos modos   */

/* Área de contenido principal */
[data-theme="dark"] main                    { background: #161818; color: #ffffff; }
[data-theme="dark"] .app-content            { color: #ffffff; }

/* Cards y paneles */
[data-theme="dark"] .app-card               { background: #2c2f2f; border-color: rgba(255,255,255,.13); box-shadow: 0 2px 12px rgba(0,0,0,.45); }
[data-theme="dark"] .app-card-header        { border-color: rgba(255,255,255,.10); }
[data-theme="dark"] .app-card-label         { color: rgba(255,255,255,.5); }
[data-theme="dark"] .stat-card              { background: #2c2f2f; border-color: rgba(255,255,255,.13); box-shadow: 0 2px 12px rgba(0,0,0,.45); }
[data-theme="dark"] .stat-card-name         { color: rgba(255,255,255,.55); }
[data-theme="dark"] .stat-card-sub          { color: rgba(255,255,255,.45); }
[data-theme="dark"] .stat-card h4,
[data-theme="dark"] .stat-card h4 *         { color: #ffffff !important; }

/* Tipografía del contenido */
[data-theme="dark"] .page-header h3         { color: #ffffff; }
[data-theme="dark"] .page-subtitle          { color: rgba(255,255,255,.45); }

/* Enlaces solo dentro del contenido principal, nunca en nav, sidebar ni botones */
[data-theme="dark"] main a:not(.btn):not([class*="btn-"]) { color: #4dcfc9; }
[data-theme="dark"] main a:not(.btn):not([class*="btn-"]):hover { color: #7ef2ea; }

/* Botones .btn: texto oscuro sobre teal, igual que modo claro */
[data-theme="dark"] .btn                    { color: rgb(32,34,34) !important; }
/* btn-ghost: texto blanco visible sobre fondo oscuro */
[data-theme="dark"] .btn-ghost              { color: rgba(255,255,255,.85) !important; }
[data-theme="dark"] .btn-ghost:hover        { color: #01c5ba !important; }

/* Labels y texto de controles DataTables */
[data-theme="dark"] .dataTables_filter label,
[data-theme="dark"] .dataTables_filter,
[data-theme="dark"] .dataTables_length label,
[data-theme="dark"] .dataTables_length,
[data-theme="dark"] .dataTables_info,
[data-theme="dark"] .dt-layout-row,
[data-theme="dark"] .dt-search label,
[data-theme="dark"] .dt-length label        { color: rgba(255,255,255,.7) !important; }

/* Botones de exportación CSV/Excel */
[data-theme="dark"] .dt-buttons .dt-button  { background: #2c2f2f !important; border-color: rgba(255,255,255,.15) !important; color: rgba(255,255,255,.8) !important; }
[data-theme="dark"] .dt-buttons .dt-button:hover { background: #3a3d3d !important; color: #ffffff !important; }

/* Botones */
[data-theme="dark"] .btn-ghost              { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.8); }
[data-theme="dark"] .btn-ghost:hover        { background: rgba(1,197,186,.15); border-color: #01c5ba; color: #01c5ba; }

/* Formularios */
[data-theme="dark"] .form-field label                  { color: rgba(255,255,255,.6); }
[data-theme="dark"] .app-form .password-toggle         { color: rgba(255,255,255,.4); }
[data-theme="dark"] .app-form .password-toggle:hover   { background: rgba(1,197,186,.12); color: #4dcfc9; }
[data-theme="dark"] input,
[data-theme="dark"] textarea                { background: #212322 !important; border-color: rgba(255,255,255,.14) !important; color: #ffffff !important; }
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="datetime-local"],
[data-theme="dark"] input[type="time"]      { color-scheme: dark; }
[data-theme="dark"] select                  { -webkit-appearance:none; -moz-appearance:none; appearance:none; background-color: #212322 !important; background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 0.75rem center !important; background-size: 1rem 1rem !important; padding-right: 2.5rem !important; border-color: rgba(255,255,255,.14) !important; color: #ffffff !important; }
[data-theme="dark"] input::placeholder      { color: rgba(255,255,255,.3) !important; }
[data-theme="dark"] .section-label         { color: #ffffff !important; }
[data-theme="dark"] .form-section-title    { color: #ffffff !important; }
[data-theme="dark"] .section-divider       { border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .form-feedback.success  { background: rgba(1,197,186,.1); color: #4dcfc9; }
[data-theme="dark"] .form-feedback.error    { background: rgba(220,53,69,.1); color: #f28f98; }

/* Filtro de fechas */
[data-theme="dark"] .log-date-filter        { background: rgba(255,255,255,.02); border-color: rgba(255,255,255,.06); }
[data-theme="dark"] .log-date-filter label  { color: rgba(255,255,255,.5); }

/* DataTables — interior en modo claro para máxima legibilidad */
[data-theme="dark"] .dataTables_wrapper                        { color: #ffffff; }

/* Cabecera de tabla: oscura con texto blanco */
[data-theme="dark"] table.dataTable thead th                   { background: #212322 !important; color: rgba(255,255,255,.8) !important; border-color: rgba(255,255,255,.1) !important; }
[data-theme="dark"] .dataTables_scrollHeadInner table thead th { background: #212322 !important; color: rgba(255,255,255,.8) !important; }

/* Inputs de filtro de columna (en el thead): también oscuros */

/* Cuerpo de tabla: gris oscuro, texto blanco */
[data-theme="dark"] table.dataTable tbody tr                   { background: #2c2f2f !important; }
[data-theme="dark"] table.dataTable tbody tr:nth-child(even)   { background: #272a2a !important; }
[data-theme="dark"] table.dataTable tbody tr:hover             { background: #373b3b !important; }
[data-theme="dark"] table.dataTable tbody td                   { border-color: rgba(255,255,255,.05) !important; color: #ffffff !important; }
html[data-theme="dark"] table.dataTable tbody td.dataTables_empty,
html[data-theme="dark"] table.dataTable tbody tr td.dataTables_empty { color: #ffffff !important; background: transparent !important; }
.td-muted { font-size: .8em; color: rgba(33,35,34,.3); }
[data-theme="dark"] .td-muted { color: rgba(255,255,255,.3) !important; }
[data-theme="dark"] .app-card-table table.dataTable td button,
[data-theme="dark"] .app-card-table table.dataTable td .btn-large    { background: rgba(255,255,255,.07) !important; border-color: rgba(255,255,255,.14) !important; color: rgba(255,255,255,.75) !important; }
[data-theme="dark"] .app-card-table table.dataTable td button:hover,
[data-theme="dark"] .app-card-table table.dataTable td .btn-large:hover { background: rgba(1,197,186,.18) !important; border-color: #01c5ba !important; color: #01c5ba !important; }
[data-theme="dark"] .app-card-table table.dataTable td button:last-of-type:hover { background: rgba(220,53,69,.15) !important; border-color: rgba(220,53,69,.6) !important; color: #f87171 !important; }

/* Controles externos: búsqueda global, longitud, paginación */
[data-theme="dark"] .dataTables_filter input,
[data-theme="dark"] .dt-search input,
[data-theme="dark"] .app-card-table .dt-search input           { background: #2c2f2f !important; border-color: rgba(255,255,255,.15) !important; color: rgba(255,255,255,.8) !important; }
[data-theme="dark"] .dataTables_filter input::placeholder,
[data-theme="dark"] .dt-search input::placeholder,
[data-theme="dark"] .app-card-table .dt-search input::placeholder { color: rgba(255,255,255,.35) !important; }
[data-theme="dark"] .dataTables_length select,
[data-theme="dark"] .app-card-table .dt-length select,
[data-theme="dark"] .dt-length select                          { background-color: #2c2f2f !important; border-color: rgba(255,255,255,.15) !important; color: rgba(255,255,255,.8) !important; }
[data-theme="dark"] .dataTables_info,
[data-theme="dark"] .app-card-table .dt-info,
[data-theme="dark"] .dt-info                                   { color: rgba(255,255,255,.5) !important; }
[data-theme="dark"] .app-card-table .dt-paging .dt-paging-button                        { background: rgba(255,255,255,.06) !important; color: rgba(255,255,255,.7) !important; border-color: rgba(255,255,255,.1) !important; }
[data-theme="dark"] .app-card-table .dt-paging .dt-paging-button:hover                  { background: rgba(255,255,255,.12) !important; color: #fff !important; }
[data-theme="dark"] .app-card-table .dt-paging .dt-paging-button.current,
[data-theme="dark"] .app-card-table .dt-paging .dt-paging-button.current:hover          { background: #01c5ba !important; color: #fff !important; border-color: #01c5ba !important; }
[data-theme="dark"] .app-card-table .dt-paging .dt-paging-button.disabled,
[data-theme="dark"] .app-card-table .dt-paging .dt-paging-button.disabled:hover         { background: rgba(255,255,255,.03) !important; color: rgba(255,255,255,.2) !important; border-color: rgba(255,255,255,.06) !important; cursor: default; }

/* Badges en tablas */
[data-theme="dark"] .badge-success { background: rgba(1,197,186,.18);  color: #4dcfc9; }
[data-theme="dark"] .badge-info    { background: rgba(39,122,255,.18); color: #7eb3f2; }
[data-theme="dark"] .badge-warning { background: rgba(250,176,5,.18);  color: #f2d07e; }
[data-theme="dark"] .badge-danger  { background: rgba(220,53,69,.18);  color: #f28f98; }
[data-theme="dark"] .badge-active   { background: rgba(1,197,186,.18);   color: #4dcfc9; }
[data-theme="dark"] .badge-inactive { background: rgba(255,255,255,.08); color: rgba(255,255,255,.45); }

/* Dashboard: tabla reciente y badges de eventos */
[data-theme="dark"] .dash-section-title  { color: rgba(255,255,255,.4); }
[data-theme="dark"] .recent-table th     { color: rgba(255,255,255,.45); border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .recent-table td     { color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.05); }
[data-theme="dark"] .ev-login            { background: rgba(1,197,186,.15);   color: #4dcfc9; }
[data-theme="dark"] .ev-login_failed     { background: rgba(220,53,69,.15);   color: #f28f98; }
[data-theme="dark"] .ev-logout           { background: rgba(255,255,255,.08); color: rgba(255,255,255,.5); }
[data-theme="dark"] .ev-create           { background: rgba(39,122,255,.15);  color: #7eb3f2; }
[data-theme="dark"] .ev-update           { background: rgba(250,176,5,.15);   color: #f2d07e; }
[data-theme="dark"] .ev-delete           { background: rgba(220,53,69,.15);   color: #f28f98; }
[data-theme="dark"] .ev-password_change  { background: rgba(250,176,5,.15);   color: #f2d07e; }
[data-theme="dark"] .ev-dept_create,
[data-theme="dark"] .ev-dept_update,
[data-theme="dark"] .ev-dept_delete      { background: rgba(39,122,255,.15);  color: #7eb3f2; }

/* Modal (crud-modal) */
[data-theme="dark"] .crud-modal-dialog      { background: #2c2f2f; border: 1px solid rgba(255,255,255,.12); }
[data-theme="dark"] .crud-modal-title       { color: #ffffff; }
[data-theme="dark"] .crud-modal-close       { color: rgba(255,255,255,.6); }
[data-theme="dark"] .crud-modal-close:hover { background: rgba(255,255,255,.08); color: #ffffff; }
[data-theme="dark"] .crud-modal-header      { border-bottom-color: rgba(255,255,255,.1); }
[data-theme="dark"] .crud-modal-footer      { border-top-color: rgba(255,255,255,.1); }
[data-theme="dark"] #statusRow             { border-top-color: rgba(255,255,255,.1) !important; color: #ffffff; }
/* Toggle desactivado en dark */
[data-theme="dark"] .status-toggle                          { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.3); }
[data-theme="dark"] .status-toggle .status-toggle-thumb     { background: #ffffff; }
[data-theme="dark"] .status-toggle[data-active="1"]         { background: rgb(1,197,186); border-color: rgb(1,197,186); }
[data-theme="dark"] .status-toggle-label                    { color: rgba(255,255,255,.6); }
[data-theme="dark"] .status-toggle[data-active="1"] ~ .status-toggle-label { color: rgb(1,197,186); }
[data-theme="dark"] .crud-modal-body        { color: rgba(255,255,255,.85); }
/* Inputs dentro del modal en dark */
[data-theme="dark"] .crud-modal-body input,
[data-theme="dark"] .crud-modal-body select,
[data-theme="dark"] .crud-modal-body textarea { background: #383c3c; border-color: rgba(255,255,255,.18); color: #ffffff; }
[data-theme="dark"] .crud-modal-body select   { background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
[data-theme="dark"] .crud-modal-body input::placeholder,
[data-theme="dark"] .crud-modal-body textarea::placeholder { color: rgba(255,255,255,.35); }
[data-theme="dark"] .crud-modal-body label   { color: rgba(255,255,255,.75); }
[data-theme="dark"] .crud-modal-body .section-label { color: #ffffff !important; }
[data-theme="dark"] .crud-modal-body .form-hint { color: rgba(255,255,255,.4); }
/* Select options */
[data-theme="dark"] .crud-modal-body select option { background: #2c2f2f; color: #ffffff; }
[data-theme="dark"] .app-form select option        { background: #2c2f2f; color: #ffffff; }
[data-theme="dark"] .app-form select               { color-scheme: dark; }

/* Modal (app-modal-box legacy) */
[data-theme="dark"] .app-modal-box          { background: #2c2f2f; border: 1px solid rgba(255,255,255,.12); }
[data-theme="dark"] .locker-card                  { background: #212322; border-color: rgba(255,255,255,.25); box-shadow: none; }
[data-theme="dark"] .locker-card-status-wrap      { border-left-color: rgba(255,255,255,.08); }
[data-theme="dark"] .locker-card-eyebrow   { color: rgba(255,255,255,.45); }
[data-theme="dark"] .locker-card-name      { color: #ffffff; }
[data-theme="dark"] .locker-card-status                { background: rgba(255,255,255,.08); color: rgba(255,255,255,.5); }
[data-theme="dark"] .locker-card-status.s-close        { background: rgba(39,122,255,.15);  color: #7eb3f2; }
[data-theme="dark"] .locker-card-status.s-open         { background: rgba(250,176,5,.18);   color: #f2d07e; }
[data-theme="dark"] .locker-card-status.s-error        { background: rgba(220,53,69,.15);   color: #f28f98; }
[data-theme="dark"] .locker-card-status.s-loading      { background: rgba(16,185,129,.15);  color: #4ade80; }
[data-theme="dark"] .locker-card-icon                  { background: rgba(1,197,186,.12);   color: #4dcfc9; }
[data-theme="dark"] .locker-card-icon.dept             { background: rgba(39,122,255,.12);  color: #7eb3f2; }
[data-theme="dark"] .locker-card-actions .btn          { color: rgba(255,255,255,.85); }
[data-theme="dark"] .app-modal-title        { color: #ffffff; }
[data-theme="dark"] .app-modal-body         { color: rgba(255,255,255,.65); }

/* Toasts */
[data-theme="dark"] .toast-success          { background:#0d3d38; color:#7ef2ea; border-color:rgba(1,197,186,.3); }
[data-theme="dark"] .toast-error            { background:#3d0d11; color:#f28f98; border-color:rgba(220,53,69,.3); }
[data-theme="dark"] .toast-info             { background:#0d1d3d; color:#7eb3f2; border-color:rgba(39,122,255,.3); }
[data-theme="dark"] .toast-warning          { background:#3d2e00; color:#f2d07e; border-color:rgba(250,176,5,.3); }

/* 2FA section text */
.twofa-title { font-size:.875rem; font-weight:600; color:rgba(33,35,34,.8); }
.twofa-desc  { font-size:.75rem;  color:rgba(33,35,34,.5); margin-top:.2rem; }
[data-theme="dark"] .twofa-title { color:rgba(255,255,255,.6); font-weight:400; }
[data-theme="dark"] .twofa-desc  { color:rgba(255,255,255,.38); }


[data-theme="dark"] .empty-state { color: rgba(255, 255, 255, .6); }

/* Dark mode toggle button */
#btnDarkToggle {
  position: fixed; bottom: 1.25rem; left: 1.25rem; z-index: 9998;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(33,35,34,.15); background: rgba(255,255,255,.9);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 12px rgba(0,0,0,.12); transition: background .2s, border-color .2s, color .2s;
  padding: 0; color: rgba(33,35,34,.7);
}
/* Fila de filtros individuales en thead */
html[data-theme="dark"] table.dataTable thead tr.filters th,
html[data-theme="dark"] table.dataTable thead tr.filters td { background: #1e2121 !important; border-bottom-color: rgba(255,255,255,.08) !important; }

/* Inputs de filtro de columna en thead — deben ir AL FINAL para ganar a la regla general de inputs */
html[data-theme="dark"] table.dataTable thead th input,
html[data-theme="dark"] table.dataTable thead td input,
html[data-theme="dark"] table.dataTable thead tr.filters input,
html[data-theme="dark"] table.dataTable thead tr.filters select { background: #2c2f2f !important; border-color: rgba(255,255,255,.15) !important; color: rgba(255,255,255,.8) !important; }
html[data-theme="dark"] table.dataTable thead tr.filters select { background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23cccccc' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 0.3rem center !important; background-size: 0.85rem 0.85rem !important; padding-right: 1.4rem !important; }
html[data-theme="dark"] table.dataTable thead th input::placeholder,
html[data-theme="dark"] table.dataTable thead td input::placeholder,
html[data-theme="dark"] table.dataTable thead tr.filters input::placeholder { color: rgba(255,255,255,.35) !important; }
html[data-theme="dark"] table.dataTable thead tr.filters input:hover,
html[data-theme="dark"] table.dataTable thead tr.filters select:hover       { background: #353939 !important; border-color: rgba(255,255,255,.25) !important; }
html[data-theme="dark"] table.dataTable thead tr.filters input:focus,
html[data-theme="dark"] table.dataTable thead tr.filters select:focus        { background: #2c2f2f !important; border-color: rgba(1,197,186,.6) !important; box-shadow: 0 0 0 3px rgba(1,197,186,.15) !important; color: rgba(255,255,255,.9) !important; }

[data-theme="dark"] #btnDarkToggle {
  background: #ffffff; border-color: rgba(255,255,255,.2); color: rgba(33,35,34,.8);
}
[data-theme="dark"] #btnDarkToggle:hover {
  background: #f0f0f0;
}

/* Table fade-in on first data load */
.app-card-table {
  opacity: 0;
  transition: opacity 0.22s ease;
}
.app-card-table.dt-loaded {
  opacity: 1;
}

/* Page fade-in for non-table pages */
.page-fade {
  opacity: 0;
  transition: opacity 0.25s ease;
}
.page-fade.page-loaded {
  opacity: 1;
}

/* ================================================
   about.php
   ================================================ */
.about-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
}
@media (max-width: 720px) {
	.about-grid { grid-template-columns: 1fr; }
}
.about-card {
	max-width: 760px;
}
.info-row {
	display: flex;
	align-items: flex-start;
	gap: 0.875rem;
	padding: 0.75rem 0;
	border-bottom: 1px solid rgba(33,35,34,0.07);
	font-size: 0.9rem;
}
.info-row:last-child { border-bottom: none; }
.info-row-icon {
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	border-radius: 8px;
	background: rgba(1,197,186,0.10);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #01c5ba;
}
.info-row-label {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgba(33,35,34,0.38);
	margin-bottom: 0.15rem;
}
.info-row-value {
	font-size: 0.9375rem;
	color: rgba(33,35,34,0.85);
	font-weight: 500;
	word-break: break-all;
}
.info-row-value a {
	color: #01c5ba;
	text-decoration: none;
}
.info-row-value a:hover { text-decoration: underline; }

.section-label {
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: rgba(33,35,34,0.38);
	margin-bottom: 1rem;
}
.section-divider {
	border: none;
	border-top: 1px solid rgba(33,35,34,0.08);
	margin: 1.5rem 0;
}
.app-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.3rem 0.75rem;
	border-radius: 20px;
	font-size: 0.78rem;
	font-weight: 600;
	background: rgba(1,197,186,0.10);
	color: #007d76;
}
.app-badge.prod {
	background: rgba(25,135,84,0.10);
	color: #198754;
}
.app-badge.dev {
	background: rgba(255,153,0,0.12);
	color: #b36b00;
}

/* Logo tema */
[data-theme="dark"] .xelab-logo-light { display: none  !important; }
[data-theme="dark"] .xelab-logo-dark  { display: block !important; }

/* Dark mode */
[data-theme="dark"] .about-note { color: rgba(255,255,255,.55) !important; }
[data-theme="dark"] .info-row { border-color: rgba(255,255,255,0.07); }
[data-theme="dark"] .info-row-icon { background: rgba(1,197,186,0.15); }
[data-theme="dark"] .info-row-value { color: rgba(255,255,255,0.85); }
[data-theme="dark"] .info-row-label { color: rgba(255,255,255,0.35); }
[data-theme="dark"] .section-divider { border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .app-badge { background: rgba(1,197,186,0.15); color: #4dd9d0; }
[data-theme="dark"] .app-badge.prod { background: rgba(25,135,84,0.15); color: #4ec98c; }
[data-theme="dark"] .app-badge.dev  { background: rgba(255,153,0,0.15); color: #ffa733; }

/* ================================================
   maintenance.php
   ================================================ */
body.maintenance-body { display:flex; align-items:center; justify-content:center; min-height:100vh; background:var(--color-bg,#f5f7fa); }
.maint-card { background:#fff; border:1px solid rgba(33,35,34,.09); border-radius:16px; padding:3rem 2.5rem; max-width:480px; text-align:center; box-shadow:0 4px 32px rgba(33,35,34,.08); }
.maint-icon { width:72px; height:72px; margin:0 auto 1.5rem; display:flex; align-items:center; justify-content:center;
              background:rgba(1,197,186,.1); border-radius:50%; color:#01c5ba; }
.maint-title { font-size:1.5rem; font-weight:700; color:#212322; margin-bottom:.75rem; }
.maint-desc  { font-size:.9375rem; color:rgba(33,35,34,.55); line-height:1.65; margin-bottom:1.75rem; }
.maint-back  { font-size:.875rem; color:rgba(33,35,34,.4); margin-top:1.5rem; }
.maint-back a { color:#01c5ba; text-decoration:none; }

[data-theme="dark"] body.maintenance-body { background:#161818; }
[data-theme="dark"] .maint-card  { background:#2c2f2f; border-color:rgba(255,255,255,.13); box-shadow:0 4px 32px rgba(0,0,0,.45); }
[data-theme="dark"] .maint-title { color:#ffffff; }
[data-theme="dark"] .maint-desc  { color:rgba(255,255,255,.55); }
[data-theme="dark"] .maint-back  { color:rgba(255,255,255,.45); }

/* ================================================
   Páginas de log (user_log, admin_users_log,
   admin_lockers_log, user_locker_log) — compartido
   ================================================ */
.badge-success { background: rgba(1,197,186,0.12);   color: #007d76; }
.badge-info	{ background: rgba(39,122,255,0.12);  color: #1a5fd4; }
.badge-warning { background: rgba(250,176,5,0.12);   color: #8a6400; }
.badge-danger  { background: rgba(220,53,69,0.10);   color: #b92e3c; }
.badge		 { display:inline-flex; align-items:center; padding:.2rem .65rem;
				 border-radius:100px; font-size:.6875rem; font-weight:700;
				 letter-spacing:.02em; white-space:nowrap; }

.log-date-filter { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .75rem;
				   padding:.75rem 1rem; border-bottom:1px solid rgba(33,35,34,.07);
				   background:rgba(33,35,34,.02); font-size:.8125rem; }
.log-date-filter label { font-weight:600; color:rgba(33,35,34,.55); white-space:nowrap; }
.log-date-filter input[type=date] { border:1px solid rgba(33,35,34,.15); border-radius:6px;
									padding:.3rem .6rem; font-size:.8125rem; color:rgba(33,35,34,.8);
									background:#fff; outline:none; cursor:pointer; }
.log-date-filter input[type=date]:focus { border-color:#01c5ba; box-shadow:0 0 0 2px rgba(1,197,186,.15); }

/* user_log.php — tarjetas de estadísticas */
.stat-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1rem; margin-bottom:1.5rem; }
.stat-card { background:var(--bg-1,#fff); border:1px solid rgba(33,35,34,.08); border-radius:10px; padding:1.1rem 1.25rem; display:flex; flex-direction:column; gap:.25rem; }
.stat-card-label { font-size:.72rem; font-weight:600; color:rgba(33,35,34,.45); text-transform:uppercase; letter-spacing:.04em; }
.stat-card-value { font-size:1.55rem; font-weight:700; color:var(--text-1,#212322); line-height:1.2; }
.stat-card-sub   { font-size:.75rem; color:rgba(33,35,34,.45); }
[data-theme="dark"] .stat-card { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.08); }
[data-theme="dark"] .stat-card-label { color:rgba(255,255,255,.45); }
[data-theme="dark"] .stat-card-value { color:#fff; }
[data-theme="dark"] .stat-card-sub   { color:rgba(255,255,255,.4); }

/* admin_users_log.php — columnas cliente/fingerprint */
#usersLogTable td:nth-child(10) { font-size:.75rem; line-height:1.5; white-space:nowrap; }
#usersLogTable td:nth-child(11) { font-family:monospace; font-size:.7rem;
								  max-width:120px; overflow:hidden;
								  text-overflow:ellipsis; white-space:nowrap; }

/* admin_lockers_log.php — columnas cliente/fingerprint */
#logTable td:nth-child(13) { font-size: .75rem; line-height: 1.5; white-space: nowrap; }
#logTable td:nth-child(14) { font-family: monospace; font-size: .7rem; max-width: 120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ================================================
   reset_password.php
   ================================================ */
.reset-card { background: #fff; border: 1px solid rgba(33,35,34,.09); border-radius: 12px; padding: 2.5rem 2rem; box-shadow: 0 4px 32px rgba(33,35,34,.08); }
[data-theme="dark"] .reset-card { background: rgba(255,255,255,0.03); border-color: rgb(255,255,255); box-shadow: none; }
/* .pass-wrapper / .pass-toggle ya están definidos arriba (compartidos con login.php) */
.alert { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.75rem 1rem; border-radius: 8px; font-size: 0.875rem; line-height: 1.5; }
.alert-error   { background: rgba(239,70,111,0.08); border-left: 3px solid rgb(239,70,111); color: rgb(239,70,111); }
.alert-success { background: rgba(1,197,186,0.08);  border-left: 3px solid rgb(1,197,186);  color: rgb(0,185,175); }
.strength-bar { height: 4px; border-radius: 2px; margin-top: 6px; transition: all 0.25s; background: rgba(33,35,34,0.08); }
[data-theme="dark"] .strength-bar { background: rgba(255,255,255,0.1); }
.strength-bar.w-1 { width: 25%; background: rgb(239 70 111); }
.strength-bar.w-2 { width: 50%; background: rgb(250 176 5); }
.strength-bar.w-3 { width: 75%; background: rgb(0 185 175); }
.strength-bar.w-4 { width: 100%; background: rgb(1 197 186); }
.strength-hint { font-size: 0.75rem; color: rgba(33,35,34,0.45); margin-top: 4px; }
[data-theme="dark"] .strength-hint { color: rgba(255,255,255,0.4); }
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 0.7s linear infinite; }
.btn-spinner { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; }

/* ================================================
   Toggle switch (user_config.php, admin_settings.php)
   ================================================ */
.toggle-switch { position:relative; display:inline-block; width:44px; height:24px; flex-shrink:0; }
.toggle-switch input { opacity:0; width:0; height:0; }
.toggle-slider { position:absolute; cursor:pointer; inset:0; background:rgba(33,35,34,.2); border-radius:24px; transition:.2s; }
.toggle-slider:before { content:''; position:absolute; width:18px; height:18px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:.2s; }
.toggle-switch input:checked + .toggle-slider { background:#01c5ba; }
.toggle-switch input:checked + .toggle-slider:before { transform:translateX(20px); }
[data-theme="dark"] .toggle-slider { background:rgba(255,255,255,.2); }
[data-theme="dark"] .toggle-slider:before { background:#fff; }

/* ================================================
   admin_settings.php
   ================================================ */
.settings-section { background:#fff; border:1px solid rgba(33,35,34,.09); border-radius:12px; padding:1.5rem; margin-bottom:1.5rem; }
.settings-section h4 { margin:0 0 1.25rem; font-size:1rem; font-weight:700; }
.policy-hint { font-size:.8125rem; color:rgba(33,35,34,.5); margin-top:.3rem; }
.toggle-row { display:flex; align-items:center; justify-content:space-between; padding:.6rem 0;
              border-bottom:1px solid rgba(33,35,34,.06); }
.toggle-row:last-child { border-bottom:none; }
.toggle-row label { font-size:.9rem; font-weight:500; }
.toggle-row small { font-size:.8rem; color:rgba(33,35,34,.5); display:block; }
input[type=number].pw-number { width:80px; border:1px solid rgba(33,35,34,.15); border-radius:8px;
                               padding:.4rem .6rem; font-size:.9rem; text-align:center; background:#fff; color:rgba(33,35,34,.85); }
/* Dark mode */
[data-theme="dark"] .settings-section { background:#2c2f2f; border-color:rgba(255,255,255,.1); }
[data-theme="dark"] .settings-section h4 { color:#fff; }
[data-theme="dark"] .policy-hint { color:rgba(255,255,255,.4); }
[data-theme="dark"] .toggle-row { border-bottom-color:rgba(255,255,255,.07); }
[data-theme="dark"] .toggle-row label { color:rgba(255,255,255,.85); }
[data-theme="dark"] .toggle-row small { color:rgba(255,255,255,.4); }
[data-theme="dark"] input[type=number].pw-number { background:#383c3c; border-color:rgba(255,255,255,.18); color:#fff; }

/* ================================================
   Incidencias (user_incidents.php, admin_incidents.php) — compartido
   ================================================ */
#incidentsTable_wrapper .dt-layout-row:first-child { justify-content: flex-end; }
.inc-badge { display:inline-flex;align-items:center;padding:.2rem .65rem;border-radius:100px;font-size:.6875rem;font-weight:700;white-space:nowrap }
.inc-status-open        { background:rgba(220,53,69,.10);  color:#b92e3c }
.inc-status-in_progress { background:rgba(250,176,5,.12);  color:#8a6400 }
.inc-status-resolved    { background:rgba(1,197,186,.12);  color:#007d76 }
.inc-status-closed      { background:rgba(33,35,34,.08);   color:#555 }
[data-theme="dark"] .inc-status-open        { background:rgba(220,53,69,.18);  color:#f28f98 }
[data-theme="dark"] .inc-status-in_progress { background:rgba(250,176,5,.18);  color:#f2d07e }
[data-theme="dark"] .inc-status-resolved    { background:rgba(1,197,186,.18);  color:#4dcfc9 }
[data-theme="dark"] .inc-status-closed      { background:rgba(255,255,255,.08);color:rgba(255,255,255,.45) }
.inc-filter-bar { display:flex;flex-wrap:wrap;gap:.4rem;padding:.75rem 1.25rem;border-bottom:1px solid var(--border-color, rgba(33,35,34,.07));justify-content:flex-start }
.inc-filter-btn { padding:.3rem .9rem;border-radius:100px;border:1px solid rgba(33,35,34,.15);background:transparent;font-size:.8125rem;cursor:pointer;transition:background .15s,color .15s,border-color .15s;color:rgba(33,35,34,.7) }
.inc-filter-btn:hover  { background:rgba(1,197,186,.1);border-color:#01c5ba;color:#007d76 }
.inc-filter-btn.active { background:#01c5ba;color:#fff;border-color:#01c5ba }
[data-theme="dark"] .inc-filter-bar        { border-bottom-color:rgba(255,255,255,.07) }
[data-theme="dark"] .inc-filter-btn        { border-color:rgba(255,255,255,.15);color:rgba(255,255,255,.6) }
[data-theme="dark"] .inc-filter-btn:hover  { background:rgba(1,197,186,.15);border-color:#01c5ba;color:#4dcfc9 }
[data-theme="dark"] .inc-filter-btn.active { background:#01c5ba;color:#fff;border-color:#01c5ba }

/* admin_incidents.php — específico */
.inc-user-name  { font-weight:600 }
.inc-user-email { font-size:.75rem;color:rgba(33,35,34,.45);margin-top:.1rem }
[data-theme="dark"] .inc-user-email { color:rgba(255,255,255,.38) }
.inc-detail-label { font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:rgba(33,35,34,.42);margin-bottom:.3rem }
.inc-detail-val   { font-size:.875rem;color:#212322;margin-bottom:.9rem }
.inc-desc-box     { font-size:.875rem;white-space:pre-wrap;background:rgba(33,35,34,.03);border-radius:8px;padding:.7rem .9rem;color:#212322;margin-bottom:.9rem }
.inc-status-sel   { width:100%;border:1px solid rgba(33,35,34,.15);border-radius:8px;padding:.45rem .65rem;font-size:.875rem;background:#fff;color:#212322;cursor:pointer;appearance:none;
                    background-image:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23212322' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
                    background-repeat:no-repeat;background-position:right .6rem center;background-size:1rem;padding-right:2.2rem;margin-bottom:.9rem }
[data-theme="dark"] .inc-detail-label { color:rgba(255,255,255,.4) }
[data-theme="dark"] .inc-detail-val   { color:rgba(255,255,255,.85) }
[data-theme="dark"] .inc-desc-box     { background:rgba(255,255,255,.05);color:rgba(255,255,255,.85) }
[data-theme="dark"] .inc-status-sel   { background-color:#383c3c;border-color:rgba(255,255,255,.18);color:#fff;
                    background-image:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") }
.inc-user-banner { background:rgba(39,122,255,.08);border:1px solid rgba(39,122,255,.18);border-radius:8px;padding:.6rem 1rem;font-size:.8125rem;color:#277aff }
[data-theme="dark"] .inc-user-banner { background:rgba(39,122,255,.13);border-color:rgba(39,122,255,.3);color:#7eb3f2 }

/* ================================================
   admin_status.php
   (clases .stat-* renombradas para no colisionar con
   .s-open/.s-close/.s-loading/.s-error/.s-dot del estado de lockers)
   ================================================ */
.status-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1rem; }
.status-card { background:#fff; border:1px solid rgba(33,35,34,.09); border-radius:12px; padding:1.1rem 1.25rem; }
.status-card-title { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:rgba(33,35,34,.45); margin-bottom:.6rem; }
.status-row { display:flex; justify-content:space-between; align-items:center; padding:.3rem 0; border-bottom:1px solid rgba(33,35,34,.05); font-size:.825rem; }
.status-row:last-child { border-bottom:none; }
.status-row-label { color:rgba(33,35,34,.6); }
.status-row-val   { font-weight:600; color:#212322; }
.stat-ok    { color:#007d76 !important; }
.stat-error { color:#b92e3c !important; }
.stat-warn  { color:#8a6400 !important; }
.stat-dot   { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:.4rem; }
.stat-dot-ok    { background:#00c08b; }
.stat-dot-error { background:#e53935; }
.stat-dot-warn  { background:#f59e0b; }
.progress-bar-wrap { flex:1; background:rgba(33,35,34,.07); border-radius:100px; height:5px; overflow:hidden; margin-left:.75rem; max-width:80px; }
.progress-bar-fill { height:100%; border-radius:100px; }
/* Dark mode */
[data-theme="dark"] .status-card { background:#2c2f2f; border-color:rgba(255,255,255,.1); }
[data-theme="dark"] .status-card-title { color:rgba(255,255,255,.4); }
[data-theme="dark"] .status-row { border-bottom-color:rgba(255,255,255,.06); }
[data-theme="dark"] .status-row-label { color:rgba(255,255,255,.5); }
[data-theme="dark"] .status-row-val { color:rgba(255,255,255,.85); }
[data-theme="dark"] .stat-ok    { color:#4dcfc9 !important; }
[data-theme="dark"] .stat-error { color:#f28f98 !important; }
[data-theme="dark"] .stat-warn  { color:#f2d07e !important; }
[data-theme="dark"] .progress-bar-wrap { background:rgba(255,255,255,.1); }

/* ================================================
   admin_dashboard.php
   ================================================ */
.stats-row { display:flex; flex-wrap:wrap; gap:1rem; }
.stats-row .stat-card  { flex:1; min-width:200px; }
.dash-section-title { font-size:.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--text-1); opacity:.45; margin-bottom:.75rem; }
.dash-muted { color:var(--text-1); opacity:.4; }

/* ── Tablas reciente y locker-usage ── */
.recent-table, .locker-usage-table { width:100%; border-collapse:collapse; font-size:.8125rem; color:var(--text-1); }
.recent-table th, .locker-usage-table th { font-size:.625rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; opacity:.5; padding:.4rem .75rem; text-align:left; border-bottom:1px solid var(--border-1); }
.locker-usage-table th { padding:.4rem .9rem; }
.recent-table td  { padding:.55rem .75rem; border-bottom:1px solid var(--border-1); opacity:.85; vertical-align:middle; }
.locker-usage-table td { padding:.5rem .9rem; border-bottom:1px solid var(--border-1); opacity:.85; vertical-align:middle; }
.recent-table tr:last-child td, .locker-usage-table tr:last-child td { border-bottom:none; }
.recent-table tbody tr:nth-child(even), .locker-usage-table tbody tr:nth-child(even) { background:var(--row-stripe); }
.recent-table tbody tr:hover, .locker-usage-table tbody tr:hover { background:rgba(1,197,186,.06); }
.recent-table .ev-badge { display:inline-block; padding:.15rem .5rem; border-radius:100px; font-size:.625rem; font-weight:700; white-space:nowrap; opacity:1 !important; }
.recent-loading { opacity:.4; }

/* ── Event badges ── */
.ev-login          { background:rgba(1,197,186,.12);  color:#009e8c; }
.ev-login_failed   { background:rgba(220,53,69,.12);  color:rgb(185,46,60); }
.ev-logout         { background:var(--border-1);       color:var(--text-1); opacity:.6; }
.ev-create         { background:rgba(39,122,255,.12);  color:#277aff; }
.ev-update         { background:rgba(250,176,5,.14);   color:#8a6400; }
.ev-delete         { background:rgba(220,53,69,.12);   color:rgb(185,46,60); }
.ev-password_change{ background:rgba(250,176,5,.14);   color:#8a6400; }
.ev-dept_create, .ev-dept_update, .ev-dept_delete { background:rgba(39,122,255,.1); color:#277aff; }
[data-theme="dark"] .ev-logout         { color:rgba(255,255,255,.55); }
[data-theme="dark"] .ev-update         { background:rgba(250,176,5,.18); color:#f2d07e; }
[data-theme="dark"] .ev-password_change{ background:rgba(250,176,5,.18); color:#f2d07e; }
[data-theme="dark"] .ev-dept_create, [data-theme="dark"] .ev-dept_update, [data-theme="dark"] .ev-dept_delete { background:rgba(39,122,255,.18); color:#7eb3f2; }

/* ── Stats ── */
.stat-inuse  { color:#277aff; font-weight:700; }
.stat-free   { color:#009e8c; font-weight:700; }
.dash-stat-warn { color:rgb(185,46,60); font-weight:700; }

/* ── Quick search ── */
.qs-result-item { display:flex; align-items:center; gap:.75rem; padding:.55rem .75rem; border-bottom:1px solid var(--border-1); color:var(--text-1); text-decoration:none; }
.qs-result-item:hover { background:rgba(1,197,186,.07); }
.qs-result-type { font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:1px 6px; border-radius:4px; white-space:nowrap; flex-shrink:0; }
.qs-result-type-user   { background:rgba(39,122,255,.12); color:#277aff; }
.qs-result-type-locker { background:rgba(1,197,186,.12);  color:#009e8c; }
.qs-result-type-other  { background:var(--border-1); color:var(--text-1); opacity:.7; }
.qs-result-sub { font-size:.75rem; opacity:.5; }

/* ── Incidencias mini stats ── */
.inc-mini-stat { text-align:center; padding:.6rem .5rem; border-radius:8px; }
.inc-mini-val  { font-size:1.625rem; font-weight:800; line-height:1.1; margin-bottom:.2rem; }
.inc-mini-lbl  { font-size:.6875rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; opacity:.7; }
.inc-open-bg   { background:rgba(220,53,69,.08); }
.inc-prog-bg   { background:rgba(250,176,5,.09); }
.inc-res-bg    { background:rgba(1,197,186,.09); }
.inc-clo-bg    { background:var(--row-stripe); }
.inc-clo-val   { color:var(--text-1); opacity:.45; }
[data-theme="dark"] .inc-open-bg { background:rgba(220,53,69,.18); }
[data-theme="dark"] .inc-prog-bg { background:rgba(250,176,5,.15); }
[data-theme="dark"] .inc-res-bg  { background:rgba(1,197,186,.15); }

/* ── Responsive ── */
@media (max-width:680px) { #chartsRow, #chartsRow2, #incLockerRow { grid-template-columns:1fr !important; } }

/* ================================================
   admin_lockers.php
   ================================================ */
.lk-modal-overlay { display:none;position:fixed;inset:0;z-index:1001;background:rgba(0,0,0,.45);align-items:center;justify-content:center;backdrop-filter:blur(2px) }
.lk-modal-box { background:var(--bg-1,#fff);border:1px solid rgba(33,35,34,.09);border-radius:14px;padding:0;box-shadow:0 20px 60px rgba(0,0,0,.22);overflow:hidden }
[data-theme="dark"] .lk-modal-box { background:#2c2f2f;border-color:rgba(255,255,255,.12) }
.lk-modal-header { display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem .75rem;border-bottom:1px solid rgba(33,35,34,.07) }
[data-theme="dark"] .lk-modal-header { border-bottom-color:rgba(255,255,255,.1) }
.lk-modal-title { font-weight:700;font-size:.9375rem;color:var(--text-1,#212322) }
[data-theme="dark"] .lk-modal-title { color:#fff }
.lk-modal-close { background:none;border:none;cursor:pointer;padding:.25rem;color:rgba(33,35,34,.45);line-height:0;border-radius:6px;transition:background .12s,color .12s }
.lk-modal-close:hover { background:rgba(33,35,34,.07);color:#212322 }
[data-theme="dark"] .lk-modal-close { color:rgba(255,255,255,.5) }
[data-theme="dark"] .lk-modal-close:hover { background:rgba(255,255,255,.08);color:#fff }
.lk-modal-body { padding:1.1rem 1.25rem }
.lk-modal-footer { display:flex;gap:.5rem;padding:.75rem 1.25rem 1.1rem;justify-content:space-between;border-top:1px solid rgba(33,35,34,.07) }
[data-theme="dark"] .lk-modal-footer { border-top-color:rgba(255,255,255,.1) }
.lk-current-user { font-size:.8125rem;color:rgba(33,35,34,.55);margin-bottom:.85rem }
[data-theme="dark"] .lk-current-user { color:rgba(255,255,255,.5) }
/* History table */
.history-table { width:100%;border-collapse:collapse;font-size:.8rem }
.history-table thead tr { border-bottom:1px solid rgba(33,35,34,.08) }
[data-theme="dark"] .history-table thead tr { border-bottom-color:rgba(255,255,255,.1) }
.history-table th { text-align:left;padding:.3rem .5rem;font-size:.625rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:rgba(33,35,34,.4) }
[data-theme="dark"] .history-table th { color:rgba(255,255,255,.4) }
.history-table tr { border-bottom:1px solid rgba(33,35,34,.04) }
[data-theme="dark"] .history-table tr { border-bottom-color:rgba(255,255,255,.06) }
.history-table td { padding:.35rem .5rem;color:rgba(33,35,34,.85) }
[data-theme="dark"] .history-table td { color:rgba(255,255,255,.8) }
.history-date,.history-muted { font-size:.75rem;white-space:nowrap }
.history-date { color:rgba(33,35,34,.6) }
.history-muted { color:rgba(33,35,34,.5) }
[data-theme="dark"] .history-date { color:rgba(255,255,255,.5) }
[data-theme="dark"] .history-muted { color:rgba(255,255,255,.4) }
.history-empty { color:rgba(33,35,34,.35);font-size:.8125rem;text-align:center;padding:.75rem 0 }
[data-theme="dark"] .history-empty { color:rgba(255,255,255,.3) }

/* admin_lockers.php — vista mosaico (kanban) */
.lk-kanban-card { border-radius:10px; padding:.75rem .875rem; min-width:110px; max-width:150px; flex:1; cursor:default; }
.lk-kanban-card.is-inactive { background:rgba(156,163,175,.08); border:1.5px solid rgba(156,163,175,.25); }
.lk-kanban-card.is-inuse    { background:rgba(39,122,255,.07);  border:1.5px solid rgba(39,122,255,.3); }
.lk-kanban-card.is-free     { background:rgba(1,197,186,.07);   border:1.5px solid rgba(1,197,186,.3); }
[data-theme="dark"] .lk-kanban-card.is-inactive { background:rgba(156,163,175,.12); border-color:rgba(156,163,175,.32); }
[data-theme="dark"] .lk-kanban-card.is-inuse    { background:rgba(39,122,255,.15);  border-color:rgba(39,122,255,.4); }
[data-theme="dark"] .lk-kanban-card.is-free     { background:rgba(1,197,186,.15);   border-color:rgba(1,197,186,.4); }
.lk-kanban-name     { font-weight:800; font-size:.8125rem; color:var(--text-1); letter-spacing:.02em; }
.lk-kanban-assignee { font-size:.6875rem; color:var(--text-1); opacity:.55; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:120px; }
.lk-kanban-empty    { font-size:.6875rem; color:var(--text-1); opacity:.35; }

/* ================================================
   admin_lockers_test.php
   ================================================ */
.locker-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}
@media (max-width: 640px) { .locker-grid { grid-template-columns: 1fr; } }

.locker-column-header {
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: rgba(33, 35, 34, 0.4);
	padding: 0.5rem 0 0.5rem;
	border-bottom: 1px solid rgba(33, 35, 34, 0.08);
	margin-bottom: 0.25rem;
}

.locker-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.35rem 0;
	border-bottom: 1px solid rgba(33, 35, 34, 0.05);
}
.locker-row:last-child { border-bottom: none; }

.locker-id {
	font-size: 0.75rem;
	font-weight: 700;
	font-family: monospace;
	color: rgba(33, 35, 34, 0.65);
	min-width: 4.5rem;
}

.locker-status-display {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 1.5rem;
	padding: 0.15rem 0.6rem;
	border-radius: 100px;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	white-space: nowrap;
	background: rgba(33, 35, 34, 0.07);
	color: rgba(33, 35, 34, 0.4);
	transition: background 0.2s, color 0.2s;
}
.locker-status-display.s-close   { background: rgba(39,122,255,0.12); color: #277aff; }
.locker-status-display.s-open    { background: rgba(250,176,5,0.15); color: #8a6400; }
.locker-status-display.s-error   { background: rgba(220,53,69,0.1);   color: rgb(185,46,60); }
.locker-status-display.s-loading { background: rgba(16,185,129,0.12);  color: #047857; }

/* Auto-refresh toggle button */
#btnAutoRefresh.active {
	background: rgba(1, 197, 186, 0.12);
	color: rgb(0, 125, 118);
	border-color: rgba(1, 197, 186, 0.35);
}

/* Dark mode */
[data-theme="dark"] .locker-column-header {
	color: #ffffff;
	border-bottom-color: rgba(255,255,255,.1);
}
[data-theme="dark"] .locker-id {
	color: rgba(255,255,255,.75);
}
[data-theme="dark"] .locker-status-display {
	background: rgba(255,255,255,.1);
	color: rgba(255,255,255,.6);
}
[data-theme="dark"] .locker-status-display.s-close { background: rgba(39,122,255,.2); color: #7eb3f2; }
[data-theme="dark"] .locker-status-display.s-open  { background: rgba(250,176,5,.22); color: #f2d07e; }
[data-theme="dark"] .locker-status-display.s-error   { background: rgba(220,53,69,.2);   color: #f28f98; }
[data-theme="dark"] .locker-status-display.s-loading { background: rgba(16,185,129,.2);   color: #4ade80; }

/* ================================================
   Punto del icono de notificaciones (nav.inc.php)
   Oculto por defecto: solo se muestra si hay notificaciones (notifications_poll.js)
   ================================================ */
.notif-dot { background-color: rgb(1 197 186); display: none; }