/* ==========================================================================
   Webit Operaciones PRO — Tema claro / corporativo (estilo software empresarial)
   Colores sólidos, sombras suaves, tipografía Inter, animaciones sutiles.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@500&display=swap');

.webops-wrap {
	--webops-bg: #e7ebf3;
	--webops-card: #ffffff;
	--webops-card-alt: #eef1f8;
	--webops-border: #d7dcea;
	--webops-border-light: #b9c1d6;
	--webops-text: #10182b;
	--webops-muted: #667085;
	--webops-primary: #1c3f7c;
	--webops-primary-dark: #2c5aa8;
	--webops-primary-soft: rgba(28,63,124,0.08);
	--webops-accent: #9a7b2e;
	--webops-green: #16874e;
	--webops-green-soft: rgba(22,135,78,0.09);
	--webops-yellow: #b3660a;
	--webops-yellow-soft: rgba(179,102,10,0.1);
	--webops-red: #d1293d;
	--webops-red-soft: rgba(209,41,61,0.09);
	--webops-radius: 12px;
	--webops-shadow-sm: 0 1px 2px rgba(16,24,40,0.04);
	--webops-shadow-md: 0 2px 8px rgba(16,24,40,0.06), 0 1px 2px rgba(16,24,40,0.04);
	--webops-shadow-lg: 0 12px 28px rgba(16,24,40,0.10), 0 2px 6px rgba(16,24,40,0.05);

	max-width: 1280px;
	width: 100% !important;
	margin: 0 auto 30px auto !important;
	padding: 24px 18px 0 18px;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
	color: var(--webops-text);
	-webkit-font-smoothing: antialiased;
	box-sizing: border-box !important;
	background: var(--webops-bg);
	overflow-x: hidden;
	min-width: 0 !important;
}
.webops-wrap *, .webops-wrap *::before, .webops-wrap *::after { box-sizing: border-box !important; }
.webops-wrap, .webops-wrap * { float: none !important; }
.webops-wrap ul, .webops-wrap ol { margin: 0; padding: 0; list-style: none; }
.webops-wrap img { max-width: 100%; height: auto; }
.webops-wrap a { text-decoration: none; }
.webops-wrap button { font-family: inherit; }

/* Evita que las columnas de grid/flex se nieguen a achicarse y desborden su contenedor real
   (bug clásico de CSS: los hijos de grid/flex tienen min-width:auto por defecto). */
.webops-wrap .webops-dash-grid,
.webops-wrap .webops-dash-grid > *,
.webops-wrap .webops-kpi-grid,
.webops-wrap .webops-kpi-grid > *,
.webops-wrap .webops-kanban,
.webops-wrap .webops-kanban > *,
.webops-wrap .webops-kanban-cards > *,
.webops-wrap .webops-accesos-grid > *,
.webops-wrap .webops-tools-grid > *,
.webops-wrap .webops-grid-2 > *,
.webops-wrap .webops-checklist > *,
.webops-wrap .webops-task-item,
.webops-wrap .webops-task-main,
.webops-wrap .webops-tabs,
.webops-wrap .webops-card {
	min-width: 0 !important;
}

