/* ===========================
   BRIGADISTAS - CUSTOM STYLES
   =========================== */
:root {
  --color-primary: #c0392b;
  --color-primary-dark: #922b21;
  --color-secondary: #2c3e50;
  --color-success: #27ae60;
  --color-warning: #f39c12;
  --color-light: #f8f9fa;
  --shadow: 0 4px 20px rgba(0,0,0,0.08);
}

body { background-color: #f0f2f5; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; }

/* NAVBAR */
.bg-primary-custom { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%) !important; }
.navbar-dark .navbar-nav .nav-link { color: rgba(255,255,255,0.85) !important; transition: color .2s; }
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active { color: #fff !important; }
.navbar-brand { font-size: 1.1rem; letter-spacing: .3px; }

/* BUTTONS */
.btn-danger-custom { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.btn-danger-custom:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #fff; }
.btn-action { border-radius: 10px !important; padding: .45rem 1rem; font-size: .9rem; }

/* STAT CARDS */
.stat-card {
  border-radius: 16px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .2s;
}
.stat-card:hover { transform: translateY(-3px); }
.stat-card .stat-icon { font-size: 2.5rem; opacity: .25; position: absolute; right: 16px; top: 12px; }
.stat-card .stat-number { font-size: 2.2rem; font-weight: 800; line-height: 1.1; }
.stat-card .stat-label { font-size: .82rem; opacity: .85; margin-top: 4px; }

/* CARDS */
.card { transition: box-shadow .2s; }
.card:hover { box-shadow: 0 6px 28px rgba(0,0,0,0.1) !important; }
.rounded-4 { border-radius: 16px !important; }
.rounded-top-4 { border-radius: 16px 16px 0 0 !important; }

/* LOGIN */
.login-page { background: linear-gradient(135deg, #c0392b 0%, #2c3e50 100%); }
.card-header-login { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); }
.logo-circle {
  width: 80px; height: 80px;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem;
  backdrop-filter: blur(4px);
  border: 3px solid rgba(255,255,255,0.3);
}
.logo-circle i { color: white; }

/* BOTIQUIN CARD */
.botiquin-card { transition: transform .2s, box-shadow .2s; }
.botiquin-card:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(0,0,0,0.12) !important; }

/* TARJETAS BRIGADISTAS */
.tarjeta-brigadista {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: white;
  transition: transform .2s, box-shadow .2s;
}
.tarjeta-brigadista:hover { transform: translateY(-5px); box-shadow: 0 10px 35px rgba(0,0,0,0.12); }
.tarjeta-optima { border-top: 5px solid var(--color-success); }
.tarjeta-revisar { border-top: 5px solid var(--color-warning); }
.tarjeta-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 16px 8px;
}
.tarjeta-avatar {
  width: 56px; height: 56px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: white; font-weight: 800; font-size: 1.3rem;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
}
.badge-status { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 20px; font-size: 11px; font-weight: 600; }
.badge-status.optimo { background: #d5f5e3; color: #1e8449; }
.badge-status.revisar { background: #fef9e7; color: #b7950b; }
.tarjeta-body { padding: 8px 16px 12px; }
.tarjeta-footer { padding: 12px 16px; border-top: 1px solid #f0f0f0; }

/* TABLE HEADERS */
.table-danger thead th { background: #c0392b !important; color: white; border-color: #a93226; }

/* FOOTER */
.footer { background: white !important; }

/* STICKY FORM */
.sticky-form { position: sticky; top: 80px; }

/* PAGE HEADER */
.page-header { border-bottom: 2px solid #f0f0f0; padding-bottom: 12px; }

/* RESPONSIVE TWEAKS */
@media (max-width: 576px) {
  .stat-card .stat-number { font-size: 1.6rem; }
  .container-fluid { padding-left: 12px !important; padding-right: 12px !important; }
}

/* PRINT STYLES */
@media print {
  body { background: white; }
  .navbar, .footer, .no-print { display: none !important; }
  .card { box-shadow: none !important; border: 1px solid #dee2e6 !important; }
}