/* =============================================
   HUMANO — MODULES
   Login, Novedades, Licencias, Calendario, Usuarios
   ============================================= */

/* ===== LOGIN ===== */
.login-screen {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--color-bg);
}
.login-hero {
  background: linear-gradient(135deg, #FF6F0D 0%, #F88E46 50%, #FF6F0D 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-12);
  position: relative;
  overflow: hidden;
}
.login-hero::before {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  background: rgba(255,255,255,0.08);
  border-radius: 50%;
  top: -100px;
  right: -100px;
}
.login-hero::after {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  background: rgba(255,255,255,0.06);
  border-radius: 50%;
  bottom: -80px;
  left: -80px;
}
.login-hero-content { position: relative; z-index: 1; text-align: center; color: #fff; }
.login-hero-logo {
  width: 80px;
  height: 80px;
  background: rgba(255,255,255,0.2);
  border-radius: var(--radius-2xl);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-6);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255,255,255,0.3);
}
.login-hero-title { font-size: 3rem; font-weight: var(--font-weight-extrabold); letter-spacing: -0.03em; line-height: 1; }
.login-hero-subtitle { font-size: var(--font-size-lg); opacity: 0.85; margin-top: var(--space-3); font-weight: var(--font-weight-medium); }
.login-hero-features { margin-top: var(--space-10); display: flex; flex-direction: column; gap: var(--space-4); text-align: left; }
.login-hero-feature { display: flex; align-items: center; gap: var(--space-3); }
.login-hero-feature-icon {
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.2);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.login-hero-feature-text { font-size: var(--font-size-base); font-weight: var(--font-weight-medium); opacity: 0.9; }

.login-form-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-12);
  background: #fff;
}
.login-form-container { width: 100%; max-width: 420px; }
.login-form-title { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); margin-bottom: var(--space-2); }
.login-form-subtitle { color: var(--text-secondary); margin-bottom: var(--space-8); }
.login-form { display: flex; flex-direction: column; gap: var(--space-4); }
.login-forgot { text-align: right; margin-top: calc(-1 * var(--space-2)); }
.login-forgot a { font-size: var(--font-size-sm); color: var(--text-link); }
.login-divider { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-2) 0; }
.login-divider-line { flex: 1; height: 1px; background: var(--color-border); }
.login-divider-text { font-size: var(--font-size-xs); color: var(--text-tertiary); }
.login-demo-accounts { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }
.demo-account-btn {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-base);
  background: #fff;
  font-family: var(--font-family);
  text-align: left;
}
.demo-account-btn:hover { border-color: var(--color-primary); background: #FFF0E6; }
.demo-account-btn .demo-avatar { flex-shrink: 0; }
.demo-account-info { flex: 1; }
.demo-account-name { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--text-primary); }
.demo-account-role { font-size: var(--font-size-xs); color: var(--text-tertiary); }
.demo-account-arrow { color: var(--text-tertiary); transition: color var(--transition-fast), transform var(--transition-fast); }
.demo-account-btn:hover .demo-account-arrow { color: var(--color-primary); transform: translateX(3px); }

