/* =============================================================================
   ESD LAB - página audit (templates/audit.html): tabs, filtros, tabla
   de auditoría, visor de logs. Movido tal cual desde static/styles.css
   (A7.12), sin cambiar ningún valor ni selector (salvo la eliminación
   de una regla muerta, ver más abajo). Confirmado con grep contra los
   13 templates restantes que ninguna otra página usa su vocabulario
   (las coincidencias de \baudit-btn\b en calendar.html/records.html
   son falsos positivos: en realidad son .records-audit-btn, ya
   migrada en A7.6), y que la sección no tenía ningún @keyframes
   propio embebido.
   ============================================================================= */

/* =============================================================================
   AUDIT & LOGS - Diseño moderno y mejorado
   ============================================================================= */
.audit-container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 2rem 1rem;
  animation: fadeIn 0.4s ease;
}

/* Header de Audit */
.audit-header {
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(241, 244, 248, 0.95) 100%);
  border: 1px solid var(--esd-border-dark);
  border-radius: 20px;
  padding: 2rem 2.5rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}

.audit-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--esd-orange) 0%, var(--esd-orange-light) 100%);
}

.audit-header-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.audit-header-text {
  flex: 1;
  min-width: 0;
}

.audit-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--fs-h1);
  font-weight: 800;
  color: var(--esd-text-dark);
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}

.audit-title-icon {
  font-size: 2.5rem;
  color: var(--esd-orange);
}

.audit-subtitle {
  font-size: 1.1rem;
  color: var(--esd-text-medium);
  margin: 0;
  line-height: 1.6;
}

.audit-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  border-radius: 12px;
  flex-shrink: 0;
}

.audit-back-btn .material-symbols-rounded {
  font-size: 20px;
}

/* Tabs */
.audit-tabs-wrapper {
  margin-bottom: 2rem;
  animation: slideUp 0.5s ease 0.1s both;
}

.audit-tabs {
  border-bottom: 2px solid var(--esd-border-dark) !important;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* .audit-tabs.nav-tabs (sin !important) se eliminó en A7.12: nunca
   podía ganarle al !important de .audit-tabs de arriba, sobre la
   misma propiedad y el mismo elemento (ambas clases están presentes
   a la vez, classList="nav nav-tabs audit-tabs") — código muerto
   confirmado empíricamente con getComputedStyle antes y después del
   cambio, no solo por razonamiento de especificidad. Ya identificado
   como pendiente en el checklist de A7 desde antes de A7.1. */

.audit-tab-item {
  margin: 0;
}

.audit-tab-btn {
  display: flex !important;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 3px solid transparent !important;
  color: var(--esd-text-medium) !important;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all var(--transition-normal);
  position: relative;
  margin-bottom: -2px;
}

.audit-tab-btn .material-symbols-rounded {
  font-size: 20px;
}

.audit-tab-btn:hover {
  color: var(--esd-orange) !important;
  background: rgba(61, 107, 150, 0.05) !important;
  border-color: transparent !important;
}

.audit-tab-btn.active {
  color: var(--esd-orange-dark) !important;
  border-bottom-color: var(--esd-orange) !important;
  background: transparent !important;
}

.audit-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 0.5rem;
  background: var(--esd-orange);
  color: white;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 700;
}

/* Info Cards */
.audit-info-card {
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.audit-info-card-warning {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.2);
}

.audit-info-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.audit-info-header .material-symbols-rounded {
  font-size: 28px;
  color: #2563eb;
  flex-shrink: 0;
}

.audit-info-card-warning .audit-info-header .material-symbols-rounded {
  color: #f59e0b;
}

.audit-info-header strong {
  display: block;
  color: var(--esd-text-dark);
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.audit-info-text {
  color: var(--esd-text-medium);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

/* Filtros */
.audit-filters-section {
  background: var(--esd-surface-dark-2);
  border: 1px solid var(--esd-border-dark);
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-sm);
}

.audit-filters-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.audit-filters-header .material-symbols-rounded {
  font-size: 24px;
  color: var(--esd-orange);
}

.audit-filters-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--esd-text-dark);
  margin: 0;
}