/* ---------- Cards ---------- */
.webops-card {
	background: var(--webops-card);
	border: 1px solid var(--webops-border);
	border-radius: var(--webops-radius);
	padding: clamp(22px, 2.8vw, 32px);
	margin-bottom: 22px;
	position: relative;
	box-shadow: var(--webops-shadow-sm);
	transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.webops-card:hover { box-shadow: var(--webops-shadow-md); }

.webops-fadein { animation: webopsFadeUp .45s cubic-bezier(.22,.9,.36,1) both; }
@keyframes webopsFadeUp {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

.webops-title {
	font-size: clamp(17.5px, 1.6vw, 20.5px);
	margin: 0 0 6px 0;
	font-weight: 700;
	color: var(--webops-text);
	letter-spacing: -0.2px;
}
.webops-subtitle { color: var(--webops-muted); font-size: 14.5px; margin: 0 0 20px 0; line-height: 1.5; }
.webops-section-title {
	font-size: 13px;
	margin: 26px 0 12px;
	color: var(--webops-primary);
	text-transform: uppercase;
	letter-spacing: 1.2px;
	font-weight: 700;
	display: flex !important;
	align-items: center;
	gap: 8px;
}
.webops-section-title::after { content:""; flex:1; height:1px; background: var(--webops-border); }

.webops-card-header-row { display:flex !important; justify-content:space-between; align-items:center; margin-bottom: 6px; gap: 12px; flex-wrap: wrap; }
.webops-empty, .webops-empty-mini { color: var(--webops-muted); font-size: 14.5px; padding: 16px 0; }

/* ---------- Forms ---------- */
.webops-form { margin-top: 10px; }
.webops-grid-2 { display:grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px 20px; }
.webops-field { display:flex !important; flex-direction:column; margin-bottom: 14px; }
.webops-field label { font-size: 12.5px; color: var(--webops-muted); margin-bottom: 7px; text-transform: uppercase; letter-spacing: .6px; font-weight: 600; }
.webops-field .webops-sublabel { margin-top: 10px; }
.webops-field input[type=text],
.webops-field input[type=email],
.webops-field input[type=date],
.webops-field input[type=time],
.webops-field input[type=number],
.webops-field input[type=file],
.webops-field select,
.webops-field textarea {
	background: var(--webops-card);
	border: 1px solid var(--webops-border);
	color: var(--webops-text);
	padding: 11px 13px;
	border-radius: 8px;
	font-size: 15.5px;
	font-family: inherit;
	outline: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.webops-field input:hover, .webops-field select:hover, .webops-field textarea:hover { border-color: var(--webops-border-light); }
.webops-field input:focus, .webops-field select:focus, .webops-field textarea:focus {
	border-color: var(--webops-primary);
	box-shadow: 0 0 0 3px var(--webops-primary-soft);
}
.webops-doc-current { font-size: 13.5px; margin-bottom: 6px; }
.webops-doc-current a { color: var(--webops-primary); text-decoration: none; }
.webops-doc-current a:hover { text-decoration: underline; }

/* ---------- Buttons (rellenos, con movimiento) ---------- */
.webops-btn {
	border: none;
	padding: 12px 26px;
	border-radius: 9px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .2px;
	cursor: pointer;
	text-decoration: none;
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	position: relative;
	overflow: hidden;
	transition: transform .15s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease, background-color .2s ease;
	font-family: inherit;
}
.webops-btn-solid {
	background: var(--webops-primary);
	color: #fff;
	box-shadow: 0 1px 2px rgba(28,63,124,0.28);
}
.webops-btn-solid:hover { background: var(--webops-primary-dark); transform: translateY(-2px); box-shadow: 0 10px 20px rgba(28,63,124,0.30); }
.webops-btn-solid:active { transform: translateY(0) scale(.98); }
.webops-btn-outline {
	background: #fff;
	border: 1.5px solid var(--webops-border-light);
	color: var(--webops-text);
}
.webops-btn-outline:hover { border-color: var(--webops-primary); color: var(--webops-primary); transform: translateY(-2px); box-shadow: var(--webops-shadow-sm); }
.webops-btn-outline:active { transform: translateY(0) scale(.98); }
.webops-btn-completadas-pdf { display: inline-flex !important; }
.webops-btn-completadas-pdf:hover, .webops-btn-completadas-pdf:focus, .webops-btn-completadas-pdf:active {
	background: var(--webops-primary) !important; color: #fff !important; border-color: var(--webops-primary) !important;
}

/* Herramientas grid (botones tipo tile) */
.webops-tools-grid { display:grid !important; grid-template-columns: repeat(auto-fit,minmax(min(200px,100%),1fr)) !important; gap: 12px; margin-top: 14px; }
.webops-tool-btn {
	display:flex !important; align-items:center; gap:8px;
	background: var(--webops-card-alt);
	border: 1px solid var(--webops-border);
	color: var(--webops-text);
	padding: 14px 16px;
	border-radius: 10px;
	text-decoration: none;
	font-size: 14.5px;
	font-weight: 600;
	transition: transform .15s ease, border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.webops-tool-btn:hover { border-color: var(--webops-primary); background: var(--webops-primary-soft); transform: translateY(-3px); box-shadow: var(--webops-shadow-sm); }

/* ---------- Alerts ---------- */
.webops-alert { padding: 13px 18px; border-radius: 10px; font-size: 14.5px; margin-bottom: 18px; border: 1px solid var(--webops-border); animation: webopsFadeUp .3s ease both; }
.webops-alert-success { background: var(--webops-green-soft); border-color: var(--webops-green); color: var(--webops-green); }
.webops-alert-warning { background: var(--webops-yellow-soft); border-color: var(--webops-yellow); color: var(--webops-yellow); }

/* ---------- Aviso flotante (toast) ---------- */
.webops-toast-stack { position: fixed; top: 20px; right: 20px; z-index: 900; display: flex; flex-direction: column; gap: 10px; max-width: min(360px, calc(100vw - 32px)); }
.webops-toast {
	display: flex; align-items: flex-start; gap: 10px;
	padding: 14px 16px; border-radius: 12px; color: #fff; font-size: 13.5px; font-weight: 600; line-height: 1.4;
	background: linear-gradient(120deg, #0f5c38, #16874e 60%, #22a366);
	box-shadow: 0 10px 28px rgba(22,135,78,0.4), 0 0 0 1px rgba(255,255,255,0.12) inset;
	transform: translateX(120%); opacity: 0; transition: transform .18s cubic-bezier(.2,.9,.3,1.1), opacity .15s ease;
	position: relative; overflow: hidden;
}
.webops-toast::before {
	content: ""; position: absolute; top: -60%; right: -20%; width: 140px; height: 140px; border-radius: 50%;
	background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 70%); pointer-events: none;
}
.webops-toast.is-visible { transform: translateX(0); opacity: 1; }
.webops-toast.is-leaving { transform: translateX(120%); opacity: 0; }
.webops-toast-error { background: linear-gradient(120deg, #7a1e1e, #d1293d 65%, #e6455a); box-shadow: 0 10px 28px rgba(209,41,61,0.4), 0 0 0 1px rgba(255,255,255,0.12) inset; }
.webops-toast-icon { font-size: 17px; line-height: 1.3; flex-shrink: 0; }
.webops-toast-text { flex: 1; }
.webops-toast-close { background: rgba(255,255,255,0.16); border: none; color: #fff; width: 20px; height: 20px; border-radius: 50%; cursor: pointer; font-size: 14px; line-height: 1; flex-shrink: 0; }
.webops-toast-close:hover { background: rgba(255,255,255,0.3); }
.webops-toast-bar { position: absolute; left: 0; bottom: 0; height: 3px; background: rgba(255,255,255,0.55); animation: webopsToastBar 5s linear forwards; }
@keyframes webopsToastBar { from { width: 100%; } to { width: 0%; } }
@media (max-width: 480px) {
	.webops-toast-stack { top: auto; bottom: 90px; right: 12px; left: 12px; max-width: none; }
	.webops-toast { transform: translateY(120%); }
	.webops-toast.is-visible { transform: translateY(0); }
	.webops-toast.is-leaving { transform: translateY(120%); }
}
.webops-box { max-width: 500px; margin: 40px auto; }

/* ---------- Tags & badges ---------- */
.webops-tag {
	display: inline-flex !important;
	align-items:center;
	background: var(--webops-card-alt);
	border: 1px solid var(--webops-border);
	color: var(--webops-muted);
	font-size: 12.5px;
	padding: 4px 10px;
	border-radius: 6px;
	margin-right: 6px;
	margin-bottom: 4px;
	font-weight: 500;
}
.webops-tag-danger { color: var(--webops-red); border-color: var(--webops-red); }
.webops-tag-warning { color: var(--webops-yellow); border-color: var(--webops-yellow); }

.webops-badge { font-size: 12.5px; font-weight: 700; padding: 4px 11px; border-radius: 6px; text-transform: uppercase; letter-spacing: .4px; }
.webops-prioridad-alta { background: var(--webops-red-soft); color: var(--webops-red); }
.webops-prioridad-media { background: var(--webops-yellow-soft); color: var(--webops-yellow); }
.webops-prioridad-baja { background: var(--webops-green-soft); color: var(--webops-green); }
.webops-estado-pendiente { background: var(--webops-yellow-soft); color: var(--webops-yellow); }
.webops-estado-en_proceso { background: var(--webops-primary-soft); color: var(--webops-primary); }
.webops-estado-completada { background: var(--webops-green-soft); color: var(--webops-green); }

.webops-score-alta { background: var(--webops-green-soft); color: var(--webops-green); }
.webops-score-media { background: var(--webops-yellow-soft); color: var(--webops-yellow); }
.webops-score-baja { background: var(--webops-red-soft); color: var(--webops-red); }

.webops-role-pill {
	display: inline-block;
	background: var(--webops-primary-soft);
	color: var(--webops-primary);
	border: 1px solid var(--webops-primary);
	font-size: 12.5px;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 20px;
	margin-left: 10px;
	vertical-align: middle;
	text-transform: uppercase;
	letter-spacing: .4px;
}

/* Punto pulsante para urgencias */
.webops-pulse-dot {
	display:inline-block; width:8px; height:8px; border-radius:50%;
	background: var(--webops-red);
	margin-right: 6px;
	box-shadow: 0 0 0 0 rgba(209,41,61,0.5);
	animation: webopsPulse 1.8s infinite;
}
@keyframes webopsPulse {
	0%   { box-shadow: 0 0 0 0 rgba(209,41,61,0.45); }
	70%  { box-shadow: 0 0 0 8px rgba(209,41,61,0); }
	100% { box-shadow: 0 0 0 0 rgba(209,41,61,0); }
}

/* Empleados activos ahora (Turnos) */
.webops-activos-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 12px; }
.webops-activo-card { display: flex; align-items: center; gap: 10px; background: var(--webops-card-alt); border: 1px solid var(--webops-border); border-radius: 10px; padding: 12px 14px; font-size: 13.5px; }
.webops-live-dot {
	width: 10px; height: 10px; border-radius: 50%; background: #1fbf6f; flex-shrink: 0;
	box-shadow: 0 0 0 0 rgba(31,191,111,0.55);
	animation: webopsLivePulse 1.6s infinite;
}
@keyframes webopsLivePulse {
	0%   { box-shadow: 0 0 0 0 rgba(31,191,111,0.55); }
	70%  { box-shadow: 0 0 0 9px rgba(31,191,111,0); }
	100% { box-shadow: 0 0 0 0 rgba(31,191,111,0); }
}

/* Tarjeta con acabado tecnológico (borde sutil + brillo esquina) */
.webops-card-tech {
	position: relative; overflow: hidden;
	border: 1px solid rgba(47,95,224,0.25) !important;
	box-shadow: 0 0 0 1px rgba(47,95,224,0.06), 0 10px 26px rgba(28,63,124,0.10), var(--webops-shadow-sm);
}
.webops-card-tech::before {
	content: ""; position: absolute; top: -40%; right: -20%; width: 220px; height: 220px; border-radius: 50%;
	background: radial-gradient(circle, rgba(47,95,224,0.14), transparent 70%);
	pointer-events: none;
}

/* ---------- Checklist ---------- */
.webops-checklist { display:grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px 20px; margin-bottom: 10px; }
.webops-check-row { display:flex !important; justify-content:space-between; align-items:center; background:var(--webops-card-alt); border:1px solid var(--webops-border); border-radius:8px; padding:11px 14px; transition: border-color .15s ease; }
.webops-check-row:hover { border-color: var(--webops-border-light); }
.webops-check-row input { width: 60px; background: #fff; border: 1px solid var(--webops-border); color: var(--webops-text); border-radius:6px; padding:6px; text-align:center; font-family: 'IBM Plex Mono', monospace; font-weight:600; }

/* ---------- Eval list ---------- */
.webops-eval-list { display:flex !important; flex-direction:column; gap:12px; }
.webops-eval-item { display:flex !important; align-items:center; gap:16px; background:var(--webops-card-alt); border:1px solid var(--webops-border); border-radius:10px; padding:14px 18px; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.webops-eval-item:hover { border-color: var(--webops-border-light); transform: translateX(2px); box-shadow: var(--webops-shadow-sm); }
.webops-eval-score { font-family:'IBM Plex Mono', monospace; font-size:19.5px; font-weight:700; width:56px; height:56px; border-radius:50%; display:flex !important; align-items:center; justify-content:center; flex-shrink:0; }
.webops-eval-info { display:flex !important; flex-direction:column; gap:4px; }
.webops-link-pdf { color: var(--webops-primary); font-size:13.5px; text-decoration:none; font-weight:600; }
.webops-link-pdf:hover { text-decoration: underline; }

/* ---------- Table ---------- */
.webops-table { width:100%; border-collapse: collapse; margin-top: 10px; }
.webops-table th, .webops-table td { text-align:left; padding:12px 14px; border-bottom:1px solid var(--webops-border); font-size:14.5px; }
.webops-table th { color: var(--webops-muted); text-transform: uppercase; font-size:12.5px; letter-spacing:.5px; font-weight:700; background: var(--webops-card-alt); }
.webops-table tr { transition: background-color .15s ease; }
.webops-table tbody tr:hover { background: var(--webops-card-alt); }
.webops-row-top { background: var(--webops-primary-soft); }
.webops-row-top:hover { background: var(--webops-primary-soft) !important; }

/* ---------- Tasks ---------- */
.webops-task-list { display:flex !important; flex-direction:column; gap:10px; max-height: 620px; overflow-y: auto; overflow-x: hidden; padding-right: 6px; }
.webops-task-list-compact { max-height: 380px; }
.webops-task-list::-webkit-scrollbar { width: 6px; }
.webops-task-list::-webkit-scrollbar-thumb { background: var(--webops-border-light); border-radius: 6px; }
.webops-task-item { display:flex !important; justify-content:space-between; align-items:flex-start; gap:14px; background:var(--webops-card-alt); border:1px solid var(--webops-border); border-left:4px solid var(--webops-border); border-radius:10px; padding:14px 18px; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; flex-wrap: wrap; text-align: left; }
.webops-task-item:hover { transform: translateX(2px); border-color: var(--webops-border-light); box-shadow: var(--webops-shadow-sm); }
.webops-task-item.webops-priority-alta { border-left-color: var(--webops-red); }
.webops-task-item.webops-priority-media { border-left-color: var(--webops-yellow); }
.webops-task-item.webops-priority-baja { border-left-color: var(--webops-green); }
.webops-task-main { flex: 1; min-width: 220px; text-align: left; }
.webops-task-main p { margin: 4px 0 8px; font-size: 14.5px; color: var(--webops-muted); text-align: left; }
.webops-task-meta span { margin-right: 6px; }
.webops-task-status { flex-shrink: 0; margin-top: 2px; }
.webops-task-status select { background:#fff; color: var(--webops-text); border:1px solid var(--webops-border); border-radius:6px; padding:8px 10px; font-family: inherit; font-size: 14px; cursor:pointer; }
.webops-task-item.webops-filtered-out { display: none !important; }

.webops-global-search { display: flex !important; gap: 8px; margin-bottom: 18px; }
.webops-global-search input { flex: 1; padding: 11px 16px; border-radius: 10px; border: 1px solid var(--webops-border); font-family: inherit; font-size: 14px; background: #fff; }
.webops-global-search input:focus { outline: none; border-color: var(--webops-primary); box-shadow: 0 0 0 3px var(--webops-primary-soft); }
.webops-collapsible summary { cursor: pointer; list-style: none; }
.webops-collapsible summary::-webkit-details-marker { display: none; }
.webops-collapsible summary::before { content: "▸ "; display: inline-block; transition: transform .15s ease; }
.webops-collapsible[open] summary::before { transform: rotate(90deg); }
.webops-collapsible summary:hover { color: var(--webops-primary); }
.webops-materiales-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.webops-material-btn {
	display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 999px;
	background: var(--webops-primary-soft); color: var(--webops-primary); border: 1px solid rgba(47,95,224,0.25);
	font-weight: 600; font-size: 13.5px; text-decoration: none; transition: transform .12s ease, box-shadow .12s ease;
}
.webops-material-btn:hover { transform: translateY(-2px); box-shadow: var(--webops-shadow-sm); background: #fff; }
.webops-material-fila { display: flex !important; gap: 10px; align-items: flex-end; margin-bottom: 12px; }
.webops-material-fila .webops-field { flex: 1; min-width: 0; }
.webops-material-fila .webops-quitar-material { flex-shrink: 0; color: var(--webops-red); border-color: var(--webops-red); }
@media (max-width: 700px) {
	.webops-material-fila { flex-direction: column; align-items: stretch; }
	.webops-material-fila .webops-quitar-material { width: 100%; }
}
.webops-tareas-stats { display: flex !important; flex-wrap: wrap; gap: 8px; }
.webops-tareas-stat {
	display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
	font-size: 12px; font-weight: 700; background: var(--webops-card-alt); border: 1px solid var(--webops-border); color: var(--webops-text);
	font-family: 'IBM Plex Mono', monospace;
}
.webops-tareas-stat-total { background: var(--webops-primary-soft); color: var(--webops-primary); border-color: rgba(47,95,224,0.25); }
.webops-stat-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.webops-tareas-stat-alta .webops-stat-dot { background: var(--webops-red); animation: webopsStatPulseRed 2s ease-in-out infinite; }
.webops-tareas-stat-media .webops-stat-dot { background: var(--webops-yellow); animation: webopsStatPulseYellow 2s ease-in-out infinite; }
.webops-tareas-stat-baja .webops-stat-dot { background: var(--webops-green); animation: webopsStatPulseGreen 2s ease-in-out infinite; }
@keyframes webopsStatPulseRed { 0%,100% { box-shadow: 0 0 0 0 rgba(209,41,61,0.5); } 50% { box-shadow: 0 0 0 4px rgba(209,41,61,0); } }
@keyframes webopsStatPulseYellow { 0%,100% { box-shadow: 0 0 0 0 rgba(179,102,10,0.5); } 50% { box-shadow: 0 0 0 4px rgba(179,102,10,0); } }
@keyframes webopsStatPulseGreen { 0%,100% { box-shadow: 0 0 0 0 rgba(22,135,78,0.5); } 50% { box-shadow: 0 0 0 4px rgba(22,135,78,0); } }
.webops-table-scroll-10 { max-height: 640px; overflow-y: auto; overflow-x: hidden; border-radius: 8px; }
.webops-table-scroll-10::-webkit-scrollbar { width: 6px; }
.webops-table-scroll-10::-webkit-scrollbar-thumb { background: var(--webops-border-light); border-radius: 6px; }
.webops-table-scroll-10 thead th { position: sticky; top: 0; background: var(--webops-card-alt); z-index: 2; }
/* ---------- Lightbox de fotos ---------- */
/* ---------- Buscador de empleado con lista desplegable (reemplaza el datalist nativo) ---------- */
.webops-evento-titulo {
	display: inline-block; font-size: 17px; font-weight: 800; color: var(--webops-primary);
	letter-spacing: -0.3px; padding-bottom: 2px; border-bottom: 2px solid rgba(47,95,224,0.25);
}
.webops-emp-buscador { position: relative; }
.webops-emp-buscador-lista {
	display: none; position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; right: 0;
	max-height: 240px; overflow-y: auto; background: #fff; border: 1.5px solid var(--webops-primary);
	border-radius: 10px; box-shadow: var(--webops-shadow-lg); padding: 6px;
}
.webops-emp-buscador-lista.is-abierta { display: block; }
.webops-emp-buscador-item {
	padding: 9px 12px; border-radius: 7px; cursor: pointer; font-size: 13.5px; color: var(--webops-text);
	transition: background .12s ease;
}
.webops-emp-buscador-item:hover, .webops-emp-buscador-item.is-activa { background: var(--webops-primary-soft); }
.webops-emp-buscador-vacio { padding: 10px 12px; font-size: 13px; color: var(--webops-muted); }

.webops-lightbox-overlay {
	position: fixed; inset: 0; background: rgba(10,15,25,0.88); z-index: 9999;
	display: flex; align-items: center; justify-content: center; padding: 30px;
	opacity: 0; transition: opacity .2s ease; cursor: zoom-out;
}
.webops-lightbox-overlay.is-visible { opacity: 1; }
.webops-lightbox-overlay img { max-width: 92vw; max-height: 88vh; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.webops-lightbox-overlay-cuadrado img {
	width: min(80vw, 80vh); height: min(80vw, 80vh); max-width: 560px; max-height: 560px;
	object-fit: cover; border-radius: 12px;
}
.webops-lightbox-close { position: absolute; top: 20px; right: 28px; color: #fff; font-size: 34px; line-height: 1; cursor: pointer; }
.webops-thumb-mini { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--webops-border); cursor: zoom-in; transition: transform .15s ease; }
.webops-thumb-mini:hover { transform: scale(1.06); }
.webops-thumb-mas { position: absolute; bottom: 2px; right: 2px; background: rgba(10,15,25,0.78); color: #fff; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 6px; }
/* ---------- Postulación a eventos (Candidatos) ---------- */
.webops-eventos-postular-bloque {
	background: linear-gradient(135deg, rgba(47,95,224,0.06), rgba(0,194,209,0.08));
	border: 1.5px solid rgba(47,95,224,0.35);
	border-radius: 12px; padding: 16px; margin-top: 6px;
	position: relative; overflow: hidden;
}
.webops-eventos-postular-header { display: flex !important; flex-direction: column; gap: 6px; }
.webops-eventos-postular-header label { text-transform: none; letter-spacing: 0; font-weight: 700; font-size: 15px; color: var(--webops-text); }
.webops-eventos-postular-badge {
	display: inline-flex; align-items: center; gap: 8px; width: fit-content;
	color: var(--webops-text); font-weight: 700; font-size: 12px;
	padding: 4px 12px; border-radius: 999px; background: var(--webops-card-alt); border: 1px solid var(--webops-border);
}
.webops-eventos-postular-badge::before {
	content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--webops-green); flex-shrink: 0;
	animation: webopsGreetingDot 2s ease-in-out infinite;
}
.webops-evento-postular-card {
	display: flex !important; align-items: flex-start; gap: 10px;
	text-transform: none; letter-spacing: 0; font-weight: 500;
	background: #fff; border: 1.5px solid var(--webops-border); border-radius: 10px;
	padding: 12px 14px; cursor: pointer; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.webops-evento-postular-card:hover { transform: translateY(-2px); box-shadow: var(--webops-shadow-sm); border-color: var(--webops-primary); }
.webops-evento-postular-card input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.webops-evento-postular-check {
	flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; border-radius: 6px;
	border: 2px solid var(--webops-primary); position: relative; transition: background .15s ease;
}
.webops-evento-postular-card input:checked ~ .webops-evento-postular-check { background: var(--webops-primary); }
.webops-evento-postular-card input:checked ~ .webops-evento-postular-check::after {
	content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px;
	border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.webops-evento-postular-card:has(input:checked) { border-color: var(--webops-primary); background: var(--webops-primary-soft); }
/* ---------- Comentarios ---------- */
.webops-comments-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.webops-comments-list li { background: var(--webops-card-alt); border: 1px solid var(--webops-border); border-radius: 8px; padding: 10px 14px; font-size: 13.5px; }
.webops-comments-list li p { margin: 4px 0 0; color: var(--webops-text); }
.webops-comment-form { display: flex; gap: 8px; align-items: flex-start; }
.webops-comment-form textarea { flex: 1; border: 1px solid var(--webops-border); border-radius: 8px; padding: 8px 10px; font-family: inherit; font-size: 13.5px; resize: vertical; }
.webops-comment-form button { flex-shrink: 0; margin-top: 2px; }
.webops-recordatorio-item {
	display: flex !important; align-items: flex-start; gap: 12px; text-align: left;
	border-radius: 10px; padding: 14px 16px; transition: transform .15s ease, box-shadow .15s ease;
}
.webops-recordatorio-item:hover { transform: translateX(2px); }
.webops-recordatorio-check { padding-top: 3px; flex-shrink: 0; }
.webops-recordatorio-check input { width: 17px; height: 17px; cursor: pointer; accent-color: var(--webops-primary); }
.webops-recordatorio-abierto {
	background: linear-gradient(180deg, rgba(179,102,10,0.07), var(--webops-card-alt) 70%);
	border: 1px solid rgba(179,102,10,0.28); border-left: 4px solid var(--webops-yellow);
	box-shadow: 0 0 0 1px rgba(179,102,10,0.05);
}
.webops-recordatorio-cerrado {
	background: var(--webops-card-alt); border: 1px solid var(--webops-border); border-left: 4px solid #8fae9c;
	opacity: .72;
}
.webops-recordatorio-badge {
	flex-shrink: 0; align-self: flex-start; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px;
	padding: 5px 12px; border-radius: 999px; margin-top: 2px;
}
.webops-recordatorio-abierto .webops-recordatorio-badge { background: var(--webops-yellow-soft); color: var(--webops-yellow); border: 1px solid rgba(179,102,10,0.3); }
.webops-recordatorio-cerrado .webops-recordatorio-badge { background: var(--webops-green-soft); color: var(--webops-green); border: 1px solid rgba(22,135,78,0.3); }

/* ---------- Filtros ---------- */
.webops-filters { display:flex !important; gap:10px; flex-wrap: wrap; margin-bottom: 18px; }
.webops-filter {
	background: #fff; border:1px solid var(--webops-border); color: var(--webops-text);
	padding: 9px 12px; border-radius: 8px; font-size: 14px; font-family: inherit; cursor:pointer;
}
.webops-filter:hover { border-color: var(--webops-primary); }

/* ---------- Kanban ---------- */
.webops-kanban { display:grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 18px; }
.webops-kanban-col { background: var(--webops-card-alt); border:1px solid var(--webops-border); border-radius: 14px; padding: 16px; min-height: 200px; }
.webops-kanban-title { font-size:13px; text-transform:uppercase; letter-spacing:.6px; color:var(--webops-muted); font-weight:700; display:flex !important; justify-content:space-between; margin: 0 0 14px; }
.webops-count { background: var(--webops-border); color: var(--webops-text); border-radius: 20px; padding: 2px 10px; font-size: 12.5px; font-family:'IBM Plex Mono',monospace; }
.webops-kanban-cards { display:flex !important; flex-direction:column; gap: 12px; }
.webops-kanban-card { background: #fff; border: 1px solid var(--webops-border); border-radius: 10px; padding: 14px; border-top: 3px solid var(--webops-border); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; box-shadow: var(--webops-shadow-sm); }
.webops-kanban-card:hover { transform: translateY(-4px); box-shadow: var(--webops-shadow-lg); border-color: var(--webops-border-light); }
.webops-kanban-card.webops-priority-alta { border-top-color: var(--webops-red); }
.webops-kanban-card.webops-priority-media { border-top-color: var(--webops-yellow); }
.webops-kanban-card.webops-priority-baja { border-top-color: var(--webops-green); }
.webops-kanban-card.webops-filtered-out { display: none !important; }
.webops-kanban-card-top { display:flex !important; justify-content:space-between; margin-bottom: 8px; flex-wrap: wrap; gap:4px; }
.webops-kanban-card p { font-size: 13.5px; color: var(--webops-muted); margin: 6px 0 10px; }
.webops-kanban-card-footer { display:flex !important; gap:6px; margin-bottom: 10px; flex-wrap:wrap; }
.webops-ficha-estado-select { width: 100%; background:var(--webops-card-alt); color: var(--webops-text); border:1px solid var(--webops-border); border-radius:6px; padding:8px; font-size:13.5px; font-family: inherit; cursor:pointer; }

/* ---------- Barra de marca corporativa ---------- */
.webops-brandbar {
	display: flex !important; align-items: center; gap: 10px;
	font-size: 13.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
	color: var(--webops-muted); margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--webops-border);
}
.webops-brandbar img { max-height: 26px; max-width: 120px; object-fit: contain; }

/* ---------- Dashboard header ---------- */
.webops-dash-header { margin-bottom: 24px; }
.webops-dash-header-toprow { display:flex !important; justify-content:space-between; align-items:center; gap: 16px; flex-wrap: nowrap; }
.webops-dash-header-actions { display: flex !important; gap: 10px; flex-shrink: 0; }
.webops-dash-header-bottomrow { display:flex !important; justify-content:space-between; align-items:center; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
.webops-eyebrow { font-size: 15px; text-transform: uppercase; letter-spacing: 2.4px; color: var(--webops-primary); font-weight: 800; }
.webops-dash-title { font-size: clamp(24px, 3vw, 32px); margin: 4px 0 4px; color: var(--webops-text); font-weight: 800; letter-spacing: -0.5px; }
.webops-dash-sub { color: var(--webops-muted); margin: 0; font-size: 14.5px; }
.webops-dash-greeting {
	display: flex !important; align-items: center; gap: 10px; margin: 6px 0 0; flex-wrap: wrap;
	font-size: clamp(22px, 3vw, 30px); font-weight: 800; letter-spacing: -0.5px; color: var(--webops-text);
}
.webops-greeting-dot {
	width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
	background: var(--webops-green);
	box-shadow: 0 0 0 0 rgba(22,135,78,0.55);
	animation: webopsGreetingDot 2s ease-in-out infinite;
}
@keyframes webopsGreetingDot {
	0%, 100% { box-shadow: 0 0 0 0 rgba(22,135,78,0.55); }
	50%      { box-shadow: 0 0 0 7px rgba(22,135,78,0); }
}
.webops-greeting-nombre {
	background: linear-gradient(90deg, var(--webops-primary) 0%, #00c2d1 25%, var(--webops-primary) 50%, #00c2d1 75%, var(--webops-primary) 100%);
	background-size: 250% auto;
	-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--webops-primary);
	animation: webopsGreetingShine 5s linear infinite;
}
@keyframes webopsGreetingShine {
	0%   { background-position: 0% center; }
	100% { background-position: -250% center; }
}
.webops-logout-btn { flex-shrink: 0; white-space: nowrap; }

/* Reloj en vivo */
.webops-live-clock {
	display: flex !important; align-items: center; gap: 10px;
	background: var(--webops-card); border: 1px solid var(--webops-border); border-radius: 10px;
	padding: 10px 16px; box-shadow: var(--webops-shadow-sm);
}
.webops-live-clock .webops-clock-dot { width:8px; height:8px; border-radius:50%; background: var(--webops-green); animation: webopsClockBlink 2s infinite; flex-shrink:0; }
@keyframes webopsClockBlink { 0%,100% { opacity:1; } 50% { opacity:.35; } }
.webops-live-clock-time { font-family:'IBM Plex Mono', monospace; font-size: 19.5px; font-weight: 700; color: var(--webops-text); letter-spacing: .5px; }
.webops-live-clock-date { font-size: 12.5px; color: var(--webops-muted); text-transform: capitalize; }
.webops-live-clock-text { display:flex !important; flex-direction:column; line-height:1.3; }

/* ---------- KPIs ---------- */
.webops-kpi-grid { display:grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 16px; margin-bottom: 28px; }
.webops-kpi-online .webops-kpi-value { color: #16874e; }
.webops-kpi-online { border-top-color: #16874e; }

/* Panel desplegable de usuarios en línea (la tarjeta de usuarios en línea sigue siendo interactiva) */
.webops-kpi-online { position: relative; }
.webops-kpi-online-panel {
	display: none; position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
	background: #fff; border: 1px solid var(--webops-border); border-radius: 10px; box-shadow: var(--webops-shadow-lg);
	padding: 12px 14px; min-width: 220px; max-width: 280px; z-index: 60; text-align: left; cursor: default;
}
.webops-kpi-online.is-open .webops-kpi-online-panel { display: block; }
.webops-kpi-online-panel ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.webops-kpi-online-panel li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--webops-text); font-weight: 500; }
.webops-kpi-online-panel li span { color: var(--webops-muted); font-weight: 400; }
.webops-kpi-online-panel .webops-live-dot { width: 8px; height: 8px; }
.webops-kpi {
	position: relative; overflow: hidden;
	background: linear-gradient(180deg, var(--webops-card), var(--webops-card-alt) 180%);
	border:1px solid var(--webops-border); border-radius: 14px; padding: clamp(18px,2.2vw,22px);
	text-align:center; transition: transform .18s ease, box-shadow .18s ease;
	border-top: 3px solid var(--webops-primary);
	box-shadow: 0 0 0 1px rgba(47,95,224,0.05), var(--webops-shadow-sm);
}
.webops-kpi::after {
	content: ""; position: absolute; top: -50%; right: -30%; width: 140px; height: 140px; border-radius: 50%;
	background: radial-gradient(circle, rgba(47,95,224,0.10), transparent 70%);
	pointer-events: none; transition: opacity .2s ease;
}
.webops-kpi:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(47,95,224,0.12), 0 14px 28px rgba(28,63,124,0.18); }
.webops-kpi-value { display:block !important; font-size: clamp(26px, 3vw, 34px); font-weight: 800; color: var(--webops-text); font-family: 'IBM Plex Mono', monospace; letter-spacing: -1px; }
.webops-kpi-label { font-size: 12.5px; color: var(--webops-muted); text-transform:uppercase; letter-spacing:.7px; font-weight:700; display: flex; align-items: center; justify-content: center; gap: 6px; }
.webops-kpi-alert { border-top-color: var(--webops-red); animation: webopsKpiAlertGlow 2.4s ease-in-out infinite; }
.webops-kpi-alert::after { background: radial-gradient(circle, rgba(209,41,61,0.14), transparent 70%); }
.webops-kpi-alert .webops-kpi-value { color: var(--webops-red); }
@keyframes webopsKpiAlertGlow {
	0%, 100% { box-shadow: 0 0 0 1px rgba(209,41,61,0.08), var(--webops-shadow-sm); }
	50%      { box-shadow: 0 0 0 1px rgba(209,41,61,0.22), 0 0 18px rgba(209,41,61,0.18); }
}

/* Incidencias a resolver: color de urgencia (ámbar) con punto indicador */
.webops-kpi-resolver { border-top-color: var(--webops-yellow); }
.webops-kpi-resolver::after { background: radial-gradient(circle, rgba(179,102,10,0.14), transparent 70%); }
.webops-kpi-resolver .webops-kpi-value { color: var(--webops-yellow); }
.webops-kpi-dot {
	display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--webops-yellow);
	box-shadow: 0 0 0 0 rgba(179,102,10,0.5);
	animation: webopsResolverPulse 2.2s infinite;
}
@keyframes webopsResolverPulse {
	0%   { box-shadow: 0 0 0 0 rgba(179,102,10,0.45); }
	70%  { box-shadow: 0 0 0 7px rgba(179,102,10,0); }
	100% { box-shadow: 0 0 0 0 rgba(179,102,10,0); }
}

/* ---------- Tabs ---------- */
.webops-tabs {
	position: relative; display:flex !important; flex-wrap: wrap; gap: 4px; margin-bottom: 24px; overflow: visible;
	background: linear-gradient(120deg, #1c3f7c 0%, #2f5fe0 55%, #3f6ff0 100%);
	border: 1px solid #1a3568; border-radius: 12px; padding: 7px;
	box-shadow: 0 8px 22px rgba(28,63,124,0.30), inset 0 1px 0 rgba(255,255,255,0.12);
}
.webops-tab-btn {
	background: transparent; border: none; color: #ffffff; opacity: .8; font-family: inherit;
	font-size: 14.5px; font-weight: 700; padding: 11px 18px; cursor: pointer; white-space: nowrap;
	transition: color .15s ease, background-color .15s ease, transform .15s ease, box-shadow .15s ease, opacity .15s ease;
	position: relative; border-radius: 8px; letter-spacing: .2px;
	display: inline-flex; align-items: center; gap: 6px;
}
.webops-tab-btn:hover { opacity: 1; color: #0a0a0a; background: #ffffff; box-shadow: 0 4px 14px rgba(0,0,0,0.25); transform: translateY(-1px); }
.webops-tab-btn.is-active {
	color: #0a0a0a; opacity: 1; background: #ffffff;
	box-shadow: 0 0 0 1px rgba(0,0,0,0.06) inset, 0 4px 16px rgba(0,0,0,0.22), 0 0 16px rgba(255,255,255,0.55);
	animation: webopsTabGlow 2.6s ease-in-out infinite;
}
@keyframes webopsTabGlow {
	0%, 100% { box-shadow: 0 0 0 1px rgba(0,0,0,0.06) inset, 0 4px 16px rgba(0,0,0,0.22), 0 0 16px rgba(255,255,255,0.55); }
	50%      { box-shadow: 0 0 0 1px rgba(0,0,0,0.1) inset, 0 4px 18px rgba(0,0,0,0.28), 0 0 24px rgba(255,255,255,0.8); }
}
.webops-tab-btn.is-active:hover { color: #0a0a0a; background: #f2f2f2; }
.webops-card-alerta {
	border: 1px solid rgba(214,69,69,0.35) !important;
	background: linear-gradient(180deg, rgba(214,69,69,0.06), var(--webops-card) 60%) !important;
	box-shadow: 0 0 0 1px rgba(214,69,69,0.08), var(--webops-shadow-sm);
	border-radius: var(--webops-radius) !important;
	overflow: hidden;
}
.webops-tab-indicator { display: none !important; }
.webops-tab-home {
	position: relative;
	padding: 9px 18px !important;
	background: linear-gradient(135deg, #ffffff 0%, #e8edf9 55%, #ffffff 130%) !important;
	background-size: 200% 200% !important;
	opacity: 1 !important; color: var(--webops-primary) !important;
	border: 1px solid rgba(255,255,255,0.8) !important; margin-right: 6px;
	box-shadow: 0 4px 14px rgba(0,0,0,0.2), 0 0 10px rgba(47,95,224,0.25);
	animation: webopsHomeGradient 6s ease infinite;
}
@keyframes webopsHomeGradient {
	0%, 100% { background-position: 0% 50%; }
	50%      { background-position: 100% 50%; }
}
.webops-tab-home::after {
	content: ""; position: absolute; inset: -4px; border-radius: 999px;
	border: 1.5px solid rgba(47,95,224,0.55);
	animation: webopsHomePing 2.4s cubic-bezier(.2,.6,.4,1) infinite;
	pointer-events: none;
}
@keyframes webopsHomePing {
	0%   { transform: scale(0.94); opacity: 0.9; }
	70%  { transform: scale(1.22); opacity: 0; }
	100% { transform: scale(1.22); opacity: 0; }
}
.webops-tab-home:hover { color: var(--webops-primary-dark) !important; box-shadow: 0 4px 16px rgba(0,0,0,0.22), 0 0 18px rgba(47,95,224,0.4); }
.webops-tab-home.is-active { color: var(--webops-primary) !important; }
.webops-tab-home-icon { line-height: 1; display: inline-flex; }
.webops-tab-home-icon svg { display: block; color: inherit; }
.webops-tab-panel { display: none !important; animation: webopsFadeUp .35s ease both; }
.webops-tab-panel.is-active { display: block !important; }

/* ---------- Dashboard grid ---------- */
.webops-dash-grid { display:grid !important; grid-template-columns: minmax(0,2fr) minmax(0,1fr) !important; gap: 24px; align-items:start; }
.webops-mini-list { list-style:none; margin:0; padding:0; display:flex !important; flex-direction:column; gap:10px; }
.webops-mini-list li { font-size: 14.5px; border-bottom: 1px solid var(--webops-border); padding-bottom: 8px; }

.webops-accesos-grid { display:grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px; }
.webops-acceso { display:flex !important; flex-direction:column; align-items:center; gap:8px; background:var(--webops-card-alt); border:1px solid var(--webops-border); border-radius:10px; padding:20px 12px; color: var(--webops-text); text-decoration:none; font-size:13.5px; font-weight:600; text-align:center; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.webops-acceso-icon { font-size: 26px; line-height:1; }
.webops-acceso-disabled { opacity: .45; cursor: default; }
.webops-acceso-disabled:hover { transform: none; box-shadow: none; border-color: var(--webops-border); }
.webops-acceso:hover { border-color: var(--webops-primary); transform: translateY(-3px); box-shadow: var(--webops-shadow-sm); }

/* Botón "Nuevo recordatorio" en la fila de Mi perfil / Cerrar sesión */
.webops-btn-recordatorio { position: relative; display: inline-flex !important; align-items: center; gap: 8px; }
.webops-recordatorio-btn-dot {
	width: 8px; height: 8px; border-radius: 50%; background: var(--webops-green); flex-shrink: 0;
	box-shadow: 0 0 0 0 rgba(22,135,78,0.55);
	animation: webopsRecordatorioBtnPulse 1.8s ease-in-out infinite;
}
@keyframes webopsRecordatorioBtnPulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(22,135,78,0.55); }
	50%      { box-shadow: 0 0 0 5px rgba(22,135,78,0); }
}

/* ---------- Actividad reciente ---------- */
.webops-activity-list { list-style:none; margin:0; padding:0; display:flex !important; flex-direction:column; }
.webops-activity-scroll { max-height: 380px; overflow-y: auto; overflow-x: hidden; padding-right: 16px; }
.webops-activity-scroll-compact { max-height: 260px; }
.webops-activity-scroll::-webkit-scrollbar { width: 6px; }
.webops-activity-scroll::-webkit-scrollbar-thumb { background: var(--webops-border-light); border-radius: 6px; }
.webops-activity-list li {
	display:flex !important; align-items:flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--webops-border);
	font-size: 14.5px; flex-wrap: wrap;
}
.webops-activity-list li:last-child { border-bottom: none; }
.webops-activity-icon { width: 30px; height:30px; display:flex !important; align-items:center; justify-content:center; gap:3px; background: var(--webops-card-alt); border: 1px solid var(--webops-border); border-radius: 8px; flex-shrink:0; margin-top: 2px; position: relative; }
.webops-activity-text { flex: 1; min-width: 0; color: var(--webops-text); display: flex; flex-direction: column; gap: 3px; overflow-wrap: anywhere; word-break: break-word; }
.webops-activity-meta { font-size: 12px; color: var(--webops-muted); font-weight: 500; overflow-wrap: anywhere; }
.webops-activity-actions { margin-top: 2px; }
.webops-activity-time {
	display: inline-block; color: var(--webops-primary); font-size: 11px; font-weight: 700; white-space: nowrap;
	font-family:'IBM Plex Mono',monospace; margin-left: 4px; vertical-align: middle;
	background: var(--webops-primary-soft); border: 1px solid rgba(47,95,224,0.18);
	border-radius: 999px; padding: 2px 9px;
}
.webops-activity-urgente { background: rgba(214,69,69,0.06); border-radius: 8px; border-left: 3px solid var(--webops-red); padding: 4px 8px; margin: 2px 0; }
.webops-activity-icon .webops-pulse-dot { position: absolute; top: -3px; right: -3px; margin: 0; }

/* ---------- Login ---------- */
.webops-login-wrap { display:flex !important; justify-content:center; margin-top: 60px; }
.webops-login-card { max-width: 420px; width: 100%; text-align:center; box-shadow: var(--webops-shadow-lg); }
.webops-mostrar-pass { display: flex !important; align-items: center; gap: 7px; font-size: 12.5px; color: var(--webops-muted); margin: 0; cursor: pointer; font-weight: 500; }
.webops-mostrar-pass input { width: 15px; height: 15px; cursor: pointer; accent-color: var(--webops-primary); }
.webops-login-badge {
	display:inline-block; background: var(--webops-primary-soft); color: var(--webops-primary); border:1px solid var(--webops-primary);
	font-size: 12px; font-weight: 700; letter-spacing: .3px; padding: 6px 16px; border-radius: 20px; margin-bottom: 16px; text-align: center;
}
.webops-login-card .webops-title, .webops-login-card .webops-subtitle { text-align:center; }
.webops-login-card p.login-submit { margin-top: 10px; text-align:center; }
.webops-login-card input[type=text], .webops-login-card input[type=password] {
	width: 100%; background:#fff; border:1px solid var(--webops-border); color: var(--webops-text); padding:12px 14px; border-radius:8px; margin-bottom:12px; box-sizing: border-box !important; font-family:inherit;
}
.webops-login-card input[type=text]:focus, .webops-login-card input[type=password]:focus { outline:none; border-color: var(--webops-primary); box-shadow: 0 0 0 3px var(--webops-primary-soft); }
.webops-login-card input[type=submit] {
	background: var(--webops-primary); border:none; color:#fff; padding:13px 26px; border-radius:9px; font-weight:700; cursor:pointer; width: 100%; font-family: inherit; transition: background-color .15s ease, transform .15s ease;
}
.webops-login-card input[type=submit]:hover { background: var(--webops-primary-dark); transform: translateY(-2px); }

/* ---------- Botones adicionales ---------- */
.webops-btn-sm { padding: 8px 16px; font-size: 13.5px; }
.webops-btn-lg { padding: 16px 34px; font-size: 16.5px; width: 100%; justify-content: center; }
.webops-btn:disabled { opacity: .5; cursor: not-allowed; transform:none !important; }

.webops-btn-dark {
	background: #14181f;
	color: #ffffff;
	box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.webops-btn-dark:hover { background: #2c333f; transform: translateY(-2px); box-shadow: 0 10px 20px rgba(20,24,31,0.28); }
.webops-btn-dark:active { transform: translateY(0) scale(.98); }
.webops-btn-dot {
	width: 8px; height: 8px; border-radius: 50%; background: #22c55e; display:inline-block;
	box-shadow: 0 0 0 0 rgba(34,197,94,0.6);
	animation: webopsPulseGreen 1.6s infinite;
}
@keyframes webopsPulseGreen {
	0%   { box-shadow: 0 0 0 0 rgba(34,197,94,0.55); }
	70%  { box-shadow: 0 0 0 7px rgba(34,197,94,0); }
	100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

/* ---------- Foto de perfil ---------- */
.webops-profile-photo-row { display:flex !important; align-items:center; gap:20px; margin-bottom: 24px; flex-wrap: wrap; }
.webops-profile-photo { width: 96px; height: 96px; border-radius: 14px; overflow:hidden; border:2px solid var(--webops-border-light); flex-shrink:0; background: var(--webops-card-alt); box-shadow: var(--webops-shadow-sm); }
.webops-profile-photo a { display:block !important; width:100%; height:100%; cursor: zoom-in; }
.webops-profile-photo a:hover img { transform: scale(1.06); }
.webops-profile-photo img { width:100%; height:100%; object-fit: cover; display:block !important; transition: transform .2s ease; }
.webops-profile-photo-placeholder { width:100%; height:100%; display:flex !important; align-items:center; justify-content:center; font-size: 38px; color: var(--webops-muted); }
.webops-profile-photo-upload label { font-size: 12.5px; color: var(--webops-muted); text-transform:uppercase; letter-spacing:.6px; font-weight:600; display:block !important; margin-bottom:8px; }
.webops-profile-photo-upload form { display:flex !important; gap:8px; align-items:center; flex-wrap: wrap; }
.webops-profile-photo-upload input[type=file] { font-size: 13.5px; color: var(--webops-muted); }

/* ---------- Documentos con vista previa grande ---------- */
.webops-doc-preview { margin-bottom: 10px; }
.webops-doc-thumb-link { display:inline-block; }
.webops-doc-thumb { max-width: 100%; max-height: 220px; border-radius: 10px; border: 1px solid var(--webops-border); display:block !important; transition: transform .2s ease, box-shadow .2s ease; }
.webops-doc-thumb:hover { transform: scale(1.02); border-color: var(--webops-primary); box-shadow: var(--webops-shadow-md); }

/* ---------- Foto en tarjetas de la bandeja ---------- */
.webops-kanban-photo-link { display:block !important; margin-bottom: 10px; }
.webops-kanban-photo { width: 100%; max-height: 200px; object-fit: cover; border-radius: 8px; display:block !important; transition: transform .2s ease; }
.webops-kanban-photo:hover { transform: scale(1.015); }
.webops-kanban-galeria { display: flex !important; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.webops-kanban-galeria .webops-kanban-photo-link { margin-bottom: 0; flex: 1 1 calc(50% - 3px); min-width: 90px; }
.webops-kanban-galeria .webops-kanban-photo { max-height: 110px; }
.webops-kanban-galeria .webops-kanban-photo-link:only-child { flex-basis: 100%; }
.webops-kanban-galeria .webops-kanban-photo-link:only-child .webops-kanban-photo { max-height: 200px; }

/* ---------- Asistencia ---------- */
.webops-attendance-card { text-align:center; max-width: 420px; margin: 0 auto; }
.webops-attendance-status { display:flex !important; justify-content:center; gap: 30px; margin: 18px 0 24px; }
.webops-attendance-status div { display:flex !important; flex-direction:column; align-items:center; gap:6px; }
.webops-attendance-status strong { font-family:'IBM Plex Mono',monospace; font-size:22px; color: var(--webops-text); }
.webops-attendance-actions { display: flex !important; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }

.webops-row-actions { display: flex; gap: 14px; margin-top: 10px; }
.webops-row-actions a { font-size: 12px; font-weight: 600; color: var(--webops-primary); text-decoration: none; }
.webops-row-actions a:last-child { color: var(--webops-red); }
.webops-row-actions a:hover { text-decoration: underline; }
.webops-row-actions-lg { margin-top: 0; gap: 10px; }
.webops-row-actions-lg a {
	font-size: 19px; line-height: 1; padding: 6px 8px; border-radius: 8px;
	background: var(--webops-card-alt); border: 1px solid var(--webops-border);
	text-decoration: none !important; display: inline-flex; align-items: center; justify-content: center;
	transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.webops-row-actions-lg a:hover { transform: translateY(-2px); box-shadow: var(--webops-shadow-sm); background: #fff; }

/* ---------- Botón volver al panel ---------- */
.webops-volver-panel { position: fixed; left: 50%; transform: translateX(-50%); bottom: 38px; z-index: 400; margin: 0; padding: 0; border: none; }
.webops-volver-panel .webops-btn {
	display: inline-flex; align-items: center; gap: 8px; color: #fff !important;
	background: linear-gradient(120deg, #1c3f7c, #2f5fe0 60%, #3f6ff0);
	border: 1px solid rgba(255,255,255,0.18);
	box-shadow: 0 8px 20px rgba(28,63,124,0.38), 0 0 0 1px rgba(47,95,224,0.15);
	border-radius: 999px; padding: 12px 20px 12px 16px; font-weight: 700;
	animation: webopsVolverGlow 2.8s ease-in-out infinite;
	transition: transform .18s ease, box-shadow .18s ease;
}
.webops-volver-panel .webops-btn:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(28,63,124,0.45), 0 0 22px rgba(47,95,224,0.35); }
@keyframes webopsVolverGlow {
	0%, 100% { box-shadow: 0 8px 20px rgba(28,63,124,0.38), 0 0 0 1px rgba(47,95,224,0.15); }
	50%      { box-shadow: 0 8px 24px rgba(28,63,124,0.45), 0 0 16px rgba(47,95,224,0.4); }
}

/* ---------- Responsivo (proporciones por tamaño de pantalla) ---------- */
@media (max-width: 1100px) {
	.webops-kpi-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 12px; }
}
@media (max-width: 960px) {
	.webops-dash-grid { grid-template-columns: 1fr !important; }
	.webops-kanban { grid-template-columns: 1fr !important; }
	.webops-tabs { display: flex !important; flex-direction: column; gap: 10px !important; overflow: visible !important; padding: 10px; }
	.webops-tab-btn {
		padding: 14px 12px; font-size: 14.5px; width: 100%; justify-content: center; text-align: center;
		background: #ffffff !important; color: #10182b !important; opacity: 1 !important;
		border: 1px solid rgba(255,255,255,0.5) !important; border-radius: 10px !important;
		box-shadow: 0 2px 8px rgba(16,24,40,0.12);
	}
	.webops-tab-btn:hover { background: #ffffff !important; color: #10182b !important; transform: none; }
	.webops-tab-btn.is-active {
		background: var(--webops-primary) !important; color: #fff !important;
		box-shadow: 0 4px 14px rgba(28,63,124,0.4);
	}
	.webops-tab-btn.is-active:hover { background: var(--webops-primary-dark) !important; color: #fff !important; }
	.webops-tab-home { padding: 13px 12px !important; }
	.webops-tab-home-icon svg { width: 16px; height: 16px; }
}
@media (max-width: 700px) {
	.webops-grid-2, .webops-checklist { grid-template-columns: 1fr !important; }
	.webops-card { padding: 18px; }
	.webops-task-item, .webops-eval-item { flex-direction: column; align-items: flex-start; }
	.webops-task-status { width: 100%; }
	.webops-task-status select { width: 100%; }
	.webops-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; border-radius: 8px; }
	.webops-table th, .webops-table td { white-space: nowrap; }
	.webops-tabs { display: flex !important; flex-direction: column; gap: 8px !important; overflow-x: visible !important; padding: 10px; }
	.webops-tab-btn { padding: 13px 10px; font-size: 14px; width: 100%; justify-content: center; text-align: center; }
	.webops-tab-home { padding: 12px 10px !important; }
	.webops-tab-home-icon svg { width: 16px; height: 16px; }
	.webops-kpi-grid { grid-template-columns: repeat(2,1fr) !important; }
	.webops-dash-header-bottomrow { flex-direction: column; align-items: flex-start; }
	.webops-live-clock { width: 100%; justify-content: center; }
	.webops-logout-btn { padding: 9px 16px; font-size: 12.5px; }
	.webops-dash-header-actions { flex-wrap: wrap; }
}
@media (max-width: 480px) {
	.webops-wrap { margin: 14px auto; padding: 0 12px; }
	.webops-kpi-grid { grid-template-columns: repeat(2,1fr) !important; gap: 10px; }
	.webops-profile-photo-row { flex-direction: column; align-items: flex-start; }
	.webops-dash-title { font-size: 22px; }
	.webops-logout-btn { padding: 8px 12px; font-size: 12px; }
	.webops-dash-header-toprow { flex-wrap: wrap; row-gap: 10px; }
	.webops-dash-header-actions { flex-wrap: wrap; width: 100%; }
	.webops-dash-header-actions .webops-logout-btn { flex: 1 1 auto; justify-content: center; }
	.webops-volver-panel { bottom: 30px; }
	.webops-volver-panel .webops-btn { padding: 11px 16px 11px 13px; font-size: 13px; }
}

/* ==========================================================================
   THEME SYSTEM — Modo Oscuro "Corporate Tech" + Switch claro/oscuro
   Todo lo de abajo es aditivo: el tema claro de arriba no se toca.
   El atributo data-theme="dark" en .webops-wrap activa esta capa completa.
   ========================================================================== */

/* ---------- Switch de tema (header) ---------- */
.webops-theme-toggle {
	--wtt-size: 38px;
	position: relative;
	display: inline-flex !important;
	align-items: center;
	gap: 0;
	flex-shrink: 0;
	width: auto;
	height: var(--wtt-size);
	padding: 0;
	margin: 0 0 0 6px;
	background: transparent;
	border: none;
	cursor: pointer;
	font: inherit;
}
.webops-theme-toggle-track {
	position: relative;
	display: inline-block;
	width: 62px; height: var(--wtt-size);
	border-radius: 999px;
	background: linear-gradient(90deg, #cfd8ee, #e7ebf3);
	border: 1px solid var(--webops-border-light, #b9c1d6);
	box-shadow: inset 0 2px 5px rgba(16,24,40,0.12);
	transition: background .35s ease, border-color .35s ease;
}
.webops-theme-toggle-thumb {
	position: absolute; top: 3px; left: 3px;
	width: calc(var(--wtt-size) - 8px); height: calc(var(--wtt-size) - 8px);
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 2px 6px rgba(16,24,40,0.25), 0 0 0 1px rgba(16,24,40,0.04);
	transition: transform .35s cubic-bezier(.4,1.4,.5,1), background .35s ease, box-shadow .35s ease;
}
.webops-theme-toggle .webops-theme-icon {
	position: absolute; top: 50%; width: 18px; height: 18px;
	transform: translateY(-50%); pointer-events: none;
	transition: opacity .3s ease, transform .35s ease;
}
.webops-theme-icon-sun { left: 8px; color: #b3660a; opacity: 1; }
.webops-theme-icon-moon { right: 8px; color: #cbd5f5; opacity: .55; }
.webops-theme-toggle[aria-pressed="true"] .webops-theme-toggle-track,
.webops-theme-toggle.is-dark .webops-theme-toggle-track {
	background: linear-gradient(90deg, #101a34, #0d2340);
	border-color: rgba(34,211,238,0.4);
}
.webops-theme-toggle[aria-pressed="true"] .webops-theme-toggle-thumb,
.webops-theme-toggle.is-dark .webops-theme-toggle-thumb {
	transform: translateX(24px);
	background: #0b1226;
	box-shadow: 0 0 10px rgba(34,211,238,0.65), 0 0 0 1px rgba(34,211,238,0.5);
}
.webops-theme-toggle[aria-pressed="true"] .webops-theme-icon-sun,
.webops-theme-toggle.is-dark .webops-theme-icon-sun { opacity: .4; }
.webops-theme-toggle[aria-pressed="true"] .webops-theme-icon-moon,
.webops-theme-toggle.is-dark .webops-theme-icon-moon { opacity: 1; color: #67e8f9; }
.webops-theme-toggle:hover .webops-theme-toggle-track { border-color: #2f5fe0; }
.webops-theme-toggle.is-dark:hover .webops-theme-toggle-track { border-color: #22d3ee; }
.webops-theme-toggle:focus-visible { outline: 2px solid #2f5fe0; outline-offset: 3px; border-radius: 999px; }

/* ---------- Variables del tema oscuro ---------- */
.webops-wrap[data-theme="dark"] {
	--webops-bg: #070b16;
	--webops-card: #0f1730;
	--webops-card-alt: #131c38;
	--webops-border: rgba(122,155,255,0.16);
	--webops-border-light: rgba(148,180,255,0.30);
	--webops-text: #eaf0ff;
	--webops-muted: #90a0c8;
	--webops-primary: #22d3ee;
	--webops-primary-dark: #67e8f9;
	--webops-primary-soft: rgba(34,211,238,0.12);
	--webops-accent: #818cf8;
	--webops-green: #34e0a1;
	--webops-green-soft: rgba(52,224,161,0.13);
	--webops-yellow: #fbbf24;
	--webops-yellow-soft: rgba(251,191,36,0.14);
	--webops-red: #fb7185;
	--webops-red-soft: rgba(251,113,133,0.14);
	--webops-shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
	--webops-shadow-md: 0 6px 18px rgba(0,0,0,0.45), 0 0 0 1px rgba(34,211,238,0.05);
	--webops-shadow-lg: 0 20px 44px rgba(0,0,0,0.55), 0 0 26px rgba(34,211,238,0.08);
	color-scheme: dark;
	position: relative;
	isolation: isolate;
	background: var(--webops-bg);
	color: var(--webops-text);
	transition: background-color .4s ease, color .4s ease;
	/* Nunca generar scroll propio del panel en oscuro: cualquier pixel de más
	   que puedan generar los efectos decorativos (grid, halos, bordes con
	   gradiente) se recorta acá en vez de disparar un segundo scroll. El único
	   scroll debe ser el de la página/navegador. */
	overflow-y: hidden;
}

/* Elemento real (no decorativo), inyectado por JS al final de cada panel,
   para que el borde inferior del contenido quede siempre cerrado por
   contenido de verdad y no por los efectos de fondo. */
.webops-scroll-fix-anchor {
	display: block !important;
	width: 100%;
	height: 1px;
	margin: 0; padding: 0;
	clear: both;
}

/* Fondo: grid tecnológico animado + halos de luz flotantes.
   IMPORTANTE: inset: 0 exacto (no negativo) — si esto se sale de la caja de
   .webops-wrap, como el wrap ya tiene overflow-x:hidden, el navegador fuerza
   overflow-y:auto en el wrap (regla CSS: si fijás un eje, el otro dej de ser
   'visible' y pasa a 'auto') y aparece un scroll interno del panel además del
   scroll normal de la página — el bug del "doble scroll" en oscuro. */
.webops-wrap[data-theme="dark"]::before {
	content: "";
	position: absolute; inset: 0;
	z-index: -2; pointer-events: none;
	background-image:
		linear-gradient(rgba(34,211,238,0.07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(34,211,238,0.07) 1px, transparent 1px);
	background-size: 46px 46px;
	-webkit-mask-image: radial-gradient(ellipse 85% 60% at 50% 0%, #000 40%, transparent 85%);
	mask-image: radial-gradient(ellipse 85% 60% at 50% 0%, #000 40%, transparent 85%);
	animation: webopsGridDrift 22s linear infinite;
}
@keyframes webopsGridDrift {
	from { background-position: 0 0, 0 0; }
	to   { background-position: 92px 46px, 46px 92px; }
}
.webops-wrap[data-theme="dark"]::after {
	content: "";
	position: absolute; inset: 0;
	z-index: -3; pointer-events: none;
	background:
		radial-gradient(480px 320px at 12% 4%, rgba(34,211,238,0.16), transparent 65%),
		radial-gradient(420px 300px at 92% 18%, rgba(129,140,248,0.15), transparent 65%),
		radial-gradient(520px 360px at 50% 100%, rgba(52,224,161,0.07), transparent 70%);
	animation: webopsHaloFloat 6s ease-in-out infinite alternate;
}
@keyframes webopsHaloFloat {
	from { opacity: .8; }
	to   { opacity: 1; }
}

/* ---------- Tarjetas: glass + borde con gradiente animado ---------- */
.webops-wrap[data-theme="dark"] .webops-card,
.webops-wrap[data-theme="dark"] .webops-kpi,
.webops-wrap[data-theme="dark"] .webops-activo-card,
.webops-wrap[data-theme="dark"] .webops-check-row,
.webops-wrap[data-theme="dark"] .webops-eval-item,
.webops-wrap[data-theme="dark"] .webops-tool-btn,
.webops-wrap[data-theme="dark"] .webops-live-clock {
	background: linear-gradient(180deg, rgba(19,28,56,0.86), rgba(11,18,38,0.86));
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border-color: var(--webops-border);
}
.webops-wrap[data-theme="dark"] .webops-card,
.webops-wrap[data-theme="dark"] .webops-kpi {
	position: relative;
}
.webops-wrap[data-theme="dark"] .webops-card::before,
.webops-wrap[data-theme="dark"] .webops-kpi::before {
	content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
	padding: 1px;
	background: conic-gradient(from var(--webops-angle,0deg), rgba(34,211,238,0), rgba(34,211,238,0.55), rgba(129,140,248,0.5), rgba(34,211,238,0));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude;
	opacity: 0; transition: opacity .3s ease;
	animation: webopsBorderSpin 5s linear infinite paused;
}
.webops-wrap[data-theme="dark"] .webops-card:hover::before,
.webops-wrap[data-theme="dark"] .webops-kpi:hover::before {
	opacity: 1; animation-play-state: running;
}
@property --webops-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes webopsBorderSpin { to { --webops-angle: 360deg; } }
.webops-wrap[data-theme="dark"] .webops-card:hover,
.webops-wrap[data-theme="dark"] .webops-kpi:hover {
	box-shadow: var(--webops-shadow-lg);
	transform: translateY(-3px);
}
.webops-wrap[data-theme="dark"] .webops-card-tech {
	border-color: rgba(34,211,238,0.35) !important;
	box-shadow: 0 0 0 1px rgba(34,211,238,0.10), 0 14px 34px rgba(0,0,0,0.5);
}
.webops-wrap[data-theme="dark"] .webops-card-tech::before {
	background: radial-gradient(circle, rgba(34,211,238,0.22), transparent 70%);
}

/* ---------- Botones ---------- */
.webops-wrap[data-theme="dark"] .webops-btn-solid {
	background: linear-gradient(120deg, #0891b2, #22d3ee 55%, #818cf8);
	color: #06111f;
	box-shadow: 0 2px 10px rgba(34,211,238,0.25);
}
.webops-wrap[data-theme="dark"] .webops-btn-solid:hover {
	background: linear-gradient(120deg, #0ea5c7, #67e8f9 55%, #a5b4fc);
	box-shadow: 0 10px 26px rgba(34,211,238,0.35);
}
.webops-wrap[data-theme="dark"] .webops-btn-outline {
	background: rgba(19,28,56,0.7);
	border-color: var(--webops-border-light);
	color: var(--webops-text);
}
.webops-wrap[data-theme="dark"] .webops-btn-outline:hover {
	border-color: var(--webops-primary);
	color: var(--webops-primary);
	box-shadow: 0 0 0 1px rgba(34,211,238,0.15), 0 8px 20px rgba(34,211,238,0.15);
}
.webops-wrap[data-theme="dark"] .webops-tool-btn:hover {
	border-color: var(--webops-primary);
	background: var(--webops-primary-soft);
	box-shadow: 0 0 18px rgba(34,211,238,0.18);
}

/* ---------- Inputs ---------- */
.webops-wrap[data-theme="dark"] .webops-field input[type=text],
.webops-wrap[data-theme="dark"] .webops-field input[type=email],
.webops-wrap[data-theme="dark"] .webops-field input[type=date],
.webops-wrap[data-theme="dark"] .webops-field input[type=time],
.webops-wrap[data-theme="dark"] .webops-field input[type=number],
.webops-wrap[data-theme="dark"] .webops-field input[type=file],
.webops-wrap[data-theme="dark"] .webops-field select,
.webops-wrap[data-theme="dark"] .webops-field textarea,
.webops-wrap[data-theme="dark"] .webops-check-row input {
	background: rgba(7,11,22,0.75);
	border-color: var(--webops-border);
	color: var(--webops-text);
}
.webops-wrap[data-theme="dark"] .webops-field input:focus,
.webops-wrap[data-theme="dark"] .webops-field select:focus,
.webops-wrap[data-theme="dark"] .webops-field textarea:focus {
	border-color: var(--webops-primary);
	box-shadow: 0 0 0 3px var(--webops-primary-soft), 0 0 16px rgba(34,211,238,0.25);
}

/* ---------- Header / eyebrow / saludo ---------- */
.webops-wrap[data-theme="dark"] .webops-eyebrow { color: var(--webops-primary); text-shadow: 0 0 14px rgba(34,211,238,0.4); }
.webops-wrap[data-theme="dark"] .webops-greeting-nombre {
	background: linear-gradient(90deg, #22d3ee 0%, #818cf8 25%, #22d3ee 50%, #818cf8 75%, #22d3ee 100%);
	background-size: 250% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.webops-wrap[data-theme="dark"] .webops-live-clock-time { color: var(--webops-primary); text-shadow: 0 0 10px rgba(34,211,238,0.35); }
.webops-wrap[data-theme="dark"] .webops-role-pill { background: var(--webops-primary-soft); border-color: var(--webops-primary); color: var(--webops-primary); }
.webops-wrap[data-theme="dark"] .webops-kpi-online-panel { background: #0f1730; border-color: var(--webops-border); }

/* ---------- Tabs ---------- */
.webops-wrap[data-theme="dark"] .webops-tabs {
	background: linear-gradient(120deg, #0b1226 0%, #101d3d 55%, #0b1226 100%);
	border-color: rgba(34,211,238,0.25);
	box-shadow: 0 8px 26px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
}
.webops-wrap[data-theme="dark"] .webops-tab-btn { color: #cfe4ff; }
.webops-wrap[data-theme="dark"] .webops-tab-btn:hover {
	color: #06111f; background: #67e8f9;
	box-shadow: 0 4px 18px rgba(34,211,238,0.4);
}
.webops-wrap[data-theme="dark"] .webops-tab-btn.is-active {
	color: #06111f; background: linear-gradient(120deg, #22d3ee, #67e8f9);
	box-shadow: 0 0 0 1px rgba(34,211,238,0.3) inset, 0 4px 18px rgba(34,211,238,0.35), 0 0 22px rgba(34,211,238,0.5);
}
.webops-wrap[data-theme="dark"] .webops-tab-btn.is-active:hover { background: linear-gradient(120deg, #67e8f9, #a5f3fc); }
.webops-wrap[data-theme="dark"] .webops-tab-home {
	background: linear-gradient(135deg, #0f1730 0%, #182852 55%, #0f1730 130%) !important;
	background-size: 200% 200% !important;
	color: var(--webops-primary) !important;
	border-color: rgba(34,211,238,0.4) !important;
	box-shadow: 0 4px 16px rgba(0,0,0,0.4), 0 0 14px rgba(34,211,238,0.3);
}
.webops-wrap[data-theme="dark"] .webops-tab-home::after { border-color: rgba(34,211,238,0.55); }

/* ---------- Tabla ---------- */
.webops-wrap[data-theme="dark"] .webops-table th { background: var(--webops-card-alt); color: var(--webops-muted); }
.webops-wrap[data-theme="dark"] .webops-table td, .webops-wrap[data-theme="dark"] .webops-table th { border-color: var(--webops-border); }
.webops-wrap[data-theme="dark"] .webops-table tbody tr:hover { background: rgba(34,211,238,0.06); }
.webops-wrap[data-theme="dark"] .webops-row-top { background: var(--webops-primary-soft); }

/* ---------- Tags / badges / pulse dots ---------- */
.webops-wrap[data-theme="dark"] .webops-tag { background: var(--webops-card-alt); border-color: var(--webops-border); color: var(--webops-muted); }
.webops-wrap[data-theme="dark"] .webops-alert { background: rgba(255,255,255,0.03); }
.webops-wrap[data-theme="dark"] .webops-alert-success { background: var(--webops-green-soft); border-color: var(--webops-green); color: var(--webops-green); }
.webops-wrap[data-theme="dark"] .webops-alert-warning { background: var(--webops-yellow-soft); border-color: var(--webops-yellow); color: var(--webops-yellow); }

/* ---------- Scrollbars dentro del panel (oscuro) ---------- */
.webops-wrap[data-theme="dark"] .webops-task-list::-webkit-scrollbar-thumb { background: rgba(34,211,238,0.35); }
.webops-wrap[data-theme="dark"] .webops-task-list::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); }

/* Las animaciones decorativas del sistema no se desactivan por prefers-reduced-motion
   (igual criterio ya validado en las landings de La Academia / ITmedios). */