/* ===== NOVEDADES (NEWS FEED) ===== */
.feed-layout { display: grid; grid-template-columns: 1fr 320px; gap: var(--space-6); align-items: start; }
.feed-list { display: flex; flex-direction: column; gap: var(--space-4); }
.post-card {
  background: #fff;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--transition-base);
}
.post-card:hover { box-shadow: var(--shadow-md); }
.post-card-pinned { border-color: var(--color-primary-lighter); }
.post-pinned-banner {
  background: linear-gradient(90deg, #FFF0E6, #FFF8F3);
  border-bottom: 1px solid var(--color-primary-lighter);
  padding: var(--space-2) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}
.post-header { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-5); padding-bottom: var(--space-3); }
.post-author-info { flex: 1; }
.post-author-name { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); }
.post-meta { font-size: var(--font-size-xs); color: var(--text-tertiary); display: flex; align-items: center; gap: var(--space-2); margin-top: 2px; }
.post-options-btn { color: var(--text-tertiary); border-radius: var(--radius-sm); padding: 4px; transition: all var(--transition-fast); }
.post-options-btn:hover { color: var(--text-primary); background: var(--color-bg); }
.post-body { padding: 0 var(--space-5) var(--space-4); }
.post-title { font-size: var(--font-size-md); font-weight: var(--font-weight-bold); margin-bottom: var(--space-2); }
.post-text { color: var(--text-secondary); line-height: var(--line-height-relaxed); font-size: var(--font-size-base); }
.post-image { width: 100%; max-height: 400px; object-fit: cover; display: block; }
.post-attachments { padding: 0 var(--space-5) var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.post-attachment {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  background: var(--color-bg);
}
.post-attachment:hover { border-color: var(--color-accent); color: var(--color-accent); background: var(--color-accent-light); }
.post-reactions { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--color-border-light); display: flex; align-items: center; gap: var(--space-4); }
.post-reaction-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--font-family);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}
.post-reaction-btn:hover { background: var(--color-bg); color: var(--text-primary); }
.post-reaction-btn.liked { color: var(--color-primary); }
.post-reaction-btn.liked svg { fill: var(--color-primary); }
.post-comments { border-top: 1px solid var(--color-border-light); padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.comment { display: flex; gap: var(--space-3); }
.comment-body { flex: 1; background: var(--color-bg); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); }
.comment-author { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.comment-text { font-size: var(--font-size-sm); color: var(--text-secondary); margin-top: 2px; }
.comment-time { font-size: var(--font-size-xs); color: var(--text-tertiary); margin-top: var(--space-1); }
.comment-input-wrap {
  display: flex;
  gap: var(--space-3);
  align-items: flex-end;
  margin-top: var(--space-2);
}
.comment-input { flex: 1; resize: none; min-height: 38px; max-height: 100px; }
.post-create-btn {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  color: #fff;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-primary);
}

/* ===== SPECIAL EVENT CARDS ===== */
.event-card-birthday {
  background: linear-gradient(135deg, #FFF0E6, #FFF8F3);
  border: 1px solid var(--color-primary-lighter);
}
.event-card-anniversary {
  background: linear-gradient(135deg, var(--color-accent-light), #F5F8FF);
  border: 1px solid var(--color-accent-medium);
}
.event-card-header-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

/* ===== FEED SIDEBAR ===== */
.feed-sidebar-widget {
  background: #fff;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: var(--space-4);
}
.feed-sidebar-widget-header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border-light);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.feed-sidebar-widget-body { padding: var(--space-4) var(--space-5); }
.upcoming-event-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; }
.upcoming-event-date {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  background: #FFF0E6;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  min-width: 48px;
  text-align: center;
}

/* ===== LICENCIAS ===== */
.licencias-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-bottom: var(--space-6); }
.days-counter {
  text-align: center;
  padding: var(--space-6);
  background: linear-gradient(135deg, var(--color-primary), #F88E46);
  color: #fff;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-primary-lg);
}
.days-counter-number { font-size: 3rem; font-weight: var(--font-weight-extrabold); line-height: 1; }
.days-counter-label { font-size: var(--font-size-sm); opacity: 0.85; margin-top: var(--space-1); }

.licencia-type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-3); }
.licencia-type-card {
  padding: var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-base);
  background: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.licencia-type-card:hover { border-color: var(--color-primary); background: #FFF0E6; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.licencia-type-card.selected { border-color: var(--color-primary); background: #FFF0E6; box-shadow: var(--shadow-primary); }
.licencia-type-icon { font-size: 2rem; }
.licencia-type-name { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--text-primary); }
.licencia-type-days { font-size: var(--font-size-xs); color: var(--text-tertiary); }

