/* =============================================================================
   ESD LAB - base: reset, tipografía, links, primitivas de Bootstrap
   (cards, buttons, badges, list-group, forms, tables, alerts), utilidades,
   animaciones y scrollbar. Movido tal cual desde static/styles.css (A7.1),
   sin cambiar ningún valor ni selector.
   ============================================================================= */

/* =============================================================================
   RESET Y BASE
   ============================================================================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

img,
svg {
  max-width: 100%;
  height: auto;
}

canvas,
video {
  max-width: 100%;
}

body {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Fondo claro cálido con halo naranja */
  background:
    radial-gradient(1200px 600px at 20% -10%,
      rgba(205, 104, 57, 0.12) 0%,
      rgba(205, 104, 57, 0.00) 55%),
    radial-gradient(900px 500px at 90% 0%,
      rgba(205, 104, 57, 0.06) 0%,
      rgba(205, 104, 57, 0.00) 60%),
    linear-gradient(135deg, var(--esd-bg-dark) 0%, var(--esd-bg-dark-2) 100%);
  background-attachment: fixed;

  color: var(--esd-text-dark);
  line-height: 1.6;
  letter-spacing: 0.01em;
  min-height: 100vh;
}

/* =============================================================================
   TIPOGRAFÍA
   ============================================================================= */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  color: var(--esd-text-dark);
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.1rem; }

p {
  color: var(--esd-text-medium);
  margin-bottom: 1rem;
}

.lead {
  font-size: 1.125rem;
  color: var(--esd-text-medium);
  font-weight: 400;
}

/* =============================================================================
   LINKS
   ============================================================================= */
a {
  color: var(--esd-orange-dark);
  text-decoration: none;
  transition: var(--transition-fast);
}

a:hover {
  color: var(--esd-orange-dark);
  text-decoration: none;
}


/* =============================================================================
   CARDS
   ============================================================================= */
.card {
  background-color: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(205, 104, 57, 0.16);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-normal);
  overflow: hidden;
  color: var(--esd-text-dark);
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card-header {
  background: linear-gradient(135deg,
    rgba(245, 230, 211, 0.65) 0%,
    rgba(205, 104, 57, 0.10) 100%);
  border-bottom: 1px solid rgba(205, 104, 57, 0.14);
  font-weight: 700;
  color: var(--esd-text-dark);
}

.card-body {
  padding: 1.5rem;
}

.card-title {
  color: var(--esd-text-dark);
  font-weight: 700;
  margin-bottom: 0.75rem;
}

/* Cards stats (borde naranjo) */
.card.shadow-sm {
  border-left: 4px solid rgba(205, 104, 57, 0.75);
}

/* =============================================================================
   BUTTONS
   ============================================================================= */
.btn {
  border-radius: 10px;
  font-weight: 600;
  padding: 0.5rem 1.25rem;
  transition: var(--transition-fast);
  border: none;
  letter-spacing: 0.02em;
}

.btn-primary {
  background: linear-gradient(135deg, var(--esd-orange) 0%, var(--esd-orange-light) 100%);
  color: #231B16;
  box-shadow: 0 8px 18px rgba(205, 104, 57, 0.18);
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--esd-orange-light) 0%, var(--esd-orange) 100%);
  box-shadow: 0 12px 26px rgba(205, 104, 57, 0.22);
  transform: translateY(-1px);
  color: #231B16;
}

.btn-primary:active {
  background: var(--esd-orange-dark);
  transform: translateY(0);
}

.btn-outline-secondary {
  border: 2px solid rgba(35, 27, 22, 0.20);
  color: var(--esd-text-dark);
  background-color: transparent;
}

.btn-outline-secondary:hover {
  background-color: rgba(205, 104, 57, 0.08);
  border-color: rgba(35, 27, 22, 0.24);
  color: var(--esd-text-dark);
}

.btn-outline-primary {
  border: 2px solid rgba(205, 104, 57, 0.75);
  color: var(--esd-orange-dark);
  background-color: transparent;
}

.btn-outline-primary:hover {
  background-color: rgba(205, 104, 57, 0.12);
  color: var(--esd-orange-dark);
  border-color: rgba(205, 104, 57, 0.90);
}

.btn-outline-danger {
  border: 2px solid rgba(220, 38, 38, 0.75);
  color: rgba(220, 38, 38, 0.95);
  background-color: transparent;
}

.btn-outline-danger:hover {
  background-color: rgba(220, 38, 38, 0.10);
  color: rgba(220, 38, 38, 0.95);
  border-color: rgba(220, 38, 38, 0.90);
}

.btn-light {
  background-color: rgba(255, 255, 255, 0.75);
  color: var(--esd-text-dark);
  border: 1px solid rgba(205, 104, 57, 0.14);
}

.btn-light:hover {
  background-color: rgba(255, 255, 255, 0.92);
  color: var(--esd-text-dark);
}

.btn-sm {
  padding: 0.375rem 1rem;
  font-size: 0.875rem;
}

/* =============================================================================
   BADGES
   ============================================================================= */
.badge {
  font-weight: 700;
  padding: 0.375rem 0.75rem;
  border-radius: 999px;
  letter-spacing: 0.03em;
  font-size: 0.75rem;
}