.audit-filters-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.audit-filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
}

.audit-filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.audit-filter-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--esd-text-dark);
  font-size: 0.9rem;
}

.audit-filter-label .material-symbols-rounded {
  font-size: 18px;
  color: var(--esd-orange);
}

.audit-filter-select,
.audit-filter-input {
  padding: 0.75rem 1rem;
  border: 2px solid var(--esd-border-dark);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--esd-text-dark);
  font-size: 0.95rem;
  transition: all var(--transition-normal);
}

.audit-filter-select:focus,
.audit-filter-input:focus {
  outline: none;
  border-color: var(--esd-orange);
  box-shadow: 0 0 0 4px rgba(61, 107, 150, 0.12);
}

.audit-filters-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.audit-filter-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  border-radius: 12px;
}

.audit-filter-submit-btn .material-symbols-rounded {
  font-size: 20px;
}

/* Tabla de Auditoría */
.audit-table-section {
  background: var(--esd-surface-dark-2);
  border: 1px solid var(--esd-border-dark);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.audit-table-wrapper {
  overflow-x: auto;
}

.audit-table {
  width: 100%;
  border-collapse: collapse;
}

.audit-table thead {
  background: rgba(255, 255, 255, 0.5);
  border-bottom: 2px solid var(--esd-border-dark);
}

.audit-table th {
  padding: 1rem 1.25rem;
  text-align: left;
  font-weight: 700;
  color: var(--esd-text-dark);
  font-size: 0.9rem;
  white-space: nowrap;
  vertical-align: middle;
}

.audit-table th .material-symbols-rounded {
  font-size: 18px;
  color: var(--esd-orange);
  margin-right: 0.5rem;
  vertical-align: middle;
}

.audit-table tbody tr {
  border-bottom: 1px solid var(--esd-border-dark);
  transition: background-color var(--transition-fast);
}

.audit-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.3);
}

.audit-table td {
  padding: 1rem 1.25rem;
  font-size: 0.9rem;
  color: var(--esd-text-dark);
  vertical-align: top;
}

.audit-table-date {
  white-space: nowrap;
  color: var(--esd-text-medium);
}

.audit-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}

.audit-badge .material-symbols-rounded {
  font-size: 16px;
}

.audit-badge-success {
  background: rgba(22, 163, 74, 0.15);
  color: #16a34a;
}

.audit-badge-info {
  background: rgba(37, 99, 235, 0.15);
  color: #2563eb;
}

.audit-badge-warning {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.audit-badge-danger {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.audit-badge-secondary {
  background: rgba(30, 42, 56, 0.15);
  color: var(--esd-text-dark);
}

.audit-table-entity {
  font-weight: 600;
  color: var(--esd-text-dark);
}

.audit-table-actor {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.audit-table-actor .material-symbols-rounded {
  font-size: 18px;
  color: var(--esd-orange);
}

.audit-table-ip {
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
  color: var(--esd-text-medium);
  white-space: nowrap;
}

.audit-table-details {
  min-width: 360px;
  max-width: 500px;
}

.audit-table-details-text {
  white-space: normal;
  word-break: break-word;
  color: var(--esd-text-dark);
  margin-bottom: 0.5rem;
}

.audit-table-details-expand {
  margin-top: 0.5rem;
}

.audit-table-details-summary {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--esd-text-medium);
  font-size: 0.85rem;
  cursor: pointer;
  user-select: none;
  transition: color var(--transition-fast);
}

.audit-table-details-summary:hover {
  color: var(--esd-orange);
}

.audit-table-details-summary .material-symbols-rounded {
  font-size: 16px;
  transition: transform var(--transition-fast);
}

.audit-table-details-expand[open] .audit-table-details-summary .material-symbols-rounded {
  transform: rotate(180deg);
}

.audit-table-details-content {
  margin-top: 0.5rem;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--esd-text-medium);
  word-break: break-word;
  font-family: 'Courier New', monospace;
}

.audit-table-empty {
  padding: 3rem 2rem;
  text-align: center;
}

.audit-empty-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.audit-empty-content .material-symbols-rounded {
  font-size: 4rem;
  color: var(--esd-text-light);
  opacity: 0.5;
}

.audit-empty-content p {
  color: var(--esd-text-medium);
  font-size: 1rem;
  margin: 0;
}

/* Logs Stats Section */
.audit-logs-stats-section {
  margin-bottom: 2rem;
  animation: slideUp 0.5s ease 0.2s both;
}

.audit-logs-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.audit-logs-stat-card {
  background: var(--esd-surface-dark-2);
  border: 1px solid var(--esd-border-dark);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
}

.audit-logs-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--esd-orange);
}