.request-stepper { display: flex; align-items: center; gap: 0; margin-bottom: var(--space-8); }
.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  position: relative;
}
.step-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--text-tertiary);
  background: #fff;
  z-index: 1;
  transition: all var(--transition-base);
}
.step.active .step-circle { border-color: var(--color-primary); color: var(--color-primary); background: #FFF0E6; }
.step.done .step-circle { border-color: var(--color-primary); background: var(--color-primary); color: #fff; }
.step-label { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--text-tertiary); text-align: center; }
.step.active .step-label { color: var(--color-primary); font-weight: var(--font-weight-semibold); }
.step.done .step-label { color: var(--text-secondary); }
.step-line { position: absolute; top: 18px; left: calc(50% + 18px); right: calc(-50% + 18px); height: 2px; background: var(--color-border); z-index: 0; }
.step.done .step-line { background: var(--color-primary); }

.solicitud-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  background: #fff;
  transition: all var(--transition-base);
  margin-bottom: var(--space-3);
}
.solicitud-row:hover { box-shadow: var(--shadow-sm); border-color: var(--color-border); }
.solicitud-icon { width: 42px; height: 42px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.25rem; }
.solicitud-info { flex: 1; }
.solicitud-type { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); }
.solicitud-dates { font-size: var(--font-size-sm); color: var(--text-secondary); margin-top: 2px; }
.solicitud-comment { font-size: var(--font-size-xs); color: var(--text-tertiary); margin-top: 4px; font-style: italic; }
.solicitud-actions { display: flex; gap: var(--space-2); align-items: center; }

/* ===== CALENDARIO ===== */
.calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.calendar-month-title { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); }
.calendar-nav-btn { width: 36px; height: 36px; border-radius: var(--radius-md); border: 1.5px solid var(--color-border); background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--transition-fast); color: var(--text-secondary); }
.calendar-nav-btn svg, .calendar-nav-btn i { pointer-events: none; }
.calendar-nav-btn:hover { border-color: var(--color-primary); color: var(--color-primary); background: #FFF0E6; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calendar-day-header { text-align: center; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); color: var(--text-tertiary); text-transform: uppercase; padding: var(--space-2) 0; letter-spacing: 0.06em; }
.calendar-cell {
  min-height: 100px;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  background: #fff;
  transition: all var(--transition-fast);
  cursor: default;
  position: relative;
}
.calendar-cell.has-events { cursor: pointer; }
.calendar-cell .calendar-date, .calendar-cell .calendar-event { pointer-events: none; }
.calendar-cell:hover { border-color: var(--color-border); box-shadow: var(--shadow-xs); }
.calendar-cell.other-month { background: var(--color-bg); opacity: 0.6; }
.calendar-cell.today { border-color: var(--color-primary); background: #FFF8F5; }
.calendar-cell.today .calendar-date { color: #fff; background: var(--color-primary); }
.calendar-date { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); border-radius: 50%; color: var(--text-primary); margin-bottom: var(--space-1); }
.calendar-event {
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  padding: 2px 6px;
  border-radius: 3px;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: filter var(--transition-fast);
}
.calendar-event:hover { filter: brightness(0.9); }
.calendar-event.licencia { background: #DBEAFE; color: #1E40AF; }
.calendar-event.birthday { background: #FEE2E2; color: #991B1B; }
.calendar-event.feriado { background: #F3E8FF; color: #6B21A8; }
.calendar-event.anniversary { background: var(--color-accent-light); color: var(--color-accent-hover); }
.calendar-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.legend-item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-xs); color: var(--text-secondary); }
.legend-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.calendar-filters { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }

/* ===== USUARIOS ===== */
.user-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); }
.user-card {
  background: #fff;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  transition: all var(--transition-base);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.user-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.user-card-top { display: flex; align-items: flex-start; justify-content: space-between; }
.user-card-info { margin-top: var(--space-3); }
.user-card-name { font-size: var(--font-size-md); font-weight: var(--font-weight-bold); line-height: 1.3; }
.user-card-actions { display: flex; gap: var(--space-1); flex-shrink: 0; }
.user-card-role { font-size: var(--font-size-xs); color: var(--text-secondary); }
.user-card-dept { font-size: var(--font-size-xs); color: var(--text-tertiary); margin-top: 2px; }
.user-card-actions { display: flex; gap: var(--space-2); }
.user-card-divider { height: 1px; background: var(--color-border-light); }
.user-card-meta { display: flex; flex-direction: column; gap: var(--space-1); }
.user-meta-item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-xs); color: var(--text-secondary); }
.user-card-footer { display: flex; align-items: center; justify-content: space-between; }
.user-inactive { opacity: 0.6; }