.badge.bg-primary { background-color: rgba(205, 104, 57, 0.90) !important; }
.badge.bg-secondary { background-color: rgba(35, 27, 22, 0.10) !important; color: var(--esd-text-dark) !important; }
.badge.bg-success { background-color: rgba(22, 163, 74, 0.85) !important; }
.badge.bg-warning { background-color: rgba(217, 119, 6, 0.85) !important; color: #231B16 !important; }
.badge.bg-danger { background-color: rgba(220, 38, 38, 0.85) !important; }
.badge.bg-info { background-color: rgba(37, 99, 235, 0.85) !important; }

/* =============================================================================
   LIST GROUP
   ============================================================================= */
.list-group {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.list-group-item {
  border: 1px solid rgba(205, 104, 57, 0.14);
  background-color: rgba(255, 255, 255, 0.86);
  color: var(--esd-text-dark);
  transition: var(--transition-fast);
}

.list-group-item:hover {
  background-color: rgba(205, 104, 57, 0.10);
  border-left: 3px solid rgba(205, 104, 57, 0.75);
}

.list-group-flush .list-group-item {
  background: transparent;
  border-color: rgba(205, 104, 57, 0.12);
}

/* =============================================================================
   FORMS
   ============================================================================= */
.form-label {
  font-weight: 700;
  color: var(--esd-text-dark);
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

.form-control,
.form-select {
  border: 1px solid rgba(205, 104, 57, 0.16);
  border-radius: 10px;
  padding: 0.625rem 0.875rem;
  transition: var(--transition-fast);
  background-color: rgba(255, 255, 255, 0.92);
  color: var(--esd-text-dark);
}

.form-control::placeholder {
  color: rgba(35, 27, 22, 0.45);
}

.form-control:focus,
.form-select:focus {
  border-color: rgba(205, 104, 57, 0.70);
  box-shadow: 0 0 0 0.2rem rgba(205, 104, 57, 0.14);
  outline: none;
}

.form-text {
  color: var(--esd-text-light);
  font-size: 0.875rem;
}

.form-check-input {
  background-color: rgba(255, 255, 255, 0.92);
  border-color: rgba(35, 27, 22, 0.22);
}

.form-check-input:checked {
  background-color: var(--esd-orange);
  border-color: var(--esd-orange);
}

.form-check-input:focus {
  border-color: rgba(205, 104, 57, 0.70);
  box-shadow: 0 0 0 0.2rem rgba(205, 104, 57, 0.14);
}

/* =============================================================================
   TABLES
   ============================================================================= */
.table {
  background-color: rgba(255, 255, 255, 0.86);
  color: var(--esd-text-dark);
  border-radius: 14px;
  overflow: hidden;
}

.table thead {
  background: linear-gradient(135deg,
    rgba(245, 230, 211, 0.65) 0%,
    rgba(205, 104, 57, 0.12) 100%);
}

.table thead th {
  border-bottom: 1px solid rgba(205, 104, 57, 0.22);
  font-weight: 700;
  color: var(--esd-text-dark);
  padding: 1rem;
}

.table tbody tr {
  transition: var(--transition-fast);
}

.table tbody tr:hover {
  background-color: rgba(205, 104, 57, 0.08);
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(35, 27, 22, 0.03);
}

.table-light {
  --bs-table-bg: transparent !important;
}

.table-primary {
  background-color: rgba(205, 104, 57, 0.10) !important;
}

/* =============================================================================
   ALERTS (si aún las usas)
   ============================================================================= */
.alert {
  border-radius: 12px;
  border: none;
  border-left: 4px solid;
  padding: 1rem 1.25rem;
  background-color: rgba(255, 255, 255, 0.86);
  color: var(--esd-text-dark);
  box-shadow: var(--shadow-sm);
}

.alert-success { border-left-color: var(--esd-success); }
.alert-warning { border-left-color: var(--esd-warning); }
.alert-danger { border-left-color: var(--esd-danger); }
.alert-info { border-left-color: var(--esd-info); }


/* =============================================================================
   UTILIDADES
   ============================================================================= */
.text-muted { color: var(--esd-text-light) !important; }
.text-primary { color: var(--esd-orange-dark) !important; }
.bg-light { background-color: rgba(255, 255, 255, 0.55) !important; }
.border-primary { border-color: rgba(205, 104, 57, 0.45) !important; }


/* =============================================================================
   ANIMACIONES
   ============================================================================= */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.card,
.list-group-item {
  animation: fadeIn 0.25s ease;
}

/* Vivían físicamente dentro de la sección LOGIN del styles.css viejo,
   pero las consumen otras páginas (dashboard/records/users, y
   projects/project_detail/audit todavía sin migrar) — movidas acá en
   A7.9, mismo criterio que @keyframes fadeIn arriba. */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* =============================================================================
   SCROLLBAR PERSONALIZADA (Webkit)
   ============================================================================= */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: rgba(205, 104, 57, 0.10); }
::-webkit-scrollbar-thumb { background: rgba(205, 104, 57, 0.55); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: rgba(225, 122, 71, 0.68); }


/* --- Formularios: marca de campo requerido y resize vertical (extraídas
   de estilos inline, A7.4) --- */
/* Formularios */
.esd-required-mark {
  color: var(--esd-danger);
}

.esd-resize-vertical {
  resize: vertical;
}