﻿/* ============================================================
   Personal Laboral â€” Module-specific CSS
   Extends iEnTop.css with module-only styles
   ============================================================ */

/* â”€â”€ View Section (SPA) â”€â”€ */
.view-section { display:none; height:100%; width:100%; }
.view-section.active { display:block; }

/* â”€â”€ Fichar Button â”€â”€ */
.fichar-btn {
  display:inline-flex; align-items:center; gap:1rem;
  padding:1.25rem 3rem; font-size:1.25rem; font-weight:700;
  background:var(--color-accent); color:#fff; border:none;
  border-radius:1rem; cursor:pointer;
  transition:all 0.3s ease; position:relative; overflow:hidden;
}
.fichar-btn:hover { background:var(--color-accent-hover); transform:scale(1.04); box-shadow:0 8px 24px var(--color-accent-subtle); }
.fichar-btn:active { transform:scale(0.97); }
.fichar-btn.salida { background:var(--color-danger); }
.fichar-btn.salida:hover { background:#dc2626; }
.fichar-btn i { font-size:1.5rem; }

/* Pulse ring animation */
.fichar-btn::after {
  content:''; position:absolute; inset:-4px;
  border:3px solid var(--color-accent); border-radius:1rem;
  animation:pulse-ring 2s ease-out infinite; opacity:0;
}
@keyframes pulse-ring {
  0% { transform:scale(1); opacity:0.6; }
  100% { transform:scale(1.15); opacity:0; }
}

/* â”€â”€ Timeline Bar â”€â”€ */
.timeline-bar {
  display:flex; height:12px; border-radius:6px; overflow:hidden;
  background:var(--color-bg-input); border:1px solid var(--color-border);
}
.timeline-segment { height:100%; transition:width 0.5s ease; }
.tl-work { background:var(--color-accent); }
.tl-pause { background:var(--color-warning); }
.tl-remaining { background:var(--color-bg-input); }

/* â”€â”€ Progress Bar (Vacations) â”€â”€ */
.progress-bar {
  height:8px; border-radius:4px; background:var(--color-bg-input);
  overflow:hidden; border:1px solid var(--color-border);
}
.progress-fill {
  height:100%; border-radius:4px;
  background:linear-gradient(90deg, var(--color-accent), var(--color-accent-hover));
  transition:width 0.6s ease;
}

/* â”€â”€ Status Indicator Dots â”€â”€ */
.status-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.status-dot.working { background:var(--color-success); animation:pulse-accent 2s infinite; }
.status-dot.paused  { background:var(--color-warning); }
.status-dot.absent  { background:var(--color-text-muted); }
.status-dot.vacation{ background:#3b82f6; }
.status-dot.baja    { background:var(--color-danger); }

/* â”€â”€ Employee Status Item â”€â”€ */
.emp-status-item {
  display:flex; align-items:center; gap:0.75rem; padding:0.625rem 1rem;
  border-bottom:1px solid var(--color-border); transition:background 0.15s;
}
.emp-status-item:hover { background:var(--color-bg-hover); }
.emp-avatar {
  width:32px; height:32px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; font-weight:700;
  font-size:0.6875rem; color:#fff; flex-shrink:0;
}
.emp-status-info { flex:1; min-width:0; }
.emp-status-name { font-size:0.8125rem; font-weight:500; color:var(--color-text-primary); }
.emp-status-meta { font-size:0.6875rem; color:var(--color-text-muted); }

/* â”€â”€ Vacation Request Item â”€â”€ */
.vac-request {
  display:flex; align-items:center; gap:0.75rem; padding:0.75rem 1rem;
  border-bottom:1px solid var(--color-border);
}
.vac-dates { flex:1; }
.vac-dates-range { font-size:0.8125rem; font-weight:500; color:var(--color-text-primary); }
.vac-dates-days { font-size:0.6875rem; color:var(--color-text-muted); }
.vac-status {
  padding:0.125rem 0.625rem; border-radius:9999px;
  font-size:0.6875rem; font-weight:600;
}
.vac-status.approved { background:rgba(34,197,94,0.15); color:var(--color-success); }
.vac-status.pending  { background:rgba(245,158,11,0.15); color:var(--color-warning); }
.vac-status.denied   { background:rgba(239,68,68,0.15); color:var(--color-danger); }

/* â”€â”€ Absence Type Card â”€â”€ */
.absence-type-item {
  display:flex; align-items:center; gap:0.75rem; padding:0.75rem 1rem;
  border-bottom:1px solid var(--color-border);
}
.absence-type-icon {
  width:32px; height:32px; border-radius:0.375rem; display:flex;
  align-items:center; justify-content:center; font-size:0.875rem; flex-shrink:0;
}
.absence-type-info { flex:1; }
.absence-type-name { font-size:0.8125rem; font-weight:500; color:var(--color-text-primary); }
.absence-type-legal { font-size:0.6875rem; color:var(--color-text-muted); }
.absence-type-duration { font-size:0.6875rem; font-weight:600; color:var(--color-text-accent); }

/* â”€â”€ Activity Feed Item â”€â”€ */
.activity-item {
  display:flex; align-items:center; gap:0.75rem; padding:0.625rem 1rem;
  border-bottom:1px solid var(--color-border);
}
.activity-item:last-child { border-bottom:none; }
.activity-icon {
  width:28px; height:28px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; font-size:0.75rem; flex-shrink:0;
}
.activity-info { flex:1; }
.activity-text { font-size:0.8125rem; color:var(--color-text-primary); }
.activity-time { font-size:0.6875rem; color:var(--color-text-muted); }

/* â”€â”€ FullCalendar Overrides â”€â”€ */
.fc { font-family:'Inter',system-ui,sans-serif!important; }
.fc .fc-toolbar-title { font-size:1rem!important; font-weight:600; color:var(--color-text-primary); }
.fc .fc-button { background:var(--color-bg-input)!important; border:1px solid var(--color-border)!important; color:var(--color-text-secondary)!important; font-size:0.75rem!important; }
.fc .fc-button:hover { background:var(--color-bg-hover)!important; color:var(--color-text-primary)!important; }
.fc .fc-button-active { background:var(--color-accent)!important; color:#fff!important; border-color:var(--color-accent)!important; }
.fc .fc-daygrid-day { background:var(--color-bg-card); }
.fc .fc-daygrid-day-number { color:var(--color-text-primary); font-size:0.8125rem; }
.fc th { color:var(--color-text-secondary); font-size:0.75rem; }
.fc td, .fc th { border-color:var(--color-border)!important; }
.fc .fc-scrollgrid { border-color:var(--color-border)!important; }
.fc .fc-day-today { background:var(--color-accent-subtle)!important; }
.fc .fc-event { border-radius:4px; padding:1px 4px; font-size:0.6875rem; border:none; }

/* â”€â”€ Scrollbar â”€â”€ */
.content-host::-webkit-scrollbar { width:6px; }
.content-host::-webkit-scrollbar-track { background:var(--color-bg-primary); }
.content-host::-webkit-scrollbar-thumb { background:var(--color-border); border-radius:3px; }

/* ============================================================
   Sprint 2: Calendar Premium Styles
   ============================================================ */

/* â”€â”€ Calendar Toolbar â”€â”€ */
.cal-toolbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:0.625rem 1.25rem; background:var(--color-bg-secondary);
  border-bottom:1px solid var(--color-border); flex-shrink:0;
}
.cal-toolbar-left, .cal-toolbar-right { display:flex; align-items:center; gap:0.5rem; }

/* â”€â”€ Layer Toggle Chips â”€â”€ */
.cal-layer-chip {
  display:inline-flex; align-items:center; gap:6px;
  padding:0.25rem 0.75rem; font-size:0.6875rem; font-weight:600;
  background:var(--color-bg-input); color:var(--color-text-secondary);
  border:1.5px solid var(--color-border); border-radius:9999px;
  cursor:pointer; transition:all 0.2s ease; user-select:none;
}
.cal-layer-chip:hover { border-color:var(--color-accent); color:var(--color-text-primary); }
.cal-layer-chip.active { background:var(--color-accent-subtle); border-color:var(--color-accent); color:var(--color-text-accent); }
.cal-chip-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.cal-layer-chip:not(.active) .cal-chip-dot { opacity:0.4; }

/* â”€â”€ Filter Select â”€â”€ */
.cal-filter-select {
  padding:0.3rem 0.6rem; font-size:0.6875rem;
  background:var(--color-bg-input); color:var(--color-text-primary);
  border:1px solid var(--color-border); border-radius:0.375rem;
  outline:none; cursor:pointer; min-width:180px;
}
.cal-filter-select:focus { border-color:var(--color-accent); box-shadow:0 0 0 2px var(--color-accent-subtle); }

/* â”€â”€ Context Menu â”€â”€ */
.cal-context-menu {
  position:fixed; z-index:9999;
  background:var(--color-bg-card); border:1px solid var(--color-border);
  border-radius:var(--radius); box-shadow:0 8px 24px rgba(0,0,0,0.3);
  min-width:200px; padding:4px 0; animation:fadeIn 0.15s ease;
}
.cal-ctx-item {
  display:flex; align-items:center; gap:0.625rem;
  padding:0.5rem 1rem; font-size:0.8125rem; color:var(--color-text-primary);
  cursor:pointer; transition:background 0.12s;
}
.cal-ctx-item:hover { background:var(--color-accent-subtle); color:var(--color-text-accent); }
.cal-ctx-item i { width:16px; text-align:center; }
.cal-ctx-divider { height:1px; background:var(--color-border); margin:4px 0; }

/* â”€â”€ Mini Calendar Overrides â”€â”€ */
#miniCalendar .fc-toolbar-title { font-size:0.75rem!important; }
#miniCalendar .fc-button { padding:2px 6px!important; font-size:0.625rem!important; }
#miniCalendar .fc-daygrid-day-number { font-size:0.625rem; padding:2px 4px; }
#miniCalendar .fc-col-header-cell-cushion { font-size:0.5625rem; }

/* â”€â”€ Drag Feedback â”€â”€ */
.fc-day-highlight, .fc .fc-daygrid-day.drag-over {
  background:var(--color-accent-subtle)!important;
  outline:2px dashed var(--color-accent);
  outline-offset:-2px;
}

/* â”€â”€ Employee Drag Item enhanced â”€â”€ */
.emp-drag-item {
  display:flex; align-items:center; gap:0.5rem; padding:0.5rem 0.75rem;
  border-bottom:1px solid var(--color-border); cursor:grab;
  transition:background 0.15s, transform 0.1s; user-select:none;
}
.emp-drag-item:hover { background:var(--color-bg-hover); }
.emp-drag-item:active { cursor:grabbing; transform:scale(0.98); }
.emp-drag-item .emp-drag-info { flex:1; min-width:0; }
.emp-drag-item .emp-drag-name { font-size:0.75rem; font-weight:500; color:var(--color-text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.emp-drag-item .emp-drag-days { font-size:0.625rem; color:var(--color-text-muted); }
.emp-drag-item .emp-drag-handle { color:var(--color-text-muted); font-size:0.6875rem; opacity:0.5; transition:opacity 0.15s; }
.emp-drag-item:hover .emp-drag-handle { opacity:1; }

/* â”€â”€ Event Tooltip â”€â”€ */
.fc-event { cursor:pointer; transition:transform 0.1s, box-shadow 0.15s; }
.fc-event:hover { transform:translateY(-1px); box-shadow:0 2px 8px rgba(0,0,0,0.2); z-index:10; }

/* ============================================================
   Sprint 3: Fichajes / TimeClock Premium
   ============================================================ */

/* â”€â”€ Tab Bar â”€â”€ */
.tc-tabs {
  display:flex; gap:0; background:var(--color-bg-secondary);
  border-bottom:1px solid var(--color-border); flex-shrink:0;
}
.tc-tab {
  display:inline-flex; align-items:center; gap:6px;
  padding:0.625rem 1.5rem; font-size:0.8125rem; font-weight:600;
  color:var(--color-text-secondary); background:transparent;
  border:none; border-bottom:2px solid transparent;
  cursor:pointer; transition:all 0.2s;
}
.tc-tab:hover { color:var(--color-text-primary); background:var(--color-bg-hover); }
.tc-tab.active { color:var(--color-text-accent); border-bottom-color:var(--color-accent); }
.tc-tab i { font-size:0.75rem; }

.tc-panel { display:none; }
.tc-panel.active { display:block; }

/* â”€â”€ Geo Status â”€â”€ */
.tc-geo-status {
  display:inline-flex; align-items:center; gap:0.5rem;
  margin-top:1.25rem; padding:0.375rem 1rem;
  background:var(--color-bg-secondary); border:1px solid var(--color-border);
  border-radius:9999px; font-size:0.6875rem; color:var(--color-text-muted);
}
.tc-geo-badge {
  padding:2px 8px; border-radius:9999px; font-size:0.5625rem; font-weight:700;
  background:rgba(34,197,94,0.15); color:var(--color-success); text-transform:uppercase;
}

/* â”€â”€ Enhanced Timeline â”€â”€ */
.tc-timeline-enhanced { margin-bottom:1rem; }
.tc-tl-hour-markers {
  display:flex; justify-content:space-between;
  font-size:0.5625rem; color:var(--color-text-muted); margin-bottom:4px;
  padding:0 2px;
}
.tc-tl-bar {
  height:20px; border-radius:6px; overflow:hidden;
  background:var(--color-bg-input); border:1px solid var(--color-border);
  display:flex; position:relative;
}
.tc-tl-segment {
  height:100%; position:relative; transition:width 0.5s ease;
  display:flex; align-items:center; justify-content:center;
  font-size:0.5rem; color:rgba(255,255,255,0.8); font-weight:600; overflow:hidden;
}
.tc-tl-legend {
  display:flex; gap:1rem; margin-top:6px; font-size:0.625rem; color:var(--color-text-muted);
}
.tc-tl-legend span { display:inline-flex; align-items:center; gap:4px; }
.tc-tl-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }

/* â”€â”€ Balance Row â”€â”€ */
.tc-balance-row {
  display:flex; gap:1rem; justify-content:space-around;
  padding-top:1rem; border-top:1px solid var(--color-border);
}
.tc-balance-item { text-align:center; }
.tc-balance-label { display:block; font-size:0.625rem; color:var(--color-text-muted); margin-bottom:2px; }
.tc-balance-val { font-size:0.9375rem; font-weight:700; color:var(--color-text-primary); }
.tc-balance-pos { color:var(--color-success); }
.tc-balance-neg { color:var(--color-danger); }

/* â”€â”€ Records Table â”€â”€ */
.tc-records-table { overflow-x:auto; }
.tc-records-table table { width:100%; border-collapse:collapse; font-size:0.75rem; }
.tc-records-table th {
  padding:0.5rem 0.75rem; text-align:left; font-weight:600; font-size:0.6875rem;
  color:var(--color-text-secondary); background:var(--color-bg-secondary);
  border-bottom:1px solid var(--color-border);
}
.tc-records-table td {
  padding:0.5rem 0.75rem; color:var(--color-text-primary);
  border-bottom:1px solid var(--color-border);
}
.tc-records-table tr:hover td { background:var(--color-bg-hover); }
.tc-hash { font-family:'Courier New',monospace; font-size:0.625rem; color:var(--color-text-muted); max-width:100px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* â”€â”€ Pause Button â”€â”€ */
.tc-pause-btn {
  display:inline-flex; align-items:center; gap:0.75rem;
  padding:0.875rem 2rem; font-size:0.9375rem; font-weight:700;
  background:var(--color-warning); color:#1a1a2e; border:none;
  border-radius:0.75rem; cursor:pointer; transition:all 0.2s; width:100%;
  justify-content:center;
}
.tc-pause-btn:hover { filter:brightness(1.1); transform:scale(1.02); }
.tc-pause-btn.resuming { background:var(--color-success); color:#fff; }

/* â”€â”€ Monthly Stats â”€â”€ */
.tc-monthly-stats { display:grid; grid-template-columns:1fr 1fr; gap:0.75rem; }
.tc-stat { text-align:center; padding:0.5rem; background:var(--color-bg-secondary); border-radius:0.375rem; }
.tc-stat-val { display:block; font-size:1rem; font-weight:700; color:var(--color-text-primary); }
.tc-stat-label { display:block; font-size:0.5625rem; color:var(--color-text-muted); margin-top:2px; }

/* â”€â”€ Admin Stats â”€â”€ */
.tc-admin-stats { font-size:0.75rem; color:var(--color-text-secondary); display:inline-flex; align-items:center; gap:4px; }

/* â”€â”€ Modal â”€â”€ */
.tc-modal-overlay {
  position:fixed; inset:0; z-index:9998;
  background:rgba(0,0,0,0.6); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  animation:fadeIn 0.15s ease;
}
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.tc-modal {
  background:var(--color-bg-card); border:1px solid var(--color-border);
  border-radius:var(--radius); width:480px; max-width:95vw;
  box-shadow:0 16px 48px rgba(0,0,0,0.4);
}
.tc-modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.25rem; border-bottom:1px solid var(--color-border);
}
.tc-modal-title { font-size:0.9375rem; font-weight:600; color:var(--color-text-primary); }
.tc-modal-close {
  background:none; border:none; color:var(--color-text-muted);
  font-size:1.125rem; cursor:pointer; padding:4px;
}
.tc-modal-close:hover { color:var(--color-text-primary); }
.tc-modal-body { padding:1.25rem; }
.tc-modal-footer {
  display:flex; justify-content:flex-end; gap:0.5rem;
  padding:0.75rem 1.25rem; border-top:1px solid var(--color-border);
}
.tc-form-group { margin-bottom:1rem; }
.tc-form-group label { display:block; font-size:0.75rem; font-weight:500; color:var(--color-text-secondary); margin-bottom:4px; }
.tc-form-input {
  width:100%; padding:0.5rem 0.75rem; font-size:0.8125rem;
  background:var(--color-bg-input); color:var(--color-text-primary);
  border:1px solid var(--color-border); border-radius:0.375rem;
  outline:none; font-family:inherit;
}
.tc-form-input:focus { border-color:var(--color-accent); box-shadow:0 0 0 2px var(--color-accent-subtle); }

/* â”€â”€ Status badges in admin table â”€â”€ */
.tc-status-badge {
  display:inline-flex; padding:2px 8px; border-radius:9999px;
  font-size:0.625rem; font-weight:700;
}
.tc-status-badge.working { background:rgba(34,197,94,0.15); color:var(--color-success); }
.tc-status-badge.paused { background:rgba(245,158,11,0.15); color:var(--color-warning); }
.tc-status-badge.absent { background:rgba(148,163,184,0.15); color:var(--color-text-muted); }
.tc-status-badge.vacation { background:rgba(59,130,246,0.15); color:#3b82f6; }
.tc-status-badge.baja { background:rgba(239,68,68,0.15); color:var(--color-danger); }

/* ============================================================
   Sprint 4: Vacaciones Premium
   ============================================================ */
.vac-panel { display:none; }
.vac-panel.active { display:block; }

.vac-balance-card { padding:1.25rem; }
.vac-stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.5rem; }
.vac-stat-num { display:block; font-size:1.125rem; font-weight:700; }
.vac-stat-lbl { display:block; font-size:0.5625rem; color:var(--color-text-muted); }

.vac-new-btn {
  display:flex; align-items:center; justify-content:center; gap:0.5rem;
  width:100%; padding:0.75rem; font-size:0.8125rem; font-weight:600;
  background:linear-gradient(135deg, var(--color-accent), #3b82f6); color:#fff;
  border:none; border-radius:0.5rem; cursor:pointer; transition:all 0.2s;
}
.vac-new-btn:hover { filter:brightness(1.1); transform:translateY(-1px); box-shadow:0 4px 12px rgba(59,130,246,0.3); }

.vac-overlap-warning {
  display:flex; align-items:flex-start; gap:0.75rem; padding:0.75rem 1rem;
  background:rgba(245,158,11,0.1); border:1px solid rgba(245,158,11,0.3);
  border-radius:0.5rem; font-size:0.75rem; color:var(--color-warning);
}
.vac-overlap-warning strong { display:block; margin-bottom:2px; }
.vac-overlap-warning span { font-size:0.6875rem; color:var(--color-text-secondary); }

.vac-balance-preview {
  background:var(--color-bg-secondary); border:1px solid var(--color-border);
  border-radius:0.5rem; padding:0.75rem 1rem; font-size:0.75rem;
}
.vac-balance-preview div { display:flex; justify-content:space-between; padding:0.25rem 0; }
.vac-balance-preview span { color:var(--color-text-secondary); }

.vac-days-calc {
  padding:0.5rem 0.75rem; background:var(--color-bg-input); border:1px solid var(--color-border);
  border-radius:0.375rem; font-size:0.8125rem; color:var(--color-text-muted);
  font-weight:600; text-align:center;
}

.vac-approve-btn, .vac-deny-btn {
  padding:4px 10px; font-size:0.625rem; font-weight:700; border:none; border-radius:4px;
  cursor:pointer; transition:all 0.15s;
}
.vac-approve-btn { background:rgba(34,197,94,0.15); color:var(--color-success); }
.vac-approve-btn:hover { background:rgba(34,197,94,0.3); }
.vac-deny-btn { background:rgba(239,68,68,0.15); color:var(--color-danger); }
.vac-deny-btn:hover { background:rgba(239,68,68,0.3); }

.tc-status-badge.pending { background:rgba(245,158,11,0.15); color:var(--color-warning); }
.tc-status-badge.approved { background:rgba(34,197,94,0.15); color:var(--color-success); }
.tc-status-badge.denied { background:rgba(239,68,68,0.15); color:var(--color-danger); }

/* ============================================================
   Sprint 5: Informes, Config, Portal
   ============================================================ */
/* Report panel switching */
.rpt-panel { display:none; }
.rpt-panel.active { display:block; }

/* Report Cards */
.rpt-card {
  background:var(--color-bg-secondary); border:1px solid var(--color-border);
  border-radius:0.625rem; padding:1.25rem; cursor:pointer;
  transition:all 0.2s; display:flex; flex-direction:column; gap:0.5rem;
}
.rpt-card:hover { border-color:var(--color-accent); transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,0.15); }
.rpt-card-icon { width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:0.5rem; }
.rpt-card-title { font-size:0.875rem; font-weight:700; color:var(--color-text-primary); }
.rpt-card-desc { font-size:0.6875rem; color:var(--color-text-muted); line-height:1.4; }
.rpt-card-footer { display:flex; align-items:center; justify-content:space-between; font-size:0.5625rem; color:var(--color-text-muted); margin-top:auto; padding-top:0.5rem; border-top:1px solid var(--color-border); }
.rpt-card-format { padding:2px 6px; border-radius:3px; font-weight:700; font-size:0.5rem; background:rgba(239,68,68,0.15); color:var(--color-danger); }

/* Report KPIs */
.rpt-kpi {
  background:var(--color-bg-secondary); border:1px solid var(--color-border);
  border-radius:0.625rem; padding:1rem; display:flex; flex-direction:column; gap:0.25rem; text-align:center;
}
.rpt-kpi-val { font-size:1.375rem; font-weight:800; color:var(--color-text-primary); }
.rpt-kpi-lbl { font-size:0.625rem; color:var(--color-text-muted); }
.rpt-kpi-trend { font-size:0.625rem; font-weight:700; }
.rpt-kpi-trend.up { color:var(--color-success); }
.rpt-kpi-trend.down { color:var(--color-danger); }

/* Config Cards */
.cfg-card { padding:1.25rem; }
.cfg-card-header {
  font-size:0.875rem; font-weight:600; color:var(--color-text-primary);
  margin-bottom:1rem; display:flex; align-items:center; gap:0.5rem;
}
.cfg-toggle-row {
  display:flex; align-items:center; gap:0.5rem; padding:0.375rem 0;
  font-size:0.8125rem; color:var(--color-text-secondary); cursor:pointer;
}

/* Portal */
.portal-profile-card { padding:1.5rem; text-align:center; }
.portal-avatar {
  width:64px; height:64px; border-radius:50%; margin:0 auto 0.75rem;
  background:linear-gradient(135deg, var(--color-accent), #3b82f6); color:#fff;
  font-size:1.25rem; font-weight:800; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(59,130,246,0.3);
}
.portal-name { font-size:1rem; font-weight:700; color:var(--color-text-primary); }
.portal-role { font-size:0.6875rem; color:var(--color-text-muted); margin-bottom:1rem; }
.portal-info-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.5rem; text-align:left; }
.portal-info-grid div { display:flex; align-items:center; gap:0.375rem; font-size:0.6875rem; color:var(--color-text-secondary); }
.portal-info-grid i { font-size:0.625rem; color:var(--color-text-muted); width:14px; text-align:center; }
.portal-actions { display:grid; grid-template-columns:1fr 1fr; gap:0.5rem; }
.portal-action-btn {
  display:flex; flex-direction:column; align-items:center; gap:0.25rem;
  padding:0.75rem 0.5rem; font-size:0.625rem; font-weight:600;
  background:var(--color-bg-input); border:1px solid var(--color-border);
  color:var(--color-text-secondary); border-radius:0.5rem; cursor:pointer;
  transition:all 0.15s;
}
.portal-action-btn:hover { border-color:var(--color-accent); color:var(--color-text-primary); background:rgba(59,130,246,0.08); }
.portal-action-btn i { font-size:1rem; color:var(--color-accent); }

/* ============================================================
   Sprint 6: Empleados Cards, Notifications, Animations
   ============================================================ */
/* Employee Cards */
.emp-card {
  background:var(--color-bg-secondary); border:1px solid var(--color-border);
  border-radius:0.625rem; padding:1rem; transition:all 0.2s;
  display:flex; flex-direction:column; gap:0.625rem;
}
.emp-card:hover { border-color:var(--color-accent); transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,0.15); }
.emp-card-header { display:flex; align-items:center; gap:0.75rem; }
.emp-card-avatar {
  width:42px; height:42px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-weight:700; font-size:0.75rem; color:#fff; flex-shrink:0;
}
.emp-card-name { font-size:0.8125rem; font-weight:700; color:var(--color-text-primary); }
.emp-card-role { font-size:0.625rem; color:var(--color-text-muted); }
.emp-card-dept {
  display:inline-block; font-size:0.5rem; font-weight:700; padding:2px 7px;
  border-radius:3px; text-transform:uppercase; letter-spacing:0.5px;
}
.emp-card-status {
  width:8px; height:8px; border-radius:50%; flex-shrink:0;
  box-shadow:0 0 0 2px var(--color-bg-secondary);
}
.emp-card-stats {
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:0.25rem;
  padding-top:0.5rem; border-top:1px solid var(--color-border);
}
.emp-card-stat { font-size:0.5625rem; color:var(--color-text-muted); text-align:center; }
.emp-card-stat strong { display:block; font-size:0.75rem; color:var(--color-text-primary); }

/* Notification dropdown */
.notif-dropdown {
  position:absolute; top:100%; right:0; width:320px; background:var(--color-bg-secondary);
  border:1px solid var(--color-border); border-radius:0.625rem;
  box-shadow:0 12px 40px rgba(0,0,0,0.3); z-index:1000; display:none;
  max-height:400px; overflow-y:auto;
}
.notif-dropdown.show { display:block; animation:fadeInDown 0.2s; }
.notif-item {
  padding:0.75rem 1rem; border-bottom:1px solid var(--color-border);
  display:flex; align-items:flex-start; gap:0.625rem; transition:background 0.15s;
}
.notif-item:hover { background:var(--color-bg-input); }
.notif-item:last-child { border-bottom:none; }

/* Micro animations */
@keyframes fadeInDown { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
@keyframes pulseGlow { 0%,100% { box-shadow:0 0 0 0 rgba(34,197,94,0.4); } 50% { box-shadow:0 0 0 6px rgba(34,197,94,0); } }
.emp-card-status.working { background:var(--color-success); animation:pulseGlow 2s infinite; }
.emp-card-status.vacation { background:#3b82f6; }
.emp-card-status.sick { background:var(--color-warning); }
.emp-card-status.offline { background:var(--color-text-muted); }
/* FullCalendar List View — Dark Theme Overrides */
.fc-list-day-cushion { background: var(--color-bg-card, #1e293b) !important; color: var(--color-text-primary, #e2e8f0) !important; }
.fc-list-day-cushion a { color: var(--color-accent, #38bdf8) !important; text-decoration: none; }
.fc-list-event { background: transparent !important; }
.fc-list-event td { border-color: var(--color-border, #334155) !important; color: var(--color-text-primary, #e2e8f0) !important; }
.fc-list-event:hover td { background: var(--color-bg-hover, rgba(56,189,248,0.08)) !important; }
.fc-list { border-color: var(--color-border, #334155) !important; }
.fc-list-table { color: var(--color-text-primary, #e2e8f0) !important; }
.fc-list-empty { background: var(--color-bg-card, #1e293b) !important; color: var(--color-text-muted, #94a3b8) !important; }

/* Baja events — compact bar, doesn't hide other events */
.baja-event { opacity: 0.85; font-size: 0.65rem !important; height: 16px !important; line-height: 16px !important; }
.baja-event .fc-event-title { font-size: 0.65rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.baja-bg + .fc-daygrid-day-frame { border-top: 3px solid #94a3b8 !important; }
.fc-daygrid-bg-harness .baja-bg { opacity: 1; }

/* Baja thin lines — 4px height, no text visible, just a colored stripe */
.baja-line { height: 2px !important; min-height: 2px !important; max-height: 2px !important; border-radius: 0 !important; margin-bottom: 1px !important; padding: 0 !important; overflow: hidden !important; }
.baja-line .fc-event-main { padding: 0 !important; line-height: 2px !important; overflow: hidden !important; }
.baja-line .fc-event-title { font-size: 0 !important; }
.baja-line .fc-event-main-frame { padding: 0 !important; }


/* ============================================================
   ERP Modal & Missing Component Styles
   (from module iEnTop.css - not in ERP shared iEnTop.css)
   ============================================================ */

/* -- Modal Overlay & Dialog -- */
.erp-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.erp-modal-overlay.show {
  display: flex;
  opacity: 1;
}

.erp-modal {
  background: var(--color-bg-card, #fff);
  border-radius: 12px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow: hidden;
  transform: translateY(20px) scale(0.97);
  transition: transform 0.25s ease;
}

.erp-modal-overlay.show .erp-modal {
  transform: translateY(0) scale(1);
}

.erp-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--color-border, #e2e8f0);
  background: var(--color-bg-card, #1e293b);
}

.erp-modal-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text-primary, #1e293b);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.erp-modal-close {
  background: none;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  color: var(--color-text-muted, #94a3b8);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}

.erp-modal-close:hover {
  background: rgba(239, 68, 68, 0.1);
  color: var(--color-danger, #ef4444);
}

.erp-modal-body {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
}

.erp-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--color-border, #e2e8f0);
  background: var(--color-bg-card, #1e293b);
}

/* -- Secondary Button -- */
.erp-btn-secondary {
  background: var(--color-bg-hover, #e2e8f0);
  color: var(--color-text-secondary, #475569);
  border: 1px solid var(--color-border, #e2e8f0);
}

.erp-btn-secondary:hover {
  background: var(--color-border, #cbd5e1);
}

/* -- Badge -- */
.tc-badge {
  display: inline-flex;
  padding: 2px 10px;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 600;
}