.audit-logs-stat-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.audit-logs-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--esd-orange) 0%, var(--esd-orange-light) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.audit-logs-stat-icon .material-symbols-rounded {
  font-size: 24px;
  color: white;
}

.audit-logs-stat-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--esd-text-dark);
  margin: 0;
}

.audit-logs-stat-content {
  margin-bottom: 1.25rem;
}

.audit-logs-stat-loading {
  color: var(--esd-text-medium);
  font-size: 0.9rem;
  margin: 0;
}

.audit-logs-stat-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.audit-logs-stat-item:last-child {
  margin-bottom: 0;
}

.audit-logs-stat-item .material-symbols-rounded {
  font-size: 20px;
  color: var(--esd-orange);
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.audit-logs-stat-item-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--esd-text-medium);
  margin-bottom: 0.25rem;
}

.audit-logs-stat-item-value {
  font-size: 0.95rem;
  color: var(--esd-text-dark);
  font-weight: 600;
}

.audit-logs-stat-item-value-small {
  font-size: 0.85rem;
  font-weight: 500;
}

.audit-logs-stat-levels {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

.audit-logs-stat-level {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  width: fit-content;
}

.audit-logs-stat-level .material-symbols-rounded {
  font-size: 16px;
}

.audit-logs-stat-level-info {
  background: rgba(37, 99, 235, 0.15);
  color: #2563eb;
}

.audit-logs-stat-level-warning {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.audit-logs-stat-level-error {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.audit-logs-stat-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.audit-logs-stat-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  font-weight: 600;
  border-radius: 12px;
  width: 100%;
}

.audit-logs-stat-btn .material-symbols-rounded {
  font-size: 18px;
}

/* Logs Viewer */
.audit-logs-viewer-section {
  background: var(--esd-surface-dark-2);
  border: 1px solid var(--esd-border-dark);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  animation: slideUp 0.5s ease 0.3s both;
}

.audit-logs-viewer-header {
  background: rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid var(--esd-border-dark);
  padding: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.audit-logs-viewer-title-wrapper {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.audit-logs-viewer-title-wrapper .material-symbols-rounded {
  font-size: 28px;
  color: var(--esd-orange);
}

.audit-logs-viewer-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--esd-text-dark);
  margin: 0;
}

.audit-logs-viewer-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.audit-logs-viewer-control-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.audit-logs-viewer-control-group .material-symbols-rounded {
  font-size: 20px;
  color: var(--esd-orange);
}

.audit-logs-viewer-control-label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--esd-text-dark);
  white-space: nowrap;
}

.audit-logs-viewer-control-label .material-symbols-rounded {
  font-size: 18px;
}

.audit-logs-viewer-control-select,
.audit-logs-viewer-control-input {
  padding: 0.5rem 0.75rem;
  border: 2px solid var(--esd-border-dark);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--esd-text-dark);
  font-size: 0.9rem;
  transition: all var(--transition-normal);
}

.audit-logs-viewer-control-input {
  width: 200px;
}

