/* Control y Seguimiento de Capacitaciones - Estilos - Tema Azul */
:root {
  --cap-primary: #2563eb;
  --cap-primary-dark: #1d4ed8;
  --cap-accent: #0ea5e9;
  --cap-accent2: #f59e0b;
  --cap-bg: #f0f9ff;
  --cap-card: #fff;
  --cap-text: #1e293b;
  --cap-text-muted: #64748b;
  --cap-border: #e0f2fe;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: 'Outfit', system-ui, sans-serif; color: var(--cap-text); background: var(--cap-bg); }

/* Login */
.cap-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #1d4ed8 0%, #2563eb 50%, #3b82f6 100%); padding: 16px; position: relative; }
.cap-login-container { width: 100%; max-width: 420px; }
.cap-login-box { background: rgba(255,255,255,0.98); backdrop-filter: blur(12px); border-radius: 24px; padding: 32px; width: 100%; border: 1px solid rgba(37,99,235,0.2); box-shadow: 0 25px 50px -12px rgba(29,78,216,0.3); }
.cap-login-logo-centro { text-align: center; margin-bottom: 20px; }
.cap-login-logo-centro img { max-height: 70px; width: auto; object-fit: contain; }
.cap-login-icon { width: 80px; height: 80px; background: rgba(37,99,235,0.12); border-radius: 16px; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-size: 28px; color: var(--cap-primary); }
.cap-login-logo .cap-login-img { max-width: 70px; max-height: 70px; object-fit: contain; }
.cap-login-box h1 { color: var(--cap-text); text-align: center; margin: 0 0 8px; font-size: 1.5rem; }
.cap-login-box p { color: var(--cap-text-muted); text-align: center; margin: 0 0 20px; font-size: 0.9rem; }
.cap-login-btn-wrap { border-left: 5px solid var(--cap-primary); }
.cap-footer { text-align: center; margin-top: 16px; }
.cap-footer a { color: var(--cap-primary); font-size: 0.85rem; }

/* Form */
.cap-form-group { margin-bottom: 16px; }
.cap-form-group label { display: block; margin-bottom: 4px; font-size: 0.9rem; color: var(--cap-text-muted); }
.cap-input { width: 100%; padding: 12px 16px; border: 1px solid var(--cap-border); border-radius: 12px; font-size: 1rem; font-family: inherit; background: #fff; }
.cap-input:focus { outline: none; border-color: var(--cap-primary); box-shadow: 0 0 0 2px rgba(37,99,235,0.25); }
.cap-input-sm { padding: 8px 12px; font-size: 0.9rem; }
.cap-error { background: #fef2f2; color: #b91c1c; padding: 12px; border-radius: 12px; margin-bottom: 16px; font-size: 0.9rem; }
.cap-success { background: #dcfce7; color: #166534; padding: 12px; border-radius: 12px; margin-bottom: 16px; }

/* Buttons */
.cap-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 14px; font-size: 0.95rem; font-weight: 600; cursor: pointer; border: none; font-family: inherit; text-decoration: none; transition: all 0.2s ease; box-shadow: 0 4px 0 rgba(0,0,0,0.15); }
.cap-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 rgba(0,0,0,0.15); }
.cap-btn-primary { background: linear-gradient(180deg, var(--cap-primary) 0%, var(--cap-primary-dark) 100%); color: #fff; }
.cap-btn-primary:hover { background: linear-gradient(180deg, #3b82f6 0%, var(--cap-primary) 100%); }
.cap-btn-sm { padding: 6px 12px; font-size: 0.85rem; }
.cap-btn-success { background: linear-gradient(180deg, #10b981 0%, #059669 100%); color: #fff; }
.cap-btn-warning { background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%); color: #fff; }
.cap-btn-danger { background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%); color: #fff; }
.cap-btn-block { width: 100%; justify-content: center; }

/* Admin layout */
.cap-admin { display: flex; min-height: 100vh; }
.cap-sidebar { width: 260px; background: linear-gradient(180deg, #1d4ed8 0%, #2563eb 100%); color: #fff; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; height: 100vh; box-shadow: 4px 0 24px rgba(29,78,216,0.3); }
.cap-sidebar-brand { padding: 20px; background: #fff; display: flex; align-items: center; justify-content: center; }
.cap-brand-logo { height: 50px; width: auto; object-fit: contain; max-width: 100%; }
.cap-brand-fallback { display: flex; align-items: center; font-size: 1.4rem; }
.cap-sidebar-nav { flex: 1; padding: 12px 8px; display: flex; flex-direction: column; gap: 8px; background: rgba(0,0,0,0.2); margin: 0 8px; border-radius: 14px; }
.cap-sidebar-nav a { display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: rgba(255,255,255,0.95); text-decoration: none; transition: all 0.2s; border-radius: 10px; border-left: 5px solid transparent; }
.cap-sidebar-nav a:hover { background: rgba(255,255,255,0.12); color: #fff; }
.cap-sidebar-nav a.active.nav-dashboard { background: rgba(37,99,235,0.5) !important; border-left: 5px solid #2563eb !important; }
.cap-sidebar-nav a.active.nav-visitas { background: rgba(16,185,129,0.5) !important; border-left: 5px solid #10b981 !important; }
.cap-sidebar-nav a.active.nav-demostraciones { background: rgba(14,165,233,0.5) !important; border-left: 5px solid #0ea5e9 !important; }
.cap-sidebar-nav a.active.nav-listado { background: rgba(245,158,11,0.5) !important; border-left: 5px solid #f59e0b !important; }
.cap-sidebar-nav a.active.nav-usuarios { background: rgba(139,92,246,0.5) !important; border-left: 5px solid #8b5cf6 !important; }
.cap-sidebar-nav a.active.nav-recorridos { background: rgba(6,182,212,0.5) !important; border-left: 5px solid #06b6d4 !important; }
.cap-sidebar-nav a.active.nav-reportes { background: rgba(236,72,153,0.5) !important; border-left: 5px solid #ec4899 !important; }
.cap-sidebar-nav a.active.nav-diagnostico { background: rgba(245,158,11,0.5) !important; border-left: 5px solid #f59e0b !important; }
.cap-sidebar-footer { padding: 16px 20px; border-top: 1px solid rgba(255,255,255,0.15); font-size: 0.85rem; }
.cap-sidebar-footer a { color: rgba(255,255,255,0.9); text-decoration: none; }
.cap-main { flex: 1; margin-left: 260px; padding: 24px; background: linear-gradient(160deg, #dbeafe 0%, #bfdbfe 50%, #93c5fd 100%); }
.cap-content-box { background: rgba(255,255,255,0.9); padding: 24px; border-radius: 20px; box-shadow: 0 8px 32px rgba(0,0,0,0.08); border: 3px solid rgba(255,255,255,0.5); min-height: calc(100vh - 48px); }
.cap-content-box.cap-page-dashboard { border-left: 5px solid #2563eb !important; }
.cap-content-box.cap-page-visitas { border-left: 5px solid #10b981 !important; }
.cap-content-box.cap-page-listado_asistencia { border-left: 5px solid #f59e0b !important; }
.cap-content-box.cap-page-usuarios { border-left: 5px solid #8b5cf6 !important; }
.cap-content-box.cap-page-recorridos { border-left: 5px solid #06b6d4 !important; }
.cap-content-box.cap-page-reportes { border-left: 5px solid #ec4899 !important; }
.cap-content-box.cap-page-diagnostico_db { border-left: 5px solid #f59e0b !important; }

/* Dashboard header */
.cap-dashboard-header { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.cap-dashboard-logo img { max-height: 48px; width: auto; object-fit: contain; }
.cap-dashboard-header h1 { margin: 0; }

/* Cards */
.cap-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 20px; margin-bottom: 24px; }
.cap-card { background: var(--cap-card); border-radius: 16px; padding: 24px; border: 1px solid var(--cap-border); text-align: center; transition: transform 0.3s, box-shadow 0.3s; }
.cap-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.08); }
.cap-card i, .cap-card-icon { font-size: 2rem; color: var(--cap-primary); margin-bottom: 8px; display: block; }
.cap-card strong { display: block; font-size: 2rem; color: var(--cap-text); margin-bottom: 4px; }
.cap-card span { font-size: 0.9rem; color: var(--cap-text-muted); }
.cap-text-muted { color: var(--cap-text-muted); }

/* Table */
.cap-table { width: 100%; border-collapse: collapse; }
.cap-table th, .cap-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--cap-border); }
.cap-table th { background: rgba(37,99,235,0.08); font-weight: 600; font-size: 0.85rem; }
.cap-table-wrap { overflow-x: auto; background: var(--cap-card); border-radius: 16px; border: 1px solid var(--cap-border); }

/* Columna Observaciones - más visible */
.cap-col-observaciones { min-width: 180px; max-width: 320px; word-wrap: break-word; white-space: pre-wrap; }
.cap-table-observaciones .cap-col-observaciones { min-width: 200px; }

/* Badge */
.cap-badge { display: inline-block; padding: 4px 10px; border-radius: 8px; font-size: 0.8rem; }
.cap-badge-admin { background: #dcfce7; color: #166534; }
.cap-badge-capacitador { background: #dbeafe; color: #1e40af; }
.cap-badge-capacitacion { background: #dbeafe; color: #1d4ed8; }
.cap-badge-soporte { background: #fef3c7; color: #92400e; }
.cap-badge-demostracion { background: #d1fae5; color: #065f46; }

/* Filters */
.cap-filters { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; align-items: center; }
.cap-filters .cap-input { width: auto; min-width: 140px; }

/* QR modal */
.cap-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 10000; padding: 16px; }
.cap-modal-box { background: #fff; border-radius: 16px; padding: 24px; max-width: 420px; width: 100%; text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,0.3); }
.cap-modal-qr-logo { margin-bottom: 12px; }
.cap-modal-qr-logo img { max-height: 36px; width: auto; object-fit: contain; }
.cap-modal-box h3 { margin: 0 0 16px; }
.cap-modal-box #qrCodeContainer { display: block !important; }
.cap-modal-box #qrCodeContainer img { display: block !important; margin: 0 auto; }
.cap-modal-box #qrCodeContainer table { margin: 0 auto !important; }

/* Map layout */
.cap-mapa-wrap { background: var(--cap-card); border-radius: 16px; border: 1px solid var(--cap-border); overflow: hidden; height: 500px; margin-top: 16px; }
.cap-mapa { width: 100%; height: 500px; }

/* Asistencia (pública) */
.cap-asistencia-page { max-width: 480px; margin: 40px auto; padding: 24px; background: #fff; border-radius: 20px; box-shadow: 0 8px 32px rgba(0,0,0,0.1); }
.cap-asistencia-logo { text-align: center; margin-bottom: 20px; }
.cap-asistencia-logo img { max-height: 60px; width: auto; object-fit: contain; }
.cap-asistencia-page h1 { text-align: center; margin-bottom: 24px; color: var(--cap-primary); }

/* Responsive */
@media (max-width: 768px) {
  .cap-sidebar { width: 100%; height: auto; position: relative; }
  .cap-main { margin-left: 0; }
  .cap-admin { flex-direction: column; }
}