/* ===== PERFIL ===== */
.profile-hero {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  border-radius: var(--radius-2xl);
  padding: var(--space-8) var(--space-8) var(--space-6);
  color: #fff;
  position: relative;
  overflow: hidden;
  margin-bottom: var(--space-6);
}
.profile-hero::before {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  background: rgba(255,255,255,0.07);
  border-radius: 50%;
  top: -100px;
  right: -50px;
}
.profile-hero-content { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--space-6); }
.profile-avatar-wrap { position: relative; }
.profile-avatar-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  background: var(--color-success);
  border: 2px solid #fff;
  border-radius: 50%;
  width: 16px;
  height: 16px;
}
.profile-name { font-size: var(--font-size-2xl); font-weight: var(--font-weight-extrabold); }
.profile-role { font-size: var(--font-size-md); opacity: 0.85; margin-top: var(--space-1); }
.profile-meta-items { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-4); }
.profile-meta-item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); opacity: 0.85; }

/* ─── Módulo Recibos ──────────────────────────────────────── */
.recibos-user-list { padding: 0 0 0.5rem; }

.recibo-user-btn {
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: background var(--transition-fast);
  border-radius: 0;
  color: inherit;
}
.recibo-user-btn:hover { background: var(--color-bg); }
.recibo-user-btn.active { background: var(--color-primary); }
.recibo-user-btn.active .recibo-user-name  { color: #fff; }
.recibo-user-btn.active .recibo-user-cargo { color: rgba(255,255,255,0.8); }

.recibo-user-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recibo-user-cargo {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recibo-dropzone {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
  background: var(--color-bg);
}
.recibo-dropzone:hover,
.recibo-dropzone.dragover {
  border-color: var(--color-primary);
  background: #FFF8F5;
}

.recibo-preview {
  margin-top: 10px;
  padding: 10px 14px;
  background: var(--color-success-bg);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: 10px;
}
.recibo-preview-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recibo-preview-size { font-size: var(--font-size-xs); color: var(--text-tertiary); }

.recibo-card-colaborador {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.recibo-card-icon { font-size: 2.5rem; line-height: 1; }
.recibo-card-label { font-weight: var(--font-weight-bold); font-size: 1rem; color: var(--text-primary); }
.recibo-card-filename { font-size: var(--font-size-xs); color: var(--text-tertiary); margin-top: 2px; }
.recibo-card-actions { display: flex; gap: 8px; margin-top: 4px; }
.recibo-card-actions .btn { flex: 1; }

.recibo-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}
.recibo-row-icon { font-size: 1.75rem; flex-shrink: 0; }
.recibo-row-info { flex: 1; min-width: 0; }
.recibo-row-label { font-weight: var(--font-weight-bold); font-size: var(--font-size-base); }
.recibo-row-meta {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recibo-row-actions { display: flex; gap: 6px; flex-shrink: 0; }
.recibo-row-actions .btn-danger-ghost { color: var(--color-error); }

/* Layout admin: lista izq fija + panel derecho flexible */
.recibos-admin-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 1.5rem;
  align-items: start;
}
.recibos-user-panel { position: sticky; top: 80px; }