.audit-logs-viewer-control-select:focus,
.audit-logs-viewer-control-input:focus {
  outline: none;
  border-color: var(--esd-orange);
  box-shadow: 0 0 0 3px rgba(61, 107, 150, 0.12);
}

.audit-logs-viewer-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-weight: 600;
  border-radius: 8px;
}

.audit-logs-viewer-refresh-btn .material-symbols-rounded {
  font-size: 18px;
}

.audit-logs-viewer-auto-refresh {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.audit-logs-viewer-checkbox {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: var(--esd-orange);
}

.audit-logs-viewer-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--esd-text-dark);
  cursor: pointer;
  user-select: none;
}

.audit-logs-viewer-checkbox-label .material-symbols-rounded {
  font-size: 18px;
  color: var(--esd-orange);
}

.audit-logs-viewer-body {
  position: relative;
  min-height: 400px;
}

.audit-logs-viewer-content {
  padding: 1.5rem;
  max-height: 600px;
  overflow-y: auto;
  font-family: 'Courier New', monospace;
}

.audit-logs-viewer-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 3rem 2rem;
  text-align: center;
  min-height: 400px;
}

.audit-logs-viewer-empty .material-symbols-rounded {
  font-size: 4rem;
  color: var(--esd-text-light);
  opacity: 0.5;
}

.audit-logs-viewer-empty p {
  color: var(--esd-text-medium);
  font-size: 1rem;
  margin: 0;
}

.audit-logs-viewer-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 3rem 2rem;
  min-height: 400px;
}

.audit-logs-viewer-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--esd-border-dark);
  border-top-color: var(--esd-orange);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.audit-logs-viewer-loading p {
  color: var(--esd-text-medium);
  font-size: 0.95rem;
  margin: 0;
}

.audit-logs-viewer-lines {
  display: flex;
  flex-direction: column;
}

.audit-logs-viewer-line {
  padding: 1rem;
  border-bottom: 1px solid var(--esd-border-dark);
  transition: background-color var(--transition-fast);
}

.audit-logs-viewer-line:hover {
  background: rgba(255, 255, 255, 0.3);
}

.audit-logs-viewer-line-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.audit-logs-viewer-level-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}

.audit-logs-viewer-level-badge .material-symbols-rounded {
  font-size: 16px;
}

.audit-logs-level-info {
  background: rgba(37, 99, 235, 0.15);
  color: #2563eb;
}

.audit-logs-level-warning {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.audit-logs-level-error {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.audit-logs-level-critical {
  background: rgba(220, 38, 38, 0.2);
  color: #dc2626;
  font-weight: 800;
}

.audit-logs-level-unknown {
  background: rgba(30, 42, 56, 0.15);
  color: var(--esd-text-dark);
}

.audit-logs-viewer-line-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.85rem;
  color: var(--esd-text-medium);
  flex-wrap: wrap;
}

.audit-logs-viewer-line-meta span {
  white-space: nowrap;
}

.audit-logs-viewer-line-message {
  font-size: 0.9rem;
  color: var(--esd-text-dark);
  line-height: 1.6;
  word-break: break-word;
}

/* Responsive */
@media (max-width: 1024px) {
  .audit-filters-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}

@media (max-width: 767.98px) {
  .audit-container {
    padding: 1rem 0.75rem;
  }

  .audit-header {
    padding: 1.5rem;
  }

  .audit-title-icon {
    font-size: 2rem;
  }

  .audit-header-content {
    flex-direction: column;
  }

  .audit-back-btn {
    width: 100%;
    justify-content: center;
  }

  /* Tabs como control segmentado 2-up */
  .audit-tabs {
    gap: 0.5rem;
  }

  .audit-tab-item {
    flex: 1 1 0;
    min-width: 0;
  }

  .audit-tab-btn {
    width: 100%;
    justify-content: center;
    min-height: 44px;
    padding: 0.5rem 0.5rem;
    font-size: 0.85rem;
  }

  .audit-filters-section {
    padding: 1.5rem;
  }

  .audit-filters-grid {
    grid-template-columns: 1fr;
  }

  .audit-filters-actions {
    flex-direction: column;
  }

  .audit-filter-submit-btn,
  .audit-filters-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .audit-table-wrapper {
    overflow-x: auto;
  }

  .audit-table th,
  .audit-table td {
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
  }

  .audit-logs-stats-grid {
    grid-template-columns: 1fr;
  }

  .audit-logs-viewer-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .audit-logs-viewer-controls {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .audit-logs-viewer-control-group {
    width: 100%;
  }

  .audit-logs-viewer-control-input {
    width: 100%;
  }
}

@media (max-width: 575.98px) {
  .audit-table {
    font-size: 0.8rem;
  }

  .audit-table th,
  .audit-table td {
    padding: 0.5rem 0.75rem;
  }

  .audit-table-details {
    min-width: auto;
    max-width: none;
  }
}

/* audit.html: spinner oculto hasta que audit.js lo muestre
   (style.display) — vivía suelta en FASE 0 del styles.css viejo. */
.audit-logs-viewer-loading.audit-hidden-on-load {
  display: none;
}

/* Guard de hover (dispositivos táctiles): dividido del selector
   compuesto de FASE 1 en styles.css, que mezclaba .card/.esd-nav
   junto con este selector — misma declaración, separado en dos
   reglas (mismo patrón que dashboard en A7.5 y projects en A7.10).
   Con este split, el guard de hover de FASE 1 en styles.css queda sin
   ninguna página específica — ya solo mezcla selectores genéricos
   (.card/.esd-nav), pendiente de una fusión futura con layout.css
   fuera del alcance de esta sub-iteración. */
@media (hover: none) {
  .audit-logs-stat-card:hover {
    transform: none;
  }
}

/* .audit-filter-select/.audit-filter-input (>=16px, evita zoom iOS):
   dividida del selector compuesto de FASE 2 en styles.css, que sigue
   sirviendo a .form-control genérico. */
@media (max-width: 767.98px) {
  .audit-filter-select,
  .audit-filter-input {
    font-size: 1rem;
    min-height: 48px;
  }
}

/* .audit-table/.audit-table th/.audit-table td (tipografía en móvil):
   vivía en FASE 2 del styles.css viejo, ya standalone (sin combinar
   con otra página). */
@media (max-width: 767.98px) {
  .audit-table,
  .audit-table th,
  .audit-table td {
    font-size: 0.85rem;
  }
}

/* =============================================================================
   FASE 7 (vieja) - Audit: tablas -> tarjetas en móvil
   (la parte de "Users" de la FASE 7 vieja ya se había movido a
   static/css/pages/users.css en A7.7)
   ============================================================================= */
@media (max-width: 767.98px) {
  .audit-table-wrapper {
    overflow-x: visible;
  }

  .audit-table thead {
    display: none;
  }

  .audit-table,
  .audit-table tbody {
    display: block;
    width: 100%;
  }

  .audit-table tr.audit-table-row {
    display: block;
    background: var(--esd-surface-dark-2);
    border: 1px solid var(--esd-border-dark);
    border-radius: 14px;
    padding: 0.25rem 1rem 0.75rem;
    margin-bottom: 0.75rem;
    box-shadow: var(--shadow-sm);
  }

  .audit-table td {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.4rem 0;
    border: none;
    text-align: right;
    font-size: 0.85rem;
  }

  .audit-table td[data-label]::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--esd-text-medium);
    font-size: 0.8rem;
    text-align: left;
    flex-shrink: 0;
  }

  .audit-table td:first-child {
    border-bottom: 1px solid var(--esd-border-dark);
    padding-bottom: 0.6rem;
  }

  /* Detalles: ocupa todo el ancho y envuelve */
  .audit-table td.audit-table-details {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }

  .audit-table-details-text {
    word-break: break-word;
  }

  /* Log viewer: líneas envuelven, scroll solo vertical */
  .audit-logs-viewer-line-message {
    white-space: pre-wrap;
    word-break: break-word;
  }
}